feat(select): scroll buttons (#7649)

* feat: select scroll buttons

* docs: scroll buttons story added

Author: canerakdas

apps/site/next.config.mjs

@@ -84,7 +84,6 @@ const nextConfig = {
       '@radix-ui/react-accessible-icon',
       '@radix-ui/react-dropdown-menu',
       '@radix-ui/react-label',
-      '@radix-ui/react-scroll-area',
       '@radix-ui/react-select',
       '@radix-ui/react-slot',
       '@radix-ui/react-tabs',

package-lock.json

@@ -151,3 +151,11 @@
       rounded;
   }
 }
+
+.scrollIcon {
+  @apply mx-auto
+    my-1
+    size-4
+    text-neutral-700
+    dark:text-neutral-200;
+}

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

@@ -21,6 +21,13 @@ export const WithoutLabel: Story = {
   },
 };
 
+export const WithScrollButtons: Story = {
+  args: {
+    values: Array.from({ length: 100 }, (_, i) => `Item ${i}`),
+    defaultValue: 'Item 50',
+  },
+};
+
 export const DropdownLabel: Story = {
   args: {
     values: [

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
 import { useEffect, useId, useMemo, useState } from 'react';
@@ -168,16 +167,15 @@ const Select = <T extends string>({
                 [styles.inline]: inline,
               })}
             >
-              <ScrollPrimitive.Root type="auto">
-                <SelectPrimitive.Viewport>
-                  <ScrollPrimitive.Viewport>
-                    {memoizedMappedValues}
-                  </ScrollPrimitive.Viewport>
-                </SelectPrimitive.Viewport>
-                <ScrollPrimitive.Scrollbar orientation="vertical">
-                  <ScrollPrimitive.Thumb />
-                </ScrollPrimitive.Scrollbar>
-              </ScrollPrimitive.Root>
+              <SelectPrimitive.ScrollUpButton>
+                <ChevronUpIcon className={styles.scrollIcon} />
+              </SelectPrimitive.ScrollUpButton>
+              <SelectPrimitive.Viewport>
+                {memoizedMappedValues}
+              </SelectPrimitive.Viewport>
+              <SelectPrimitive.ScrollDownButton>
+                <ChevronDownIcon className={styles.scrollIcon} />
+              </SelectPrimitive.ScrollDownButton>
             </SelectPrimitive.Content>
           </SelectPrimitive.Portal>
         </SelectPrimitive.Root>

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

@@ -21,7 +21,6 @@
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-dropdown-menu": "~2.1.6",
     "@radix-ui/react-label": "~2.1.2",
-    "@radix-ui/react-scroll-area": "~1.2.3",
     "@radix-ui/react-select": "~2.1.6",
     "@radix-ui/react-tabs": "~1.1.3",
     "@radix-ui/react-toast": "~1.2.6",