Radix Adaptive Scroll Area

1"use client";
2
3import * as React from "react";
4
5import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
6
7import { cn } from "@/lib/utils";
8
9import { useTouchPrimary } from "@/hooks/use-has-primary-touch";
10
11const ScrollAreaContext = React.createContext<boolean>(false);
12type Mask = {
13  top: boolean;
14  bottom: boolean;
15  left: boolean;
16  right: boolean;
17};
18
19const ScrollArea = React.forwardRef<
20  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
21  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
22    viewportClassName?: string;
23    /**
24     * `maskHeight` is the height of the mask in pixels.
25     * pass `0` to disable the mask
26     * @default 30
27     */
28    maskHeight?: number;
29    maskClassName?: string;
30  }
31>(({ className, children, scrollHideDelay = 0, viewportClassName, maskClassName, maskHeight = 30, ...props }, ref) => {
32  const [showMask, setShowMask] = React.useState<Mask>({
33    top: false,
34    bottom: false,
35    left: false,
36    right: false,
37  });
38  const viewportRef = React.useRef<HTMLDivElement>(null);
39  const isTouch = useTouchPrimary();
40
41  const checkScrollability = React.useCallback(() => {
42    const element = viewportRef.current;
43    if (!element) return;
44
45    const { scrollTop, scrollLeft, scrollWidth, clientWidth, scrollHeight, clientHeight } = element;
46    setShowMask((prev) => ({
47      ...prev,
48      top: scrollTop > 0,
49      bottom: scrollTop + clientHeight < scrollHeight - 1,
50      left: scrollLeft > 0,
51      right: scrollLeft + clientWidth < scrollWidth - 1,
52    }));
53  }, []);
54
55  React.useEffect(() => {
56    if (typeof window === "undefined") return;
57
58    const element = viewportRef.current;
59    if (!element) return;
60
61    const controller = new AbortController();
62    const { signal } = controller;
63
64    const resizeObserver = new ResizeObserver(checkScrollability);
65    resizeObserver.observe(element);
66
67    element.addEventListener("scroll", checkScrollability, { signal });
68    window.addEventListener("resize", checkScrollability, { signal });
69
70    // Run an initial check whenever dependencies change (including pointer mode)
71    checkScrollability();
72
73    return () => {
74      controller.abort();
75      resizeObserver.disconnect();
76    };
77  }, [checkScrollability, isTouch]);
78
79  return (
80    <ScrollAreaContext.Provider value={isTouch}>
81      {isTouch ? (
82        <div
83          ref={ref}
84          role="group"
85// … truncated