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

package/src/range-calendar/RangeCalendarRoot.tsx

@@ -0,0 +1,213 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  normalizeDateRange,
+  resolveDateComponentLabels,
+  todayMonthId,
+  toMonthId,
+  type DateComponentLabels,
+  type DateId,
+  type MonthId,
+} from '@cdx-ui/formatters';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { accessibleLabelAttributes, resolveAccessibleLabel } from '../utils/accessibleLabel';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import type { CalendarView } from '../calendar/context';
+import { RangeCalendarContext, type RangeCalendarFocus } from './context';
+
+export interface RangeCalendarRootProps extends Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+  className?: string;
+  startValue?: DateId;
+  endValue?: DateId;
+  defaultStartValue?: DateId;
+  defaultEndValue?: DateId;
+  onRangeChange?: (range: { startId?: DateId; endId?: DateId }) => void;
+  monthId?: MonthId;
+  defaultMonthId?: MonthId;
+  onMonthIdChange?: (monthId: MonthId) => void;
+  focusedField?: RangeCalendarFocus;
+  defaultFocusedField?: RangeCalendarFocus;
+  onFocusedFieldChange?: (field: RangeCalendarFocus) => void;
+  /** Earliest selectable date. Build with `dateId(...)` from `@cdx-ui/formatters`. */
+  minValue?: DateId;
+  /** Latest selectable date. Build with `dateId(...)` from `@cdx-ui/formatters`. */
+  maxValue?: DateId;
+  disabled?: boolean;
+  locale?: string;
+  labels?: Partial<DateComponentLabels>;
+  /** Accessible name for the range-calendar region. */
+  accessibilityLabel?: string;
+}
+
+export const RangeCalendarRoot = forwardRef<ComponentRef<typeof View>, RangeCalendarRootProps>(
+  (props, ref) => {
+    const {
+      asChild,
+      children,
+      startValue: startProp,
+      endValue: endProp,
+      defaultStartValue,
+      defaultEndValue,
+      onRangeChange,
+      monthId: monthIdProp,
+      defaultMonthId,
+      onMonthIdChange,
+      focusedField: focusedProp,
+      defaultFocusedField = 'start',
+      onFocusedFieldChange,
+      minValue,
+      maxValue,
+      disabled = false,
+      locale = 'en-US',
+      labels: labelsProp,
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+      ...rest
+    } = props;
+
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+    const accessibilityLabel = resolveAccessibleLabel({
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+    });
+
+    const isRangeControlled = 'startValue' in props || 'endValue' in props;
+    const [uncontrolledStart, setUncontrolledStart] = useState<DateId | undefined>(
+      defaultStartValue,
+    );
+    const [uncontrolledEnd, setUncontrolledEnd] = useState<DateId | undefined>(defaultEndValue);
+
+    const startId = isRangeControlled ? startProp : uncontrolledStart;
+    const endId = isRangeControlled ? endProp : uncontrolledEnd;
+
+    const [monthId, setMonthId] = useControllableState<MonthId>({
+      prop: monthIdProp,
+      defaultProp:
+        defaultMonthId ??
+        (startId ? toMonthId(startId) : endId ? toMonthId(endId) : todayMonthId()),
+      onChange: onMonthIdChange,
+    });
+
+    const prevRangeRef = useRef({ startId, endId });
+    useEffect(() => {
+      if (monthIdProp !== undefined) {
+        prevRangeRef.current = { startId, endId };
+        return;
+      }
+      if (prevRangeRef.current.startId === startId && prevRangeRef.current.endId === endId) {
+        return;
+      }
+      prevRangeRef.current = { startId, endId };
+      const anchor = startId ?? endId;
+      if (anchor !== undefined) {
+        setMonthId(toMonthId(anchor));
+      }
+    }, [endId, monthIdProp, setMonthId, startId]);
+
+    const [focusedField, setFocusedField] = useControllableState<RangeCalendarFocus>({
+      prop: focusedProp,
+      defaultProp: defaultFocusedField,
+      onChange: onFocusedFieldChange,
+    });
+
+    const [view, setViewState] = useState<CalendarView>('month');
+
+    const setView = useCallback((next: CalendarView) => {
+      setViewState(next);
+    }, []);
+
+    const onDayPress = useCallback(
+      (dateId: DateId) => {
+        if (disabled) {
+          return;
+        }
+
+        let next: { startId: DateId; endId?: DateId };
+
+        // Empty or complete range → start a new selection at this day.
+        if (!startId || endId) {
+          next = { startId: dateId, endId: undefined };
+          setFocusedField('end');
+        } else {
+          // Incomplete range (start only) → set end and normalize order.
+          next = normalizeDateRange({ startId, endId: dateId });
+          setFocusedField('start');
+        }
+
+        if (!isRangeControlled) {
+          setUncontrolledStart(next.startId);
+          setUncontrolledEnd(next.endId);
+        }
+        onRangeChange?.(next);
+      },
+      [disabled, endId, isRangeControlled, onRangeChange, setFocusedField, startId],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        startId,
+        endId,
+        onRangeChange,
+        monthId: monthId ?? todayMonthId(),
+        onMonthIdChange: setMonthId,
+        focusedField: focusedField ?? 'start',
+        onFocusedFieldChange: setFocusedField,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        onDayPress,
+        view,
+        setView,
+      }),
+      [
+        startId,
+        endId,
+        onRangeChange,
+        monthId,
+        setMonthId,
+        focusedField,
+        setFocusedField,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        onDayPress,
+        view,
+        setView,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <RangeCalendarContext.Provider value={contextValue}>
+        <Comp
+          ref={ref}
+          accessibilityRole="none"
+          {...rest}
+          {...mergeDataAttributes(rest, dataAttributes({ disabled }))}
+          {...accessibleLabelAttributes(accessibilityLabel)}
+        >
+          {children}
+        </Comp>
+      </RangeCalendarContext.Provider>
+    );
+  },
+);
+
+RangeCalendarRoot.displayName = 'RangeCalendarRoot';

package/src/range-calendar/context.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react';
+import type { DateComponentLabels, DateId, MonthId } from '@cdx-ui/formatters';
+import type { CalendarView } from '../calendar/context';
+
+export type RangeCalendarFocus = 'start' | 'end';
+
+export interface RangeCalendarContextValue {
+  startId?: DateId;
+  endId?: DateId;
+  onRangeChange?: (range: { startId?: DateId; endId?: DateId }) => void;
+  monthId: MonthId;
+  onMonthIdChange: (monthId: MonthId) => void;
+  focusedField: RangeCalendarFocus;
+  onFocusedFieldChange: (field: RangeCalendarFocus) => void;
+  minValue?: DateId;
+  maxValue?: DateId;
+  disabled: boolean;
+  locale: string;
+  labels: DateComponentLabels;
+  onDayPress: (dateId: DateId) => void;
+  view: CalendarView;
+  setView: (view: CalendarView) => void;
+}
+
+export const RangeCalendarContext = createContext<RangeCalendarContextValue | null>(null);
+
+export function useRangeCalendarContext(): RangeCalendarContextValue {
+  const ctx = useContext(RangeCalendarContext);
+  if (!ctx) {
+    throw new Error('RangeCalendar compound components must be used within RangeCalendarRoot');
+  }
+  return ctx;
+}

package/src/range-calendar/index.ts

@@ -0,0 +1,4 @@
+export { RangeCalendarRoot } from './RangeCalendarRoot';
+export type { RangeCalendarRootProps } from './RangeCalendarRoot';
+export { useRangeCalendarContext } from './context';
+export type { RangeCalendarFocus } from './context';

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

package/src/select/SelectItem.tsx

@@ -0,0 +1,139 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef, type ReactNode } from 'react';
+import { Pressable } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { SelectItemProvider, useSelectContext } from './context';
+import type { ISelectItemProps } from './types';
+
+export interface SelectItemProps extends Omit<ISelectItemProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemProps>(
+  (
+    {
+      asChild,
+      children,
+      value: itemValue,
+      disabled: disabledProp = false,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      ...props
+    },
+    ref,
+  ) => {
+    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 } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: {
+        onFocus?: (...args: unknown[]) => unknown;
+        onBlur?: (...args: unknown[]) => unknown;
+      };
+    };
+    const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+    const { isFocused, focusProps } = useFocus();
+    const { isHovered, hoverProps } = 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,
+      ],
+    );
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <SelectItemProvider value={interactionState}>
+        <Comp
+          ref={ref}
+          role="option"
+          id={`${contentId}-option-${itemValue}`}
+          aria-selected={checked}
+          aria-disabled={disabled}
+          disabled={disabled}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover: interactionState.hover,
+              focus: interactionState.focus,
+              active: interactionState.active,
+              disabled: interactionState.disabled,
+              focusVisible: interactionState.focusVisible,
+              highlighted: interactionState.highlighted,
+              state: checked ? 'checked' : 'unchecked',
+            }),
+          )}
+          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}
+        </Comp>
+      </SelectItemProvider>
+    );
+  },
+);
+
+SelectItem.displayName = 'SelectItem';

package/src/select/SelectRoot.tsx

@@ -0,0 +1,154 @@
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState, useFormControl } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { SelectProvider } from './context';
+import type { ISelectProps } from './types';
+
+export interface SelectRootProps extends ISelectProps, Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>(
+  (
+    {
+      asChild,
+      children,
+      items,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      isOpen: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      isRequired,
+      isInvalid,
+      isReadOnly,
+      native = false,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    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<ComponentRef<typeof View> | null>(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,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <SelectProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isEffectivelyDisabled,
+              required: isEffectivelyRequired,
+              invalid: isEffectivelyInvalid,
+              readonly: isEffectivelyReadOnly,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </SelectProvider>
+    );
+  },
+);
+
+SelectRoot.displayName = 'SelectRoot';