@tamagui/select 2.7.7 → 3.0.0-beta.643.1

package/src/selectionController.ts

@@ -0,0 +1,389 @@
+import type { ReactNode } from 'react'
+
+export type SelectMode = 'single' | 'multiple'
+export type SelectSelection = string | string[]
+
+export type SelectRegisteredItem = {
+  id: symbol
+  value: string
+  disabled: boolean
+  textValue?: string
+  label?: ReactNode
+}
+
+export type SelectItemRegistration = {
+  id: symbol
+  update(item: Partial<Omit<SelectRegisteredItem, 'id'>>): void
+  setNode(node: unknown): void
+  unregister(): void
+}
+
+export type SelectItemRegistry = ReturnType<typeof createSelectItemRegistry>
+
+export function getSelectLabelText(label: ReactNode): string {
+  if (typeof label === 'string' || typeof label === 'number') {
+    return String(label)
+  }
+  if (Array.isArray(label)) {
+    return label.map(getSelectLabelText).join('')
+  }
+  if (label && typeof label === 'object' && 'props' in label) {
+    return getSelectLabelText((label as any).props?.children)
+  }
+  return ''
+}
+
+export function createSelectItemRegistry(onChange?: () => void) {
+  const items: SelectRegisteredItem[] = []
+  const labelRegistrations = new Map<
+    string,
+    Map<symbol, { label: ReactNode; textValue?: string }>
+  >()
+  const explicitTextValues = new Map<symbol, string | undefined>()
+  const itemNodes = new Map<symbol, any>()
+  const listeners = new Set<() => void>()
+
+  const notify = () => {
+    onChange?.()
+    listeners.forEach((listener) => listener())
+  }
+
+  const getItems = () => items
+
+  const getItem = (value: string) => items.find((item) => item.value === value)
+
+  const getIndex = (value: string) => items.findIndex((item) => item.value === value)
+
+  const getRegisteredLabel = (value: string) => {
+    const registrations = labelRegistrations.get(value)
+    if (!registrations?.size) return undefined
+    const values = Array.from(registrations.values())
+    return values[values.length - 1]
+  }
+
+  const applyRegisteredLabel = (value: string) => {
+    const registeredLabel = getRegisteredLabel(value)
+    let changed = false
+    for (const item of items) {
+      if (item.value !== value) continue
+      const nextLabel = registeredLabel?.label
+      const nextTextValue = explicitTextValues.get(item.id) || registeredLabel?.textValue
+      if (item.label !== nextLabel || item.textValue !== nextTextValue) {
+        item.label = nextLabel
+        item.textValue = nextTextValue
+        changed = true
+      }
+    }
+    if (changed) notify()
+  }
+
+  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)
+      if (!aNode || !bNode || typeof aNode.compareDocumentPosition !== 'function') {
+        return 0
+      }
+      const position = aNode.compareDocumentPosition(bNode)
+      if (position & 4) return -1
+      if (position & 2) return 1
+      return 0
+    })
+    if (items.some((item, index) => item.id !== previousOrder[index])) {
+      notify()
+    }
+  }
+
+  const registerItem = (
+    item: Omit<SelectRegisteredItem, 'id'>
+  ): SelectItemRegistration => {
+    const id = Symbol(item.value)
+    const registeredLabel = getRegisteredLabel(item.value)
+    const registeredItem: SelectRegisteredItem = {
+      ...item,
+      ...registeredLabel,
+      textValue: item.textValue ?? registeredLabel?.textValue,
+      id,
+    }
+    explicitTextValues.set(id, item.textValue)
+    items.push(registeredItem)
+    notify()
+
+    return {
+      id,
+      update(next) {
+        const index = items.findIndex((current) => current.id === id)
+        if (index < 0) return
+        const current = items[index]
+        if ('textValue' in next) {
+          explicitTextValues.set(id, next.textValue)
+        }
+        const nextItem = { ...current, ...next }
+        if (next.value !== undefined && next.value !== current.value) {
+          const nextLabel = getRegisteredLabel(next.value)
+          nextItem.label = nextLabel?.label
+        }
+        const explicitTextValue = explicitTextValues.get(id)
+        nextItem.textValue =
+          explicitTextValue ||
+          getSelectLabelText(nextItem.label) ||
+          (nextItem.label ? nextItem.value : undefined)
+        const changed = Object.entries(next).some(
+          ([key, value]) => current[key as keyof SelectRegisteredItem] !== value
+        )
+        const textValueChanged = current.textValue !== nextItem.textValue
+        if (!changed && !textValueChanged) return
+        items[index] = nextItem
+        notify()
+      },
+      setNode(node) {
+        if (node) {
+          itemNodes.set(id, node)
+          syncNodeOrder()
+        } else {
+          itemNodes.delete(id)
+        }
+      },
+      unregister() {
+        const index = items.findIndex((current) => current.id === id)
+        if (index < 0) return
+        items.splice(index, 1)
+        explicitTextValues.delete(id)
+        itemNodes.delete(id)
+        notify()
+      },
+    }
+  }
+
+  const registerLabel = (value: string, label: ReactNode, textValue?: string) => {
+    const id = Symbol(value)
+    const normalizedTextValue = textValue || getSelectLabelText(label) || value
+    const registrations =
+      labelRegistrations.get(value) ??
+      (() => {
+        const next = new Map<symbol, { label: ReactNode; textValue?: string }>()
+        labelRegistrations.set(value, next)
+        return next
+      })()
+    registrations.set(id, { label, textValue: normalizedTextValue })
+    applyRegisteredLabel(value)
+
+    return () => {
+      registrations.delete(id)
+      if (!registrations.size) {
+        labelRegistrations.delete(value)
+      }
+      applyRegisteredLabel(value)
+    }
+  }
+
+  const firstEnabledIndex = () => items.findIndex((item) => !item.disabled)
+
+  const nextEnabledIndex = (fromIndex: number | null, direction: 1 | -1) => {
+    if (!items.length) return -1
+    if (fromIndex == null || fromIndex < 0 || fromIndex >= items.length) {
+      if (direction === 1) return firstEnabledIndex()
+      for (let index = items.length - 1; index >= 0; index--) {
+        if (!items[index].disabled) return index
+      }
+      return -1
+    }
+    for (let offset = 1; offset <= items.length; offset++) {
+      const index = (fromIndex + direction * offset + items.length) % items.length
+      if (!items[index]?.disabled) return index
+    }
+    return -1
+  }
+
+  const findTypeaheadIndex = (search: string, fromIndex: number | null) => {
+    const normalizedSearch = search.trim().toLocaleLowerCase()
+    if (!normalizedSearch) return -1
+    const start = fromIndex == null || fromIndex < 0 ? -1 : fromIndex
+    for (let offset = 1; offset <= items.length; offset++) {
+      const index = (start + offset) % items.length
+      const item = items[index]
+      const label = item.textValue || getSelectLabelText(item.label) || item.value
+      if (!item.disabled && label.toLocaleLowerCase().startsWith(normalizedSearch)) {
+        return index
+      }
+    }
+    return -1
+  }
+
+  return {
+    subscribe(listener: () => void) {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+    registerItem,
+    registerLabel,
+    getItems,
+    getItem,
+    getIndex,
+    firstEnabledIndex,
+    nextEnabledIndex,
+    findTypeaheadIndex,
+    getDisabledIndices: () =>
+      items.flatMap((item, index) => (item.disabled ? [index] : [])),
+    getTypeaheadLabels: () =>
+      items.map((item) => item.textValue || getSelectLabelText(item.label) || item.value),
+  }
+}
+
+export function normalizeSelectSelection(
+  mode: SelectMode,
+  value: SelectSelection | undefined
+): SelectSelection {
+  if (mode === 'single') {
+    return typeof value === 'string' ? value : ''
+  }
+  const values = Array.isArray(value) ? value : []
+  return [...new Set(values)]
+}
+
+export function selectedValuesFromSelection(
+  mode: SelectMode,
+  value: SelectSelection | undefined
+): string[] {
+  const normalized = normalizeSelectSelection(mode, value)
+  return mode === 'multiple'
+    ? (normalized as string[])
+    : normalized
+      ? [normalized as string]
+      : []
+}
+
+export function createSelectSelectionController({
+  mode: initialMode,
+  value: initialValue,
+  registry,
+}: {
+  mode: SelectMode
+  value: SelectSelection
+  registry: SelectItemRegistry
+}) {
+  let mode = initialMode
+  let value = normalizeSelectSelection(mode, initialValue)
+  let activeIndex: number | null = null
+
+  const selectedValues = () => selectedValuesFromSelection(mode, value)
+
+  const setMode = (nextMode: SelectMode) => {
+    if (mode === nextMode) return value
+    mode = nextMode
+    value = normalizeSelectSelection(mode, value)
+    return value
+  }
+
+  const setValue = (nextValue: SelectSelection) => {
+    value = normalizeSelectSelection(mode, nextValue)
+    return value
+  }
+
+  const isSelected = (itemValue: string) => selectedValues().includes(itemValue)
+
+  const toggle = (itemValue: string) => {
+    const item = registry.getItem(itemValue)
+    if (!item || item.disabled) return value
+    if (mode === 'single') {
+      value = itemValue
+      return value
+    }
+    const current = selectedValues()
+    value = current.includes(itemValue)
+      ? current.filter((currentValue) => currentValue !== itemValue)
+      : [...current, itemValue]
+    return value
+  }
+
+  const selectionAnchor = () => {
+    const values = selectedValues()
+    for (let index = values.length - 1; index >= 0; index--) {
+      const item = registry.getItem(values[index])
+      if (item) return item
+    }
+    const firstEnabledIndex = registry.firstEnabledIndex()
+    return firstEnabledIndex < 0 ? undefined : registry.getItems()[firstEnabledIndex]
+  }
+
+  const selectionAnchorIndex = () => {
+    const anchor = selectionAnchor()
+    return anchor ? registry.getIndex(anchor.value) : -1
+  }
+
+  const initialActiveIndex = () => {
+    const anchorIndex = selectionAnchorIndex()
+    const anchor = anchorIndex < 0 ? undefined : registry.getItems()[anchorIndex]
+    return anchor && !anchor.disabled ? anchorIndex : registry.firstEnabledIndex()
+  }
+
+  const moveActive = (direction: 1 | -1) => {
+    const nextIndex = registry.nextEnabledIndex(activeIndex, direction)
+    activeIndex = nextIndex < 0 ? null : nextIndex
+    return activeIndex == null ? undefined : registry.getItems()[activeIndex]
+  }
+
+  return {
+    registry,
+    get mode() {
+      return mode
+    },
+    get value() {
+      return value
+    },
+    get activeIndex() {
+      return activeIndex
+    },
+    get activeItem() {
+      return activeIndex == null ? undefined : registry.getItems()[activeIndex]
+    },
+    get shouldCloseOnSelect() {
+      return mode === 'single'
+    },
+    setMode,
+    setValue,
+    isSelected,
+    toggle,
+    selectionAnchor,
+    selectionAnchorIndex,
+    initialActiveIndex,
+    setActiveIndex(index: number | null) {
+      activeIndex = index
+    },
+    moveActive,
+  }
+}
+
+export function getSelectListboxProps(mode: SelectMode) {
+  return {
+    role: 'listbox' as const,
+    'aria-multiselectable': mode === 'multiple' ? true : undefined,
+  }
+}
+
+export function getSelectOptionProps(
+  mode: SelectMode,
+  selected: boolean,
+  disabled: boolean,
+  platform: 'web' | 'native'
+) {
+  if (platform === 'native') {
+    return {
+      accessibilityRole:
+        mode === 'multiple' ? ('checkbox' as const) : ('button' as const),
+      accessibilityState: {
+        selected: mode === 'single' ? selected : undefined,
+        checked: mode === 'multiple' ? selected : undefined,
+        disabled,
+      },
+    }
+  }
+  return {
+    role: 'option' as const,
+    'aria-selected': selected,
+    'aria-disabled': disabled || undefined,
+  }
+}

package/src/types.tsx

@@ -1,12 +1,17 @@
-import type { NativeValue, SizeTokens } from '@tamagui/core'
-import type { YStackProps } from '@tamagui/stacks'
 import type {
-  DispatchWithoutAction,
-  HTMLProps,
-  MutableRefObject,
-  ReactNode,
-  RefObject,
-} from 'react'
+  NativeValue,
+  SizeTokens,
+  TamaguiChangeEventDetails,
+  TamaguiEventDetails,
+  ViewProps,
+} from '@tamagui/core'
+import type { DismissableProps } from '@tamagui/dismissable'
+import type { HTMLProps, MutableRefObject, ReactNode, RefObject } from 'react'
+import type {
+  SelectItemRegistry,
+  SelectMode,
+  SelectSelection,
+} from './selectionController'
 
 // minimal types replacing @floating-ui/react imports
 type ContextData = Record<string, any>
@@ -30,7 +35,30 @@ export type SelectScopes = string
 
 export type SelectScopedProps<P> = P & { scope?: SelectScopes }
 
-export type SelectImplProps = SelectScopedProps<SelectProps> & {
+export type SelectValueForMode<
+  Value extends string = string,
+  Multiple extends boolean | undefined = false,
+> = Multiple extends true
+  ? Value[]
+  : Multiple extends false | undefined
+    ? Value
+    : Value | Value[]
+
+export type SelectValueChangeDetails = TamaguiChangeEventDetails<
+  'item-press' | 'keyboard' | 'native-change'
+>
+
+export type SelectOpenChangeDetails = TamaguiChangeEventDetails<
+  'trigger-press' | 'keyboard' | 'outside-press' | 'escape-key' | 'item-press'
+>
+
+export type SelectActiveChangeDetails = TamaguiEventDetails<
+  'item-hover' | 'list-navigation' | 'keyboard',
+  unknown,
+  { index: number }
+>
+
+export type SelectImplProps = SelectScopedProps<SelectProps<string, boolean>> & {
   activeIndexRef: any
   selectedIndexRef: any
   listContentRef: any
@@ -38,19 +66,24 @@ export type SelectImplProps = SelectScopedProps<SelectProps> & {
   setActiveIndexFast: (index: number | null) => void
 }
 
-export interface SelectProps<Value extends string = string> {
+export interface SelectProps<
+  Value extends string = string,
+  Multiple extends boolean | undefined = false,
+> {
   id?: string
   children?: ReactNode
-  value?: Value
-  defaultValue?: Value
-  onValueChange?(value: Value): void
+  multiple?: Multiple
+  value?: SelectValueForMode<Value, Multiple>
+  defaultValue?: SelectValueForMode<Value, Multiple>
+  onValueChange?(
+    value: SelectValueForMode<Value, Multiple>,
+    details: SelectValueChangeDetails
+  ): void
   open?: boolean
   defaultOpen?: boolean
-  onOpenChange?(open: boolean): void
+  onOpenChange?(open: boolean, details: SelectOpenChangeDetails): void
   dir?: SelectDirection
-  name?: string
-  autoComplete?: string
-  size?: SizeTokens
+  size?: SizeTokens | true
   /**
    * If passed, will render a native component instead of the custom one. Currently only `web` is supported.
    */
@@ -64,7 +97,7 @@ export interface SelectProps<Value extends string = string> {
   /**
    * Called when an item is hovered by mouse or navigated to by keyboard.
    */
-  onActiveChange?(value: string, index: number): void
+  onActiveChange?(value: string, details: SelectActiveChangeDetails): void
 
   /**
    * Render function for the selected value. Use this for SSR support.
@@ -79,7 +112,13 @@ export interface SelectProps<Value extends string = string> {
    * >
    * ```
    */
-  renderValue?(value: Value): ReactNode
+  renderValue?(value: SelectValueForMode<Value, Multiple>): ReactNode
+
+  /** web form field name. inert on react native. */
+  name?: string
+
+  /** associates the web form control with an external form. inert on react native. */
+  form?: string
 
   /**
    * When true, defers mounting Select items until opened using startTransition.
@@ -106,18 +145,19 @@ export interface SelectItemParentContextValue {
   adaptScope: string
   scopeName: string
   id?: string
-  initialValue?: any
-  setSelectedIndex: (index: number) => void
+  name?: string
+  form?: string
+  mode: SelectMode
+  selectedValues: string[]
+  registry: SelectItemRegistry
   listRef?: MutableRefObject<Array<HTMLElement | null>>
-  setOpen: (open: boolean) => void
-  onChange: (value: string) => void
-  onActiveChange: (value: string, index: number) => void
+  requestOpenChange: (open: boolean, details: SelectOpenChangeDetails) => void
+  selectValue: (value: string, details: SelectValueChangeDetails) => void
+  changeNativeValue: (value: SelectSelection, event: unknown) => void
   activeIndexSubscribe: EmitterSubscriber<number>
   activeIndexRef?: MutableRefObject<number | null>
-  valueSubscribe: EmitterSubscriber<any>
   allowSelectRef?: MutableRefObject<boolean>
   allowMouseUpRef?: MutableRefObject<boolean>
-  setValueAtIndex: (index: number, value: string) => void
   selectTimeoutRef?: MutableRefObject<any>
   dataRef?: MutableRefObject<ContextData>
   interactions?: {
@@ -126,13 +166,11 @@ export interface SelectItemParentContextValue {
     getItemProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any
   }
   shouldRenderWebNative?: boolean
-  size?: SizeTokens
+  size?: SizeTokens | true
   /** fast setter: updates ref + emits to subscribers (no re-render) - use for keyboard navigation */
-  setActiveIndexFast?: (index: number | null) => void
-  /** the rendered content of the currently selected item (for portaling to SelectValue) */
-  selectedItem: ReactNode
-  /** sets the selected item content */
-  setSelectedItem: (item: ReactNode) => void
+  setActiveIndexFast?: (index: number | null, details?: SelectActiveChangeDetails) => void
+  moveActive: (direction: 1 | -1, event?: unknown) => void
+  search: (text: string, event?: unknown) => void
 }
 
 export interface SelectContextValue {
@@ -140,19 +178,20 @@ export interface SelectContextValue {
   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 */
   activeIndexRef: MutableRefObject<number | null>
   /** slow setter: updates ref + emits + triggers re-render */
-  setActiveIndex: (index: number | null) => void
+  setActiveIndex: (index: number | null, details?: SelectActiveChangeDetails) => void
   open: boolean
   valueNode: Element | null
   onValueNodeChange(node: HTMLElement): void
-  forceUpdate: DispatchWithoutAction
-  // SheetImpl only:
-  isInSheet?: boolean
   // InlineImpl only:
   fallback: boolean
   blockSelection: boolean
@@ -175,24 +214,28 @@ export interface SelectContextValue {
 }
 
 export type SelectViewportExtraProps = SelectScopedProps<{
-  size?: SizeTokens
+  size?: SizeTokens | true
   disableScroll?: boolean
-  unstyled?: boolean
 }>
 
-export type SelectViewportProps = YStackProps & SelectViewportExtraProps
+export type SelectViewportProps = ViewProps & SelectViewportExtraProps
 
-export type SelectContentProps = SelectScopedProps<{
-  children?: React.ReactNode
-}>
+export type SelectContentProps = SelectScopedProps<
+  {
+    children?: React.ReactNode
+  } & Pick<
+    DismissableProps,
+    'onEscapeKeyDown' | 'onPointerDownOutside' | 'onFocusOutside' | 'onInteractOutside'
+  >
+>
 
-export type SelectScrollButtonImplProps = YStackProps &
+export type SelectScrollButtonImplProps = ViewProps &
   SelectScopedProps<{
     dir: 'up' | 'down'
-    componentName: string
+    partClassName: string
   }>
 
 export interface SelectScrollButtonProps extends Omit<
   SelectScrollButtonImplProps,
-  'dir' | 'componentName'
+  'dir' | 'partClassName'
 > {}