@tamagui/select 1.0.1-beta.118 → 1.0.1-beta.121

package/src/SelectImpl.tsx

@@ -1,18 +1,24 @@
 import {
+  SideObject,
   detectOverflow,
   flip,
+  inner,
   offset,
+  shift,
   size,
   useClick,
   useDismiss,
   useFloating,
+  useInnerOffset,
   useInteractions,
   useListNavigation,
   useRole,
   useTypeahead,
 } from '@floating-ui/react-dom-interactions'
 import { usePrevious } from '@radix-ui/react-use-previous'
+import { useForceUpdate, useIsTouchDevice } from '@tamagui/core'
 import * as React from 'react'
+import { flushSync } from 'react-dom'
 
 import { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'
 import { SelectProvider, useSelectContext } from './context'
@@ -26,36 +32,35 @@ export type SelectImplProps = ScopedProps<SelectProps> & {
 
 // TODO use id for focusing from label
 export const SelectInlineImpl = (props: SelectImplProps) => {
-  const {
-    __scopeSelect,
-    children,
-    open = false,
-    activeIndexRef,
-    selectedIndexRef,
-    listContentRef,
-  } = props
+  const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props
 
   const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)
   const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } =
     selectContext
-  const [showArrows, setShowArrows] = React.useState(false)
   const [scrollTop, setScrollTop] = React.useState(0)
-  const prevActiveIndex = usePrevious<number | null>(activeIndex)
+  const touch = useIsTouchDevice()
 
   const listItemsRef = React.useRef<Array<HTMLElement | null>>([])
+  const overflowRef = React.useRef<null | SideObject>(null)
+  const upArrowRef = React.useRef<HTMLDivElement | null>(null)
+  const downArrowRef = React.useRef<HTMLDivElement | null>(null)
+  const allowSelectRef = React.useRef(false)
+  const allowMouseUpRef = React.useRef(true)
+  const selectTimeoutRef = React.useRef<any>()
 
   const [controlledScrolling, setControlledScrolling] = React.useState(false)
-  const [middlewareType, setMiddlewareType] = React.useState<'align' | 'fallback'>('align')
+  const [fallback, setFallback] = React.useState(false)
+  const [innerOffset, setInnerOffset] = React.useState(0)
+  const [blockSelection, setBlockSelection] = React.useState(false)
+  const floatingStyle = React.useRef({})
 
   // Wait for scroll position to settle before showing arrows to prevent
   // interference with pointer events.
   React.useEffect(() => {
     const frame = requestAnimationFrame(() => {
-      setShowArrows(open)
-
       if (!open) {
         setScrollTop(0)
-        setMiddlewareType('align')
+        setFallback(false)
         setActiveIndex(null)
         setControlledScrolling(false)
       }
@@ -65,113 +70,68 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }
   }, [open, setActiveIndex])
 
-  function getFloatingPadding(floating: HTMLElement | null) {
-    if (!floating) {
-      return 0
-    }
-    return Number(getComputedStyle(floating).paddingLeft?.replace('px', ''))
-  }
-
-  const { x, y, reference, floating, strategy, context, refs, middlewareData, update } =
-    useFloating({
-      open,
-      onOpenChange: setOpen,
-      placement: 'bottom',
-      middleware:
-        middlewareType === 'align'
-          ? [
-              offset(({ rects }) => {
-                const index = activeIndexRef.current ?? selectedIndexRef.current
-
-                if (index == null) {
-                  return 0
-                }
-
-                const item = listItemsRef.current[index]
-
-                if (item == null) {
-                  return 0
-                }
-
-                const offsetTop = item.offsetTop
-                const itemHeight = item.offsetHeight
-                const height = rects.reference.height
-
-                return -offsetTop - height - (itemHeight - height) / 2
-              }),
-              // Custom `size` that can handle the opposite direction of the placement
-              {
-                name: 'size',
-                async fn(args) {
-                  const {
-                    elements: { floating },
-                    rects: { reference },
-                    middlewareData,
-                  } = args
-
-                  const overflow = await detectOverflow(args, {
-                    padding: WINDOW_PADDING,
-                  })
-
-                  const top = Math.max(0, overflow.top)
-                  const bottom = Math.max(0, overflow.bottom)
-                  const nextY = args.y + top
-
-                  if (middlewareData.size?.skip) {
-                    return {
-                      y: nextY,
-                      data: {
-                        y: middlewareData.size.y,
-                      },
-                    }
-                  }
-
-                  Object.assign(floating.style, {
-                    maxHeight: `${floating.scrollHeight - Math.abs(top + bottom)}px`,
-                    minWidth: `${reference.width + getFloatingPadding(floating) * 2}px`,
-                  })
+  const updateFloatingSize = size({
+    apply({
+      availableHeight,
+      rects: {
+        reference: { width },
+      },
+    }) {
+      floatingStyle.current = {
+        width: width,
+        maxHeight: availableHeight,
+      }
+    },
+    padding: WINDOW_PADDING,
+  })
 
-                  return {
-                    y: nextY,
-                    data: {
-                      y: top,
-                      skip: true,
-                    },
-                    reset: {
-                      rects: true,
-                    },
-                  }
-                },
-              },
-            ]
-          : [
-              offset(5),
-              flip(),
-              size({
-                apply({ rects, availableHeight, elements }) {
-                  Object.assign(elements.floating.style, {
-                    width: `${rects.reference.width}px`,
-                    maxHeight: `${availableHeight}px`,
-                  })
-                },
-                padding: WINDOW_PADDING,
-              }),
-            ],
-    })
+  const { x, y, reference, floating, strategy, context, refs } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom-start',
+    middleware: fallback
+      ? [
+          offset(5),
+          ...[
+            touch
+              ? shift({ crossAxis: true, padding: WINDOW_PADDING })
+              : flip({ padding: WINDOW_PADDING }),
+          ],
+          updateFloatingSize,
+        ]
+      : [
+          inner({
+            listRef: listItemsRef,
+            overflowRef,
+            index: selectedIndex,
+            offset: innerOffset,
+            onFallbackChange: setFallback,
+            padding: 10,
+            minItemsVisible: touch ? 10 : 4,
+            referenceOverflowThreshold: 20,
+          }),
+          updateFloatingSize,
+        ],
+  })
 
   const floatingRef = refs.floating
 
-  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD
+  const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD
   const showDownArrow =
-    showArrows &&
+    open &&
     floatingRef.current &&
     scrollTop <
       floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD
 
   const interactions = useInteractions([
     useClick(context, { pointerDown: true }),
+    useDismiss(context, { outsidePointerDown: false }),
     useRole(context, { role: 'listbox' }),
-    useDismiss(context),
+    useInnerOffset(context, {
+      enabled: !fallback,
+      onChange: setInnerOffset,
+      overflowRef,
+    }),
     useListNavigation(context, {
       listRef: listItemsRef,
       activeIndex,
@@ -186,304 +146,148 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }),
   ])
 
-  const increaseHeight = React.useCallback(
-    (floating: HTMLElement, amount = 0) => {
-      if (middlewareType === 'fallback') {
-        return
-      }
-
-      const currentMaxHeight = Number(floating.style.maxHeight.replace('px', ''))
-      const currentTop = Number(floating.style.top.replace('px', ''))
-      const rect = floating.getBoundingClientRect()
-      const rectTop = rect.top
-      const rectBottom = rect.bottom
-      const viewportHeight = visualViewport?.height ?? 0
-      const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2
-
-      if (
-        amount < 0 &&
-        selectedIndexRef.current != null &&
-        Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)
-      ) {
-        floating.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`
-      }
-
-      if (
-        amount > 0 &&
-        Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) &&
-        floating.scrollHeight > floating.offsetHeight
-      ) {
-        const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount)
-
-        const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount)
-
-        Object.assign(floating.style, {
-          maxHeight: `${nextMaxHeight}px`,
-          top: `${nextTop}px`,
-        })
-
-        if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {
-          floating.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating)
-        }
-
-        return currentTop - nextTop
-      }
+  const interactionsContext = {
+    ...interactions,
+    getReferenceProps() {
+      return interactions.getReferenceProps({
+        ref: reference,
+        className: 'SelectTrigger',
+        onKeyDown(event) {
+          if (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {
+            event.preventDefault()
+            setOpen(true)
+          }
+        },
+      })
     },
-    [middlewareType, selectedIndexRef]
-  )
-
-  const touchPageYRef = React.useRef<number | null>(null)
-
-  const handleWheel = React.useCallback(
-    (event: WheelEvent | TouchEvent) => {
-      const pinching = event.ctrlKey
+    getFloatingProps(props) {
+      return interactions.getFloatingProps({
+        ref: floating,
+        className: 'Select',
+        ...props,
+        style: {
+          position: strategy,
+          top: y ?? '',
+          left: x ?? '',
+          outline: 0,
+          listStyleType: 'none',
+          scrollbarWidth: 'none',
+          ...floatingStyle.current,
+          ...props?.style,
+        },
+        onPointerEnter() {
+          setControlledScrolling(false)
+        },
+        onPointerMove() {
+          setControlledScrolling(false)
+        },
+        onKeyDown() {
+          setControlledScrolling(true)
+        },
+        onContextMenu(e) {
+          e.preventDefault()
+        },
+        onScroll(event) {
+          // In React 18, the ScrollArrows need to synchronously know this value to prevent
+          // painting at the wrong time.
+          flushSync(() => setScrollTop(event.currentTarget.scrollTop))
+        },
+      })
+    },
+  }
 
-      const currentTarget = event.currentTarget as HTMLElement
+  // effects
 
-      function isWheelEvent(event: any): event is WheelEvent {
-        return typeof event.deltaY === 'number'
-      }
+  React.useLayoutEffect(() => {
+    if (open) {
+      selectTimeoutRef.current = setTimeout(() => {
+        allowSelectRef.current = true
+      }, 300)
 
-      function isTouchEvent(event: any): event is TouchEvent {
-        return event.touches != null
+      return () => {
+        clearTimeout(selectTimeoutRef.current)
       }
+    } else {
+      allowSelectRef.current = false
+      allowMouseUpRef.current = true
+      setInnerOffset(0)
+      setFallback(false)
+      setBlockSelection(false)
+    }
+  }, [open])
 
+  // Replacement for `useDismiss` as the arrows are outside of the floating
+  // element DOM tree.
+  React.useLayoutEffect(() => {
+    function onPointerDown(e: PointerEvent) {
+      const target = e.target as Node
       if (
-        Math.abs(
-          (currentTarget?.offsetHeight ?? 0) - ((visualViewport?.height ?? 0) - WINDOW_PADDING * 2)
-        ) > 1 &&
-        !pinching
+        !refs.floating.current?.contains(target) &&
+        !upArrowRef.current?.contains(target) &&
+        !downArrowRef.current?.contains(target)
       ) {
-        event.preventDefault()
-      } else if (isWheelEvent(event) && isFirefox) {
-        // Firefox needs this to propagate scrolling
-        // during momentum scrolling phase if the
-        // height reached its maximum (at boundaries)
-        currentTarget.scrollTop += event.deltaY
-      }
-
-      if (!pinching) {
-        let delta = 5
-
-        if (isTouchEvent(event)) {
-          const currentPageY = touchPageYRef.current
-          const pageY = event.touches[0]?.pageY
-
-          if (pageY != null) {
-            touchPageYRef.current = pageY
-
-            if (currentPageY != null) {
-              delta = currentPageY - pageY
-            }
-          }
-        }
-
-        increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta)
-        setScrollTop(currentTarget.scrollTop)
-        // Ensure derived data (scroll arrows) is fresh
-        forceUpdate()
+        setOpen(false)
       }
-    },
-    [forceUpdate, increaseHeight]
-  )
-
-  // Handle `onWheel` event in an effect to remove the `passive` option so we
-  // can .preventDefault() it
-  React.useEffect(() => {
-    function onTouchEnd() {
-      touchPageYRef.current = null
     }
 
-    const floating = floatingRef.current
-    if (open && floating && middlewareType === 'align') {
-      floating.addEventListener('wheel', handleWheel)
-      floating.addEventListener('touchmove', handleWheel)
-      floating.addEventListener('touchend', onTouchEnd, { passive: true })
+    if (open) {
+      document.addEventListener('pointerdown', onPointerDown)
       return () => {
-        floating.removeEventListener('wheel', handleWheel)
-        floating.removeEventListener('touchmove', handleWheel)
-        floating.removeEventListener('touchend', onTouchEnd)
+        document.removeEventListener('pointerdown', onPointerDown)
       }
     }
-  }, [open, floatingRef, handleWheel, middlewareType])
+  }, [open, refs, setOpen])
 
-  // Ensure the menu remains attached to the reference element when resizing.
-  React.useEffect(() => {
-    window.addEventListener('resize', update)
-    return () => {
-      window.removeEventListener('resize', update)
-    }
-  }, [update])
-
-  // Scroll the active or selected item into view when in `controlledScrolling`
-  // mode (i.e. arrow key nav).
+  // Scroll the `activeIndex` item into view only in "controlledScrolling"
+  // (keyboard nav) mode.
   React.useLayoutEffect(() => {
-    const floating = floatingRef.current
-
-    if (open && controlledScrolling && floating) {
-      const item =
-        activeIndex != null
-          ? listItemsRef.current[activeIndex]
-          : selectedIndex != null
-          ? listItemsRef.current[selectedIndex]
-          : null
-
-      if (item && prevActiveIndex != null) {
-        const itemHeight = listItemsRef.current[prevActiveIndex]?.offsetHeight ?? 0
-
-        const floatingHeight = floating.offsetHeight
-        const top = item.offsetTop
-        const bottom = top + itemHeight
-
-        if (top < floating.scrollTop + 20) {
-          const diff = floating.scrollTop - top + 20
-          floating.scrollTop -= diff
-
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            increaseHeight(floating, -diff)
-          }
-        } else if (bottom > floatingHeight + floating.scrollTop - 20) {
-          const diff = bottom - floatingHeight - floating.scrollTop + 20
-
-          floating.scrollTop += diff
-
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            floating.scrollTop -= increaseHeight(floating, diff) ?? 0
-          }
+    if (open && controlledScrolling) {
+      requestAnimationFrame(() => {
+        if (activeIndex != null) {
+          listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })
         }
-      }
+      })
     }
-  }, [
-    open,
-    controlledScrolling,
-    prevActiveIndex,
-    activeIndex,
-    selectedIndex,
-    floatingRef,
-    increaseHeight,
-  ])
 
-  // Sync the height and the scrollTop values and device whether to use fallback
-  // positioning.
-  React.useLayoutEffect(() => {
-    const floating = refs.floating.current
-    const reference = refs.reference.current
-
-    if (open && floating && reference && floating.offsetHeight < floating.scrollHeight) {
-      const referenceRect = reference.getBoundingClientRect()
-
-      if (middlewareType === 'fallback') {
-        const item = listItemsRef.current[selectedIndex]
-        if (item) {
-          floating.scrollTop = item.offsetTop - floating.clientHeight + referenceRect.height
-        }
-        return
-      }
-
-      floating.scrollTop = middlewareData.size?.y
-
-      const closeToBottom =
-        (visualViewport?.height ?? 0) + getVisualOffsetTop() - referenceRect.bottom <
-        FALLBACK_THRESHOLD
-      const closeToTop = referenceRect.top < FALLBACK_THRESHOLD
-
-      if (floating.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
-        setMiddlewareType('fallback')
-      }
-    }
-  }, [
-    open,
-    increaseHeight,
-    selectedIndex,
-    middlewareType,
-    refs.floating,
-    refs.reference,
-    // Always re-run this effect when the position has been computed so the
-    // .scrollTop change works with fresh sizing.
-    middlewareData,
-  ])
+    setScrollTop(refs.floating.current?.scrollTop ?? 0)
+  }, [open, refs, controlledScrolling, activeIndex])
 
+  // Scroll the `selectedIndex` into view upon opening the floating element.
   React.useLayoutEffect(() => {
-    if (open && selectedIndex != null) {
+    if (open && fallback) {
       requestAnimationFrame(() => {
-        listItemsRef.current[selectedIndex]?.focus({ preventScroll: true })
+        if (selectedIndex != null) {
+          listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })
+        }
       })
     }
-  }, [listItemsRef, selectedIndex, open])
-
-  // Wait for scroll position to settle before showing arrows to prevent
-  // interference with pointer events.
-  React.useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open)
+  }, [open, fallback, selectedIndex])
 
-      if (!open) {
-        setScrollTop(0)
-        setMiddlewareType('align')
-        setActiveIndex(null)
-        setControlledScrolling(false)
-      }
-    })
-    return () => cancelAnimationFrame(frame)
-  }, [open, setActiveIndex])
+  // Unset the height limiting for fallback mode. This gets executed prior to
+  // the positioning call.
+  React.useLayoutEffect(() => {
+    if (refs.floating.current && fallback) {
+      refs.floating.current.style.maxHeight = ''
+    }
+  }, [refs, fallback])
 
   // We set this to true by default so that events bubble to forms without JS (SSR)
   // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true
   // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)
   // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)
+
   return (
     <SelectProvider
       scope={__scopeSelect}
       {...(selectContext as Required<typeof selectContext>)}
-      increaseHeight={increaseHeight}
+      setScrollTop={setScrollTop}
+      setInnerOffset={setInnerOffset}
       floatingRef={floatingRef}
       setValueAtIndex={(index, value) => {
         listContentRef.current[index] = value
       }}
-      interactions={{
-        ...interactions,
-        getReferenceProps() {
-          return interactions.getReferenceProps({
-            ref: reference,
-            className: 'SelectTrigger',
-            onKeyDown(event) {
-              if (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {
-                event.preventDefault()
-                setOpen(true)
-              }
-            },
-          })
-        },
-        getFloatingProps(props) {
-          return interactions.getFloatingProps({
-            ref: floating,
-            className: 'Select',
-            ...props,
-            style: {
-              position: strategy,
-              top: y ?? '',
-              left: x ?? '',
-              outline: 0,
-              listStyleType: 'none',
-              scrollbarWidth: 'none',
-              userSelect: 'none',
-              ...props?.style,
-            },
-            onPointerEnter() {
-              setControlledScrolling(false)
-            },
-            onPointerMove() {
-              setControlledScrolling(false)
-            },
-            onKeyDown() {
-              setControlledScrolling(true)
-            },
-            onScroll(event) {
-              setScrollTop(event.currentTarget.scrollTop)
-            },
-          })
-        },
-      }}
+      fallback={fallback}
+      interactions={interactionsContext}
       floatingContext={context}
       activeIndex={activeIndex}
       canScrollDown={!!showDownArrow}
@@ -491,6 +295,12 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
       controlledScrolling
       dataRef={context.dataRef}
       listRef={listItemsRef}
+      blockSelection={blockSelection}
+      allowMouseUpRef={allowMouseUpRef}
+      upArrowRef={upArrowRef}
+      downArrowRef={downArrowRef}
+      selectTimeoutRef={selectTimeoutRef}
+      allowSelectRef={allowSelectRef}
     >
       {children}
       {/* {isFormControl ? (