feat(components): Add SelectScrollButton for scrolling dropdown, visual overflow indicator

Author: thitt7

packages/ui-components/Common/Select/SelectScrollButton/index.tsx

@@ -0,0 +1,130 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { useEffect, useRef, useState } from 'react';
+import { type FC, type RefObject } from 'react';
+
+import styles from '@node-core/ui-components/Common/Select/index.module.css';
+
+type SelectScrollButtonProps = {
+  direction: 'up' | 'down';
+  selectContentRef?: RefObject<HTMLDivElement | null>;
+  scrollAmount?: number;
+  scrollInterval?: number;
+};
+
+const SelectScrollButton: FC<SelectScrollButtonProps> = ({
+  direction,
+  selectContentRef,
+  scrollAmount = 35,
+  scrollInterval = 50,
+}) => {
+  const DirectionComponent =
+    direction === 'down' ? ChevronDownIcon : ChevronUpIcon;
+  const [isVisible, setIsVisible] = useState(false);
+  const [hasOverflow, setOverflow] = useState(false);
+  const intervalRef = useRef<number | null>(null);
+  const isScrollingRef = useRef(false);
+
+  const clearScrollInterval = () => {
+    if (intervalRef.current !== null) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  const startScrolling = () => {
+    if (!selectContentRef?.current || !isVisible || !hasOverflow) return;
+
+    clearScrollInterval();
+
+    intervalRef.current = window.setInterval(() => {
+      if (!selectContentRef.current || !isScrollingRef.current) return;
+
+      const container = selectContentRef.current;
+
+      if (direction === 'down') {
+        container.scrollBy({ top: scrollAmount, behavior: 'smooth' });
+
+        if (
+          container.scrollTop >=
+          container.scrollHeight - container.clientHeight
+        ) {
+          clearScrollInterval();
+          setIsVisible(false);
+        }
+      } else {
+        container.scrollBy({
+          top: -Math.abs(scrollAmount),
+          behavior: 'smooth',
+        });
+
+        if (container.scrollTop <= 0) {
+          clearScrollInterval();
+          setIsVisible(false);
+        }
+      }
+    }, scrollInterval);
+  };
+
+  useEffect(() => {
+    if (!selectContentRef?.current) return;
+
+    const container = selectContentRef.current;
+    setOverflow(container.scrollHeight > container.clientHeight);
+
+    const updateButtonVisibility = () => {
+      if (!container) return;
+
+      if (direction === 'down') {
+        setIsVisible(
+          container.scrollTop < container.scrollHeight - container.clientHeight
+        );
+      } else {
+        setIsVisible(container.scrollTop > 0);
+      }
+    };
+
+    updateButtonVisibility();
+
+    const handleScroll = () => {
+      updateButtonVisibility();
+
+      if (!isScrollingRef.current && intervalRef.current !== null) {
+        clearScrollInterval();
+      }
+    };
+
+    container.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', updateButtonVisibility);
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', updateButtonVisibility);
+      clearScrollInterval();
+    };
+  }, [direction, selectContentRef]);
+
+  const handleMouseEnter = () => {
+    isScrollingRef.current = true;
+    startScrolling();
+  };
+
+  const handleMouseLeave = () => {
+    isScrollingRef.current = false;
+    clearScrollInterval();
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={styles.scrollBtn}
+      data-direction={direction}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <DirectionComponent className={styles.scrollBtnIcon} aria-hidden="true" />
+    </div>
+  );
+};
+
+export default SelectScrollButton;

packages/ui-components/Common/Select/index.module.css

@@ -149,3 +149,32 @@
       rounded;
   }
 }
+
+.scrollBtn {
+  @apply sticky
+    z-10
+    flex
+    w-full
+    cursor-pointer
+    justify-center
+    bg-white
+    p-1
+    transition-colors
+    hover:bg-neutral-100
+    dark:bg-neutral-950
+    dark:hover:bg-neutral-900;
+}
+
+.scrollBtn[data-direction='down'] {
+  bottom: 0;
+}
+
+.scrollBtn[data-direction='up'] {
+  top: 0;
+}
+
+.scrollBtnIcon {
+  @apply size-5
+    text-neutral-600
+    dark:text-neutral-400;
+}

packages/ui-components/Common/Select/index.tsx

@@ -4,9 +4,10 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
-import { useEffect, useId, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useState, useRef } from 'react';
 import type { ReactElement, ReactNode } from 'react';
 
+import SelectScrollButton from '@node-core/ui-components/Common/Select/SelectScrollButton';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import type { FormattedMessage } from '@node-core/ui-components/types';
 
@@ -59,6 +60,7 @@ const Select = <T extends string>({
 }: SelectProps<T>): ReactNode => {
   const id = useId();
   const [value, setValue] = useState(defaultValue);
+  const SelectContentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => setValue(defaultValue), [defaultValue]);
 
@@ -163,6 +165,7 @@ const Select = <T extends string>({
 
           <SelectPrimitive.Portal>
             <SelectPrimitive.Content
+              ref={SelectContentRef}
               position={inline ? 'popper' : 'item-aligned'}
               className={classNames(styles.dropdown, {
                 [styles.inline]: inline,
@@ -178,6 +181,10 @@ const Select = <T extends string>({
                   <ScrollPrimitive.Thumb />
                 </ScrollPrimitive.Scrollbar>
               </ScrollPrimitive.Root>
+              <SelectScrollButton
+                direction="down"
+                selectContentRef={SelectContentRef}
+              />
             </SelectPrimitive.Content>
           </SelectPrimitive.Portal>
         </SelectPrimitive.Root>