Merge pull request #30 from solved-ac/feature/fix-select-type

Fix Select component

Author: shiftpsh

example/src/stories/Select.stories.tsx

@@ -70,3 +70,35 @@ CustomRender.args = {
     </>
   ),
 }
+
+export const CustomTypes = Template.bind({})
+CustomTypes.args = {
+  value: 'Select',
+  items: [
+    {
+      value: 'kr',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/kr.svg',
+      label: 'Korea',
+    },
+    {
+      value: 'gb',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/gb.svg',
+      label: 'United Kingdom',
+    },
+    {
+      value: 'us',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/us.svg',
+      label: 'United States',
+    },
+    {
+      value: 'jp',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/jp.svg',
+      label: 'Japan',
+    },
+  ],
+  render: (s: { value: string; icon: string; label: string }) => (
+    <>
+      <img src={s.icon} alt={s.label} style={{ height: '1em' }} /> {s.label}
+    </>
+  ),
+}

src/components/Select.tsx

@@ -6,15 +6,12 @@ import {
   FloatingFocusManager,
   FloatingOverlay,
   FloatingPortal,
-  inner,
   offset,
   shift,
-  SideObject,
   size,
   useClick,
   useDismiss,
   useFloating,
-  useInnerOffset,
   useInteractions,
   useListNavigation,
   useRole,
@@ -32,7 +29,7 @@ import React, {
   useState
 } from 'react'
 import { IoChevronDown } from 'react-icons/io5'
-import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { PP, PR } from '../types/PolymorphicElementProps'
 import { cssClickable, cssDisablable } from '../utils/styles'
 import { ListItem, ListItemProps } from './$List'
 import { Centering } from './Centering'
@@ -87,7 +84,7 @@ const SelectInputAdornment = styled(Centering)`
 
 type SelectItemNode = string | { value: string }
 
-export interface SelectProps<T extends SelectItemNode = string> {
+export interface SelectProps<T extends SelectItemNode> {
   fullWidth?: boolean
   disableEllipsis?: boolean
   items?: T[]
@@ -97,7 +94,7 @@ export interface SelectProps<T extends SelectItemNode = string> {
   ListItemProps?: Partial<PP<'div', ListItemProps>>
 }
 
-export const Select: PC<'button', SelectProps> = React.forwardRef(
+export const Select = React.forwardRef(
   <T extends ElementType, E extends SelectItemNode>(
     props: PP<T, SelectProps<E>>,
     ref?: PR<T>
@@ -117,16 +114,13 @@ export const Select: PC<'button', SelectProps> = React.forwardRef(
 
     const listRef = useRef<Array<HTMLElement | null>>([])
     const listContentRef = useRef<Array<string | null>>([])
-    const overflowRef = useRef<null | SideObject>(null)
     const allowSelectRef = useRef(false)
     const allowMouseUpRef = useRef(true)
     const selectTimeoutRef = useRef<any>()
 
     const [open, setOpen] = useState(false)
     const [selectedIndex, setSelectedIndex] = useState(0)
     const [activeIndex, setActiveIndex] = useState<number | null>(null)
-    const [fallback, setFallback] = useState(false)
-    const [innerOffset, setInnerOffset] = useState(0)
     const [controlledScrolling, setControlledScrolling] = useState(false)
     const [touch, setTouch] = useState(false)
 
@@ -151,38 +145,22 @@ export const Select: PC<'button', SelectProps> = React.forwardRef(
         autoUpdate(reference, floating, update, {
           animationFrame: true,
         }),
-      middleware: fallback
-        ? [
-            offset(8),
-            ...[
-              touch
-                ? shift({ crossAxis: true, padding: 8 })
-                : flip({ padding: 8 }),
-            ],
-            size({
-              apply({ elements, availableHeight, availableWidth, rects }) {
-                Object.assign(elements.floating.style, {
-                  maxHeight: `${availableHeight}px`,
-                  minWidth: `${rects.reference.width}px`,
-                  maxWidth: `${availableWidth}px`,
-                })
-              },
-              padding: 8,
-            }),
-          ]
-        : [
-            inner({
-              listRef,
-              overflowRef,
-              index: selectedIndex,
-              offset: innerOffset,
-              onFallbackChange: setFallback,
-              padding: 8,
-              minItemsVisible: touch ? 10 : 4,
-              referenceOverflowThreshold: 20,
-            }),
-            offset({ crossAxis: -4 }),
-          ],
+      middleware: [
+        offset(8),
+        ...[
+          touch ? shift({ crossAxis: true, padding: 8 }) : flip({ padding: 8 }),
+        ],
+        size({
+          apply({ elements, availableHeight, availableWidth, rects }) {
+            Object.assign(elements.floating.style, {
+              maxHeight: `${availableHeight}px`,
+              minWidth: `${rects.reference.width}px`,
+              maxWidth: `${availableWidth}px`,
+            })
+          },
+          padding: 8,
+        }),
+      ],
     })
 
     useImperativeHandle(ref, () => reference)
@@ -192,11 +170,6 @@ export const Select: PC<'button', SelectProps> = React.forwardRef(
         useClick(context),
         useDismiss(context),
         useRole(context, { role: 'listbox' }),
-        useInnerOffset(context, {
-          enabled: !fallback,
-          onChange: setInnerOffset,
-          overflowRef,
-        }),
         useListNavigation(context, {
           listRef,
           activeIndex,
@@ -222,8 +195,6 @@ export const Select: PC<'button', SelectProps> = React.forwardRef(
       }
       allowSelectRef.current = false
       allowMouseUpRef.current = true
-      setInnerOffset(0)
-      setFallback(false)
       return undefined
     }, [open])
 
@@ -255,20 +226,20 @@ export const Select: PC<'button', SelectProps> = React.forwardRef(
     }, [open, refs, controlledScrolling, activeIndex])
 
     useLayoutEffect(() => {
-      if (open && fallback) {
+      if (open) {
         requestAnimationFrame(() => {
           if (selectedIndex != null) {
             listRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })
           }
         })
       }
-    }, [open, fallback, selectedIndex])
+    }, [open, selectedIndex])
 
     useLayoutEffect(() => {
-      if (refs.floating.current && fallback) {
+      if (refs.floating.current) {
         refs.floating.current.style.maxHeight = ''
       }
-    }, [refs, fallback])
+    }, [refs])
 
     const selected = selectedIndex < items.length ? items[selectedIndex] : null