@cdx-ui/primitives 0.0.1-alpha.9 → 0.0.1-beta.10

package/src/progress/types.ts

@@ -0,0 +1,37 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type ProgressDataState = 'complete' | 'indeterminate' | 'loading';
+
+export interface InterfaceProgressProps extends Omit<ViewProps, 'children'> {
+  /**
+   * Current value in the range [0, max], or `null` for indeterminate progress.
+   * Omit or use a number for determinate progress; default is `0`.
+   */
+  readonly value?: number | null;
+  /**
+   * Maximum value (minimum is always 0).
+   * @default 100
+   */
+  readonly max?: number;
+  /**
+   * Optional label for `accessibilityValue.text` when determinate.
+   */
+  readonly getValueLabel?: (value: number, max: number) => string;
+  readonly children?: ReactNode;
+}
+
+export type IProgressComponentType<
+  RootProps,
+  IndicatorProps,
+  RootRef = unknown,
+  IndicatorRef = unknown,
+> = ForwardRefExoticComponent<
+  PropsWithoutRef<RootProps & InterfaceProgressProps> & RefAttributes<RootRef>
+> & {
+  Indicator: ForwardRefExoticComponent<
+    PropsWithoutRef<IndicatorProps> & RefAttributes<IndicatorRef>
+  >;
+};
+
+export type IProgressProps = InterfaceProgressProps;

package/src/select/context.tsx

@@ -1,56 +1,21 @@
-import { createContext, useContext } from 'react';
-import type { InteractionState, SelectContextValue, SelectItemInteractionState } from './types';
+import { createContext } from '@cdx-ui/utils';
+import type { InteractionState } from '../types';
+import type { SelectContextValue, SelectItemInteractionState } from './types';
 
-const defaultContextValue: SelectContextValue = {
-  open: false,
-  items: [],
-  setOpen: () => {},
-  value: undefined,
-  onValueChange: () => {},
-  disabled: false,
-  required: false,
-  invalid: false,
-  readOnly: false,
-  native: false,
-  triggerRef: { current: null },
-  contentId: '',
-  triggerId: '',
-  activeValue: undefined,
-  setActiveValue: () => {}, // TODO: Is this needed? At the very least it could be moved to SelectContent
-  accessibilityLabel: undefined,
-};
-
-export const SelectContext = createContext<SelectContextValue>(defaultContextValue);
-
-export const useSelectContext = () => useContext(SelectContext);
+export const [SelectProvider, useSelectContext] =
+  createContext<SelectContextValue>('SelectContext');
 
 /**
  * Propagates the trigger's interaction state (hover, focus, active, etc.) to
  * child components like SelectValue and SelectIcon so they can apply matching
  * data-attribute styles.
  */
-export const SelectTriggerContext = createContext<InteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-});
-
-export const useSelectTriggerContext = () => useContext(SelectTriggerContext);
+export const [SelectTriggerProvider, useSelectTriggerContext] =
+  createContext<InteractionState>('SelectTriggerContext');
 
 /**
  * Propagates the item's interaction and selection state (hover, focus, active,
  * highlighted, checked, etc.) to child components like SelectItemLabel.
  */
-export const SelectItemContext = createContext<SelectItemInteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-  highlighted: false,
-  checked: false,
-});
-
-export const useSelectItemContext = () => useContext(SelectItemContext);
+export const [SelectItemProvider, useSelectItemContext] =
+  createContext<SelectItemInteractionState>('SelectItemContext');

package/src/select/createSelectItem.tsx

@@ -4,7 +4,7 @@ import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectItemContext, useSelectContext } from './context';
+import { SelectItemProvider, useSelectContext } from './context';
 import type { ISelectItemProps } from './types';
 
 export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
@@ -74,7 +74,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
       );
 
       return (
-        <SelectItemContext.Provider value={interactionState}>
+        <SelectItemProvider value={interactionState}>
           <BaseItem
             ref={ref}
             role="option"
@@ -115,7 +115,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
           >
             {children}
           </BaseItem>
-        </SelectItemContext.Provider>
+        </SelectItemProvider>
       );
     },
   );

package/src/select/createSelectRoot.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useControllableState, useFormControl } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectContext } from './context';
+import { SelectProvider } from './context';
 import type { ISelectProps } from './types';
 
 export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
@@ -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,11 +109,12 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           triggerId,
           activeValue,
           accessibilityLabel,
+          ariaDescribedBy,
         ],
       );
 
       return (
-        <SelectContext.Provider value={contextValue}>
+        <SelectProvider value={contextValue}>
           <BaseRoot
             ref={ref}
             {...(props as T)}
@@ -124,7 +128,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           >
             {children}
           </BaseRoot>
-        </SelectContext.Provider>
+        </SelectProvider>
       );
     },
   );

package/src/select/createSelectTrigger.tsx

@@ -1,11 +1,12 @@
 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';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectTriggerContext, useSelectContext } from './context';
+import { SelectTriggerProvider, useSelectContext } from './context';
 import type { ISelectTriggerProps } from './types';
 
 export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
@@ -18,23 +19,10 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         isFocused: isFocusedProp,
         isFocusVisible: isFocusVisibleProp,
         isDisabled: isDisabledProp,
+        'aria-describedby': ariaDescribedByProp,
         ...props
       }: Omit<ISelectTriggerProps, 'children'> & {
-        children?:
-          | (({
-              hovered,
-              pressed,
-              focused,
-              focusVisible,
-              disabled,
-            }: {
-              hovered?: boolean;
-              pressed?: boolean;
-              focused?: boolean;
-              focusVisible?: boolean;
-              disabled?: boolean;
-            }) => React.ReactNode)
-          | React.ReactNode;
+        children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
       },
       ref?: any,
     ) => {
@@ -50,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();
@@ -63,7 +54,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
 
       const handlePress = useCallback(
         (e: GestureResponderEvent | KeyboardEvent) => {
-          if (e.type === 'keyup' && (e as KeyboardEvent).key === 'Enter') {
+          if (e?.type === 'keyup' && (e as KeyboardEvent).key === 'Enter') {
             return;
           }
           if (!disabled) {
@@ -114,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'
@@ -122,7 +159,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
           : {};
 
       return (
-        <SelectTriggerContext.Provider value={interactionState}>
+        <SelectTriggerProvider value={interactionState}>
           <BaseTrigger
             ref={mergedRef}
             role="combobox"
@@ -136,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,
@@ -151,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)}
@@ -172,21 +210,9 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             )}
             {...webKeyboardProps}
           >
-            {/* TODO: Align render-function children convention with Button — Button
-                passes raw hook values (isHovered, isFocused, etc.) while this
-                passes merged interaction state (isHoveredProp || isHovered). Pick
-                one convention and apply to both. */}
-            {typeof children === 'function'
-              ? children({
-                  hovered: interactionState.hover,
-                  focused: interactionState.focus,
-                  pressed: interactionState.active,
-                  disabled: interactionState.disabled,
-                  focusVisible: interactionState.focusVisible,
-                })
-              : children}
+            {typeof children === 'function' ? children(interactionState) : children}
           </BaseTrigger>
-        </SelectTriggerContext.Provider>
+        </SelectTriggerProvider>
       );
     },
   );

package/src/select/types.ts

@@ -2,7 +2,6 @@ import type { PropsWithoutRef, ReactNode, RefAttributes, RefObject } from 'react
 import type { PressableProps, ViewProps } from 'react-native';
 import type { EntryOrExitLayoutType } from 'react-native-reanimated';
 import type { InteractionState } from '../types';
-export type { InteractionState };
 
 export interface SelectItemInteractionState extends InteractionState {
   highlighted: boolean;
@@ -32,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 {
@@ -89,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<

package/src/utils/createPortal.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import { Platform } from 'react-native';
+
+type CreatePortalFn = (children: React.ReactNode, container: Element) => React.ReactPortal;
+
+/**
+ * A reference to `ReactDOM.createPortal` on web, `undefined` on native.
+ *
+ * Loaded lazily via `require` so that native bundles never reference
+ * `react-dom`, which would cause a build error on native platforms.
+ */
+export const createPortalFn: CreatePortalFn | undefined = (() => {
+  if (Platform.OS !== 'web') return undefined;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return (require('react-dom') as { createPortal: CreatePortalFn }).createPortal;
+  } catch {
+    return undefined;
+  }
+})();

package/src/utils/dataAttributes.web.ts

@@ -17,10 +17,8 @@ export function dataAttributes(attrs: Record<string, DataAttributeValue>): {
   const dataSet: Record<string, boolean | string> = {};
   for (const key in attrs) {
     const value = attrs[key];
-    if (value === undefined) {
-      continue;
-    }
-    dataSet[key] = value;
+
+    dataSet[key] = value ?? false;
   }
   return { dataSet };
 }

package/lib/commonjs/input/createInputIcon.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createInputIcon = void 0;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-const createInputIcon = BaseInputIcon => /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseInputIcon, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-exports.createInputIcon = createInputIcon;
-//# sourceMappingURL=createInputIcon.js.map

package/lib/commonjs/input/createInputIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_jsxRuntime","createInputIcon","BaseInputIcon","forwardRef","children","props","ref","jsx","exports"],"sourceRoot":"../../../src","sources":["input/createInputIcon.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAAmC,IAAAC,WAAA,GAAAD,OAAA;AAG5B,MAAME,eAAe,GAAQC,aAAqC,iBACvE,IAAAC,iBAAU,EAA2B,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACpE,oBACE,IAAAN,WAAA,CAAAO,GAAA,EAACL,aAAa;IAACI,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAChCA;EAAQ,CACI,CAAC;AAEpB,CAAC,CAAC;AAACI,OAAA,CAAAP,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/module/input/createInputIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","jsx","_jsx","createInputIcon","BaseInputIcon","children","props","ref"],"sourceRoot":"../../../src","sources":["input/createInputIcon.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnC,OAAO,MAAMC,eAAe,GAAQC,aAAqC,iBACvEJ,UAAU,CAA2B,CAAC;EAAEK,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACpE,oBACEL,IAAA,CAACE,aAAa;IAACG,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAChCA;EAAQ,CACI,CAAC;AAEpB,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/input/createInputIcon.d.ts

@@ -1,4 +0,0 @@
-import type React from 'react';
-import type { IInputIconProps } from './types';
-export declare const createInputIcon: <T>(BaseInputIcon: React.ComponentType<T>) => React.ForwardRefExoticComponent<IInputIconProps & React.RefAttributes<unknown>>;
-//# sourceMappingURL=createInputIcon.d.ts.map

package/lib/typescript/input/createInputIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createInputIcon.d.ts","sourceRoot":"","sources":["../../../src/input/createInputIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,eAAe,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,oFAOrE,CAAC"}

package/src/input/createInputIcon.tsx

@@ -1,12 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import type { IInputIconProps } from './types';
-
-export const createInputIcon = <T,>(BaseInputIcon: React.ComponentType<T>) =>
-  forwardRef<unknown, IInputIconProps>(({ children, ...props }, ref) => {
-    return (
-      <BaseInputIcon ref={ref} {...(props as T)}>
-        {children}
-      </BaseInputIcon>
-    );
-  });