@hypericon/mico 0.5.11 → 0.5.13

package/dist/cjs/components/menu/Menu.d.ts

@@ -1,15 +1,38 @@
 import m from "mithril";
 export interface MenuOptions {
+    /** Prevent vertical flipping when menu would go off-screen at the bottom */
     noFlipV?: boolean;
+    /** Prevent horizontal flipping when menu would go off-screen at the right edge */
     noFlipH?: boolean;
+    /** Force the menu to flip vertically regardless of available space */
     forceFlipV?: boolean;
+    /** Force the menu to flip horizontally regardless of available space */
     forceFlipH?: boolean;
-    /** Add the menu directly to the element which raised the event */
+    /**
+     * Add the menu directly to the element which raised the event, rather than
+     * to the global menu container
+     */
     asChild?: boolean;
-    /** Optionally display a menu using an HTMLDialogElement */
+    /**
+     * Display the menu using an HTMLDialogElement instead of a standard div.
+     * Useful for complex stacking contexts.
+     */
     asDialog?: boolean;
-    /** Whether the menu is within a dialog, and should be displayed differently */
+    /**
+     * Indicates the menu is within a dialog element and should be displayed with
+     * fixed positioning relative to the dialog
+     */
     isWithinDialog?: boolean;
+    /**
+     * Keep menu open when clicking within it. Useful for menus with toggle switches
+     * or radio buttons where users want to try multiple options without reopening the menu.
+     * The menu will still close when clicking outside or pressing Escape.
+     *
+     * N.B.: the menu will not be redrawn automatically, as it is not mounted using Mithril.
+     * Use `menuMgr.redraw()` to redraw the menu.
+     * @default false
+     */
+    keepOpenOnClick?: boolean;
 }
 export declare const Menu: m.Component<{
     x: number | undefined;

package/dist/cjs/components/menu/Menu.js

@@ -58,7 +58,16 @@ exports.Menu = {
             key: Date.now(),
             class: `mico-menu ${menu_settings_1.MENU_SETTINGS.MENU_CLASS}`,
             style: `position: ${position}; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
+            role: "menu",
+            "aria-orientation": "vertical",
             tabIndex: -1,
+            onclick: (ev) => {
+                var _a;
+                // Prevent clicks within the menu from propagating when keepOpenOnClick is enabled
+                if ((_a = attrs.options) === null || _a === void 0 ? void 0 : _a.keepOpenOnClick) {
+                    ev.stopPropagation();
+                }
+            },
             onkeydown: (ev) => {
                 var _a, _b, _c, _d, _e, _f;
                 const focussableElems = Array.from((_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll("button, input, select, textarea")) !== null && _b !== void 0 ? _b : [])

package/dist/cjs/components/menu/MenuButton.js

@@ -14,8 +14,10 @@ exports.MenuButton = {
             (0, mithril_1.default)(mithril_1.default.route.Link, {
                 class: `mico-menu-button ${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${menu_settings_1.MENU_SETTINGS.MENU_BUTTON_CLASS}`,
                 style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""} width: 100%; height: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center;`,
+                role: "menuitem",
                 href: attrs.href,
                 disabled: attrs.disabled,
+                "aria-disabled": attrs.disabled ? "true" : undefined,
                 onclick: (ev) => {
                     var _a;
                     (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
@@ -31,7 +33,9 @@ exports.MenuButton = {
             (0, mithril_1.default)("button", {
                 class: `mico-menu-button ${(_c = attrs.class) !== null && _c !== void 0 ? _c : ""} ${menu_settings_1.MENU_SETTINGS.MENU_BUTTON_CLASS}`,
                 style: `${(_d = attrs.style) !== null && _d !== void 0 ? _d : ""} width: 100%; height: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center;`,
+                role: "menuitem",
                 disabled: attrs.disabled,
+                "aria-disabled": attrs.disabled ? "true" : undefined,
                 onclick: (ev) => {
                     var _a;
                     (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);

package/dist/cjs/components/menu/MenuSeparator.js

@@ -12,6 +12,8 @@ exports.MenuSeparator = {
         return (0, mithril_1.default)("", {
             class: `mico-menu-separator ${menu_settings_1.MENU_SETTINGS.MENU_SEPARATOR_CLASS}`,
             style: "margin: 0.25rem 0; border-bottom-width: 1px; border-bottom-style: solid;",
+            role: "separator",
+            "aria-orientation": "horizontal",
         });
     }
 };

package/dist/cjs/components/menu/menu-manager.d.ts

@@ -8,6 +8,7 @@ export declare class MenuManager {
     private _menuVnode;
     menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
     get menuVnode(): m.Vnode<any, any> | undefined;
+    private currentOptions?;
     get isOpen(): boolean;
     constructor();
     /**
@@ -20,6 +21,11 @@ export declare class MenuManager {
      * @param menuContents
      */
     show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive, options?: MenuOptions): Promise<void>;
+    /**
+     * Manually redraw the currently open menu. Useful when menu content needs to update
+     * while the menu remains open (e.g., when using keepOpenOnClick with changing state).
+     */
+    redraw(): void;
     hide(): void;
     /**
      * Set the default behavior for whether menus are added as children of the element that raised the event.

package/dist/cjs/components/menu/menu-manager.js

@@ -29,8 +29,18 @@ class MenuManager {
         this.containerEl = document.createElement("div");
         this.containerEl.classList.add("menu-container");
         document.body.append(this.containerEl);
-        document.addEventListener("click", () => {
+        document.addEventListener("click", (ev) => {
+            var _a;
             if (this.isOpen) {
+                // If keepOpenOnClick is enabled, check if the click is within the menu
+                if ((_a = this.currentOptions) === null || _a === void 0 ? void 0 : _a.keepOpenOnClick) {
+                    const target = ev.target;
+                    const clickedInMenu = target.closest(".mico-menu");
+                    if (clickedInMenu) {
+                        menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Click within menu, keeping open (keepOpenOnClick=true)");
+                        return; // Don't close the menu
+                    }
+                }
                 this.hide();
             }
         });
@@ -106,6 +116,7 @@ class MenuManager {
                 menuContents,
             ]);
             this._menuVnode.next(menuVnode);
+            this.currentOptions = options;
             // If the menu is to be shown as a dialog, we need to mount it to a dialog element
             if (options === null || options === void 0 ? void 0 : options.asDialog) {
                 // this.dialogEl = document.createElement("dialog");
@@ -149,6 +160,27 @@ class MenuManager {
             menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Added menu");
         });
     }
+    /**
+     * Manually redraw the currently open menu. Useful when menu content needs to update
+     * while the menu remains open (e.g., when using keepOpenOnClick with changing state).
+     */
+    redraw() {
+        var _a;
+        if (!this.isOpen || !this.menuVnode) {
+            return;
+        }
+        // Re-render the menu in whichever container it's currently mounted
+        if ((_a = this.currentOptions) === null || _a === void 0 ? void 0 : _a.asDialog) {
+            mithril_1.default.render(this.dialogEl, this.menuVnode);
+        }
+        else if (this.directParentWrapperEl) {
+            mithril_1.default.render(this.directParentWrapperEl, this.menuVnode);
+        }
+        else {
+            mithril_1.default.render(this.containerEl, this.menuVnode);
+        }
+        menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Redrawn menu");
+    }
     hide() {
         var _a, _b;
         this._menuVnode.next(undefined);
@@ -158,6 +190,7 @@ class MenuManager {
         this.directParentEl = undefined;
         (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
         mithril_1.default.render(this.dialogEl, []);
+        this.currentOptions = undefined;
         menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Closed menu");
     }
     /**

package/dist/esm/components/menu/Menu.d.ts

@@ -1,15 +1,38 @@
 import m from "mithril";
 export interface MenuOptions {
+    /** Prevent vertical flipping when menu would go off-screen at the bottom */
     noFlipV?: boolean;
+    /** Prevent horizontal flipping when menu would go off-screen at the right edge */
     noFlipH?: boolean;
+    /** Force the menu to flip vertically regardless of available space */
     forceFlipV?: boolean;
+    /** Force the menu to flip horizontally regardless of available space */
     forceFlipH?: boolean;
-    /** Add the menu directly to the element which raised the event */
+    /**
+     * Add the menu directly to the element which raised the event, rather than
+     * to the global menu container
+     */
     asChild?: boolean;
-    /** Optionally display a menu using an HTMLDialogElement */
+    /**
+     * Display the menu using an HTMLDialogElement instead of a standard div.
+     * Useful for complex stacking contexts.
+     */
     asDialog?: boolean;
-    /** Whether the menu is within a dialog, and should be displayed differently */
+    /**
+     * Indicates the menu is within a dialog element and should be displayed with
+     * fixed positioning relative to the dialog
+     */
     isWithinDialog?: boolean;
+    /**
+     * Keep menu open when clicking within it. Useful for menus with toggle switches
+     * or radio buttons where users want to try multiple options without reopening the menu.
+     * The menu will still close when clicking outside or pressing Escape.
+     *
+     * N.B.: the menu will not be redrawn automatically, as it is not mounted using Mithril.
+     * Use `menuMgr.redraw()` to redraw the menu.
+     * @default false
+     */
+    keepOpenOnClick?: boolean;
 }
 export declare const Menu: m.Component<{
     x: number | undefined;

package/dist/esm/components/menu/Menu.js

@@ -58,7 +58,16 @@ exports.Menu = {
             key: Date.now(),
             class: `mico-menu ${menu_settings_1.MENU_SETTINGS.MENU_CLASS}`,
             style: `position: ${position}; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
+            role: "menu",
+            "aria-orientation": "vertical",
             tabIndex: -1,
+            onclick: (ev) => {
+                var _a;
+                // Prevent clicks within the menu from propagating when keepOpenOnClick is enabled
+                if ((_a = attrs.options) === null || _a === void 0 ? void 0 : _a.keepOpenOnClick) {
+                    ev.stopPropagation();
+                }
+            },
             onkeydown: (ev) => {
                 var _a, _b, _c, _d, _e, _f;
                 const focussableElems = Array.from((_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll("button, input, select, textarea")) !== null && _b !== void 0 ? _b : [])

package/dist/esm/components/menu/MenuButton.js

@@ -14,8 +14,10 @@ exports.MenuButton = {
             (0, mithril_1.default)(mithril_1.default.route.Link, {
                 class: `mico-menu-button ${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${menu_settings_1.MENU_SETTINGS.MENU_BUTTON_CLASS}`,
                 style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""} width: 100%; height: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center;`,
+                role: "menuitem",
                 href: attrs.href,
                 disabled: attrs.disabled,
+                "aria-disabled": attrs.disabled ? "true" : undefined,
                 onclick: (ev) => {
                     var _a;
                     (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
@@ -31,7 +33,9 @@ exports.MenuButton = {
             (0, mithril_1.default)("button", {
                 class: `mico-menu-button ${(_c = attrs.class) !== null && _c !== void 0 ? _c : ""} ${menu_settings_1.MENU_SETTINGS.MENU_BUTTON_CLASS}`,
                 style: `${(_d = attrs.style) !== null && _d !== void 0 ? _d : ""} width: 100%; height: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center;`,
+                role: "menuitem",
                 disabled: attrs.disabled,
+                "aria-disabled": attrs.disabled ? "true" : undefined,
                 onclick: (ev) => {
                     var _a;
                     (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);

package/dist/esm/components/menu/MenuSeparator.js

@@ -12,6 +12,8 @@ exports.MenuSeparator = {
         return (0, mithril_1.default)("", {
             class: `mico-menu-separator ${menu_settings_1.MENU_SETTINGS.MENU_SEPARATOR_CLASS}`,
             style: "margin: 0.25rem 0; border-bottom-width: 1px; border-bottom-style: solid;",
+            role: "separator",
+            "aria-orientation": "horizontal",
         });
     }
 };

package/dist/esm/components/menu/menu-manager.d.ts

@@ -8,6 +8,7 @@ export declare class MenuManager {
     private _menuVnode;
     menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
     get menuVnode(): m.Vnode<any, any> | undefined;
+    private currentOptions?;
     get isOpen(): boolean;
     constructor();
     /**
@@ -20,6 +21,11 @@ export declare class MenuManager {
      * @param menuContents
      */
     show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive, options?: MenuOptions): Promise<void>;
+    /**
+     * Manually redraw the currently open menu. Useful when menu content needs to update
+     * while the menu remains open (e.g., when using keepOpenOnClick with changing state).
+     */
+    redraw(): void;
     hide(): void;
     /**
      * Set the default behavior for whether menus are added as children of the element that raised the event.

package/dist/esm/components/menu/menu-manager.js

@@ -29,8 +29,18 @@ class MenuManager {
         this.containerEl = document.createElement("div");
         this.containerEl.classList.add("menu-container");
         document.body.append(this.containerEl);
-        document.addEventListener("click", () => {
+        document.addEventListener("click", (ev) => {
+            var _a;
             if (this.isOpen) {
+                // If keepOpenOnClick is enabled, check if the click is within the menu
+                if ((_a = this.currentOptions) === null || _a === void 0 ? void 0 : _a.keepOpenOnClick) {
+                    const target = ev.target;
+                    const clickedInMenu = target.closest(".mico-menu");
+                    if (clickedInMenu) {
+                        menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Click within menu, keeping open (keepOpenOnClick=true)");
+                        return; // Don't close the menu
+                    }
+                }
                 this.hide();
             }
         });
@@ -106,6 +116,7 @@ class MenuManager {
                 menuContents,
             ]);
             this._menuVnode.next(menuVnode);
+            this.currentOptions = options;
             // If the menu is to be shown as a dialog, we need to mount it to a dialog element
             if (options === null || options === void 0 ? void 0 : options.asDialog) {
                 // this.dialogEl = document.createElement("dialog");
@@ -149,6 +160,27 @@ class MenuManager {
             menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Added menu");
         });
     }
+    /**
+     * Manually redraw the currently open menu. Useful when menu content needs to update
+     * while the menu remains open (e.g., when using keepOpenOnClick with changing state).
+     */
+    redraw() {
+        var _a;
+        if (!this.isOpen || !this.menuVnode) {
+            return;
+        }
+        // Re-render the menu in whichever container it's currently mounted
+        if ((_a = this.currentOptions) === null || _a === void 0 ? void 0 : _a.asDialog) {
+            mithril_1.default.render(this.dialogEl, this.menuVnode);
+        }
+        else if (this.directParentWrapperEl) {
+            mithril_1.default.render(this.directParentWrapperEl, this.menuVnode);
+        }
+        else {
+            mithril_1.default.render(this.containerEl, this.menuVnode);
+        }
+        menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Redrawn menu");
+    }
     hide() {
         var _a, _b;
         this._menuVnode.next(undefined);
@@ -158,6 +190,7 @@ class MenuManager {
         this.directParentEl = undefined;
         (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
         mithril_1.default.render(this.dialogEl, []);
+        this.currentOptions = undefined;
         menu_settings_1.MENU_SETTINGS.DEBUG_MENU && console.log("Closed menu");
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",