@jirawatpyk/aura-react 4.12.0 → 4.14.0

package/dist/esm/Command.js

@@ -0,0 +1,215 @@
+'use client';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "./Icon.js";
+import { defaultFilter } from "./Combobox.js";
+import { cx, uid } from "./internal.js";
+import { useDensity, useStrings } from "./locale.js";
+import { useModal } from "./useModal.js";
+function isMac() {
+  return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+}
+function Command(props) {
+  const t = useStrings();
+  const density = useDensity();
+  const id = uid(), listId = id + "-list";
+  const box = React.useRef(null);
+  const input = React.useRef(null);
+  const q = React.useState(""), act = React.useState(0);
+  const openRef = React.useRef(props.open);
+  openRef.current = props.open;
+  const close = function() {
+    props.onOpenChange(false);
+  };
+  const modal = useModal(props.open, box, { onEscape: close });
+  React.useEffect(
+    function() {
+      if (props.hotkey === false) return;
+      function onKey2(e) {
+        if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === "k" || e.key === "K")) {
+          e.preventDefault();
+          props.onOpenChange(!openRef.current);
+        }
+      }
+      document.addEventListener("keydown", onKey2, true);
+      return function() {
+        document.removeEventListener("keydown", onKey2, true);
+      };
+    },
+    [props.hotkey, props.onOpenChange]
+  );
+  React.useEffect(
+    function() {
+      if (!props.open) {
+        q[1]("");
+        act[1](0);
+      }
+    },
+    [props.open]
+  );
+  const filter = props.filter || defaultFilter;
+  const shown = (props.items || []).filter(function(it) {
+    return filter(it, q[0]);
+  });
+  const groups = [];
+  shown.forEach(function(it) {
+    const name = it.group || "";
+    let g = groups.filter(function(x) {
+      return x.name === name;
+    })[0];
+    if (!g) groups.push(g = { name, items: [] });
+    g.items.push(it);
+  });
+  const flat = [];
+  groups.forEach(function(g) {
+    g.items.forEach(function(it) {
+      flat.push(it);
+    });
+  });
+  const enabled = flat.map(function(it, i2) {
+    return it.disabled ? -1 : i2;
+  }).filter(function(i2) {
+    return i2 >= 0;
+  });
+  const active = enabled.indexOf(act[0]) >= 0 ? act[0] : enabled.length ? enabled[0] : -1;
+  const optId = function(i2) {
+    return id + "-o" + i2;
+  };
+  React.useEffect(
+    function() {
+      if (!box.current || active < 0) return;
+      const el = box.current.querySelector("#" + CSS.escape(optId(active)));
+      if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+    },
+    [active]
+  );
+  function run(it) {
+    if (it.disabled) return;
+    close();
+    if (it.onSelect) it.onSelect();
+    if (props.onSelect) props.onSelect(it);
+  }
+  function move(dir) {
+    if (!enabled.length) return;
+    const at = enabled.indexOf(active);
+    let n;
+    if (dir === "first") n = 0;
+    else if (dir === "last") n = enabled.length - 1;
+    else n = (at + dir + enabled.length) % enabled.length;
+    act[1](enabled[n]);
+  }
+  function onKey(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Home" && e.ctrlKey) {
+      e.preventDefault();
+      move("first");
+    } else if (e.key === "End" && e.ctrlKey) {
+      e.preventDefault();
+      move("last");
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (active >= 0) run(flat[active]);
+    }
+  }
+  if (!modal.ready) return null;
+  let i = -1;
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-dialog-layer aura-command-layer",
+        "data-density": density,
+        onKeyDown: function(e) {
+          modal.onKeyDown(e);
+          e.stopPropagation();
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: box,
+          role: "dialog",
+          "aria-modal": true,
+          "aria-label": props.label || t.commandMenu,
+          tabIndex: -1,
+          className: cx("aura-command", props.className)
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__search" }, /* @__PURE__ */ React.createElement(Icon, { name: "search", className: "aura-command__search-icon" }), /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            ref: input,
+            "data-autofocus": "",
+            type: "text",
+            role: "combobox",
+            "aria-expanded": true,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": active >= 0 ? optId(active) : void 0,
+            "aria-label": props.label || t.commandMenu,
+            placeholder: props.placeholder || t.commandPlaceholder,
+            className: "aura-command__input",
+            value: q[0],
+            autoComplete: "off",
+            spellCheck: false,
+            onChange: function(e) {
+              q[1](e.target.value);
+              act[1](0);
+            },
+            onKeyDown: onKey
+          }
+        ), /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__list", id: listId, role: "listbox", "aria-label": props.label || t.commandMenu }, !flat.length ? /* @__PURE__ */ React.createElement("p", { className: "aura-command__empty", role: "presentation" }, props.emptyText || t.noMatches) : groups.map(function(g, gi) {
+          const gid = id + "-g" + gi;
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: g.name || gi,
+              role: "group",
+              "aria-labelledby": g.name ? gid : void 0,
+              className: "aura-command__group"
+            },
+            g.name ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__heading", id: gid, role: "presentation" }, g.name) : null,
+            g.items.map(function(it) {
+              i++;
+              const n = i;
+              return /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  key: it.id,
+                  id: optId(n),
+                  role: "option",
+                  "aria-selected": n === active,
+                  "aria-disabled": it.disabled || void 0,
+                  className: cx("aura-command__item", n === active && "is-active", it.disabled && "is-disabled"),
+                  onPointerDown: function(e) {
+                    e.preventDefault();
+                  },
+                  onPointerMove: function() {
+                    if (!it.disabled && act[0] !== n) act[1](n);
+                  },
+                  onClick: function() {
+                    run(it);
+                  }
+                },
+                it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : null,
+                /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label" }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc" }, it.description) : null),
+                it.shortcut ? /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, it.shortcut) : null
+              );
+            })
+          );
+        })),
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
+      )
+    ),
+    document.body
+  );
+}
+export {
+  Command
+};

package/dist/esm/DataTable.js

@@ -15,7 +15,7 @@ const DEFAULT_COLUMNS = [
   { key: "owner", label: "OWNER" }
 ];
 const SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
-const ROW_H = 48, OVERSCAN = 8, FLEX_MIN = 160;
+const ROW_H_DEFAULT = 48, OVERSCAN = 8, FLEX_MIN = 160;
 const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const t = useStrings();
   const columns = props.columns || DEFAULT_COLUMNS;
@@ -99,6 +99,14 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return px != null && boxWidth[0] < px;
   }
   const scrollRef = React.useRef(null);
+  const rowH = React.useState(ROW_H_DEFAULT);
+  const ROW_H = rowH[0];
+  useIsoLayoutEffect(function() {
+    const el = wrapRef.current;
+    if (!el || typeof getComputedStyle === "undefined") return;
+    const v = parseFloat(getComputedStyle(el).getPropertyValue("--aura-table-row-height"));
+    if (v > 0 && v !== rowH[0]) rowH[1](v);
+  });
   const pending = React.useRef(null);
   const resizing = React.useRef(false);
   useIsoLayoutEffect(function() {
@@ -961,6 +969,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       "div",
       {
         ref: wrapMerged,
+        "data-density": props.density,
         className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
         role: "region",
         "aria-label": props.label,
@@ -989,6 +998,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     "div",
     {
       ref: wrapMerged,
+      "data-density": props.density,
       className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
     },
     refreshing ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,

package/dist/esm/Dialog.js

@@ -1,12 +1,13 @@
 'use client';
 import * as React from "react";
-import { useStrings } from "./locale.js";
+import { useStrings, useDensity } from "./locale.js";
 import { createPortal } from "react-dom";
 import { cx, uid, useMergedRef } from "./internal.js";
 import { IconButton } from "./IconButton.js";
 import { useModal } from "./useModal.js";
 const Dialog = React.forwardRef(function Dialog2(props, ref) {
   const t = useStrings();
+  const density = useDensity();
   const own = React.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
   function close() {
     if (props.dismissible !== false && props.onClose) props.onClose();
@@ -19,7 +20,7 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
   });
   if (!modal.ready) return null;
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: merged,
@@ -40,6 +41,7 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
 });
 const Drawer = React.forwardRef(function Drawer2(props, ref) {
   const t = useStrings();
+  const density = useDensity();
   const own = React.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
   function close() {
     if (props.dismissible !== false && props.onClose) props.onClose();
@@ -53,7 +55,7 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
   if (!modal.ready) return null;
   const side = props.side === "left" ? "left" : "right";
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: merged,

package/dist/esm/FilterBar.js

@@ -0,0 +1,112 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Tag } from "./Tag.js";
+import { cx, uid } from "./internal.js";
+import { useStrings } from "./locale.js";
+const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
+  const t = useStrings();
+  const id = uid();
+  const hasSearch = !!props.onSearchChange;
+  const draft = React.useState(props.search || "");
+  const timer = React.useRef(null);
+  const sent = React.useRef(props.search || "");
+  const onChange = React.useRef(props.onSearchChange);
+  onChange.current = props.onSearchChange;
+  React.useEffect(
+    function() {
+      if ((props.search || "") !== sent.current) {
+        sent.current = props.search || "";
+        draft[1](props.search || "");
+      }
+    },
+    [props.search]
+  );
+  React.useEffect(function() {
+    return function() {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  function send(v) {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    if (v === sent.current) return;
+    sent.current = v;
+    if (onChange.current) onChange.current(v);
+  }
+  function type(v) {
+    draft[1](v);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(
+      function() {
+        send(v);
+      },
+      props.searchDelay == null ? 300 : props.searchDelay
+    );
+  }
+  const filters = props.filters || [];
+  const anything = filters.length > 0 || !!(props.search || draft[0]);
+  const count = props.resultCount == null ? null : typeof props.resultCount === "number" ? t.results(props.resultCount) : props.resultCount;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-label": props.label || t.filters,
+      className: cx("aura-filterbar", props.className)
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: "search", className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        id,
+        type: "search",
+        className: "aura-input__control",
+        "aria-label": props.searchLabel || t.search,
+        placeholder: props.searchPlaceholder || props.searchLabel || t.search,
+        value: draft[0],
+        onChange: function(e) {
+          type(e.target.value);
+        },
+        onKeyDown: function(e) {
+          if (e.key === "Enter") send(draft[0]);
+          if (e.key === "Escape" && draft[0]) {
+            e.preventDefault();
+            draft[1]("");
+            send("");
+          }
+        }
+      }
+    ), draft[0] ? /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "x",
+        label: t.clear((props.searchLabel || t.search).toLowerCase()),
+        className: "aura-filterbar__clear-search",
+        onClick: function() {
+          draft[1]("");
+          send("");
+        }
+      }
+    ) : null) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
+    filters.length || props.onClearAll && anything ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
+      return /* @__PURE__ */ React.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);
+    }), props.onClearAll && anything ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-filterbar__clear",
+        onClick: function() {
+          draft[1]("");
+          sent.current = "";
+          if (timer.current) clearTimeout(timer.current);
+          props.onClearAll();
+        }
+      },
+      t.clearFilters
+    ) : null) : null
+  );
+});
+export {
+  FilterBar
+};

package/dist/esm/FormErrorSummary.js

@@ -0,0 +1,76 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid } from "./internal.js";
+import { useStrings } from "./locale.js";
+function items(errors) {
+  if (Array.isArray(errors)) return errors;
+  const out = [];
+  for (const k in errors || {}) {
+    const e = errors[k];
+    if (e && e.message) out.push({ field: k, message: e.message });
+  }
+  return out;
+}
+function fieldElement(field) {
+  if (typeof document === "undefined") return null;
+  return document.getElementById(field) || document.querySelector('[name="' + field.replace(/"/g, '\\"') + '"]');
+}
+const FormErrorSummary = React.forwardRef(
+  function FormErrorSummary2(props, ref) {
+    const t = useStrings();
+    const auto = uid(), id = props.id || auto;
+    const list = items(props.errors);
+    const box = React.useRef(null);
+    React.useEffect(
+      function() {
+        const has = list.length > 0;
+        if (has && box.current) box.current.focus();
+      },
+      /* focus when errors first appear, and again whenever focusKey changes (each submit) */
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [list.length > 0, props.focusKey]
+    );
+    if (!list.length) return null;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: function(el) {
+          box.current = el;
+          if (typeof ref === "function") ref(el);
+          else if (ref) ref.current = el;
+        },
+        id,
+        tabIndex: -1,
+        role: "alert",
+        "aria-labelledby": id + "-title",
+        className: cx("aura-alert aura-alert--danger aura-error-summary", props.className)
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", className: "aura-alert__icon" }),
+      /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, /* @__PURE__ */ React.createElement("h2", { className: "aura-alert__title", id: id + "-title" }, props.title || t.errorSummary(list.length)), /* @__PURE__ */ React.createElement("ul", { className: "aura-error-summary__list" }, list.map(function(e) {
+        return /* @__PURE__ */ React.createElement("li", { key: e.field }, /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            href: "#" + e.field,
+            onClick: function(ev) {
+              ev.preventDefault();
+              if (props.onSelect) {
+                props.onSelect(e.field);
+                return;
+              }
+              const el = fieldElement(e.field);
+              if (el) {
+                el.scrollIntoView({ block: "center" });
+                el.focus();
+              }
+            }
+          },
+          e.message
+        ));
+      })))
+    );
+  }
+);
+export {
+  FormErrorSummary
+};

package/dist/esm/PasswordField.js

@@ -0,0 +1,38 @@
+'use client';
+import * as React from "react";
+import { TextField } from "./TextField.js";
+import { IconButton } from "./IconButton.js";
+import { cx, omit } from "./internal.js";
+import { useStrings } from "./locale.js";
+const PasswordField = React.forwardRef(function PasswordField2(props, ref) {
+  const t = useStrings();
+  const shown = React.useState(false);
+  const rest = omit(props, ["toggle", "className"]);
+  return /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      autoComplete: "current-password",
+      ...rest,
+      ref,
+      type: shown[0] ? "text" : "password",
+      spellCheck: false,
+      autoCapitalize: "none",
+      className: cx("aura-password", props.className),
+      suffix: props.toggle === false ? void 0 : /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          icon: shown[0] ? "eye-off" : "eye",
+          label: t.showPassword,
+          "aria-pressed": shown[0],
+          disabled: props.disabled,
+          onClick: function() {
+            shown[1](!shown[0]);
+          }
+        }
+      )
+    }
+  );
+});
+export {
+  PasswordField
+};

package/dist/esm/Popover.js

@@ -11,7 +11,7 @@ import {
   useMergedRef,
   useMounted
 } from "./internal.js";
-import { useStrings } from "./locale.js";
+import { useDensity, useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
 function position(anchor, pop, placement) {
   const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
@@ -24,6 +24,7 @@ function position(anchor, pop, placement) {
 }
 const Popover = React.forwardRef(function Popover2(props, ref) {
   const t = useStrings();
+  const density = useDensity();
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
   const open = !!st[0];
@@ -81,6 +82,7 @@ const Popover = React.forwardRef(function Popover2(props, ref) {
       {
         ref: popMerged,
         id,
+        "data-density": density,
         role: "dialog",
         "aria-modal": false,
         "aria-label": props.title ? void 0 : props.label,

package/dist/esm/Toaster.js

@@ -16,15 +16,40 @@ function emitToasts() {
     f(toastState.list.slice());
   });
 }
-function toast(opts) {
-  if (typeof opts === "string") opts = { title: opts };
+function show(opts) {
   const id = opts.id || "t" + ++toastState.n;
-  toastState.list = toastState.list.filter(function(t) {
-    return t.id !== id;
-  }).concat([Object.assign({ tone: "info" }, opts, { id })]).slice(-3);
+  const at = toastState.list.findIndex(function(t) {
+    return t.id === id;
+  });
+  const entry = Object.assign({ tone: "info" }, opts, {
+    id,
+    loading: !!opts.loading,
+    rev: at >= 0 ? toastState.list[at].rev + 1 : 0
+  });
+  if (at >= 0) {
+    toastState.list = toastState.list.slice();
+    toastState.list[at] = entry;
+  } else toastState.list = toastState.list.concat([entry]).slice(-3);
   emitToasts();
   return id;
 }
+function toast(opts) {
+  return show(typeof opts === "string" ? { title: opts } : opts);
+}
+function shorthand(tone) {
+  return function(title, opts) {
+    return show(Object.assign({}, opts, { title, tone }));
+  };
+}
+toast.success = shorthand("success");
+toast.error = shorthand("danger");
+toast.warning = shorthand("warning");
+toast.info = shorthand("info");
+toast.loading = function(title, opts) {
+  return show(
+    Object.assign({}, opts, { title, tone: "info", loading: true, duration: Infinity })
+  );
+};
 toast.dismiss = function(id) {
   toastState.list = toastState.list.filter(function(t) {
     return t.id !== id;
@@ -34,35 +59,56 @@ toast.dismiss = function(id) {
 function ToastItem(props) {
   const str = useStrings();
   const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
+  const hover = React.useRef(false);
   function start() {
-    if (left.current === Infinity) return;
+    if (left.current === Infinity || timer.current) return;
     since.current = Date.now();
     timer.current = setTimeout(function() {
       toast.dismiss(t.id);
     }, left.current);
   }
+  function resume() {
+    hover.current = false;
+    start();
+  }
   function pause() {
+    hover.current = true;
     if (timer.current) {
       clearTimeout(timer.current);
       timer.current = null;
       left.current -= Date.now() - since.current;
     }
   }
-  React.useEffect(function() {
-    start();
-    return pause;
-  }, []);
+  React.useEffect(
+    function() {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = null;
+      left.current = t.duration || 5e3;
+      if (!hover.current) start();
+      return function() {
+        if (timer.current) clearTimeout(timer.current);
+      };
+    },
+    [t.rev]
+  );
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cx("aura-toast", "aura-toast--" + t.tone),
+      className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
       role: t.tone === "danger" ? "alert" : "status",
+      "aria-busy": t.loading || void 0,
       onMouseEnter: pause,
-      onMouseLeave: start,
+      onMouseLeave: resume,
       onFocus: pause,
-      onBlur: start
+      onBlur: resume
     },
-    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
+    /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: t.loading ? "loader-circle" : ALERT_ICON[t.tone] || "info",
+        className: cx("aura-toast__icon", t.loading && "aura-spin")
+      }
+    ),
     /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
     t.action ? /* @__PURE__ */ React.createElement(
       "button",