@cdx-ui/primitives 0.0.1-alpha.1

package/src/select/createSelectRoot.tsx

@@ -0,0 +1,130 @@
+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 type { ISelectProps } from './types';
+
+export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        children,
+        items,
+        value: valueProp,
+        defaultValue,
+        onValueChange,
+        open: openProp,
+        defaultOpen = false,
+        onOpenChange,
+        disabled = false,
+        isRequired,
+        isInvalid,
+        isReadOnly,
+        native = false,
+        accessibilityLabel,
+        ...props
+      }: ISelectProps,
+      ref?: any,
+    ) => {
+      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<any>(null);
+      const id = useId();
+      const triggerId = `select-trigger-${id}`;
+      const contentId = `select-content-${id}`;
+
+      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,
+        }),
+        [
+          open,
+          items,
+          setOpen,
+          value,
+          setValue,
+          isEffectivelyDisabled,
+          isEffectivelyRequired,
+          isEffectivelyInvalid,
+          isEffectivelyReadOnly,
+          native,
+          contentId,
+          triggerId,
+          activeValue,
+          accessibilityLabel,
+        ],
+      );
+
+      return (
+        <SelectContext.Provider value={contextValue}>
+          <BaseRoot
+            ref={ref}
+            {...(props as T)}
+            {...dataAttributes({
+              slot: 'select',
+              disabled: isEffectivelyDisabled,
+              required: isEffectivelyRequired,
+              invalid: isEffectivelyInvalid,
+              readonly: isEffectivelyReadOnly,
+            })}
+          >
+            {children}
+          </BaseRoot>
+        </SelectContext.Provider>
+      );
+    },
+  );

package/src/select/createSelectTrigger.tsx

@@ -0,0 +1,192 @@
+import type React from 'react';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { type GestureResponderEvent, Platform } from 'react-native';
+import { composeEventHandlers, mergeRefs } 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 { SelectTriggerContext, useSelectContext } from './context';
+import type { ISelectTriggerProps } from './types';
+
+export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        children,
+        isHovered: isHoveredProp,
+        isActive: isActiveProp,
+        isFocused: isFocusedProp,
+        isFocusVisible: isFocusVisibleProp,
+        isDisabled: isDisabledProp,
+        ...props
+      }: Omit<ISelectTriggerProps, 'children'> & {
+        children?:
+          | (({
+              hovered,
+              pressed,
+              focused,
+              focusVisible,
+              disabled,
+            }: {
+              hovered?: boolean;
+              pressed?: boolean;
+              focused?: boolean;
+              focusVisible?: boolean;
+              disabled?: boolean;
+            }) => React.ReactNode)
+          | React.ReactNode;
+      },
+      ref?: any,
+    ) => {
+      const {
+        open,
+        setOpen,
+        disabled: contextDisabled,
+        required: contextRequired,
+        invalid: contextInvalid,
+        readOnly: contextReadOnly,
+        triggerId,
+        contentId,
+        triggerRef,
+        activeValue,
+        accessibilityLabel,
+      } = useSelectContext();
+
+      const disabled = contextDisabled || !!isDisabledProp;
+
+      const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();
+      const { pressProps, isPressed: isActive } = usePress({
+        isDisabled: disabled,
+      });
+      const { isFocused, focusProps }: any = useFocus();
+      const { isHovered, hoverProps } = useHover();
+
+      const handlePress = useCallback(
+        (e: GestureResponderEvent | KeyboardEvent) => {
+          if (e.type === 'keyup' && (e as KeyboardEvent).key === 'Enter') {
+            return;
+          }
+          if (!disabled) {
+            setOpen(!open);
+          }
+        },
+        [disabled, open, setOpen],
+      );
+
+      const handleKeyDown = useCallback(
+        (e: KeyboardEvent) => {
+          if (disabled) {
+            return;
+          }
+
+          switch (e.key) {
+            case 'Enter': // TODO: Only stays open if the key is held down
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp': {
+              e.preventDefault();
+              setOpen(true);
+              break;
+            }
+          }
+        },
+        [disabled, setOpen],
+      );
+
+      const interactionState = useMemo(
+        () => ({
+          hover: isHoveredProp || isHovered,
+          focus: isFocusedProp || isFocused,
+          active: isActiveProp || isActive,
+          disabled: !!disabled,
+          focusVisible: isFocusVisibleProp || isFocusVisible,
+        }),
+        [
+          isHoveredProp,
+          isHovered,
+          isFocusedProp,
+          isFocused,
+          isActiveProp,
+          isActive,
+          disabled,
+          isFocusVisibleProp,
+          isFocusVisible,
+        ],
+      );
+
+      const mergedRef = mergeRefs(ref, triggerRef);
+
+      const webKeyboardProps =
+        Platform.OS === 'web'
+          ? { onKeyDown: composeEventHandlers((props as any).onKeyDown, handleKeyDown) }
+          : {};
+
+      return (
+        <SelectTriggerContext.Provider value={interactionState}>
+          <BaseTrigger
+            ref={mergedRef}
+            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}
+            id={triggerId}
+            {...dataAttributes({
+              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',
+              slot: 'select-trigger',
+            })}
+            disabled={disabled}
+            {...(props as T)}
+            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,
+            )}
+            {...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}
+          </BaseTrigger>
+        </SelectTriggerContext.Provider>
+      );
+    },
+  );

package/src/select/createSelectValue.tsx

@@ -0,0 +1,38 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useSelectContext, useSelectTriggerContext } from './context';
+import type { ISelectValueProps } from './types';
+
+// TODO: Support custom display text
+
+export const createSelectValue = <T,>(BaseValue: React.ComponentType<T>) =>
+  forwardRef(({ placeholder, ...props }: ISelectValueProps, ref?: any) => {
+    const { value, items, required, invalid, readOnly } = useSelectContext();
+    const { hover, focus, active, disabled, focusVisible } = useSelectTriggerContext();
+
+    const hasValue = value !== undefined && value !== '';
+    const showPlaceholder = !hasValue;
+    const displayText = hasValue ? items.find((item) => item.value === value)?.label : placeholder;
+
+    return (
+      <BaseValue
+        ref={ref}
+        {...(props as T)}
+        {...dataAttributes({
+          hover,
+          focus,
+          active,
+          disabled,
+          focusVisible,
+          required,
+          invalid,
+          readonly: readOnly,
+          placeholder: showPlaceholder,
+          slot: 'select-value',
+        })}
+      >
+        {displayText}
+      </BaseValue>
+    );
+  });

package/src/select/index.tsx

@@ -0,0 +1,73 @@
+import type React from 'react';
+import { createSelectContent } from './createSelectContent';
+import { createSelectIcon } from './createSelectIcon';
+import { createSelectItem } from './createSelectItem';
+import { createSelectItemLabel } from './createSelectItemLabel';
+import { createSelectRoot } from './createSelectRoot';
+import { createSelectTrigger } from './createSelectTrigger';
+import { createSelectValue } from './createSelectValue';
+import type { ISelectComponentType } from './types';
+
+export type {
+  ISelectContentProps,
+  ISelectItemLabelProps,
+  ISelectItemProps,
+  ISelectProps,
+  ISelectTriggerProps,
+  ISelectValueProps,
+} from './types';
+
+export function createSelect<
+  RootProps,
+  TriggerProps,
+  ValueProps,
+  IconProps,
+  ContentProps,
+  ItemProps,
+  ItemLabelProps,
+  TriggerRef = unknown,
+  ValueRef = unknown,
+>(BaseComponents: {
+  Root: React.ComponentType<RootProps>;
+  Trigger: React.ComponentType<TriggerProps>;
+  Value: React.ComponentType<ValueProps>;
+  Icon: React.ComponentType<IconProps>;
+  Content: React.ComponentType<ContentProps>;
+  Item: React.ComponentType<ItemProps>;
+  ItemLabel: React.ComponentType<ItemLabelProps>;
+}) {
+  const Select = createSelectRoot(BaseComponents.Root);
+  const Trigger = createSelectTrigger(BaseComponents.Trigger);
+  const Value = createSelectValue(BaseComponents.Value);
+  const Icon = createSelectIcon(BaseComponents.Icon);
+  const Content = createSelectContent(BaseComponents.Content);
+  const Item = createSelectItem(BaseComponents.Item);
+  const ItemLabel = createSelectItemLabel(BaseComponents.ItemLabel);
+
+  Select.displayName = 'SelectPrimitive';
+  Trigger.displayName = 'SelectPrimitive.Trigger';
+  Value.displayName = 'SelectPrimitive.Value';
+  Icon.displayName = 'SelectPrimitive.Icon';
+  Content.displayName = 'SelectPrimitive.Content';
+  Item.displayName = 'SelectPrimitive.Item';
+  ItemLabel.displayName = 'SelectPrimitive.ItemLabel';
+
+  return Object.assign(Select, {
+    Trigger,
+    Value,
+    Icon,
+    Content,
+    Item,
+    ItemLabel,
+  }) as ISelectComponentType<
+    RootProps,
+    TriggerProps,
+    ValueProps,
+    IconProps,
+    ContentProps,
+    ItemProps,
+    ItemLabelProps,
+    TriggerRef,
+    ValueRef
+  >;
+}

package/src/select/types.ts

@@ -0,0 +1,131 @@
+import type { PropsWithoutRef, ReactNode, RefAttributes, RefObject } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import type { EntryOrExitLayoutType } from 'react-native-reanimated';
+
+// TODO: Consolidate with button/types.ts
+
+export interface InteractionState {
+  hover: boolean;
+  focus: boolean;
+  active: boolean;
+  disabled: boolean;
+  focusVisible: boolean;
+}
+
+export interface SelectItemInteractionState extends InteractionState {
+  highlighted: boolean;
+  checked: boolean;
+}
+
+export interface ISelectProps {
+  items: SelectItemData[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  native?: boolean;
+  accessibilityLabel?: string;
+  children?: ReactNode;
+}
+
+export interface ISelectTriggerProps extends PressableProps {
+  isHovered?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  isDisabled?: boolean;
+}
+
+export interface ISelectValueProps {
+  placeholder?: string;
+  children?: ReactNode;
+}
+
+export interface ISelectContentProps extends ViewProps {
+  enteringAnimation?: EntryOrExitLayoutType;
+  exitingAnimation?: EntryOrExitLayoutType;
+  children?: ReactNode;
+}
+
+export interface ISelectItemProps extends PressableProps {
+  value: string;
+  disabled?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  isDisabled?: boolean;
+}
+
+export interface ISelectItemLabelProps {
+  children?: ReactNode;
+}
+
+export interface SelectItemData {
+  value: string;
+  label: string;
+  disabled?: boolean; // TODO: This isn't working
+}
+
+export interface SelectItemCollectionContextValue {
+  registerItem: (item: SelectItemData) => void;
+  unregisterItem: (value: string) => void;
+  getItems: () => SelectItemData[];
+}
+
+export interface SelectContextValue {
+  open: boolean;
+  items: SelectItemData[];
+  setOpen: (open: boolean) => void;
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  disabled: boolean;
+  required: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  native: boolean;
+  triggerRef: RefObject<any>;
+  contentId: string;
+  triggerId: string;
+  /** Currently highlighted value during keyboard navigation */
+  activeValue: string | undefined;
+  setActiveValue: (value: string | undefined) => void;
+  accessibilityLabel: string | undefined;
+}
+
+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

@@ -0,0 +1,54 @@
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+import type { SelectItemData } from './types';
+
+// TODO: Split into web and native versions?
+
+export interface UseContentFocusOptions {
+  open: boolean;
+  triggerRef: RefObject<any>;
+  items: SelectItemData[];
+  value: string | undefined;
+  setActiveValue: (value: string | undefined) => void;
+}
+
+/**
+ * Manages focus lifecycle for overlay content:
+ * - 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
+ * to avoid timing issues with deferred portal rendering.
+ */
+export function useContentFocus({
+  open,
+  triggerRef,
+  items,
+  value,
+  setActiveValue,
+}: UseContentFocusOptions) {
+  const prevOpenRef = useRef(open);
+
+  const getEnabledItems = useCallback(() => items.filter((item) => !item.disabled), [items]);
+
+  useEffect(() => {
+    if (prevOpenRef.current && !open && Platform.OS === 'web') {
+      triggerRef.current?.focus?.();
+    }
+    prevOpenRef.current = open;
+  }, [open, triggerRef]);
+
+  useEffect(() => {
+    if (open) {
+      const enabled = getEnabledItems();
+      if (value && enabled.some((i) => i.value === value)) {
+        setActiveValue(value);
+      } else if (enabled.length > 0) {
+        setActiveValue(enabled[0].value);
+      }
+    } else {
+      setActiveValue(undefined);
+    }
+  }, [open, getEnabledItems, setActiveValue, value]);
+}

package/src/select/useListboxNavigation.ts

@@ -0,0 +1,85 @@
+import { useCallback, useRef } from 'react';
+import type { SelectItemData } from './types';
+
+// TODO: Split into web and native versions?
+
+export interface UseListboxNavigationOptions {
+  items: SelectItemData[];
+  activeValue: string | undefined;
+  setActiveValue: (value: string | undefined) => void;
+  onSelect: (value: string) => void;
+  onDismiss: () => void;
+}
+
+export function useListboxNavigation({
+  items,
+  activeValue,
+  setActiveValue,
+  onSelect,
+  onDismiss,
+}: UseListboxNavigationOptions) {
+  const onSelectRef = useRef(onSelect);
+  onSelectRef.current = onSelect;
+
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+
+  const getEnabledItems = useCallback(() => items.filter((item) => !item.disabled), [items]);
+
+  const handleKeyDown = useCallback(
+    (e: any) => {
+      const enabledItems = getEnabledItems();
+      if (enabledItems.length === 0) {
+        return;
+      }
+
+      const idx = enabledItems.findIndex((i) => i.value === activeValue);
+
+      switch (e.key) {
+        case 'ArrowDown': {
+          e.preventDefault();
+          setActiveValue(enabledItems[idx < enabledItems.length - 1 ? idx + 1 : 0].value);
+          break;
+        }
+        case 'ArrowUp': {
+          e.preventDefault();
+          setActiveValue(enabledItems[idx > 0 ? idx - 1 : enabledItems.length - 1].value);
+          break;
+        }
+        case 'Home': {
+          e.preventDefault();
+          setActiveValue(enabledItems[0].value);
+          break;
+        }
+        case 'End': {
+          e.preventDefault();
+          const last = enabledItems.at(-1);
+          if (last) {
+            setActiveValue(last.value);
+          }
+          break;
+        }
+        case 'Enter':
+        case ' ': {
+          e.preventDefault();
+          if (activeValue) {
+            onSelectRef.current(activeValue);
+          }
+          break;
+        }
+        case 'Escape': {
+          e.preventDefault();
+          onDismissRef.current();
+          break;
+        }
+        case 'Tab': {
+          onDismissRef.current();
+          break;
+        }
+      }
+    },
+    [activeValue, getEnabledItems, setActiveValue],
+  );
+
+  return { handleKeyDown, getEnabledItems };
+}