@threadlabs/looma 0.26.26 → 0.27.1

package/components/ui-toast/ui-toast.js

@@ -4,7 +4,7 @@ function inputFor(event) {
   return event.detail === 0 ? "keyboard" : "pointer";
 }
 
-/** Authored toasts request dismissal; their consumer owns removal from the rendered list. */
+/** An authored toast hides itself when dismissed, like a dialog closing; clearing hidden shows it again. */
 function connect(host) {
   const element = host.element;
   const { action } = host.refs;
@@ -19,11 +19,13 @@ function connect(host) {
     if (dismissed) return;
     dismissed = true;
     clearTimeout(timer);
+    element.hidden = true;
     host.dispatch("dismiss", { id: element.id, reason, trigger });
   };
   const start = () => {
     clearTimeout(timer);
-    if (paused || dismissed || remaining <= 0) return;
+    // The duration counts only while the toast is shown; a hidden toast has nothing to time out.
+    if (paused || dismissed || element.hidden || remaining <= 0) return;
     started = Date.now();
     timer = setTimeout(() => dismiss("timeout", "programmatic"), remaining);
   };
@@ -50,6 +52,19 @@ function connect(host) {
     remaining = duration;
     start();
   });
+  // Hidden by the app, the timer stops; shown (again), it is a fresh request with the full duration.
+  const shown = new MutationObserver(() => {
+    if (element.hidden) {
+      clearTimeout(timer);
+      timer = null;
+      return;
+    }
+    dismissed = false;
+    paused = false;
+    remaining = Math.max(0, Number(host.props.duration.value) || 0);
+    start();
+  });
+  shown.observe(element, { attributes: true, attributeFilter: ["hidden"] });
   element.addEventListener("click", onClick);
   element.addEventListener("pointerenter", pause);
   element.addEventListener("pointerleave", resume);
@@ -58,6 +73,7 @@ function connect(host) {
   start();
   return () => {
     stop();
+    shown.disconnect();
     clearTimeout(timer);
     element.removeEventListener("click", onClick);
     element.removeEventListener("pointerenter", pause);

package/components/ui-toast-region/ui-toast-region.js

@@ -5,13 +5,13 @@ let toastIds = 0;
 
 /**
  * Shows the region while it has authored or generated messages. Generated messages dismiss by
- * action or timeout; authored ui-toast children own their removal through the dismiss event.
+ * action or timeout; authored ui-toast children hide themselves, and a hidden one does not count.
  */
 function connect(host) {
   const element = host.element;
   const [trigger, stopTracking] = trackTrigger(host);
   const toasts = () => host.state.toasts ?? [];
-  const authored = () => Array.from(element.children).some((child) => !child.classList.contains("toast"));
+  const authored = () => Array.from(element.children).some((child) => !child.classList.contains("toast") && !child.hidden);
   let announcedVisible = false;
   const sync = () => {
     const visible = authored() || toasts().length > 0;
@@ -86,8 +86,16 @@ function connect(host) {
     if (event.target === element && typeof event.detail?.message === "string") add(event.detail.message, event.detail);
   };
   const stop = host.effect(sync);
-  const observer = new MutationObserver(sync);
+  // Children come and go, and an authored toast hides itself: watch each child's hidden, not the whole subtree.
+  const watchChildren = () => {
+    for (const child of element.children) observer.observe(child, { attributeFilter: ["hidden"] });
+  };
+  const observer = new MutationObserver(() => {
+    watchChildren();
+    sync();
+  });
   observer.observe(element, { childList: true });
+  watchChildren();
   element.addEventListener("click", onClick);
   element.addEventListener("command", onCommand);
   element.addEventListener("show-toast", onShowToast);