@kahitsan/ksui 0.46.0 → 0.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/base/Modal.test.tsx

@@ -1,6 +1,5 @@
-import { describe, expect, it, vi } from "vitest";
-import { render } from "@solidjs/testing-library";
-import { Show, createSignal } from "solid-js";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@solidjs/testing-library";
 import Modal from "./Modal";
 
 // Modal is the most critical shared widget — it wraps a native <dialog> with
@@ -68,4 +67,71 @@ describe("Modal", () => {
     const card = container.querySelector(".ksui-modal-card")!;
     expect(card.className).toContain("danger");
   });
+
+  describe("sheet variant", () => {
+    // jsdom has no showModal()/close(); stand them in so a stacked dialog is open.
+    const proto = HTMLDialogElement.prototype;
+    const original = { showModal: proto.showModal, close: proto.close };
+    beforeEach(() => {
+      proto.showModal = function (this: HTMLDialogElement) {
+        this.setAttribute("open", "");
+      };
+      proto.close = function (this: HTMLDialogElement) {
+        this.removeAttribute("open");
+      };
+    });
+    afterEach(() => {
+      cleanup(); // unmount while the stubs still exist
+      proto.showModal = original.showModal;
+      proto.close = original.close;
+    });
+
+    it("calls onClose on Escape", () => {
+      const onClose = vi.fn();
+      render(() => (
+        <Modal variant="sheet" onClose={onClose}>
+          <p>sheet</p>
+        </Modal>
+      ));
+      window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      expect(onClose).toHaveBeenCalledOnce();
+    });
+
+    it("leaves Escape to a dialog opened on top of it", () => {
+      const onSheetClose = vi.fn();
+      const onDialogClose = vi.fn();
+      const { container } = render(() => (
+        <Modal variant="sheet" onClose={onSheetClose}>
+          <Modal onClose={onDialogClose}>
+            <button type="button">inside</button>
+          </Modal>
+        </Modal>
+      ));
+      const dialog = container.querySelector("dialog")!;
+      expect(dialog.open).toBe(true);
+
+      // A browser delivers Escape as keydown (bubbling to window) and then
+      // fires cancel on the topmost modal dialog.
+      dialog
+        .querySelector("button")!
+        .dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      dialog.dispatchEvent(new Event("cancel", { cancelable: true }));
+
+      expect(onSheetClose).not.toHaveBeenCalled();
+      expect(onDialogClose).toHaveBeenCalledOnce();
+    });
+
+    it("ignores an Escape keydown another handler already consumed", () => {
+      const onClose = vi.fn();
+      render(() => (
+        <Modal variant="sheet" onClose={onClose}>
+          <p>sheet</p>
+        </Modal>
+      ));
+      const e = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+      e.preventDefault();
+      window.dispatchEvent(e);
+      expect(onClose).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/components/base/Modal.tsx

@@ -155,13 +155,28 @@ function DialogModal(local: LocalProps): JSX.Element {
   );
 }
 
+function openModalDialogs(): HTMLDialogElement[] {
+  const open = [...document.querySelectorAll<HTMLDialogElement>("dialog[open]")];
+  try {
+    return open.filter((d) => d.matches(":modal"));
+  } catch {
+    // Engines without :modal support; treat every open dialog as modal.
+    return open;
+  }
+}
+
 function SheetModal(local: LocalProps, size?: ModalSize): JSX.Element {
+  let overlayEl: HTMLDivElement | undefined;
+
   lockPullToRefresh();
   onCleanup(unlockPullToRefresh);
 
   const handleKey = (e: KeyboardEvent) => {
-    if (e.key !== "Escape") return;
+    if (e.key !== "Escape" || e.defaultPrevented) return;
     if (local.dismissable === false) return;
+    // A modal <dialog> stacked above this sheet owns Escape (it gets `cancel`);
+    // closing here too would discard the sheet underneath.
+    if (openModalDialogs().some((d) => !d.contains(overlayEl ?? null))) return;
     local.onClose();
   };
   if (typeof window !== "undefined") {
@@ -179,7 +194,7 @@ function SheetModal(local: LocalProps, size?: ModalSize): JSX.Element {
   // ModalLayerContext value is already ambient (an outer DialogModal's
   // dialogEl if nested inside one, otherwise the default null/document.body).
   return (
-    <div class="ksui-modal-sheet-overlay">
+    <div ref={overlayEl} class="ksui-modal-sheet-overlay">
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div class="ksui-modal-sheet-backdrop" onClick={handleBackdropClick} />
       <div