Scroller

1"use client";
2 
3import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
4import {
5  useCallback,
6  useEffect,
7  useLayoutEffect,
8  useRef,
9  useState,
10} from "react";
11import type * as React from "react";
12import { cn } from "@/lib/utils";
13import { selectionFocus } from "@/lib/recipes";
14 
15const useIsoLayoutEffect =
16  typeof window !== "undefined" ? useLayoutEffect : useEffect;
17 
18type RtlScrollType = "default" | "negative" | "reverse";
19 
20let rtlScrollType: RtlScrollType | undefined;
21 
22// Browsers expose three different coordinate models for RTL scrollLeft.
23function detectRtlScrollType(): RtlScrollType {
24  if (rtlScrollType) return rtlScrollType;
25 
26  const viewport = document.createElement("div");
27  const content = document.createElement("div");
28  viewport.dir = "rtl";
29  viewport.style.cssText =
30    "position:absolute;top:-1000px;width:4px;height:1px;overflow:scroll";
31  content.style.width = "8px";
32  viewport.append(content);
33  document.body.append(viewport);
34 
35  if (viewport.scrollLeft > 0) {
36    rtlScrollType = "default";
37  } else {
38    viewport.scrollLeft = 1;
39    rtlScrollType = viewport.scrollLeft === 0 ? "negative" : "reverse";
40  }
41 
42  viewport.remove();
43  return rtlScrollType;
44}
45 
46function getLogicalScrollOffset(
47  element: HTMLElement,
48  isRtl: boolean,
49): number {
50  const maxOffset = Math.max(0, element.scrollWidth - element.clientWidth);
51  if (!isRtl) {
52    return Math.min(maxOffset, Math.max(0, element.scrollLeft));
53  }
54 
55  const scrollType = detectRtlScrollType();
56  const offset =
57    scrollType === "default"
58      ? maxOffset - element.scrollLeft
59      : scrollType === "negative"
60        ? -element.scrollLeft
61        : element.scrollLeft;
62 
63  return Math.min(maxOffset, Math.max(0, offset));
64}
65 
66export type ScrollerOverflow = "x" | "y" | "both";
67 
68export interface ScrollerProps
69  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
70  /** Scroll axis. `x` for horizontal rails, `y` for stacked feeds, `both` for a grid canvas. */
71  overflow?: ScrollerOverflow;
72  /**
73   * Fade the edge of the scroll region when there's more content in that
74   * direction (via `mask-image`). Default `true`. Only meaningful for
75   * `overflow="x"` and `overflow="y"`.
76   */
77  fade?: boolean;
78  /** Fade width in pixels. Default 32. */
79  fadeWidth?: number;
80  /** Class on the inner content wrapper: apply gap here for rail spacing. */
81  childrenContainerClassName?: string;
82  /** Accessible name applied while the viewport is scrollable. */
83// … truncated