@cdx-ui/primitives 0.0.1-beta.9 → 0.0.1-beta.90

package/src/select/useContentFocus.ts

@@ -18,7 +18,7 @@ export interface UseContentFocusOptions {
  * - Restores focus to the trigger when the overlay closes (web)
  * - Initializes `activeValue` to the current value or first enabled item
  *
- * Initial focus on open is handled via a ref callback in createSelectContent
+ * Initial focus on open is handled via a ref callback in SelectContent
  * to avoid timing issues with deferred portal rendering.
  */
 export function useContentFocus({

package/src/select/useSelectTrigger.ts

@@ -0,0 +1,345 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardedRef,
+  type RefCallback,
+} from 'react';
+import { type GestureResponderEvent, type PressableProps } from 'react-native';
+import {
+  composeEventHandlers,
+  mergeRefs,
+  useFormControlContext,
+  useReportFormControlLabelFocus,
+  type Focusable,
+} from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { useSelectContext } from './context';
+
+export interface UseSelectTriggerOptions {
+  asChild?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  isDisabled?: boolean;
+  ariaDescribedBy?: string;
+  onPress?: PressableProps['onPress'];
+  onPressIn?: PressableProps['onPressIn'];
+  onPressOut?: PressableProps['onPressOut'];
+  onHoverIn?: PressableProps['onHoverIn'];
+  onHoverOut?: PressableProps['onHoverOut'];
+  onFocus?: (...args: unknown[]) => unknown;
+  onBlur?: (...args: unknown[]) => unknown;
+  onKeyDown?: (e: KeyboardEvent) => void;
+}
+
+export interface SelectTriggerAriaProps {
+  role: 'combobox';
+  'aria-label'?: string;
+  'aria-haspopup': 'listbox';
+  'aria-expanded': boolean;
+  'aria-controls': string;
+  'aria-activedescendant'?: string;
+  'aria-required'?: boolean;
+  'aria-invalid'?: boolean;
+  'aria-readonly'?: boolean;
+  'aria-describedby'?: string;
+  id: string;
+  disabled: boolean;
+}
+
+export interface SelectTriggerDataAttrValues {
+  hover?: boolean;
+  focus: boolean;
+  active: boolean;
+  disabled: boolean;
+  focusVisible?: boolean;
+  required: boolean;
+  invalid: boolean;
+  readonly: boolean;
+  state: 'open' | 'closed';
+}
+
+export interface SelectTriggerHandlers {
+  onPress: (e: GestureResponderEvent) => void;
+  onPressIn: NonNullable<PressableProps['onPressIn']>;
+  onPressOut: NonNullable<PressableProps['onPressOut']>;
+  onHoverIn: NonNullable<PressableProps['onHoverIn']>;
+  onHoverOut: NonNullable<PressableProps['onHoverOut']>;
+  onFocus: (...args: unknown[]) => unknown;
+  onBlur: (...args: unknown[]) => unknown;
+  onKeyDown: (e: KeyboardEvent) => void;
+}
+
+export interface UseSelectTriggerReturn {
+  ariaProps: SelectTriggerAriaProps;
+  dataAttrValues: SelectTriggerDataAttrValues;
+  interactionState: InteractionState;
+  mergedRef: RefCallback<unknown>;
+  handlers: SelectTriggerHandlers;
+  isLabelActive: boolean;
+  open: boolean;
+  labelFocusBridge: Focusable;
+}
+
+/**
+ * Shared logic for `Select.Trigger` across native and web. Each platform file is
+ * a thin host-element wrapper that spreads this hook's output. The hook composes
+ * interaction-state hooks, ARIA props, keyboard intent, press-to-toggle, the
+ * merged ref, and (where appropriate) the label-focus bridge.
+ *
+ * Native variant — Pressable is not natively labelable, so the label-focus
+ * bridge is always registered on `field.inputRef`.
+ */
+export function useSelectTrigger(
+  forwardedRef: ForwardedRef<unknown>,
+  options: UseSelectTriggerOptions,
+): UseSelectTriggerReturn {
+  /**
+   * `asChild` is part of the symmetric options shape for parity with the web variant,
+   * but the native hook always mounts the label-focus bridge (Pressable is never
+   * natively labelable) and Slot/Pressable share the same Pressable-shaped surface,
+   * so the option is intentionally unused here.
+   */
+  const {
+    isHovered: isHoveredProp,
+    isActive: isActiveProp,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp,
+    isDisabled: isDisabledProp,
+    ariaDescribedBy: ariaDescribedByProp,
+    onPress: consumerOnPress,
+    onPressIn: consumerOnPressIn,
+    onPressOut: consumerOnPressOut,
+    onHoverIn: consumerOnHoverIn,
+    onHoverOut: consumerOnHoverOut,
+    onFocus: consumerOnFocus,
+    onBlur: consumerOnBlur,
+    onKeyDown: consumerOnKeyDown,
+  } = options;
+
+  const {
+    open,
+    setOpen,
+    disabled: contextDisabled,
+    required: contextRequired,
+    invalid: contextInvalid,
+    readOnly: contextReadOnly,
+    triggerId,
+    contentId,
+    triggerRef,
+    activeValue,
+    accessibilityLabel,
+    ariaDescribedBy: ariaDescribedByFromField,
+  } = useSelectContext();
+
+  const field = useFormControlContext();
+
+  const disabled = contextDisabled || !!isDisabledProp;
+
+  const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+    isFocusVisible: boolean;
+    focusProps: {
+      onFocus?: (...args: unknown[]) => unknown;
+      onBlur?: (...args: unknown[]) => unknown;
+    };
+  };
+  const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+  const { isFocused, focusProps } = useFocus() as {
+    isFocused: boolean;
+    focusProps: {
+      onFocus?: (...args: unknown[]) => unknown;
+      onBlur?: (...args: unknown[]) => unknown;
+    };
+  };
+  const { isHovered, hoverProps } = useHover();
+  const [triggerFocused, setTriggerFocused] = useState(false);
+
+  const handlePress = useCallback(
+    (_e: GestureResponderEvent) => {
+      if (!disabled) {
+        setOpen(!open);
+      }
+    },
+    [disabled, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+        case 'ArrowUp': {
+          e.preventDefault();
+          setOpen(true);
+          break;
+        }
+      }
+    },
+    [disabled, setOpen],
+  );
+
+  /** `useFocus()` on Pressable can stay true on native after blur; use explicit focus/blur handlers. */
+  const isLabelActive = Boolean((open || triggerFocused) && !disabled);
+
+  useReportFormControlLabelFocus(isLabelActive);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setTriggerFocused(false);
+    }
+  }, [open]);
+
+  const interactionState = useMemo<InteractionState>(
+    () => ({
+      hover: !!(isHoveredProp || isHovered),
+      focus: !!(isFocusedProp || isFocused || open),
+      active: !!(isActiveProp || isActive),
+      disabled: !!disabled,
+      focusVisible: !!(isFocusVisibleProp || isFocusVisible),
+    }),
+    [
+      isHoveredProp,
+      isHovered,
+      isFocusedProp,
+      isFocused,
+      isActiveProp,
+      isActive,
+      disabled,
+      isFocusVisibleProp,
+      isFocusVisible,
+      open,
+    ],
+  );
+
+  /**
+   * Native: `Pressable` has no usable programmatic `.focus()` (unlike `TextInput`).
+   * `Form.Label` calls `focusInput()` → we register a bridge on `field.inputRef` that tries
+   * native focus, then opens the list (expected "tap label" behavior for a select).
+   */
+  const labelFocusGateRef = useRef({ disabled: false, readOnly: false });
+  labelFocusGateRef.current = {
+    disabled: !!disabled,
+    readOnly: !!contextReadOnly,
+  };
+
+  const labelFocusBridge = useMemo<Focusable>(
+    () => ({
+      focus() {
+        const { disabled: isOff, readOnly: isRO } = labelFocusGateRef.current;
+        if (isOff || isRO) {
+          return;
+        }
+        const node = triggerRef.current as { focus?: () => void } | null;
+        if (node != null && typeof node.focus === 'function') {
+          node.focus();
+        }
+        setOpen(true);
+      },
+    }),
+    [setOpen, triggerRef],
+  );
+
+  useLayoutEffect(() => {
+    if (!field.inputRef) {
+      return;
+    }
+    const r = field.inputRef;
+    r.current = labelFocusBridge;
+    return () => {
+      if (r.current === labelFocusBridge) {
+        r.current = null;
+      }
+    };
+  }, [field.inputRef, labelFocusBridge]);
+
+  const mergedRef = mergeRefs(forwardedRef, triggerRef) as RefCallback<unknown>;
+
+  const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp].filter(Boolean).join(' ');
+
+  const ariaProps: SelectTriggerAriaProps = {
+    role: 'combobox',
+    'aria-label': accessibilityLabel,
+    'aria-haspopup': 'listbox',
+    'aria-expanded': open,
+    'aria-controls': contentId,
+    'aria-activedescendant': open && activeValue ? `${contentId}-option-${activeValue}` : undefined,
+    'aria-required': contextRequired || undefined,
+    'aria-invalid': contextInvalid || undefined,
+    'aria-readonly': contextReadOnly || undefined,
+    'aria-describedby': ariaDescribedBy || undefined,
+    id: triggerId,
+    disabled,
+  };
+
+  const dataAttrValues: SelectTriggerDataAttrValues = {
+    hover: interactionState.hover,
+    focus: interactionState.focus,
+    active: interactionState.active,
+    disabled: interactionState.disabled,
+    focusVisible: interactionState.focusVisible,
+    required: !!contextRequired,
+    invalid: !!contextInvalid,
+    readonly: !!contextReadOnly,
+    state: open ? 'open' : 'closed',
+  };
+
+  const handlers: SelectTriggerHandlers = {
+    onPress: composeEventHandlers(consumerOnPress, handlePress) as SelectTriggerHandlers['onPress'],
+    onPressIn: composeEventHandlers(
+      consumerOnPressIn,
+      pressProps.onPressIn,
+    ) as SelectTriggerHandlers['onPressIn'],
+    onPressOut: composeEventHandlers(
+      consumerOnPressOut,
+      pressProps.onPressOut,
+    ) as SelectTriggerHandlers['onPressOut'],
+    onHoverIn: composeEventHandlers(
+      consumerOnHoverIn,
+      hoverProps.onHoverIn,
+    ) as SelectTriggerHandlers['onHoverIn'],
+    onHoverOut: composeEventHandlers(
+      consumerOnHoverOut,
+      hoverProps.onHoverOut,
+    ) as SelectTriggerHandlers['onHoverOut'],
+    onFocus: composeEventHandlers(
+      composeEventHandlers(
+        composeEventHandlers(consumerOnFocus, focusProps.onFocus),
+        focusRingProps.onFocus,
+      ),
+      () => setTriggerFocused(true),
+    ),
+    onBlur: composeEventHandlers(
+      composeEventHandlers(
+        composeEventHandlers(consumerOnBlur, focusProps.onBlur),
+        focusRingProps.onBlur,
+      ),
+      () => setTriggerFocused(false),
+    ),
+    onKeyDown: composeEventHandlers(
+      consumerOnKeyDown,
+      handleKeyDown,
+    ) as SelectTriggerHandlers['onKeyDown'],
+  };
+
+  return {
+    ariaProps,
+    dataAttrValues,
+    interactionState,
+    mergedRef,
+    handlers,
+    isLabelActive,
+    open,
+    labelFocusBridge,
+  };
+}

package/src/select/useSelectTrigger.web.ts

@@ -0,0 +1,267 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardedRef,
+  type RefCallback,
+} from 'react';
+import { type GestureResponderEvent } from 'react-native';
+import {
+  composeEventHandlers,
+  mergeRefs,
+  useFormControlContext,
+  useReportFormControlLabelFocus,
+  type Focusable,
+} from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { useSelectContext } from './context';
+import type {
+  SelectTriggerAriaProps,
+  SelectTriggerDataAttrValues,
+  SelectTriggerHandlers,
+  UseSelectTriggerOptions,
+  UseSelectTriggerReturn,
+} from './useSelectTrigger';
+
+/**
+ * Web variant — drops `useHover` and `useFocusRing` per the trigger-prune todo:
+ * neither emitted attribute has a consumer in `selectTriggerVariants`, and the
+ * web `useHover` re-renders on every pointer enter/leave. Hover is expressed via
+ * CSS `:hover` chains in CVA, not a JS tracker.
+ *
+ * The label-focus bridge is only registered when the host loses native
+ * label association — i.e. when `asChild` substitutes the rendered `<button>`
+ * with a non-labelable element. Otherwise `<label htmlFor>` handles the focus
+ * relationship natively.
+ */
+export function useSelectTrigger(
+  forwardedRef: ForwardedRef<unknown>,
+  options: UseSelectTriggerOptions,
+): UseSelectTriggerReturn {
+  const {
+    asChild,
+    isHovered: isHoveredProp,
+    isActive: isActiveProp,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp,
+    isDisabled: isDisabledProp,
+    ariaDescribedBy: ariaDescribedByProp,
+    onPress: consumerOnPress,
+    onPressIn: consumerOnPressIn,
+    onPressOut: consumerOnPressOut,
+    onHoverIn: consumerOnHoverIn,
+    onHoverOut: consumerOnHoverOut,
+    onFocus: consumerOnFocus,
+    onBlur: consumerOnBlur,
+    onKeyDown: consumerOnKeyDown,
+  } = options;
+
+  const {
+    open,
+    setOpen,
+    disabled: contextDisabled,
+    required: contextRequired,
+    invalid: contextInvalid,
+    readOnly: contextReadOnly,
+    triggerId,
+    contentId,
+    triggerRef,
+    activeValue,
+    accessibilityLabel,
+    ariaDescribedBy: ariaDescribedByFromField,
+  } = useSelectContext();
+
+  const field = useFormControlContext();
+
+  const disabled = contextDisabled || !!isDisabledProp;
+
+  const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+  const { isFocused, focusProps } = useFocus() as {
+    isFocused: boolean;
+    focusProps: {
+      onFocus?: (...args: unknown[]) => unknown;
+      onBlur?: (...args: unknown[]) => unknown;
+    };
+  };
+  const [triggerFocused, setTriggerFocused] = useState(false);
+
+  const handlePress = useCallback(
+    (_e: GestureResponderEvent) => {
+      if (!disabled) {
+        setOpen(!open);
+      }
+    },
+    [disabled, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+        case 'ArrowUp': {
+          e.preventDefault();
+          setOpen(true);
+          break;
+        }
+      }
+    },
+    [disabled, setOpen],
+  );
+
+  const isLabelActive = Boolean(
+    (isFocusedProp || isFocused || triggerFocused || open) && !disabled,
+  );
+
+  useReportFormControlLabelFocus(isLabelActive);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setTriggerFocused(false);
+    }
+  }, [open]);
+
+  const interactionState = useMemo<InteractionState>(
+    () => ({
+      hover: !!isHoveredProp,
+      focus: !!(isFocusedProp || isFocused || open),
+      active: !!(isActiveProp || isActive),
+      disabled: !!disabled,
+      focusVisible: !!isFocusVisibleProp,
+    }),
+    [
+      isHoveredProp,
+      isFocusedProp,
+      isFocused,
+      isActiveProp,
+      isActive,
+      disabled,
+      isFocusVisibleProp,
+      open,
+    ],
+  );
+
+  /**
+   * `<button>` is HTML-labelable so `<label htmlFor>` works natively — no JS bridge needed.
+   * When `asChild` substitutes the host with a non-labelable element (e.g. `<div role="button">`),
+   * the bridge fills the gap so `Form.Label` can still focus the trigger via `field.inputRef`.
+   */
+  const labelFocusGateRef = useRef({ disabled: false, readOnly: false });
+  labelFocusGateRef.current = {
+    disabled: !!disabled,
+    readOnly: !!contextReadOnly,
+  };
+
+  const labelFocusBridge = useMemo<Focusable>(
+    () => ({
+      focus() {
+        const { disabled: isOff, readOnly: isRO } = labelFocusGateRef.current;
+        if (isOff || isRO) {
+          return;
+        }
+        const node = triggerRef.current as { focus?: () => void } | null;
+        if (node != null && typeof node.focus === 'function') {
+          node.focus();
+        }
+        setOpen(true);
+      },
+    }),
+    [setOpen, triggerRef],
+  );
+
+  const shouldMountLabelFocusBridge = !!asChild;
+
+  useLayoutEffect(() => {
+    if (!shouldMountLabelFocusBridge || !field.inputRef) {
+      return;
+    }
+    const r = field.inputRef;
+    r.current = labelFocusBridge;
+    return () => {
+      if (r.current === labelFocusBridge) {
+        r.current = null;
+      }
+    };
+  }, [shouldMountLabelFocusBridge, field.inputRef, labelFocusBridge]);
+
+  const mergedRef = mergeRefs(forwardedRef, triggerRef) as RefCallback<unknown>;
+
+  const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp].filter(Boolean).join(' ');
+
+  const ariaProps: SelectTriggerAriaProps = {
+    role: 'combobox',
+    'aria-label': accessibilityLabel,
+    'aria-haspopup': 'listbox',
+    'aria-expanded': open,
+    'aria-controls': contentId,
+    'aria-activedescendant': open && activeValue ? `${contentId}-option-${activeValue}` : undefined,
+    'aria-required': contextRequired || undefined,
+    'aria-invalid': contextInvalid || undefined,
+    'aria-readonly': contextReadOnly || undefined,
+    'aria-describedby': ariaDescribedBy || undefined,
+    id: triggerId,
+    disabled,
+  };
+
+  const dataAttrValues: SelectTriggerDataAttrValues = {
+    focus: interactionState.focus,
+    active: interactionState.active,
+    disabled: interactionState.disabled,
+    required: !!contextRequired,
+    invalid: !!contextInvalid,
+    readonly: !!contextReadOnly,
+    state: open ? 'open' : 'closed',
+  };
+
+  const handlers: SelectTriggerHandlers = {
+    onPress: composeEventHandlers(consumerOnPress, handlePress) as SelectTriggerHandlers['onPress'],
+    onPressIn: composeEventHandlers(
+      consumerOnPressIn,
+      pressProps.onPressIn,
+    ) as SelectTriggerHandlers['onPressIn'],
+    onPressOut: composeEventHandlers(
+      consumerOnPressOut,
+      pressProps.onPressOut,
+    ) as SelectTriggerHandlers['onPressOut'],
+    onHoverIn: consumerOnHoverIn ?? (() => undefined),
+    onHoverOut: consumerOnHoverOut ?? (() => undefined),
+    onFocus: composeEventHandlers(composeEventHandlers(consumerOnFocus, focusProps.onFocus), () =>
+      setTriggerFocused(true),
+    ),
+    onBlur: composeEventHandlers(composeEventHandlers(consumerOnBlur, focusProps.onBlur), () =>
+      setTriggerFocused(false),
+    ),
+    onKeyDown: composeEventHandlers(
+      consumerOnKeyDown,
+      handleKeyDown,
+    ) as SelectTriggerHandlers['onKeyDown'],
+  };
+
+  return {
+    ariaProps,
+    dataAttrValues,
+    interactionState,
+    mergedRef,
+    handlers,
+    isLabelActive,
+    open,
+    labelFocusBridge,
+  };
+}
+
+export type {
+  SelectTriggerAriaProps,
+  SelectTriggerDataAttrValues,
+  SelectTriggerHandlers,
+  UseSelectTriggerOptions,
+  UseSelectTriggerReturn,
+};