@nimblebrain/synapse 0.12.1 → 0.12.2

package/README.md

@@ -82,8 +82,10 @@ These are the durable decisions behind the library; they rarely change.
 - **Responsive to the pane, not the device.** Layouts observe their own width
   (`ResizeObserver` via `useBreakpoint`), because an app's iframe may be
   fullscreen, split, or a narrow rail regardless of screen size.
-- **Lean on the platform.** `Drawer` is built on the native `<dialog>` element
-  (focus-trap, Escape, scroll behavior for free) rather than re-implementing them.
+- **Sandbox-safe overlays.** `Drawer` is a plain `<div>` overlay, not a native
+  `<dialog>`: the app iframe withholds `allow-modals`, so `<dialog>.showModal()`
+  throws there. The scrim, Tab focus trap, focus-in/restore, scroll-lock, and
+  Escape are hand-rolled.
 
 ## Quick Start
 

package/dist/ui/index.cjs

@@ -333,6 +333,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 = react.createContext(null);
 function DrawerRoot({
   open,
@@ -361,12 +373,33 @@ function DrawerRoot({
   }, [open, onEscape, onClose]);
   react.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?.();
     };