@cdx-ui/primitives 0.3.5 → 0.3.7

package/src/progress-bar/ProgressBarIndicator.tsx

@@ -1,20 +1,91 @@
-import { forwardRef, useMemo } from 'react';
-import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { forwardRef, useEffect, useMemo } from 'react';
+import {
+  I18nManager,
+  View,
+  type LayoutChangeEvent,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { composeEventHandlers } from '@cdx-ui/utils';
 import { Slot } from '../slot';
 import { dataAttributes } from '../utils/dataAttributes';
 import { useProgressContext } from './context';
 
 type PercentString = `${number}%`;
 
+/**
+ * HeroUI indeterminate fill: a 2/5 segment translates from -100% to 350% of its
+ * own width over 1.5s (`progress-bar.css`). It enters off the start edge and
+ * exits off the end edge; the ease holds the slow parts of that travel off-screen.
+ */
+const INDETERMINATE_WIDTH = '40%';
+const INDETERMINATE_DURATION_MS = 1500;
+const INDETERMINATE_FROM = -1;
+const INDETERMINATE_TO = 3.5;
+
 export interface ProgressBarIndicatorProps extends ViewProps {
   readonly asChild?: boolean;
 }
 
 export const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
-  ({ asChild, style, ...rest }, ref) => {
+  ({ asChild, style, onLayout, ...rest }, ref) => {
     const { percent, state, max, value } = useProgressContext();
+    const isIndeterminate = state === 'indeterminate';
+    const reducedMotion = useReducedMotion();
+    const travel = useSharedValue(0);
+    const segmentWidth = useSharedValue(0);
+    const direction = I18nManager.isRTL ? -1 : 1;
+
+    useEffect(() => {
+      if (!isIndeterminate) {
+        travel.set(0);
+        return;
+      }
+      if (reducedMotion) {
+        travel.set(0);
+        return;
+      }
+      travel.set(0);
+      travel.set(
+        withRepeat(
+          withTiming(1, {
+            duration: INDETERMINATE_DURATION_MS,
+            easing: Easing.bezier(0.65, 0, 0.35, 1),
+          }),
+          -1,
+          false,
+        ),
+      );
+    }, [isIndeterminate, reducedMotion, travel]);
+
+    const handleLayout = (event: LayoutChangeEvent) => {
+      if (!isIndeterminate) return;
+      const next = event.nativeEvent.layout.width;
+      if (segmentWidth.get() !== next) {
+        segmentWidth.set(next);
+      }
+    };
+
+    const indeterminateStyle = useAnimatedStyle(() => {
+      const width = segmentWidth.get();
+      const span = INDETERMINATE_TO - INDETERMINATE_FROM;
+      const offset = reducedMotion ? 0 : width * (INDETERMINATE_FROM + travel.get() * span);
+      return {
+        width: INDETERMINATE_WIDTH,
+        height: '100%',
+        transform: [{ translateX: direction * offset }],
+      };
+    }, [segmentWidth, travel, direction, reducedMotion]);
 
-    const filledStyle = useMemo((): ViewStyle => {
+    const determinateStyle = useMemo((): ViewStyle => {
       const pct = `${String(percent)}%` as PercentString;
       return { width: pct, height: '100%' };
     }, [percent]);
@@ -25,9 +96,17 @@ export const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
       max: String(max),
     });
 
-    const Comp = asChild ? Slot : View;
+    const Comp = asChild ? Slot : Animated.View;
 
-    return <Comp ref={ref} {...rest} {...dataAttrs} style={[filledStyle, style]} />;
+    return (
+      <Comp
+        ref={ref}
+        {...rest}
+        {...dataAttrs}
+        onLayout={composeEventHandlers(onLayout, handleLayout)}
+        style={[isIndeterminate ? indeterminateStyle : determinateStyle, style]}
+      />
+    );
   },
 );
 

package/src/select/SelectEmpty.tsx

@@ -1,12 +1,6 @@
-import {
-  Children,
-  forwardRef,
-  isValidElement,
-  useLayoutEffect,
-  type ComponentRef,
-  type ReactNode,
-} from 'react';
+import { forwardRef, useLayoutEffect, type ComponentRef } from 'react';
 import { View } from 'react-native';
+import { getTextContent } from '@cdx-ui/utils';
 import { Slot } from '../slot';
 import { useSelectContext } from './context';
 import type { ISelectEmptyProps } from './types';
@@ -16,20 +10,6 @@ export interface SelectEmptyProps extends ISelectEmptyProps {
   className?: string;
 }
 
-function getTextContent(node: ReactNode): string {
-  return Children.toArray(node)
-    .map((child) => {
-      if (typeof child === 'string' || typeof child === 'number') {
-        return String(child);
-      }
-      if (isValidElement<{ children?: ReactNode }>(child)) {
-        return getTextContent(child.props.children);
-      }
-      return '';
-    })
-    .join('');
-}
-
 /**
  * Renders only when no option matches. Its text is also what the search live region
  * announces in that case.

package/src/slider/useSliderPointer.ts

@@ -63,6 +63,11 @@ export function useWebSliderDrag({
   const lastRatioRef = useRef(0);
   const dragContextRef = useRef<WebDragContext | null>(null);
   const cleanupRef = useRef<(() => void) | null>(null);
+  // Window listeners outlive their render; stale setters would compare against the drag-start value.
+  const setValueFromRatioRef = useRef(setValueFromRatio);
+  const setIsDraggingRef = useRef(setIsDragging);
+  setValueFromRatioRef.current = setValueFromRatio;
+  setIsDraggingRef.current = setIsDragging;
 
   useEffect(() => {
     return () => {
@@ -77,9 +82,9 @@ export function useWebSliderDrag({
     }
     draggingRef.current = false;
     dragContextRef.current = null;
-    setValueFromRatio(lastRatioRef.current, true);
-    setIsDragging(false);
-  }, [setIsDragging, setValueFromRatio]);
+    setValueFromRatioRef.current(lastRatioRef.current, true);
+    setIsDraggingRef.current(false);
+  }, []);
 
   const startDrag = useCallback(
     (
@@ -132,7 +137,7 @@ export function useWebSliderDrag({
           1,
         );
         lastRatioRef.current = nextRatio;
-        setValueFromRatio(nextRatio);
+        setValueFromRatioRef.current(nextRatio);
       };
 
       const onUp = () => {

package/src/stepper/StepperRoot.tsx

@@ -0,0 +1,148 @@
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useMemo,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { Platform, View } from 'react-native';
+import { flattenChildren, useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { StepperIndexProvider, StepperProvider } from './context';
+import type { IStepperProps, StepperStepState } from './types';
+
+export interface StepperRootProps extends IStepperProps {
+  readonly className?: string;
+}
+
+function toAnnouncedPercent(progress: number): number {
+  return Math.min(99, Math.max(1, Math.round(progress)));
+}
+
+function defaultGetStepAccessibilityText({
+  isCurrent,
+  isComplete,
+  hasProgress,
+  progress,
+}: StepperStepState): string {
+  const parts: string[] = [];
+  if (isCurrent) {
+    parts.push('current step');
+  }
+  if (isComplete) {
+    parts.push('completed');
+  } else if (hasProgress) {
+    parts.push(`${String(toAnnouncedPercent(progress))}% complete`);
+  } else if (!isCurrent) {
+    parts.push('incomplete');
+  }
+  return parts.join(', ');
+}
+
+/**
+ * Every direct element child is a step; fragments are unwrapped and `false`/`null` are
+ * dropped, so conditional steps renumber on the same render.
+ */
+function indexSteps(children: ReactNode): { steps: ReactNode[]; count: number } {
+  let count = 0;
+  const steps = flattenChildren(children).map((child) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+    const index = count;
+    count += 1;
+    return (
+      <StepperIndexProvider key={child.key} value={index}>
+        {child}
+      </StepperIndexProvider>
+    );
+  });
+  return { steps, count };
+}
+
+export const StepperRoot = forwardRef<ComponentRef<typeof View>, StepperRootProps>(
+  (
+    {
+      asChild,
+      children,
+      currentStep: currentStepProp,
+      defaultStep = 0,
+      onStepChange,
+      isLinear = true,
+      orientation = 'vertical',
+      labelPlacement = 'end',
+      getStepAccessibilityText = defaultGetStepAccessibilityText,
+      accessibilityLabel = 'Progress',
+      role = 'list',
+      ...props
+    },
+    ref,
+  ) => {
+    const [currentStepValue, setCurrentStepValue] = useControllableState<number>({
+      prop: currentStepProp,
+      defaultProp: defaultStep,
+      onChange: onStepChange,
+    });
+    const currentStep = currentStepValue ?? defaultStep;
+
+    const setCurrentStep = useCallback(
+      (index: number) => {
+        setCurrentStepValue(index);
+      },
+      [setCurrentStepValue],
+    );
+
+    const asChildElement =
+      asChild && isValidElement<{ children?: ReactNode }>(children) ? children : null;
+    const { steps, count } = indexSteps(asChildElement ? asChildElement.props.children : children);
+
+    const contextValue = useMemo(
+      () => ({
+        currentStep,
+        count,
+        orientation,
+        labelPlacement,
+        isLinear,
+        hasStepChangeHandler: onStepChange !== undefined,
+        setCurrentStep,
+        getStepAccessibilityText,
+      }),
+      [
+        currentStep,
+        count,
+        orientation,
+        labelPlacement,
+        isLinear,
+        onStepChange,
+        setCurrentStep,
+        getStepAccessibilityText,
+      ],
+    );
+
+    const a11yProps =
+      Platform.OS === 'web'
+        ? ({ 'aria-label': accessibilityLabel } as const)
+        : ({ accessibilityLabel } as const);
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <StepperProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          role={role}
+          {...a11yProps}
+          {...mergeDataAttributes(props, dataAttributes({ orientation, labelPlacement }))}
+        >
+          {asChildElement ? cloneElement(asChildElement, undefined, steps) : steps}
+        </Comp>
+      </StepperProvider>
+    );
+  },
+);
+
+StepperRoot.displayName = 'StepperRoot';

package/src/stepper/StepperStep.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { StepperStepProvider, useStepperContext, useStepperIndex } from './context';
+import type { IStepperStepProps, StepperStepState } from './types';
+
+export interface StepperStepProps extends IStepperStepProps {
+  readonly className?: string;
+}
+
+function clampProgress(progress: number): number {
+  return Number.isFinite(progress) ? Math.min(100, Math.max(0, progress)) : 0;
+}
+
+export const StepperStep = forwardRef<ComponentRef<typeof View>, StepperStepProps>(
+  (
+    {
+      asChild,
+      children,
+      isComplete: isCompleteProp,
+      progress: progressProp = 0,
+      isDisabled = false,
+      role = 'listitem',
+      ...props
+    },
+    ref,
+  ) => {
+    const index = useStepperIndex();
+    const { currentStep, count, orientation, labelPlacement, isLinear, hasStepChangeHandler } =
+      useStepperContext();
+
+    const isCurrent = index === currentStep;
+    const isComplete = isCompleteProp ?? index < currentStep;
+    const progress = clampProgress(progressProp);
+    const hasProgress = progress > 0 && !isComplete;
+    // The current step is never a button, so it adds no Tab stop that does nothing.
+    const isClickable =
+      hasStepChangeHandler && !isDisabled && !isCurrent && (isComplete || !isLinear);
+
+    const state = useMemo(
+      (): StepperStepState => ({
+        index,
+        count,
+        isCurrent,
+        isComplete,
+        progress,
+        hasProgress,
+        isLast: index === count - 1,
+        isClickable,
+        isDisabled,
+        orientation,
+        labelPlacement,
+      }),
+      [
+        index,
+        count,
+        isCurrent,
+        isComplete,
+        progress,
+        hasProgress,
+        isClickable,
+        isDisabled,
+        orientation,
+        labelPlacement,
+      ],
+    );
+
+    const currentProps =
+      Platform.OS === 'web' && isCurrent ? ({ 'aria-current': 'step' } as const) : {};
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <StepperStepProvider value={state}>
+        <Comp
+          ref={ref}
+          {...props}
+          role={role}
+          {...currentProps}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              orientation,
+              labelPlacement,
+              current: isCurrent,
+              complete: isComplete,
+              progress: hasProgress,
+              clickable: isClickable,
+              disabled: isDisabled,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </StepperStepProvider>
+    );
+  },
+);
+
+StepperStep.displayName = 'StepperStep';

package/src/stepper/StepperStepPressable.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable, type GestureResponderEvent, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useStepperContext, useStepperStep } from './context';
+
+/**
+ * Press target for a clickable step: a `button` that is reachable with Tab and activates
+ * with Enter or Space. Rendered by `StepperStepTrigger` only while the step is clickable,
+ * so display-only steps add no focus stop and no interaction state.
+ */
+export const StepperStepPressable = forwardRef<ComponentRef<typeof Pressable>, PressableProps>(
+  ({ onPress, ...props }, ref) => {
+    const { index } = useStepperStep();
+    const { setCurrentStep } = useStepperContext();
+    const { isFocusVisible, focusProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: Pick<PressableProps, 'onFocus' | 'onBlur'>;
+    };
+    const { pressProps, isPressed } = usePress({});
+    const { isHovered, hoverProps } = useHover();
+
+    return (
+      <Pressable
+        ref={ref}
+        role="button"
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ hover: isHovered, active: isPressed, focusVisible: isFocusVisible }),
+        )}
+        onPress={composeEventHandlers<GestureResponderEvent>(onPress, () => {
+          setCurrentStep(index);
+        })}
+        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(props.onFocus, focusProps.onFocus)}
+        onBlur={composeEventHandlers(props.onBlur, focusProps.onBlur)}
+      />
+    );
+  },
+);
+
+StepperStepPressable.displayName = 'StepperStepPressable';

package/src/stepper/StepperStepTrigger.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useStepperContext, useStepperStep } from './context';
+import { StepperStepPressable } from './StepperStepPressable';
+import type { IStepperStepTriggerProps } from './types';
+
+/**
+ * Internal step region that carries the step's accessible name: the grouped visible
+ * content (indicator, title, description) followed by the state phrase. It becomes a
+ * `button` while the step is clickable. Not a public styled part; the styled
+ * `Stepper.Step` renders it around those slots.
+ */
+export const StepperStepTrigger = forwardRef<ComponentRef<typeof View>, IStepperStepTriggerProps>(
+  ({ children, ...props }, ref) => {
+    const state = useStepperStep();
+    const { getStepAccessibilityText } = useStepperContext();
+    const phrase = getStepAccessibilityText(state);
+    const Comp = state.isClickable ? StepperStepPressable : View;
+
+    return (
+      <Comp
+        ref={ref}
+        accessible
+        accessibilityValue={phrase ? { text: phrase } : undefined}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ clickable: state.isClickable, disabled: state.isDisabled }),
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+StepperStepTrigger.displayName = 'StepperStepTrigger';

package/src/stepper/StepperStepTrigger.web.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, useLayoutEffect, useMemo, useRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useStepperContext, useStepperStep } from './context';
+import { StepperStepPressable } from './StepperStepPressable';
+import type { IStepperStepTriggerProps } from './types';
+
+/**
+ * Internal step region that carries the step's accessible name. On web the state phrase
+ * is screen-reader-only text after the visible content, because browse-mode screen
+ * readers ignore `aria-label` on a list item. It becomes a `button` while the step is
+ * clickable. Not a public styled part.
+ */
+export const StepperStepTrigger = forwardRef<ComponentRef<typeof View>, IStepperStepTriggerProps>(
+  ({ children, ...props }, ref) => {
+    const state = useStepperStep();
+    const { getStepAccessibilityText } = useStepperContext();
+    const phrase = getStepAccessibilityText(state);
+    const Comp = state.isClickable ? StepperStepPressable : View;
+
+    const nodeRef = useRef<ComponentRef<typeof View> | null>(null);
+    const mergedRef = useMemo(() => mergeRefs(ref, nodeRef), [ref]);
+    // Activating a step makes it current, which swaps the focused button for a plain region
+    // and would drop focus to the document. Focus moves to that region instead, outside the
+    // Tab order.
+    const restoreFocusRef = useRef(false);
+
+    useLayoutEffect(() => {
+      const node = nodeRef.current as unknown as HTMLElement | null;
+      if (!restoreFocusRef.current || state.isClickable || node === null) {
+        return;
+      }
+      restoreFocusRef.current = false;
+      node.tabIndex = -1;
+      node.focus({ preventScroll: true });
+    }, [state.isClickable]);
+
+    const pressProps = state.isClickable
+      ? {
+          onPress: () => {
+            restoreFocusRef.current =
+              document.activeElement === (nodeRef.current as unknown as HTMLElement | null);
+          },
+          onBlur: composeEventHandlers(props.onBlur, () => {
+            restoreFocusRef.current = false;
+          }),
+        }
+      : {};
+
+    return (
+      <Comp
+        ref={mergedRef}
+        {...props}
+        {...pressProps}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ clickable: state.isClickable, disabled: state.isDisabled }),
+        )}
+      >
+        {children}
+        {phrase ? <VisuallyHidden elementType="span">{`, ${phrase}`}</VisuallyHidden> : null}
+      </Comp>
+    );
+  },
+);
+
+StepperStepTrigger.displayName = 'StepperStepTrigger';

package/src/stepper/context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from '@cdx-ui/utils';
+import type { StepperContextValue, StepperStepState } from './types';
+
+export const [StepperProvider, useStepperContext] =
+  createContext<StepperContextValue>('StepperContext');
+
+/** Position of a direct child of `StepperRoot`, supplied by the root while it renders. */
+export const [StepperIndexProvider, useStepperIndex] = createContext<number>('StepperIndex');
+
+/** Resolved state of the enclosing step. `useStepperStep` throws outside a `StepperStep`. */
+export const [StepperStepProvider, useStepperStep] = createContext<StepperStepState>('StepperStep');

package/src/stepper/index.ts

@@ -0,0 +1,16 @@
+export type {
+  IStepperProps,
+  IStepperStepProps,
+  IStepperStepTriggerProps,
+  InterfaceStepperProps,
+  InterfaceStepperStepProps,
+  StepperContextValue,
+  StepperLabelPlacement,
+  StepperOrientation,
+  StepperStepState,
+} from './types';
+
+export { useStepperContext, useStepperIndex, useStepperStep } from './context';
+export { StepperRoot, type StepperRootProps } from './StepperRoot';
+export { StepperStep, type StepperStepProps } from './StepperStep';
+export { StepperStepTrigger } from './StepperStepTrigger';