Scroll Area

1"use client";
2 
3import type React from "react";
4import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
5 
6import { cn } from "@/lib/utils";
7 
8export function ScrollArea({
9  className,
10  children,
11  orientation = "both",
12  nativeScrollbar = false,
13  scrollFade = false,
14  scrollbarGutter = false,
15  scrollbarOverflowOnly = false,
16  viewportClassName,
17  viewportProps,
18  viewportRef,
19  ...props
20}: ScrollAreaPrimitive.Root.Props & {
21  orientation?: "vertical" | "horizontal" | "both";
22  nativeScrollbar?: boolean;
23  scrollFade?: boolean;
24  scrollbarGutter?: boolean;
25  scrollbarOverflowOnly?: boolean;
26  viewportClassName?: string;
27  viewportProps?: ScrollAreaPrimitive.Viewport.Props;
28  viewportRef?: React.Ref<HTMLDivElement>;
29}): React.ReactElement {
30  const {
31    className: viewportPropsClassName,
32    key: viewportKey,
33    ref: viewportPropsRef,
34    ...resolvedViewportProps
35  } = viewportProps ?? {};
36  const rootClassName = cn(
37    "size-full min-h-0",
38    scrollbarOverflowOnly && "scrollbar-overflow-only",
39    className,
40  );
41  const resolvedViewportClassName = cn(
42    "transition-shadows h-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-x:overscroll-x-contain data-has-overflow-y:overscroll-y-contain",
43    scrollFade &&
44      "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]",
45    scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5",
46    viewportPropsClassName,
47    viewportClassName,
48  );
49 
50  if (nativeScrollbar || !canUsePrimitiveScrollArea()) {
51    const { style: rootStyle, ...rootProps } = props;
52    const { style: viewportStyle, ...viewportHtmlProps } =
53      resolvedViewportProps;
54 
55    return (
56      <div
57        className={rootClassName}
58        style={typeof rootStyle === "function" ? undefined : rootStyle}
59        {...rootProps}
60      >
61        <div
62          key={viewportKey}
63          {...viewportHtmlProps}
64          ref={composeRefs(viewportPropsRef, viewportRef)}
65          className={cn("overflow-auto", resolvedViewportClassName)}
66          data-slot="scroll-area-viewport"
67          style={
68// … truncated