@nimblebrain/synapse 0.12.0 → 0.12.1

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%); } }
@@ -341,41 +343,65 @@ 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 previouslyFocused = document.activeElement;
+    panelRef.current?.focus();
+    const { body } = document;
+    const prevOverflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    return () => {
+      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
+        }
+      )
     }
   ) });
 }