@astralui/core 0.1.10 → 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
   );
 }