@cdx-ui/primitives 0.0.1-beta.17 → 0.0.1-beta.170

package/src/select/SelectRoot.tsx

@@ -0,0 +1,154 @@
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+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';
+
+export interface SelectRootProps extends ISelectProps, Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>(
+  (
+    {
+      asChild,
+      children,
+      items,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      isOpen: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      isRequired,
+      isInvalid,
+      isReadOnly,
+      native = false,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const formControlProps = useFormControl({
+      isDisabled: disabled,
+      isRequired,
+      isInvalid,
+      isReadOnly,
+    });
+
+    const isEffectivelyDisabled = !!formControlProps.disabled;
+    const isEffectivelyRequired = !!formControlProps.required;
+    const isEffectivelyInvalid = !!formControlProps['aria-invalid'];
+    const isEffectivelyReadOnly = !!formControlProps.readOnly;
+
+    const [value, setValue] = useControllableState<string | undefined>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: (newValue) => {
+        if (newValue !== undefined) {
+          onValueChange?.(newValue);
+        }
+      },
+    });
+
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const setOpen = useCallback(
+      (newOpen: boolean) => {
+        if ((isEffectivelyDisabled || isEffectivelyReadOnly) && newOpen) {
+          return;
+        }
+        setOpenState(newOpen);
+      },
+      [isEffectivelyDisabled, isEffectivelyReadOnly, setOpenState],
+    );
+
+    const [activeValue, setActiveValue] = useState<string | undefined>(undefined);
+
+    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 ariaDescribedBy = formControlProps['aria-describedby'];
+
+    const contextValue = useMemo(
+      () => ({
+        open: open ?? false,
+        items,
+        setOpen,
+        value,
+        onValueChange: setValue,
+        disabled: isEffectivelyDisabled,
+        required: isEffectivelyRequired,
+        invalid: isEffectivelyInvalid,
+        readOnly: isEffectivelyReadOnly,
+        native,
+        triggerRef,
+        contentId,
+        triggerId,
+        activeValue,
+        setActiveValue,
+        accessibilityLabel,
+        ariaDescribedBy,
+      }),
+      [
+        open,
+        items,
+        setOpen,
+        value,
+        setValue,
+        isEffectivelyDisabled,
+        isEffectivelyRequired,
+        isEffectivelyInvalid,
+        isEffectivelyReadOnly,
+        native,
+        contentId,
+        triggerId,
+        activeValue,
+        accessibilityLabel,
+        ariaDescribedBy,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <SelectProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isEffectivelyDisabled,
+              required: isEffectivelyRequired,
+              invalid: isEffectivelyInvalid,
+              readonly: isEffectivelyReadOnly,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </SelectProvider>
+    );
+  },
+);
+
+SelectRoot.displayName = 'SelectRoot';

package/src/select/SelectTrigger.tsx

@@ -0,0 +1,82 @@
+import React, { forwardRef, type ComponentRef, type ReactNode } from 'react';
+import { Pressable } from 'react-native';
+import { Slot } from '../slot';
+import type { InteractionState } from '../types';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import type { ISelectTriggerProps } from './types';
+import { useSelectTrigger } from './useSelectTrigger';
+
+export interface SelectTriggerProps extends Omit<ISelectTriggerProps, 'children'> {
+  asChild?: boolean;
+  children?: ((state: InteractionState) => ReactNode) | ReactNode;
+}
+
+export const SelectTrigger = forwardRef<ComponentRef<typeof Pressable>, SelectTriggerProps>(
+  (
+    {
+      asChild,
+      children,
+      isHovered,
+      isActive,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      'aria-describedby': ariaDescribedBy,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) => {
+    const { ariaProps, dataAttrValues, mergedRef, handlers, interactionState } = useSelectTrigger(
+      ref as React.ForwardedRef<unknown>,
+      {
+        asChild,
+        isHovered,
+        isActive,
+        isFocused,
+        isFocusVisible,
+        isDisabled,
+        ariaDescribedBy,
+        onPress,
+        onPressIn,
+        onPressOut,
+        onHoverIn,
+        onHoverOut,
+        onFocus: onFocus as (...args: unknown[]) => unknown,
+        onBlur: onBlur as (...args: unknown[]) => unknown,
+        onKeyDown: (rest as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown,
+      },
+    );
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={mergedRef}
+        {...ariaProps}
+        {...rest}
+        {...mergeDataAttributes(
+          rest,
+          dataAttributes(dataAttrValues as unknown as Record<string, boolean | string | undefined>),
+        )}
+        onPress={handlers.onPress}
+        onPressIn={handlers.onPressIn}
+        onPressOut={handlers.onPressOut}
+        onHoverIn={handlers.onHoverIn}
+        onHoverOut={handlers.onHoverOut}
+        onFocus={handlers.onFocus}
+        onBlur={handlers.onBlur}
+      >
+        {typeof children === 'function' ? children(interactionState) : children}
+      </Comp>
+    );
+  },
+);
+
+SelectTrigger.displayName = 'SelectTrigger';

package/src/select/SelectTrigger.web.tsx

@@ -0,0 +1,238 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { type PressableProps, StyleSheet } from 'react-native';
+import { Slot } from '../slot';
+import type { InteractionState } from '../types';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { domDataAttributes } from '../utils/domDataAttributes';
+import type { ISelectTriggerProps } from './types';
+import { useSelectTrigger } from './useSelectTrigger';
+
+export interface SelectTriggerProps extends Omit<ISelectTriggerProps, 'children'> {
+  asChild?: boolean;
+  children?: ((state: InteractionState) => ReactNode) | ReactNode;
+}
+
+/** Props that must not be forwarded to a DOM `<button>`. */
+const OMIT = new Set<string>([
+  'hitSlop',
+  'pressRetentionOffset',
+  'android_ripple',
+  'android_disableSound',
+  'unstable_pressDelay',
+  'onLongPress',
+  'delayLongPress',
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onHoverIn',
+  'onHoverOut',
+  'onKeyDown',
+  'onFocus',
+  'onBlur',
+  'disabled',
+  'style',
+  'className',
+  'testID',
+  'children',
+  'accessible',
+  'accessibilityActions',
+  'accessibilityElementsHidden',
+  'accessibilityHint',
+  'accessibilityIgnoresInvertColors',
+  'accessibilityLabel',
+  'accessibilityLabelledBy',
+  'accessibilityLiveRegion',
+  'accessibilityRole',
+  'accessibilityState',
+  'accessibilityValue',
+  'accessibilityViewIsModal',
+  'importantForAccessibility',
+  'needsOffscreenAlphaCompositing',
+  'collapsable',
+  'shouldRasterizeIOS',
+  'removeClippedSubviews',
+  'onAccessibilityAction',
+  'onAccessibilityEscape',
+  'onAccessibilityTap',
+  'dataSet',
+]);
+
+function filterDomProps(rest: object): React.ButtonHTMLAttributes<HTMLButtonElement> {
+  const entries = Object.entries(rest).filter(([key]) => !OMIT.has(key));
+  return Object.fromEntries(entries) as React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
+const webButtonLayoutStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  minWidth: 0,
+  textAlign: 'start',
+  boxSizing: 'border-box',
+  margin: 0,
+  font: 'inherit',
+  lineHeight: 'normal',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+};
+
+/**
+ * Native `<button type="button">` so the trigger is HTML-labelable (`<label htmlFor>` focuses it).
+ * `Pressable` on web is a non-labelable div; the native `<button>` makes label-association work.
+ */
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  (
+    {
+      asChild,
+      children,
+      isHovered,
+      isActive,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      'aria-describedby': ariaDescribedBy,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) => {
+    const consumerOnKeyDown = (rest as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown;
+
+    const { ariaProps, dataAttrValues, mergedRef, handlers, interactionState } = useSelectTrigger(
+      ref as React.ForwardedRef<unknown>,
+      {
+        asChild,
+        isHovered,
+        isActive,
+        isFocused,
+        isFocusVisible,
+        isDisabled,
+        ariaDescribedBy,
+        onPress,
+        onPressIn,
+        onPressOut,
+        onHoverIn,
+        onHoverOut,
+        onFocus: onFocus as (...args: unknown[]) => unknown,
+        onBlur: onBlur as (...args: unknown[]) => unknown,
+        onKeyDown: consumerOnKeyDown,
+      },
+    );
+
+    /**
+     * `asChild` path: forward Pressable-style props through `Slot` so consumers can substitute
+     * another Forge primitive (IconButton, Chip, Button) — all of which forward Pressable-shaped
+     * handlers to an underlying RNW `Pressable`. We pass data attributes in the RN/RNW `dataSet`
+     * form (not the flat DOM `data-*` form used by the `<button>` host below) because the
+     * substituted component is RN/RNW-shaped — RNW translates `dataSet` to DOM `data-*` keys.
+     *
+     * The label-focus bridge mount is owned by the hook: on web with `asChild=true` the
+     * substituted element renders `<div role="button">` instead of `<button>`, which breaks
+     * native `<label htmlFor>` association — the hook registers the bridge on `field.inputRef`
+     * so `Form.Label` still focuses the trigger.
+     *
+     * NOTE — `data-slot` overlap: the substituted component carries its own `data-slot`
+     * (e.g. `button`, `icon-button`, `chip`) which will end up on the merged element. The
+     * `select-trigger` `data-slot` arriving via `props` may be overridden depending on merge
+     * order. Styled-layer selectors that need guaranteed `select-trigger` access should
+     * attach a wrapper around the trigger rather than relying on `data-slot`.
+     */
+    if (asChild) {
+      return (
+        <Slot
+          ref={mergedRef as React.Ref<unknown>}
+          {...ariaProps}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes(
+              dataAttrValues as unknown as Record<string, boolean | string | undefined>,
+            ),
+          )}
+          onPress={handlers.onPress}
+          onPressIn={handlers.onPressIn}
+          onPressOut={handlers.onPressOut}
+          onHoverIn={handlers.onHoverIn}
+          onHoverOut={handlers.onHoverOut}
+          onFocus={handlers.onFocus}
+          onBlur={handlers.onBlur}
+          onKeyDown={handlers.onKeyDown}
+        >
+          {typeof children === 'function' ? children(interactionState) : children}
+        </Slot>
+      );
+    }
+
+    const dataAttrs = domDataAttributes(
+      dataAttrValues as unknown as Record<string, boolean | string | undefined>,
+    );
+
+    /**
+     * Native `<button>` host so the trigger is HTML-labelable. We map Pressable-style handlers
+     * to DOM events at the boundary, filter out RN-only props, and apply the layout shim that
+     * neutralizes UA `<button>` defaults that fight our flex + `justify-between` layout.
+     */
+    const { style, className, testID, ...buttonRest } = rest as PressableProps & {
+      className?: string;
+      testID?: string;
+    };
+
+    const domProps = filterDomProps(buttonRest);
+    const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
+
+    return (
+      <button
+        ref={mergedRef as React.Ref<HTMLButtonElement>}
+        {...domProps}
+        {...dataAttrs}
+        type="button"
+        {...ariaProps}
+        className={typeof className === 'string' ? className : undefined}
+        style={{ ...webButtonLayoutStyle, ...(flattened ?? {}) }}
+        data-testid={testID}
+        onClick={(e) => {
+          if (!ariaProps.disabled) {
+            handlers.onPress(e as unknown as Parameters<NonNullable<PressableProps['onPress']>>[0]);
+          }
+        }}
+        onPointerDown={(e) => {
+          handlers.onPressIn(
+            e as unknown as Parameters<NonNullable<PressableProps['onPressIn']>>[0],
+          );
+        }}
+        onPointerUp={(e) => {
+          handlers.onPressOut(
+            e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0],
+          );
+        }}
+        onPointerCancel={(e) => {
+          handlers.onPressOut(
+            e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0],
+          );
+        }}
+        onFocus={(e) => {
+          handlers.onFocus(e);
+        }}
+        onBlur={(e) => {
+          handlers.onBlur(e);
+        }}
+        onKeyDown={(e) => {
+          handlers.onKeyDown(e as unknown as KeyboardEvent);
+        }}
+      >
+        {typeof children === 'function' ? children(interactionState) : children}
+      </button>
+    );
+  },
+);
+
+SelectTrigger.displayName = 'SelectTrigger';

package/src/select/context.tsx

@@ -1,21 +1,12 @@
 import { createContext } from '@cdx-ui/utils';
-import type { InteractionState } from '../types';
 import type { SelectContextValue, SelectItemInteractionState } from './types';
 
 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 [SelectTriggerProvider, useSelectTriggerContext] =
-  createContext<InteractionState>('SelectTriggerContext');
-
 /**
  * Propagates the item's interaction and selection state (hover, focus, active,
- * highlighted, checked, etc.) to child components like SelectItemLabel.
+ * highlighted, checked, etc.) to child slots like `Select.ItemLabel`.
  */
 export const [SelectItemProvider, useSelectItemContext] =
   createContext<SelectItemInteractionState>('SelectItemContext');

package/src/select/index.ts

@@ -0,0 +1,17 @@
+export type {
+  ISelectContentProps,
+  ISelectItemLabelProps,
+  ISelectItemProps,
+  ISelectProps,
+  ISelectTriggerProps,
+  ISelectValueProps,
+  SelectContextValue,
+  SelectItemData,
+  SelectItemInteractionState,
+} from './types';
+
+export { useSelectContext, useSelectItemContext } from './context';
+export { SelectRoot, type SelectRootProps } from './SelectRoot';
+export { SelectTrigger, type SelectTriggerProps } from './SelectTrigger';
+export { SelectContent, type SelectContentProps } from './SelectContent';
+export { SelectItem, type SelectItemProps } from './SelectItem';

package/src/select/types.ts

@@ -1,6 +1,7 @@
-import type { PropsWithoutRef, ReactNode, RefAttributes, RefObject } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 import type { EntryOrExitLayoutType } from 'react-native-reanimated';
+import type { OverlayPlacement } from '../overlay';
 import type { InteractionState } from '../types';
 
 export interface SelectItemInteractionState extends InteractionState {
@@ -9,17 +10,23 @@ export interface SelectItemInteractionState extends InteractionState {
 }
 
 export interface ISelectProps {
+  /**
+   * Options used to resolve `Select.Value` labels and drive keyboard navigation.
+   * Render matching `Select.Item` elements inside `Select.Content`.
+   */
   items: SelectItemData[];
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
-  open?: boolean;
+  /** Controlled open state. Use `defaultOpen` for the uncontrolled variant. */
+  isOpen?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   disabled?: boolean;
   isRequired?: boolean;
   isInvalid?: boolean;
   isReadOnly?: boolean;
+  /** Prevents `Select.Content` from rendering. Reserved for native picker integration. */
   native?: boolean;
   accessibilityLabel?: string;
   children?: ReactNode;
@@ -41,7 +48,15 @@ export interface ISelectValueProps {
 }
 
 export interface ISelectContentProps extends ViewProps {
+  /** Preferred dropdown placement relative to the trigger. Defaults to `bottom-start`. */
+  placement?: OverlayPlacement;
+  /** Distance between the trigger and dropdown in pixels. Defaults to 4. */
+  offset?: number;
+  /** Cross-axis adjustment from the aligned dropdown position in pixels. Defaults to 0. */
+  crossOffset?: number;
+  /** Enter animation for the dropdown. Defaults to a 150ms fade. */
   enteringAnimation?: EntryOrExitLayoutType;
+  /** Exit animation for the dropdown. Defaults to a 100ms fade. */
   exitingAnimation?: EntryOrExitLayoutType;
   children?: ReactNode;
 }
@@ -93,34 +108,3 @@ export interface SelectContextValue {
   /** From `Form.Field` via `useFormControl` on the select root (helper/error `aria-describedby`). */
   ariaDescribedBy?: string;
 }
-
-export type ISelectComponentType<
-  RootProps,
-  TriggerProps,
-  ValueProps,
-  IconProps,
-  ContentProps,
-  ItemProps,
-  ItemLabelProps,
-  TriggerRef = unknown,
-  ValueRef = unknown,
-> = React.ForwardRefExoticComponent<
-  PropsWithoutRef<RootProps & ISelectProps> & RefAttributes<unknown>
-> & {
-  Trigger: React.ForwardRefExoticComponent<
-    PropsWithoutRef<TriggerProps & ISelectTriggerProps> & RefAttributes<TriggerRef>
-  >;
-  Value: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ValueProps & ISelectValueProps> & RefAttributes<ValueRef>
-  >;
-  Icon: React.ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<unknown>>;
-  Content: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ContentProps & ISelectContentProps> & RefAttributes<unknown>
-  >;
-  Item: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ItemProps & ISelectItemProps> & RefAttributes<unknown>
-  >;
-  ItemLabel: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ItemLabelProps & ISelectItemLabelProps> & RefAttributes<unknown>
-  >;
-};

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/useListboxNavigation.ts

@@ -28,6 +28,18 @@ export function useListboxNavigation({
 
   const handleKeyDown = useCallback(
     (e: any) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation?.();
+        onDismissRef.current();
+        return;
+      }
+
+      if (e.key === 'Tab') {
+        onDismissRef.current();
+        return;
+      }
+
       const enabledItems = getEnabledItems();
       if (enabledItems.length === 0) {
         return;
@@ -67,15 +79,6 @@ export function useListboxNavigation({
           }
           break;
         }
-        case 'Escape': {
-          e.preventDefault();
-          onDismissRef.current();
-          break;
-        }
-        case 'Tab': {
-          onDismissRef.current();
-          break;
-        }
       }
     },
     [activeValue, getEnabledItems, setActiveValue],