@x-tech-laboratories/x-libs 0.14.0 → 0.14.2

package/dist/web/react/menus.js

@@ -2,8 +2,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Menus and popovers on the native popover: closed by Escape or a click elsewhere, and here also by scrolling or leaving the window.
 import { Fragment, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { item_after_key, item_starting_with, on_screen_position } from "../menus.js";
-// Shows the element as a popover while it is rendered, calling the latest on_close once it closes for any reason.
-function use_popover(on_close, opener) {
+// Shows the element as a popover while it is rendered, calling the latest on_close once it closes for any reason; a manual one closes itself on a press outside it.
+function use_popover(on_close, opener, manual = false) {
     const element = useRef(null);
     const close = useRef(on_close);
     close.current = on_close;
@@ -14,15 +14,18 @@ function use_popover(on_close, opener) {
             popover.hidePopover(); };
         const toggled = (event) => { if (event.newState === "closed")
             close.current(); };
-        const outside_scroll = (event) => { if (!popover.contains(event.target))
+        const outside = (event) => { if (!popover.contains(event.target))
             hide(); };
         popover.addEventListener("toggle", toggled);
         window.addEventListener("blur", hide);
-        window.addEventListener("scroll", outside_scroll, true);
+        window.addEventListener("scroll", outside, true);
+        if (manual)
+            window.addEventListener("pointerdown", outside, true);
         return () => {
             popover.removeEventListener("toggle", toggled);
             window.removeEventListener("blur", hide);
-            window.removeEventListener("scroll", outside_scroll, true);
+            window.removeEventListener("scroll", outside, true);
+            window.removeEventListener("pointerdown", outside, true);
         };
     }, []);
     const return_focus = () => {
@@ -126,14 +129,15 @@ export function MenuList({ items, on_close }) {
                         item.run();
                     }, children: [_jsx("span", { className: "menu-label", children: item.label }), item.hint && _jsx("span", { className: "menu-hint", children: item.hint })] })] }, item.label))) }));
 }
+// Manual, since on Linux the menu opens on the button's press and an auto popover would close on its release.
 export function ContextMenu({ x, y, items, on_close, label }) {
-    const { element: menu, dismiss, return_focus } = use_popover(on_close);
+    const { element: menu, dismiss, return_focus } = use_popover(on_close, undefined, true);
     const keys = use_menu_keys(menu, dismiss, true);
     useLayoutEffect(() => {
         show_at(menu.current, x, y);
         menu.current.querySelector(item_selector)?.focus();
     }, [x, y]);
-    return (_jsx("div", { ref: menu, popover: "auto", className: "menu", role: "menu", "aria-label": label, tabIndex: -1, onKeyDown: keys, children: _jsx(MenuList, { items: items, on_close: () => { return_focus(); on_close(); } }) }));
+    return (_jsx("div", { ref: menu, popover: "manual", className: "menu", role: "menu", "aria-label": label, tabIndex: -1, onKeyDown: keys, children: _jsx(MenuList, { items: items, on_close: () => { return_focus(); on_close(); } }) }));
 }
 let open_menu = null;
 let next_menu_id = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "Code the X-apps share: agents and their long runs, passwords and sign-in, the Fastify server pieces, durations, and the web page's helpers and widgets",
   "license": "GPL-3.0-or-later",
   "repository": {