@celestia-island/hikari 0.55.294 → 0.55.295

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.294",
+  "version": "0.55.295",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkModal.test.tsx

@@ -546,3 +546,118 @@ describe("HkModal chrome / content split", () => {
     });
   });
 });
+
+describe("HkModal Escape precedence", () => {
+  it("lets a nested control own Escape while a bare Escape still closes", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+
+    const open = ref(true);
+    const emitted: boolean[] = [];
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: open.value,
+            closable: true,
+            title: "Escape precedence",
+            "onUpdate:modelValue": (v: boolean) => { emitted.push(v); open.value = v; },
+          }, {
+            default: () => h("div", {
+              class: "escape-owner",
+              onKeydown: (e: KeyboardEvent) => {
+                if (e.key === "Escape") e.preventDefault();
+              },
+            }, "nested control"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".escape-owner")).not.toBeNull();
+    });
+    const owner = document.body.querySelector<HTMLElement>(".escape-owner")!;
+
+    // The nested control consumes Escape: the window must stay open.
+    owner.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(emitted, "a consumed Escape must not close the window").toEqual([]);
+    expect(open.value).toBe(true);
+
+    // A bare Escape (nothing below consumed it) still closes.
+    const content = document.body.querySelector<HTMLElement>(".hk-modal-content")!;
+    content.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(emitted).toEqual([false]);
+  });
+
+  it("keeps a consumed Escape from reaching page-level Escape listeners", async () => {
+    // One press must mean one action: before the precedence rule a closable
+    // window swallowed every Escape at its root, so a handled press travelling
+    // on would hand the same key to a page-level listener (a revealed strip, a
+    // pointer-reorder cancel) while the nested control also acted on it.
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const open = ref(true);
+    const emitted: boolean[] = [];
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: open.value,
+            closable: true,
+            title: "Escape propagation",
+            "onUpdate:modelValue": (v: boolean) => { emitted.push(v); open.value = v; },
+          }, {
+            default: () => h("div", {
+              class: "escape-owner",
+              onKeydown: (e: KeyboardEvent) => {
+                if (e.key === "Escape") e.preventDefault();
+              },
+            }, "nested control"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".escape-owner")).not.toBeNull();
+    });
+
+    const pageHits: string[] = [];
+    const pageListener = (e: KeyboardEvent) => {
+      if (e.key === "Escape") pageHits.push("escape");
+    };
+    document.addEventListener("keydown", pageListener);
+    try {
+      const owner = document.body.querySelector<HTMLElement>(".escape-owner")!;
+      owner.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+      await nextTick();
+      expect(emitted, "a consumed Escape must not close the window").toEqual([]);
+      expect(pageHits, "a consumed Escape must not reach page-level listeners").toEqual([]);
+
+      // A bare Escape closes AND is still swallowed (the pre-existing rule).
+      const content = document.body.querySelector<HTMLElement>(".hk-modal-content")!;
+      content.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+      await nextTick();
+      expect(emitted).toEqual([false]);
+      expect(pageHits, "a closing Escape is swallowed by the window").toEqual([]);
+    } finally {
+      document.removeEventListener("keydown", pageListener);
+    }
+  });
+});

package/src/components/HkModal.tsx

@@ -489,6 +489,23 @@ export default defineComponent({
 
     function onKeydown(e: KeyboardEvent) {
       if (e.key === "Escape") {
+        // Cross-component precedence: a nested control that already consumed
+        // Escape (the range ribbon's "Escape resets the range" is the live
+        // case) owns the key, so the window must not close underneath it.
+        // `defaultPrevented` is the DOM-canonical "I handled this" signal for
+        // inline, preventDefault-only consumers — the package's pickers and
+        // panels instead stopPropagation (or teleport out of this subtree)
+        // and therefore never reach this handler either way.
+        //
+        // Keep swallowing the press here (`stopPropagation`) like a bare
+        // Escape does: before this precedence rule, a closable window consumed
+        // every Escape at this root, so letting a handled one travel on would
+        // hand the same press to page-level Escape listeners (a revealed strip,
+        // a pointer-reorder cancel) and produce one-press-two-actions.
+        if (e.defaultPrevented) {
+          if (props.closable) e.stopPropagation();
+          return;
+        }
         if (props.closable) {
           e.preventDefault();
           e.stopPropagation();