@tamagui/select 2.7.7 → 3.0.0-beta.1093.1

package/src/SelectScrollButton.tsx

@@ -1,7 +1,8 @@
+import { createStyledHOC, styled, View } from '@tamagui/core'
 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'
+import { composeEventHandlers } from '@tamagui/helpers'
 import * as React from 'react'
 import { flushSync } from 'react-dom'
 
@@ -18,20 +19,24 @@ import type {
 
 const SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'
 
-export const SelectScrollUpButton = React.forwardRef<
-  TamaguiElement,
-  SelectScrollButtonProps
->((props: SelectScopedProps<SelectScrollButtonProps>, forwardedRef) => {
-  return (
-    <SelectScrollButtonImpl
-      componentName={SCROLL_UP_BUTTON_NAME}
-      {...props}
-      dir="up"
-      ref={forwardedRef}
-    />
-  )
+export const SelectScrollButtonFrame = styled(View, {
+  displayName: 'SelectScrollButton',
 })
 
+export const SelectScrollUpButton = createStyledHOC(
+  SelectScrollButtonFrame,
+  (props: SelectScopedProps<SelectScrollButtonProps>, forwardedRef) => {
+    return (
+      <SelectScrollButtonImpl
+        partClassName={`is_${SCROLL_UP_BUTTON_NAME}`}
+        {...props}
+        dir="up"
+        ref={forwardedRef}
+      />
+    )
+  }
+)
+
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME
 
 /* -------------------------------------------------------------------------------------------------
@@ -40,29 +45,30 @@ SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME
 
 const SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'
 
-export const SelectScrollDownButton = React.forwardRef<
-  TamaguiElement,
-  SelectScrollButtonProps
->((props: SelectScopedProps<SelectScrollButtonProps>, forwardedRef) => {
-  return (
-    <SelectScrollButtonImpl
-      componentName={SCROLL_DOWN_BUTTON_NAME}
-      {...props}
-      dir="down"
-      ref={forwardedRef}
-    />
-  )
-})
+export const SelectScrollDownButton = createStyledHOC(
+  SelectScrollButtonFrame,
+  (props: SelectScopedProps<SelectScrollButtonProps>, forwardedRef) => {
+    return (
+      <SelectScrollButtonImpl
+        partClassName={`is_${SCROLL_DOWN_BUTTON_NAME}`}
+        {...props}
+        dir="down"
+        ref={forwardedRef}
+      />
+    )
+  }
+)
 
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME
 
-type SelectScrollButtonImplElement = TamaguiElement
-
 const SelectScrollButtonImpl = React.memo(
-  React.forwardRef<SelectScrollButtonImplElement, SelectScrollButtonImplProps>(
-    (props, forwardedRef) => {
-      const { scope, dir, componentName, ...scrollIndicatorProps } = props
-      const { forceUpdate, open, fallback, setScrollTop, setInnerOffset, ...context } =
+  createStyledHOC(
+    SelectScrollButtonFrame,
+    (props: SelectScrollButtonImplProps, forwardedRef) => {
+      const { scope, dir, partClassName, ...scrollIndicatorProps } = props
+      const { className, onPointerEnter, onPointerLeave, ...frameProps } =
+        scrollIndicatorProps
+      const { open, fallback, updateScrollArrows, setInnerOffset, ...context } =
         useSelectContext(scope)
       const floatingRef = context.floatingContext?.refs.floating
 
@@ -81,8 +87,17 @@ const SelectScrollButtonImpl = React.memo(
         whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true }),
       })
 
-      // @ts-ignore TODO react 19 type needs fix
-      const composedRef = useComposedRefs(forwardedRef, refs.setFloating)
+      const setFloatingRef = React.useCallback(
+        (node: TamaguiElement | null) => {
+          refs.setFloating(node as HTMLElement | null)
+        },
+        [refs.setFloating]
+      )
+      const composedRef = useComposedRefs(forwardedRef, setFloatingRef)
+
+      React.useEffect(() => {
+        return () => cancelAnimationFrame(frameRef.current)
+      }, [])
 
       if (!isVisible) {
         return null
@@ -94,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))
@@ -102,17 +117,17 @@ const SelectScrollButtonImpl = React.memo(
       }
 
       return (
-        <YStack
+        <SelectScrollButtonFrame
           ref={composedRef}
-          componentName={componentName}
+          className={`${partClassName} ${className || ''}`.trim()}
           aria-hidden
-          {...scrollIndicatorProps}
+          {...frameProps}
           zIndex={1000}
           position={strategy}
           left={x || 0}
           top={y || 0}
           width={`calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`}
-          onPointerEnter={() => {
+          onPointerEnter={composeEventHandlers(onPointerEnter as any, () => {
             statusRef.current = 'active'
             let prevNow = Date.now()
 
@@ -150,11 +165,11 @@ const SelectScrollButtonImpl = React.memo(
 
             cancelAnimationFrame(frameRef.current)
             frameRef.current = requestAnimationFrame(frame)
-          }}
-          onPointerLeave={() => {
+          })}
+          onPointerLeave={composeEventHandlers(onPointerLeave as any, () => {
             statusRef.current = 'idle'
             cancelAnimationFrame(frameRef.current)
-          }}
+          })}
         />
       )
     }

package/src/SelectTrigger.tsx

@@ -1,87 +1,111 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
-import type { TamaguiElement } from '@tamagui/core'
-import type { ListItemProps } from '@tamagui/list-item'
-import { ListItem } from '@tamagui/list-item'
+import { isWeb } from '@tamagui/constants'
+import {
+  createChangeEventDetails,
+  createStyledHOC,
+  styled,
+  View,
+  type GetProps,
+} from '@tamagui/core'
+import { composeEventHandlers } from '@tamagui/helpers'
 import * as React from 'react'
 
 import { useSelectContext, useSelectItemParentContext } from './context'
-import type { SelectScopedProps } from './types'
+import type { SelectOpenChangeDetails, SelectScopedProps } from './types'
 
-/* -------------------------------------------------------------------------------------------------
- * SelectTrigger
- * -----------------------------------------------------------------------------------------------*/
 const TRIGGER_NAME = 'SelectTrigger'
 
-export type SelectTriggerProps = SelectScopedProps<ListItemProps>
+export const SelectTriggerFrame = styled(View, {
+  displayName: TRIGGER_NAME,
+  alignItems: 'center',
+  flexDirection: 'row',
+  render: <button type="button" />,
+})
 
-const isPointerCoarse =
-  typeof window !== 'undefined' && process.env.TAMAGUI_TARGET === 'web'
-    ? window.matchMedia('(pointer:coarse)').matches
-    : true
+export type SelectTriggerProps = SelectScopedProps<GetProps<typeof SelectTriggerFrame>>
 
-export const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(
+export const SelectTrigger = createStyledHOC(
+  SelectTriggerFrame,
   function SelectTrigger(props: SelectTriggerProps, forwardedRef) {
-    const { scope, disabled = false, unstyled = false, ...triggerProps } = props
-
+    const { scope, disabled = false, ...triggerProps } = props
     const context = useSelectContext(scope)
     const itemParentContext = useSelectItemParentContext(scope)
     const composedRefs = useComposedRefs(
       forwardedRef,
       context.floatingContext?.refs.setReference as any
     )
-    // const getItems = useCollection(__scopeSelect)
-    // const labelId = useLabelContext(context.trigger)
-    // const labelledBy = ariaLabelledby || labelId
+
     if (itemParentContext.shouldRenderWebNative) {
       return null
     }
 
+    const toggleOpen = (
+      event?: any,
+      reason: 'trigger-press' | 'keyboard' = 'trigger-press'
+    ) => {
+      if (!disabled) {
+        itemParentContext.requestOpenChange(
+          !context.open,
+          createChangeEventDetails(
+            reason,
+            event?.nativeEvent || event,
+            event?.currentTarget
+          ) as SelectOpenChangeDetails
+        )
+      }
+    }
+    const interactionProps =
+      process.env.TAMAGUI_TARGET === 'web' && context.interactions
+        ? context.interactions.getReferenceProps({
+            ...triggerProps,
+            onMouseDown: composeEventHandlers(triggerProps.onMouseDown as any, () =>
+              context.floatingContext?.update?.()
+            ),
+          } as any)
+        : {
+            ...triggerProps,
+            ...(isWeb
+              ? {
+                  onMouseDown: composeEventHandlers(
+                    triggerProps.onMouseDown as any,
+                    (event: any) => {
+                      event.preventDefault()
+                      toggleOpen(event)
+                    }
+                  ),
+                }
+              : {
+                  onPress: composeEventHandlers(triggerProps.onPress as any, toggleOpen),
+                }),
+            onKeyDown: composeEventHandlers(
+              triggerProps.onKeyDown as any,
+              (event: any) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  toggleOpen(event, 'keyboard')
+                }
+              }
+            ),
+          }
+
     return (
-      <ListItem
-        componentName={TRIGGER_NAME}
-        unstyled={unstyled}
-        render="button"
+      <SelectTriggerFrame
         type="button"
         id={itemParentContext.id}
-        {...(!unstyled && {
-          focusVisibleStyle: {
-            outlineStyle: 'solid',
-            outlineWidth: 2,
-            outlineColor: '$outlineColor',
-          },
-          borderWidth: 1,
-          size: itemParentContext.size,
-        })}
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded={context.open}
+        {...(process.env.TAMAGUI_TARGET === 'web' && {
+          'data-state': context.open ? 'open' : 'closed',
+        })}
         aria-autocomplete="none"
+        accessibilityRole={isWeb ? undefined : 'button'}
+        accessibilityState={isWeb ? undefined : { expanded: context.open, disabled }}
         dir={context.dir}
         disabled={disabled}
         data-disabled={disabled ? '' : undefined}
-        {...triggerProps}
+        {...interactionProps}
         ref={composedRefs}
-        {...(process.env.TAMAGUI_TARGET === 'web' && itemParentContext.interactions
-          ? {
-              ...itemParentContext.interactions.getReferenceProps(),
-              ...(isPointerCoarse
-                ? {
-                    onPress() {
-                      itemParentContext.setOpen(!context.open)
-                    },
-                  }
-                : {
-                    onMouseDown() {
-                      context.floatingContext?.update?.()
-                      itemParentContext.setOpen(!context.open)
-                    },
-                  }),
-            }
-          : {
-              onPress() {
-                itemParentContext.setOpen(!context.open)
-              },
-            })}
       />
     )
   }

package/src/SelectViewport.native.tsx

@@ -1,6 +1,10 @@
-import { AdaptContext, AdaptPortalContents, useAdaptContext } from '@tamagui/adapt'
-import { Theme, useThemeName } from '@tamagui/core'
-import { YStack } from '@tamagui/stacks'
+import {
+  AdaptPortalContents,
+  ProvideAdaptContext,
+  useAdaptContext,
+  useAdaptIsActive,
+} from '@tamagui/adapt'
+import { createStyledHOC, styled, Theme, useThemeName, View } from '@tamagui/core'
 
 import { VIEWPORT_NAME } from './constants'
 import {
@@ -8,33 +12,46 @@ import {
   useSelectContext,
   useSelectItemParentContext,
 } from './context'
-import type { SelectViewportProps } from './types'
+import type { SelectViewportExtraProps, SelectViewportProps } from './types'
+
+export const SelectViewportFrame = styled(View, {
+  displayName: VIEWPORT_NAME,
+  position: 'relative',
+})
 
-export const SelectViewport = (props: SelectViewportProps) => {
-  const { scope, children } = props
-  const context = useSelectContext(scope)
-  const itemParentContext = useSelectItemParentContext(scope)
-  const themeName = useThemeName()
+export const SelectViewport = createStyledHOC(
+  SelectViewportFrame,
+  function SelectViewport(props: SelectViewportProps, forwardedRef) {
+    const { scope, children, disableScroll: _disableScroll, ...viewportProps } = props
+    const context = useSelectContext(scope)
+    const itemParentContext = useSelectItemParentContext(scope)
+    const themeName = useThemeName()
+    const adaptContext = useAdaptContext(context.adaptScope)
+    const isAdapted = useAdaptIsActive(context.adaptScope)
 
-  // re-propagate context
-  const adaptContext = useAdaptContext()
-  const contents = (
-    <Theme name={themeName}>
-      <ForwardSelectContext itemContext={itemParentContext} context={context}>
-        <AdaptContext.Provider {...adaptContext}>{children}</AdaptContext.Provider>
-      </ForwardSelectContext>
-    </Theme>
-  )
+    const contents = (
+      <Theme name={themeName}>
+        <ForwardSelectContext itemContext={itemParentContext} context={context}>
+          <ProvideAdaptContext {...adaptContext}>
+            <SelectViewportFrame {...viewportProps} ref={forwardedRef}>
+              {children}
+            </SelectViewportFrame>
+          </ProvideAdaptContext>
+        </ForwardSelectContext>
+      </Theme>
+    )
 
-  if (!context.open) {
-    if (context.lazyMount && context.renderValue) {
-      return null
+    if (!context.open) {
+      if (context.lazyMount && context.renderValue) return null
+      return <SelectViewportFrame display="none">{contents}</SelectViewportFrame>
     }
 
-    return <YStack display="none">{contents}</YStack>
+    return isAdapted ? (
+      <AdaptPortalContents scope={context.adaptScope}>{contents}</AdaptPortalContents>
+    ) : (
+      contents
+    )
   }
-
-  return <AdaptPortalContents scope={context.adaptScope}>{contents}</AdaptPortalContents>
-}
+)
 
 SelectViewport.displayName = VIEWPORT_NAME

package/src/SelectViewport.tsx

@@ -2,9 +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 { styled } from '@tamagui/core'
+import { createStyledHOC, styled, View } from '@tamagui/core'
 import { needsPortalRepropagation } from '@tamagui/portal'
-import { ThemeableStack, YStack } from '@tamagui/stacks'
+import { YStack } from '@tamagui/stacks'
 import { startTransition } from '@tamagui/start-transition'
 import * as React from 'react'
 import { VIEWPORT_NAME } from './constants'
@@ -13,51 +13,29 @@ import {
   useSelectContext,
   useSelectItemParentContext,
 } from './context'
-import type { SelectViewportExtraProps } from './types'
+import type { SelectViewportProps } from './types'
+import { getSelectListboxProps } from './selectionController'
 
 /* -------------------------------------------------------------------------------------------------
  * SelectViewport
  * -----------------------------------------------------------------------------------------------*/
 
-// must extend ThemeableStack (not YStack) so the `elevate` and `bordered`
-// variants used below resolve via stacks/variants instead of leaking to DOM.
-export const SelectViewportFrame = styled(ThemeableStack, {
-  name: VIEWPORT_NAME,
-
-  variants: {
-    unstyled: {
-      false: {
-        size: '$2',
-        backgroundColor: '$background',
-        elevate: true,
-        bordered: true,
-        userSelect: 'none',
-        outlineWidth: 0,
-      },
-    },
-
-    size: {
-      '...size': (val, { tokens }) => {
-        return {
-          borderRadius: tokens.radius[val] ?? val,
-        }
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+export const SelectViewportFrame = styled(View, {
+  displayName: VIEWPORT_NAME,
+  position: 'relative',
 })
 
 const needsRepropagation = needsPortalRepropagation()
 
-export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraProps>(
-  function SelectViewport(props, forwardedRef) {
+export const SelectViewport = createStyledHOC(
+  SelectViewportFrame,
+  function SelectViewport(props: SelectViewportProps, forwardedRef) {
     const { scope, children, disableScroll, ...viewportProps } = props
     const context = useSelectContext(scope)
     const itemContext = useSelectItemParentContext(scope)
     const isAdapted = useAdaptIsActive(context.adaptScope)
+    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)
@@ -71,9 +49,25 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
       })
     }, [context.lazyMount, context.open, lazyMounted])
 
+    React.useEffect(() => {
+      if (!isWeb || !isAdapted || !context.open) return
+      const frame = requestAnimationFrame(() => {
+        const index =
+          context.activeIndexRef.current ?? itemContext.registry.firstEnabledIndex()
+        const activeItem =
+          (viewportRef.current?.querySelector(
+            '[role="option"][tabindex="0"]'
+          ) as HTMLElement | null) ??
+          (index >= 0 ? itemContext.listRef?.current[index] : null)
+        activeItem?.focus()
+      })
+      return () => cancelAnimationFrame(frame)
+    }, [context.open, isAdapted, registeredItemCount])
+
     const composedRefs = useComposedRefs(
-      // @ts-ignore TODO react 19 type needs fix
+      // @ts-ignore react 19 ref type mismatch
       forwardedRef,
+      viewportRef,
       context.floatingContext?.refs.setFloating as any
     )
 
@@ -85,18 +79,28 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
 
     // after lazy children mount, force floating-ui to recompute so inner middleware
     // can position using the now-present list items
-    useIsomorphicLayoutEffect(() => {
+    React.useEffect(() => {
       if (context.lazyMount && lazyMounted && context.open && context.update) {
-        context.update()
+        const frame = requestAnimationFrame(context.update)
+        return () => cancelAnimationFrame(frame)
       }
-    }, [lazyMounted])
+    }, [lazyMounted, registeredItemCount])
 
     if (itemContext.shouldRenderWebNative) {
       return <YStack position="relative">{children}</YStack>
     }
 
     if (isAdapted || !isWeb) {
-      let content = children
+      let content = (
+        <SelectViewportFrame
+          {...viewportProps}
+          {...(isWeb ? (getSelectListboxProps(itemContext.mode) as any) : {})}
+          data-select-viewport=""
+          ref={composedRefs}
+        >
+          {lazyMounted ? children : null}
+        </SelectViewportFrame>
+      )
 
       if (needsRepropagation) {
         content = (
@@ -111,44 +115,40 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
       )
     }
 
-    if (!itemContext.interactions) {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn(`No interactions provided to Select, potentially missing Adapt`)
-      }
-
+    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
     return (
       <>
-        {!disableScroll && !props.unstyled && (
+        {!disableScroll && (
           <style
             dangerouslySetInnerHTML={{
               __html: selectViewportCSS,
             }}
           />
         )}
-        <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"
-              size={itemContext.size}
-              role="presentation"
+              data-select-viewport=""
+              {...(isWeb && {
+                'data-state': context.open ? 'open' : 'closed',
+              })}
               {...viewportProps}
-              {...style}
+              {...context.floatingPosition}
+              outlineWidth={0}
               {...floatingProps}
-              {...(!props.unstyled && {
-                overflowY: disableScroll ? undefined : (style.overflow ?? 'auto'),
-              })}
+              {...getSelectListboxProps(itemContext.mode)}
+              overflowY={disableScroll ? undefined : 'auto'}
               ref={composedRefs}
             >
               {lazyMounted ? children : null}
@@ -167,13 +167,13 @@ export const SelectViewport = SelectViewportFrame.styleable<SelectViewportExtraP
 )
 
 const selectViewportCSS = `
-.is_SelectViewport {
+[data-select-viewport] {
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
 
-.is_SelectViewport::-webkit-scrollbar{
+[data-select-viewport]::-webkit-scrollbar{
   display:none
 }
 `

package/src/context.tsx

@@ -1,11 +1,15 @@
 import { createStyledContext } from '@tamagui/core'
 import { getPortal } from '@tamagui/native'
-import { createContext } from 'react'
+import { createContext, type ComponentType } from 'react'
 import type { SelectContextValue, SelectItemParentContextValue } from './types'
 
 // zIndex flows from root Select prop to SelectContent portal
 export const SelectZIndexContext = createContext<number | undefined>(undefined)
 
+// the behavior surface renders a raw native select. the styled tamagui surface
+// supplies its native-select skin through this slot.
+export const SelectNativeComponentContext = createContext<ComponentType<any> | null>(null)
+
 export const { Provider: SelectProvider, useStyledContext: useSelectContext } =
   createStyledContext<SelectContextValue>(null as any, 'Select')
 
@@ -34,7 +38,7 @@ export const ForwardSelectContext = ({
 
   // fall back to context forwarding for legacy portal implementations
   return (
-    <SelectProvider isInSheet scope={context.scopeName} {...context}>
+    <SelectProvider scope={context.scopeName} {...context}>
       <SelectItemParentProvider scope={context.scopeName} {...itemContext}>
         {children}
       </SelectItemParentProvider>

package/src/index.tsx

@@ -1,5 +1,8 @@
 export * from './Select'
+export * from './SelectItem'
+export * from './SelectItemText'
+export * from './SelectScrollButton'
+export * from './SelectTrigger'
+export * from './SelectViewport'
 export type * from './types'
 export * from './context'
-export type { SelectItemProps, SelectItemExtraProps } from './SelectItem'
-export type { SelectTriggerProps } from './SelectTrigger'