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

package/src/dialog/createDialogClose.tsx

@@ -1,27 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { IDialogCloseProps } from './types';
-import { useDialog } from './context';
-
-export const createDialogClose = <T,>(BaseClose: React.ComponentType<T>) =>
-  forwardRef<unknown, IDialogCloseProps>(
-    ({ asChild = false, children, onPress, ...props }, ref) => {
-      const { onOpenChange } = useDialog();
-
-      const handlePress = (e?: any) => {
-        onPress?.(e);
-        onOpenChange(false);
-      };
-
-      if (asChild && React.isValidElement(children)) {
-        return React.cloneElement(children as React.ReactElement<any>, {
-          onPress: handlePress,
-        });
-      }
-
-      return (
-        <BaseClose ref={ref} {...(props as T)} onPress={handlePress}>
-          {children}
-        </BaseClose>
-      );
-    },
-  );

package/src/dialog/createDialogContent.tsx

@@ -1,122 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback } from 'react';
-import { Modal, Platform, StyleSheet, View } from 'react-native';
-import { FocusScope } from '@react-native-aria/focus';
-import { useEscapeKey } from '../overlay';
-import { createPortalFn } from '../utils/createPortal';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useDialog } from './context';
-import type { IDialogContentProps } from './types';
-
-export const createDialogContent = <ContentProps, OverlayProps>(
-  BaseContent: React.ComponentType<ContentProps>,
-  BaseOverlay: React.ComponentType<OverlayProps>,
-) =>
-  forwardRef(({ children, forceMount = false, ...props }: IDialogContentProps, ref?: any) => {
-    const { open, onOpenChange, closeOnBackdropPress, closeOnEscKey, nativeID, role } = useDialog();
-
-    const handleClose = useCallback(() => {
-      onOpenChange(false);
-    }, [onOpenChange]);
-
-    useEscapeKey(open && closeOnEscKey, handleClose);
-
-    if (!(open || forceMount)) {
-      return null;
-    }
-
-    const overlayProps = {
-      ...(closeOnBackdropPress ? { onPress: handleClose } : {}),
-      accessible: false,
-      importantForAccessibility: 'no-hide-descendants' as const,
-      ...dataAttributes({ slot: 'dialog-overlay' }),
-    };
-
-    const contentSlotAttrs = dataAttributes({
-      slot: 'dialog-content',
-      state: open ? 'open' : 'closed',
-    });
-
-    const ariaProps = {
-      role,
-      'aria-modal': true,
-      'aria-labelledby': `${nativeID}-title`,
-      'aria-describedby': `${nativeID}-description`,
-    };
-
-    if (Platform.OS === 'web' && createPortalFn) {
-      return createPortalFn(
-        <FocusScope contain={open} restoreFocus autoFocus={open}>
-          <View
-            style={{
-              position: 'fixed' as any,
-              inset: 0 as any,
-              zIndex: 50,
-              display: 'flex' as any,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <BaseOverlay {...(overlayProps as any)} />
-            <BaseContent
-              ref={ref}
-              {...contentSlotAttrs}
-              {...(props as ContentProps)}
-              {...ariaProps}
-            >
-              {children}
-            </BaseContent>
-          </View>
-        </FocusScope>,
-        document.body,
-      );
-    }
-
-    // Native layout uses two layers to support both backdrop dismiss and
-    // scrollable body content. The overlay Pressable fills the Modal via
-    // absolute positioning and handles backdrop taps. A second absolute-fill
-    // View with pointerEvents="box-none" centers the content panel — "box-none"
-    // lets taps outside the panel pass through to the overlay while allowing
-    // the panel and its children to receive touches normally.
-    //
-    // Critically, the content panel must NOT claim the JS touch responder
-    // (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
-    // blockNativeResponder, which suppresses the native UIScrollView /
-    // ScrollView pan gesture recognizer and breaks any ScrollView inside
-    // Dialog.Body.
-    //
-    // Static StyleSheet used here because these are structural layout concerns
-    // of the primitive's modal chrome — not themeable styles. They must remain
-    // stable regardless of the styled layer's className.
-    return (
-      <Modal visible={open} transparent statusBarTranslucent onRequestClose={handleClose}>
-        <FocusScope contain={open} restoreFocus autoFocus={open}>
-          <View style={styles.fill}>
-            <BaseOverlay {...(overlayProps as any)} />
-            <View style={styles.center} pointerEvents="box-none">
-              <BaseContent
-                ref={ref}
-                {...contentSlotAttrs}
-                {...(props as ContentProps)}
-                {...ariaProps}
-              >
-                {children}
-              </BaseContent>
-            </View>
-          </View>
-        </FocusScope>
-      </Modal>
-    );
-  });
-
-// Structural layout for the native Modal chrome. These are not themeable —
-// they position the overlay and centering layers that the primitive manages
-// internally. Matches the pattern in OverlayContainer.tsx.
-const styles = StyleSheet.create({
-  fill: { flex: 1 },
-  center: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/dialog/createDialogDescription.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useDialog } from './context';
-import type { IDialogDescriptionProps } from './types';
-
-export const createDialogDescription = <T,>(BaseDescription: React.ComponentType<T>) =>
-  forwardRef<unknown, IDialogDescriptionProps>(({ children, ...props }, ref) => {
-    const { nativeID } = useDialog();
-
-    return (
-      <BaseDescription
-        ref={ref}
-        nativeID={`${nativeID}-description`}
-        {...(props as T)}
-        {...dataAttributes({ slot: 'dialog-description' })}
-      >
-        {children}
-      </BaseDescription>
-    );
-  });

package/src/dialog/createDialogFooter.tsx

@@ -1,11 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { IDialogFooterProps } from './types';
-
-export const createDialogFooter = <T,>(BaseFooter: React.ComponentType<T>) =>
-  forwardRef<unknown, IDialogFooterProps>(({ children, ...props }, ref) => {
-    return (
-      <BaseFooter ref={ref} {...(props as T)}>
-        {children}
-      </BaseFooter>
-    );
-  });

package/src/dialog/createDialogHeader.tsx

@@ -1,11 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { IDialogHeaderProps } from './types';
-
-export const createDialogHeader = <T,>(BaseHeader: React.ComponentType<T>) =>
-  forwardRef<unknown, IDialogHeaderProps>(({ children, ...props }, ref) => {
-    return (
-      <BaseHeader ref={ref} {...(props as T)}>
-        {children}
-      </BaseHeader>
-    );
-  });

package/src/dialog/createDialogRoot.tsx

@@ -1,66 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useId, useMemo } from 'react';
-import { useControllableState } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import { DialogProvider } from './context';
-import type { IDialogRootProps } from './types';
-
-export const createDialogRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        open: openProp,
-        onOpenChange,
-        defaultOpen = false,
-        closeOnBackdropPress = true,
-        closeOnEscKey = true,
-        role = 'dialog',
-        children,
-        ...props
-      }: IDialogRootProps,
-      ref?: React.Ref<T>,
-    ) => {
-      const [open, setOpenState] = useControllableState<boolean>({
-        prop: openProp,
-        defaultProp: defaultOpen,
-        onChange: onOpenChange,
-      });
-
-      const setOpen = useCallback(
-        (newOpen: boolean) => {
-          setOpenState(newOpen);
-        },
-        [setOpenState],
-      );
-
-      const id = useId();
-      const nativeID = `dialog-${id}`;
-
-      const contextValue = useMemo(
-        () => ({
-          open: open ?? false,
-          onOpenChange: setOpen,
-          closeOnBackdropPress,
-          closeOnEscKey,
-          nativeID,
-          role,
-        }),
-        [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role],
-      );
-
-      return (
-        <DialogProvider value={contextValue}>
-          <BaseRoot
-            ref={ref}
-            {...(props as T)}
-            {...dataAttributes({
-              slot: 'dialog',
-              state: open ? 'open' : 'closed',
-            })}
-          >
-            {children}
-          </BaseRoot>
-        </DialogProvider>
-      );
-    },
-  );

package/src/dialog/createDialogTitle.tsx

@@ -1,11 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { IDialogTitleProps } from './types';
-
-export const createDialogTitle = <T,>(BaseTitle: React.ComponentType<T>) =>
-  forwardRef<unknown, IDialogTitleProps>(({ children, ...props }, ref) => {
-    return (
-      <BaseTitle ref={ref} {...(props as T)}>
-        {children}
-      </BaseTitle>
-    );
-  });

package/src/dialog/createDialogTrigger.tsx

@@ -1,27 +0,0 @@
-import React, { forwardRef } from 'react';
-import type { IDialogTriggerProps } from './types';
-import { useDialog } from './context';
-
-export const createDialogTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
-  forwardRef(
-    ({ asChild = false, children, onPress, ...props }: IDialogTriggerProps, ref?: React.Ref<T>) => {
-      const { onOpenChange } = useDialog();
-
-      const handlePress = (e?: any) => {
-        onPress?.(e);
-        onOpenChange(true);
-      };
-
-      if (asChild && React.isValidElement(children)) {
-        return React.cloneElement(children as React.ReactElement<any>, {
-          onPress: handlePress,
-        });
-      }
-
-      return (
-        <BaseTrigger ref={ref} {...(props as T)} onPress={handlePress}>
-          {children}
-        </BaseTrigger>
-      );
-    },
-  );

package/src/field/createFieldError.tsx

@@ -1,32 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-
-export const createFieldError = <T,>(BaseFormError: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
-    const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
-
-    const visible = Boolean(isInvalid && children);
-
-    React.useEffect(() => {
-      if (!visible) {
-        setHasFeedbackText?.(false);
-        return undefined;
-      }
-      setHasFeedbackText?.(true);
-      return () => {
-        setHasFeedbackText?.(false);
-      };
-    }, [setHasFeedbackText, visible]);
-
-    return visible ? (
-      <BaseFormError
-        ref={ref}
-        {...(props as T)}
-        id={feedbackId}
-        accessibilityRole="alert"
-        accessibilityLiveRegion="assertive"
-      >
-        {children}
-      </BaseFormError>
-    ) : null;
-  });

package/src/field/createFieldErrorIcon.tsx

@@ -1,9 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-export const createFieldErrorIcon = <T,>(BaseFormErrorIcon: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
-    <BaseFormErrorIcon ref={ref} {...(props as T)}>
-      {children}
-    </BaseFormErrorIcon>
-  ));

package/src/field/createFieldErrorText.tsx

@@ -1,9 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-export const createFieldErrorText = <T,>(BaseFormErrorText: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
-    <BaseFormErrorText ref={ref} {...(props as T)}>
-      {children}
-    </BaseFormErrorText>
-  ));

package/src/field/createFieldHelper.tsx

@@ -1,28 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-
-export const createFieldHelper = <T,>(BaseFormHelper: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
-    const { helpTextId, setHasHelpText, isInvalid } = useFormControlContext();
-
-    React.useEffect(() => {
-      if (isInvalid) {
-        setHasHelpText?.(false);
-        return undefined;
-      }
-      setHasHelpText?.(true);
-      return () => {
-        setHasHelpText?.(false);
-      };
-    }, [setHasHelpText, isInvalid]);
-
-    if (isInvalid) {
-      return null;
-    }
-
-    return (
-      <BaseFormHelper ref={ref} {...(props as T)} id={helpTextId}>
-        {children}
-      </BaseFormHelper>
-    );
-  });

package/src/field/createFieldHelperText.tsx

@@ -1,9 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-export const createFieldHelperText = <T,>(BaseFormHelperText: React.ComponentType<T>) =>
-  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
-    <BaseFormHelperText ref={ref} {...(props as T)}>
-      {children}
-    </BaseFormHelperText>
-  ));

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