@cdx-ui/primitives 0.3.3 → 0.3.4

package/src/select/SelectEmpty.tsx

@@ -0,0 +1,61 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useLayoutEffect,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
+import { useSelectContext } from './context';
+import type { ISelectEmptyProps } from './types';
+
+export interface SelectEmptyProps extends ISelectEmptyProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+function getTextContent(node: ReactNode): string {
+  return Children.toArray(node)
+    .map((child) => {
+      if (typeof child === 'string' || typeof child === 'number') {
+        return String(child);
+      }
+      if (isValidElement<{ children?: ReactNode }>(child)) {
+        return getTextContent(child.props.children);
+      }
+      return '';
+    })
+    .join('');
+}
+
+/**
+ * Renders only when no option matches. Its text is also what the search live region
+ * announces in that case.
+ */
+export const SelectEmpty = forwardRef<ComponentRef<typeof View>, SelectEmptyProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const { visibleItems, setEmptyText } = useSelectContext();
+    const text = getTextContent(children);
+
+    useLayoutEffect(() => {
+      setEmptyText(text || undefined);
+      return () => setEmptyText(undefined);
+    }, [setEmptyText, text]);
+
+    if (visibleItems.length > 0) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp ref={ref} {...props}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+SelectEmpty.displayName = 'SelectEmpty';

package/src/select/SelectItem.tsx

@@ -1,5 +1,12 @@
-import { forwardRef, useCallback, useMemo, type ComponentRef, type ReactNode } from 'react';
-import { Pressable } from 'react-native';
+import {
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { Platform, Pressable } from 'react-native';
 import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
@@ -13,6 +20,12 @@ export interface SelectItemProps extends Omit<ISelectItemProps, 'children'> {
   children?: ReactNode;
 }
 
+/**
+ * Options are reached through the highlight (`aria-activedescendant`), not the Tab order, so
+ * popup autofocus lands on the search input or the listbox rather than the first option.
+ */
+const WEB_OPTION_PROPS = Platform.OS === 'web' ? { tabIndex: -1 as const } : {};
+
 export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemProps>(
   (
     {
@@ -30,18 +43,32 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
     ref,
   ) => {
     const {
-      value: selectedValue,
-      onValueChange,
-      setOpen,
+      isSelected,
+      commitValue,
       activeValue,
+      setActiveValue,
       contentId,
+      items,
       disabled: contextDisabled,
+      registerDisabledItem,
+      isItemVisible,
     } = useSelectContext();
 
-    const disabled = contextDisabled || !!disabledProp || !!isDisabledProp;
-    const checked = selectedValue === itemValue;
+    const isDisabledByItem = !!disabledProp || !!isDisabledProp;
+    const disabled =
+      contextDisabled ||
+      isDisabledByItem ||
+      items.some((item) => item.value === itemValue && !!item.disabled);
+    const checked = isSelected(itemValue);
     const highlighted = activeValue === itemValue;
 
+    useLayoutEffect(() => {
+      if (isDisabledByItem) {
+        return registerDisabledItem(itemValue);
+      }
+      return undefined;
+    }, [isDisabledByItem, itemValue, registerDisabledItem]);
+
     const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
       isFocusVisible: boolean;
       focusProps: {
@@ -55,10 +82,10 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
 
     const handlePress = useCallback(() => {
       if (!disabled) {
-        onValueChange(itemValue);
-        setOpen(false);
+        setActiveValue(itemValue);
+        commitValue(itemValue);
       }
-    }, [disabled, itemValue, onValueChange, setOpen]);
+    }, [disabled, itemValue, commitValue, setActiveValue]);
 
     const interactionState = useMemo(
       () => ({
@@ -85,6 +112,10 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
       ],
     );
 
+    if (!isItemVisible(itemValue)) {
+      return null;
+    }
+
     const Comp = asChild ? Slot : Pressable;
 
     return (
@@ -96,6 +127,7 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
           aria-selected={checked}
           aria-disabled={disabled}
           disabled={disabled}
+          {...WEB_OPTION_PROPS}
           {...props}
           {...mergeDataAttributes(
             props,

package/src/select/SelectListbox.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { useSelectContext } from './context';
+import type { ISelectListboxProps } from './types';
+
+export interface SelectListboxProps extends ISelectListboxProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+/**
+ * Wraps the options. With `Select.Search` mounted it is the `role="listbox"` inside the dialog
+ * popup; without it the popup itself is the listbox and this renders a plain container.
+ */
+export const SelectListbox = forwardRef<ComponentRef<typeof View>, SelectListboxProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const { hasSearch, listboxId, labelId, triggerId, accessibilityLabel, type } =
+      useSelectContext();
+
+    const listboxProps = hasSearch
+      ? {
+          role: 'listbox' as const,
+          id: listboxId,
+          'aria-labelledby': labelId ?? (accessibilityLabel ? undefined : triggerId),
+          'aria-label': labelId ? undefined : accessibilityLabel,
+          ...(Platform.OS === 'web'
+            ? { 'aria-multiselectable': type === 'multiple' || undefined }
+            : {}),
+        }
+      : {};
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp ref={ref} {...listboxProps} {...props}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+SelectListbox.displayName = 'SelectListbox';

package/src/select/SelectRoot.tsx

@@ -1,6 +1,7 @@
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useId,
   useMemo,
   useRef,
@@ -12,19 +13,52 @@ import { useControllableState, useFormControl } from '@cdx-ui/utils';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { SelectProvider } from './context';
-import type { ISelectProps } from './types';
+import { defaultSelectFilter } from './filter';
+import type { ISelectProps, SelectFilter, SelectItemData, SelectType } from './types';
 
-export interface SelectRootProps extends ISelectProps, Omit<ViewProps, 'children'> {
+export type SelectRootProps = ISelectProps &
+  Omit<ViewProps, 'children'> & {
+    asChild?: boolean;
+    className?: string;
+  };
+
+/**
+ * Internal widening of the public discriminated union: the runtime accepts either value
+ * shape and reads `type` to decide branch behavior. The public API stays narrow.
+ */
+type WidenedSelectRootProps = Omit<ViewProps, 'children'> & {
   asChild?: boolean;
   className?: string;
-}
+  children?: ISelectProps['children'];
+  items: SelectItemData[];
+  type?: SelectType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  native?: boolean;
+  accessibilityLabel?: string;
+  inputValue?: string;
+  defaultInputValue?: string;
+  onInputChange?: (inputValue: string) => void;
+  filter?: SelectFilter;
+};
+
+const EMPTY_VALUES: string[] = [];
 
 export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>(
-  (
-    {
+  (rootProps, ref) => {
+    const {
       asChild,
       children,
       items,
+      type = 'single',
       value: valueProp,
       defaultValue,
       onValueChange,
@@ -37,10 +71,13 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
       isReadOnly,
       native = false,
       accessibilityLabel,
+      inputValue: inputValueProp,
+      defaultInputValue = '',
+      onInputChange,
+      filter = defaultSelectFilter,
       ...props
-    },
-    ref,
-  ) => {
+    } = rootProps as WidenedSelectRootProps;
+
     const formControlProps = useFormControl({
       isDisabled: disabled,
       isRequired,
@@ -53,9 +90,11 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
     const isEffectivelyInvalid = !!formControlProps['aria-invalid'];
     const isEffectivelyReadOnly = !!formControlProps.readOnly;
 
-    const [value, setValue] = useControllableState<string | undefined>({
+    const isMultiple = type === 'multiple';
+
+    const [value, setValue] = useControllableState<string | string[] | undefined>({
       prop: valueProp,
-      defaultProp: defaultValue,
+      defaultProp: defaultValue ?? (isMultiple ? EMPTY_VALUES : undefined),
       onChange: (newValue) => {
         if (newValue !== undefined) {
           onValueChange?.(newValue);
@@ -63,6 +102,18 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
       },
     });
 
+    const selectedValues = useMemo<string[]>(() => {
+      if (isMultiple) {
+        return Array.isArray(value) ? value : EMPTY_VALUES;
+      }
+      return typeof value === 'string' ? [value] : EMPTY_VALUES;
+    }, [isMultiple, value]);
+
+    const isSelected = useCallback(
+      (itemValue: string) => selectedValues.includes(itemValue),
+      [selectedValues],
+    );
+
     const [open, setOpenState] = useControllableState<boolean>({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -81,20 +132,115 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
 
     const [activeValue, setActiveValue] = useState<string | undefined>(undefined);
 
+    const [inputValueState, setInputValueState] = useControllableState<string>({
+      prop: inputValueProp,
+      defaultProp: defaultInputValue,
+      onChange: onInputChange,
+    });
+    const inputValue = inputValueState ?? '';
+    const setInputValue = useCallback(
+      (next: string) => setInputValueState(next),
+      [setInputValueState],
+    );
+
+    const wasOpenRef = useRef(!!open);
+    useEffect(() => {
+      const wasOpen = wasOpenRef.current;
+      wasOpenRef.current = !!open;
+      if (wasOpen && !open) {
+        setInputValueState('');
+      }
+    }, [open, setInputValueState]);
+
+    const visibleItems = useMemo(
+      () => (inputValue === '' ? items : items.filter((item) => filter(item.label, inputValue))),
+      [items, inputValue, filter],
+    );
+
+    const visibleValues = useMemo(
+      () => new Set(visibleItems.map((item) => item.value)),
+      [visibleItems],
+    );
+    const isItemVisible = useCallback(
+      (itemValue: string) => inputValue === '' || visibleValues.has(itemValue),
+      [inputValue, visibleValues],
+    );
+
+    const [searchCount, setSearchCount] = useState(0);
+    const registerSearch = useCallback(() => {
+      setSearchCount((count) => count + 1);
+      return () => setSearchCount((count) => count - 1);
+    }, []);
+
+    const [emptyText, setEmptyText] = useState<string | undefined>(undefined);
+
+    const toggleValue = useCallback(
+      (itemValue: string) => {
+        setValue((prev) => {
+          const current = Array.isArray(prev) ? prev : EMPTY_VALUES;
+          return current.includes(itemValue)
+            ? current.filter((v) => v !== itemValue)
+            : [...current, itemValue];
+        });
+      },
+      [setValue],
+    );
+
+    const selectValueAndClose = useCallback(
+      (itemValue: string) => {
+        setValue(itemValue);
+        setOpen(false);
+      },
+      [setValue, setOpen],
+    );
+
+    const commitValue = isMultiple ? toggleValue : selectValueAndClose;
+
+    /**
+     * `Select.Item disabled` lives on the rendered child, not in `items`, so mounted items
+     * register here for keyboard navigation. A ref keeps registration from re-rendering the root.
+     */
+    const disabledItemsRef = useRef<Set<string>>(new Set());
+
+    const registerDisabledItem = useCallback((itemValue: string) => {
+      disabledItemsRef.current.add(itemValue);
+      return () => {
+        disabledItemsRef.current.delete(itemValue);
+      };
+    }, []);
+
+    const isItemDisabled = useCallback(
+      (itemValue: string) =>
+        isEffectivelyDisabled ||
+        disabledItemsRef.current.has(itemValue) ||
+        items.some((item) => item.value === itemValue && !!item.disabled),
+      [isEffectivelyDisabled, items],
+    );
+
     const triggerRef = useRef<ComponentRef<typeof View> | null>(null);
     const reactId = useId();
     /** Align with `useFormControl` default id (`${field.id}-input`) when inside `Form.Field`. */
     const triggerId = formControlProps.id ?? `select-trigger-${reactId}`;
     const contentId = `select-content-${reactId}`;
+    const listboxId = `${contentId}-listbox`;
     const ariaDescribedBy = formControlProps['aria-describedby'];
+    const labelId = formControlProps['aria-labelledby'];
+    const hasSearch = searchCount > 0;
 
     const contextValue = useMemo(
       () => ({
         open: open ?? false,
         items,
         setOpen,
+        type,
         value,
-        onValueChange: setValue,
+        selectedValues,
+        isSelected,
+        toggleValue,
+        selectValueAndClose,
+        commitValue,
+        isItemDisabled,
+        registerDisabledItem,
         disabled: isEffectivelyDisabled,
         required: isEffectivelyRequired,
         invalid: isEffectivelyInvalid,
@@ -103,6 +249,16 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
         triggerRef,
         contentId,
         triggerId,
+        inputValue,
+        setInputValue,
+        visibleItems,
+        isItemVisible,
+        hasSearch,
+        registerSearch,
+        emptyText,
+        setEmptyText,
+        listboxId,
+        labelId,
         activeValue,
         setActiveValue,
         accessibilityLabel,
@@ -112,8 +268,15 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
         open,
         items,
         setOpen,
+        type,
         value,
-        setValue,
+        selectedValues,
+        isSelected,
+        toggleValue,
+        selectValueAndClose,
+        commitValue,
+        isItemDisabled,
+        registerDisabledItem,
         isEffectivelyDisabled,
         isEffectivelyRequired,
         isEffectivelyInvalid,
@@ -121,6 +284,15 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
         native,
         contentId,
         triggerId,
+        inputValue,
+        setInputValue,
+        visibleItems,
+        isItemVisible,
+        hasSearch,
+        registerSearch,
+        emptyText,
+        listboxId,
+        labelId,
         activeValue,
         accessibilityLabel,
         ariaDescribedBy,

package/src/select/SelectSearch.tsx

@@ -0,0 +1,98 @@
+import { forwardRef, useLayoutEffect, type ReactNode } from 'react';
+import { Platform, TextInput } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useSelectContentContext, useSelectContext } from './context';
+import { SelectSearchStatus } from './SelectSearchStatus';
+import type { ISelectSearchProps } from './types';
+
+export interface SelectSearchProps extends ISelectSearchProps {
+  /** Merge the search wiring onto the single child text input instead of rendering one. */
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const defaultResultCountLabel = (count: number) =>
+  count === 1 ? '1 result' : `${String(count)} results`;
+
+/**
+ * Search input for `Select.Content`. Its query filters the options through the root `filter`.
+ * Mounting it turns the popup into a dialog that contains this searchbox and the listbox.
+ *
+ * Web uses virtual focus: DOM focus stays here, arrow keys move the highlight, and
+ * `aria-activedescendant` points at it. Native renders the input without virtual focus.
+ */
+export const SelectSearch = forwardRef<TextInput, SelectSearchProps>(
+  (
+    {
+      asChild,
+      children,
+      accessibilityLabel,
+      getResultCountLabel = defaultResultCountLabel,
+      onKeyPress,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      inputValue,
+      setInputValue,
+      registerSearch,
+      listboxId,
+      contentId,
+      activeValue,
+      isItemVisible,
+      visibleItems,
+      emptyText,
+    } = useSelectContext();
+    const { handleKeyDown } = useSelectContentContext();
+
+    useLayoutEffect(() => registerSearch(), [registerSearch]);
+
+    const activeDescendant =
+      activeValue !== undefined && isItemVisible(activeValue)
+        ? `${contentId}-option-${activeValue}`
+        : undefined;
+
+    // RNW's TextInput stops keydown propagation, so the listbox keys are handled here.
+    const platformProps =
+      Platform.OS === 'web'
+        ? {
+            'aria-controls': listboxId,
+            'aria-autocomplete': 'list' as const,
+            'aria-activedescendant': activeDescendant,
+            onKeyPress: composeEventHandlers(onKeyPress, handleKeyDown),
+          }
+        : { onKeyPress };
+
+    const count = visibleItems.length;
+    const statusMessage = count === 0 && emptyText ? emptyText : getResultCountLabel(count);
+
+    const Comp = asChild ? Slot : TextInput;
+
+    return (
+      <>
+        <Comp
+          ref={ref}
+          role="searchbox"
+          value={inputValue}
+          onChangeText={setInputValue}
+          autoCapitalize="none"
+          autoComplete="off"
+          autoCorrect={false}
+          spellCheck={false}
+          accessibilityLabel={accessibilityLabel}
+          aria-label={accessibilityLabel}
+          {...platformProps}
+          {...props}
+        >
+          {children}
+        </Comp>
+        <SelectSearchStatus message={statusMessage} />
+      </>
+    );
+  },
+);
+
+SelectSearch.displayName = 'SelectSearch';

package/src/select/SelectSearchStatus.tsx

@@ -0,0 +1,11 @@
+export interface SelectSearchStatusProps {
+  message: string;
+}
+
+/**
+ * Web-only. On native, screen readers move through the rows directly, in the anchored popover
+ * or in `Select.BottomSheet`, instead of following an input-driven live region.
+ */
+export function SelectSearchStatus(_props: SelectSearchStatusProps) {
+  return null;
+}

package/src/select/SelectSearchStatus.web.tsx

@@ -0,0 +1,18 @@
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import type { SelectSearchStatusProps } from './SelectSearchStatus';
+
+export type { SelectSearchStatusProps };
+
+/**
+ * Polite live region for the search results. It stays mounted while the search is, so each
+ * change to the count (or to the empty-state text) is announced.
+ */
+export function SelectSearchStatus({ message }: SelectSearchStatusProps) {
+  return (
+    <VisuallyHidden>
+      <div role="status" aria-live="polite">
+        {message}
+      </div>
+    </VisuallyHidden>
+  );
+}

package/src/select/SelectSheetContent.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { SelectContentProvider, useSelectContext, type SelectContentContextValue } from './context';
+import { getPopupRoleProps } from './popupRole';
+import type { ISelectSheetContentProps } from './types';
+
+export interface SelectSheetContentProps extends ISelectSheetContentProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+/**
+ * Native rows take screen-reader focus directly, so the sheet has no listbox keyboard model
+ * for `Select.Search` to drive.
+ */
+const SHEET_CONTENT_CONTEXT: SelectContentContextValue = { handleKeyDown: () => undefined };
+
+/**
+ * Body of a native sheet surface that presents the options in place of `SelectContent`. The
+ * styled layer owns presentation (open, swipe, backdrop, back) and renders this inside it.
+ * It carries the popup role and name, and closes on the VoiceOver escape gesture without
+ * changing the value.
+ */
+export const SelectSheetContent = forwardRef<ComponentRef<typeof View>, SelectSheetContentProps>(
+  ({ asChild, children, onAccessibilityEscape, ...props }, ref) => {
+    const { setOpen, hasSearch, labelId, accessibilityLabel, triggerId, contentId } =
+      useSelectContext();
+
+    const dismiss = useCallback(() => setOpen(false), [setOpen]);
+    const roleProps = getPopupRoleProps({ hasSearch, labelId, accessibilityLabel, triggerId });
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <SelectContentProvider value={SHEET_CONTENT_CONTEXT}>
+        <Comp
+          ref={ref}
+          id={contentId}
+          {...roleProps}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ state: 'open' }))}
+          onAccessibilityEscape={composeEventHandlers(onAccessibilityEscape, dismiss)}
+        >
+          {children}
+        </Comp>
+      </SelectContentProvider>
+    );
+  },
+);
+
+SelectSheetContent.displayName = 'SelectSheetContent';

package/src/select/context.tsx

@@ -10,3 +10,12 @@ export const [SelectProvider, useSelectContext] =
  */
 export const [SelectItemProvider, useSelectItemContext] =
   createContext<SelectItemInteractionState>('SelectItemContext');
+
+export interface SelectContentContextValue {
+  /** Listbox keyboard handling, wired to the `Select.Search` input on web. */
+  handleKeyDown: (e: any) => void;
+}
+
+/** Internal: lets `Select.Search` drive the listbox from its input. */
+export const [SelectContentProvider, useSelectContentContext] =
+  createContext<SelectContentContextValue>('SelectContentContext');

package/src/select/filter.ts

@@ -0,0 +1,12 @@
+import type { SelectFilter } from './types';
+
+const COMBINING_MARKS = /[̀-ͯ]/g;
+
+function normalize(text: string): string {
+  const decomposed = typeof text.normalize === 'function' ? text.normalize('NFD') : text;
+  return decomposed.replace(COMBINING_MARKS, '').toLocaleLowerCase();
+}
+
+/** Case- and accent-insensitive `contains`: "cafe" matches "Café". */
+export const defaultSelectFilter: SelectFilter = (textValue, inputValue) =>
+  normalize(textValue).includes(normalize(inputValue));