@tamagui/select 3.0.0-beta.924.1 → 3.0.1

package/src/SelectScrollButton.tsx

@@ -1,10 +1,9 @@
 import { createStyledHOC, styled, View } from '@tamagui/core'
-import { autoUpdate, offset, useFloatingRaw as useFloating } from '@tamagui/floating'
+import { autoUpdate, useFloatingRaw as useFloating } from '@tamagui/floating'
 import { useComposedRefs } from '@tamagui/compose-refs'
 import type { TamaguiElement } from '@tamagui/core'
 import { composeEventHandlers } from '@tamagui/helpers'
 import * as React from 'react'
-import { flushSync } from 'react-dom'
 
 import { useSelectContext } from './context'
 import type {
@@ -68,13 +67,12 @@ const SelectScrollButtonImpl = React.memo(
       const { scope, dir, partClassName, ...scrollIndicatorProps } = props
       const { className, onPointerEnter, onPointerLeave, ...frameProps } =
         scrollIndicatorProps
-      const { open, fallback, setScrollTop, setInnerOffset, ...context } =
-        useSelectContext(scope)
+      const { open, ...context } = useSelectContext(scope)
       const floatingRef = context.floatingContext?.refs.floating
 
-      const statusRef = React.useRef<'idle' | 'active'>('idle')
       const isVisible = context[dir === 'down' ? 'canScrollDown' : 'canScrollUp']
       const frameRef = React.useRef<any>(null)
+      const arrowRef = dir === 'up' ? context.upArrowRef : context.downArrowRef
 
       const { x, y, refs, strategy } = useFloating({
         open: open && isVisible,
@@ -83,38 +81,21 @@ const SelectScrollButtonImpl = React.memo(
           reference: floatingRef?.current,
         },
         placement: dir === 'up' ? 'top' : 'bottom',
-        middleware: [offset(({ rects }) => -rects.floating.height)],
-        whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true }),
+        whileElementsMounted: autoUpdate,
       })
 
       const setFloatingRef = React.useCallback(
         (node: TamaguiElement | null) => {
           refs.setFloating(node as HTMLElement | null)
+          if (arrowRef) arrowRef.current = node as HTMLDivElement | null
         },
-        [refs.setFloating]
+        [refs.setFloating, arrowRef]
       )
       const composedRef = useComposedRefs(forwardedRef, setFloatingRef)
 
       React.useEffect(() => {
         return () => cancelAnimationFrame(frameRef.current)
-      }, [])
-
-      if (!isVisible) {
-        return null
-      }
-
-      const onScroll = (amount: number) => {
-        const floating = floatingRef
-        if (!floating) return
-        if (fallback) {
-          if (floating.current) {
-            floating.current.scrollTop -= amount
-            flushSync(() => setScrollTop!(floating.current?.scrollTop ?? 0))
-          }
-        } else {
-          flushSync(() => setInnerOffset!((value) => value - amount))
-        }
-      }
+      }, [isVisible])
 
       return (
         <SelectScrollButtonFrame
@@ -122,13 +103,15 @@ const SelectScrollButtonImpl = React.memo(
           className={`${partClassName} ${className || ''}`.trim()}
           aria-hidden
           {...frameProps}
+          // keep hidden buttons measurable so placement reserves their actual height
+          visibility={isVisible ? 'visible' : 'hidden'}
+          pointerEvents={isVisible ? 'auto' : 'none'}
           zIndex={1000}
           position={strategy}
           left={x || 0}
           top={y || 0}
           width={`calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`}
           onPointerEnter={composeEventHandlers(onPointerEnter as any, () => {
-            statusRef.current = 'active'
             let prevNow = Date.now()
 
             function frame() {
@@ -151,11 +134,11 @@ const SelectScrollButtonImpl = React.memo(
                     : element.scrollTop + pixelsToScroll <
                       element.scrollHeight - element.clientHeight
 
-                onScroll(
+                // the viewport's own scroll handler flips the arrows
+                element.scrollTop +=
                   dir === 'up'
-                    ? Math.min(pixelsToScroll, remainingPixels)
-                    : Math.max(-pixelsToScroll, -remainingPixels)
-                )
+                    ? -Math.min(pixelsToScroll, remainingPixels)
+                    : Math.min(pixelsToScroll, remainingPixels)
 
                 if (scrollRemaining) {
                   frameRef.current = requestAnimationFrame(frame)
@@ -167,7 +150,6 @@ const SelectScrollButtonImpl = React.memo(
             frameRef.current = requestAnimationFrame(frame)
           })}
           onPointerLeave={composeEventHandlers(onPointerLeave as any, () => {
-            statusRef.current = 'idle'
             cancelAnimationFrame(frameRef.current)
           })}
         />

package/src/SelectTrigger.tsx

@@ -34,6 +34,8 @@ export const SelectTrigger = createStyledHOC(
       forwardedRef,
       context.floatingContext?.refs.setReference as any
     )
+    // whether the press in flight began as a touch, so its click opens
+    const pressIsTouch = React.useRef(false)
 
     if (itemParentContext.shouldRenderWebNative) {
       return null
@@ -55,8 +57,8 @@ export const SelectTrigger = createStyledHOC(
       }
     }
     const interactionProps =
-      process.env.TAMAGUI_TARGET === 'web' && itemParentContext.interactions
-        ? itemParentContext.interactions.getReferenceProps({
+      process.env.TAMAGUI_TARGET === 'web' && context.interactions
+        ? context.interactions.getReferenceProps({
             ...triggerProps,
             onMouseDown: composeEventHandlers(triggerProps.onMouseDown as any, () =>
               context.floatingContext?.update?.()
@@ -66,13 +68,28 @@ export const SelectTrigger = createStyledHOC(
             ...triggerProps,
             ...(isWeb
               ? {
+                  // a mouse opens on press so a press, drag and release picks
+                  // in one gesture. a touch opens on release, as a native
+                  // select does: opening on touchstart mounts the sheet
+                  // overlay under the finger, and the same tap's click then
+                  // lands on it and closes the sheet again.
                   onMouseDown: composeEventHandlers(
                     triggerProps.onMouseDown as any,
                     (event: any) => {
+                      pressIsTouch.current = event.type === 'touchstart'
+                      if (pressIsTouch.current) return
                       event.preventDefault()
                       toggleOpen(event)
                     }
                   ),
+                  onPress: composeEventHandlers(
+                    triggerProps.onPress as any,
+                    (event: any) => {
+                      if (!pressIsTouch.current) return
+                      pressIsTouch.current = false
+                      toggleOpen(event)
+                    }
+                  ),
                 }
               : {
                   onPress: composeEventHandlers(triggerProps.onPress as any, toggleOpen),

package/src/SelectViewport.native.tsx

@@ -1,6 +1,6 @@
 import {
-  AdaptContext,
   AdaptPortalContents,
+  ProvideAdaptContext,
   useAdaptContext,
   useAdaptIsActive,
 } from '@tamagui/adapt'
@@ -26,17 +26,17 @@ export const SelectViewport = createStyledHOC(
     const context = useSelectContext(scope)
     const itemParentContext = useSelectItemParentContext(scope)
     const themeName = useThemeName()
-    const adaptContext = useAdaptContext()
+    const adaptContext = useAdaptContext(context.adaptScope)
     const isAdapted = useAdaptIsActive(context.adaptScope)
 
     const contents = (
       <Theme name={themeName}>
         <ForwardSelectContext itemContext={itemParentContext} context={context}>
-          <AdaptContext.Provider {...adaptContext}>
+          <ProvideAdaptContext {...adaptContext}>
             <SelectViewportFrame {...viewportProps} ref={forwardedRef}>
               {children}
             </SelectViewportFrame>
-          </AdaptContext.Provider>
+          </ProvideAdaptContext>
         </ForwardSelectContext>
       </Theme>
     )

package/src/SelectViewport.tsx

@@ -2,10 +2,9 @@ import { AdaptPortalContents, useAdaptIsActive } from '@tamagui/adapt'
 import { AnimatePresence } from '@tamagui/animate-presence'
 import { useComposedRefs } from '@tamagui/compose-refs'
 import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { createStyledHOC, styled, View } from '@tamagui/core'
+import { createStyledHOC, splitStyleProps, styled, View } from '@tamagui/core'
 import { needsPortalRepropagation } from '@tamagui/portal'
 import { YStack } from '@tamagui/stacks'
-import { startTransition } from '@tamagui/start-transition'
 import * as React from 'react'
 import { VIEWPORT_NAME } from './constants'
 import {
@@ -27,6 +26,15 @@ export const SelectViewportFrame = styled(View, {
 
 const needsRepropagation = needsPortalRepropagation()
 
+// the viewport's styles dress the floating list (a capped height, a card
+// background, border and shadow). in a sheet the sheet is the surface, so only
+// the element props carry over and the items fill the sheet. a styled() skin
+// hands its styles to this HOC as class names (web) or a style (native)
+const getSheetFrameProps = (props: Record<string, any>) => {
+  const { className, style, 'data-tamagui-hoc-class': _hocClassNames, ...rest } = props
+  return splitStyleProps(rest)[1]
+}
+
 export const SelectViewport = createStyledHOC(
   SelectViewportFrame,
   function SelectViewport(props: SelectViewportProps, forwardedRef) {
@@ -37,17 +45,13 @@ export const SelectViewport = createStyledHOC(
     const viewportRef = React.useRef<any>(null)
     const registeredItemCount = itemContext.registry.getItems().length
 
-    // lazy mount: defer mounting children until first open using startTransition
-    const [lazyMounted, setLazyMounted] = React.useState(context.lazyMount ? false : true)
-
-    React.useEffect(() => {
-      if (!context.lazyMount) return
-      if (!context.open) return
-      if (lazyMounted) return
-      startTransition(() => {
-        setLazyMounted(true)
-      })
-    }, [context.lazyMount, context.open, lazyMounted])
+    // lazy mount keeps the items out of the tree until the first open, but it
+    // has to happen in the render that opens, not in an effect after it: mounting
+    // a frame later paints an empty popover, then floating-ui positions that empty
+    // box and has to jump once the real height arrives. once mounted it stays.
+    const hasOpenedRef = React.useRef(!context.lazyMount)
+    if (context.open) hasOpenedRef.current = true
+    const lazyMounted = hasOpenedRef.current
 
     React.useEffect(() => {
       if (!isWeb || !isAdapted || !context.open) return
@@ -62,7 +66,7 @@ export const SelectViewport = createStyledHOC(
         activeItem?.focus()
       })
       return () => cancelAnimationFrame(frame)
-    }, [context.activeIndex, context.open, isAdapted, registeredItemCount])
+    }, [context.open, isAdapted, registeredItemCount])
 
     const composedRefs = useComposedRefs(
       // @ts-ignore react 19 ref type mismatch
@@ -77,23 +81,24 @@ export const SelectViewport = createStyledHOC(
       }
     }, [isAdapted])
 
-    // after lazy children mount, force floating-ui to recompute so inner middleware
-    // can position using the now-present list items
+    // items register in layout effects, so the inner middleware can only position
+    // against the selected one once the registry has settled
     React.useEffect(() => {
-      if (context.lazyMount && lazyMounted && context.open && context.update) {
+      if (context.lazyMount && context.open && context.update) {
         const frame = requestAnimationFrame(context.update)
         return () => cancelAnimationFrame(frame)
       }
-    }, [lazyMounted, registeredItemCount])
+    }, [context.open, registeredItemCount])
 
     if (itemContext.shouldRenderWebNative) {
       return <YStack position="relative">{children}</YStack>
     }
 
     if (isAdapted || !isWeb) {
+      const frameProps = isAdapted ? getSheetFrameProps(viewportProps) : viewportProps
       let content = (
         <SelectViewportFrame
-          {...viewportProps}
+          {...frameProps}
           {...(isWeb ? (getSelectListboxProps(itemContext.mode) as any) : {})}
           data-select-viewport=""
           ref={composedRefs}
@@ -115,16 +120,11 @@ export const SelectViewport = createStyledHOC(
       )
     }
 
-    if (!itemContext.interactions) {
+    if (!context.interactions) {
       return null
     }
 
-    const {
-      style,
-      // remove this, it was set to "Select" always
-      className,
-      ...floatingProps
-    } = itemContext.interactions.getFloatingProps()
+    const floatingProps = context.interactions.getFloatingProps()
 
     // FloatingFocusManager removed — SelectContent already wraps with FocusScope
     // that handles focus trapping and auto-focus
@@ -137,7 +137,10 @@ export const SelectViewport = createStyledHOC(
             }}
           />
         )}
-        <AnimatePresence>
+        {/* every styled item reads the presence context, and the default
+            (layout-affecting) presence hands out a new context per render, so
+            each viewport render would re-render the whole list */}
+        <AnimatePresence presenceAffectsLayout={false}>
           {context.open ? (
             <SelectViewportFrame
               key="select-viewport"
@@ -146,10 +149,11 @@ export const SelectViewport = createStyledHOC(
                 'data-state': context.open ? 'open' : 'closed',
               })}
               {...viewportProps}
-              {...style}
+              {...context.floatingPosition}
+              outlineWidth={0}
               {...floatingProps}
               {...getSelectListboxProps(itemContext.mode)}
-              overflowY={disableScroll ? undefined : (style.overflow ?? 'auto')}
+              overflowY={disableScroll ? undefined : 'auto'}
               ref={composedRefs}
             >
               {lazyMounted ? children : null}
@@ -171,7 +175,7 @@ const selectViewportCSS = `
 [data-select-viewport] {
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
+  overscroll-behavior: none;
 }
 
 [data-select-viewport]::-webkit-scrollbar{

package/src/selectionController.ts

@@ -43,7 +43,12 @@ export function createSelectItemRegistry(onChange?: () => void) {
   const itemNodes = new Map<symbol, any>()
   const listeners = new Set<() => void>()
 
+  // value -> first index, rebuilt after any change: items look themselves up
+  // on every active-index emit, so the lookup must not walk the list
+  let indexByValue: Map<string, number> | null = null
+
   const notify = () => {
+    indexByValue = null
     onChange?.()
     listeners.forEach((listener) => listener())
   }
@@ -52,7 +57,18 @@ export function createSelectItemRegistry(onChange?: () => void) {
 
   const getItem = (value: string) => items.find((item) => item.value === value)
 
-  const getIndex = (value: string) => items.findIndex((item) => item.value === value)
+  const getIndex = (value: string) => {
+    if (!indexByValue) {
+      indexByValue = new Map()
+      items.forEach((item, index) => {
+        if (!indexByValue!.has(item.value)) indexByValue!.set(item.value, index)
+      })
+    }
+    return indexByValue.get(value) ?? -1
+  }
+
+  /** the mounted nodes in item order; the owner mirrors this into its list ref */
+  const getNodes = () => items.map((item) => itemNodes.get(item.id) ?? null)
 
   const getRegisteredLabel = (value: string) => {
     const registrations = labelRegistrations.get(value)
@@ -78,7 +94,6 @@ export function createSelectItemRegistry(onChange?: () => void) {
   }
 
   const syncNodeOrder = () => {
-    const previousOrder = items.map((item) => item.id)
     items.sort((a, b) => {
       const aNode = itemNodes.get(a.id)
       const bNode = itemNodes.get(b.id)
@@ -90,9 +105,6 @@ export function createSelectItemRegistry(onChange?: () => void) {
       if (position & 2) return 1
       return 0
     })
-    if (items.some((item, index) => item.id !== previousOrder[index])) {
-      notify()
-    }
   }
 
   const registerItem = (
@@ -138,12 +150,14 @@ export function createSelectItemRegistry(onChange?: () => void) {
         notify()
       },
       setNode(node) {
+        if ((itemNodes.get(id) ?? null) === (node ?? null)) return
         if (node) {
           itemNodes.set(id, node)
           syncNodeOrder()
         } else {
           itemNodes.delete(id)
         }
+        notify()
       },
       unregister() {
         const index = items.findIndex((current) => current.id === id)
@@ -223,6 +237,7 @@ export function createSelectItemRegistry(onChange?: () => void) {
     getItems,
     getItem,
     getIndex,
+    getNodes,
     firstEnabledIndex,
     nextEnabledIndex,
     findTypeaheadIndex,

package/src/types.tsx

@@ -1,6 +1,5 @@
 import type {
   NativeValue,
-  SizeTokens,
   TamaguiChangeEventDetails,
   TamaguiEventDetails,
   ViewProps,
@@ -62,8 +61,6 @@ export type SelectImplProps = SelectScopedProps<SelectProps<string, boolean>> &
   activeIndexRef: any
   selectedIndexRef: any
   listContentRef: any
-  /** fast setter: updates ref + emits to subscribers (no re-render) - use for hover/navigation */
-  setActiveIndexFast: (index: number | null) => void
 }
 
 export interface SelectProps<
@@ -83,7 +80,8 @@ export interface SelectProps<
   defaultOpen?: boolean
   onOpenChange?(open: boolean, details: SelectOpenChangeDetails): void
   dir?: SelectDirection
-  size?: SizeTokens | true
+  /** a skin-owned size name, threaded opaquely to the skin parts */
+  size?: string | boolean
   /**
    * If passed, will render a native component instead of the custom one. Currently only `web` is supported.
    */
@@ -154,40 +152,39 @@ export interface SelectItemParentContextValue {
   requestOpenChange: (open: boolean, details: SelectOpenChangeDetails) => void
   selectValue: (value: string, details: SelectValueChangeDetails) => void
   changeNativeValue: (value: SelectSelection, event: unknown) => void
-  activeIndexSubscribe: EmitterSubscriber<number>
+  activeIndexSubscribe: EmitterSubscriber<number | null>
   activeIndexRef?: MutableRefObject<number | null>
   allowSelectRef?: MutableRefObject<boolean>
   allowMouseUpRef?: MutableRefObject<boolean>
   selectTimeoutRef?: MutableRefObject<any>
   dataRef?: MutableRefObject<ContextData>
-  interactions?: {
-    getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => any
-    getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any
-    getItemProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any
-  }
+  /** web only: stable once the list mounts, so it can live beside the items */
+  getItemProps?: (userProps?: HTMLProps<HTMLElement> | undefined) => any
   shouldRenderWebNative?: boolean
-  size?: SizeTokens | true
-  /** fast setter: updates ref + emits to subscribers (no re-render) - use for keyboard navigation */
-  setActiveIndexFast?: (index: number | null, details?: SelectActiveChangeDetails) => void
+  /** a skin-owned size name, threaded opaquely to the skin parts */
+  size?: string | boolean
+  setActiveIndex: (index: number | null, details?: SelectActiveChangeDetails) => void
+  selectedIndex: number
+  lastPointerRef: MutableRefObject<{ x: number; y: number }>
   moveActive: (direction: 1 | -1, event?: unknown) => void
   search: (text: string, event?: unknown) => void
 }
 
 export interface SelectContextValue {
+  /** web only: the trigger and viewport prop getters; change with the floating element */
+  interactions?: {
+    getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => any
+    getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any
+  }
   dir?: SelectDirection
   scopeName: string
   adaptScope: string
   value: any
   mode: SelectMode
   selectedValues: string[]
-  activeItem?: string
-  selectionAnchor?: string
   selectedIndex: number
-  /** current active index state - use for rendering, may lag behind ref */
-  activeIndex: number | null
-  /** ref to current active index - always up to date, use for reads */
+  /** the active index is never state: read the ref, or subscribe through the item parent context */
   activeIndexRef: MutableRefObject<number | null>
-  /** slow setter: updates ref + emits + triggers re-render */
   setActiveIndex: (index: number | null, details?: SelectActiveChangeDetails) => void
   open: boolean
   valueNode: Element | null
@@ -197,12 +194,18 @@ export interface SelectContextValue {
   blockSelection: boolean
   upArrowRef?: MutableRefObject<HTMLDivElement | null>
   downArrowRef?: MutableRefObject<HTMLDivElement | null>
-  setScrollTop?: Function
-  setInnerOffset?: Function
+  /** re-reads the viewport and flips canScrollUp/Down when they change */
+  updateScrollArrows?: () => void
   controlledScrolling?: boolean
   canScrollUp?: boolean
   canScrollDown?: boolean
   floatingContext?: FloatingContext<ReferenceType>
+  /** InlineImpl only: where floating-ui put the viewport */
+  floatingPosition?: {
+    position: 'absolute' | 'fixed'
+    top: number | ''
+    left: number | ''
+  }
   native?: NativeValue
   disablePreventBodyScroll?: boolean
   /** update floating-ui to recalculate */
@@ -214,7 +217,8 @@ export interface SelectContextValue {
 }
 
 export type SelectViewportExtraProps = SelectScopedProps<{
-  size?: SizeTokens | true
+  /** a skin-owned size name, threaded opaquely to the skin parts */
+  size?: string | boolean
   disableScroll?: boolean
 }>