@tamagui/select 2.0.0-rc.3 → 2.0.0-rc.30

package/src/SelectImpl.tsx

@@ -1,4 +1,3 @@
-import type { SideObject } from '@floating-ui/react'
 import {
   autoUpdate,
   flip,
@@ -7,14 +6,15 @@ import {
   shift,
   size,
   useClick,
-  useDismiss,
-  useFloating,
-  useInnerOffset,
+  useFloatingRaw as useFloatingDom,
   useInteractions,
+  useInnerOffset,
   useListNavigation,
   useRole,
   useTypeahead,
-} from '@floating-ui/react'
+  type FloatingInteractionContext,
+  type SideObject,
+} from '@tamagui/floating'
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useEvent, useIsTouchDevice } from '@tamagui/core'
 import * as React from 'react'
@@ -60,13 +60,10 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
   const floatingStyle = React.useRef({})
 
   // sync activeIndex on open/close
-  // use useEffect (not layout effect) so this runs AFTER SelectItem children have subscribed
   React.useEffect(() => {
     if (open) {
-      // use fast setter for initial focus - doesn't trigger re-render
       setActiveIndexFast(selectedIndex ?? 0)
     } else {
-      // reset state when closed
       setScrollTop(0)
       setFallback(false)
       setActiveIndexFast(null)
@@ -90,9 +87,15 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }, [open])
   }
 
-  const { x, y, strategy, context, refs, update } = useFloating({
+  const {
+    x,
+    y,
+    strategy,
+    refs,
+    update,
+    placement: computedPlacement,
+  } = useFloatingDom({
     open,
-    onOpenChange: setOpen,
     placement: 'bottom-start',
     whileElementsMounted: autoUpdate,
     // eslint-disable-next-line no-constant-condition
@@ -145,7 +148,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
           }),
           offset({ crossAxis: -5 }),
         ],
-  })
+  } as any)
 
   const floatingRef = refs.floating
 
@@ -174,21 +177,39 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     return fn(index)
   })
 
+  // construct interaction context for our custom hooks
+  const dataRef = React.useRef<{ openEvent?: Event; placement?: string }>({})
+  dataRef.current.placement = computedPlacement
+  const interactionContext: FloatingInteractionContext = {
+    open,
+    onOpenChange: (val) => setOpen(val),
+    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 interactionsProps = [
-    useClick(context, { event: 'mousedown', keyboardHandlers: false }),
-    useDismiss(context, { outsidePress: false }),
-    useRole(context, { role: 'listbox' }),
-    useInnerOffset(context, {
+    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(context, {
+    useListNavigation(interactionContext, {
       listRef: listItemsRef,
       activeIndex: selectContext.activeIndex ?? 0,
       selectedIndex,
-      // wrap onNavigate to prevent floating-ui from resetting activeIndex to null on focus loss
       onNavigate: (index) => {
         if (index !== null) {
           setActiveIndex(index)
@@ -196,7 +217,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
       },
       scrollItemIntoView: false,
     }),
-    useTypeahead(context, {
+    useTypeahead(interactionContext, {
       listRef: listContentRef,
       onMatch,
       selectedIndex,
@@ -208,7 +229,6 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
   ]
 
   const interactions = useInteractions(
-    // unfortunately these memos will just always break due to floating-ui context always changing :/
     React.useMemo(() => {
       return interactionsProps
     }, interactionsProps)
@@ -278,13 +298,10 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
 
   useIsomorphicLayoutEffect(() => {
     if (open) {
-      // Prevent the initial mouseup from selecting an item
-      // (the mouseup from the click that opened the menu)
       allowMouseUpRef.current = false
 
       selectTimeoutRef.current = setTimeout(() => {
         allowSelectRef.current = true
-        // Re-enable mouseup after delay for click-and-hold-to-select behavior
         allowMouseUpRef.current = true
       }, 300)
 
@@ -305,8 +322,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }
   }, [open])
 
-  // Replacement for `useDismiss` as the arrows are outside of the floating
-  // element DOM tree.
+  // dismiss on outside pointer down (arrows are outside the floating DOM tree)
   useIsomorphicLayoutEffect(() => {
     function onPointerDown(e: PointerEvent) {
       const target = e.target as Node
@@ -330,8 +346,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }
   }, [open, refs, setOpen])
 
-  // Scroll the `activeIndex` item into view only in "controlledScrolling"
-  // (keyboard nav) mode. Use subscription to avoid re-renders on every activeIndex change.
+  // scroll activeIndex into view during keyboard nav
   React.useEffect(() => {
     if (!open) return
 
@@ -342,14 +357,11 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
       setScrollTop(refs.floating.current?.scrollTop ?? 0)
     }
 
-    // initial scroll
     scrollActiveIntoView(activeIndexRef.current)
 
-    // subscribe to future changes
     return selectItemParentContext.activeIndexSubscribe(scrollActiveIntoView)
   }, [open, refs, controlledScrolling, selectItemParentContext.activeIndexSubscribe])
 
-  // Scroll the `selectedIndex` into view upon opening the floating element.
   React.useEffect(() => {
     if (open && fallback) {
       if (selectedIndex != null) {
@@ -358,18 +370,20 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
     }
   }, [open, fallback, selectedIndex])
 
-  // Unset the height limiting for fallback mode. This gets executed prior to
-  // the positioning call.
   useIsomorphicLayoutEffect(() => {
     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)
+  // build a minimal floating context for SelectViewport/SelectScrollButton
+  const floatingContext = React.useMemo(
+    () => ({
+      refs,
+      dataRef,
+    }),
+    [refs]
+  )
 
   return (
     <SelectProvider
@@ -378,7 +392,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
       setScrollTop={setScrollTop}
       setInnerOffset={setInnerOffset}
       fallback={fallback}
-      floatingContext={context}
+      floatingContext={floatingContext as any}
       canScrollDown={!!showDownArrow}
       canScrollUp={!!showUpArrow}
       controlledScrolling={controlledScrolling}
@@ -392,25 +406,13 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
         {...selectItemParentContext}
         allowMouseUpRef={allowMouseUpRef}
         allowSelectRef={allowSelectRef}
-        dataRef={context.dataRef}
+        dataRef={dataRef as any}
         interactions={interactionsContext}
         listRef={listItemsRef}
         selectTimeoutRef={selectTimeoutRef}
       >
         {children}
       </SelectItemParentProvider>
-      {/* {isFormControl ? (
-            <BubbleSelect
-              ref={setBubbleSelect}
-              aria-hidden
-              tabIndex={-1}
-              name={name}
-              autoComplete={autoComplete}
-              value={value}
-              // enable form autofill
-              onChange={(event) => setValue(event.target.value)}
-            />
-          ) : null} */}
     </SelectProvider>
   )
 }

package/src/SelectItem.tsx

@@ -53,6 +53,7 @@ export const SelectItem = ListItem.Frame.styleable<SelectItemExtraProps>(
       setOpen,
       onChange,
       activeIndexSubscribe,
+      activeIndexRef,
       valueSubscribe,
       allowMouseUpRef,
       allowSelectRef,
@@ -77,17 +78,26 @@ export const SelectItem = ListItem.Frame.styleable<SelectItemExtraProps>(
     }, [])
 
     React.useEffect(() => {
-      return activeIndexSubscribe((i) => {
-        const isActive = index === i
-
-        if (isActive) {
+      const handleActiveIndex = (i: number) => {
+        if (index === i) {
           onActiveChange(value, index)
-
           if (isWeb) {
-            listRef?.current[index]?.focus()
+            // 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()
+            })
           }
         }
-      })
+      }
+
+      // check initial value (parent effect may have set it before we subscribed)
+      const currentActiveIndex = activeIndexRef?.current
+      if (currentActiveIndex !== null && currentActiveIndex !== undefined) {
+        handleActiveIndex(currentActiveIndex)
+      }
+
+      return activeIndexSubscribe(handleActiveIndex)
     }, [index])
 
     React.useEffect(() => {

package/src/SelectScrollButton.tsx

@@ -1,4 +1,4 @@
-import { autoUpdate, offset, useFloating } from '@floating-ui/react'
+import { autoUpdate, offset, useFloatingRaw as useFloating } from '@tamagui/floating'
 import { useComposedRefs } from '@tamagui/compose-refs'
 import type { TamaguiElement } from '@tamagui/core'
 import { YStack } from '@tamagui/stacks'

package/src/SelectTrigger.tsx

@@ -72,7 +72,7 @@ export const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps
                   }
                 : {
                     onMouseDown() {
-                      context.floatingContext?.update()
+                      context.floatingContext?.update?.()
                       itemParentContext.setOpen(!context.open)
                     },
                   }),

package/src/SelectViewport.tsx

@@ -1,4 +1,3 @@
-import { FloatingFocusManager } from '@floating-ui/react'
 import { AdaptPortalContents, useAdaptIsActive } from '@tamagui/adapt'
 import { AnimatePresence } from '@tamagui/animate-presence'
 import { useComposedRefs } from '@tamagui/compose-refs'
@@ -6,6 +5,8 @@ import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { styled } 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 {
   ForwardSelectContext,
@@ -56,6 +57,18 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
     const itemContext = useSelectItemParentContext(scope)
     const isAdapted = useAdaptIsActive(context.adaptScope)
 
+    // 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])
+
     const composedRefs = useComposedRefs(
       // @ts-ignore TODO react 19 type needs fix
       forwardedRef,
@@ -68,6 +81,14 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
       }
     }, [isAdapted])
 
+    // after lazy children mount, force floating-ui to recompute so inner middleware
+    // can position using the now-present list items
+    useIsomorphicLayoutEffect(() => {
+      if (context.lazyMount && lazyMounted && context.open && context.update) {
+        context.update()
+      }
+    }, [lazyMounted])
+
     if (itemContext.shouldRenderWebNative) {
       return <YStack position="relative">{children}</YStack>
     }
@@ -103,6 +124,8 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
       ...floatingProps
     } = itemContext.interactions.getFloatingProps()
 
+    // FloatingFocusManager removed — SelectContent already wraps with FocusScope
+    // that handles focus trapping and auto-focus
     return (
       <>
         {!disableScroll && !props.unstyled && (
@@ -114,31 +137,28 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
         )}
         <AnimatePresence>
           {context.open ? (
-            <FloatingFocusManager
-              context={context.floatingContext!}
-              modal={false}
-              initialFocus={-1}
+            <SelectViewportFrame
+              key="select-viewport"
+              size={itemContext.size}
+              role="presentation"
+              {...viewportProps}
+              {...style}
+              {...floatingProps}
+              {...(!props.unstyled && {
+                overflowY: disableScroll ? undefined : (style.overflow ?? 'auto'),
+              })}
+              ref={composedRefs}
             >
-              <SelectViewportFrame
-                key="select-viewport"
-                size={itemContext.size}
-                role="presentation"
-                {...viewportProps}
-                {...style}
-                {...floatingProps}
-                {...(!props.unstyled && {
-                  overflowY: disableScroll ? undefined : (style.overflow ?? 'auto'),
-                })}
-                ref={composedRefs}
-              >
-                {children}
-              </SelectViewportFrame>
-            </FloatingFocusManager>
+              {lazyMounted ? children : null}
+            </SelectViewportFrame>
           ) : null}
         </AnimatePresence>
 
-        {/* keep in dom to allow for portal to the trigger... very hacky! we should fix */}
-        {!context.open && <div style={{ display: 'none' }}>{props.children}</div>}
+        {/* keep in dom to allow for portal to the trigger when renderValue isn't provided */}
+        {/* when lazyMount is enabled and renderValue is provided, skip this entirely for performance */}
+        {!context.open && !(context.lazyMount && context.renderValue) && lazyMounted && (
+          <div style={{ display: 'none' }}>{children}</div>
+        )}
       </>
     )
   }

package/src/context.tsx

@@ -1,7 +1,11 @@
 import { createStyledContext } from '@tamagui/core'
 import { getPortal } from '@tamagui/native'
+import { createContext } from 'react'
 import type { SelectContextValue, SelectItemParentContextValue } from './types'
 
+// zIndex flows from root Select prop to SelectContent portal
+export const SelectZIndexContext = createContext<number | undefined>(undefined)
+
 export const { Provider: SelectProvider, useStyledContext: useSelectContext } =
   createStyledContext<SelectContextValue>(null as any, 'Select')
 

package/src/types.tsx

@@ -1,7 +1,28 @@
-import type { ContextData, FloatingContext, ReferenceType } from '@floating-ui/react'
 import type { NativeValue, SizeTokens } from '@tamagui/core'
-import type { ThemeableStackProps, YStackProps } from '@tamagui/stacks'
-import type { DispatchWithoutAction, HTMLProps, MutableRefObject, ReactNode } from 'react'
+import type { YStackProps } from '@tamagui/stacks'
+import type {
+  DispatchWithoutAction,
+  HTMLProps,
+  MutableRefObject,
+  ReactNode,
+  RefObject,
+} from 'react'
+
+// minimal types replacing @floating-ui/react imports
+type ContextData = Record<string, any>
+type ReferenceType = Element
+type FloatingContext<RT = ReferenceType> = {
+  refs: {
+    reference: RefObject<RT | null>
+    floating: RefObject<HTMLElement | null>
+    setFloating: (el: HTMLElement | null) => void
+    setReference: (el: RT | null) => void
+    [key: string]: any
+  }
+  dataRef: RefObject<ContextData>
+  update?: () => void
+  [key: string]: any
+}
 
 export type SelectDirection = 'ltr' | 'rtl'
 
@@ -59,6 +80,23 @@ export interface SelectProps<Value extends string = string> {
    * ```
    */
   renderValue?(value: Value): ReactNode
+
+  /**
+   * When true, defers mounting Select items until opened using startTransition.
+   * This significantly improves initial render performance for pages with many Selects.
+   *
+   * Should be combined with `renderValue` to display the selected value during SSR
+   * and before items are mounted.
+   *
+   * @default false
+   */
+  lazyMount?: boolean
+
+  /**
+   * z-index for the select portal. Use this when select dropdowns need to appear
+   * above other portaled content like dialogs or fixed headers.
+   */
+  zIndex?: number
 }
 
 type DisposeFn = () => void
@@ -75,6 +113,7 @@ export interface SelectItemParentContextValue {
   onChange: (value: string) => void
   onActiveChange: (value: string, index: number) => void
   activeIndexSubscribe: EmitterSubscriber<number>
+  activeIndexRef?: MutableRefObject<number | null>
   valueSubscribe: EmitterSubscriber<any>
   allowSelectRef?: MutableRefObject<boolean>
   allowMouseUpRef?: MutableRefObject<boolean>
@@ -131,6 +170,8 @@ export interface SelectContextValue {
   update?: () => void
   /** Render function for the selected value (SSR support) */
   renderValue?: (value: any) => ReactNode
+  /** When true, defers mounting items until opened */
+  lazyMount?: boolean
 }
 
 export type SelectViewportExtraProps = SelectScopedProps<{
@@ -143,7 +184,6 @@ export type SelectViewportProps = YStackProps & SelectViewportExtraProps
 
 export type SelectContentProps = SelectScopedProps<{
   children?: React.ReactNode
-  zIndex?: number
 }>
 
 export type SelectScrollButtonImplProps = YStackProps &

package/types/Select.d.ts

@@ -41,7 +41,7 @@ export declare const Select: (<Value extends string = string>(props: SelectScope
             shouldForwardSpace: boolean;
         };
     };
-    Content: ({ children, scope, zIndex, ...focusScopeProps }: import("./types").SelectContentProps & import("@tamagui/focus-scope").FocusScopeProps) => import("react/jsx-runtime").JSX.Element | null;
+    Content: ({ children, scope, ...focusScopeProps }: import("./types").SelectContentProps & import("@tamagui/focus-scope").FocusScopeProps) => import("react/jsx-runtime").JSX.Element | null;
     Group: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof import("@tamagui/core").StackStyleBase | "fullscreen"> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
         elevation?: number | SizeTokens | undefined;
         fullscreen?: boolean | undefined;
@@ -107,7 +107,7 @@ export declare const Select: (<Value extends string = string>(props: SelectScope
     }, import("@tamagui/core").StaticConfigPublic>;
     ScrollDownButton: React.ForwardRefExoticComponent<import("./types").SelectScrollButtonProps & React.RefAttributes<TamaguiElement>>;
     ScrollUpButton: React.ForwardRefExoticComponent<import("./types").SelectScrollButtonProps & React.RefAttributes<TamaguiElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").StackNonStyleProps, "disabled" | "size" | "unstyled" | keyof import("@tamagui/core").StackStyleBase | "active" | "variant"> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").StackNonStyleProps, "disabled" | "size" | "unstyled" | keyof import("@tamagui/core").StackStyleBase | "variant" | "active"> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
         size?: SizeTokens | undefined;
         variant?: "outlined" | undefined;
         disabled?: boolean | undefined;

package/types/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAiBzF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,KAAK,EAAmB,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAS9E,QAAA,MAAM,gBAAgB;;;8CAGpB,CAAA;AAEF,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,CAAC,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,GAAG,qBAAqB,CAAA;AA6DxF,eAAO,MAAM,UAAU;;;8CAKrB,CAAA;AAkCF,QAAA,MAAM,oBAAoB;;;;8CAoBxB,CAAA;AAEF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAA;AA6DxE,eAAO,MAAM,gBAAgB;;;8CAG3B,CAAA;AAoHF,QAAA,MAAM,gBAAgB;;;8CA4BpB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAA;AA4BnF,eAAO,MAAM,eAAe;;;8CAE1B,CAAA;AAoCF,eAAO,MAAM,MAAM,IACD,KAAK,SAAS,MAAM,kBAC3B,iBAAiB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;;sBAzZhD,GAAE;qBAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAuV2B,GAAG;;gBAAH,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAjV5C,KAAK,CAAC,SAAS;;;;sBAAf,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8a9B,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAiBzF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,OAAO,KAAK,EAAmB,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAS9E,QAAA,MAAM,gBAAgB;;;8CAGpB,CAAA;AAEF,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,CAAC,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,GAAG,qBAAqB,CAAA;AA6DxF,eAAO,MAAM,UAAU;;;8CAKrB,CAAA;AAkCF,QAAA,MAAM,oBAAoB;;;;8CAoBxB,CAAA;AAEF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAA;AA6DxE,eAAO,MAAM,gBAAgB;;;8CAG3B,CAAA;AAoHF,QAAA,MAAM,gBAAgB;;;8CA4BpB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAA;AA4BnF,eAAO,MAAM,eAAe;;;8CAE1B,CAAA;AAoCF,eAAO,MAAM,MAAM,IACD,KAAK,SAAS,MAAM,kBAC3B,iBAAiB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;;sBA7ZsB,GAAI;qBAE1E,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyVyD,GAAG;;gBAAH,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAjV5C,KAAK,CAAC,SAAS;;;;sBAAf,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8a9B,CAAA"}

package/types/SelectContent.d.ts

@@ -1,4 +1,4 @@
 import type { FocusScopeProps } from '@tamagui/focus-scope';
 import type { SelectContentProps } from './types';
-export declare const SelectContent: ({ children, scope, zIndex, ...focusScopeProps }: SelectContentProps & FocusScopeProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SelectContent: ({ children, scope, ...focusScopeProps }: SelectContentProps & FocusScopeProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=SelectContent.d.ts.map

package/types/SelectContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.d.ts","sourceRoot":"","sources":["../src/SelectContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAK3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAOjD,eAAO,MAAM,aAAa,GAAI,iDAK3B,kBAAkB,GAAG,eAAe,mDAmDtC,CAAA"}
+{"version":3,"file":"SelectContent.d.ts","sourceRoot":"","sources":["../src/SelectContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAW3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAOjD,eAAO,MAAM,aAAa,GAAI,yCAI3B,kBAAkB,GAAG,eAAe,mDAyDtC,CAAA"}

package/types/SelectImpl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectImpl.d.ts","sourceRoot":"","sources":["../src/SelectImpl.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,4CAgYtD,CAAA"}
+{"version":3,"file":"SelectImpl.d.ts","sourceRoot":"","sources":["../src/SelectImpl.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,4CAkYtD,CAAA"}

package/types/SelectItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.d.ts","sourceRoot":"","sources":["../src/SelectItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MACK,yBAAyB;;;IACjB,oBAAoB,4CAC+B,CAAA;AAEvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,oBAAoB,CAAC,EAAE,oBAAoB;CAAG;AAElF,eAAO,MAAM,UAAU;;;;;;;;;;;;8CAoNtB,CAAA"}
+{"version":3,"file":"SelectItem.d.ts","sourceRoot":"","sources":["../src/SelectItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MACK,yBAAyB;;;IACjB,oBAAoB,4CAC+B,CAAA;AAEvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,oBAAoB,CAAC,EAAE,oBAAoB;CAAG;AAElF,eAAO,MAAM,UAAU;;;;;;;;;;;;8CA8NtB,CAAA"}

package/types/SelectTrigger.d.ts

@@ -3,7 +3,7 @@ import type { ListItemProps } from '@tamagui/list-item';
 import * as React from 'react';
 import type { SelectScopedProps } from './types';
 export type SelectTriggerProps = SelectScopedProps<ListItemProps>;
-export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").StackNonStyleProps, "disabled" | "size" | "unstyled" | keyof import("@tamagui/core").StackStyleBase | "active" | "variant"> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").StackNonStyleProps, "disabled" | "size" | "unstyled" | keyof import("@tamagui/core").StackStyleBase | "variant" | "active"> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
     size?: import("@tamagui/core").SizeTokens | undefined;
     variant?: "outlined" | undefined;
     disabled?: boolean | undefined;

package/types/SelectViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectViewport.d.ts","sourceRoot":"","sources":["../src/SelectViewport.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,mBAAmB;;;;;8CA2B9B,CAAA;AAIF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;8CA6F1B,CAAA"}
+{"version":3,"file":"SelectViewport.d.ts","sourceRoot":"","sources":["../src/SelectViewport.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,mBAAmB;;;;;8CA2B9B,CAAA;AAIF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;8CAgH1B,CAAA"}

package/types/context.d.ts

@@ -1,4 +1,5 @@
 import type { SelectContextValue, SelectItemParentContextValue } from './types';
+export declare const SelectZIndexContext: import("react").Context<number | undefined>;
 export declare const SelectProvider: import("react").Provider<SelectContextValue> & import("react").ProviderExoticComponent<Partial<SelectContextValue> & {
     children?: import("react").ReactNode;
     scope?: string;

package/types/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAE/E,eAAO,MAAkB,cAAc;;;IAAoB,gBAAgB,wCACX,CAAA;AAIhE,eAAO,MACK,wBAAwB;;;IAChB,0BAA0B,kDACkC,CAAA;AAEhF,eAAO,MAAM,oBAAoB,GAAI,qCAIlC;IACD,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,OAAO,EAAE,kBAAkB,CAAA;IAC3B,WAAW,EAAE,4BAA4B,CAAA;CAC1C,QAgBA,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAG/E,eAAO,MAAM,mBAAmB,6CAA+C,CAAA;AAE/E,eAAO,MAAkB,cAAc;;;IAAoB,gBAAgB,wCACX,CAAA;AAIhE,eAAO,MACK,wBAAwB;;;IAChB,0BAA0B,kDACkC,CAAA;AAEhF,eAAO,MAAM,oBAAoB,GAAI,qCAIlC;IACD,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,OAAO,EAAE,kBAAkB,CAAA;IAC3B,WAAW,EAAE,4BAA4B,CAAA;CAC1C,QAgBA,CAAA"}

package/types/types.d.ts

@@ -1,7 +1,20 @@
-import type { ContextData, FloatingContext, ReferenceType } from '@floating-ui/react';
 import type { NativeValue, SizeTokens } from '@tamagui/core';
 import type { YStackProps } from '@tamagui/stacks';
-import type { DispatchWithoutAction, HTMLProps, MutableRefObject, ReactNode } from 'react';
+import type { DispatchWithoutAction, HTMLProps, MutableRefObject, ReactNode, RefObject } from 'react';
+type ContextData = Record<string, any>;
+type ReferenceType = Element;
+type FloatingContext<RT = ReferenceType> = {
+    refs: {
+        reference: RefObject<RT | null>;
+        floating: RefObject<HTMLElement | null>;
+        setFloating: (el: HTMLElement | null) => void;
+        setReference: (el: RT | null) => void;
+        [key: string]: any;
+    };
+    dataRef: RefObject<ContextData>;
+    update?: () => void;
+    [key: string]: any;
+};
 export type SelectDirection = 'ltr' | 'rtl';
 export type SelectScopes = string;
 export type SelectScopedProps<P> = P & {
@@ -53,6 +66,21 @@ export interface SelectProps<Value extends string = string> {
      * ```
      */
     renderValue?(value: Value): ReactNode;
+    /**
+     * When true, defers mounting Select items until opened using startTransition.
+     * This significantly improves initial render performance for pages with many Selects.
+     *
+     * Should be combined with `renderValue` to display the selected value during SSR
+     * and before items are mounted.
+     *
+     * @default false
+     */
+    lazyMount?: boolean;
+    /**
+     * z-index for the select portal. Use this when select dropdowns need to appear
+     * above other portaled content like dialogs or fixed headers.
+     */
+    zIndex?: number;
 }
 type DisposeFn = () => void;
 export type EmitterSubscriber<Val> = (cb: (val: Val) => void) => DisposeFn;
@@ -67,6 +95,7 @@ export interface SelectItemParentContextValue {
     onChange: (value: string) => void;
     onActiveChange: (value: string, index: number) => void;
     activeIndexSubscribe: EmitterSubscriber<number>;
+    activeIndexRef?: MutableRefObject<number | null>;
     valueSubscribe: EmitterSubscriber<any>;
     allowSelectRef?: MutableRefObject<boolean>;
     allowMouseUpRef?: MutableRefObject<boolean>;
@@ -120,6 +149,8 @@ export interface SelectContextValue {
     update?: () => void;
     /** Render function for the selected value (SSR support) */
     renderValue?: (value: any) => ReactNode;
+    /** When true, defers mounting items until opened */
+    lazyMount?: boolean;
 }
 export type SelectViewportExtraProps = SelectScopedProps<{
     size?: SizeTokens;
@@ -129,7 +160,6 @@ export type SelectViewportExtraProps = SelectScopedProps<{
 export type SelectViewportProps = YStackProps & SelectViewportExtraProps;
 export type SelectContentProps = SelectScopedProps<{
     children?: React.ReactNode;
-    zIndex?: number;
 }>;
 export type SelectScrollButtonImplProps = YStackProps & SelectScopedProps<{
     dir: 'up' | 'down';