@cdx-ui/components 0.0.1-beta.11 → 0.0.1-beta.111

package/src/providers/toast/provider.tsx

@@ -0,0 +1,572 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+import { Platform, View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import { DefaultToast } from '../../components/Toast';
+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;
+
+/**
+ * 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: 'default',
+    });
+    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 heights = useSharedValue<Record<string, number>>({});
+
+  const total = useSharedValue<number>(0);
+
+  /**
+   * Derive total from toasts.length so the animated opacity/scale/translateY
+   * interpolations always use the real count.  Manual increment/decrement
+   * was prone to drift when hide + show ran in the same tick or when
+   * auto-dismiss raced with a manual hide (stale-closure mismatch).
+   */
+  useEffect(() => {
+    total.set(toasts.length);
+  }, [toasts.length, total]);
+
+  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 } });
+
+      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;
+      });
+    },
+    [heights],
+  );
+
+  /**
+   * 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>();
+    let frontmostId: string | null = null;
+    for (const toast of toasts) {
+      if (toast.pendingRemoval) {
+        pending.add(toast.id);
+      } else {
+        frontmostId = toast.id;
+      }
+    }
+    return {
+      remove: (id: string) => remove([id]),
+      pendingRemovalIds: pending,
+      frontmostId,
+    };
+  }, [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),
+          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),
+          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++)}`;
+
+      // 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,
+          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],
+  );
+
+  return (
+    <ToastConfigContext.Provider value={globalConfig}>
+      <ToasterContext.Provider value={contextValue}>
+        <ToastLifecycleContext.Provider value={lifecycleContextValue}>
+          {children}
+          {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, index) => (
+                  <ToastItemRenderer
+                    key={toastItem.id}
+                    toastItem={toastItem}
+                    show={show}
+                    hide={hide}
+                    index={index}
+                    total={total}
+                    heights={heights}
+                    maxVisibleToasts={maxVisibleToasts}
+                  />
+                ))}
+              </View>
+            </InsetsContainer>
+          )}
+        </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;
+  }
+}

package/src/providers/toast/toast-config.context.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+import type { ToastGlobalConfig } from './types';
+
+/**
+ * Context for global toast configuration
+ * Extracted to separate file to avoid circular dependencies with toast component
+ */
+const ToastConfigContext = createContext<ToastGlobalConfig | undefined>(undefined);
+
+/**
+ * Hook to access global toast configuration
+ *
+ * @returns Global toast configuration or undefined if not set
+ *
+ * @example
+ * ```tsx
+ * const globalConfig = useToastConfig();
+ * // Use globalConfig.color, globalConfig.placement, etc.
+ * ```
+ */
+export function useToastConfig(): ToastGlobalConfig | undefined {
+  return useContext(ToastConfigContext);
+}
+
+export { ToastConfigContext };

package/src/providers/toast/toast-item-renderer.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+import type { ToastItemRendererProps } from './types';
+
+/**
+ * Memoized toast item component to prevent unnecessary re-renders
+ * Only re-renders when the toast item itself changes
+ */
+export const ToastItemRenderer = memo(
+  ({ toastItem, show, hide, index, total, heights, maxVisibleToasts }: ToastItemRendererProps) => {
+    if (typeof toastItem.component !== 'function') {
+      throw new Error('Toast component must be a function that receives ToastComponentProps');
+    }
+
+    const content = toastItem.component({
+      id: toastItem.id,
+      index,
+      total,
+      heights,
+      maxVisibleToasts,
+      show,
+      hide,
+    });
+
+    return content;
+  },
+  (prevProps, nextProps) => {
+    // Only re-render if the toast ID, component reference, index, or
+    // pending-removal flag changed. `pendingRemoval` flips when the
+    // provider marks a toast closed on web so the Toast component can
+    // play its exit transition — the renderer must propagate that
+    // change even though the id and component reference are unchanged.
+    // show, hide, total, and heights are stable references.
+    return (
+      prevProps.toastItem.id === nextProps.toastItem.id &&
+      prevProps.toastItem.component === nextProps.toastItem.component &&
+      prevProps.toastItem.pendingRemoval === nextProps.toastItem.pendingRemoval &&
+      prevProps.index === nextProps.index
+    );
+  },
+);