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

package/src/select/createSelectItemLabel.tsx

@@ -1,30 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useSelectItemContext } from './context';
-import type { ISelectItemLabelProps } from './types';
-
-export const createSelectItemLabel = <T,>(BaseItemLabel: React.ComponentType<T>) =>
-  forwardRef(({ children, ...props }: ISelectItemLabelProps, ref?: any) => {
-    const { hover, focus, active, disabled, focusVisible, highlighted, checked } =
-      useSelectItemContext();
-
-    return (
-      <BaseItemLabel
-        ref={ref}
-        {...(props as T)}
-        {...dataAttributes({
-          hover,
-          focus,
-          active,
-          disabled,
-          focusVisible,
-          highlighted,
-          state: checked ? 'checked' : 'unchecked',
-          slot: 'select-item-label',
-        })}
-      >
-        {children}
-      </BaseItemLabel>
-    );
-  });

package/src/select/createSelectRoot.tsx

@@ -1,134 +0,0 @@
-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 { SelectProvider } 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 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,
-        ],
-      );
-
-      return (
-        <SelectProvider value={contextValue}>
-          <BaseRoot
-            ref={ref}
-            {...(props as T)}
-            {...dataAttributes({
-              slot: 'select',
-              disabled: isEffectivelyDisabled,
-              required: isEffectivelyRequired,
-              invalid: isEffectivelyInvalid,
-              readonly: isEffectivelyReadOnly,
-            })}
-          >
-            {children}
-          </BaseRoot>
-        </SelectProvider>
-      );
-    },
-  );

package/src/select/createSelectTrigger.tsx

@@ -1,218 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-import { type GestureResponderEvent, Platform } from 'react-native';
-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 { 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 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,
-        ],
-      );
-
-      /**
-       * 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,
-            )}
-            onBlur={composeEventHandlers(
-              composeEventHandlers(
-                props?.onBlur as (...args: unknown[]) => unknown,
-                focusProps.onBlur,
-              ),
-              focusRingProps.onBlur,
-            )}
-            {...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>}
-        />
-      );
-    },
-  );