@antelopejs/dms 0.4.6 → 0.4.8

package/frontend-vue/layers/dms-ui/app/composables/tree/shortcuts/index.ts

@@ -1,3 +1,4 @@
+import { computed, type ComputedRef } from "vue";
 import {
   TREE_ARROW_DOWN_METADATA,
   createTreeArrowDownShortcut,
@@ -11,7 +12,11 @@ import { TREE_SPACE_METADATA, createTreeSpaceShortcut } from "./treeSpace";
 import { TREE_HOME_METADATA, createTreeHomeShortcut } from "./treeHome";
 import { TREE_END_METADATA, createTreeEndShortcut } from "./treeEnd";
 import { TREE_SHIFT_A_METADATA, createTreeShiftAShortcut } from "./treeShiftA";
-import { TREE_ESCAPE_METADATA, createTreeEscapeShortcut } from "./treeEscape";
+import {
+  TREE_ESCAPE_METADATA,
+  createTreeEscapeShortcut,
+  isTreeEscapeActive,
+} from "./treeEscape";
 
 export const TREE_SHORTCUTS_METADATA = [
   TREE_ARROW_DOWN_METADATA,
@@ -29,15 +34,19 @@ interface BuildTreeShortcutsParams {
   props: TreeProps;
   items: ComputedRef<TreeNode[]>;
   selected: Ref<TreeNode | TreeNode[] | undefined>;
+  activeElement: Ref<Element | null | undefined>;
 }
 
+type TreeShortcuts = Record<string, (() => void) | undefined>;
+
 export function buildTreeShortcuts({
   navigateTree,
   props,
   items,
   selected,
-}: BuildTreeShortcutsParams): Record<string, () => void> {
-  return {
+  activeElement,
+}: BuildTreeShortcutsParams): ComputedRef<TreeShortcuts> {
+  const shortcuts = {
     arrowdown: createTreeArrowDownShortcut(navigateTree),
     arrowup: createTreeArrowUpShortcut(navigateTree),
     enter: createTreeEnterShortcut(navigateTree),
@@ -45,6 +54,12 @@ export function buildTreeShortcuts({
     home: createTreeHomeShortcut(navigateTree),
     end: createTreeEndShortcut(navigateTree),
     shift_a: createTreeShiftAShortcut(props, items, selected),
-    escape: createTreeEscapeShortcut(props, selected),
   };
+  const escape = createTreeEscapeShortcut(props, selected);
+  // An unregistered key is left untouched by `defineShortcuts`, so Escape
+  // reaches overlays whenever the tree has nothing to clear.
+  return computed(() => ({
+    ...shortcuts,
+    escape: isTreeEscapeActive(selected, activeElement) ? escape : undefined,
+  }));
 }

package/frontend-vue/layers/dms-ui/app/composables/tree/shortcuts/treeEscape.ts

@@ -1,9 +1,30 @@
+import { isFocusInsideOverlay } from "../../../utils/overlayFocus";
+
 export const TREE_ESCAPE_METADATA: ShortcutMetadata = {
   key: ["$keyboard.escape"],
   descriptionKey: "$dms.shortcuts.tree.escape.description",
   component: "$dms.components.tree",
+  condition: {
+    descriptionKey: "$dms.shortcuts.tree.escape.condition",
+  },
 };
 
+/**
+ * Nuxt UI's `defineShortcuts` calls `preventDefault()` on every key it
+ * handles, and reka-ui's DismissableLayer ignores a prevented Escape. The
+ * shortcut is therefore only registered when there is a selection to clear,
+ * and never while focus sits inside an overlay, so the overlay above the tree
+ * keeps closing on Escape.
+ */
+export function isTreeEscapeActive(
+  selected: Ref<TreeNode | TreeNode[] | undefined>,
+  activeElement: Ref<Element | null | undefined>,
+): boolean {
+  if (isFocusInsideOverlay(activeElement.value)) return false;
+  const value = selected.value;
+  return Array.isArray(value) ? value.length > 0 : value != null;
+}
+
 export function createTreeEscapeShortcut(
   props: TreeProps,
   selected: Ref<TreeNode | TreeNode[] | undefined>,

package/frontend-vue/layers/dms-ui/app/utils/overlayFocus.ts

@@ -0,0 +1,16 @@
+// Overlays reka-ui dismisses on Escape (modals, slideovers, popovers, menus,
+// selects). They move focus inside themselves while open.
+const OVERLAY_SELECTOR =
+  '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"]';
+
+/**
+ * Nuxt UI's `defineShortcuts` calls `preventDefault()` on every key it
+ * handles, and reka-ui's DismissableLayer ignores a prevented Escape. A
+ * component-level Escape shortcut must therefore stay unregistered while
+ * focus sits inside an overlay, so the overlay keeps closing on Escape.
+ */
+export function isFocusInsideOverlay(
+  activeElement: Element | null | undefined,
+): boolean {
+  return Boolean(activeElement?.closest(OVERLAY_SELECTOR));
+}

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -292,7 +292,8 @@
           "description": "Refresh table data"
         },
         "escape": {
-          "description": "Close search or deselect rows"
+          "description": "Close search or deselect rows",
+          "condition": "Only when a search or a row selection is active and no dialog is open"
         },
         "shift_n": {
           "description": "Create new row",
@@ -330,7 +331,8 @@
           "description": "Go to last node"
         },
         "escape": {
-          "description": "Deselect all nodes"
+          "description": "Deselect all nodes",
+          "condition": "Only when nodes are selected and no dialog is open"
         },
         "shift_a": {
           "description": "Select all nodes recursively",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -293,7 +293,8 @@
           "description": "Actualiser les données du tableau"
         },
         "escape": {
-          "description": "Fermer la recherche ou désélectionner les lignes"
+          "description": "Fermer la recherche ou désélectionner les lignes",
+          "condition": "Uniquement quand une recherche ou une sélection est active et qu'aucune fenêtre n'est ouverte"
         },
         "shift_n": {
           "description": "Créer une nouvelle ligne",
@@ -331,7 +332,8 @@
           "description": "Aller au dernier nœud"
         },
         "escape": {
-          "description": "Désélectionner tous les nœuds"
+          "description": "Désélectionner tous les nœuds",
+          "condition": "Uniquement quand des nœuds sont sélectionnés et qu'aucune fenêtre n'est ouverte"
         },
         "shift_a": {
           "description": "Sélectionner tous les nœuds récursivement",

package/frontend-vue/package.json

@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@antelopejs/core": ">=1.9.1 <2",
-    "@antelopejs/dms-frontend": ">=0.2.8 <1.0.0",
+    "@antelopejs/dms-frontend": ">=0.3.2 <1.0.0",
     "@eslint/js": "^8.57.0",
     "@inertiajs/vue3": "^3.7.0",
     "@nuxt/ui": "4.10.0",

package/frontend-vue/pnpm-lock.yaml

@@ -124,8 +124,8 @@ importers:
         specifier: '>=1.9.1 <2'
         version: 1.9.1(@types/node@24.8.1)
       '@antelopejs/dms-frontend':
-        specifier: '>=0.2.8 <1.0.0'
-        version: 0.2.8(@antelopejs/core@1.9.1(@types/node@24.8.1))
+        specifier: '>=0.3.2 <1.0.0'
+        version: 0.3.2(@antelopejs/core@1.9.1(@types/node@24.8.1))
       '@eslint/js':
         specifier: ^8.57.0
         version: 8.57.0
@@ -200,8 +200,8 @@ packages:
     resolution: {integrity: sha512-MPLJak0rPluV4lgsdsO5ba03sgTxIGSncajBcoaoppuppQmksdpaemojIHiVLJ4LiG0iiH21Roaed8XXy1XkYQ==}
     hasBin: true
 
-  '@antelopejs/dms-frontend@0.2.8':
-    resolution: {integrity: sha512-7qrlf2M3J26DZxGZVvM/3qjPDeDfoRMrE7HEPFxWav8Pe1QFct7LtgY7NmKup9XdrRyUw4nqckxvW8UZDSjpeg==}
+  '@antelopejs/dms-frontend@0.3.2':
+    resolution: {integrity: sha512-BNqLqW3UbfeOMnd4RkEynr/1mMWFhwB8dt1JbggaGte8/KrJQ3MQ5TOovnACMmrqAD7FxsMLBsNqjzGjX4O4ZA==}
     engines: {node: '>=20.12.0'}
     hasBin: true
     peerDependencies:
@@ -4331,7 +4331,7 @@ snapshots:
     transitivePeerDependencies:
       - '@types/node'
 
-  '@antelopejs/dms-frontend@0.2.8(@antelopejs/core@1.9.1(@types/node@24.8.1))':
+  '@antelopejs/dms-frontend@0.3.2(@antelopejs/core@1.9.1(@types/node@24.8.1))':
     dependencies:
       boxen: 5.1.2
       chalk: 4.1.2

package/frontend-vue/tests/table-view-escape-shortcut.test.ts

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  nextTick,
+  ref,
+  shallowRef,
+  type App,
+  type Ref,
+  type ShallowRef,
+} from "vue";
+import { useActiveElement } from "@vueuse/core";
+import type { RowSelectionState } from "@tanstack/vue-table";
+import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
+import {
+  TABLE_VIEW_SHORTCUTS_METADATA,
+  buildTableViewShortcuts,
+} from "../layers/dms-ui/app/composables/table-view/shortcuts";
+
+let app: App;
+let host: HTMLDivElement;
+let globalFilter: ShallowRef<string | undefined>;
+let rowSelect: Ref<RowSelectionState>;
+
+function mountTableShortcuts() {
+  const Harness = defineComponent({
+    setup() {
+      defineShortcuts(
+        buildTableViewShortcuts({
+          refresh: () => {},
+          tableProps: computed(() => ({})),
+          newRow: () => {},
+          globalFilter,
+          rowSelect,
+          data: ref(null),
+          activeElement: useActiveElement(),
+        }),
+      );
+      return () => null;
+    },
+  });
+  app = createApp(Harness);
+  app.mount(host);
+}
+
+function pressEscape(target: EventTarget = document.body): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    key: "Escape",
+    code: "Escape",
+    bubbles: true,
+    cancelable: true,
+  });
+  target.dispatchEvent(event);
+  return event;
+}
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  globalFilter = shallowRef<string | undefined>(undefined);
+  rowSelect = ref<RowSelectionState>({});
+});
+
+afterEach(() => {
+  app.unmount();
+  document.body.innerHTML = "";
+});
+
+describe("TableView Escape shortcut", () => {
+  it("leaves Escape to overlays when there is nothing to clear", async () => {
+    mountTableShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("closes the search when a global filter is set", async () => {
+    globalFilter.value = "acme";
+    mountTableShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(globalFilter.value).toBeUndefined();
+  });
+
+  it("clears the row selection when no search is open", async () => {
+    rowSelect.value = { a: true, b: true };
+    mountTableShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(rowSelect.value).toEqual({});
+  });
+
+  it("closes the search before touching the selection", async () => {
+    globalFilter.value = "";
+    rowSelect.value = { a: true };
+    mountTableShortcuts();
+    await nextTick();
+
+    pressEscape();
+    expect(globalFilter.value).toBeUndefined();
+    expect(rowSelect.value).toEqual({ a: true });
+  });
+
+  it("stops handling Escape once the filter is cleared", async () => {
+    globalFilter.value = "acme";
+    mountTableShortcuts();
+    await nextTick();
+
+    pressEscape();
+    await nextTick();
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("lets an open dialog take Escape even with a filter set", async () => {
+    globalFilter.value = "acme";
+    mountTableShortcuts();
+    const dialog = document.createElement("div");
+    dialog.setAttribute("role", "dialog");
+    const button = document.createElement("button");
+    dialog.appendChild(button);
+    document.body.appendChild(dialog);
+    button.focus();
+    await nextTick();
+
+    expect(pressEscape(button).defaultPrevented).toBe(false);
+    expect(globalFilter.value).toBe("acme");
+  });
+
+  it("describes when the shortcut applies in the help list", () => {
+    const escape = TABLE_VIEW_SHORTCUTS_METADATA.find((metadata) =>
+      metadata.key.includes("$keyboard.escape"),
+    );
+    expect(escape?.condition?.descriptionKey).toBe(
+      "$dms.shortcuts.tableview.escape.condition",
+    );
+  });
+});

package/frontend-vue/tests/tree-escape-shortcut.test.ts

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  nextTick,
+  ref,
+  type App,
+  type Ref,
+} from "vue";
+import { useActiveElement } from "@vueuse/core";
+import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
+import {
+  TREE_SHORTCUTS_METADATA,
+  buildTreeShortcuts,
+} from "../layers/dms-ui/app/composables/tree/shortcuts";
+import type {
+  TreeNode,
+  TreeProps,
+} from "../layers/dms-ui/app/composables/tree/types";
+
+let app: App;
+let host: HTMLDivElement;
+let selected: Ref<TreeNode | TreeNode[] | undefined>;
+
+const nodeA = { label: "A", value: "a" } as TreeNode;
+const nodeB = { label: "B", value: "b" } as TreeNode;
+
+function mountTreeShortcuts(multiple = false) {
+  const Harness = defineComponent({
+    setup() {
+      defineShortcuts(
+        buildTreeShortcuts({
+          navigateTree: () => {},
+          props: { multiple } as TreeProps,
+          items: computed(() => [nodeA, nodeB]),
+          selected,
+          activeElement: useActiveElement(),
+        }),
+      );
+      return () => null;
+    },
+  });
+  app = createApp(Harness);
+  app.mount(host);
+}
+
+function pressEscape(target: EventTarget = document.body): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    key: "Escape",
+    code: "Escape",
+    bubbles: true,
+    cancelable: true,
+  });
+  target.dispatchEvent(event);
+  return event;
+}
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  selected = ref<TreeNode | TreeNode[] | undefined>(undefined);
+});
+
+afterEach(() => {
+  app.unmount();
+  document.body.innerHTML = "";
+});
+
+describe("Tree Escape shortcut", () => {
+  it("leaves Escape to overlays when nothing is selected", async () => {
+    mountTreeShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("leaves Escape to overlays when a multiple selection is empty", async () => {
+    selected.value = [];
+    mountTreeShortcuts(true);
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("deselects the node in single selection mode", async () => {
+    selected.value = nodeA;
+    mountTreeShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(selected.value).toBeUndefined();
+  });
+
+  it("clears every node in multiple selection mode", async () => {
+    selected.value = [nodeA, nodeB];
+    mountTreeShortcuts(true);
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(selected.value).toEqual([]);
+  });
+
+  it("stops handling Escape once the selection is cleared", async () => {
+    selected.value = [nodeA];
+    mountTreeShortcuts(true);
+    await nextTick();
+
+    pressEscape();
+    await nextTick();
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("lets an open dialog take Escape even with a selection", async () => {
+    selected.value = nodeA;
+    mountTreeShortcuts();
+    const dialog = document.createElement("div");
+    dialog.setAttribute("role", "dialog");
+    const button = document.createElement("button");
+    dialog.appendChild(button);
+    document.body.appendChild(dialog);
+    button.focus();
+    await nextTick();
+
+    expect(pressEscape(button).defaultPrevented).toBe(false);
+    expect(selected.value).toStrictEqual(nodeA);
+  });
+
+  it("describes when the shortcut applies in the help list", () => {
+    const escape = TREE_SHORTCUTS_METADATA.find((metadata) =>
+      metadata.key.includes("$keyboard.escape"),
+    );
+    expect(escape?.condition?.descriptionKey).toBe(
+      "$dms.shortcuts.tree.escape.condition",
+    );
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -34,9 +34,9 @@
     "@antelopejs/interface-api-util": ">=0.1.2 <1.0.0",
     "@antelopejs/interface-core": ">=0.1.1 <1.0.0",
     "@antelopejs/interface-data-api": ">=0.1.9 <1.0.0",
-    "@antelopejs/interface-database": ">=0.1.7 <1.0.0",
-    "@antelopejs/interface-database-decorators": ">=0.1.6 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.2.5 <1.0.0",
+    "@antelopejs/interface-database": ">=0.1.8 <1.0.0",
+    "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.2.6 <1.0.0",
     "@antelopejs/interface-email": ">=0.0.5 <1.0.0",
     "@antelopejs/interface-file-storage": ">=0.1.3 <1.0.0",
     "archiver": "^7.0.1",