@astralui/core 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -173,48 +173,139 @@ function AstralThemeProvider({ colors, children }) {
     children
   ] });
 }
-function useDismiss(opened, onClose) {
+var dialogSeq = 0;
+var dialogStack = [];
+var FOCUSABLE = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  "[contenteditable]",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function useDialog(opened, onClose) {
+  const panelRef = react.useRef(null);
+  const idRef = react.useRef("");
+  if (!idRef.current) idRef.current = "au-dialog-title-" + String(++dialogSeq);
+  const onCloseRef = react.useRef(onClose);
+  onCloseRef.current = onClose;
   react.useEffect(() => {
     if (!opened) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    const restoreTo = document.activeElement;
+    dialogStack.push(panel);
+    const isTop = () => dialogStack[dialogStack.length - 1] === panel;
+    const focusables = () => Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+      (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement
+    );
+    const raf = requestAnimationFrame(() => {
+      if (panel.contains(document.activeElement)) return;
+      const list = focusables();
+      const target = list.find((el) => !el.classList.contains("au-modal-x")) ?? list[0] ?? panel;
+      target.focus();
+    });
     const onKey = (e) => {
-      if (e.key === "Escape") onClose();
+      if (!isTop()) return;
+      if (e.key === "Escape") {
+        onCloseRef.current();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const list = focusables();
+      if (!list.length) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = list[0];
+      const last = list[list.length - 1];
+      const active = document.activeElement;
+      if (!panel.contains(active)) {
+        e.preventDefault();
+        (e.shiftKey ? last : first).focus();
+        return;
+      }
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
     };
-    document.addEventListener("keydown", onKey);
-    const prev = document.body.style.overflow;
+    document.addEventListener("keydown", onKey, true);
+    const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prev;
+      cancelAnimationFrame(raf);
+      document.removeEventListener("keydown", onKey, true);
+      const at = dialogStack.indexOf(panel);
+      if (at !== -1) dialogStack.splice(at, 1);
+      document.body.style.overflow = prevOverflow;
+      if (restoreTo && document.contains(restoreTo)) restoreTo.focus();
     };
-  }, [opened, onClose]);
+  }, [opened]);
+  return { panelRef, titleId: idRef.current };
 }
 function AstralModal({ opened, onClose, title, brand, width = 460, zIndex, children }) {
-  useDismiss(opened, onClose);
+  const { panelRef, titleId } = useDialog(opened, onClose);
   if (!opened) return null;
   const style = { maxWidth: width, ...brand ? { "--au-ic": brand } : {} };
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-modal-overlay", onMouseDown: onClose, style: zIndex != null ? { zIndex } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-modal-panel", style, onMouseDown: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-modal-head", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-modal-title", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-modal-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, {}) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-modal-body", children })
-    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-modal-overlay", onMouseDown: onClose, style: zIndex != null ? { zIndex } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: "au-modal-panel",
+        style,
+        onMouseDown: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-modal-head", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-modal-title", id: titleId, children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-modal-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-modal-body", children })
+        ]
+      }
+    ) }),
     document.body
   );
 }
 function AstralDrawer({ opened, onClose, title, brand, width = 440, zIndex, children }) {
-  useDismiss(opened, onClose);
+  const { panelRef, titleId } = useDialog(opened, onClose);
   if (!opened) return null;
   const style = { width, ...brand ? { "--au-ic": brand } : {} };
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-overlay", onMouseDown: onClose, style: zIndex != null ? { zIndex } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-drawer-panel", style, onMouseDown: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-drawer-head", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-drawer-title", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-modal-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, {}) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-body", children })
-    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-overlay", onMouseDown: onClose, style: zIndex != null ? { zIndex } : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: "au-drawer-panel",
+        style,
+        onMouseDown: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-drawer-head", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-drawer-title", id: titleId, children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-modal-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-body", children })
+        ]
+      }
+    ) }),
     document.body
   );
 }
@@ -454,6 +545,8 @@ function AstralMenu({ trigger, items, align = "end", width = 220 }) {
     )
   ] });
 }
+var DEFAULT_LIMIT = 4;
+var EXIT_MS = 220;
 var toasts = [];
 var listeners = /* @__PURE__ */ new Set();
 var timers = /* @__PURE__ */ new Map();
@@ -475,7 +568,7 @@ function scheduleAutoClose(t) {
 function show(opts) {
   const id = opts.id ?? `toast-${++counter}`;
   const existing = toasts.find((t) => t.id === id);
-  const toast = { withCloseButton: true, ...existing, ...opts, id };
+  const toast = { withCloseButton: true, ...existing, ...opts, id, exiting: false };
   toasts = existing ? toasts.map((t) => t.id === id ? toast : t) : [...toasts, toast];
   emit();
   scheduleAutoClose(toast);
@@ -485,7 +578,7 @@ function update(opts) {
   if (!opts.id) return show(opts);
   const existing = toasts.find((t) => t.id === opts.id);
   if (!existing) return show(opts);
-  const toast = { ...existing, ...opts, id: opts.id };
+  const toast = { ...existing, ...opts, id: opts.id, exiting: false };
   toasts = toasts.map((t) => t.id === opts.id ? toast : t);
   emit();
   scheduleAutoClose(toast);
@@ -493,10 +586,16 @@ function update(opts) {
 }
 function hide(id) {
   const t = toasts.find((x) => x.id === id);
+  if (!t || t.exiting) return;
   clearTimer(id);
-  toasts = toasts.filter((x) => x.id !== id);
+  toasts = toasts.map((x) => x.id === id ? { ...x, exiting: true } : x);
   emit();
-  t?.onClose?.();
+  timers.set(id, setTimeout(() => {
+    toasts = toasts.filter((x) => x.id !== id);
+    timers.delete(id);
+    emit();
+    t.onClose?.();
+  }, EXIT_MS));
 }
 function clean() {
   toasts.forEach((t) => clearTimer(t.id));
@@ -524,20 +623,29 @@ function Spinner() {
 function ToastCard({ t }) {
   const accent = t.color ? `var(--astral-color-${t.color}-6)` : "var(--astral-color-default-border)";
   const lead = t.loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : t.icon ? t.icon : t.color && DEFAULT_ICON[t.color] || /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconInfoCircle, { size: 16 });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-toast", style: { ["--au-toast-accent"]: accent }, role: "status", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-toast-lead", children: lead }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-toast-body", children: [
-      t.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-title", children: t.title }),
-      t.message != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-msg", children: t.message })
-    ] }),
-    t.withCloseButton !== false && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-toast-x", onClick: () => hide(t.id), "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 14 }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: t.exiting ? "au-toast au-toast-out" : "au-toast",
+      style: { ["--au-toast-accent"]: accent },
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-toast-lead", children: lead }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-toast-body", children: [
+          t.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-title", children: t.title }),
+          t.message != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-msg", children: t.message })
+        ] }),
+        t.withCloseButton !== false && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-toast-x", onClick: () => hide(t.id), "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 14 }) })
+      ]
+    }
+  );
 }
-function AstralToaster() {
+function AstralToaster({ limit = DEFAULT_LIMIT } = {}) {
   const items = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   if (typeof document === "undefined") return null;
+  const visible = limit > 0 ? items.filter((t, i) => t.exiting || i >= items.length - limit) : items;
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-host", role: "region", "aria-live": "polite", "aria-label": "Notifications", children: items.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { t }, t.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-toast-host", role: "region", "aria-live": "polite", "aria-label": "Notifications", children: visible.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { t }, t.id)) }),
     document.body
   );
 }