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

package/src/progress-bar/ProgressBarRoot.tsx

@@ -0,0 +1,117 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes } from '../utils/dataAttributes';
+import { ProgressProvider } from './context';
+import type { InterfaceProgressProps, ProgressDataState } from './types';
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n));
+}
+
+function resolveState(
+  value: number | null,
+  max: number,
+  clamped: number | null,
+): ProgressDataState {
+  if (value === null) {
+    return 'indeterminate';
+  }
+  if (max <= 0) {
+    return 'complete';
+  }
+  if (clamped !== null && clamped >= max) {
+    return 'complete';
+  }
+  return 'loading';
+}
+
+function defaultGetValueLabel(value: number, max: number): string {
+  if (max <= 0) {
+    return '0%';
+  }
+  return `${String(Math.round((value / max) * 100))}%`;
+}
+
+export const ProgressBarRoot = forwardRef<View, InterfaceProgressProps & { asChild?: boolean }>(
+  (props, ref) => {
+    const {
+      asChild,
+      value: valueProp = 0,
+      max: maxProp = 100,
+      getValueLabel = defaultGetValueLabel,
+      children,
+      accessibilityRole = 'progressbar',
+      accessibilityValue: accessibilityValueProp,
+      role = 'progressbar',
+      ...restProps
+    } = props;
+
+    const max = maxProp > 0 ? maxProp : 0;
+    const isIndeterminate = valueProp === null;
+    const clampedValue =
+      valueProp === null ? null : clamp(Number.isFinite(valueProp) ? valueProp : 0, 0, max);
+
+    const percent = useMemo(() => {
+      if (clampedValue === null || max <= 0) {
+        return 0;
+      }
+      return (clampedValue / max) * 100;
+    }, [clampedValue, max]);
+
+    const state = useMemo(
+      () => resolveState(valueProp, max, clampedValue),
+      [valueProp, max, clampedValue],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        value: clampedValue,
+        max,
+        percent,
+        state,
+      }),
+      [clampedValue, max, percent, state],
+    );
+
+    const dataAttrs = dataAttributes({
+      state,
+      value: clampedValue === null ? undefined : String(clampedValue),
+      max: String(max),
+    });
+
+    const accessibilityValue = useMemo(() => {
+      if (accessibilityValueProp !== undefined) {
+        return accessibilityValueProp;
+      }
+      if (isIndeterminate || clampedValue === null) {
+        return { min: 0, max, text: 'Indeterminate' };
+      }
+      return {
+        min: 0,
+        max,
+        now: clampedValue,
+        text: getValueLabel(clampedValue, max),
+      };
+    }, [accessibilityValueProp, isIndeterminate, clampedValue, max, getValueLabel]);
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ProgressProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(restProps as ViewProps)}
+          role={role}
+          accessibilityRole={accessibilityRole}
+          accessibilityValue={accessibilityValue}
+          {...dataAttrs}
+        >
+          {children}
+        </Comp>
+      </ProgressProvider>
+    );
+  },
+);
+
+ProgressBarRoot.displayName = 'ProgressBarRoot';

package/src/progress-bar/index.ts

@@ -0,0 +1,5 @@
+export type { IProgressProps, ProgressDataState } from './types';
+export type { ProgressContextValue } from './context';
+export { useProgressContext } from './context';
+export { ProgressBarRoot } from './ProgressBarRoot';
+export { ProgressBarIndicator, type ProgressBarIndicatorProps } from './ProgressBarIndicator';

package/src/progress-bar/types.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type ProgressDataState = 'complete' | 'indeterminate' | 'loading';
+
+export interface InterfaceProgressProps extends Omit<ViewProps, 'children'> {
+  /**
+   * Current value in the range [0, max], or `null` for indeterminate progress.
+   * Omit or use a number for determinate progress; default is `0`.
+   */
+  readonly value?: number | null;
+  /**
+   * Maximum value (minimum is always 0).
+   * @default 100
+   */
+  readonly max?: number;
+  /**
+   * Optional label for `accessibilityValue.text` when determinate.
+   */
+  readonly getValueLabel?: (value: number, max: number) => string;
+  readonly children?: ReactNode;
+}
+
+export type IProgressProps = InterfaceProgressProps;

package/src/radio/RadioGroup.tsx

@@ -0,0 +1,85 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { useRadioGroup } from '@react-native-aria/radio';
+import { useRadioGroupState } from '@react-stately/radio';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioGroupContext } from './context';
+import type { IRadioGroupProps } from './types';
+
+export interface RadioGroupRootProps extends IRadioGroupProps {
+  asChild?: boolean;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    const formControlContext = useFormControlContext();
+
+    const combinedProps = {
+      ...formControlContext,
+      ...props,
+    };
+
+    const radioGroupState = useRadioGroupState({
+      ...combinedProps,
+      validationState: combinedProps.isInvalid ? 'invalid' : 'valid',
+    });
+
+    const { radioGroupProps } = useRadioGroup(
+      {
+        ...combinedProps,
+        'aria-label': combinedProps['aria-label'],
+      },
+      radioGroupState,
+    );
+
+    const isDisabled = combinedProps.isDisabled ?? false;
+    const isInvalid = combinedProps.isInvalid ?? false;
+    const isRequired = combinedProps.isRequired ?? false;
+    const isReadOnly = combinedProps.isReadOnly ?? false;
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          state: {
+            isDisabled,
+            isInvalid,
+            isRequired,
+            isReadOnly,
+            isSelected: (value: string) => radioGroupState.selectedValue === value,
+            selectValue: (value: string) => radioGroupState.setSelectedValue(value),
+          },
+          radioGroupState,
+          name: combinedProps.name,
+        }}
+      >
+        <Comp
+          {...radioGroupProps}
+          aria-label={combinedProps['aria-label']}
+          aria-labelledby={combinedProps['aria-labelledby']}
+          aria-required={isRequired || undefined}
+          aria-readonly={isReadOnly || undefined}
+          className={className}
+          style={style}
+          ref={ref}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isDisabled,
+              invalid: isInvalid,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/src/radio/RadioRoot.tsx

@@ -0,0 +1,98 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioProvider } from './context';
+import type { IRadioProps, IRadioContextValue } from './types';
+import { useRadioRoot } from './useRadioRoot';
+
+export interface RadioRootProps extends IRadioProps {
+  asChild?: boolean;
+}
+
+export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioRootProps>(
+  (
+    { asChild, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children, ...props },
+    ref,
+  ) => {
+    const {
+      isHovered: isHoveredProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+    } = 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,
+    });
+
+    const contextValue: IRadioContextValue = {
+      isChecked,
+      isDisabled: isDisabled || isDisabledProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed: isPressed || isPressedProp,
+      isFocused: isFocused || isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <RadioProvider value={contextValue}>
+        <Comp
+          disabled={isDisabled || isDisabledProp}
+          {...pressProps}
+          {...(combinedProps as PressableProps)}
+          {...inputProps}
+          ref={mergedRef}
+          role="radio"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              focusVisible: isFocusVisibleProp,
+            }),
+          )}
+          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)}
+        >
+          {children}
+        </Comp>
+      </RadioProvider>
+    );
+  },
+);
+
+RadioRoot.displayName = 'RadioRoot';

package/src/radio/RadioRoot.web.tsx

@@ -0,0 +1,90 @@
+import { forwardRef } from 'react';
+import { Pressable } from 'react-native';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { mergeProps } from '@react-aria/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioProvider } from './context';
+import type { IRadioProps, IRadioContextValue } from './types';
+import { useRadioRoot } from './useRadioRoot';
+
+// TODO: Keyboard focus is not working as expected
+
+export interface RadioRootProps extends IRadioProps {
+  asChild?: boolean;
+}
+
+export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    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();
+
+    const contextValue: IRadioContextValue = {
+      isChecked,
+      isDisabled: isDisabled || isDisabledProp,
+      isFocusVisible: isFocusVisible || isFocusVisibleProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed,
+      isFocused,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <RadioProvider value={contextValue}>
+        <Comp
+          {...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"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              focusVisible: isFocusVisible || isFocusVisibleProp,
+            }),
+          )}
+        >
+          <VisuallyHidden>
+            <input {...inputProps} ref={inputRef} />
+          </VisuallyHidden>
+          {children}
+        </Comp>
+      </RadioProvider>
+    );
+  },
+);
+
+RadioRoot.displayName = 'RadioRoot';

package/src/radio/context.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { RadioGroupState } from '@react-stately/radio';
+import type { IRadioContextValue } from './types';
+
+export const [RadioProvider, useRadioContext] = createContext<IRadioContextValue>('RadioContext');
+
+export interface IRadioGroupState {
+  isReadOnly: boolean;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isRequired: boolean;
+  isSelected: (value: string) => boolean;
+  selectValue: (value: string) => void;
+}
+
+export const RadioGroupContext = React.createContext<{
+  state: IRadioGroupState;
+  radioGroupState: RadioGroupState;
+  name?: string;
+} | null>(null);

package/src/radio/index.ts

@@ -0,0 +1,5 @@
+export type { IRadioProps, IRadioGroupProps, IRadioContextValue } from './types';
+
+export { useRadioContext } from './context';
+export { RadioRoot, type RadioRootProps } from './RadioRoot';
+export { RadioGroup, type RadioGroupRootProps } from './RadioGroup';

package/src/radio/types.ts

@@ -0,0 +1,45 @@
+import type { PressableProps } from 'react-native';
+
+export interface IRadioProps extends PressableProps {
+  /** Required — identifies this item's value within a Radio.Group. */
+  value: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  isPressed?: boolean;
+  isFocusVisible?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface IRadioGroupProps {
+  /** Controlled selected value. */
+  value?: string;
+  /** Default selected value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called when the selected value changes. */
+  onChange?: (value: string) => void;
+  /** Layout direction of the radio items. */
+  direction?: 'column' | 'row';
+  /** Form field name for web form integration. */
+  name?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  children?: React.ReactNode;
+}
+
+export interface IRadioContextValue {
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  isHovered?: boolean;
+  isPressed?: boolean;
+}

package/src/radio/useRadioRoot.ts

@@ -0,0 +1,69 @@
+import { useContext, useRef } from 'react';
+import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import { useRadio } from '@react-native-aria/radio';
+import { useHover } from '@react-native-aria/interactions';
+import { RadioGroupContext } from './context';
+import type { IRadioProps } from './types';
+
+interface UseRadioRootOptions {
+  useInputRefForAria?: boolean;
+}
+
+export function useRadioRoot(
+  props: IRadioProps,
+  ref?: React.Ref<unknown>,
+  { useInputRefForAria = false }: UseRadioRootOptions = {},
+) {
+  const formControlContext = useFormControlContext();
+
+  const { isInvalid, isReadOnly, ...combinedProps } = {
+    ...formControlContext,
+    ...props,
+  };
+
+  const radioGroupContext = useContext(RadioGroupContext);
+
+  if (!radioGroupContext) {
+    throw new Error(
+      'Radio must be rendered inside a Radio.Group. Standalone Radio is not supported.',
+    );
+  }
+
+  const rootRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const mergedRootRef = mergeRefs(ref as any, rootRef as any);
+  const ariaLabel = combinedProps['aria-label'] || combinedProps.value || 'Radio';
+
+  const radio = useRadio(
+    {
+      ...combinedProps,
+      'aria-label': ariaLabel,
+      isReadOnly: isReadOnly || radioGroupContext.state.isReadOnly,
+      isDisabled: combinedProps.isDisabled || radioGroupContext.state.isDisabled,
+    } as any,
+    radioGroupContext.radioGroupState,
+    (useInputRefForAria ? inputRef : rootRef) as any,
+  );
+
+  const { inputProps, labelProps } = radio as typeof radio & {
+    labelProps?: Record<string, unknown>;
+  };
+
+  const { checked: isChecked, disabled: isDisabled } = inputProps;
+
+  const { hoverProps, isHovered } = useHover({}, rootRef);
+
+  return {
+    combinedProps,
+    isInvalid: isInvalid || radioGroupContext.state.isInvalid,
+    isReadOnly: isReadOnly || radioGroupContext.state.isReadOnly,
+    inputProps,
+    labelProps: labelProps ?? {},
+    isChecked,
+    isDisabled,
+    isHovered,
+    hoverProps,
+    mergedRef: mergedRootRef,
+    inputRef,
+  };
+}

package/src/select/SelectContent.tsx

@@ -0,0 +1,120 @@
+import React, { forwardRef, useCallback, useRef, type ComponentRef } from 'react';
+import { Platform, ScrollView, View } 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 { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useSelectContext } from './context';
+import type { ISelectContentProps } from './types';
+import { useContentFocus } from './useContentFocus';
+import { useListboxNavigation } from './useListboxNavigation';
+
+export interface SelectContentProps extends ISelectContentProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContentProps>(
+  ({ asChild, children, enteringAnimation, exitingAnimation, ...props }, ref) => {
+    const {
+      open,
+      setOpen,
+      contentId,
+      triggerId,
+      activeValue,
+      setActiveValue,
+      value,
+      onValueChange,
+      native,
+      triggerRef,
+      items,
+    } = useSelectContext();
+
+    const contentRef = useRef<HTMLElement | null>(null);
+
+    const focusOnMount = useCallback((node: unknown) => {
+      contentRef.current = node as HTMLElement | null;
+      if (node && Platform.OS === 'web') {
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            (node as HTMLElement).focus?.();
+          }, 100);
+        });
+      }
+    }, []);
+
+    const mergedRef = mergeRefs(ref, focusOnMount as unknown as React.Ref<View>);
+
+    const dismiss = useCallback(() => setOpen(false), [setOpen]);
+
+    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 { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown,
+              handleKeyDown,
+            ),
+            tabIndex: -1,
+          }
+        : {};
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <OverlayContainer
+        onDismiss={dismiss}
+        entering={enteringAnimation ?? FadeIn.duration(150)}
+        exiting={exitingAnimation ?? FadeOut.duration(100)}
+        style={position.style}
+      >
+        <Comp
+          ref={mergedRef}
+          role="listbox"
+          id={contentId}
+          aria-labelledby={triggerId}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ state: 'open' }))}
+          {...webProps}
+        >
+          <ScrollView scrollEventThrottle={16}>{children}</ScrollView>
+        </Comp>
+      </OverlayContainer>
+    );
+  },
+);
+
+SelectContent.displayName = 'SelectContent';