@tamagui/select 3.0.0-beta.924.1 → 3.0.1

package/src/SelectImpl.tsx

@@ -1,12 +1,10 @@
 import {
-  autoUpdate,
   inner,
   offset,
   size,
   useClick,
   useFloatingRaw as useFloatingDom,
   useInteractions,
-  useInnerOffset,
   useListNavigation,
   useRole,
   useTypeahead,
@@ -17,7 +15,6 @@ import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { createChangeEventDetails, useEvent, useIsTouchDevice } from '@tamagui/core'
 import { composeEventHandlers } from '@tamagui/helpers'
 import * as React from 'react'
-import { flushSync } from 'react-dom'
 import { SCROLL_ARROW_THRESHOLD } from './constants'
 import {
   SelectItemParentProvider,
@@ -38,9 +35,8 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
   const selectItemParentContext = useSelectItemParentContext(scope)
   const { setActiveIndex, selectedIndex, activeIndexRef } = selectContext
 
-  const { requestOpenChange, registry } = selectItemParentContext
+  const { requestOpenChange, registry, lastPointerRef } = selectItemParentContext
 
-  const [scrollTop, setScrollTop] = React.useState(0)
   const touch = useIsTouchDevice()
 
   const listItemsRef = selectItemParentContext.listRef!
@@ -58,14 +54,12 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
 
   const [controlledScrolling, setControlledScrolling] = React.useState(false)
   const [fallback, setFallback] = React.useState(false)
-  const [innerOffset, setInnerOffset] = React.useState(0)
   const [blockSelection, setBlockSelection] = React.useState(false)
-  const floatingStyle = React.useRef({})
 
-  // sync activeIndex on open/close
   React.useEffect(() => {
     if (!open) {
-      setScrollTop(0)
+      setCanScrollUp(false)
+      setCanScrollDown(false)
       setFallback(false)
       setControlledScrolling(false)
     }
@@ -100,58 +94,62 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
   } = useFloatingDom({
     open,
     placement: 'bottom-start',
-    whileElementsMounted: autoUpdate,
     // The removed alternate stack was the logic from floating-ui,
     // but it causes issues (open, drag select, close, then re-open its not positioned "over")
     // https://github.com/floating-ui/floating-ui/blob/master/packages/react/test/visual/components/MacSelect.tsx
     middleware: [
       size({
-        apply({
-          rects: {
-            reference: { width },
-          },
-        }) {
-          Object.assign(floatingStyle.current, {
-            minWidth: width + 8,
-          })
-          if (refs.floating.current) {
-            Object.assign(refs.floating.current.style, floatingStyle.current)
-          }
+        apply({ rects, elements }) {
+          // the list overhangs the trigger by 4px a side (with the -4 cross offset)
+          elements.floating.style.minWidth = `${rects.reference.width + 8}px`
         },
       }),
       inner({
         listRef: listItemsRef,
         overflowRef,
         index: selectedIndex,
-        offset: innerOffset,
         onFallbackChange: setFallback,
-        padding: 10,
+        // arrows sit outside the scrollport, with room reserved at both screen edges
+        get padding() {
+          return (
+            10 +
+            Math.max(
+              upArrowRef.current?.offsetHeight ?? 0,
+              downArrowRef.current?.offsetHeight ?? 0
+            )
+          )
+        },
         minItemsVisible: touch ? 10 : 4,
         referenceOverflowThreshold: 20,
       }),
-      offset({ crossAxis: -5 }),
+      offset({ crossAxis: -4 }),
     ],
   } as any)
 
-  const floatingRef = refs.floating
+  // the arrows are booleans that flip at a threshold, never the scroll offset
+  // itself, so a scroll event costs no render unless an arrow appears or goes
+  const [canScrollUp, setCanScrollUp] = React.useState(false)
+  const [canScrollDown, setCanScrollDown] = React.useState(false)
+  const updateScrollArrows = React.useCallback(() => {
+    const el = refs.floating.current
+    if (!el) return
+    setCanScrollUp(el.scrollTop > SCROLL_ARROW_THRESHOLD)
+    setCanScrollDown(
+      el.scrollTop < el.scrollHeight - el.clientHeight - SCROLL_ARROW_THRESHOLD
+    )
+  }, [refs])
 
-  const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD
-  const showDownArrow =
-    open &&
-    floatingRef.current &&
-    scrollTop <
-      floatingRef.current.scrollHeight -
-        floatingRef.current.clientHeight -
-        SCROLL_ARROW_THRESHOLD
-
-  const isScrollable = showDownArrow || showUpArrow
+  const showUpArrow = open && canScrollUp
+  const showDownArrow = open && canScrollDown
 
+  // the list is placed once per open, not kept in sync: the inner middleware
+  // scrolls the list to align the selected item, so recomputing on a page
+  // scroll would yank the list out from under the user's own scroll. the list
+  // is absolutely positioned, so it rides along with page scroll on its own.
   useIsomorphicLayoutEffect(() => {
-    if (typeof window === 'undefined') return
+    if (!open) return
+    update()
     window.addEventListener('resize', update)
-    if (open) {
-      update()
-    }
     return () => window.removeEventListener('resize', update)
   }, [update, open])
 
@@ -165,47 +163,51 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     } as SelectActiveChangeDetails)
   })
 
-  // construct interaction context for our custom hooks
+  // the interaction context for the floating hooks. every hook memoizes its
+  // props on this object, and those props sit in the item context, so a new
+  // identity here re-renders every item
   const dataRef = React.useRef<{ openEvent?: Event; placement?: string }>({})
   dataRef.current.placement = computedPlacement
-  const interactionContext: FloatingInteractionContext = {
-    open,
-    onOpenChange: (nextOpen, event, reason) => {
-      requestOpenChange(
-        nextOpen,
-        createChangeEventDetails(
-          reason === 'list-navigation' ? 'keyboard' : 'trigger-press',
-          event,
-          refs.reference.current
-        ) as SelectOpenChangeDetails
-      )
-    },
-    refs: {
-      reference: refs.reference as any,
-      floating: refs.floating,
-      domReference: refs.reference as any,
-    },
-    elements: {
-      reference: (refs.reference?.current as Element) || null,
-      floating: refs.floating?.current || null,
-      domReference: (refs.reference?.current as Element) || null,
-    },
-    dataRef,
-  }
+  const onOpenChange = useEvent((nextOpen: boolean, event?: Event, reason?: string) => {
+    requestOpenChange(
+      nextOpen,
+      createChangeEventDetails(
+        reason === 'list-navigation' ? 'keyboard' : 'trigger-press',
+        event,
+        refs.reference.current
+      ) as SelectOpenChangeDetails
+    )
+  })
+  const referenceElement = (refs.reference.current as Element | null) || null
+  const floatingElement = refs.floating.current || null
+  const interactionContext: FloatingInteractionContext = React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      refs: {
+        reference: refs.reference as any,
+        floating: refs.floating,
+        domReference: refs.reference as any,
+      },
+      elements: {
+        reference: referenceElement,
+        floating: floatingElement,
+        domReference: referenceElement,
+      },
+      dataRef,
+    }),
+    [open, onOpenChange, refs, referenceElement, floatingElement]
+  )
 
   const interactionsProps = [
     useClick(interactionContext, { event: 'mousedown', keyboardHandlers: false }),
     // useDismiss removed - already handled by Dismissable in SelectContent
     useRole(interactionContext, { role: 'listbox' }),
-    useInnerOffset(interactionContext, {
-      enabled: !fallback && isScrollable,
-      onChange: setInnerOffset,
-      overflowRef,
-      scrollRef: refs.floating,
-    }),
     useListNavigation(interactionContext, {
       listRef: listItemsRef,
-      activeIndex: selectContext.activeIndex ?? 0,
+      // items focus themselves from the active-index emitter, and the hook's
+      // own index syncs from item focus, so it never needs the value
+      activeIndex: null,
       selectedIndex,
       onNavigate: (index) => {
         if (index !== null) {
@@ -219,12 +221,15 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
       },
       disabledIndices: registry.getDisabledIndices(),
       scrollItemIntoView: false,
+      // items own hover: the hook's leave handler would focus the viewport when
+      // a scroll moves the list under a still pointer, losing the keyboard position
+      focusItemOnHover: false,
     }),
     useTypeahead(interactionContext, {
       listRef: listContentRef,
       onMatch,
       selectedIndex,
-      activeIndex: selectContext.activeIndex,
+      activeIndex: null,
       onTypingChange: (e) => {
         state.current.isTyping = e
       },
@@ -237,12 +242,23 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }, interactionsProps)
   )
 
+  // the trigger and viewport getters. items get getItemProps alone, which is
+  // stable once the list mounts, so the floating element mounting (a new
+  // identity here) never re-renders the list
   const interactionsContext = React.useMemo(() => {
     return {
-      ...interactions,
       getReferenceProps(props: Record<string, any> = {}) {
         return interactions.getReferenceProps({
           ...props,
+          // the press that opens is the pointer's last real position: WebKit
+          // replays a mousemove there whenever the list scrolls under it (say a
+          // keyboard move scrolling the next item into view), and that replay
+          // must not read as a hover
+          onMouseDown: composeEventHandlers(props.onMouseDown, (event: any) => {
+            const last = lastPointerRef.current
+            last.x = event.clientX
+            last.y = event.clientY
+          }),
           onKeyDown: composeEventHandlers(props.onKeyDown, (event: any) => {
             latestKeyboardEventRef.current = event.nativeEvent || event
             if (
@@ -266,17 +282,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
       getFloatingProps(props) {
         return interactions.getFloatingProps({
           ref: refs.floating,
-          className: 'Select',
           ...props,
-          style: {
-            position: strategy,
-            top: y ?? '',
-            left: x ?? '',
-            outline: 0,
-            scrollbarWidth: 'none',
-            ...floatingStyle.current,
-            ...props?.style,
-          },
           onPointerEnter() {
             setControlledScrolling(false)
             state.current.isMouseOutside = false
@@ -295,15 +301,16 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
           onContextMenu(e) {
             e.preventDefault()
           },
-          onScroll(event) {
-            flushSync(() => {
-              setScrollTop(event.currentTarget.scrollTop)
-            })
-          },
+          onScroll: updateScrollArrows,
         })
       },
     }
-  }, [refs.reference.current, x, y, refs.floating.current, interactions])
+  }, [refs, interactions, requestOpenChange, updateScrollArrows])
+
+  const floatingPosition = React.useMemo(
+    () => ({ position: strategy, top: y ?? '', left: x ?? '' }),
+    [strategy, x, y]
+  )
 
   // effects
 
@@ -322,7 +329,6 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }
     allowSelectRef.current = false
     allowMouseUpRef.current = true
-    setInnerOffset(0)
     setFallback(false)
     setBlockSelection(false)
   }, [open])
@@ -341,13 +347,18 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
       if (controlledScrolling && index != null) {
         listItemsRef.current[index]?.scrollIntoView({ block: 'nearest' })
       }
-      setScrollTop(refs.floating.current?.scrollTop ?? 0)
+      updateScrollArrows()
     }
 
     scrollActiveIntoView(activeIndexRef.current)
 
     return selectItemParentContext.activeIndexSubscribe(scrollActiveIntoView)
-  }, [open, refs, controlledScrolling, selectItemParentContext.activeIndexSubscribe])
+  }, [
+    open,
+    controlledScrolling,
+    selectItemParentContext.activeIndexSubscribe,
+    updateScrollArrows,
+  ])
 
   React.useEffect(() => {
     if (open && fallback) {
@@ -376,10 +387,11 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     <SelectProvider
       scope={scope}
       {...(selectContext as Required<typeof selectContext>)}
-      setScrollTop={setScrollTop}
-      setInnerOffset={setInnerOffset}
+      updateScrollArrows={updateScrollArrows}
       fallback={fallback}
       floatingContext={floatingContext as any}
+      interactions={interactionsContext}
+      floatingPosition={floatingPosition}
       canScrollDown={!!showDownArrow}
       canScrollUp={!!showUpArrow}
       controlledScrolling={controlledScrolling}
@@ -394,7 +406,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
         allowMouseUpRef={allowMouseUpRef}
         allowSelectRef={allowSelectRef}
         dataRef={dataRef as any}
-        interactions={interactionsContext}
+        getItemProps={interactions.getItemProps}
         listRef={listItemsRef}
         selectTimeoutRef={selectTimeoutRef}
       >

package/src/SelectItem.tsx

@@ -11,7 +11,7 @@ import {
 import type { GetProps } from '@tamagui/core'
 import { composeEventHandlers } from '@tamagui/helpers'
 import * as React from 'react'
-import { useSelectContext, useSelectItemParentContext } from './context'
+import { useSelectItemParentContext } from './context'
 import { getSelectOptionProps } from './selectionController'
 import type {
   SelectActiveChangeDetails,
@@ -67,12 +67,12 @@ export const SelectItem = createStyledHOC(
     } = props
     const disabled = disabledProp ?? ariaDisabled === true
 
+    // items read only the item parent context: the select context carries
+    // viewport state (position, scroll arrows) that must not re-render the list
     const context = useSelectItemParentContext(scope)
-    const selectContext = useSelectContext(scope)
-    const isAdapted = useAdaptIsActive(selectContext.adaptScope)
+    const isAdapted = useAdaptIsActive(context.adaptScope)
 
     const {
-      listRef,
       registry,
       mode,
       selectedValues,
@@ -82,9 +82,10 @@ export const SelectItem = createStyledHOC(
       allowMouseUpRef,
       allowSelectRef,
       selectTimeoutRef,
-      interactions,
+      getItemProps,
       shouldRenderWebNative,
-      setActiveIndexFast,
+      setActiveIndex,
+      lastPointerRef,
       moveActive,
       search,
     } = context
@@ -92,7 +93,6 @@ export const SelectItem = createStyledHOC(
     const isSelected = selectedValues.includes(value)
     const pendingMouseUpSelectionRef = React.useRef(false)
     const itemNodeRef = React.useRef<any>(null)
-    const [, rerenderRegistry] = React.useReducer((version) => version + 1, 0)
     const registrationRef = React.useRef<ReturnType<typeof registry.registerItem> | null>(
       null
     )
@@ -102,38 +102,13 @@ export const SelectItem = createStyledHOC(
       textValue: textValueProp,
     })
 
-    useIsomorphicLayoutEffect(
-      () => registry.subscribe(() => rerenderRegistry()),
-      [registry]
-    )
-
+    // the item never subscribes to the registry: its index is read at event
+    // time, and the owner mirrors the registry's nodes into the list ref
     useIsomorphicLayoutEffect(() => {
       const registration = registry.registerItem(initialRegistration.current)
       registrationRef.current = registration
-      const registeredNode = itemNodeRef.current
-      registration.setNode(registeredNode)
-      const registeredIndex = registry
-        .getItems()
-        .findIndex((item) => item.id === registration.id)
-      if (
-        isWeb &&
-        listRef &&
-        registeredIndex >= 0 &&
-        registeredNode instanceof HTMLElement
-      ) {
-        listRef.current[registeredIndex] = registeredNode
-      }
+      registration.setNode(itemNodeRef.current)
       return () => {
-        const currentIndex = registry
-          .getItems()
-          .findIndex((item) => item.id === registration.id)
-        if (
-          listRef &&
-          currentIndex >= 0 &&
-          listRef.current[currentIndex] === registeredNode
-        ) {
-          listRef.current[currentIndex] = null
-        }
         registrationRef.current = null
         registration.unregister()
       }
@@ -147,43 +122,41 @@ export const SelectItem = createStyledHOC(
       registrationRef.current?.setNode(itemNodeRef.current)
     })
 
-    const index = registry.getIndex(value)
+    // the only per-item state: this item is the active one. the active index
+    // itself is a ref plus an emitter, so a hover re-renders two items, not the list
+    const [isActive, setIsActive] = React.useState(false)
+    // every item hears every change; only the two whose state flips may set
+    // it, since a same-value set still renders once when updates are queued
+    const isActiveRef = React.useRef(false)
 
     React.useEffect(() => {
-      const handleActiveIndex = (i: number) => {
-        if (index === i) {
-          if (isWeb) {
-            // use rAF to focus after browser's click handling completes
-            // this prevents the trigger from stealing focus after we set it
-            requestAnimationFrame(() => {
-              listRef?.current[index]?.focus()
-            })
-          }
+      const handleActiveIndex = (i: number | null) => {
+        const next = i != null && registry.getIndex(value) === i
+        if (next !== isActiveRef.current) {
+          isActiveRef.current = next
+          setIsActive(next)
+        }
+        if (next && isWeb) {
+          // use rAF to focus after browser's click handling completes
+          // this prevents the trigger from stealing focus after we set it
+          requestAnimationFrame(() => {
+            itemNodeRef.current?.focus?.()
+          })
         }
       }
 
-      // check initial value (parent effect may have set it before we subscribed)
-      const currentActiveIndex = activeIndexRef?.current
-      if (currentActiveIndex !== null && currentActiveIndex !== undefined) {
-        handleActiveIndex(currentActiveIndex)
-      }
+      // the parent effect may have set it before we subscribed
+      handleActiveIndex(activeIndexRef?.current ?? null)
 
       return activeIndexSubscribe(handleActiveIndex)
-    }, [activeIndexRef, activeIndexSubscribe, index, listRef])
+    }, [activeIndexRef, activeIndexSubscribe, registry, value])
 
     const textId = React.useId()
 
-    const refCallback = React.useCallback(
-      (node) => {
-        itemNodeRef.current = node
-        registrationRef.current?.setNode(node)
-        if (!isWeb) return
-        if (listRef && index >= 0) {
-          listRef.current[index] = node instanceof HTMLElement ? node : null
-        }
-      },
-      [index, listRef]
-    )
+    const refCallback = React.useCallback((node) => {
+      itemNodeRef.current = node
+      registrationRef.current?.setNode(node)
+    }, [])
 
     const composedRefs = useComposedRefs(forwardedRef, refCallback)
 
@@ -203,6 +176,25 @@ export const SelectItem = createStyledHOC(
       [disabled, selectValue, value]
     )
 
+    const handleMouseMove = React.useCallback(
+      (event: any) => {
+        if (disabled) return
+        const index = registry.getIndex(value)
+        if (index < 0) return
+        const last = lastPointerRef.current
+        if (event.clientX === last.x && event.clientY === last.y) return
+        last.x = event.clientX
+        last.y = event.clientY
+        setActiveIndex(index, {
+          reason: 'item-hover',
+          event: event.nativeEvent || event,
+          trigger: event.currentTarget,
+          index,
+        } as SelectActiveChangeDetails)
+      },
+      [disabled, lastPointerRef, registry, setActiveIndex, value]
+    )
+
     const handleKeyDown = React.useCallback(
       (event: any) => {
         if (disabled) return
@@ -218,7 +210,7 @@ export const SelectItem = createStyledHOC(
           return
         }
         if (
-          !interactions &&
+          !getItemProps &&
           event.key?.length === 1 &&
           !event.metaKey &&
           !event.ctrlKey
@@ -229,11 +221,11 @@ export const SelectItem = createStyledHOC(
           allowSelectRef.current = true
         }
       },
-      [allowSelectRef, disabled, handleSelect, interactions, moveActive, search]
+      [allowSelectRef, disabled, handleSelect, getItemProps, moveActive, search]
     )
 
     const selectItemProps = React.useMemo(() => {
-      if (interactions) {
+      if (getItemProps) {
         const {
           onTouchMove,
           onTouchEnd,
@@ -244,7 +236,7 @@ export const SelectItem = createStyledHOC(
           onPress,
           ...itemProps
         } = restProps
-        const interactionProps = interactions.getItemProps({
+        const interactionProps = getItemProps({
           ...itemProps,
           onTouchMove() {
             allowSelectRef!.current = true
@@ -254,15 +246,7 @@ export const SelectItem = createStyledHOC(
             allowSelectRef!.current = false
             allowMouseUpRef!.current = true
           },
-          onMouseMove(event) {
-            if (disabled || index < 0) return
-            setActiveIndexFast?.(index, {
-              reason: 'item-hover',
-              event: event.nativeEvent || event,
-              trigger: event.currentTarget,
-              index,
-            } as SelectActiveChangeDetails)
-          },
+          onMouseMove: handleMouseMove,
           onKeyDown: handleKeyDown,
           onClick(event) {
             if (disabled) return
@@ -332,15 +316,7 @@ export const SelectItem = createStyledHOC(
       return {
         ...restProps,
         onKeyDown: composeEventHandlers(restProps.onKeyDown as any, handleKeyDown),
-        onMouseMove: composeEventHandlers(restProps.onMouseMove as any, (event: any) => {
-          if (disabled || index < 0) return
-          setActiveIndexFast?.(index, {
-            reason: 'item-hover',
-            event: event.nativeEvent || event,
-            trigger: event.currentTarget,
-            index,
-          } as SelectActiveChangeDetails)
-        }),
+        onMouseMove: composeEventHandlers(restProps.onMouseMove as any, handleMouseMove),
         onPress: composeEventHandlers(restProps.onPress as any, handleSelect),
       }
     }, [
@@ -348,12 +324,11 @@ export const SelectItem = createStyledHOC(
       allowSelectRef,
       disabled,
       handleKeyDown,
+      handleMouseMove,
       handleSelect,
-      index,
-      interactions,
+      getItemProps,
       restProps,
       selectTimeoutRef,
-      setActiveIndexFast,
     ])
 
     const accessibilityProps = getSelectOptionProps(
@@ -385,10 +360,10 @@ export const SelectItem = createStyledHOC(
             tabIndex={
               disabled
                 ? undefined
-                : isWeb && isAdapted
-                  ? index === (selectContext.activeIndex ?? selectContext.selectedIndex)
-                    ? 0
-                    : -1
+                : isWeb &&
+                    isAdapted &&
+                    (isActive || (activeIndexRef?.current == null && isSelected))
+                  ? 0
                   : -1
             }
             zIndex={100}