Base UI Adaptive Scroll Area

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