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

package/src/select/SelectItem.tsx

@@ -0,0 +1,139 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef, type ReactNode } from 'react';
+import { Pressable } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { SelectItemProvider, useSelectContext } from './context';
+import type { ISelectItemProps } from './types';
+
+export interface SelectItemProps extends Omit<ISelectItemProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemProps>(
+  (
+    {
+      asChild,
+      children,
+      value: itemValue,
+      disabled: disabledProp = false,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      value: selectedValue,
+      onValueChange,
+      setOpen,
+      activeValue,
+      contentId,
+      disabled: contextDisabled,
+    } = useSelectContext();
+
+    const disabled = contextDisabled || !!disabledProp || !!isDisabledProp;
+    const checked = selectedValue === itemValue;
+    const highlighted = activeValue === itemValue;
+
+    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();
+    const { isHovered, hoverProps } = useHover();
+
+    const handlePress = useCallback(() => {
+      if (!disabled) {
+        onValueChange(itemValue);
+        setOpen(false);
+      }
+    }, [disabled, itemValue, onValueChange, setOpen]);
+
+    const interactionState = useMemo(
+      () => ({
+        hover: !!(isHoveredProp || isHovered),
+        focus: !!(isFocusedProp || isFocused),
+        active: !!(isActiveProp || isActive),
+        disabled: !!disabled,
+        focusVisible: !!(isFocusVisibleProp || isFocusVisible),
+        highlighted,
+        checked,
+      }),
+      [
+        isHoveredProp,
+        isHovered,
+        isFocusedProp,
+        isFocused,
+        isActiveProp,
+        isActive,
+        disabled,
+        isFocusVisibleProp,
+        isFocusVisible,
+        highlighted,
+        checked,
+      ],
+    );
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <SelectItemProvider value={interactionState}>
+        <Comp
+          ref={ref}
+          role="option"
+          id={`${contentId}-option-${itemValue}`}
+          aria-selected={checked}
+          aria-disabled={disabled}
+          disabled={disabled}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover: interactionState.hover,
+              focus: interactionState.focus,
+              active: interactionState.active,
+              disabled: interactionState.disabled,
+              focusVisible: interactionState.focusVisible,
+              highlighted: interactionState.highlighted,
+              state: checked ? 'checked' : 'unchecked',
+            }),
+          )}
+          onPress={composeEventHandlers(props?.onPress, handlePress)}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(
+              props?.onFocus as (...args: unknown[]) => unknown,
+              focusProps.onFocus,
+            ),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(
+              props?.onBlur as (...args: unknown[]) => unknown,
+              focusProps.onBlur,
+            ),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </SelectItemProvider>
+    );
+  },
+);
+
+SelectItem.displayName = 'SelectItem';

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,
+      open: 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,4 +1,4 @@
-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 { InteractionState } from '../types';
@@ -93,34 +93,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>
-  >;
-};