@nimblebrain/synapse 0.12.1 → 0.12.2

package/dist/ui/index.js

@@ -331,6 +331,18 @@ var RULES3 = `
   .nb-drawer-iconbtn { min-width: 44px; min-height: 44px; }
 }
 `;
+function inClosedDetails(el) {
+  const details = el.closest("details:not([open])");
+  if (!details) return false;
+  const summary = details.querySelector("summary");
+  return !summary || !summary.contains(el);
+}
+var CANDIDATES = "a[href], button, input, select, textarea, summary, [tabindex]";
+function tabbables(panel) {
+  return Array.from(panel.querySelectorAll(CANDIDATES)).filter(
+    (el) => el.tabIndex >= 0 && !el.matches(":disabled") && !el.closest("[hidden]") && !inClosedDetails(el) && el.type !== "hidden"
+  );
+}
 var DrawerContext = createContext(null);
 function DrawerRoot({
   open,
@@ -359,12 +371,33 @@ function DrawerRoot({
   }, [open, onEscape, onClose]);
   useEffect(() => {
     if (!open) return;
+    const panel = panelRef.current;
     const previouslyFocused = document.activeElement;
-    panelRef.current?.focus();
+    panel?.focus();
     const { body } = document;
     const prevOverflow = body.style.overflow;
     body.style.overflow = "hidden";
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab" || !panel) return;
+      const focusables = tabbables(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || active === panel)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    panel?.addEventListener("keydown", onKeyDown);
     return () => {
+      panel?.removeEventListener("keydown", onKeyDown);
       body.style.overflow = prevOverflow;
       previouslyFocused?.focus?.();
     };