smoothschedule/activepieces-fork/packages/react-ui/src/components/ui/scroll-area.tsx

'use client';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import * as React from 'react';

import { cn } from '@/lib/utils';

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
    viewPortClassName?: string;
    orientation?: 'vertical' | 'horizontal';
    viewPortRef?: React.RefObject<HTMLDivElement>;
    showGradient?: boolean;
    gradientClassName?: string;
  }
>(
  (
    {
      className,
      children,
      viewPortClassName,
      viewPortRef,
      orientation = 'vertical',
      showGradient = false,
      gradientClassName,
      ...props
    },
    ref,
  ) => {
    const [showBottomGradient, setShowBottomGradient] = React.useState(false);
    const internalViewPortRef = React.useRef<HTMLDivElement>(null);
    const viewportRef = viewPortRef || internalViewPortRef;

    React.useEffect(() => {
      if (!showGradient || !viewportRef.current) return;

      const viewport = viewportRef.current;
      const checkScroll = () => {
        const { scrollTop, scrollHeight, clientHeight } = viewport;
        const hasScrollableContent = scrollHeight > clientHeight;
        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;

        setShowBottomGradient(hasScrollableContent && !isAtBottom);
      };

      checkScroll();
      viewport.addEventListener('scroll', checkScroll);

      const resizeObserver = new ResizeObserver(checkScroll);
      if (viewport.firstElementChild) {
        resizeObserver.observe(viewport.firstElementChild);
      }

      return () => {
        viewport.removeEventListener('scroll', checkScroll);
        resizeObserver.disconnect();
      };
    }, [showGradient, viewportRef]);

    return (
      <ScrollAreaPrimitive.Root
        ref={ref}
        className={cn('relative overflow-hidden', className)}
        {...props}
      >
        <ScrollAreaPrimitive.Viewport
          className={cn(
            'size-full rounded-[inherit] [&>div]:block!',
            viewPortClassName,
          )}
          ref={viewportRef}
        >
          {children}
        </ScrollAreaPrimitive.Viewport>
        <ScrollBar orientation={orientation} />
        <ScrollAreaPrimitive.Corner />

        {showGradient && showBottomGradient && (
          <div
            className={cn(
              'pointer-events-none absolute bottom-0 left-0 right-0 h-1/5 bg-linear-to-t from-sidebar to-transparent',
              gradientClassName,
            )}
          />
        )}
      </ScrollAreaPrimitive.Root>
    );
  },
);
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      'flex touch-none select-none transition-colors',
      orientation === 'vertical' &&
        'h-full w-2.5 border-l border-l-transparent p-px',
      orientation === 'horizontal' &&
        'h-2.5 flex-col border-t border-t-transparent p-px',
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

export { ScrollArea, ScrollBar };