@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.120

package/src/input/createInputSlot.tsx

@@ -1,39 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { useFormControl } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useInputContext } from './context';
-import type { IInputSlotProps } from './types';
-
-export const createInputSlot = <T,>(BaseInputSlot: React.ComponentType<T>) =>
-  forwardRef<unknown, IInputSlotProps>(
-    ({ children, onPress, focusOnPress = true, ...props }, ref) => {
-      const { inputFieldRef, isDisabled } = useInputContext();
-
-      const handleFocus = () => {
-        focusOnPress && inputFieldRef.current?.focus();
-      };
-
-      const inputProps = useFormControl({
-        isDisabled: props.isDisabled,
-      });
-
-      return (
-        <BaseInputSlot
-          {...dataAttributes({
-            disabled: isDisabled || inputProps.disabled,
-          })}
-          onPress={() => {
-            onPress?.();
-            handleFocus();
-          }}
-          accessibilityElementsHidden={true}
-          tabIndex={-1}
-          ref={ref}
-          {...(props as T)}
-        >
-          {children}
-        </BaseInputSlot>
-      );
-    },
-  );

package/src/link/createLink.tsx

@@ -1,71 +0,0 @@
-import React, { forwardRef } from 'react';
-import { composeEventHandlers } from '@cdx-ui/utils';
-import { useFocusRing, useFocus } from '@react-native-aria/focus';
-import { useHover, usePress } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useLink } from './useLink';
-import type { ILinkProps } from './types';
-
-export const createLink = <RootT, R = unknown>({ Root }: { Root: React.ComponentType<RootT> }) =>
-  forwardRef(
-    (
-      {
-        children,
-        isHovered: isHoveredProp,
-        isPressed: isPressedProp,
-        isFocused: isFocusedProp,
-        isFocusVisible: isFocusVisibleProp,
-        href,
-        onPress,
-        action,
-        webProps,
-        ...props
-      }: ILinkProps,
-      ref: React.ForwardedRef<R>,
-    ) => {
-      const { isFocused, focusProps } = useFocus();
-      const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
-        isFocusVisible: boolean;
-        focusProps: typeof focusProps;
-      };
-      const { pressProps, isPressed } = usePress({});
-      const { isHovered, hoverProps } = useHover();
-
-      const { linkProps } = useLink({
-        href,
-        onPress,
-        action,
-        webProps,
-      });
-
-      const interactionAttrs = dataAttributes({
-        hover: isHoveredProp || isHovered,
-        focus: isFocusedProp || isFocused,
-        active: isPressedProp || isPressed,
-        focusVisible: isFocusVisibleProp || isFocusVisible,
-      });
-
-      return (
-        <Root
-          ref={ref}
-          {...interactionAttrs}
-          {...linkProps}
-          {...(props as RootT)}
-          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, focusProps.onFocus),
-            focusRingProps.onFocus,
-          )}
-          onBlur={composeEventHandlers(
-            composeEventHandlers(props?.onBlur, focusProps.onBlur),
-            focusRingProps.onBlur,
-          )}
-        >
-          {children}
-        </Root>
-      );
-    },
-  );

package/src/list-item/createListItemContent.tsx

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

package/src/list-item/createListItemDescription.tsx

@@ -1,19 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IListItemDescriptionProps } from './types';
-
-export const createListItemDescription = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(
-    ({ children, style, ...props }: IListItemDescriptionProps, ref: React.Ref<unknown>) => (
-      <Base
-        {...(props as T)}
-        {...dataAttributes({
-          slot: 'list-item-description',
-        })}
-        ref={ref as React.Ref<T>}
-        style={style}
-      >
-        {children}
-      </Base>
-    ),
-  );

package/src/list-item/createListItemLeadingSlot.tsx

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

package/src/list-item/createListItemMeta.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IListItemMetaProps } from './types';
-
-export const createListItemMeta = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(({ children, style, ...props }: IListItemMetaProps, ref: React.Ref<unknown>) => (
-    <Base
-      {...(props as T)}
-      {...dataAttributes({
-        slot: 'list-item-meta',
-      })}
-      ref={ref as React.Ref<T>}
-      style={style}
-    >
-      {children}
-    </Base>
-  ));

package/src/list-item/createListItemRoot.tsx

@@ -1,163 +0,0 @@
-import React, { forwardRef, useMemo } from 'react';
-import type { PressableProps } from 'react-native';
-import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
-import { useHover, usePress } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
-import { ListItemProvider } from './context';
-import type { IListItemProps, IListItemPressablePassthrough } from './types';
-
-function listItemRootDataAttrs(
-  size: IListItemProps['size'],
-  surface: IListItemProps['surface'],
-  showSeparator: boolean | undefined,
-  crossAlign: IListItemProps['crossAlign'],
-) {
-  return dataAttributes({
-    slot: 'list-item',
-    size: size ?? 'default',
-    surface: surface ?? 'default',
-    separator: showSeparator ?? true,
-    crossAlign: crossAlign ?? 'center',
-  });
-}
-
-function rowStyleForCrossAlign(crossAlign: IListItemProps['crossAlign']) {
-  return {
-    flexDirection: 'row' as const,
-    alignSelf: 'stretch' as const,
-    alignItems: crossAlign === 'start' ? ('flex-start' as const) : ('center' as const),
-  };
-}
-
-export const createListItemRoot = <V, P>(
-  BaseView: React.ComponentType<V>,
-  BasePressable: React.ComponentType<P>,
-) =>
-  forwardRef(
-    (
-      {
-        asChild = false,
-        children,
-        onPress,
-        size = 'default',
-        surface = 'default',
-        showSeparator = true,
-        crossAlign = 'center',
-        disabled = false,
-        style,
-        ...restProps
-      }: IListItemProps,
-      ref: React.Ref<unknown>,
-    ) => {
-      const asChildInteractive = asChild && !!onPress && React.isValidElement(children);
-      const isPressableRoot = !!onPress && !asChildInteractive;
-
-      const pressState = usePress({
-        isDisabled: !isPressableRoot || disabled,
-      });
-      const isPressed = pressState.isPressed;
-      const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
-      const { hoverProps, isHovered } = useHover();
-
-      const slotAttrs = listItemRootDataAttrs(size, surface, showSeparator, crossAlign);
-
-      const contextValue = useMemo(
-        () => ({
-          isPressed: isPressableRoot ? isPressed : false,
-          isHovered,
-          isDisabled: disabled,
-          crossAlign: crossAlign ?? 'center',
-        }),
-        [isPressableRoot, isPressed, isHovered, disabled, crossAlign],
-      );
-
-      if (asChildInteractive) {
-        const child = children as React.ReactElement<Record<string, unknown>>;
-
-        const mergedOnPress = composeEventHandlers(
-          child.props.onPress as IListItemProps['onPress'],
-          onPress,
-        );
-
-        const childDisabled = !!(child.props as { disabled?: boolean }).disabled;
-
-        const resolvedDisabled = disabled || childDisabled;
-
-        return (
-          <ListItemProvider
-            value={{
-              isPressed: false,
-              isHovered: false,
-              isDisabled: resolvedDisabled,
-              crossAlign: crossAlign ?? 'center',
-            }}
-          >
-            {React.cloneElement(child, {
-              ...restProps,
-              ...slotAttrs,
-              ...dataAttributes({
-                active: false,
-                hovered: false,
-                disabled: resolvedDisabled,
-              }),
-              ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
-              disabled: resolvedDisabled,
-              onPress: resolvedDisabled ? undefined : mergedOnPress,
-              ref: mergeRefs(ref, child.props.ref as React.Ref<unknown>),
-              style: [rowStyleForCrossAlign(crossAlign), style, child.props.style],
-            })}
-          </ListItemProvider>
-        );
-      }
-
-      if (isPressableRoot) {
-        const interactionAttrs = dataAttributes({
-          active: isPressed,
-          hovered: isHovered,
-          disabled,
-        });
-
-        const {
-          onPressIn: onPressInProp,
-          onPressOut: onPressOutProp,
-          onHoverIn: onHoverInProp,
-          onHoverOut: onHoverOutProp,
-        } = restProps as IListItemPressablePassthrough;
-
-        return (
-          <ListItemProvider value={contextValue}>
-            <BasePressable
-              {...(restProps as P)}
-              {...slotAttrs}
-              {...interactionAttrs}
-              {...(disabled && { accessibilityState: { disabled: true } })}
-              disabled={disabled}
-              ref={ref as React.Ref<P>}
-              style={[rowStyleForCrossAlign(crossAlign), style]}
-              onPress={disabled ? undefined : onPress}
-              onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
-              onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
-              onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
-              onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
-            >
-              {children}
-            </BasePressable>
-          </ListItemProvider>
-        );
-      }
-
-      return (
-        <ListItemProvider value={contextValue}>
-          <BaseView
-            {...(restProps as V)}
-            {...slotAttrs}
-            {...(disabled ? dataAttributes({ disabled: true }) : undefined)}
-            ref={ref as React.Ref<V>}
-            style={[rowStyleForCrossAlign(crossAlign), style]}
-          >
-            {children}
-          </BaseView>
-        </ListItemProvider>
-      );
-    },
-  );

package/src/list-item/createListItemSectionHeader.tsx

@@ -1,53 +0,0 @@
-import React, { forwardRef } from 'react';
-import { View } from 'react-native';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IListItemSectionHeaderProps } from './types';
-
-const row = {
-  flexDirection: 'row' as const,
-  alignItems: 'center' as const,
-  justifyContent: 'space-between' as const,
-  gap: 8,
-};
-
-const labelCell = {
-  flex: 1,
-  minWidth: 0,
-  /** Keeps the label column from stretching to a taller trailing sibling (e.g. Chip). */
-  alignSelf: 'center' as const,
-};
-
-const trailingCell = {
-  flexShrink: 0,
-  /** Prevents the trailing slot from stretching vertically and “filling” the row. */
-  alignSelf: 'center' as const,
-};
-
-export const createListItemSectionHeader = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        children,
-        trailing,
-        showDivider = true,
-        style,
-        accessibilityRole = 'header',
-        ...props
-      }: IListItemSectionHeaderProps,
-      ref: React.Ref<unknown>,
-    ) => (
-      <Base
-        {...(props as T)}
-        {...dataAttributes({
-          slot: 'list-section-header',
-          divider: showDivider,
-        })}
-        accessibilityRole={accessibilityRole}
-        ref={ref as React.Ref<T>}
-        style={[row, style]}
-      >
-        <View style={labelCell}>{children}</View>
-        {trailing ? <View style={trailingCell}>{trailing}</View> : null}
-      </Base>
-    ),
-  );

package/src/list-item/createListItemTitle.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IListItemTitleProps } from './types';
-
-export const createListItemTitle = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(({ children, style, ...props }: IListItemTitleProps, ref: React.Ref<unknown>) => (
-    <Base
-      {...(props as T)}
-      {...dataAttributes({
-        slot: 'list-item-title',
-      })}
-      ref={ref as React.Ref<T>}
-      style={style}
-    >
-      {children}
-    </Base>
-  ));

package/src/list-item/createListItemTrailingSlot.tsx

@@ -1,21 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IListItemTrailingSlotProps } from './types';
-
-const shrinkZero = { flexShrink: 0 as const };
-
-export const createListItemTrailingSlot = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(
-    ({ children, style, ...props }: IListItemTrailingSlotProps, ref: React.Ref<unknown>) => (
-      <Base
-        {...(props as T)}
-        {...dataAttributes({
-          slot: 'list-item-trailing',
-        })}
-        ref={ref as React.Ref<T>}
-        style={[shrinkZero, style]}
-      >
-        {children}
-      </Base>
-    ),
-  );

package/src/otp-input/createOtpInputCell.tsx

@@ -1,22 +0,0 @@
-import type React from 'react';
-import type { PropsWithChildren } from 'react';
-import { forwardRef } from 'react';
-import { useOtpInputContext } from './context';
-import type { IOtpInputCellProps } from './types';
-
-export const createOtpInputCell = <T,>(BaseCell: React.ComponentType<T>) =>
-  forwardRef<unknown, PropsWithChildren<IOtpInputCellProps & T>>(({ children, ...props }, ref) => {
-    const { isDisabled, isInvalid, isReadOnly } = useOtpInputContext();
-
-    return (
-      <BaseCell
-        ref={ref}
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        {...(props as T)}
-      >
-        {children}
-      </BaseCell>
-    );
-  });

package/src/otp-input/createOtpInputField.tsx

@@ -1,98 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo } from 'react';
-import { Platform, type TextInput, type TextInputKeyPressEvent } from 'react-native';
-import { mergeRefs } from '@cdx-ui/utils';
-import { useOtpCellIndexContext, useOtpInputContext } from './context';
-import type { IOtpInputFieldProps } from './types';
-
-export const createOtpInputField = <T,>(BaseField: React.ComponentType<T>) =>
-  forwardRef<TextInput, IOtpInputFieldProps & Omit<T, keyof IOtpInputFieldProps>>((props, ref) => {
-    const { cellIndex } = useOtpCellIndexContext();
-    const {
-      value,
-      cellCount,
-      isDisabled,
-      isReadOnly,
-      smsOtpAutofill,
-      getCellProps,
-      cellTestIdPrefix,
-      rootAccessibilityLabel,
-      setFieldRef,
-      handleFieldChange,
-      handleFieldKeyPress,
-    } = useOtpInputContext();
-
-    const char = cellIndex < value.length ? (value[cellIndex] ?? '') : '';
-    const extra = getCellProps?.(cellIndex) ?? {};
-
-    const accessibilityLabel = useMemo(() => {
-      const fromExtra = extra.accessibilityLabel;
-      if (typeof fromExtra === 'string' && fromExtra !== '') {
-        return fromExtra;
-      }
-      if (rootAccessibilityLabel) {
-        return `${rootAccessibilityLabel}, ${String(cellIndex + 1)} of ${String(cellCount)}`;
-      }
-      return `OTP digit ${String(cellIndex + 1)} of ${String(cellCount)}`;
-    }, [cellCount, cellIndex, extra.accessibilityLabel, rootAccessibilityLabel]);
-
-    const autofillProps = useMemo(() => {
-      if (!smsOtpAutofill || cellIndex !== 0) {
-        return {};
-      }
-      return Platform.select<Record<string, unknown>>({
-        web: { autoComplete: 'one-time-code' },
-        ios: { textContentType: 'oneTimeCode' },
-        android: { autoComplete: 'sms-otp' },
-        default: {},
-      });
-    }, [cellIndex, smsOtpAutofill]);
-
-    const editable = !(isDisabled || isReadOnly);
-
-    const { style: extraStyle, accessibilityLabel: _omitExtraA11y, ...extraRest } = extra;
-    void _omitExtraA11y;
-    const {
-      style: incomingStyle,
-      value: _omitValue,
-      defaultValue: _omitDefault,
-      onChangeText: _omitOnChange,
-      ...incomingRest
-    } = props as IOtpInputFieldProps;
-    void _omitValue;
-    void _omitDefault;
-    void _omitOnChange;
-
-    // Default digit OTP (`number-pad`). Root `getCellProps` is spread after and may override `keyboardType`.
-    return (
-      <BaseField
-        ref={mergeRefs(ref, (el: TextInput | null) => {
-          setFieldRef(cellIndex, el);
-        })}
-        accessibilityLabel={accessibilityLabel}
-        aria-label={accessibilityLabel}
-        accessible
-        autoFocus={cellIndex === 0 && editable && value.length === 0}
-        editable={editable}
-        keyboardType="number-pad"
-        returnKeyType="done"
-        selectTextOnFocus
-        testID={
-          cellTestIdPrefix
-            ? `${cellTestIdPrefix}:${String(cellIndex)}:textField:changeText`
-            : undefined
-        }
-        value={char}
-        onChangeText={(text: string) => {
-          handleFieldChange(cellIndex, text);
-        }}
-        onKeyPress={(e: TextInputKeyPressEvent) => {
-          handleFieldKeyPress(cellIndex, e.nativeEvent.key);
-        }}
-        {...autofillProps}
-        {...(extraRest as object)}
-        {...(incomingRest as T)}
-        style={[extraStyle, incomingStyle]}
-      />
-    );
-  });