@cdx-ui/primitives 0.0.1-alpha.29 → 0.0.1-alpha.30

package/src/input/createInputField.tsx

@@ -6,7 +6,7 @@ import {
   Platform,
   type TextInputKeyPressEvent,
 } from 'react-native';
-import { mergeRefs, useFormControl } from '@cdx-ui/utils';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
 import { useInputContext } from './context';
 import type { IInputProps } from './types';
@@ -47,12 +47,17 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
         id: props.id,
       });
 
+      const field = useFormControlContext();
+
       const handleFocus = (focusState: boolean, callback: any) => {
         setIsFocused(focusState);
         callback();
       };
 
-      const mergedRef = mergeRefs(ref, inputFieldRef);
+      const mergedRef =
+        Platform.OS === 'web'
+          ? mergeRefs(ref, inputFieldRef)
+          : mergeRefs(ref, inputFieldRef, field.inputRef);
 
       const isEffectivelyDisabled = isDisabled || inputProps.disabled;
 
@@ -67,6 +72,7 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
 
       return (
         <BaseInputField
+          {...inputProps}
           {...(props as T)}
           type={type}
           {...dataAttributes({

package/src/select/createSelectRoot.tsx

@@ -68,9 +68,11 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
       const [activeValue, setActiveValue] = useState<string | undefined>(undefined);
 
       const triggerRef = useRef<any>(null);
-      const id = useId();
-      const triggerId = `select-trigger-${id}`;
-      const contentId = `select-content-${id}`;
+      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 ariaDescribedBy = formControlProps['aria-describedby'];
 
       const contextValue = useMemo(
         () => ({
@@ -90,6 +92,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           activeValue,
           setActiveValue,
           accessibilityLabel,
+          ariaDescribedBy,
         }),
         [
           open,
@@ -106,6 +109,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           triggerId,
           activeValue,
           accessibilityLabel,
+          ariaDescribedBy,
         ],
       );
 

package/src/select/createSelectTrigger.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { type GestureResponderEvent, Platform } from 'react-native';
-import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { composeEventHandlers, mergeRefs, useFormControlContext } 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';
@@ -19,6 +19,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         isFocused: isFocusedProp,
         isFocusVisible: isFocusVisibleProp,
         isDisabled: isDisabledProp,
+        'aria-describedby': ariaDescribedByProp,
         ...props
       }: Omit<ISelectTriggerProps, 'children'> & {
         children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
@@ -37,8 +38,11 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         triggerRef,
         activeValue,
         accessibilityLabel,
+        ariaDescribedBy: ariaDescribedByFromField,
       } = useSelectContext();
 
+      const field = useFormControlContext();
+
       const disabled = contextDisabled || !!isDisabledProp;
 
       const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();
@@ -101,7 +105,53 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         ],
       );
 
-      const mergedRef = mergeRefs(ref, triggerRef);
+      /**
+       * 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(
+        () => ({
+          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],
+      );
+
+      useLayoutEffect(() => {
+        if (Platform.OS === 'web' || !field.inputRef) {
+          return;
+        }
+        const r = field.inputRef;
+        r.current = labelFocusBridge as unknown as typeof r.current;
+        return () => {
+          if (r.current === labelFocusBridge) {
+            r.current = null;
+          }
+        };
+      }, [field.inputRef, labelFocusBridge]);
+
+      const mergedRef =
+        Platform.OS === 'web' ? mergeRefs(ref, triggerRef) : mergeRefs(ref, triggerRef);
+
+      const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp]
+        .filter(Boolean)
+        .join(' ');
 
       const webKeyboardProps =
         Platform.OS === 'web'
@@ -123,7 +173,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             aria-required={contextRequired || undefined}
             aria-invalid={contextInvalid || undefined}
             aria-readonly={contextReadOnly || undefined}
-            id={triggerId}
+            aria-describedby={ariaDescribedBy || undefined}
             {...dataAttributes({
               hover: interactionState.hover,
               focus: interactionState.focus,
@@ -138,6 +188,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             })}
             disabled={disabled}
             {...(props as T)}
+            id={triggerId}
             onPress={composeEventHandlers(props?.onPress, handlePress)}
             onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
             onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}

package/src/select/types.ts

@@ -31,6 +31,8 @@ export interface ISelectTriggerProps extends PressableProps {
   isFocused?: boolean;
   isFocusVisible?: boolean;
   isDisabled?: boolean;
+  /** @platform web — merged with form field helper/error ids */
+  'aria-describedby'?: string;
 }
 
 export interface ISelectValueProps {
@@ -88,6 +90,8 @@ export interface SelectContextValue {
   activeValue: string | undefined;
   setActiveValue: (value: string | undefined) => void;
   accessibilityLabel: string | undefined;
+  /** From `Form.Field` via `useFormControl` on the select root (helper/error `aria-describedby`). */
+  ariaDescribedBy?: string;
 }
 
 export type ISelectComponentType<