@cdx-ui/components 0.3.4 → 0.3.6

package/src/components/Stepper/useStepperLabelFit.web.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useLayoutEffect, useState, type RefCallback } from 'react';
+import type { View } from 'react-native';
+import type { StepperLabelFit, StepperLabelFitResult } from './useStepperLabelFit';
+
+export type { StepperLabelFit, StepperLabelFitResult } from './useStepperLabelFit';
+
+interface FitDecision {
+  readonly key: string;
+  readonly fit: StepperLabelFit;
+}
+
+/**
+ * CSS flex cannot keep min-content minimums only while they fit: `min-width: auto` overflows a
+ * tight row and `min-width: 0` breaks words even when there is room. So labels start at
+ * `'words'`, and if the root then overflows they switch to `'shrink'` before paint. The decision
+ * is kept until the root's width or the step count changes.
+ */
+export function useStepperLabelFit(enabled: boolean, count: number): StepperLabelFitResult {
+  const [node, setNode] = useState<HTMLElement | null>(null);
+  const [width, setWidth] = useState(0);
+  const [decision, setDecision] = useState<FitDecision | null>(null);
+
+  const key = `${String(width)}:${String(count)}`;
+  const fit: StepperLabelFit = decision?.key === key ? decision.fit : 'words';
+
+  useEffect(() => {
+    if (!enabled || node === null || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => {
+      setWidth(node.clientWidth);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [enabled, node]);
+
+  // No deps: label text can change without resizing the root, and the measurement is cheap.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    if (!enabled || node === null || fit !== 'words') {
+      return;
+    }
+    if (node.scrollWidth > node.clientWidth + 1) {
+      setDecision({ key, fit: 'shrink' });
+    }
+  });
+
+  const measureRef = useCallback<RefCallback<View>>((value) => {
+    setNode(value as unknown as HTMLElement | null);
+  }, []);
+
+  return { fit: enabled ? fit : 'shrink', measureRef: enabled ? measureRef : undefined };
+}

package/src/components/Stepper/useStepperRingColors.ts

@@ -0,0 +1,29 @@
+import { useCSSVariable } from 'uniwind';
+
+/** Light-theme fallbacks when Uniwind CSS context is unavailable (e.g. Jest). */
+const FALLBACKS = {
+  track: '#e9e9e9',
+  brand: '#346099',
+  neutral: '#616263',
+} as const;
+
+function toColor(value: string | number | undefined, fallback: string): string {
+  if (typeof value === 'string' && value.length > 0) {
+    return value;
+  }
+  return fallback;
+}
+
+/** Ring stroke colors for `Stepper.Indicator`: brand on the current step, neutral otherwise. */
+export function useStepperRingColors(isCurrent: boolean) {
+  const trackToken = useCSSVariable('--color-stroke-secondary');
+  const brandToken = useCSSVariable('--color-surface-brand-strong');
+  const neutralToken = useCSSVariable('--color-surface-neutral-strong');
+
+  return {
+    track: toColor(trackToken, FALLBACKS.track),
+    indicator: isCurrent
+      ? toColor(brandToken, FALLBACKS.brand)
+      : toColor(neutralToken, FALLBACKS.neutral),
+  };
+}

package/src/components/SystemAlert/animation.ts

@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';
+import { Platform, useWindowDimensions, type View } from 'react-native';
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { useCombinedAnimationDisabledState, type AnimationRootDisableAll } from '../../animation';
+
+// No motion spec exists for SystemAlert; these mirror FullScreenDialog's surface motion.
+export const SYSTEM_ALERT_ENTER_MS = 300;
+export const SYSTEM_ALERT_EXIT_MS = 220;
+/** Unmounts an exiting web surface when `transitionend` never fires (reduced motion, hidden tab). */
+export const SYSTEM_ALERT_WEB_SAFETY_MS = SYSTEM_ALERT_EXIT_MS + 100;
+
+const ENTER_TIMING = { duration: SYSTEM_ALERT_ENTER_MS, easing: Easing.bezier(0.32, 0.72, 0, 1) };
+const EXIT_TIMING = { duration: SYSTEM_ALERT_EXIT_MS, easing: Easing.bezier(0.4, 0, 1, 1) };
+
+/**
+ * `entering` and `exiting` exist only while motion runs. With motion off, `isOpen`
+ * moves straight between `open` and `closed`.
+ */
+export type SystemAlertPresencePhase = 'closed' | 'entering' | 'open' | 'exiting';
+
+/** Web `data-state`. `exiting` maps to `closed`, as in Dialog and FullScreenDialog. */
+export type SystemAlertWebState = 'entering' | 'open' | 'closed';
+
+export interface UseSystemAlertPresenceOptions {
+  isOpen: boolean;
+  animation: AnimationRootDisableAll | undefined;
+  /** Wrapper height while no surface pushes past it: the reserved top inset, or 0. */
+  collapsedHeight: number;
+}
+
+export interface SystemAlertPresence {
+  phase: SystemAlertPresencePhase;
+  isSurfaceMounted: boolean;
+  wrapperStyle: ReturnType<typeof useAnimatedStyle>;
+  /** Reports the surface's natural height, from a synchronous read or `onLayout`. */
+  setSurfaceHeight: (height: number) => void;
+  /** Bottom edge of the surface, `b`, from 0 (above the screen edge) to its height. */
+  edge: SharedValue<number>;
+  surfaceHeight: SharedValue<number>;
+  /** True while `open` and no motion runs: the wrapper sizes to its content. */
+  isSettled: SharedValue<boolean>;
+  /** Web only: drives the CSS transitions on the wrapper and the surface. */
+  webState: SystemAlertWebState | undefined;
+  /** Web only: the wrapper's inline height. `undefined` sizes it to its content. */
+  webWrapperHeight: number | undefined;
+  /** Web only: the wrapper node whose `height` transition ends the exit. */
+  wrapperRef: RefObject<View | null>;
+}
+
+/**
+ * Presence lifecycle and contact-push motion for an in-flow SystemAlert. One value, the
+ * surface's bottom edge `b`, is driven; the wrapper's height is `max(collapsedHeight, b)`,
+ * so content below only moves once the surface leaves the reserved strip.
+ *
+ * Web runs the same lifecycle on CSS transitions keyed on `data-state` instead of Reanimated:
+ * `entering` → (rAF) → `open`, and `closed` → `transitionend` on the wrapper's `height`, or a
+ * safety timer → unmount. The inset is 0 there, so the wrapper's height is `b`, and the surface,
+ * aligned to the wrapper's bottom edge, follows the same transition.
+ */
+export function useSystemAlertPresence({
+  isOpen,
+  animation,
+  collapsedHeight,
+}: UseSystemAlertPresenceOptions): SystemAlertPresence {
+  const isWeb = Platform.OS === 'web';
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+  const hasMotion = !isAllAnimationsDisabled;
+
+  const [phase, setPhase] = useState<SystemAlertPresencePhase>(isOpen ? 'open' : 'closed');
+  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);
+  if (isOpen !== prevIsOpen) {
+    setPrevIsOpen(isOpen);
+    if (isOpen) {
+      setPhase(hasMotion ? 'entering' : 'open');
+    } else {
+      setPhase(hasMotion ? 'exiting' : 'closed');
+    }
+  }
+
+  const edge = useSharedValue(0);
+  const surfaceHeight = useSharedValue(0);
+  const isSettled = useSharedValue(isOpen);
+  const [webSurfaceHeight, setWebSurfaceHeight] = useState(0);
+  const wrapperRef = useRef<View | null>(null);
+
+  // Read by the surface's layout callbacks, which run before this hook's own effects.
+  const phaseRef = useRef(phase);
+  phaseRef.current = phase;
+  // The JS-side copy of `surfaceHeight`. A shared value read on the JS thread right after a
+  // JS write can still return the old value, which would start the first enter toward 0.
+  const surfaceHeightRef = useRef(0);
+
+  const settle = useCallback((from: SystemAlertPresencePhase, to: SystemAlertPresencePhase) => {
+    setPhase((current) => (current === from ? to : current));
+  }, []);
+
+  // `withTiming` starts from the current edge, so a reversal continues from where it is.
+  const startEnter = useCallback(() => {
+    edge.set(
+      withTiming(surfaceHeightRef.current, ENTER_TIMING, (finished) => {
+        'worklet';
+        if (finished) scheduleOnRN(settle, 'entering', 'open');
+      }),
+    );
+  }, [edge, settle]);
+
+  const setSurfaceHeight = useCallback(
+    (height: number) => {
+      if (height <= 0) return;
+      if (isWeb) {
+        setWebSurfaceHeight(height);
+        return;
+      }
+      if (height === surfaceHeightRef.current) return;
+      surfaceHeightRef.current = height;
+      surfaceHeight.set(height);
+      if (phaseRef.current === 'open') {
+        edge.set(height);
+      } else if (phaseRef.current === 'entering') {
+        startEnter();
+      }
+    },
+    [isWeb, edge, surfaceHeight, startEnter],
+  );
+
+  // A layout effect so the surface's synchronous measurement (a child effect) has already
+  // run and the first animated frame targets the measured height. Without one, `onLayout`
+  // starts the enter through `setSurfaceHeight`.
+  useLayoutEffect(() => {
+    if (isWeb) return;
+    switch (phase) {
+      case 'open':
+        edge.set(surfaceHeightRef.current);
+        isSettled.set(true);
+        break;
+      case 'closed':
+        isSettled.set(false);
+        edge.set(0);
+        break;
+      case 'entering':
+        isSettled.set(false);
+        if (surfaceHeightRef.current > 0) startEnter();
+        break;
+      case 'exiting':
+        isSettled.set(false);
+        edge.set(
+          withTiming(0, EXIT_TIMING, (finished) => {
+            'worklet';
+            if (finished) scheduleOnRN(settle, 'exiting', 'closed');
+          }),
+        );
+        break;
+    }
+  }, [isWeb, phase, edge, isSettled, startEnter, settle]);
+
+  // One frame at `entering` (height 0, surface above the clip) so the browser has a start
+  // value to transition from.
+  useEffect(() => {
+    if (!isWeb || phase !== 'entering') return;
+    const frame = requestAnimationFrame(() => {
+      settle('entering', 'open');
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isWeb, phase, settle]);
+
+  useEffect(() => {
+    if (!isWeb || phase !== 'exiting') return;
+
+    const node = wrapperRef.current as unknown as HTMLElement | null;
+    const finish = () => {
+      settle('exiting', 'closed');
+    };
+    const safetyTimer = setTimeout(finish, SYSTEM_ALERT_WEB_SAFETY_MS);
+
+    if (typeof node?.addEventListener !== 'function') {
+      return () => clearTimeout(safetyTimer);
+    }
+
+    // The surface's own `transform` transition bubbles here too.
+    const handleTransitionEnd = (event: Event) => {
+      if (event.target !== node) return;
+      if ((event as unknown as { propertyName?: string }).propertyName === 'height') finish();
+    };
+    node.addEventListener('transitionend', handleTransitionEnd);
+
+    return () => {
+      clearTimeout(safetyTimer);
+      node.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [isWeb, phase, settle]);
+
+  // CSS cannot transition to `auto`, so a moving wrapper gets the measured px height.
+  // Before the first measurement (or with motion off) it sizes to its content; `auto` → px
+  // does not transition, so a banner shown on first render does not animate.
+  let webWrapperHeight: number | undefined;
+  if (isWeb && hasMotion) {
+    webWrapperHeight = phase === 'open' ? webSurfaceHeight || undefined : 0;
+  }
+
+  // Explicit deps for Vite/web without the Reanimated Babel plugin.
+  const wrapperStyle = useAnimatedStyle(
+    () => ({
+      height: isSettled.get() ? 'auto' : Math.max(collapsedHeight, edge.get()),
+    }),
+    [isSettled, edge, collapsedHeight],
+  );
+
+  return {
+    phase,
+    isSurfaceMounted: phase !== 'closed',
+    wrapperStyle,
+    setSurfaceHeight,
+    edge,
+    surfaceHeight,
+    isSettled,
+    webState: isWeb ? (phase === 'exiting' ? 'closed' : phase) : undefined,
+    webWrapperHeight,
+    wrapperRef,
+  };
+}
+
+/**
+ * The surface's slide, `translateY = b − H`. Call it from a component that mounts with the
+ * surface: Reanimated computes the initial style once, on the hook's first render.
+ */
+export function useSystemAlertSurfaceStyle({
+  edge,
+  surfaceHeight,
+  isSettled,
+}: Pick<SystemAlertPresence, 'edge' | 'surfaceHeight' | 'isSettled'>): ReturnType<
+  typeof useAnimatedStyle
+> {
+  const { height: windowHeight } = useWindowDimensions();
+
+  // Explicit deps for Vite/web without the Reanimated Babel plugin.
+  return useAnimatedStyle(() => {
+    const height = surfaceHeight.get();
+    let translateY = 0;
+    if (!isSettled.get()) {
+      // Before the first measurement, park the surface above the clip.
+      translateY = height > 0 ? edge.get() - height : -windowHeight;
+    }
+    return { transform: [{ translateY }] };
+  }, [edge, surfaceHeight, isSettled, windowHeight]);
+}