@nimblebrain/synapse 0.12.0 → 0.12.2

package/dist/ui/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, DialogHTMLAttributes, InputHTMLAttributes, RefObject, CSSProperties, ElementType } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, CSSProperties, ElementType } from 'react';
 
 interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
     /** Name used for initials and the image alt text. */
@@ -44,9 +44,9 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 declare function Card({ padding, interactive, style, className, children, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
 
 type Side$1 = "left" | "right" | "bottom";
-interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "onCancel" | "onClick"> {
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     open: boolean;
-    /** Called by the backdrop and the Header close button. */
+    /** Called by the scrim and the Header close button. */
     onClose: () => void;
     /** Called on Escape. Defaults to `onClose` — override to do something else
      * (e.g. pop one level of a panel stack before closing). */
@@ -56,7 +56,7 @@ interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "tit
     width?: number | string;
     children?: ReactNode;
 }
-declare function DrawerRoot({ open, onClose, onEscape, side, width, style, children, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function DrawerRoot({ open, onClose, onEscape, side, width, style, children, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element | null;
 interface HeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     /**
      * Heading text — rendered as an `<h2>` and wired as the drawer's accessible

package/dist/ui/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, DialogHTMLAttributes, InputHTMLAttributes, RefObject, CSSProperties, ElementType } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, CSSProperties, ElementType } from 'react';
 
 interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
     /** Name used for initials and the image alt text. */
@@ -44,9 +44,9 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 declare function Card({ padding, interactive, style, className, children, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
 
 type Side$1 = "left" | "right" | "bottom";
-interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "onCancel" | "onClick"> {
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     open: boolean;
-    /** Called by the backdrop and the Header close button. */
+    /** Called by the scrim and the Header close button. */
     onClose: () => void;
     /** Called on Escape. Defaults to `onClose` — override to do something else
      * (e.g. pop one level of a panel stack before closing). */
@@ -56,7 +56,7 @@ interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "tit
     width?: number | string;
     children?: ReactNode;
 }
-declare function DrawerRoot({ open, onClose, onEscape, side, width, style, children, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function DrawerRoot({ open, onClose, onEscape, side, width, style, children, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element | null;
 interface HeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     /**
      * Heading text — rendered as an `<h2>` and wired as the drawer's accessible

package/dist/ui/index.js

@@ -305,21 +305,23 @@ function Card({
 }
 var STYLE_ID3 = "nb-synapse-drawer";
 var RULES3 = `
+.nb-drawer-scrim {
+  position: fixed; inset: 0; z-index: 1000;
+  display: flex; background: rgba(0, 0, 0, 0.32);
+  animation: nb-drawer-fade 200ms ease;
+}
+.nb-drawer-scrim--right { justify-content: flex-end; }
+.nb-drawer-scrim--left { justify-content: flex-start; }
+.nb-drawer-scrim--bottom { align-items: flex-end; }
 .nb-drawer {
   margin: 0; padding: 0; border: none; max-width: 92%;
   height: 100%; max-height: 100%; display: flex; flex-direction: column;
+  outline: none;
 }
-.nb-drawer--right { margin-left: auto; }
-.nb-drawer--left { margin-right: auto; }
-.nb-drawer--bottom {
-  margin-top: auto; width: 100%; max-width: 100%;
-  height: auto; max-height: 92%;
-}
-.nb-drawer--right[open] { animation: nb-drawer-in-right 240ms cubic-bezier(0.2, 0, 0, 1); }
-.nb-drawer--left[open] { animation: nb-drawer-in-left 240ms cubic-bezier(0.2, 0, 0, 1); }
-.nb-drawer--bottom[open] { animation: nb-drawer-in-bottom 240ms cubic-bezier(0.2, 0, 0, 1); }
-.nb-drawer::backdrop { background: rgba(0, 0, 0, 0.32); }
-.nb-drawer[open]::backdrop { animation: nb-drawer-fade 200ms ease; }
+.nb-drawer--bottom { width: 100%; max-width: 100%; height: auto; max-height: 92%; }
+.nb-drawer--right { animation: nb-drawer-in-right 240ms cubic-bezier(0.2, 0, 0, 1); }
+.nb-drawer--left { animation: nb-drawer-in-left 240ms cubic-bezier(0.2, 0, 0, 1); }
+.nb-drawer--bottom { animation: nb-drawer-in-bottom 240ms cubic-bezier(0.2, 0, 0, 1); }
 @keyframes nb-drawer-in-right { from { transform: translateX(100%); } }
 @keyframes nb-drawer-in-left { from { transform: translateX(-100%); } }
 @keyframes nb-drawer-in-bottom { from { transform: translateY(100%); } }
@@ -329,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,
@@ -341,41 +355,86 @@ function DrawerRoot({
   ...rest
 }) {
   ensureStyle(STYLE_ID3, RULES3);
-  const dialogRef = useRef(null);
+  const panelRef = useRef(null);
   const labelId = useId();
   const [hasTitle, setHasTitle] = useState(false);
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog || typeof dialog.showModal !== "function") return;
-    if (open && !dialog.open) dialog.showModal();
-    else if (!open && dialog.open) dialog.close();
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        (onEscape ?? onClose)();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onEscape, onClose]);
+  useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const previouslyFocused = document.activeElement;
+    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?.();
+    };
   }, [open]);
+  const ctxValue = useMemo(() => ({ labelId, setHasTitle }), [labelId]);
+  if (!open) return null;
   const isBottom = side === "bottom";
   const panelStyle = {
     ...isBottom ? { width: "100%", maxWidth: "100%" } : { width },
     background: tokens.bg,
     color: tokens.fg,
     boxShadow: tokens.shadowLg,
+    outline: "none",
     ...side === "right" ? { borderLeft: `${tokens.borderWidth} solid ${tokens.border}` } : side === "left" ? { borderRight: `${tokens.borderWidth} solid ${tokens.border}` } : { borderTop: `${tokens.borderWidth} solid ${tokens.border}` },
     ...style
   };
-  const ctxValue = useMemo(() => ({ labelId, setHasTitle }), [labelId]);
   return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
-    "dialog",
+    "div",
     {
-      ref: dialogRef,
-      className: `nb-drawer nb-drawer--${side}`,
-      style: panelStyle,
-      "aria-labelledby": hasTitle ? labelId : void 0,
-      onCancel: (e) => {
-        e.preventDefault();
-        (onEscape ?? onClose)();
-      },
+      className: `nb-drawer-scrim nb-drawer-scrim--${side}`,
       onClick: (e) => {
-        if (e.target === dialogRef.current) onClose();
+        if (e.target === e.currentTarget) onClose();
       },
-      ...rest,
-      children
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": hasTitle ? labelId : void 0,
+          tabIndex: -1,
+          className: `nb-drawer nb-drawer--${side}`,
+          style: panelStyle,
+          ...rest,
+          children
+        }
+      )
     }
   ) });
 }