flexdesk 0.17.8 → 0.17.9

package/src/tiles/tile_base.js

@@ -8,6 +8,8 @@
 
 import { openRawTracesWindow } from '../charts/plot_popout_window.js';
 import { formatVariableLabel } from './config_schema.js';
+import { ActionDropdown } from '../ui/components/action_dropdown.js';
+import { modalHost } from '../ui/components/modal.js';
 // The host is INJECTED, not fetched from a global.
 //
 // This imported `appHost()` from ui/js/ecoagent/app_host.js — a tile reaching into
@@ -403,6 +405,12 @@ export class TileBase {
         if (this._disposed) return;
         this._disposed = true;
 
+        // An open ⋯ menu lives on document.body; take it back first.
+        this._closeTileMenu();
+        this._menuButton = null;
+        this._menuDropdown = null;
+        this._menuHome = null;
+
         // Close expand window if open
         if (this._expandWindow?.isVisible) {
             this._expandWindow.close();
@@ -485,6 +493,13 @@ export class TileBase {
      * @private
      */
     _buildChrome() {
+        // A rebuilt header gets a new ⋯ menu; an open old one must not stay
+        // behind on document.body.
+        this._closeTileMenu();
+        this._menuButton = null;
+        this._menuDropdown = null;
+        this._menuHome = null;
+
         // Header with drag handle and controls
         const header = document.createElement('div');
         header.className = 'tile-header';
@@ -584,23 +599,13 @@ export class TileBase {
             const menuBtn = header.querySelector('.tile-menu-btn');
             const menuDropdown = header.querySelector('.tile-menu-dropdown');
             if (menuBtn && menuDropdown) {
+                this._menuButton = menuBtn;
+                this._menuDropdown = menuDropdown;
+                this._menuHome = menuDropdown.parentNode;
                 menuBtn.addEventListener('click', (e) => {
                     e.stopPropagation();
-                    const isOpen = !menuDropdown.hidden;
-                    menuDropdown.hidden = !menuDropdown.hidden;
-                    if (!isOpen) {
-                        // Close on outside click
-                        const closeMenu = (ev) => {
-                            if (!menuDropdown.contains(ev.target) && ev.target !== menuBtn) {
-                                menuDropdown.hidden = true;
-                                document.removeEventListener('pointerdown', closeMenu, true);
-                            }
-                        };
-                        // Delay to avoid immediate close from the same click
-                        requestAnimationFrame(() => {
-                            document.addEventListener('pointerdown', closeMenu, true);
-                        });
-                    }
+                    if (menuDropdown.hidden) this._openTileMenu();
+                    else this._closeTileMenu();
                 });
                 // One listener per rendered entry, dispatching by `data-action`
                 // into `_onMenuAction`. Wiring each action by name here is what
@@ -609,7 +614,7 @@ export class TileBase {
                 menuDropdown.querySelectorAll('.tile-menu-item').forEach((itemEl) => {
                     itemEl.addEventListener('click', (e) => {
                         e.stopPropagation();
-                        menuDropdown.hidden = true;
+                        this._closeTileMenu();
                         this._onMenuAction(itemEl.dataset.action);
                     });
                 });
@@ -654,6 +659,52 @@ export class TileBase {
         }
     }
 
+    /**
+     * Open the ⋯ menu. It is drawn on `document.body` (or the open modal's
+     * host, as `showContextMenu` is), not inside the tile: a tile clips its
+     * content, so a menu wider than a narrow tile lost its left part. It is
+     * placed with `ActionDropdown.position` — fixed, under the button (above
+     * when there is no room), right edges aligned, kept inside the window.
+     * @private
+     */
+    _openTileMenu() {
+        const btn = this._menuButton;
+        const menu = this._menuDropdown;
+        if (!btn || !menu || !menu.hidden) return;
+        (modalHost() || document.body).appendChild(menu);
+        menu.hidden = false;
+        ActionDropdown.position(btn, menu, { align: 'end' });
+        // Close on a press outside the menu and its button. Added a frame
+        // later so the press that opened it does not close it.
+        this._menuOutsideListener = (ev) => {
+            if (!menu.contains(ev.target) && !btn.contains(ev.target)) this._closeTileMenu();
+        };
+        const listener = this._menuOutsideListener;
+        requestAnimationFrame(() => {
+            if (this._menuOutsideListener === listener) {
+                document.addEventListener('pointerdown', listener, true);
+            }
+        });
+    }
+
+    /**
+     * Close the ⋯ menu and put it back in the tile's header.
+     * @private
+     */
+    _closeTileMenu() {
+        const menu = this._menuDropdown;
+        if (this._menuOutsideListener) {
+            document.removeEventListener('pointerdown', this._menuOutsideListener, true);
+            this._menuOutsideListener = null;
+        }
+        if (!menu) return;
+        menu.hidden = true;
+        for (const prop of ['position', 'top', 'bottom', 'left', 'right', 'maxHeight', 'overflowY']) {
+            menu.style[prop] = '';
+        }
+        if (this._menuHome && menu.parentNode !== this._menuHome) this._menuHome.appendChild(menu);
+    }
+
     /**
      * Handle config button click — highlight tile and emit config request.
      * @private

package/src/ui/components/action_dropdown.js

@@ -379,8 +379,12 @@ export class ActionDropdown {
      *
      * @param {HTMLElement} trigger - The element the dropdown opens from
      * @param {HTMLElement} menu - The dropdown menu element to position
+     * @param {Object} [opts]
+     * @param {'start'|'end'} [opts.align='start'] - Which trigger edge the menu
+     *     lines up with first: `'start'` its left edge, `'end'` its right edge.
+     *     Either flips to the other edge when it would leave the window.
      */
-    static position(trigger, menu) {
+    static position(trigger, menu, { align = 'start' } = {}) {
         if (!trigger || !menu) return;
 
         // Reset any prior inline position so natural size can be measured.
@@ -424,12 +428,21 @@ export class ActionDropdown {
             top = EDGE_MARGIN;
         }
 
-        // ── Horizontal: align left-edge with trigger, flip if off-screen ──
-        let left = triggerRect.left;
-
-        if (left + menuRect.width > vw - EDGE_MARGIN) {
-            // Align right edges instead.
+        // ── Horizontal: align with the trigger's start (left) or end (right)
+        //    edge, flip to the other edge if off-screen ──
+        let left;
+        if (align === 'end') {
             left = triggerRect.right - menuRect.width;
+            if (left < EDGE_MARGIN) {
+                // Align left edges instead.
+                left = triggerRect.left;
+            }
+        } else {
+            left = triggerRect.left;
+            if (left + menuRect.width > vw - EDGE_MARGIN) {
+                // Align right edges instead.
+                left = triggerRect.right - menuRect.width;
+            }
         }
 
         // Still off-screen? Clamp to edges.

package/src/ui/components/context_menu.js

@@ -24,9 +24,16 @@
  * Disabled items are skipped by the arrows rather than focusable-but-inert.
  * `<button>` rather than a div with `tabindex`: the browser then gives Enter and
  * Space for free and screen readers announce it without further help.
+ *
+ * ── It stays inside the window (BUG-0040) ─────────────────────────────
+ * The top was clamped at 0 but nothing capped the height, so a long menu ran
+ * off the bottom and could not scroll. `placeMenuInViewport` caps it at the
+ * window's height less a margin; it scrolls inside, the arrows scroll the
+ * focused item into view, and scrolling the menu itself does not close it.
  */
 
 import { modalHost } from './modal.js';
+import { placeMenuInViewport, moveMenuFocus, focusMenuItem } from '../utils/menu_viewport.js';
 
 let _activeMenu = null;
 let _returnFocusTo = null;
@@ -92,23 +99,20 @@ export function showContextMenu(x, y, items, onAction) {
     menu.style.display = 'block';
     _activeMenu = menu;
 
-    // Position with viewport clamping.
-    const rect = menu.getBoundingClientRect();
-    const left = Math.min(x, window.innerWidth  - rect.width  - 8);
-    const top  = Math.min(y, window.innerHeight - rect.height - 8);
-    menu.style.left = `${Math.max(0, left)}px`;
-    menu.style.top  = `${Math.max(0, top)}px`;
+    // Position inside the window, scrolling when taller than it (BUG-0040).
+    placeMenuInViewport(menu, x, y);
 
-    // Close on outside click / scroll / Escape.
+    // Close on outside click / scroll / Escape. A scroll INSIDE the menu is
+    // the menu being read, not the page moving under it.
     setTimeout(() => {
         document.addEventListener('mousedown', _outsideHandler, { once: true, capture: true });
     }, 0);
     document.addEventListener('keydown', _keyHandler);
-    window.addEventListener('scroll', hideContextMenu, { once: true, capture: true });
+    window.addEventListener('scroll', _scrollHandler, { capture: true });
 
     // Focus the first item the keyboard can actually use. `preventScroll` so a
     // menu opened near the bottom of a long page does not jump it.
-    _enabledItems(menu)[0]?.focus({ preventScroll: true });
+    focusMenuItem(_enabledItems(menu)[0]);
 }
 
 export function hideContextMenu() {
@@ -119,6 +123,7 @@ export function hideContextMenu() {
     _activeMenu = null;
     _returnFocusTo = null;
     document.removeEventListener('keydown', _keyHandler);
+    window.removeEventListener('scroll', _scrollHandler, { capture: true });
     // Only take focus back if the menu still had it. A click elsewhere has
     // already moved focus deliberately and must not be undone.
     if (held && returnTo?.isConnected) returnTo.focus?.({ preventScroll: true });
@@ -134,17 +139,12 @@ function _enabledItems(menu) {
 function _keyHandler(e) {
     if (!_activeMenu) return;
     if (e.key === 'Escape') { e.preventDefault(); hideContextMenu(); return; }
-    const items = _enabledItems(_activeMenu);
-    if (items.length === 0) return;
-    const at = items.indexOf(document.activeElement);
-    let next = null;
-    if (e.key === 'ArrowDown')      next = items[(at + 1 + items.length) % items.length];
-    else if (e.key === 'ArrowUp')   next = items[(at - 1 + items.length) % items.length];
-    else if (e.key === 'Home')      next = items[0];
-    else if (e.key === 'End')       next = items[items.length - 1];
-    if (!next) return;
-    e.preventDefault();
-    next.focus({ preventScroll: true });
+    moveMenuFocus(e, _enabledItems(_activeMenu));
+}
+
+function _scrollHandler(e) {
+    if (_activeMenu && e.target?.nodeType && _activeMenu.contains(e.target)) return;
+    hideContextMenu();
 }
 
 function _outsideHandler(e) {

package/src/ui/components/data_table.js

@@ -20,6 +20,7 @@
  */
 
 import { createRafResizeObserver } from '../utils/raf_resize_observer.js';
+import { placeMenuInViewport, moveMenuFocus, focusMenuItem } from '../utils/menu_viewport.js';
 import {
     ISO_DATE, ISO_DATETIME, formatDate, formatDuration, matchDateFilter,
     matchDurationFilter, parseDateValue, parseDuration,
@@ -764,6 +765,8 @@ export class DataTable {
         // STORY-0010. The right-click the custom items on show were built for,
         // read again when one is chosen.
         this._contextMenuCtx = null;
+        // BUG-0040. What had focus when the menu opened, given it back on close.
+        this._contextMenuReturnFocus = null;
         // STORY-0010 `keyboardNav`: the row the arrows last moved to.
         this._navCursor = null;
         this._filterDropdownEl = null;
@@ -7281,6 +7284,7 @@ export class DataTable {
 
         const menu = document.createElement('div');
         menu.className = 'twm-context-menu data-context-menu';
+        menu.setAttribute('role', 'menu');
         menu.style.display = 'none';
         menu.style.position = 'fixed';
         menu.style.zIndex = '10001';
@@ -7338,19 +7342,31 @@ export class DataTable {
             if (event?.target && menu?.contains(event.target)) return;
             this._hideContextMenu();
         };
-        const hideOnEscape = (event) => {
-            if (event.key === 'Escape') this._hideContextMenu();
+        // BUG-0040. The keyboard reaches every item: Up/Down/Home/End move
+        // focus (and scroll the item into view in a menu taller than the
+        // window), Enter and Space choose, Escape closes.
+        const onMenuKey = (event) => {
+            if (event.key === 'Escape') { this._hideContextMenu(); return; }
+            if (!menu || menu.style.display === 'none') return;
+            const focused = document.activeElement;
+            if ((event.key === 'Enter' || event.key === ' ')
+                && focused?.classList?.contains('twm-context-menu-item') && menu.contains(focused)) {
+                event.preventDefault();
+                focused.click();
+                return;
+            }
+            moveMenuFocus(event, this._contextMenuEnabledItems());
         };
         const hideOnResize = () => this._hideContextMenu();
 
         document.addEventListener('click', hideOnGlobal, true);
         document.addEventListener('scroll', hideOnGlobal, true);
         window.addEventListener('resize', hideOnResize);
-        document.addEventListener('keydown', hideOnEscape);
+        document.addEventListener('keydown', onMenuKey);
 
         this._contextMenuGlobals.push(() => document.removeEventListener('click', hideOnGlobal, true));
         this._contextMenuGlobals.push(() => document.removeEventListener('scroll', hideOnGlobal, true));
-        this._contextMenuGlobals.push(() => document.removeEventListener('keydown', hideOnEscape));
+        this._contextMenuGlobals.push(() => document.removeEventListener('keydown', onMenuKey));
         this._contextMenuGlobals.push(() => window.removeEventListener('resize', hideOnResize));
     }
 
@@ -7362,10 +7378,23 @@ export class DataTable {
     }
 
     _hideContextMenu() {
-        if (this._contextMenuEl) {
-            this._contextMenuEl.style.display = 'none';
+        const menu = this._contextMenuEl;
+        const returnTo = this._contextMenuReturnFocus;
+        this._contextMenuReturnFocus = null;
+        const held = !!menu && menu.style.display !== 'none' && menu.contains(document.activeElement);
+        if (menu) {
+            menu.style.display = 'none';
         }
         this._disarmContextMenuGlobals();
+        // BUG-0040. Focus goes back where it was, but only if the menu still
+        // had it: a click elsewhere has moved it deliberately.
+        if (held && returnTo?.isConnected) returnTo.focus?.({ preventScroll: true });
+    }
+
+    /** BUG-0040. The items the keyboard can land on. */
+    _contextMenuEnabledItems() {
+        const menu = this._contextMenuEl;
+        return menu ? [...menu.querySelectorAll('.twm-context-menu-item:not(.disabled)')] : [];
     }
 
     _showContextMenu(clientX, clientY, custom = null) {
@@ -7381,20 +7410,17 @@ export class DataTable {
             item.style.pointerEvents = hasSelection ? '' : 'none';
         });
 
-        menu.style.display = 'block';
-        const rect = menu.getBoundingClientRect();
-        let left = clientX;
-        let top = clientY;
-
-        if (left + rect.width > window.innerWidth) {
-            left = window.innerWidth - rect.width - 8;
-        }
-        if (top + rect.height > window.innerHeight) {
-            top = window.innerHeight - rect.height - 8;
-        }
+        // BUG-0040. Every item is a menu item the keyboard can focus.
+        menu.querySelectorAll('.twm-context-menu-item').forEach((item) => {
+            item.tabIndex = -1;
+            if (!item.hasAttribute('role')) item.setAttribute('role', 'menuitem');
+        });
+        if (!menu.contains(document.activeElement)) this._contextMenuReturnFocus = document.activeElement;
 
-        menu.style.left = `${left}px`;
-        menu.style.top = `${top}px`;
+        // BUG-0040. Inside the window, at most its height, scrolling when longer.
+        menu.style.display = 'block';
+        placeMenuInViewport(menu, clientX, clientY);
+        focusMenuItem(this._contextMenuEnabledItems()[0]);
     }
 
     /**