@oxyhq/bloom 0.50.2 → 0.51.1

package/src/toast/toast-store.ts

@@ -0,0 +1,432 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/toast-store.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * The auto-close timers were lifted out into `toast-timers.ts`. Everything this
+ * module touches is pure JavaScript — `react` (for `createRef`), `./constants`,
+ * `./toast-comparator`, `./toast-timers` and type-only `./types`. Keep it that
+ * way: nothing here may reach React Native or Reanimated, or the store stops
+ * being testable without a platform.
+ */
+import * as React from 'react';
+import { ENTERING_ANIMATION_DURATION, toastDefaults } from './constants';
+import { areToastsEqual } from './toast-comparator';
+import { ToastTimerRegistry } from './toast-timers';
+import type {
+  ToastProps,
+  ToastRef,
+  ToastStoreConfig,
+  ToastStoreState,
+} from './types';
+
+type Subscriber = () => void;
+
+/** How long the collapse gesture stays latched, so the same tap cannot re-expand. */
+const COLLAPSE_COOLDOWN = 100;
+
+class ToastStore {
+  private state: ToastStoreState = {
+    toasts: [],
+    toastsById: new Map(),
+    toastsCounter: 1,
+    toastRefs: {},
+    shouldShowOverlay: false,
+    toastHeights: {},
+    isExpanded: false,
+  };
+
+  private subscribers = new Set<Subscriber>();
+  private config: ToastStoreConfig = {};
+  private timers = new ToastTimerRegistry();
+  private hideOverlayTimeout: ReturnType<typeof setTimeout> | null = null;
+  private pendingPromises = new Set<string | number>();
+  private collapseCooldown = false;
+  private collapseCooldownTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  subscribe = (callback: Subscriber) => {
+    this.subscribers.add(callback);
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  };
+
+  /** Stable while nothing has changed — safe as a `useSyncExternalStore` snapshot. */
+  getSnapshot = (): ToastStoreState => {
+    return this.state;
+  };
+
+  setConfig = (config: ToastStoreConfig) => {
+    this.config = config;
+  };
+
+  private notify = () => {
+    this.subscribers.forEach((callback) => callback());
+  };
+
+  private cloneIndex = (): Map<string | number, ToastProps> => {
+    return new Map(this.state.toastsById);
+  };
+
+  private resolveDuration = (duration: number | undefined): number => {
+    return duration ?? this.config.duration ?? toastDefaults.duration;
+  };
+
+  private scheduleAutoClose = (id: string | number, duration: number) => {
+    this.timers.start({
+      id,
+      duration,
+      onComplete: () => {
+        this.dismissToast(id, 'onAutoClose');
+      },
+    });
+  };
+
+  pauseTimer = (id: string | number) => {
+    this.timers.pause(id);
+  };
+
+  resumeTimer = (id: string | number) => {
+    this.timers.resume(id);
+  };
+
+  pauseAllTimers = () => {
+    this.timers.pauseAll();
+  };
+
+  resumeAllTimers = () => {
+    this.timers.resumeAll();
+  };
+
+  private handlePromise = async (toast: ToastProps) => {
+    const { id, promiseOptions } = toast;
+
+    if (!promiseOptions || this.pendingPromises.has(id)) {
+      return;
+    }
+
+    this.pendingPromises.add(id);
+
+    try {
+      // Already the success title — see `PromiseOptions`.
+      const title = await promiseOptions.promise;
+
+      if (!this.state.toastsById.has(id)) return;
+
+      this.addToast({
+        title,
+        id,
+        variant: 'success',
+        promiseOptions: undefined,
+        duration: toast.duration,
+        styles: promiseOptions.styles?.success,
+      });
+    } catch (error) {
+      if (!this.state.toastsById.has(id)) return;
+
+      this.addToast({
+        title:
+          typeof promiseOptions.error === 'function'
+            ? promiseOptions.error(error)
+            : promiseOptions.error,
+        id,
+        variant: 'error',
+        promiseOptions: undefined,
+        duration: toast.duration,
+        styles: promiseOptions.styles?.error,
+      });
+    } finally {
+      this.pendingPromises.delete(id);
+    }
+  };
+
+  addToast = (
+    options: Omit<
+      ToastProps,
+      'id' | 'numberOfToasts' | 'index' | 'orderedToastIds'
+    > & {
+      id?: string | number;
+    },
+  ): string | number => {
+    const providedId =
+      typeof options.id === 'number' ||
+      (typeof options.id === 'string' && options.id.length > 0)
+        ? options.id
+        : undefined;
+
+    const id: string | number = providedId ?? this.state.toastsCounter;
+    const nextCounter =
+      providedId === undefined
+        ? this.state.toastsCounter + 1
+        : this.state.toastsCounter;
+
+    const duration = this.resolveDuration(options.duration);
+
+    const newToast: ToastProps = {
+      ...options,
+      id,
+      variant: options.variant ?? toastDefaults.variant,
+      duration,
+      // Assigned by the Toaster at render time from the live position group.
+      numberOfToasts: 0,
+      index: 0,
+      orderedToastIds: [],
+    };
+
+    const existingToast = this.state.toastsById.get(id);
+
+    if (existingToast && providedId !== undefined) {
+      const shouldWiggle =
+        this.config.autoWiggleOnUpdate === 'always' ||
+        (this.config.autoWiggleOnUpdate === 'toast-change' &&
+          !areToastsEqual(newToast, existingToast));
+
+      if (shouldWiggle) {
+        this.wiggleToast(providedId);
+      }
+
+      const updatedToasts = this.state.toasts.map((currentToast) =>
+        currentToast.id === providedId
+          ? { ...currentToast, ...newToast }
+          : currentToast,
+      );
+
+      // The update may have changed the duration, so the timer restarts.
+      if (!newToast.promiseOptions) {
+        this.scheduleAutoClose(id, duration);
+      }
+
+      const updatedIndex = this.cloneIndex();
+      const updatedEntry = updatedToasts.find((t) => t.id === providedId);
+      if (updatedEntry) {
+        updatedIndex.set(providedId, updatedEntry);
+      }
+
+      this.state = {
+        ...this.state,
+        toasts: updatedToasts,
+        toastsById: updatedIndex,
+        shouldShowOverlay: true,
+      };
+    } else {
+      const newToasts: ToastProps[] = [...this.state.toasts, newToast];
+
+      const newToastRefs = { ...this.state.toastRefs };
+      if (!(id in newToastRefs)) {
+        newToastRefs[id] = React.createRef<ToastRef>();
+      }
+
+      const visibleToasts =
+        this.config.visibleToasts ?? toastDefaults.visibleToasts;
+      const newIndex = this.cloneIndex();
+      newIndex.set(id, newToast);
+      const updatedHeights = { ...this.state.toastHeights };
+      let heightsChanged = false;
+
+      if (newToasts.length > visibleToasts) {
+        const removedToast = newToasts.shift();
+        if (removedToast) {
+          this.timers.clear(removedToast.id);
+          newIndex.delete(removedToast.id);
+          delete newToastRefs[removedToast.id];
+          if (removedToast.id in updatedHeights) {
+            delete updatedHeights[removedToast.id];
+            heightsChanged = true;
+          }
+        }
+      }
+
+      this.state = {
+        ...this.state,
+        toasts: newToasts,
+        toastsById: newIndex,
+        toastRefs: newToastRefs,
+        toastHeights: heightsChanged ? updatedHeights : this.state.toastHeights,
+        toastsCounter: nextCounter,
+        shouldShowOverlay: true,
+      };
+
+      if (newToast.promiseOptions) {
+        // A promise toast has no auto-close timer until it settles.
+        void this.handlePromise(newToast);
+      } else {
+        this.scheduleAutoClose(id, duration);
+      }
+    }
+
+    if (this.hideOverlayTimeout) {
+      clearTimeout(this.hideOverlayTimeout);
+      this.hideOverlayTimeout = null;
+    }
+
+    this.notify();
+    return id;
+  };
+
+  /** Omit `id` to dismiss every toast. */
+  dismissToast = (
+    id: string | number | undefined,
+    origin?: 'onDismiss' | 'onAutoClose',
+  ): string | number | undefined => {
+    if (id == null) {
+      this.timers.clearAll();
+      this.state.toasts.forEach((currentToast) => {
+        if (origin === 'onDismiss') {
+          currentToast.onDismiss?.(currentToast.id);
+        } else {
+          currentToast.onAutoClose?.(currentToast.id);
+        }
+      });
+
+      this.state = {
+        ...this.state,
+        toasts: [],
+        toastsById: new Map(),
+        toastsCounter: 1,
+        toastRefs: {},
+        toastHeights: {},
+        isExpanded: false,
+      };
+      this.scheduleHideOverlay();
+      this.notify();
+      return undefined;
+    }
+
+    this.timers.clear(id);
+
+    const toastForCallback = this.state.toastsById.get(id);
+
+    const filteredToasts = this.state.toasts.filter(
+      (currentToast) => currentToast.id !== id,
+    );
+
+    const updatedHeights = { ...this.state.toastHeights };
+    delete updatedHeights[id];
+
+    const updatedRefs = { ...this.state.toastRefs };
+    delete updatedRefs[id];
+
+    const shouldAutoCollapse =
+      filteredToasts.length <= 1 && this.state.isExpanded;
+
+    const updatedIndex = this.cloneIndex();
+    updatedIndex.delete(id);
+
+    this.state = {
+      ...this.state,
+      toasts: filteredToasts,
+      toastsById: updatedIndex,
+      toastRefs: updatedRefs,
+      toastHeights: updatedHeights,
+      isExpanded: shouldAutoCollapse ? false : this.state.isExpanded,
+    };
+
+    if (shouldAutoCollapse) {
+      this.timers.resumeAll();
+    }
+
+    if (origin === 'onDismiss') {
+      toastForCallback?.onDismiss?.(id);
+    } else {
+      toastForCallback?.onAutoClose?.(id);
+    }
+
+    if (filteredToasts.length === 0) {
+      this.scheduleHideOverlay();
+    }
+
+    this.notify();
+    return id;
+  };
+
+  /** Keeps the overlay mounted until the last exit animation has finished. */
+  private scheduleHideOverlay = () => {
+    if (this.hideOverlayTimeout) {
+      clearTimeout(this.hideOverlayTimeout);
+    }
+
+    this.hideOverlayTimeout = setTimeout(() => {
+      this.state = {
+        ...this.state,
+        shouldShowOverlay: false,
+      };
+      this.hideOverlayTimeout = null;
+      this.notify();
+    }, ENTERING_ANIMATION_DURATION);
+  };
+
+  wiggleToast = (id: string | number) => {
+    const toast = this.state.toastsById.get(id);
+    if (!toast) {
+      return;
+    }
+
+    this.state.toastRefs[id]?.current?.wiggle();
+
+    // A wiggle re-draws attention, so the reading time starts over — except for
+    // toasts that never auto-close.
+    if (!toast.promiseOptions) {
+      this.scheduleAutoClose(id, this.resolveDuration(toast.duration));
+    }
+  };
+
+  getToastRef = (
+    id: string | number,
+  ): React.RefObject<ToastRef | null> | undefined => {
+    return this.state.toastRefs[id];
+  };
+
+  setToastHeight = (id: string | number, height: number) => {
+    if (this.state.toastHeights[id] === height) return;
+    // A NEW object, never an in-place write — see `ToastStoreState.toastHeights`.
+    this.state = {
+      ...this.state,
+      toastHeights: {
+        ...this.state.toastHeights,
+        [id]: height,
+      },
+    };
+    this.notify();
+  };
+
+  expand = () => {
+    this.state = {
+      ...this.state,
+      isExpanded: true,
+    };
+    this.timers.pauseAll();
+    this.notify();
+  };
+
+  collapse = () => {
+    this.state = {
+      ...this.state,
+      isExpanded: false,
+    };
+
+    this.collapseCooldown = true;
+    if (this.collapseCooldownTimeout) {
+      clearTimeout(this.collapseCooldownTimeout);
+    }
+    this.collapseCooldownTimeout = setTimeout(() => {
+      this.collapseCooldown = false;
+      this.collapseCooldownTimeout = null;
+    }, COLLAPSE_COOLDOWN);
+
+    this.timers.resumeAll();
+    this.notify();
+  };
+
+  toggleExpand = () => {
+    if (!this.state.isExpanded && this.collapseCooldown) {
+      return;
+    }
+
+    if (this.state.isExpanded) {
+      this.collapse();
+    } else {
+      this.expand();
+    }
+  };
+}
+
+export const toastStore = new ToastStore();

package/src/toast/toast-timers.ts

@@ -0,0 +1,124 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/toast-store.ts:78-154
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Upstream keeps auto-close timers inside the store's React state even though no
+ * renderer ever reads them. Extracting them keeps the store's snapshot free of
+ * mutable side-channel data and makes the timing rules testable on their own.
+ */
+import { ENTERING_ANIMATION_DURATION } from './constants';
+
+type ToastTimer = {
+  timeout: ReturnType<typeof setTimeout>;
+  startTime: number;
+  remainingTime: number;
+  isPaused: boolean;
+  onComplete: () => void;
+};
+
+/**
+ * A toast resumed after the app came back to the foreground always gets at least
+ * this long on screen — whatever was left of its duration when it was paused is
+ * usually too short to read on re-entry.
+ */
+const MIN_RESUMED_DURATION = 1000;
+
+export class ToastTimerRegistry {
+  private timers = new Map<string | number, ToastTimer>();
+
+  /**
+   * Non-finite durations (`Infinity`, `NaN`) mean "never auto-close" — starting a
+   * timer for them would either be pointless or fire immediately.
+   */
+  start = ({
+    id,
+    duration,
+    onComplete,
+  }: {
+    id: string | number;
+    duration: number;
+    onComplete: () => void;
+  }) => {
+    if (!Number.isFinite(duration)) {
+      return;
+    }
+
+    this.clear(id);
+
+    // The toast is not fully on screen until the enter animation lands, so the
+    // readable duration starts there.
+    const timeout = setTimeout(() => {
+      this.timers.delete(id);
+      onComplete();
+    }, ENTERING_ANIMATION_DURATION + duration);
+
+    this.timers.set(id, {
+      timeout,
+      startTime: Date.now(),
+      remainingTime: duration,
+      isPaused: false,
+      onComplete,
+    });
+  };
+
+  clear = (id: string | number) => {
+    const timer = this.timers.get(id);
+    if (!timer) {
+      return;
+    }
+    clearTimeout(timer.timeout);
+    this.timers.delete(id);
+  };
+
+  clearAll = () => {
+    for (const timer of this.timers.values()) {
+      clearTimeout(timer.timeout);
+    }
+    this.timers.clear();
+  };
+
+  /**
+   * Banks the time left. The enter animation's head start is intentionally not
+   * subtracted, so a paused toast keeps up to `ENTERING_ANIMATION_DURATION` of
+   * slack — the same as upstream.
+   */
+  pause = (id: string | number) => {
+    const timer = this.timers.get(id);
+    if (!timer || timer.isPaused) {
+      return;
+    }
+    clearTimeout(timer.timeout);
+    timer.remainingTime = timer.remainingTime - (Date.now() - timer.startTime);
+    timer.isPaused = true;
+  };
+
+  resume = (id: string | number) => {
+    const timer = this.timers.get(id);
+    if (!timer || !timer.isPaused) {
+      return;
+    }
+
+    const { onComplete } = timer;
+    timer.isPaused = false;
+    timer.startTime = Date.now();
+    timer.timeout = setTimeout(
+      () => {
+        this.timers.delete(id);
+        onComplete();
+      },
+      Math.max(timer.remainingTime, MIN_RESUMED_DURATION),
+    );
+  };
+
+  pauseAll = () => {
+    for (const id of [...this.timers.keys()]) {
+      this.pause(id);
+    }
+  };
+
+  resumeAll = () => {
+    for (const id of [...this.timers.keys()]) {
+      this.resume(id);
+    }
+  };
+}