@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.181

package/src/providers/toast/provider.tsx

@@ -0,0 +1,671 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+import { Platform, View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import { createPortalFn, useOverlayStackRegistration } from '@cdx-ui/primitives';
+import { DefaultToast } from '../../components/Toast';
+import type { ToastPlacement } from '../../components/Toast/types';
+import { InsetsContainer } from './insets-container';
+import { ToastLifecycleContext, type ToastLifecycleContextValue } from './lifecycle.context';
+import { toastReducer } from './reducer';
+import { ToastConfigContext } from './toast-config.context';
+import { ToastItemRenderer } from './toast-item-renderer';
+import type {
+  ToastComponentProps,
+  ToasterContextValue,
+  ToastGlobalConfig,
+  ToastProviderProps,
+  ToastShowConfig,
+  ToastShowOptions,
+  ToastShowOptionsWithComponent,
+} from './types';
+
+const DEFAULT_DURATION = 4000;
+const TOAST_PLACEMENTS: readonly ToastPlacement[] = [
+  'top-start',
+  'top',
+  'top-end',
+  'bottom-start',
+  'bottom',
+  'bottom-end',
+];
+
+function useToastPlacementStacks() {
+  const topStartTotal = useSharedValue(0);
+  const topStartHeights = useSharedValue<Record<string, number>>({});
+  const topTotal = useSharedValue(0);
+  const topHeights = useSharedValue<Record<string, number>>({});
+  const topEndTotal = useSharedValue(0);
+  const topEndHeights = useSharedValue<Record<string, number>>({});
+  const bottomStartTotal = useSharedValue(0);
+  const bottomStartHeights = useSharedValue<Record<string, number>>({});
+  const bottomTotal = useSharedValue(0);
+  const bottomHeights = useSharedValue<Record<string, number>>({});
+  const bottomEndTotal = useSharedValue(0);
+  const bottomEndHeights = useSharedValue<Record<string, number>>({});
+
+  return useMemo(
+    () => ({
+      'top-start': { total: topStartTotal, heights: topStartHeights },
+      top: { total: topTotal, heights: topHeights },
+      'top-end': { total: topEndTotal, heights: topEndHeights },
+      'bottom-start': { total: bottomStartTotal, heights: bottomStartHeights },
+      bottom: { total: bottomTotal, heights: bottomHeights },
+      'bottom-end': { total: bottomEndTotal, heights: bottomEndHeights },
+    }),
+    [
+      bottomEndHeights,
+      bottomEndTotal,
+      bottomHeights,
+      bottomStartHeights,
+      bottomStartTotal,
+      bottomTotal,
+      topEndHeights,
+      topEndTotal,
+      topHeights,
+      topStartHeights,
+      topStartTotal,
+      topTotal,
+    ],
+  );
+}
+
+/**
+ * Context for toast manager
+ */
+const ToasterContext = createContext<ToasterContextValue | null>(null);
+
+/**
+ * Merges global config with local config, ensuring local config takes precedence
+ * Only includes defined values from localConfig to avoid overriding global config with undefined
+ */
+function mergeToastConfig(
+  globalConfig: ToastGlobalConfig | undefined,
+  localConfig: Partial<ToastGlobalConfig>,
+): Partial<ToastGlobalConfig> {
+  const result: Partial<ToastGlobalConfig> = { ...globalConfig };
+
+  // Only override with defined values from localConfig
+  if (localConfig.color !== undefined) {
+    result.color = localConfig.color;
+  }
+  if (localConfig.placement !== undefined) {
+    result.placement = localConfig.placement;
+  }
+  if (localConfig.isSwipeable !== undefined) {
+    result.isSwipeable = localConfig.isSwipeable;
+  }
+  if (localConfig.animation !== undefined) {
+    result.animation = localConfig.animation;
+  }
+
+  return result;
+}
+
+/**
+ * Creates a component function for simple string toast
+ */
+function createStringToastComponent(
+  label: string,
+  globalConfig: ToastGlobalConfig | undefined,
+): (props: ToastComponentProps) => React.ReactElement {
+  return (props: ToastComponentProps) => {
+    const mergedConfig = mergeToastConfig(globalConfig, {
+      color: 'neutral',
+    });
+    return (
+      <DefaultToast
+        {...props}
+        label={label}
+        color={mergedConfig.color}
+        placement={mergedConfig.placement}
+        isSwipeable={mergedConfig.isSwipeable}
+        animation={mergedConfig.animation}
+      />
+    );
+  };
+}
+
+/**
+ * Creates a component function for config-based toast
+ */
+function createConfigToastComponent(
+  config: ToastShowConfig,
+  globalConfig: ToastGlobalConfig | undefined,
+): (props: ToastComponentProps) => React.ReactElement {
+  return (props: ToastComponentProps) => {
+    const mergedConfig = mergeToastConfig(globalConfig, {
+      color: config.color,
+      placement: config.placement,
+      isSwipeable: config.isSwipeable,
+      animation: config.animation,
+    });
+    return (
+      <DefaultToast
+        {...props}
+        color={mergedConfig.color}
+        placement={mergedConfig.placement}
+        isSwipeable={mergedConfig.isSwipeable}
+        animation={mergedConfig.animation}
+        label={config.label}
+        description={config.description}
+        actionLabel={config.actionLabel}
+        onActionPress={config.onActionPress}
+        icon={config.icon}
+      />
+    );
+  };
+}
+
+/**
+ * Toast provider component
+ * Wraps your app to enable toast functionality
+ */
+export function ToastProvider({
+  defaultProps,
+  insets,
+  maxVisibleToasts = 3,
+  contentWrapper,
+  children,
+  disableFullWindowOverlay = false,
+  unstable_accessibilityContainerViewIsModal,
+  announceLabel,
+}: Readonly<ToastProviderProps>) {
+  const [toasts, dispatch] = useReducer(toastReducer, []);
+
+  /**
+   * Memoize global config to prevent unnecessary re-renders
+   */
+  const globalConfig = useMemo<ToastGlobalConfig | undefined>(() => defaultProps, [defaultProps]);
+
+  const isToastVisible = toasts.length > 0;
+
+  const placementStacks = useToastPlacementStacks();
+
+  /**
+   * Each placement owns independent animation metrics. A toast at bottom-end
+   * must not compress or fade because unrelated toasts are open at top-start.
+   */
+  useEffect(() => {
+    const totals: Record<ToastPlacement, number> = {
+      'top-start': 0,
+      top: 0,
+      'top-end': 0,
+      'bottom-start': 0,
+      bottom: 0,
+      'bottom-end': 0,
+    };
+
+    for (const toast of toasts) {
+      totals[toast.placement] += 1;
+    }
+
+    for (const placement of TOAST_PLACEMENTS) {
+      placementStacks[placement].total.set(totals[placement]);
+    }
+  }, [placementStacks, toasts]);
+
+  const idCounter = useRef(0);
+
+  /**
+   * Timer state per toast — tracks remaining time so pause/resume can
+   * restart with only the leftover duration (WCAG 2.2.1).
+   */
+  const timersRef = useRef<
+    Map<
+      string,
+      {
+        startedAt: number;
+        remaining: number;
+        timer: ReturnType<typeof setTimeout> | null;
+        duration: number;
+      }
+    >
+  >(new Map());
+  const pausedRef = useRef(false);
+  const hideRef = useRef<((ids?: (string & {}) | string[] | 'all') => void) | null>(null);
+
+  /**
+   * Safety reset: when all toasts are gone the InsetsContainer unmounts and
+   * no resume event can fire. Clear the paused flag and any orphaned timer
+   * entries so the next toast's timer starts normally.
+   */
+  useEffect(() => {
+    if (toasts.length === 0) {
+      pausedRef.current = false;
+      timersRef.current.forEach((entry) => {
+        if (entry.timer) clearTimeout(entry.timer);
+      });
+      timersRef.current.clear();
+    }
+  }, [toasts.length]);
+
+  /**
+   * Remove one or more toasts from the array. On web this is the second half
+   * of the two-phase hide flow — the toast component calls it from
+   * `onTransitionEnd` (or a safety timeout) after the exit transition plays.
+   * Also cleans up per-id height state.
+   */
+  const remove = useCallback(
+    (ids: string | string[]) => {
+      const idsArray = Array.isArray(ids) ? ids : [ids];
+      if (idsArray.length === 0) return;
+
+      dispatch({ type: 'REMOVE', payload: { ids: idsArray } });
+
+      for (const placement of TOAST_PLACEMENTS) {
+        placementStacks[placement].heights.modify(
+          <T extends Record<string, number>>(value: T): T => {
+            'worklet';
+            const result = { ...value };
+            for (const id of idsArray) {
+              // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+              delete result[id];
+            }
+            return result;
+          },
+        );
+      }
+    },
+    [placementStacks],
+  );
+
+  /**
+   * Hide one or more toasts
+   * - No argument: hides the last toast in the array
+   * - "all": hides all toasts
+   * - Single ID: hides that toast
+   * - Array of IDs: hides those toasts
+   *
+   * On web this only marks toasts as `pendingRemoval` so their CSS exit
+   * transition can play; the actual removal happens when the toast
+   * component calls `remove(id)` on transition end.
+   * On native this dispatches removal directly — Reanimated's `exiting`
+   * layout animation plays before unmount.
+   */
+  const hide = useCallback(
+    (ids?: (string & {}) | string[] | 'all') => {
+      const isWeb = Platform.OS === 'web';
+
+      if (ids === undefined) {
+        if (toasts.length === 0) return;
+        // Hide the last non-pending toast in the array. Using the last
+        // pending toast would be a no-op on web.
+        let lastToast = null;
+        for (let i = toasts.length - 1; i >= 0; i--) {
+          const candidate = toasts[i];
+          if (!candidate.pendingRemoval) {
+            lastToast = candidate;
+            break;
+          }
+        }
+        if (!lastToast) return;
+
+        const timerEntry = timersRef.current.get(lastToast.id);
+        if (timerEntry?.timer) {
+          clearTimeout(timerEntry.timer);
+        }
+        timersRef.current.delete(lastToast.id);
+
+        if (lastToast.onHide) {
+          lastToast.onHide();
+        }
+
+        if (isWeb) {
+          dispatch({ type: 'MARK_CLOSED', payload: { ids: [lastToast.id] } });
+        } else {
+          remove([lastToast.id]);
+        }
+      } else if (ids === 'all') {
+        timersRef.current.forEach((entry) => {
+          if (entry.timer) clearTimeout(entry.timer);
+        });
+        timersRef.current.clear();
+
+        const targetIds: string[] = [];
+        toasts.forEach((toast) => {
+          if (toast.pendingRemoval) return;
+          targetIds.push(toast.id);
+          if (toast.onHide) {
+            toast.onHide();
+          }
+        });
+
+        if (targetIds.length === 0) return;
+
+        if (isWeb) {
+          dispatch({ type: 'MARK_CLOSED', payload: { ids: targetIds } });
+        } else {
+          remove(targetIds);
+        }
+      } else {
+        const idsArray = Array.isArray(ids) ? ids : [ids];
+        const targetIds: string[] = [];
+
+        idsArray.forEach((id) => {
+          const toast = toasts.find((t) => t.id === id);
+          if (!toast || toast.pendingRemoval) return;
+
+          const timerEntry = timersRef.current.get(id);
+          if (timerEntry?.timer) {
+            clearTimeout(timerEntry.timer);
+          }
+          timersRef.current.delete(id);
+
+          targetIds.push(id);
+          if (toast.onHide) {
+            toast.onHide();
+          }
+        });
+
+        if (targetIds.length === 0) return;
+
+        if (isWeb) {
+          dispatch({ type: 'MARK_CLOSED', payload: { ids: targetIds } });
+        } else {
+          remove(targetIds);
+        }
+      }
+    },
+    [remove, toasts],
+  );
+
+  // Keep hide ref up to date
+  hideRef.current = hide;
+
+  /**
+   * Pause all running auto-dismiss timers (WCAG 2.2.1).
+   * Stores elapsed time so resumeAll can restart with the remainder.
+   */
+  const pauseAll = useCallback(() => {
+    if (pausedRef.current) return;
+    pausedRef.current = true;
+
+    const now = Date.now();
+    timersRef.current.forEach((entry) => {
+      if (entry.timer) {
+        clearTimeout(entry.timer);
+        entry.timer = null;
+      }
+      const elapsed = now - entry.startedAt;
+      entry.remaining = Math.max(0, entry.remaining - elapsed);
+    });
+  }, []);
+
+  /**
+   * Resume all paused auto-dismiss timers with their remaining duration.
+   */
+  const resumeAll = useCallback(() => {
+    pausedRef.current = false;
+
+    const now = Date.now();
+    timersRef.current.forEach((entry, id) => {
+      if (entry.timer) return;
+      if (entry.remaining <= 0) {
+        if (hideRef.current) hideRef.current(id);
+        timersRef.current.delete(id);
+        return;
+      }
+      entry.startedAt = now;
+      entry.timer = setTimeout(() => {
+        if (hideRef.current) hideRef.current(id);
+        timersRef.current.delete(id);
+      }, entry.remaining);
+    });
+  }, []);
+
+  const lifecycleContextValue = useMemo<ToastLifecycleContextValue>(() => {
+    const pending = new Set<string>();
+    const frontmostByPlacement = new Map<ToastPlacement, string>();
+    for (const toast of toasts) {
+      if (toast.pendingRemoval) {
+        pending.add(toast.id);
+      } else {
+        frontmostByPlacement.set(toast.placement, toast.id);
+      }
+    }
+    return {
+      remove: (id: string) => remove([id]),
+      pendingRemovalIds: pending,
+      frontmostIds: new Set(frontmostByPlacement.values()),
+    };
+  }, [remove, toasts]);
+
+  /**
+   * Show a toast
+   * Supports three usage patterns:
+   * 1. Simple string: toast.show('This is toast')
+   * 2. Config object: toast.show({ label, color, ... })
+   * 3. Custom component: toast.show({ component: (props) => <Toast>...</Toast> })
+   */
+  const show = useCallback(
+    (options: string | ToastShowOptions): string => {
+      let normalizedOptions: ToastShowOptionsWithComponent;
+      let duration: number | 'persistent' | undefined = DEFAULT_DURATION; // Default duration
+      let explicitId: string | undefined;
+
+      // Case 1: Simple string
+      if (typeof options === 'string') {
+        normalizedOptions = {
+          id: undefined,
+          component: createStringToastComponent(options, globalConfig),
+          placement: globalConfig?.placement,
+          duration: DEFAULT_DURATION,
+        };
+        duration = DEFAULT_DURATION;
+        explicitId = undefined;
+      }
+      // Case 2: Config object without component
+      else if (!('component' in options) || options.component === undefined) {
+        const config = options as ToastShowConfig;
+        duration = config.duration ?? DEFAULT_DURATION;
+        explicitId = config.id;
+        normalizedOptions = {
+          id: config.id,
+          component: createConfigToastComponent(config, globalConfig),
+          placement: config.placement,
+          duration,
+          onShow: config.onShow,
+          onHide: config.onHide,
+        };
+      }
+      // Case 3: Config object with component (existing behavior)
+      else {
+        normalizedOptions = options;
+        duration = normalizedOptions.duration ?? DEFAULT_DURATION;
+        explicitId = normalizedOptions.id;
+      }
+
+      const id =
+        normalizedOptions.id ?? `toast-${String(Date.now())}-${String(idCounter.current++)}`;
+      const placement = normalizedOptions.placement ?? globalConfig?.placement ?? 'bottom';
+
+      // If an explicit ID was provided, check if a toast with that ID already exists
+      // If it exists, skip adding a new toast and return the existing ID
+      if (explicitId !== undefined) {
+        const existingToast = toasts.find((toast) => toast.id === explicitId);
+        if (existingToast) {
+          return existingToast.id;
+        }
+      }
+
+      dispatch({
+        type: 'SHOW',
+        payload: {
+          id,
+          placement,
+          component: normalizedOptions.component,
+          duration,
+          onShow: normalizedOptions.onShow,
+          onHide: normalizedOptions.onHide,
+        },
+      });
+
+      if (normalizedOptions.onShow) {
+        normalizedOptions.onShow();
+      }
+
+      // Set up auto-dismiss timeout synchronously
+      if (
+        duration !== 'persistent' &&
+        typeof duration === 'number' &&
+        !Number.isNaN(duration) &&
+        duration >= 0 &&
+        duration !== Infinity
+      ) {
+        // Handle immediate dismissal
+        if (duration === 0) {
+          if (hideRef.current) {
+            hideRef.current(id);
+          }
+        } else {
+          const now = Date.now();
+          const timer = setTimeout(() => {
+            if (hideRef.current) {
+              hideRef.current(id);
+            }
+            timersRef.current.delete(id);
+          }, duration);
+          const entry = {
+            startedAt: now,
+            remaining: duration,
+            timer: timer as ReturnType<typeof setTimeout> | null,
+            duration,
+          };
+          timersRef.current.set(id, entry);
+
+          if (pausedRef.current) {
+            clearTimeout(timer);
+            entry.timer = null;
+          }
+        }
+      }
+
+      return id;
+    },
+    [toasts, globalConfig],
+  );
+
+  const contextValue = useMemo<ToasterContextValue>(
+    () => ({
+      toast: {
+        show,
+        hide,
+        pauseAll,
+        resumeAll,
+      },
+      isToastVisible,
+    }),
+    [show, hide, pauseAll, resumeAll, isToastVisible],
+  );
+
+  useOverlayStackRegistration({
+    active: toasts.length > 0,
+    capabilities: [],
+    id: 'forge-ui-toast-viewport',
+    groupId: 'forge-ui-notifications',
+    layer: 'notification',
+  });
+
+  const placementIndexes: Record<ToastPlacement, number> = {
+    'top-start': 0,
+    top: 0,
+    'top-end': 0,
+    'bottom-start': 0,
+    bottom: 0,
+    'bottom-end': 0,
+  };
+
+  const toastViewport =
+    toasts.length > 0 ? (
+      <InsetsContainer
+        insets={insets}
+        announceLabel={announceLabel}
+        contentWrapper={contentWrapper}
+        disableFullWindowOverlay={disableFullWindowOverlay}
+        unstable_accessibilityContainerViewIsModal={unstable_accessibilityContainerViewIsModal}
+        pauseAll={pauseAll}
+        resumeAll={resumeAll}
+        hide={hide}
+      >
+        <View className="flex-1">
+          {toasts.map((toastItem) => {
+            const placement = toastItem.placement;
+            const index = placementIndexes[placement];
+            const stack = placementStacks[placement];
+            placementIndexes[placement] += 1;
+
+            return (
+              <ToastItemRenderer
+                key={toastItem.id}
+                toastItem={toastItem}
+                show={show}
+                hide={hide}
+                index={index}
+                total={stack.total}
+                heights={stack.heights}
+                maxVisibleToasts={maxVisibleToasts}
+              />
+            );
+          })}
+        </View>
+      </InsetsContainer>
+    ) : null;
+
+  const renderedToastViewport =
+    Platform.OS === 'web' && toastViewport && createPortalFn && typeof document !== 'undefined'
+      ? createPortalFn(toastViewport, document.body)
+      : toastViewport;
+
+  return (
+    <ToastConfigContext.Provider value={globalConfig}>
+      <ToasterContext.Provider value={contextValue}>
+        <ToastLifecycleContext.Provider value={lifecycleContextValue}>
+          {children}
+          {renderedToastViewport}
+        </ToastLifecycleContext.Provider>
+      </ToasterContext.Provider>
+    </ToastConfigContext.Provider>
+  );
+}
+
+/**
+ * Hook to access toast functionality
+ *
+ * @returns Object containing toast manager and visibility state
+ *
+ * @example
+ * ```tsx
+ * const { toast, isToastVisible } = useToast();
+ *
+ * // Show a toast
+ * toast.show({ component: <Toast>Hello</Toast> });
+ *
+ * // Hide a toast
+ * toast.hide('my-toast');
+ *
+ * // Check if any toast is visible
+ * if (isToastVisible) {
+ *   console.log('A toast is currently displayed');
+ * }
+ * ```
+ */
+export function useToast() {
+  const context = useContext(ToasterContext);
+
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider provider');
+  }
+
+  return {
+    toast: context.toast,
+    isToastVisible: context.isToastVisible,
+  };
+}

package/src/providers/toast/reducer.ts

@@ -0,0 +1,40 @@
+import type { ToastAction, ToastItem } from './types';
+
+/**
+ * Reducer for managing toast state
+ *
+ * Removal is a two-phase flow so web can play its CSS exit transition
+ * before the DOM node is unmounted:
+ *   `MARK_CLOSED` → flips `pendingRemoval: true` (node stays mounted).
+ *   `REMOVE`      → filters the toast out of the array (node unmounts).
+ *
+ * Native dispatches `REMOVE` directly since Reanimated's `exiting`
+ * layout animation plays before unmount without a lingering state.
+ */
+export function toastReducer(state: ToastItem[], action: ToastAction): ToastItem[] {
+  switch (action.type) {
+    case 'SHOW': {
+      const filtered = state.filter((toast) => toast.id !== action.payload.id);
+      return [...filtered, action.payload];
+    }
+
+    case 'MARK_CLOSED': {
+      const idsSet = new Set(action.payload.ids);
+      // Early out preserves the array reference when nothing would change,
+      // which keeps `useMemo(..., [toasts])` consumers stable.
+      const hasChange = state.some((toast) => idsSet.has(toast.id) && !toast.pendingRemoval);
+      if (!hasChange) return state;
+      return state.map((toast) =>
+        idsSet.has(toast.id) && !toast.pendingRemoval ? { ...toast, pendingRemoval: true } : toast,
+      );
+    }
+
+    case 'REMOVE': {
+      const idsSet = new Set(action.payload.ids);
+      return state.filter((toast) => !idsSet.has(toast.id));
+    }
+
+    default:
+      return state;
+  }
+}