@cdx-ui/primitives 0.3.2 → 0.3.4

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));

package/src/select/index.ts

@@ -1,17 +1,30 @@
 export type {
   ISelectContentProps,
+  ISelectEmptyProps,
   ISelectItemLabelProps,
   ISelectItemProps,
+  ISelectListboxProps,
+  ISelectMultipleProps,
   ISelectProps,
+  ISelectSearchProps,
+  ISelectSheetContentProps,
+  ISelectSingleProps,
   ISelectTriggerProps,
   ISelectValueProps,
   SelectContextValue,
+  SelectFilter,
   SelectItemData,
   SelectItemInteractionState,
+  SelectType,
+  SelectValueRenderProps,
 } from './types';
 
-export { useSelectContext, useSelectItemContext } from './context';
+export { SelectProvider, useSelectContext, useSelectItemContext } from './context';
 export { SelectRoot, type SelectRootProps } from './SelectRoot';
 export { SelectTrigger, type SelectTriggerProps } from './SelectTrigger';
 export { SelectContent, type SelectContentProps } from './SelectContent';
+export { SelectSheetContent, type SelectSheetContentProps } from './SelectSheetContent';
+export { SelectSearch, type SelectSearchProps } from './SelectSearch';
+export { SelectListbox, type SelectListboxProps } from './SelectListbox';
+export { SelectEmpty, type SelectEmptyProps } from './SelectEmpty';
 export { SelectItem, type SelectItemProps } from './SelectItem';

package/src/select/popupRole.ts

@@ -0,0 +1,26 @@
+import type { SelectContextValue } from './types';
+
+type PopupRoleSource = Pick<
+  SelectContextValue,
+  'hasSearch' | 'labelId' | 'accessibilityLabel' | 'triggerId'
+>;
+
+/**
+ * Role and name of the popup surface. With `Select.Search` the popup is a dialog holding a
+ * searchbox and a listbox (a listbox may only own options), named by the field label, then
+ * `accessibilityLabel`. Without it the popup is the listbox.
+ */
+export function getPopupRoleProps({
+  hasSearch,
+  labelId,
+  accessibilityLabel,
+  triggerId,
+}: PopupRoleSource) {
+  return hasSearch
+    ? {
+        role: 'dialog' as const,
+        'aria-labelledby': labelId ?? (accessibilityLabel ? undefined : triggerId),
+        'aria-label': labelId ? undefined : accessibilityLabel,
+      }
+    : { role: 'listbox' as const, 'aria-labelledby': triggerId };
+}