@tamagui/select 3.0.0-beta.922.1 → 3.0.0

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}

package/src/SelectScrollButton.tsx

@@ -68,7 +68,7 @@ const SelectScrollButtonImpl = React.memo(
       const { scope, dir, partClassName, ...scrollIndicatorProps } = props
       const { className, onPointerEnter, onPointerLeave, ...frameProps } =
         scrollIndicatorProps
-      const { open, fallback, setScrollTop, setInnerOffset, ...context } =
+      const { open, fallback, updateScrollArrows, setInnerOffset, ...context } =
         useSelectContext(scope)
       const floatingRef = context.floatingContext?.refs.floating
 
@@ -109,7 +109,7 @@ const SelectScrollButtonImpl = React.memo(
         if (fallback) {
           if (floating.current) {
             floating.current.scrollTop -= amount
-            flushSync(() => setScrollTop!(floating.current?.scrollTop ?? 0))
+            updateScrollArrows!()
           }
         } else {
           flushSync(() => setInnerOffset!((value) => value - amount))

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

@@ -5,7 +5,6 @@ import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { createStyledHOC, 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 {
@@ -37,17 +36,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 +57,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,14 +72,14 @@ 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>
@@ -115,16 +110,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 +127,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 +139,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}

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,19 @@ export interface SelectContextValue {
   blockSelection: boolean
   upArrowRef?: MutableRefObject<HTMLDivElement | null>
   downArrowRef?: MutableRefObject<HTMLDivElement | null>
-  setScrollTop?: Function
+  /** re-reads the viewport and flips canScrollUp/Down when they change */
+  updateScrollArrows?: () => void
   setInnerOffset?: Function
   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 +218,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
 }>