@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.67

package/src/select/createSelectTrigger.tsx

@@ -1,241 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { type GestureResponderEvent, Platform } from 'react-native';
-import {
-  composeEventHandlers,
-  mergeRefs,
-  useFormControlContext,
-  useReportFormControlLabelFocus,
-} 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 { SelectTriggerProvider, 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,
-        'aria-describedby': ariaDescribedByProp,
-        ...props
-      }: Omit<ISelectTriggerProps, 'children'> & {
-        children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
-      },
-      ref?: any,
-    ) => {
-      const {
-        open,
-        setOpen,
-        disabled: contextDisabled,
-        required: contextRequired,
-        invalid: contextInvalid,
-        readOnly: contextReadOnly,
-        triggerId,
-        contentId,
-        triggerRef,
-        activeValue,
-        accessibilityLabel,
-        ariaDescribedBy: ariaDescribedByFromField,
-      } = useSelectContext();
-
-      const field = useFormControlContext();
-
-      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 [triggerFocused, setTriggerFocused] = useState(false);
-
-      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],
-      );
-
-      // `useFocus()` on Pressable can stay true on native after blur; use explicit focus/blur handlers.
-      const isLabelActive = Platform.select({
-        web: Boolean((isFocusedProp || isFocused || open) && !disabled),
-        default: Boolean((open || triggerFocused) && !disabled),
-      });
-
-      useReportFormControlLabelFocus(isLabelActive);
-
-      useLayoutEffect(() => {
-        if (!open) {
-          setTriggerFocused(false);
-        }
-      }, [open]);
-
-      const interactionState = useMemo(
-        () => ({
-          hover: isHoveredProp || isHovered,
-          focus: isFocusedProp || isFocused || open,
-          active: isActiveProp || isActive,
-          disabled: !!disabled,
-          focusVisible: isFocusVisibleProp || isFocusVisible,
-        }),
-        [
-          isHoveredProp,
-          isHovered,
-          isFocusedProp,
-          isFocused,
-          isActiveProp,
-          isActive,
-          disabled,
-          isFocusVisibleProp,
-          isFocusVisible,
-          open,
-        ],
-      );
-
-      /**
-       * 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'
-          ? { onKeyDown: composeEventHandlers((props as any).onKeyDown, handleKeyDown) }
-          : {};
-
-      return (
-        <SelectTriggerProvider 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}
-            aria-describedby={ariaDescribedBy || undefined}
-            {...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)}
-            id={triggerId}
-            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,
-              () => setTriggerFocused(true),
-            )}
-            onBlur={composeEventHandlers(
-              composeEventHandlers(
-                props?.onBlur as (...args: unknown[]) => unknown,
-                focusProps.onBlur,
-              ),
-              focusRingProps.onBlur,
-              () => setTriggerFocused(false),
-            )}
-            {...webKeyboardProps}
-          >
-            {typeof children === 'function' ? children(interactionState) : children}
-          </BaseTrigger>
-        </SelectTriggerProvider>
-      );
-    },
-  );

package/src/select/createSelectValue.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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/switch/createSwitchRoot.tsx

@@ -1,72 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useFocusRing } from '@react-native-aria/focus';
-import { useHover } from '@react-native-aria/interactions';
-import { useToggleState } from '@react-stately/toggle';
-import { useFormControlContext, mergeRefs } from '@cdx-ui/utils';
-import type { ISwitchProps } from './types';
-
-type MergeableRef = Parameters<typeof mergeRefs>[0];
-
-export const createSwitchRoot = <T, R = unknown>(BaseSwitch: React.ComponentType<T>) =>
-  forwardRef<R, ISwitchProps>(
-    (
-      {
-        disabled,
-        isDisabled,
-        isChecked,
-        isInvalid,
-        defaultValue,
-        value,
-        onValueChange,
-        ...props
-      }: ISwitchProps,
-      ref: React.ForwardedRef<R>,
-    ) => {
-      const formControlContext = useFormControlContext();
-      const combinedProps = { ...formControlContext, ...props };
-      const controlledValue = value ?? isChecked;
-      const state = useToggleState({
-        defaultSelected: defaultValue ?? false,
-        isSelected: controlledValue,
-        onChange: onValueChange,
-      });
-
-      const checked = controlledValue ?? state.isSelected;
-
-      const _ref = React.useRef(null);
-      const { isHovered } = useHover({}, _ref);
-      const { isFocusVisible, focusProps } = useFocusRing();
-
-      const mergedRef = mergeRefs(ref as MergeableRef, _ref);
-
-      const isDisabledResolved = disabled || isDisabled || combinedProps.isDisabled;
-      const isInvalidResolved = isInvalid || combinedProps.isInvalid;
-
-      return (
-        <BaseSwitch
-          states={{
-            hover: isHovered,
-            disabled: isDisabledResolved,
-            invalid: isInvalidResolved,
-            checked,
-            focusVisible: isFocusVisible,
-          }}
-          dataSet={{
-            hover: isHovered ? 'true' : 'false',
-            disabled: isDisabledResolved ? 'true' : 'false',
-            invalid: isInvalidResolved ? 'true' : 'false',
-            checked: checked ? 'true' : 'false',
-            'focus-visible': isFocusVisible ? 'true' : 'false',
-          }}
-          disabled={isDisabledResolved}
-          {...focusProps}
-          onValueChange={(val: boolean) => {
-            state.setSelected(val);
-          }}
-          value={checked}
-          {...(combinedProps as T)}
-          ref={mergedRef as React.Ref<R>}
-        />
-      );
-    },
-  );

package/src/tile/createTileContent.tsx

@@ -1,23 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { ITileContentProps } from './types';
-
-const contentStyle = {
-  flex: 1,
-  flexDirection: 'column' as const,
-  minWidth: 0,
-};
-
-export const createTileContent = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(({ children, style, ...props }: ITileContentProps, ref: React.Ref<unknown>) => (
-    <Base
-      {...(props as T)}
-      {...dataAttributes({
-        slot: 'tile-content',
-      })}
-      ref={ref as React.Ref<T>}
-      style={[contentStyle, style]}
-    >
-      {children}
-    </Base>
-  ));

package/src/tile/createTileDescription.tsx

@@ -1,19 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { ITileDescriptionProps } from './types';
-
-const noUnderline = { textDecorationLine: 'none' as const };
-
-export const createTileDescription = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(({ children, style, ...props }: ITileDescriptionProps, ref: React.Ref<unknown>) => (
-    <Base
-      {...(props as T)}
-      {...dataAttributes({
-        slot: 'tile-description',
-      })}
-      ref={ref as React.Ref<T>}
-      style={[noUnderline, style]}
-    >
-      {children}
-    </Base>
-  ));

package/src/tile/createTileGroup.tsx

@@ -1,134 +0,0 @@
-import React, { forwardRef, useCallback, useMemo, type Ref } from 'react';
-import type { ViewProps } from 'react-native';
-import { useControllableState } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import { TileGroupContextProvider } from './context';
-import type { ITileGroupProps, TileGroupType } from './types';
-
-/**
- * Internal widening of the public discriminated union: the runtime accepts any value
- * shape and reads `type` to decide branch behavior. The public API stays narrow.
- */
-type WidenedTileGroupProps = ViewProps & {
-  type: TileGroupType;
-  value?: string | string[];
-  defaultValue?: string | string[];
-  onValueChange?: (value: string | string[]) => void;
-  max?: number;
-  isDisabled?: boolean;
-  'aria-label'?: string;
-};
-
-export const createTileGroup = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef((props: ITileGroupProps, ref: Ref<T>) => {
-    const {
-      children,
-      type,
-      value: valueProp,
-      defaultValue,
-      onValueChange,
-      max: maxProp,
-      isDisabled = false,
-      'aria-label': ariaLabel,
-      ...rest
-    } = props as WidenedTileGroupProps;
-
-    const max = maxProp ?? Number.POSITIVE_INFINITY;
-
-    const defaultProp =
-      defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : undefined;
-
-    const [state, setState] = useControllableState<string | string[] | undefined>({
-      prop: valueProp,
-      defaultProp,
-      onChange: (next) => {
-        if (next !== undefined) {
-          onValueChange?.(next);
-        }
-      },
-    });
-
-    const isSelected = useCallback(
-      (tileValue: string) => {
-        if (type === 'single') {
-          return state === tileValue;
-        }
-        return Array.isArray(state) && state.includes(tileValue);
-      },
-      [type, state],
-    );
-
-    const isTileDisabledByGroup = useCallback(
-      (tileValue: string) => {
-        if (isDisabled) {
-          return true;
-        }
-        if (type !== 'multiple') {
-          return false;
-        }
-        const arr = Array.isArray(state) ? state : [];
-        if (arr.length < max) {
-          return false;
-        }
-        return !arr.includes(tileValue);
-      },
-      [isDisabled, type, state, max],
-    );
-
-    const toggleValue = useCallback(
-      (tileValue: string) => {
-        if (isDisabled) {
-          return;
-        }
-        if (type === 'single') {
-          if (state === tileValue) {
-            return;
-          }
-          setState(tileValue);
-          return;
-        }
-        const arr = Array.isArray(state) ? [...state] : [];
-        const idx = arr.indexOf(tileValue);
-        if (idx >= 0) {
-          arr.splice(idx, 1);
-          setState(arr);
-        } else if (arr.length < max) {
-          arr.push(tileValue);
-          setState(arr);
-        }
-      },
-      [isDisabled, type, state, setState, max],
-    );
-
-    const contextValue = useMemo(
-      () => ({
-        type,
-        value: state,
-        toggleValue,
-        isSelected,
-        isTileDisabledByGroup,
-        isGroupDisabled: isDisabled,
-        max,
-      }),
-      [type, state, toggleValue, isSelected, isTileDisabledByGroup, isDisabled, max],
-    );
-
-    const role = type === 'single' ? 'radiogroup' : 'group';
-
-    return (
-      <TileGroupContextProvider value={contextValue}>
-        <Base
-          {...(rest as T)}
-          ref={ref}
-          role={role}
-          {...(type === 'single' ? { accessibilityRole: 'radiogroup' as const } : {})}
-          {...(ariaLabel ? { 'aria-label': ariaLabel, accessibilityLabel: ariaLabel } : {})}
-          {...dataAttributes({
-            slot: 'tile-group',
-          })}
-        >
-          {children}
-        </Base>
-      </TileGroupContextProvider>
-    );
-  });

package/src/tile/createTileIndicator.tsx

@@ -1,38 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useTileContext } from './context';
-import type { ITileIndicatorProps } from './types';
-
-const shrinkZero = { flexShrink: 0 as const, pointerEvents: 'none' as const };
-
-export const createTileIndicator = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      { children, style, indicatorType, ...props }: ITileIndicatorProps,
-      ref: React.Ref<unknown>,
-    ) => {
-      const { isSelected, isDisabled, selectionType } = useTileContext();
-
-      // Effective visual type: explicit prop wins; otherwise infer from group/standalone context.
-      const effectiveType: 'radio' | 'checkbox' =
-        indicatorType ?? (selectionType === 'single' ? 'radio' : 'checkbox');
-
-      return (
-        <Base
-          {...(props as T)}
-          accessibilityElementsHidden
-          aria-hidden
-          {...dataAttributes({
-            slot: 'tile-indicator',
-            checked: isSelected,
-            selectionType: effectiveType === 'radio' ? 'single' : 'multiple',
-            disabled: isDisabled,
-          })}
-          ref={ref as React.Ref<T>}
-          style={[shrinkZero, style]}
-        >
-          {children}
-        </Base>
-      );
-    },
-  );

package/src/tile/createTileLeadingSlot.tsx

@@ -1,30 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { ITileLeadingSlotProps } from './types';
-
-const shrinkZero = { flexShrink: 0 as const };
-
-export const createTileLeadingSlot = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      { 'aria-hidden': ariaHidden, style, children, ...props }: ITileLeadingSlotProps,
-      ref: React.Ref<unknown>,
-    ) => {
-      const accessibilityElementsHidden = ariaHidden !== false;
-
-      return (
-        <Base
-          {...(props as T)}
-          {...dataAttributes({
-            slot: 'tile-leading',
-          })}
-          accessibilityElementsHidden={accessibilityElementsHidden}
-          aria-hidden={ariaHidden}
-          ref={ref as React.Ref<T>}
-          style={[shrinkZero, style]}
-        >
-          {children}
-        </Base>
-      );
-    },
-  );

package/src/tile/createTileTitle.tsx

@@ -1,19 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { ITileTitleProps } from './types';
-
-const noUnderline = { textDecorationLine: 'none' as const };
-
-export const createTileTitle = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(({ children, style, ...props }: ITileTitleProps, ref: React.Ref<unknown>) => (
-    <Base
-      {...(props as T)}
-      {...dataAttributes({
-        slot: 'tile-title',
-      })}
-      ref={ref as React.Ref<T>}
-      style={[noUnderline, style]}
-    >
-      {children}
-    </Base>
-  ));