@cdx-ui/primitives 0.0.1-beta.7 → 0.0.1-beta.70

package/src/field/createFieldLabel.tsx

@@ -1,30 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IFieldLabelProps } from './types';
-
-export const createFieldLabel = <T,>(BaseFormLabel: React.ComponentType<T>) =>
-  forwardRef<unknown, IFieldLabelProps & { children?: React.ReactNode }>(
-    ({ children, htmlFor: htmlForProp, requiredIndicator, ...props }, ref) => {
-      const field = useFormControlContext();
-      const fieldId = field.id;
-      const labelId = field.labelId;
-
-      /** Must match `useFormControl` default: `props.id ?? \`${field.id}-input\``. */
-      const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
-
-      return (
-        <BaseFormLabel
-          ref={ref}
-          {...(props as T)}
-          id={labelId}
-          htmlFor={htmlFor}
-          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
-        >
-          {children}
-          {field.isRequired ? requiredIndicator : null}
-        </BaseFormLabel>
-      );
-    },
-  );

package/src/field/createFieldRoot.tsx

@@ -1,27 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useFormControlRoot, FormControlContext } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IFieldRootProps } from './types';
-
-export const createFieldRoot = <T,>(BaseFormField: React.ComponentType<T>) =>
-  forwardRef(
-    ({ children, ...props }: IFieldRootProps & { children?: React.ReactNode }, ref?: unknown) => {
-      const { htmlProps, ...context } = useFormControlRoot(props);
-
-      return (
-        <FormControlContext.Provider value={context}>
-          <BaseFormField
-            ref={ref}
-            {...(htmlProps as T)}
-            {...dataAttributes({
-              disabled: context.isDisabled,
-              invalid: context.isInvalid,
-              required: context.isRequired,
-            })}
-          >
-            {children}
-          </BaseFormField>
-        </FormControlContext.Provider>
-      );
-    },
-  );

package/src/form/createFormRoot.tsx

@@ -1,13 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { IFormRootProps, IFormComponentType } from './types';
-
-// TODO: Handle web submission (button type submit)
-
-export const createFormRoot = <T,>(BaseFormRoot: React.ComponentType<T>): IFormComponentType<T> =>
-  forwardRef(
-    ({ children, ...props }: IFormRootProps & { children?: React.ReactNode }, ref?: unknown) => (
-      <BaseFormRoot ref={ref} {...(props as T)}>
-        {children}
-      </BaseFormRoot>
-    ),
-  );

package/src/input/createInputField.tsx

@@ -1,114 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo } from 'react';
-import {
-  type BlurEvent,
-  type FocusEvent,
-  Platform,
-  type TextInputKeyPressEvent,
-} from 'react-native';
-import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useInputContext } from './context';
-import type { IInputProps } from './types';
-
-export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        children,
-        onKeyPress,
-        type = 'text',
-        accessibilityLabel,
-        'aria-label': ariaLabelProp,
-        secureTextEntry,
-        editable,
-        disabled,
-        ...props
-      }: IInputProps,
-      ref?: any,
-    ) => {
-      const {
-        isDisabled,
-        isReadOnly,
-        isFocused,
-        isInvalid,
-        setIsFocused,
-        isHovered,
-        isFocusVisible,
-        inputFieldRef,
-        isRequired,
-      } = useInputContext();
-
-      const inputProps = useFormControl({
-        isDisabled: props.isDisabled || disabled,
-        isInvalid: props.isInvalid,
-        isReadOnly: props.isReadOnly,
-        isRequired: props.isRequired,
-        id: props.id,
-      });
-
-      const field = useFormControlContext();
-
-      const handleFocus = (focusState: boolean, callback: any) => {
-        setIsFocused(focusState);
-        callback();
-      };
-
-      const mergedRef =
-        Platform.OS === 'web'
-          ? mergeRefs(ref, inputFieldRef)
-          : mergeRefs(ref, inputFieldRef, field.inputRef);
-
-      const isEffectivelyDisabled = isDisabled || inputProps.disabled;
-
-      const ariaLabel = accessibilityLabel ?? ariaLabelProp;
-
-      const editableProp = useMemo(() => {
-        if (editable !== undefined) {
-          return editable;
-        }
-        return !(isDisabled || inputProps.disabled || isReadOnly);
-      }, [isDisabled, inputProps.disabled, isReadOnly, editable]);
-
-      return (
-        <BaseInputField
-          {...inputProps}
-          {...(props as T)}
-          type={type}
-          {...dataAttributes({
-            focus: isFocused,
-            invalid: isInvalid,
-            readonly: isReadOnly,
-            required: isRequired,
-            hover: isHovered,
-            focusVisible: isFocusVisible,
-            disabled: isEffectivelyDisabled,
-          })}
-          disabled={isEffectivelyDisabled}
-          secureTextEntry={secureTextEntry || type === 'password'}
-          accessible
-          accessibilityLabel={ariaLabel}
-          aria-label={ariaLabel}
-          aria-required={isRequired || inputProps.required}
-          aria-invalid={isInvalid || inputProps['aria-invalid']}
-          aria-disabled={isEffectivelyDisabled}
-          aria-selected={Platform.OS !== 'web' ? isFocused : undefined}
-          accessibilityElementsHidden={isEffectivelyDisabled}
-          readOnly={!editableProp}
-          onKeyPress={(e: TextInputKeyPressEvent) => {
-            e.persist();
-            onKeyPress?.(e);
-          }}
-          onFocus={(e: FocusEvent) => {
-            handleFocus(true, () => props?.onFocus?.(e));
-          }}
-          onBlur={(e: BlurEvent) => {
-            handleFocus(false, () => props?.onBlur?.(e));
-          }}
-          ref={mergedRef}
-        >
-          {children}
-        </BaseInputField>
-      );
-    },
-  );

package/src/input/createInputRoot.tsx

@@ -1,92 +0,0 @@
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
-import { useFocusRing } from '@react-native-aria/focus';
-import { useHover } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
-import { InputProvider } from './context';
-import type { IInputRootProps } from './types';
-
-// TODO: Does this need useControllableState?
-
-export const createInputRoot = <T,>(BaseInput: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        children,
-        isReadOnly,
-        isDisabled,
-        isInvalid,
-        isRequired,
-        isHovered: isHoveredProp,
-        isFocused: isFocusedProp,
-        isFocusVisible: isFocusVisibleProp,
-        ...props
-      }: IInputRootProps,
-      ref?: React.Ref<T>,
-    ) => {
-      const inputRef = React.useRef(null);
-      const inputFieldRef = React.useRef(null);
-
-      const [isFocused, setIsFocused] = React.useState(false);
-      const handleFocus = useCallback((focusState: boolean, callback: any) => {
-        setIsFocused(focusState);
-        callback();
-      }, []);
-
-      const inputProps = useFormControlContext();
-      const { isHovered } = useHover({}, inputRef);
-      const { isFocusVisible } = useFocusRing();
-
-      const resolvedDisabled = isDisabled || inputProps.isDisabled;
-      const resolvedInvalid = isInvalid || inputProps.isInvalid;
-      const resolvedReadOnly = isReadOnly || inputProps.isReadOnly;
-      const resolvedRequired = isRequired || inputProps.isRequired;
-      const resolvedHovered = isHoveredProp || isHovered;
-      const resolvedFocused = isFocusedProp || isFocused;
-      const resolvedFocusVisible = isFocusVisibleProp || isFocusVisible;
-
-      const contextValue = useMemo(
-        () => ({
-          isDisabled: resolvedDisabled,
-          isInvalid: resolvedInvalid,
-          isHovered: resolvedHovered,
-          isFocused: resolvedFocused,
-          isFocusVisible: resolvedFocusVisible,
-          isReadOnly: resolvedReadOnly,
-          isRequired: resolvedRequired,
-          inputRef,
-          handleFocus,
-          setIsFocused,
-          inputFieldRef,
-        }),
-        [
-          resolvedDisabled,
-          resolvedInvalid,
-          resolvedHovered,
-          resolvedFocused,
-          resolvedFocusVisible,
-          resolvedReadOnly,
-          resolvedRequired,
-          handleFocus,
-        ],
-      );
-
-      return (
-        <BaseInput
-          {...dataAttributes({
-            hover: resolvedHovered,
-            focus: resolvedFocused,
-            disabled: resolvedDisabled,
-            invalid: resolvedInvalid,
-            readonly: resolvedReadOnly,
-            required: resolvedRequired,
-            focusVisible: resolvedFocusVisible,
-          })}
-          {...(props as T)}
-          ref={mergeRefs(inputRef, ref as any)} // TODO: Somehow utils and primitives package are resolving to different versions of react (@types/react?)
-        >
-          <InputProvider value={contextValue}>{children}</InputProvider>
-        </BaseInput>
-      );
-    },
-  );

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>
-      );
-    },
-  );