Scroll Area

1"use client";
2 
3import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
4import type * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8type ScrollAreaProps = ScrollAreaPrimitive.Root.Props & {
9  scrollFade?: boolean;
10  scrollbarGutter?: boolean;
11  hideScrollbar?: boolean;
12  scrollRef?: React.Ref<HTMLDivElement>;
13  contentRef?: React.Ref<HTMLDivElement>;
14};
15 
16function ScrollArea({
17  className,
18  children,
19  scrollFade = true,
20  scrollbarGutter = false,
21  hideScrollbar = false,
22  scrollRef,
23  contentRef,
24  ...props
25}: ScrollAreaProps) {
26  return (
27    <ScrollAreaPrimitive.Root
28      data-slot="scroll-area"
29      className={cn("relative flex min-h-0 min-w-0 overflow-hidden", className)}
30      {...props}
31    >
32      <ScrollAreaPrimitive.Viewport
33        data-slot="scroll-area-viewport"
34        ref={scrollRef}
35        className={cn(
36          "flex-1 rounded-[inherit] outline-none [scrollbar-width:none] focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 data-has-overflow-x:overscroll-x-contain [&::-webkit-scrollbar]:hidden",
37          scrollFade &&
38            "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]",
39          scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pr-2.5",
40        )}
41      >
42        <ScrollAreaPrimitive.Content data-slot="scroll-area-content" ref={contentRef}>
43          {children}
44        </ScrollAreaPrimitive.Content>
45      </ScrollAreaPrimitive.Viewport>
46      {!hideScrollbar && (
47        <>
48          <ScrollBar orientation="vertical" />
49          <ScrollBar orientation="horizontal" />
50        </>
51      )}
52      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
53    </ScrollAreaPrimitive.Root>
54  );
55}
56 
57function ScrollBar({
58  className,
59  orientation = "vertical",
60  ...props
61}: ScrollAreaPrimitive.Scrollbar.Props) {
62  return (
63    <ScrollAreaPrimitive.Scrollbar
64      data-slot="scroll-area-scrollbar"
65      orientation={orientation}
66      className={cn(
67// … truncated