@tamagui/select 2.7.7 → 3.0.0-beta.1091.1

package/src/SelectItem.tsx

@@ -1,11 +1,23 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
+import { useAdaptIsActive } from '@tamagui/adapt'
 import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { createStyledContext } from '@tamagui/core'
-import type { ListItemProps } from '@tamagui/list-item'
-import { ListItem } from '@tamagui/list-item'
+import {
+  createChangeEventDetails,
+  createStyledHOC,
+  createStyledContext,
+  styled,
+  View,
+} from '@tamagui/core'
+import type { GetProps } from '@tamagui/core'
+import { composeEventHandlers } from '@tamagui/helpers'
 import * as React from 'react'
 import { useSelectItemParentContext } from './context'
-import type { SelectScopedProps } from './types'
+import { getSelectOptionProps } from './selectionController'
+import type {
+  SelectActiveChangeDetails,
+  SelectScopedProps,
+  SelectValueChangeDetails,
+} from './types'
 
 /* -------------------------------------------------------------------------------------------------
  * SelectItem
@@ -16,6 +28,7 @@ const ITEM_NAME = 'SelectItem'
 type SelectItemContextValue = {
   value: string
   textId: string
+  textValue?: string
   isSelected: boolean
 }
 
@@ -26,228 +39,336 @@ export const {
 
 export interface SelectItemExtraProps {
   value: string
-  index: number
   disabled?: boolean
   textValue?: string
 }
 
 export interface SelectItemProps
-  extends Omit<ListItemProps, keyof SelectItemExtraProps>, SelectItemExtraProps {}
+  extends
+    Omit<GetProps<typeof SelectItemFrame>, keyof SelectItemExtraProps>,
+    SelectItemExtraProps {}
+
+export const SelectItemFrame = styled(View, {
+  displayName: ITEM_NAME,
+  alignItems: 'center',
+  flexDirection: 'row',
+})
 
-export const SelectItem = ListItem.Frame.styleable<SelectItemExtraProps>(
+export const SelectItem = createStyledHOC(
+  SelectItemFrame,
   function SelectItem(props: SelectScopedProps<SelectItemProps>, forwardedRef) {
     const {
       scope,
       value,
-      disabled = false,
+      disabled: disabledProp,
+      'aria-disabled': ariaDisabled,
       textValue: textValueProp,
-      index,
       ...restProps
     } = 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 isAdapted = useAdaptIsActive(context.adaptScope)
 
     const {
-      setSelectedIndex,
-      listRef,
-      setOpen,
-      onChange,
+      registry,
+      mode,
+      selectedValues,
+      selectValue,
       activeIndexSubscribe,
       activeIndexRef,
-      valueSubscribe,
       allowMouseUpRef,
       allowSelectRef,
-      setValueAtIndex,
       selectTimeoutRef,
-      dataRef,
-      interactions,
+      getItemProps,
       shouldRenderWebNative,
-      size,
-      onActiveChange,
-      initialValue,
-      setActiveIndexFast,
+      setActiveIndex,
+      lastPointerRef,
+      moveActive,
+      search,
     } = context
 
-    const [isSelected, setSelected] = React.useState(initialValue === value)
+    const isSelected = selectedValues.includes(value)
+    const pendingMouseUpSelectionRef = React.useRef(false)
+    const itemNodeRef = React.useRef<any>(null)
+    const registrationRef = React.useRef<ReturnType<typeof registry.registerItem> | null>(
+      null
+    )
+    const initialRegistration = React.useRef({
+      value,
+      disabled,
+      textValue: textValueProp,
+    })
 
-    // set initial selectedIndex when this item matches the initial value
+    // 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(() => {
-      if (initialValue === value) {
-        setSelectedIndex(index)
+      const registration = registry.registerItem(initialRegistration.current)
+      registrationRef.current = registration
+      registration.setNode(itemNodeRef.current)
+      return () => {
+        registrationRef.current = null
+        registration.unregister()
       }
-    }, [])
+    }, [registry])
+
+    useIsomorphicLayoutEffect(() => {
+      registrationRef.current?.update({ value, disabled, textValue: textValueProp })
+    }, [disabled, textValueProp, value])
+
+    useIsomorphicLayoutEffect(() => {
+      registrationRef.current?.setNode(itemNodeRef.current)
+    })
+
+    // 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) {
-          onActiveChange(value, index)
-          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)
-    }, [index])
-
-    React.useEffect(() => {
-      return valueSubscribe((val) => {
-        setSelected(val === value)
-      })
-    }, [value])
+    }, [activeIndexRef, activeIndexSubscribe, registry, value])
 
     const textId = React.useId()
 
-    const refCallback = React.useCallback(
-      (node) => {
-        if (!isWeb) return
-        if (node instanceof HTMLElement) {
-          if (listRef) {
-            listRef.current[index] = node
-          }
-        }
-      },
-      [index, listRef]
-    )
+    const refCallback = React.useCallback((node) => {
+      itemNodeRef.current = node
+      registrationRef.current?.setNode(node)
+    }, [])
 
     const composedRefs = useComposedRefs(forwardedRef, refCallback)
 
-    useIsomorphicLayoutEffect(() => {
-      setValueAtIndex(index, value)
-    }, [index, setValueAtIndex, value])
+    const handleSelect = React.useCallback(
+      (event?: any, reason: 'item-press' | 'keyboard' = 'item-press') => {
+        if (disabled) return
+        const nativeEvent = event?.nativeEvent || event
+        selectValue(
+          value,
+          createChangeEventDetails(
+            reason,
+            nativeEvent,
+            event?.currentTarget
+          ) as SelectValueChangeDetails
+        )
+      },
+      [disabled, selectValue, value]
+    )
 
-    function handleSelect() {
-      setSelectedIndex(index)
-      onChange(value)
-      setOpen(false)
-    }
+    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
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          handleSelect(event, 'keyboard')
+          return
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          event.preventDefault()
+          event.stopPropagation()
+          moveActive(event.key === 'ArrowDown' ? 1 : -1, event.nativeEvent || event)
+          return
+        }
+        if (
+          !getItemProps &&
+          event.key?.length === 1 &&
+          !event.metaKey &&
+          !event.ctrlKey
+        ) {
+          search(event.key, event.nativeEvent || event)
+        }
+        if (allowSelectRef) {
+          allowSelectRef.current = true
+        }
+      },
+      [allowSelectRef, disabled, handleSelect, getItemProps, moveActive, search]
+    )
 
     const selectItemProps = React.useMemo(() => {
-      return interactions
-        ? interactions.getItemProps({
-            onTouchMove() {
-              allowSelectRef!.current = true
-              allowMouseUpRef!.current = false
-            },
-            onTouchEnd() {
-              allowSelectRef!.current = false
+      if (getItemProps) {
+        const {
+          onTouchMove,
+          onTouchEnd,
+          onKeyDown,
+          onClick,
+          onMouseUp,
+          onMouseMove,
+          onPress,
+          ...itemProps
+        } = restProps
+        const interactionProps = getItemProps({
+          ...itemProps,
+          onTouchMove() {
+            allowSelectRef!.current = true
+            allowMouseUpRef!.current = false
+          },
+          onTouchEnd() {
+            allowSelectRef!.current = false
+            allowMouseUpRef!.current = true
+          },
+          onMouseMove: handleMouseMove,
+          onKeyDown: handleKeyDown,
+          onClick(event) {
+            if (disabled) return
+            const shouldSelect =
+              pendingMouseUpSelectionRef.current || allowSelectRef!.current
+            pendingMouseUpSelectionRef.current = false
+            clearTimeout(selectTimeoutRef!.current)
+            allowSelectRef!.current = true
+            if (shouldSelect) {
+              handleSelect(event)
+            }
+          },
+          onMouseUp(event) {
+            if (disabled) return
+            if (!allowMouseUpRef!.current) {
+              // Re-enable mouseup and selection for subsequent interactions
               allowMouseUpRef!.current = true
-            },
-            onKeyDown(event) {
-              if (
-                event.key === 'Enter' ||
-                (event.key === ' ' && !dataRef?.current.typing)
-              ) {
-                event.preventDefault()
-                handleSelect()
-              } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                // prevent default and stop propagation so floating-ui doesn't also handle
-                event.preventDefault()
-                event.stopPropagation()
-                const itemCount = listRef?.current.length ?? 0
-                if (itemCount === 0) return
+              allowSelectRef!.current = true
+              return
+            }
 
-                let nextIndex: number
-                if (event.key === 'ArrowDown') {
-                  nextIndex = index + 1 >= itemCount ? 0 : index + 1
-                } else {
-                  nextIndex = index - 1 < 0 ? itemCount - 1 : index - 1
-                }
-                // use fast setter to avoid triggering state updates that reset activeIndex
-                setActiveIndexFast?.(nextIndex)
-              } else {
-                allowSelectRef!.current = true
-              }
-            },
+            pendingMouseUpSelectionRef.current = allowSelectRef!.current
 
-            onClick() {
-              if (allowSelectRef!.current) {
-                handleSelect()
+            // A normal click follows mouseup synchronously. Defer the drag-release
+            // fallback so the caller's onClick runs before selection closes the item.
+            clearTimeout(selectTimeoutRef!.current)
+            selectTimeoutRef!.current = setTimeout(() => {
+              allowSelectRef!.current = true
+              if (pendingMouseUpSelectionRef.current) {
+                pendingMouseUpSelectionRef.current = false
+                handleSelect(event)
               }
-            },
+            })
+          },
+        } as any)
 
-            onMouseUp() {
-              if (!allowMouseUpRef!.current) {
-                // Re-enable mouseup and selection for subsequent interactions
-                allowMouseUpRef!.current = true
-                allowSelectRef!.current = true
-                return
-              }
+        return {
+          ...interactionProps,
+          onTouchMove: composeEventHandlers(
+            onTouchMove as any,
+            interactionProps.onTouchMove
+          ),
+          onTouchEnd: composeEventHandlers(
+            onTouchEnd as any,
+            interactionProps.onTouchEnd
+          ),
+          onKeyDown: composeEventHandlers(onKeyDown as any, interactionProps.onKeyDown),
+          onClick(event: any) {
+            onClick?.(event)
+            if (event.defaultPrevented) {
+              pendingMouseUpSelectionRef.current = false
+              clearTimeout(selectTimeoutRef!.current)
+              allowSelectRef!.current = true
+              return
+            }
+            interactionProps.onClick?.(event)
+          },
+          onMouseUp: composeEventHandlers(onMouseUp as any, interactionProps.onMouseUp),
+          onMouseMove: composeEventHandlers(
+            onMouseMove as any,
+            interactionProps.onMouseMove
+          ),
+          onPress,
+        }
+      }
 
-              if (allowSelectRef!.current) {
-                handleSelect()
-              }
+      return {
+        ...restProps,
+        onKeyDown: composeEventHandlers(restProps.onKeyDown as any, handleKeyDown),
+        onMouseMove: composeEventHandlers(restProps.onMouseMove as any, handleMouseMove),
+        onPress: composeEventHandlers(restProps.onPress as any, handleSelect),
+      }
+    }, [
+      allowMouseUpRef,
+      allowSelectRef,
+      disabled,
+      handleKeyDown,
+      handleMouseMove,
+      handleSelect,
+      getItemProps,
+      restProps,
+      selectTimeoutRef,
+    ])
 
-              // On touch devices, prevent the element from
-              // immediately closing `onClick` by deferring it
-              clearTimeout(selectTimeoutRef!.current)
-              selectTimeoutRef!.current = setTimeout(() => {
-                allowSelectRef!.current = true
-              })
-            },
-          })
-        : {
-            onPress: handleSelect,
-          }
-    }, [handleSelect, index, listRef, setActiveIndexFast])
+    const accessibilityProps = getSelectOptionProps(
+      mode,
+      isSelected,
+      disabled,
+      isWeb ? 'web' : 'native'
+    )
 
     return (
       <SelectItemContextProvider
         scope={scope}
         value={value}
         textId={textId || ''}
+        textValue={textValueProp}
         isSelected={isSelected}
       >
         {shouldRenderWebNative ? (
-          <option value={value}>{props.children}</option>
+          <option value={value} disabled={disabled}>
+            {props.children}
+          </option>
         ) : (
-          <ListItem.Frame
+          <SelectItemFrame
             render="div"
-            componentName={ITEM_NAME}
             ref={composedRefs}
-            role="option"
             aria-labelledby={textId}
-            aria-selected={isSelected}
             data-state={isSelected ? 'active' : 'inactive'}
-            aria-disabled={disabled || undefined}
             data-disabled={disabled ? '' : undefined}
-            tabIndex={disabled ? undefined : -1}
-            {...(!props.unstyled && {
-              cursor: 'default',
-              size,
-              outlineOffset: -0.5,
-              zIndex: 100,
-
-              hoverStyle: {
-                backgroundColor: '$backgroundHover',
-              },
-
-              pressStyle: {
-                backgroundColor: '$backgroundPress',
-              },
-
-              focusStyle: {
-                backgroundColor: '$backgroundFocus',
-              },
-
-              focusVisibleStyle: {
-                outlineColor: '$outlineColor',
-                outlineWidth: 1,
-                outlineStyle: 'solid',
-              },
-            })}
-            {...restProps}
+            tabIndex={
+              disabled
+                ? undefined
+                : isWeb &&
+                    isAdapted &&
+                    (isActive || (activeIndexRef?.current == null && isSelected))
+                  ? 0
+                  : -1
+            }
+            zIndex={100}
             {...selectItemProps}
+            {...accessibilityProps}
           />
         )}
       </SelectItemContextProvider>

package/src/SelectItemText.tsx

@@ -1,10 +1,10 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
 import type { GetProps, TamaguiTextElement } from '@tamagui/core'
-import { styled, useIsomorphicLayoutEffect } from '@tamagui/core'
-import { SizableText } from '@tamagui/text'
+import { createStyledHOC, styled, Text, useIsomorphicLayoutEffect } from '@tamagui/core'
 import * as React from 'react'
 
 import { useSelectItemParentContext } from './context'
+import { getSelectLabelText } from './selectionController'
 import { useSelectItemContext } from './SelectItem'
 import type { SelectScopedProps } from './types'
 
@@ -14,30 +14,17 @@ import type { SelectScopedProps } from './types'
 
 export const ITEM_TEXT_NAME = 'SelectItemText'
 
-export const SelectItemTextFrame = styled(SizableText, {
-  name: ITEM_TEXT_NAME,
-
-  variants: {
-    unstyled: {
-      false: {
-        userSelect: 'none',
-        color: '$color',
-        ellipsis: true,
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+export const SelectItemTextFrame = styled(Text, {
+  displayName: ITEM_TEXT_NAME,
 })
 
 type SelectItemTextExtraProps = SelectScopedProps<{}>
 export type SelectItemTextProps = GetProps<typeof SelectItemTextFrame> &
   SelectItemTextExtraProps
 
-export const SelectItemText = SelectItemTextFrame.styleable<SelectItemTextExtraProps>(
-  function SelectItemText(props, forwardedRef) {
+export const SelectItemText = createStyledHOC(
+  SelectItemTextFrame,
+  function SelectItemText(props: SelectItemTextProps, forwardedRef) {
     const { scope, className, ...itemTextProps } = props
     // note: only uses itemParentContext (not selectContext) to avoid re-renders
     // when activeIndex changes on hover
@@ -46,13 +33,15 @@ export const SelectItemText = SelectItemTextFrame.styleable<SelectItemTextExtraP
     const composedRefs = useComposedRefs(forwardedRef, ref)
     const itemContext = useSelectItemContext(scope)
     const contents = React.useRef<React.ReactNode>(null)
+    const label = React.useRef(props.children)
+    label.current = props.children
+    const labelText = getSelectLabelText(props.children)
 
     // we portal this to the selected area, which is fine to be a bit unsafe concurrently (mostly? its not changing often)...
     // until react native supports portals this is best i think
     contents.current = (
       <SelectItemTextFrame
         className={className}
-        size={itemParentContext.size as any}
         id={itemContext.textId}
         {...itemTextProps}
         ref={composedRefs}
@@ -60,18 +49,12 @@ export const SelectItemText = SelectItemTextFrame.styleable<SelectItemTextExtraP
     )
 
     useIsomorphicLayoutEffect(() => {
-      if (itemParentContext.initialValue === itemContext.value) {
-        itemParentContext.setSelectedItem(contents.current)
-      }
-    }, [])
-
-    useIsomorphicLayoutEffect(() => {
-      return itemParentContext.valueSubscribe((val) => {
-        if (val === itemContext.value) {
-          itemParentContext.setSelectedItem(contents.current)
-        }
-      })
-    }, [itemContext.value])
+      return itemParentContext.registry.registerLabel(
+        itemContext.value,
+        label.current,
+        itemContext.textValue
+      )
+    }, [itemContext.textValue, itemContext.value, itemParentContext.registry, labelText])
 
     if (itemParentContext.shouldRenderWebNative) {
       return <>{props.children}</>

package/src/SelectScrollButton.native.tsx

@@ -1,7 +1,16 @@
+import { createStyledHOC, styled, View } from '@tamagui/core'
 import type { SelectScopedProps, SelectScrollButtonProps } from './types'
 
-export const SelectScrollUpButton = (_: SelectScopedProps<SelectScrollButtonProps>) =>
-  null
+export const SelectScrollButtonFrame = styled(View, {
+  displayName: 'SelectScrollButton',
+})
 
-export const SelectScrollDownButton = (_: SelectScopedProps<SelectScrollButtonProps>) =>
-  null
+export const SelectScrollUpButton = createStyledHOC(
+  SelectScrollButtonFrame,
+  (_props: SelectScopedProps<SelectScrollButtonProps>) => null
+)
+
+export const SelectScrollDownButton = createStyledHOC(
+  SelectScrollButtonFrame,
+  (_props: SelectScopedProps<SelectScrollButtonProps>) => null
+)