@jirawatpyk/aura-react 5.1.0 → 5.1.1

package/dist/esm/theme.js

@@ -245,6 +245,8 @@ function createTheme(opts) {
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
   function css(selector) {
+    if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
+      throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');
     const light = selector ? selector : ':root, [data-theme="light"]';
     const dark = selector ? selector + ".dark, .dark " + selector + ", " + selector + '[data-theme="dark"], [data-theme="dark"] ' + selector : '.dark, [data-theme="dark"]';
     const system = selector ? '[data-theme="system"] ' + selector + ", " + selector + '[data-theme="system"]' : '[data-theme="system"]';
@@ -253,7 +255,7 @@ function createTheme(opts) {
         return "  --aura-" + k + ": " + m[k] + ";";
       }).join("\n") + "\n}";
     }
-    return "/* AURA theme" + (o.name ? ' "' + o.name + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
+    return "/* AURA theme" + (o.name ? ' "' + String(o.name).replace(/[*/<>\\]/g, "") + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
   }
   return {
     name: o.name || null,

package/dist/esm/useModal.js

@@ -1,6 +1,29 @@
 'use client';
 import * as React from "react";
 import { FOCUSABLE, useMounted } from "./internal.js";
+let locks = 0, savedOverflow = "";
+function lockScroll() {
+  const body = document.body;
+  if (locks === 0) savedOverflow = body.style.overflow;
+  locks++;
+  body.style.overflow = "hidden";
+  let done = false;
+  return function() {
+    if (done) return;
+    done = true;
+    locks--;
+    if (locks === 0) body.style.overflow = savedOverflow;
+  };
+}
+function tabbable(el) {
+  const all = Array.prototype.filter.call(el.querySelectorAll(FOCUSABLE), function(c) {
+    return c.tabIndex >= 0;
+  });
+  const shown = all.filter(function(c) {
+    return c.getClientRects().length > 0;
+  });
+  return shown.length ? shown : all;
+}
 function useModal(open, ref, opts) {
   const mounted = useMounted();
   const prev = React.useRef(null);
@@ -9,8 +32,7 @@ function useModal(open, ref, opts) {
     function() {
       if (!open || !mounted) return;
       prev.current = document.activeElement;
-      const body = document.body, overflow = body.style.overflow;
-      body.style.overflow = "hidden";
+      const unlock = lockScroll();
       const el = ref.current;
       const firstIn = function(scope) {
         if (!scope || !el) return null;
@@ -25,7 +47,7 @@ function useModal(open, ref, opts) {
       const target = el && (el.querySelector("[data-autofocus]") || firstIn(o.bodySelector) || firstIn(o.footSelector) || el);
       if (target && o.autoFocus !== false) target.focus();
       return function() {
-        body.style.overflow = overflow;
+        unlock();
         if (prev.current && prev.current.focus) prev.current.focus();
       };
     },
@@ -37,17 +59,18 @@ function useModal(open, ref, opts) {
       if (o.onEscape) o.onEscape();
       return;
     }
-    if (e.key !== "Tab" || !ref.current) return;
-    const list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
+    if (e.key !== "Tab" || !ref.current || e.defaultPrevented) return;
+    if (!ref.current.contains(e.target)) return;
+    const list = tabbable(ref.current);
     if (!list.length) {
       e.preventDefault();
       return;
     }
-    const first = list[0], last = list[list.length - 1];
-    if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {
+    const first = list[0], last = list[list.length - 1], active = document.activeElement, stray = active === ref.current;
+    if (e.shiftKey && (active === first || stray)) {
       e.preventDefault();
       last.focus();
-    } else if (!e.shiftKey && document.activeElement === last) {
+    } else if (!e.shiftKey && (active === last || stray)) {
       e.preventDefault();
       first.focus();
     }