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

package/src/otp-input/createOtpInputRoot.tsx

@@ -1,179 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import type { TextInput } from 'react-native';
-import { useFormControlContext } from '@cdx-ui/utils';
-import { applyOtpInputChange } from './utils/applyValueChange';
-import { OtpCellIndexProvider, OtpInputProvider } from './context';
-import { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
-import type { IOtpInputRootProps } from './types';
-
-export const createOtpInputRoot = <RootProps,>(
-  BaseRoot: React.ComponentType<RootProps>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- slot components are generic across design systems
-  OtpCell: React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  OtpField: React.ComponentType<any>,
-) =>
-  forwardRef<unknown, IOtpInputRootProps & RootProps>(
-    (
-      {
-        cellCount,
-        value,
-        onChangeText,
-        onComplete,
-        isDisabled: isDisabledProp,
-        isInvalid: isInvalidProp,
-        isReadOnly: isReadOnlyProp,
-        smsOtpAutofill = true,
-        filterInput,
-        allowedCharacters,
-        characterPattern,
-        getCellProps,
-        cellTestIdPrefix,
-        accessibilityLabel: rootAccessibilityLabel,
-        ...rest
-      },
-      ref,
-    ) => {
-      const form = useFormControlContext();
-      const isDisabled = isDisabledProp ?? form.isDisabled ?? false;
-      const isInvalid = isInvalidProp ?? form.isInvalid ?? false;
-      const isReadOnly = isReadOnlyProp ?? form.isReadOnly ?? false;
-
-      const fieldRefs = useRef<(TextInput | null)[]>([]);
-      const focusAfterApply = useRef<number | null>(null);
-      const prevLenRef = useRef(value.length);
-      const prevValueRef = useRef(value);
-
-      const filter = useMemo(() => {
-        if (filterInput) {
-          return filterInput;
-        }
-        if (allowedCharacters !== undefined) {
-          return filterAllowedCharacters(allowedCharacters);
-        }
-        if (characterPattern !== undefined) {
-          return filterByRegExp(characterPattern);
-        }
-        return filterDigits;
-      }, [filterInput, allowedCharacters, characterPattern]);
-
-      const setFieldRef = useCallback((index: number, el: TextInput | null) => {
-        fieldRefs.current[index] = el;
-      }, []);
-
-      const focusCell = useCallback(
-        (index: number) => {
-          const safe = Math.max(0, Math.min(index, cellCount - 1));
-          fieldRefs.current[safe]?.focus();
-        },
-        [cellCount],
-      );
-
-      const handleFieldChange = useCallback(
-        (index: number, text: string) => {
-          const { nextValue, focusIndex } = applyOtpInputChange(
-            value,
-            index,
-            text,
-            cellCount,
-            filter,
-          );
-          if (nextValue !== value) {
-            onChangeText(nextValue);
-          }
-          focusAfterApply.current = focusIndex;
-        },
-        [cellCount, filter, onChangeText, value],
-      );
-
-      const handleFieldKeyPress = useCallback(
-        (index: number, key: string) => {
-          if (key !== 'Backspace') {
-            return;
-          }
-          const char = index < value.length ? value[index] : '';
-          if (!char && index > 0) {
-            focusCell(index - 1);
-          }
-        },
-        [focusCell, value],
-      );
-
-      useLayoutEffect(() => {
-        if (focusAfterApply.current !== null) {
-          const i = focusAfterApply.current;
-          focusAfterApply.current = null;
-          fieldRefs.current[i]?.focus();
-        }
-      });
-
-      useEffect(() => {
-        const prevLen = prevLenRef.current;
-        const prevVal = prevValueRef.current;
-        const isFull = value.length === cellCount;
-        const becameFullByLength = isFull && prevLen < cellCount;
-        const correctedWhileFull = isFull && prevLen === cellCount && prevVal !== value;
-
-        if (becameFullByLength || correctedWhileFull) {
-          onComplete?.();
-        }
-        prevLenRef.current = value.length;
-        prevValueRef.current = value;
-      }, [cellCount, onComplete, value]);
-
-      const contextValue = useMemo(
-        () => ({
-          cellCount,
-          value,
-          isDisabled,
-          isInvalid,
-          isReadOnly,
-          smsOtpAutofill,
-          filter,
-          getCellProps,
-          cellTestIdPrefix,
-          rootAccessibilityLabel,
-          setFieldRef,
-          handleFieldChange,
-          handleFieldKeyPress,
-        }),
-        [
-          cellCount,
-          value,
-          isDisabled,
-          isInvalid,
-          isReadOnly,
-          smsOtpAutofill,
-          filter,
-          getCellProps,
-          cellTestIdPrefix,
-          rootAccessibilityLabel,
-          setFieldRef,
-          handleFieldChange,
-          handleFieldKeyPress,
-        ],
-      );
-
-      // Hermes drops outer-scope closure vars from its environment record when
-      // they are only referenced inside a nested callback (Array.from). Using a
-      // for-loop keeps OtpCell/OtpField references in the render function's own
-      // scope, avoiding the Hermes closure-capture bug.
-      const cells: React.ReactElement[] = [];
-      for (let i = 0; i < cellCount; i++) {
-        cells.push(
-          <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
-            <OtpCell>
-              <OtpField />
-            </OtpCell>
-          </OtpCellIndexProvider>,
-        );
-      }
-
-      return (
-        <BaseRoot ref={ref as React.Ref<unknown>} {...(rest as RootProps)}>
-          <OtpInputProvider value={contextValue}>{cells}</OtpInputProvider>
-        </BaseRoot>
-      );
-    },
-  );

package/src/otp-input/index.tsx

@@ -1,34 +0,0 @@
-import type React from 'react';
-import { createOtpInputCell } from './createOtpInputCell';
-import { createOtpInputField } from './createOtpInputField';
-import { createOtpInputRoot } from './createOtpInputRoot';
-import type { IOtpInputComponentType } from './types';
-
-export { applyOtpInputChange } from './utils/applyValueChange';
-export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
-export type * from './types';
-
-export function createOtpInput<
-  RootProps,
-  CellProps,
-  FieldProps,
-  RootRef = unknown,
-  FieldRef = unknown,
->(BaseComponents: {
-  Root: React.ComponentType<RootProps>;
-  Cell: React.ComponentType<CellProps>;
-  Field: React.ComponentType<FieldProps>;
-}) {
-  const Cell = createOtpInputCell(BaseComponents.Cell);
-  const Field = createOtpInputField(BaseComponents.Field);
-  const Root = createOtpInputRoot(BaseComponents.Root, Cell, Field);
-
-  Root.displayName = 'OtpInputPrimitive';
-  Cell.displayName = 'OtpInputPrimitive.Cell';
-  Field.displayName = 'OtpInputPrimitive.Field';
-
-  return Object.assign(Root, {
-    Cell,
-    Field,
-  }) as IOtpInputComponentType<RootProps, CellProps, FieldProps, RootRef, FieldRef>;
-}

package/src/progress/createProgressIndicator.tsx

@@ -1,35 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
-import type { ViewStyle } from 'react-native';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useProgressContext } from './context';
-
-type PercentString = `${number}%`;
-
-export const createProgressIndicator = <T, R = unknown>(BaseIndicator: React.ComponentType<T>) =>
-  forwardRef<R, PropsWithoutRef<T>>((props, ref) => {
-    const { style, ...rest } = props as PropsWithoutRef<T> & { style?: object };
-    const { percent, state, max, value } = useProgressContext();
-
-    const filledStyle = useMemo((): ViewStyle => {
-      const pct = `${String(percent)}%` as PercentString;
-      return { width: pct, height: '100%' };
-    }, [percent]);
-
-    const dataAttrs = dataAttributes({
-      state,
-      value: value === null ? undefined : String(value),
-      max: String(max),
-    });
-
-    return (
-      <BaseIndicator
-        ref={ref as React.Ref<R>}
-        {...({
-          ...rest,
-          ...dataAttrs,
-          style: [filledStyle, style],
-        } as T)}
-      />
-    );
-  });

package/src/progress/createProgressRoot.tsx

@@ -1,109 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { ProgressProvider } from './context';
-import type { InterfaceProgressProps, ProgressDataState } from './types';
-
-function clamp(n: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, n));
-}
-
-function resolveState(
-  value: number | null,
-  max: number,
-  clamped: number | null,
-): ProgressDataState {
-  if (value === null) {
-    return 'indeterminate';
-  }
-  if (max <= 0) {
-    return 'complete';
-  }
-  if (clamped !== null && clamped >= max) {
-    return 'complete';
-  }
-  return 'loading';
-}
-
-function defaultGetValueLabel(value: number, max: number): string {
-  if (max <= 0) {
-    return '0%';
-  }
-  return `${String(Math.round((value / max) * 100))}%`;
-}
-
-export const createProgressRoot = <T, R = unknown>(BaseRoot: React.ComponentType<T>) =>
-  forwardRef<R, PropsWithoutRef<T> & InterfaceProgressProps>((props, ref) => {
-    const {
-      value: valueProp = 0,
-      max: maxProp = 100,
-      getValueLabel = defaultGetValueLabel,
-      children,
-      accessibilityRole = 'progressbar',
-      accessibilityValue: accessibilityValueProp,
-      role = 'progressbar',
-      ...restProps
-    } = props;
-    const max = maxProp > 0 ? maxProp : 0;
-    const isIndeterminate = valueProp === null;
-    const clampedValue =
-      valueProp === null ? null : clamp(Number.isFinite(valueProp) ? valueProp : 0, 0, max);
-
-    const percent = useMemo(() => {
-      if (clampedValue === null || max <= 0) {
-        return 0;
-      }
-      return (clampedValue / max) * 100;
-    }, [clampedValue, max]);
-
-    const state = useMemo(
-      () => resolveState(valueProp, max, clampedValue),
-      [valueProp, max, clampedValue],
-    );
-
-    const contextValue = useMemo(
-      () => ({
-        value: clampedValue,
-        max,
-        percent,
-        state,
-      }),
-      [clampedValue, max, percent, state],
-    );
-
-    const dataAttrs = dataAttributes({
-      state,
-      value: clampedValue === null ? undefined : String(clampedValue),
-      max: String(max),
-    });
-
-    const accessibilityValue = useMemo(() => {
-      if (accessibilityValueProp !== undefined) {
-        return accessibilityValueProp;
-      }
-      if (isIndeterminate || clampedValue === null) {
-        return { min: 0, max, text: 'Indeterminate' };
-      }
-      return {
-        min: 0,
-        max,
-        now: clampedValue,
-        text: getValueLabel(clampedValue, max),
-      };
-    }, [accessibilityValueProp, isIndeterminate, clampedValue, max, getValueLabel]);
-
-    return (
-      <ProgressProvider value={contextValue}>
-        <BaseRoot
-          ref={ref as React.Ref<R>}
-          {...(restProps as T)}
-          role={role}
-          accessibilityRole={accessibilityRole}
-          accessibilityValue={accessibilityValue}
-          {...dataAttrs}
-        >
-          {children}
-        </BaseRoot>
-      </ProgressProvider>
-    );
-  });

package/src/progress/index.ts

@@ -1,28 +0,0 @@
-import type React from 'react';
-import { createProgressIndicator } from './createProgressIndicator';
-import { createProgressRoot } from './createProgressRoot';
-import type { IProgressComponentType } from './types';
-
-export type { IProgressProps, IProgressComponentType, ProgressDataState } from './types';
-export type { ProgressContextValue } from './context';
-export { useProgressContext } from './context';
-
-export function createProgress<
-  RootProps,
-  IndicatorProps,
-  RootRef = unknown,
-  IndicatorRef = unknown,
->(components: {
-  Root: React.ComponentType<RootProps>;
-  Indicator: React.ComponentType<IndicatorProps>;
-}) {
-  const Progress = createProgressRoot<RootProps, RootRef>(components.Root);
-  const Indicator = createProgressIndicator<IndicatorProps, IndicatorRef>(components.Indicator);
-
-  Progress.displayName = 'ProgressPrimitive';
-  Indicator.displayName = 'ProgressPrimitive.Indicator';
-
-  return Object.assign(Progress, {
-    Indicator,
-  }) as IProgressComponentType<RootProps, IndicatorProps, RootRef, IndicatorRef>;
-}

package/src/progress/types.ts

@@ -1,37 +0,0 @@
-import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
-import type { ViewProps } from 'react-native';
-
-export type ProgressDataState = 'complete' | 'indeterminate' | 'loading';
-
-export interface InterfaceProgressProps extends Omit<ViewProps, 'children'> {
-  /**
-   * Current value in the range [0, max], or `null` for indeterminate progress.
-   * Omit or use a number for determinate progress; default is `0`.
-   */
-  readonly value?: number | null;
-  /**
-   * Maximum value (minimum is always 0).
-   * @default 100
-   */
-  readonly max?: number;
-  /**
-   * Optional label for `accessibilityValue.text` when determinate.
-   */
-  readonly getValueLabel?: (value: number, max: number) => string;
-  readonly children?: ReactNode;
-}
-
-export type IProgressComponentType<
-  RootProps,
-  IndicatorProps,
-  RootRef = unknown,
-  IndicatorRef = unknown,
-> = ForwardRefExoticComponent<
-  PropsWithoutRef<RootProps & InterfaceProgressProps> & RefAttributes<RootRef>
-> & {
-  Indicator: ForwardRefExoticComponent<
-    PropsWithoutRef<IndicatorProps> & RefAttributes<IndicatorRef>
-  >;
-};
-
-export type IProgressProps = InterfaceProgressProps;

package/src/select/createSelectContent.tsx

@@ -1,115 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useRef } from 'react';
-import { Platform, ScrollView } from 'react-native';
-import { FadeIn, FadeOut } from 'react-native-reanimated';
-import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
-import {
-  OverlayContainer,
-  useAnchorPosition,
-  useDismissOverlay,
-  useOverlayPosition,
-} from '../overlay';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useSelectContext } from './context';
-import type { ISelectContentProps } from './types';
-import { useContentFocus } from './useContentFocus';
-import { useListboxNavigation } from './useListboxNavigation';
-
-export const createSelectContent = <T,>(BaseContent: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      { children, enteringAnimation, exitingAnimation, ...props }: ISelectContentProps,
-      ref?: any,
-    ) => {
-      const {
-        open,
-        setOpen,
-        contentId,
-        triggerId,
-        activeValue,
-        setActiveValue,
-        value,
-        onValueChange,
-        native,
-        triggerRef,
-        items,
-      } = useSelectContext();
-
-      const contentRef = useRef<HTMLElement | null>(null);
-
-      const focusOnMount = useCallback((node: HTMLElement) => {
-        contentRef.current = node;
-        if (node && Platform.OS === 'web') {
-          requestAnimationFrame(() => {
-            setTimeout(() => {
-              node.focus?.();
-            }, 100);
-          });
-        }
-      }, []);
-
-      const mergedRef = mergeRefs(ref, focusOnMount);
-
-      const dismiss = () => setOpen(false);
-
-      const anchorLayout = useAnchorPosition(triggerRef, open);
-      const position = useOverlayPosition(anchorLayout);
-
-      useDismissOverlay(open, contentRef, [triggerRef], dismiss);
-
-      const { handleKeyDown } = useListboxNavigation({
-        items,
-        activeValue,
-        setActiveValue,
-        onSelect: (val) => {
-          onValueChange(val);
-          setOpen(false);
-        },
-        onDismiss: dismiss,
-      });
-
-      useContentFocus({
-        open,
-        triggerRef,
-        items,
-        value,
-        setActiveValue,
-      });
-
-      if (native || !open || !position) {
-        return null;
-      }
-
-      const webProps =
-        Platform.OS === 'web'
-          ? {
-              onKeyDown: composeEventHandlers((props as any).onKeyDown, handleKeyDown),
-              tabIndex: -1,
-            }
-          : {};
-
-      return (
-        <OverlayContainer
-          onDismiss={dismiss}
-          entering={enteringAnimation ?? FadeIn.duration(150)}
-          exiting={exitingAnimation ?? FadeOut.duration(100)}
-          style={position.style}
-        >
-          <BaseContent
-            ref={mergedRef}
-            role="listbox"
-            id={contentId}
-            aria-labelledby={triggerId}
-            {...dataAttributes({
-              state: 'open',
-              slot: 'select-content',
-            })}
-            {...(props as T)}
-            {...webProps}
-          >
-            <ScrollView scrollEventThrottle={16}>{children}</ScrollView>
-          </BaseContent>
-        </OverlayContainer>
-      );
-    },
-  );

package/src/select/createSelectIcon.tsx

@@ -1,27 +0,0 @@
-import { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useSelectContext, useSelectTriggerContext } from './context';
-
-export const createSelectIcon = <T,>(BaseIcon: React.ComponentType<T>) =>
-  forwardRef((props: any, ref?: any) => {
-    const { hover, focus, active, disabled, focusVisible } = useSelectTriggerContext();
-    const { required, invalid, readOnly } = useSelectContext();
-
-    return (
-      <BaseIcon
-        ref={ref}
-        {...dataAttributes({
-          hover,
-          focus,
-          active,
-          disabled,
-          focusVisible,
-          required,
-          invalid,
-          readonly: readOnly,
-          slot: 'select-icon',
-        })}
-        {...(props as T)}
-      />
-    );
-  });

package/src/select/createSelectItem.tsx

@@ -1,121 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useMemo } from 'react';
-import { composeEventHandlers } 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 { SelectItemProvider, useSelectContext } from './context';
-import type { ISelectItemProps } from './types';
-
-export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        children,
-        value: itemValue,
-        disabled: disabledProp = false,
-        isHovered: isHoveredProp,
-        isActive: isActiveProp,
-        isFocused: isFocusedProp,
-        isFocusVisible: isFocusVisibleProp,
-        isDisabled: isDisabledProp,
-        ...props
-      }: Omit<ISelectItemProps, 'children'> & { children?: React.ReactNode },
-      ref?: any,
-    ) => {
-      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 }: any = useFocusRing();
-      const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
-      const { isFocused, focusProps } = useFocus();
-      const { isHovered, hoverProps }: any = 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,
-        ],
-      );
-
-      return (
-        <SelectItemProvider value={interactionState}>
-          <BaseItem
-            ref={ref}
-            role="option"
-            id={`${contentId}-option-${itemValue}`}
-            aria-selected={checked}
-            aria-disabled={disabled}
-            {...dataAttributes({
-              hover: interactionState.hover,
-              focus: interactionState.focus,
-              active: interactionState.active,
-              disabled: interactionState.disabled,
-              focusVisible: interactionState.focusVisible,
-              highlighted: interactionState.highlighted,
-              state: checked ? 'checked' : 'unchecked',
-              slot: 'select-item',
-            })}
-            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,
-            )}
-          >
-            {children}
-          </BaseItem>
-        </SelectItemProvider>
-      );
-    },
-  );