@cdx-ui/primitives 0.0.1-beta.64 → 0.0.1-beta.66

package/src/field/createFieldLabel.tsx

@@ -1,33 +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,120 +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 reportLabelFocus = (focused: boolean) => {
-        const active = focused && !(isDisabled || inputProps.disabled);
-        field.setIsLabelFocused?.(active);
-      };
-
-      const handleFocus = (focusState: boolean, callback: any) => {
-        setIsFocused(focusState);
-        reportLabelFocus(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,89 +0,0 @@
-import React, { forwardRef, useMemo } 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 { LinkInteractionProvider } from './context';
-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,
-        isVisited: isVisitedProp,
-        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 hover = isHoveredProp || isHovered;
-      const visited = isVisitedProp ?? false;
-      const focusVisible = isFocusVisibleProp || isFocusVisible;
-
-      const interactionState = useMemo(
-        () => ({
-          hover,
-          visited,
-          focusVisible,
-        }),
-        [hover, visited, focusVisible],
-      );
-
-      const interactionAttrs = dataAttributes({
-        hover,
-        focus: isFocusedProp || isFocused,
-        active: isPressedProp || isPressed,
-        focusVisible,
-        visited,
-      });
-
-      return (
-        <LinkInteractionProvider value={interactionState}>
-          <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>
-        </LinkInteractionProvider>
-      );
-    },
-  );

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