@cdx-ui/primitives 0.0.1-beta.14 → 0.0.1-beta.140

package/src/radio/createRadioLabel.tsx

@@ -1,28 +0,0 @@
-import { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useRadioContext } from './context';
-import type { IRadioLabelProps } from './types';
-
-export const createRadioLabel = <T,>(BaseRadioLabel: React.ComponentType<T>) =>
-  forwardRef<unknown, IRadioLabelProps & { className?: string }>(
-    ({ children, className, ...props }, ref) => {
-      const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly } = useRadioContext();
-
-      return (
-        <BaseRadioLabel
-          className={className}
-          {...dataAttributes({
-            hover: isHovered,
-            checked: isChecked,
-            disabled: isDisabled,
-            invalid: isInvalid,
-            readonly: isReadOnly,
-          })}
-          {...(props as T)}
-          ref={ref}
-        >
-          {children}
-        </BaseRadioLabel>
-      );
-    },
-  );

package/src/radio/createRadioRoot.tsx

@@ -1,100 +0,0 @@
-import { forwardRef } from 'react';
-import { composeEventHandlers } from '@cdx-ui/utils';
-import { useFocus } from '@react-native-aria/focus';
-import { usePress } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
-import { RadioProvider } from './context';
-import type { IRadioProps } from './types';
-import { useRadioRoot } from './useRadioRoot';
-
-export const createRadioRoot = <T,>(
-  BaseRadio: React.ComponentType<T>,
-  RadioIndicator: React.ComponentType<any>,
-) =>
-  forwardRef(
-    (
-      {
-        onPressIn,
-        onPressOut,
-        onHoverIn,
-        onHoverOut,
-        onFocus,
-        onBlur,
-        children,
-        ...props
-      }: IRadioProps,
-      ref?: React.Ref<T>,
-    ) => {
-      const {
-        isHovered: isHoveredProp,
-        isDisabled: isDisabledProp,
-        isInvalid: isInvalidProp,
-        isReadOnly: isReadOnlyProp,
-        isPressed: isPressedProp,
-        isFocused: isFocusedProp,
-        isFocusVisible,
-      } = props;
-
-      const {
-        combinedProps,
-        isInvalid,
-        isReadOnly,
-        inputProps,
-        isChecked,
-        isDisabled,
-        isHovered,
-        hoverProps,
-        mergedRef,
-      } = useRadioRoot(props, ref);
-
-      const { focusProps, isFocused } = useFocus();
-
-      const { pressProps, isPressed } = usePress({
-        isDisabled: isDisabled || isDisabledProp,
-      });
-
-      return (
-        <BaseRadio
-          disabled={isDisabled || isDisabledProp}
-          {...pressProps}
-          {...(combinedProps as T)}
-          {...inputProps}
-          ref={mergedRef}
-          role="radio"
-          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
-          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
-          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
-          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
-          onFocus={composeEventHandlers(onFocus, focusProps.onFocus)}
-          onBlur={composeEventHandlers(onBlur, focusProps.onBlur)}
-          {...dataAttributes({
-            slot: 'radio',
-            checked: isChecked,
-            disabled: isDisabled || isDisabledProp,
-            hover: isHovered || isHoveredProp,
-            invalid: isInvalid || isInvalidProp,
-            readonly: isReadOnly || isReadOnlyProp,
-            active: isPressed,
-            focus: isFocused,
-            focusVisible: isFocusVisible,
-          })}
-        >
-          <RadioProvider
-            value={{
-              isChecked,
-              isDisabled: isDisabled || isDisabledProp,
-              isHovered: isHovered || isHoveredProp,
-              isInvalid: isInvalid || isInvalidProp,
-              isReadOnly: isReadOnly || isReadOnlyProp,
-              isPressed: isPressed || isPressedProp,
-              isFocused: isFocused || isFocusedProp,
-              isFocusVisible,
-            }}
-          >
-            <RadioIndicator />
-            {children}
-          </RadioProvider>
-        </BaseRadio>
-      );
-    },
-  );

package/src/radio/createRadioRoot.web.tsx

@@ -1,81 +0,0 @@
-import { forwardRef } from 'react';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { mergeProps } from '@react-aria/utils';
-import { useFocusRing } from '@react-native-aria/focus';
-import { dataAttributes } from '../utils/dataAttributes';
-import { RadioProvider } from './context';
-import type { IRadioProps } from './types';
-import { useRadioRoot } from './useRadioRoot';
-
-// TODO: Keyboard focus is not working as expected
-
-export const createRadioRoot = <T,>(
-  BaseRadio: React.ComponentType<T>,
-  RadioIndicator: React.ComponentType<any>,
-) =>
-  forwardRef(({ children, ...props }: IRadioProps, ref?: React.Ref<T>) => {
-    const {
-      isHovered: isHoveredProp,
-      isFocusVisible: isFocusVisibleProp,
-      isDisabled: isDisabledProp,
-      isInvalid: isInvalidProp,
-      isReadOnly: isReadOnlyProp,
-      isFocused,
-      isPressed,
-    } = props;
-
-    const {
-      combinedProps,
-      isInvalid,
-      isReadOnly,
-      inputProps,
-      labelProps,
-      isChecked,
-      isDisabled,
-      isHovered,
-      mergedRef,
-      inputRef,
-    } = useRadioRoot(props, ref, { useInputRefForAria: true });
-
-    const { focusProps, isFocusVisible } = useFocusRing();
-
-    return (
-      <BaseRadio
-        {...mergeProps(combinedProps as any, labelProps as any, focusProps as any)}
-        ref={mergedRef}
-        role="label"
-        // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
-        accessibilityRole="label"
-        {...dataAttributes({
-          slot: 'radio',
-          checked: isChecked,
-          disabled: isDisabled || isDisabledProp,
-          hover: isHovered || isHoveredProp,
-          invalid: isInvalid || isInvalidProp,
-          readonly: isReadOnly || isReadOnlyProp,
-          active: isPressed,
-          focus: isFocused,
-          focusVisible: isFocusVisible || isFocusVisibleProp,
-        })}
-      >
-        <RadioProvider
-          value={{
-            isChecked,
-            isDisabled: isDisabled || isDisabledProp,
-            isFocusVisible: isFocusVisible || isFocusVisibleProp,
-            isHovered: isHovered || isHoveredProp,
-            isInvalid: isInvalid || isInvalidProp,
-            isReadOnly: isReadOnly || isReadOnlyProp,
-            isPressed,
-            isFocused,
-          }}
-        >
-          <VisuallyHidden>
-            <input {...inputProps} ref={inputRef} />
-          </VisuallyHidden>
-          <RadioIndicator />
-          {children}
-        </RadioProvider>
-      </BaseRadio>
-    );
-  });

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

package/src/select/createSelectItemLabel.tsx

@@ -1,30 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useSelectItemContext } from './context';
-import type { ISelectItemLabelProps } from './types';
-
-export const createSelectItemLabel = <T,>(BaseItemLabel: React.ComponentType<T>) =>
-  forwardRef(({ children, ...props }: ISelectItemLabelProps, ref?: any) => {
-    const { hover, focus, active, disabled, focusVisible, highlighted, checked } =
-      useSelectItemContext();
-
-    return (
-      <BaseItemLabel
-        ref={ref}
-        {...(props as T)}
-        {...dataAttributes({
-          hover,
-          focus,
-          active,
-          disabled,
-          focusVisible,
-          highlighted,
-          state: checked ? 'checked' : 'unchecked',
-          slot: 'select-item-label',
-        })}
-      >
-        {children}
-      </BaseItemLabel>
-    );
-  });

package/src/select/createSelectRoot.tsx

@@ -1,134 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useId, useMemo, useRef, useState } from 'react';
-import { useControllableState, useFormControl } from '@cdx-ui/utils';
-import { dataAttributes } from '../utils/dataAttributes';
-import { SelectProvider } from './context';
-import type { ISelectProps } from './types';
-
-export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
-  forwardRef(
-    (
-      {
-        children,
-        items,
-        value: valueProp,
-        defaultValue,
-        onValueChange,
-        open: openProp,
-        defaultOpen = false,
-        onOpenChange,
-        disabled = false,
-        isRequired,
-        isInvalid,
-        isReadOnly,
-        native = false,
-        accessibilityLabel,
-        ...props
-      }: ISelectProps,
-      ref?: any,
-    ) => {
-      const formControlProps = useFormControl({
-        isDisabled: disabled,
-        isRequired,
-        isInvalid,
-        isReadOnly,
-      });
-
-      const isEffectivelyDisabled = !!formControlProps.disabled;
-      const isEffectivelyRequired = !!formControlProps.required;
-      const isEffectivelyInvalid = !!formControlProps['aria-invalid'];
-      const isEffectivelyReadOnly = !!formControlProps.readOnly;
-
-      const [value, setValue] = useControllableState<string | undefined>({
-        prop: valueProp,
-        defaultProp: defaultValue,
-        onChange: (newValue) => {
-          if (newValue !== undefined) {
-            onValueChange?.(newValue);
-          }
-        },
-      });
-
-      const [open, setOpenState] = useControllableState<boolean>({
-        prop: openProp,
-        defaultProp: defaultOpen,
-        onChange: onOpenChange,
-      });
-
-      const setOpen = useCallback(
-        (newOpen: boolean) => {
-          if ((isEffectivelyDisabled || isEffectivelyReadOnly) && newOpen) {
-            return;
-          }
-          setOpenState(newOpen);
-        },
-        [isEffectivelyDisabled, isEffectivelyReadOnly, setOpenState],
-      );
-
-      const [activeValue, setActiveValue] = useState<string | undefined>(undefined);
-
-      const triggerRef = useRef<any>(null);
-      const reactId = useId();
-      /** Align with `useFormControl` default id (`${field.id}-input`) when inside `Form.Field`. */
-      const triggerId = formControlProps.id ?? `select-trigger-${reactId}`;
-      const contentId = `select-content-${reactId}`;
-      const ariaDescribedBy = formControlProps['aria-describedby'];
-
-      const contextValue = useMemo(
-        () => ({
-          open: open ?? false,
-          items,
-          setOpen,
-          value,
-          onValueChange: setValue,
-          disabled: isEffectivelyDisabled,
-          required: isEffectivelyRequired,
-          invalid: isEffectivelyInvalid,
-          readOnly: isEffectivelyReadOnly,
-          native,
-          triggerRef,
-          contentId,
-          triggerId,
-          activeValue,
-          setActiveValue,
-          accessibilityLabel,
-          ariaDescribedBy,
-        }),
-        [
-          open,
-          items,
-          setOpen,
-          value,
-          setValue,
-          isEffectivelyDisabled,
-          isEffectivelyRequired,
-          isEffectivelyInvalid,
-          isEffectivelyReadOnly,
-          native,
-          contentId,
-          triggerId,
-          activeValue,
-          accessibilityLabel,
-          ariaDescribedBy,
-        ],
-      );
-
-      return (
-        <SelectProvider value={contextValue}>
-          <BaseRoot
-            ref={ref}
-            {...(props as T)}
-            {...dataAttributes({
-              slot: 'select',
-              disabled: isEffectivelyDisabled,
-              required: isEffectivelyRequired,
-              invalid: isEffectivelyInvalid,
-              readonly: isEffectivelyReadOnly,
-            })}
-          >
-            {children}
-          </BaseRoot>
-        </SelectProvider>
-      );
-    },
-  );