Scroll Area

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/registry/optics/lib/utils";
6 
7const ScrollArea = React.forwardRef(
8	(
9		{
10			className = "",
11			children = null,
12			scrollHideDelay = 0,
13			viewportClassName = "",
14			maskClassName = "",
15			maskHeight = 30,
16			maskColor = undefined,
17			...props
18		},
19		ref,
20	) => {
21		const [showMask, setShowMask] = React.useState({
22			top: false,
23			bottom: false,
24			left: false,
25			right: false,
26		});
27		const viewportRef = React.useRef(null);
28 
29		const checkScrollability = React.useCallback(() => {
30			const element = viewportRef.current;
31			if (!element) return;
32 
33			const {
34				scrollTop,
35				scrollLeft,
36				scrollWidth,
37				clientWidth,
38				scrollHeight,
39				clientHeight,
40			} = element;
41			setShowMask((prev) => ({
42				...prev,
43				top: scrollTop > 0,
44				bottom: scrollTop + clientHeight < scrollHeight - 1,
45				left: scrollLeft > 0,
46				right: scrollLeft + clientWidth < scrollWidth - 1,
47			}));
48		}, []);
49 
50		React.useEffect(() => {
51			if (typeof window === "undefined") return;
52 
53			const element = viewportRef.current;
54			if (!element) return;
55 
56			const controller = new AbortController();
57			const { signal } = controller;
58 
59			const resizeObserver = new ResizeObserver(checkScrollability);
60			resizeObserver.observe(element);
61 
62			element.addEventListener("scroll", checkScrollability, { signal });
63			window.addEventListener("resize", checkScrollability, { signal });
64 
65			checkScrollability();
66 
67			return () => {
68				controller.abort();
69				resizeObserver.disconnect();
70			};
71		}, [checkScrollability]);
72 
73		return (
74			<div
75				ref={ref}
76				role="group"
77				data-slot="scroll-area"
78				aria-roledescription="scroll area"
79				className={cn("relative overflow-hidden", className)}
80				{...props}
81			>
82				<div
83					ref={viewportRef}
84					data-slot="scroll-area-viewport"
85					className={cn(
86						"size-full overflow-auto rounded-[inherit] scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
87						viewportClassName,
88					)}
89					tabIndex={0}
90				>
91					{children}
92				</div>
93 
94				{maskHeight > 0 && (
95					<ScrollMask
96						showMask={showMask}
97						className={maskClassName}
98						maskHeight={maskHeight}
99						maskColor={maskColor}
100					/>
101				)}
102			</div>
103		);
104	},
105);
106 
107ScrollArea.displayName = "ScrollArea";
108 
109const ScrollBar = () => null;
110 
111const ScrollMask = ({
112	showMask,
113	maskHeight,
114	maskColor = undefined,
115	className = "",
116	...props
117}) => {
118// … truncated