@carlonicora/nextjs-jsonapi 1.130.0 → 1.131.1

package/src/components/forms/__tests__/useEditorDialog.test.ts

@@ -168,4 +168,70 @@ describe("useEditorDialog", () => {
       expect(result.current.discardDialogProps.open).toBe(false);
     });
   });
+
+  describe("escape key with nested editors", () => {
+    const pressEscape = () =>
+      act(() => {
+        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
+      });
+
+    it("should close only the topmost editor, leaving the parent open", () => {
+      // Each open editor adds its OWN document-level capture listener, and
+      // stopPropagation() does not suppress sibling listeners on the same node.
+      // Without a stack guard one Escape closes the parent too — e.g. a nested
+      // create dialog takes the editor that opened it down with it.
+      const outer = renderHook(() => useEditorDialog(() => false));
+      act(() => outer.result.current.setOpen(true));
+
+      const inner = renderHook(() => useEditorDialog(() => false));
+      act(() => inner.result.current.setOpen(true));
+
+      pressEscape();
+
+      expect(inner.result.current.open).toBe(false);
+      expect(outer.result.current.open).toBe(true);
+    });
+
+    it("should close the parent on a second Escape once the nested editor has closed", () => {
+      const outer = renderHook(() => useEditorDialog(() => false));
+      act(() => outer.result.current.setOpen(true));
+
+      const inner = renderHook(() => useEditorDialog(() => false));
+      act(() => inner.result.current.setOpen(true));
+
+      pressEscape();
+      pressEscape();
+
+      expect(outer.result.current.open).toBe(false);
+    });
+
+    it("should hand Escape back to the parent when the nested editor unmounts while open", () => {
+      const outer = renderHook(() => useEditorDialog(() => false));
+      act(() => outer.result.current.setOpen(true));
+
+      const inner = renderHook(() => useEditorDialog(() => false));
+      act(() => inner.result.current.setOpen(true));
+
+      // The nested editor is torn down without closing first (parent stopped
+      // rendering it). Its stack entry must not strand Escape forever.
+      inner.unmount();
+      pressEscape();
+
+      expect(outer.result.current.open).toBe(false);
+    });
+
+    it("should still show the discard prompt for the topmost editor when it is dirty", () => {
+      const outer = renderHook(() => useEditorDialog(() => false));
+      act(() => outer.result.current.setOpen(true));
+
+      const inner = renderHook(() => useEditorDialog(() => true));
+      act(() => inner.result.current.setOpen(true));
+
+      pressEscape();
+
+      expect(inner.result.current.discardDialogProps.open).toBe(true);
+      expect(inner.result.current.open).toBe(true);
+      expect(outer.result.current.open).toBe(true);
+    });
+  });
 });

package/src/components/forms/useEditorDialog.ts

@@ -2,6 +2,15 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 
+// Every OPEN editor dialog, in the order it opened — the last entry is the
+// topmost. Escape has to consult this because each open dialog attaches its own
+// `keydown` listener to `document`: listeners on the SAME node all run
+// regardless of stopPropagation() (only stopImmediatePropagation() would stop
+// them, and that would close the wrong one — the parent registers first). So
+// without this stack a single Escape closes a nested create dialog AND the
+// editor that opened it.
+const openEditorStack: object[] = [];
+
 type UseEditorDialogOptions = {
   dialogOpen?: boolean;
   onDialogOpenChange?: (open: boolean) => void;
@@ -87,10 +96,26 @@ export function useEditorDialog(isFormDirty: () => boolean, options?: UseEditorD
     [isFormDirty],
   );
 
+  // Identity of this dialog within `openEditorStack`.
+  const dialogId = useRef<object>({});
+
+  // Join the stack while open. The cleanup also covers unmount-while-open, so a
+  // dialog whose parent stops rendering it cannot strand Escape at the top.
+  useEffect(() => {
+    if (!open) return;
+    const id = dialogId.current;
+    openEditorStack.push(id);
+    return () => {
+      const index = openEditorStack.lastIndexOf(id);
+      if (index !== -1) openEditorStack.splice(index, 1);
+    };
+  }, [open]);
+
   // Escape key handler
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && open) {
+        if (openEditorStack[openEditorStack.length - 1] !== dialogId.current) return;
         event.preventDefault();
         event.stopPropagation();
         handleOpenChange(false);

package/src/contexts/SharedContext.tsx

@@ -12,6 +12,7 @@ const SharedContext = createContext<{
     titleActions?: ReactNode;
     prioritizeFunctions?: boolean;
     icon?: ReactNode;
+    actionBar?: ReactNode;
   };
 } | null>(null);
 
@@ -26,6 +27,7 @@ interface SharedProviderProps {
       titleActions?: ReactNode;
       prioritizeFunctions?: boolean;
       icon?: ReactNode;
+      actionBar?: ReactNode;
     };
   };
 }

package/src/shadcnui/ui/sheet.tsx

@@ -48,7 +48,13 @@ function SheetContent({
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay />
+      {/* forceRender: Base UI skips the backdrop entirely for a NESTED dialog
+          (`enabled: forceRender || !nested`). Without it a sheet opened from
+          inside another sheet has no backdrop, so nothing covers the parent
+          popup — which Base UI has marked inert. Clicks there are swallowed by
+          `inert` and never reach the dismiss logic, so the nested sheet cannot
+          be closed by clicking outside it. Non-nested sheets are unaffected. */}
+      <SheetOverlay forceRender />
       <SheetPrimitive.Popup
         data-slot="sheet-content"
         data-side={side}