goey-toast 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -29,6 +29,29 @@ function setGoeyBounce(bounce) {
 function getGoeyBounce() {
   return _bounce;
 }
+var _visibleToasts = 3;
+function setGoeyVisibleToasts(n) {
+  _visibleToasts = n;
+}
+function getGoeyVisibleToasts() {
+  return _visibleToasts;
+}
+var _containerHovered = false;
+var _hoverSubs = /* @__PURE__ */ new Set();
+function setContainerHovered(hovered) {
+  if (_containerHovered === hovered) return;
+  _containerHovered = hovered;
+  _hoverSubs.forEach((cb) => cb(hovered));
+}
+function getContainerHovered() {
+  return _containerHovered;
+}
+function subscribeContainerHovered(cb) {
+  _hoverSubs.add(cb);
+  return () => {
+    _hoverSubs.delete(cb);
+  };
+}
 function GoeyToaster({
   position = "bottom-right",
   duration,
@@ -53,6 +76,43 @@ function GoeyToaster({
   react.useEffect(() => {
     setGoeyBounce(bounce);
   }, [bounce]);
+  react.useEffect(() => {
+    setGoeyVisibleToasts(visibleToasts ?? 3);
+  }, [visibleToasts]);
+  react.useEffect(() => {
+    let expandObs = null;
+    let currentOl = null;
+    const syncFromExpanded = (ol) => {
+      const anyExpanded = ol.querySelector('[data-sonner-toast][data-expanded="true"]') !== null;
+      setContainerHovered(anyExpanded);
+    };
+    const attach = (ol) => {
+      if (ol === currentOl) return;
+      expandObs?.disconnect();
+      currentOl = ol;
+      expandObs = new MutationObserver(() => syncFromExpanded(ol));
+      expandObs.observe(ol, { attributes: true, attributeFilter: ["data-expanded"], subtree: true });
+      syncFromExpanded(ol);
+    };
+    const el = document.querySelector("[data-sonner-toaster]");
+    if (el) attach(el);
+    const bodyObs = new MutationObserver(() => {
+      const found = document.querySelector("[data-sonner-toaster]");
+      if (found) {
+        attach(found);
+      } else if (currentOl) {
+        expandObs?.disconnect();
+        currentOl = null;
+        setContainerHovered(false);
+      }
+    });
+    bodyObs.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      bodyObs.disconnect();
+      expandObs?.disconnect();
+      setContainerHovered(false);
+    };
+  }, []);
   react.useEffect(() => {
     if (process.env.NODE_ENV !== "development") return;
     const el = document.createElement("div");
@@ -83,7 +143,7 @@ function GoeyToaster({
       expand,
       closeButton,
       richColors,
-      visibleToasts,
+      visibleToasts: 99,
       dir
     }
   );
@@ -303,7 +363,7 @@ function registerSonnerObserver(ol, callback) {
     });
     observer.observe(ol, {
       attributes: true,
-      attributeFilter: ["style"],
+      attributeFilter: ["style", "data-visible"],
       subtree: true,
       childList: true
     });
@@ -319,7 +379,7 @@ function registerSonnerObserver(ol, callback) {
     }
   };
 }
-function syncSonnerHeights(wrapperEl) {
+function syncSonnerHeights(wrapperEl, includeOffsets = false) {
   if (!wrapperEl) return;
   const li = wrapperEl.closest("[data-sonner-toast]");
   if (!li?.parentElement) return;
@@ -327,12 +387,42 @@ function syncSonnerHeights(wrapperEl) {
   const toasts = Array.from(
     ol.querySelectorAll(":scope > [data-sonner-toast]")
   );
-  for (const t of toasts) {
+  if (toasts.length === 0) return;
+  const heights = toasts.map((t) => {
+    if (t.getAttribute("data-visible") === "false") return 0;
     const content = t.firstElementChild;
-    const height = content ? content.getBoundingClientRect().height : 0;
-    if (height > 0) {
-      t.style.setProperty("--initial-height", `${height}px`);
+    const h = content ? content.getBoundingClientRect().height : 0;
+    return h > 0 ? h : PH;
+  });
+  const isExpanded = includeOffsets && toasts[0]?.getAttribute("data-expanded") === "true";
+  if (isExpanded) {
+    for (const t of toasts) t.style.setProperty("transition", "none", "important");
+  }
+  for (let i = 0; i < toasts.length; i++) {
+    toasts[i].style.setProperty("--initial-height", `${heights[i]}px`);
+  }
+  if (!includeOffsets) {
+    if (isExpanded) {
+      for (const t of toasts) t.style.removeProperty("transition");
     }
+    return;
+  }
+  const gapStr = getComputedStyle(ol).getPropertyValue("--gap").trim();
+  const gap = parseFloat(gapStr) || 14;
+  let runningOffset = 0;
+  for (let i = toasts.length - 1; i >= 0; i--) {
+    if (toasts[i].getAttribute("data-visible") === "false") {
+      toasts[i].style.setProperty("--offset", "0px");
+      continue;
+    }
+    toasts[i].style.setProperty("--offset", `${runningOffset}px`);
+    if (i > 0) {
+      runningOffset += heights[i] + gap;
+    }
+  }
+  if (isExpanded) {
+    void ol.offsetHeight;
+    for (const t of toasts) t.style.removeProperty("transition");
   }
 }
 function morphPath(pw, bw, th, t) {
@@ -461,6 +551,8 @@ var GoeyToast = ({
   const [dismissing, setDismissing] = react.useState(false);
   const [hovered, setHovered] = react.useState(false);
   const hoveredRef = react.useRef(false);
+  const containerHoveredRef = react.useRef(getContainerHovered());
+  const [containerHovered, setContainerHoveredState] = react.useState(getContainerHovered());
   const collapsingRef = react.useRef(false);
   const preDismissRef = react.useRef(false);
   const collapseEndTime = react.useRef(0);
@@ -489,6 +581,12 @@ var GoeyToast = ({
   react.useEffect(() => {
     dimsRef.current = dims;
   }, [dims]);
+  react.useEffect(() => {
+    return subscribeContainerHovered((h) => {
+      containerHoveredRef.current = h;
+      setContainerHoveredState(h);
+    });
+  }, []);
   const flush = react.useCallback(() => {
     const { pw: p, bw: b, th: h } = aDims.current;
     if (p <= 0 || b <= 0 || h <= 0) return;
@@ -749,6 +847,7 @@ var GoeyToast = ({
             th: targetDims.th + (savedDims.th - targetDims.th) * t
           };
           flush();
+          syncSonnerHeights(wrapperRef.current, true);
         },
         onComplete: () => {
           morphTRef.current = 0;
@@ -757,6 +856,7 @@ var GoeyToast = ({
           collapseEndTime.current = Date.now();
           aDims.current = { ...targetDims };
           flush();
+          syncSonnerHeights(wrapperRef.current, true);
           setShowBody(false);
         }
       });
@@ -777,10 +877,15 @@ var GoeyToast = ({
     const displayMs = timing?.displayDuration ?? DEFAULT_DISPLAY_DURATION;
     const fullDelay = displayMs - expandDelayMs - collapseMs;
     if (fullDelay <= 0) return;
-    if (hoveredRef.current) return;
+    if (hoveredRef.current || containerHoveredRef.current) return;
     const delay = remainingRef.current ?? fullDelay;
     timerStartRef.current = Date.now();
     const timer = setTimeout(() => {
+      if (hoveredRef.current || containerHoveredRef.current) {
+        const elapsed = Date.now() - timerStartRef.current;
+        remainingRef.current = Math.max(0, delay - elapsed);
+        return;
+      }
       remainingRef.current = null;
       expandedDimsRef.current = { ...aDims.current };
       collapsingRef.current = true;
@@ -792,15 +897,15 @@ var GoeyToast = ({
       clearTimeout(timer);
       const elapsed = Date.now() - timerStartRef.current;
       const remaining = delay - elapsed;
-      if (remaining > 0 && hoveredRef.current) {
+      if (remaining > 0 && (hoveredRef.current || containerHoveredRef.current)) {
         remainingRef.current = remaining;
       }
     };
-  }, [showBody, actionSuccess, dismissing, prefersReducedMotion, hovered]);
+  }, [showBody, actionSuccess, dismissing, prefersReducedMotion, hovered, containerHovered]);
   const canExpand = hasDescription || hasAction;
   const reExpandingRef = react.useRef(false);
   react.useEffect(() => {
-    if (!hovered || !canExpand || !dismissing) return;
+    if (!hovered && !containerHovered || !canExpand || !dismissing) return;
     morphCtrl.current?.stop();
     collapsingRef.current = false;
     preDismissRef.current = false;
@@ -823,27 +928,30 @@ var GoeyToast = ({
             th: startDims.th + (target.th - startDims.th) * t
           };
           flush();
+          syncSonnerHeights(wrapperRef.current, true);
         },
         onComplete: () => {
           morphTRef.current = 1;
           aDims.current = { ...dimsRef.current };
           reExpandingRef.current = false;
           flush();
-          syncSonnerHeights(wrapperRef.current);
+          syncSonnerHeights(wrapperRef.current, true);
         }
       });
     });
     return () => {
       morphCtrl.current?.stop();
     };
-  }, [hovered, dismissing, canExpand]);
+  }, [hovered, containerHovered, dismissing, canExpand]);
   react.useEffect(() => {
-    if (!toastId || !dismissing || showBody || hovered) return;
+    if (!toastId || !dismissing || showBody) return;
     const t = setTimeout(() => {
-      if (!hoveredRef.current) sonner.toast.dismiss(toastId);
+      if (!hoveredRef.current && !containerHoveredRef.current) {
+        sonner.toast.dismiss(toastId);
+      }
     }, 800);
     return () => clearTimeout(t);
-  }, [dismissing, showBody, hovered, toastId]);
+  }, [dismissing, showBody, toastId]);
   react.useEffect(() => {
     if (!toastId || !actionSuccess || showBody) return;
     const t = setTimeout(() => sonner.toast.dismiss(toastId), 1200);
@@ -863,7 +971,7 @@ var GoeyToast = ({
       morphTRef.current = 1;
       aDims.current = { ...dimsRef.current };
       flush();
-      syncSonnerHeights(wrapperRef.current);
+      syncSonnerHeights(wrapperRef.current, true);
       return;
     }
     const raf = requestAnimationFrame(() => {
@@ -882,12 +990,13 @@ var GoeyToast = ({
             th: startDims.th + (target.th - startDims.th) * t
           };
           flush();
+          syncSonnerHeights(wrapperRef.current, true);
         },
         onComplete: () => {
           morphTRef.current = 1;
           aDims.current = { ...dimsRef.current };
           flush();
-          syncSonnerHeights(wrapperRef.current);
+          syncSonnerHeights(wrapperRef.current, true);
         }
       });
     });
@@ -937,9 +1046,26 @@ var GoeyToast = ({
     if (!wrapper) return;
     const ol = wrapper.closest("[data-sonner-toast]")?.parentElement;
     if (!ol) return;
-    return registerSonnerObserver(ol, () => {
-      syncSonnerHeights(wrapper);
+    const unregister = registerSonnerObserver(ol, () => {
+      syncSonnerHeights(wrapper, true);
+    });
+    const expandObs = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === "attributes" && m.attributeName === "data-expanded" && m.target.getAttribute("data-expanded") === "true") {
+          syncSonnerHeights(wrapper, true);
+          break;
+        }
+      }
+    });
+    expandObs.observe(ol, {
+      attributes: true,
+      attributeFilter: ["data-expanded"],
+      subtree: true
     });
+    return () => {
+      unregister();
+      expandObs.disconnect();
+    };
   }, []);
   const handleActionClick = react.useCallback(() => {
     if (!effectiveAction) return;
@@ -1067,6 +1193,20 @@ var ToastErrorBoundary = class extends react.Component {
   }
 };
 var DEFAULT_EXPANDED_DURATION = 4e3;
+var _activeIds = /* @__PURE__ */ new Set();
+var _queue = [];
+function _processQueue() {
+  const max = getGoeyVisibleToasts();
+  while (_queue.length > 0 && _activeIds.size < max) {
+    const next = _queue.shift();
+    _activeIds.add(next.id);
+    next.create();
+  }
+}
+function _onToastDismissed(id) {
+  if (!_activeIds.delete(id)) return;
+  _processQueue();
+}
 function GoeyToastWrapper({
   initialPhase,
   title,
@@ -1081,8 +1221,19 @@ function GoeyToastWrapper({
   timing,
   spring,
   bounce,
-  toastId
+  toastId,
+  activeId
 }) {
+  const mountedRef = react.useRef(true);
+  react.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      setTimeout(() => {
+        if (!mountedRef.current) _onToastDismissed(activeId);
+      }, 100);
+    };
+  }, [activeId]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
     GoeyToast,
     {
@@ -1112,6 +1263,16 @@ function PromiseToastWrapper({
   const [title, setTitle] = react.useState(data.loading);
   const [description, setDescription] = react.useState(data.description?.loading);
   const [action, setAction] = react.useState(void 0);
+  const mountedRef = react.useRef(true);
+  react.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      setTimeout(() => {
+        if (!mountedRef.current) _onToastDismissed(toastId);
+      }, 100);
+    };
+  }, [toastId]);
   react.useEffect(() => {
     const resetDuration = (hasExpandedContent) => {
       const baseDuration = data.timing?.displayDuration ?? (hasExpandedContent ? DEFAULT_EXPANDED_DURATION : void 0);
@@ -1164,31 +1325,55 @@ function createGoeyToast(title, type, options) {
   const baseDuration = options?.timing?.displayDuration ?? options?.duration ?? (options?.description ? DEFAULT_EXPANDED_DURATION : void 0);
   const duration = hasExpandedContent ? Infinity : baseDuration;
   const toastId = options?.id ?? Math.random().toString(36).slice(2);
-  return sonner.toast.custom(
-    () => /* @__PURE__ */ jsxRuntime.jsx(
-      GoeyToastWrapper,
+  const create = () => {
+    sonner.toast.custom(
+      () => /* @__PURE__ */ jsxRuntime.jsx(
+        GoeyToastWrapper,
+        {
+          initialPhase: type,
+          title,
+          type,
+          description: options?.description,
+          action: options?.action,
+          icon: options?.icon,
+          classNames: options?.classNames,
+          fillColor: options?.fillColor,
+          borderColor: options?.borderColor,
+          borderWidth: options?.borderWidth,
+          timing: options?.timing,
+          spring: options?.spring,
+          bounce: options?.bounce,
+          toastId: hasExpandedContent ? toastId : void 0,
+          activeId: toastId
+        }
+      ),
       {
-        initialPhase: type,
-        title,
-        type,
-        description: options?.description,
-        action: options?.action,
-        icon: options?.icon,
-        classNames: options?.classNames,
-        fillColor: options?.fillColor,
-        borderColor: options?.borderColor,
-        borderWidth: options?.borderWidth,
-        timing: options?.timing,
-        spring: options?.spring,
-        bounce: options?.bounce,
-        toastId: hasExpandedContent ? toastId : void 0
+        duration,
+        id: toastId
       }
-    ),
-    {
-      duration,
-      id: toastId
+    );
+  };
+  if (_activeIds.size < getGoeyVisibleToasts()) {
+    _activeIds.add(toastId);
+    create();
+  } else {
+    _queue.push({ id: toastId, create });
+  }
+  return toastId;
+}
+function dismissGoeyToast(id) {
+  if (id != null) {
+    const idx = _queue.findIndex((q) => q.id === id);
+    if (idx !== -1) {
+      _queue.splice(idx, 1);
+      return;
     }
-  );
+    sonner.toast.dismiss(id);
+  } else {
+    _queue.length = 0;
+    _activeIds.clear();
+    sonner.toast.dismiss();
+  }
 }
 var goeyToast = Object.assign(
   (title, options) => createGoeyToast(title, "default", options),
@@ -1199,12 +1384,21 @@ var goeyToast = Object.assign(
     info: (title, options) => createGoeyToast(title, "info", options),
     promise: (promise, data) => {
       const id = Math.random().toString(36).slice(2);
-      return sonner.toast.custom(() => /* @__PURE__ */ jsxRuntime.jsx(PromiseToastWrapper, { promise, data, toastId: id }), {
-        id,
-        duration: data.timing?.displayDuration != null || data.description ? Infinity : void 0
-      });
+      const create = () => {
+        sonner.toast.custom(() => /* @__PURE__ */ jsxRuntime.jsx(PromiseToastWrapper, { promise, data, toastId: id }), {
+          id,
+          duration: data.timing?.displayDuration != null || data.description ? Infinity : void 0
+        });
+      };
+      if (_activeIds.size < getGoeyVisibleToasts()) {
+        _activeIds.add(id);
+        create();
+      } else {
+        _queue.push({ id, create });
+      }
+      return id;
     },
-    dismiss: sonner.toast.dismiss
+    dismiss: dismissGoeyToast
   }
 );