@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/dist/js/context-menu.js

@@ -1,14 +1,17 @@
-const instances = new WeakMap();
+/*!
+ * Moo UI context-menu.js v1.0.0-rc.10 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
 
+const instances = /* @__PURE__ */ new WeakMap();
 function pointerRect(event) {
   const { clientX: x, clientY: y } = event;
   return { top: y, left: x, right: x, bottom: y, width: 0, height: 0, x, y };
 }
-
 function isDisabledTrigger(trigger) {
   return Boolean(trigger?.disabled || trigger?.getAttribute?.("aria-disabled") === "true");
 }
-
 function menuItemFromEvent(event) {
   const target = event.target;
   const item = target.closest?.(".dropdown-item");
@@ -17,16 +20,13 @@ function menuItemFromEvent(event) {
   }
   return target.closest?.("li")?.querySelector(":scope > .dropdown-item") || null;
 }
-
-export default class ContextMenu {
+class ContextMenu {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
   }
-
   static getOrCreateInstance(element, config = {}) {
     return ContextMenu.getInstance(element) || new ContextMenu(element, config);
   }
-
   constructor(element, config = {}) {
     if (element?.nodeType !== 1 || !element.matches(".context-menu")) {
       throw new TypeError("ContextMenu requires a .context-menu root element.");
@@ -35,7 +35,6 @@ export default class ContextMenu {
     if (existing) {
       return existing;
     }
-
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
@@ -47,12 +46,10 @@ export default class ContextMenu {
     if (!this._fallback) {
       throw new TypeError("ContextMenu requires an explicit fallback trigger.");
     }
-
     const Dropdown = this._bootstrap("Dropdown");
     if (!Dropdown) {
       throw new TypeError("ContextMenu requires bootstrap.Dropdown (bootstrap.bundle.js).");
     }
-
     this._config = { ...config };
     this._listeners = [];
     this._invoker = null;
@@ -60,17 +57,15 @@ export default class ContextMenu {
     this._openMethod = null;
     this._reference = {
       getBoundingClientRect: () => this._currentRect(),
-      contextElement: this._fallback,
+      contextElement: this._fallback
     };
     this._dropdown = new Dropdown(this._fallback, {
       reference: this._reference,
-      autoClose: "outside",
+      autoClose: "outside"
     });
-
     instances.set(element, this);
     this._bindEvents();
   }
-
   dispose() {
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
@@ -82,56 +77,46 @@ export default class ContextMenu {
     this._pointerRect = null;
     instances.delete(this._element);
   }
-
   show(anchor = this._fallback) {
     this._open(anchor, null);
   }
-
   hide() {
     this._dropdown.hide();
   }
-
   _listen(target, type, handler, options) {
     target.addEventListener(type, handler, options);
     this._listeners.push({ target, type, handler, options });
   }
-
   _bootstrap(name) {
     return this._window.bootstrap?.[name] || null;
   }
-
   _currentRect() {
     if (this._pointerRect) {
       return this._pointerRect;
     }
     return (this._invoker || this._fallback).getBoundingClientRect();
   }
-
   _trigger(name, cancelable = false) {
     return this._element.dispatchEvent(
       new this._window.CustomEvent(`${name}.moo.context-menu`, {
         bubbles: true,
-        cancelable,
+        cancelable
       })
     );
   }
-
   _triggers() {
     return Array.from(this._element.querySelectorAll(":scope > .context-menu-trigger"));
   }
-
   _syncExpanded(expanded) {
     this._triggers().forEach((trigger) => {
       trigger.setAttribute("aria-expanded", String(expanded));
     });
   }
-
   _menuItems() {
     return Array.from(this._menu.querySelectorAll(".dropdown-item")).filter(
       (item) => !isDisabledTrigger(item) && !item.classList.contains("disabled")
     );
   }
-
   _open(trigger, pointerEvent, openMethod) {
     if (isDisabledTrigger(trigger)) {
       return;
@@ -144,7 +129,6 @@ export default class ContextMenu {
     this._openMethod = openMethod;
     this._dropdown.show();
   }
-
   _handleContextMenu(event) {
     const trigger = event.target.closest(".context-menu-trigger");
     if (!trigger || !this._element.contains(trigger)) {
@@ -153,7 +137,6 @@ export default class ContextMenu {
     event.preventDefault();
     this._open(trigger, event, "pointer");
   }
-
   _handleKeydown(event) {
     const trigger = event.target.closest(".context-menu-trigger");
     if (!trigger || !this._element.contains(trigger)) {
@@ -167,44 +150,45 @@ export default class ContextMenu {
     event.preventDefault();
     this._open(trigger, null, "keyboard");
   }
-
   _handleFallbackClick() {
     this._invoker = this._fallback;
     this._pointerRect = null;
     this._openMethod = "pointer";
   }
-
+  _handleFallbackKeydown(event) {
+    if (event.key !== " " && event.key !== "Spacebar") {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (this._menu.classList.contains("show")) {
+      this._dropdown.hide();
+      return;
+    }
+    this._open(this._fallback, null, "fallback-keyboard");
+  }
   _handleMenuClick(event) {
     const item = menuItemFromEvent(event);
     if (!item) {
       return;
     }
     const persistentItem = item.matches(".dropdown-item-check, [data-context-menu-persistent]");
-    const disabledItem =
-      item.matches('.dropdown-item.disabled, .dropdown-item[aria-disabled="true"], .dropdown-item:disabled') ||
-      isDisabledTrigger(item);
+    const disabledItem = item.matches('.dropdown-item.disabled, .dropdown-item[aria-disabled="true"], .dropdown-item:disabled') || isDisabledTrigger(item);
     if (disabledItem) {
       event.preventDefault();
       event.stopPropagation();
       return;
     }
-    // Radio-grouped toggle buttons reuse the dropdown_toggle_item() button
-    // Bootstrap's own roving arrow-key focus already picks up (it only ever
-    // matches real .dropdown-item elements); Moo adds only the missing
-    // mutual-exclusivity Bootstrap's independent button-toggle plugin does
-    // not provide.
     const radioButton = item.matches("[data-context-menu-radio-group]") ? item : null;
     if (radioButton) {
       event.preventDefault();
       event.stopPropagation();
       const group = radioButton.dataset.contextMenuRadioGroup;
-      this._menu
-        .querySelectorAll(`[data-context-menu-radio-group="${group}"]`)
-        .forEach((button) => {
-          const checked = button === radioButton;
-          button.classList.toggle("active", checked);
-          button.setAttribute("aria-pressed", String(checked));
-        });
+      this._menu.querySelectorAll(`[data-context-menu-radio-group="${group}"]`).forEach((button) => {
+        const checked = button === radioButton;
+        button.classList.toggle("active", checked);
+        button.setAttribute("aria-pressed", String(checked));
+      });
       return;
     }
     if (persistentItem) {
@@ -212,11 +196,11 @@ export default class ContextMenu {
     }
     this._dropdown.hide();
   }
-
   _bindEvents() {
     this._listen(this._element, "contextmenu", (event) => this._handleContextMenu(event));
     this._listen(this._element, "keydown", (event) => this._handleKeydown(event));
     this._listen(this._fallback, "click", () => this._handleFallbackClick());
+    this._listen(this._fallback, "keydown", (event) => this._handleFallbackKeydown(event));
     this._listen(this._menu, "click", (event) => this._handleMenuClick(event));
     this._listen(this._fallback, "show.bs.dropdown", (event) => {
       if (!this._trigger("show", true)) {
@@ -225,13 +209,9 @@ export default class ContextMenu {
     });
     this._listen(this._fallback, "shown.bs.dropdown", () => {
       this._syncExpanded(true);
-      // Bootstrap's own show() never focuses an item either -- only its
-      // Up/Down-key handler does, since a pointer-driven open (right-click,
-      // or a click on the fallback trigger) should let :hover carry the
-      // highlight instead of a focus ring competing with it. A keyboard-
-      // driven open (Shift+F10/ContextMenu key) still lands on the first
-      // item, matching that same native arrow-key-open convention.
-      if (this._openMethod === "keyboard") {
+      if (this._openMethod === "fallback-keyboard") {
+        this._fallback.focus();
+      } else if (this._openMethod === "keyboard") {
         this._menuItems()[0]?.focus();
       } else {
         this._menu.focus();
@@ -248,22 +228,8 @@ export default class ContextMenu {
       const invoker = this._invoker;
       this._pointerRect = null;
       this._invoker = null;
-      // A native Bootstrap click on the fallback trigger bypasses _open()
-      // entirely (Bootstrap's own capture-phase click-to-toggle handler
-      // calls show() directly), so _handleFallbackClick's bubble-phase
-      // "click" listener always runs too late to set _openMethod before
-      // shown.bs.dropdown reads it. Resetting it here, back to the neutral
-      // pointer default, is what keeps that path correct rather than
-      // inheriting whatever a prior keyboard-triggered open last set.
       this._openMethod = null;
       this._trigger("hidden");
-      // Bootstrap's own dataApiKeydownHandler (js/src/dropdown.js) intercepts
-      // Escape in the document capture phase and hardcodes
-      // `getToggleButton.focus()` (our fallback trigger) after hide().
-      // Nothing downstream of a capture-phase stopPropagation() can observe
-      // that keydown to redirect focus, so correct it in a microtask, which
-      // still runs before the next paint: if focus landed on the fallback
-      // but a different trigger invoked this menu, return focus there.
       queueMicrotask(() => {
         if (invoker && invoker !== this._fallback && this._document.activeElement === this._fallback) {
           invoker.focus();
@@ -272,3 +238,6 @@ export default class ContextMenu {
     });
   }
 }
+export {
+  ContextMenu as default
+};