Scroll Area

1"use client";
2 
3// Adapted from Lina by SameerJS6 (https://lina.sameer.sh) — lina-radix
4// scroll-area. Changes from the original: Lina's gradient-only ScrollMask is
5// dropped, the scrollbar is restyled to the shape system,
6// and tw-animate-css visibility classes are swapped for a plain opacity
7// transition. Falls back to native overflow scrolling on touch-primary devices.
8 
9import {
10  createContext,
11  forwardRef,
12  useContext,
13  useEffect,
14  useRef,
15  useState,
16  type ComponentPropsWithoutRef,
17  type ComponentRef,
18} from "react";
19import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
20import { cn } from "@/lib/utils";
21import { useShape } from "@/lib/shape-context";
22import { useTouchPrimary } from "@/hooks/use-touch-primary";
23 
24// On touch-primary devices the Radix machinery is skipped entirely in favour
25// of native overflow scrolling (better physics, momentum, rubber-banding);
26// the context lets the exported ScrollBar no-op in that branch.
27const ScrollAreaContext = createContext<boolean>(false);
28 
29// Whether the scrollbar should currently be shown (hovering the area or
30// actively scrolling). Owned by ScrollArea rather than Radix's type="hover"
31// machinery: Radix only reveals on hover (never on scroll) and stacks
32// conditional Presence layers that fight
33// the CSS fade. Default true so a standalone ScrollBar stays visible.
34const ScrollbarVisibleContext = createContext<boolean>(true);
35 
36// How long the scrollbar lingers after the last scroll event before fading.
37// Hover hide is
38// immediate — the fade classes add their own 160ms grace.
39const SCROLL_LINGER_MS = 600;
40 
41type Orientation = "vertical" | "horizontal" | "both";
42 
43interface ScrollAreaProps
44  extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
45  viewportClassName?: string;
46  /** Which axes get scrollbars. Defaults to `"vertical"`. */
47  orientation?: Orientation;
48}
49 
50const ScrollArea = forwardRef<
51  ComponentRef<typeof ScrollAreaPrimitive.Root>,
52  ScrollAreaProps
53>(
54  (
55    {
56      className,
57      children,
58      // Swallowed: hide timing is owned by the fade classes + scroll linger
59      // below, not Radix's hover machinery (see type="always" note).
60      scrollHideDelay: _scrollHideDelay,
61      viewportClassName,
62      orientation = "vertical",
63      ...props
64    },
65    ref
66  ) => {
67    const isTouch = useTouchPrimary();
68 
69    // Hover + scroll visibility, driving the scrollbar fade below. Scroll
70    // reveals linger SCROLL_LINGER_MS after the last scroll event.
71// … truncated