flexdesk 0.17.7 → 0.17.9

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]);
     }
 
     /**

package/src/ui/utils/menu_viewport.js

@@ -0,0 +1,81 @@
+/**
+ * menu_viewport.js — keeping a context menu inside the window (BUG-0040).
+ *
+ * FlexDesk draws three context menus of its own: `showContextMenu`
+ * (../components/context_menu.js), the DataTable's right-click menu
+ * (../components/data_table.js) and `NotebookTabBar`'s tab menu
+ * (../../editor/notebook_tab_bar.js). Each placed itself with its own copy of
+ * `top = min(y, innerHeight - height - 8)`, and none had a max-height. A menu
+ * taller than the window then opened above its top edge (the DataTable's did
+ * not clamp at all: a 101-item row menu opened at y=-2153 in a 761 px window)
+ * or ran off its bottom, and nothing scrolled, so the items past the edge could
+ * not be reached by any means.
+ *
+ * One placement now, for all three:
+ *   - the menu is at most the window's height less a margin above and below,
+ *     and scrolls inside when it is longer (`overflow-y: auto` in flexdesk.css);
+ *   - it opens at the pointer, moved left or up just enough to fit, and never
+ *     above the window's top or left edge;
+ *   - keyboard movement focuses an item and scrolls it into view within the
+ *     menu, so every item can be reached with the arrows.
+ */
+
+/** The gap kept between a menu and the window's edges, in px. */
+export const MENU_VIEWPORT_MARGIN = 8;
+
+/**
+ * Size and place an open (displayed) menu at `(x, y)` inside its window.
+ *
+ * @param {HTMLElement} menu  the menu, already in the document and displayed
+ * @param {number} x          client x of the pointer
+ * @param {number} y          client y of the pointer
+ * @param {number} [margin]   gap to the window's edges
+ */
+export function placeMenuInViewport(menu, x, y, margin = MENU_VIEWPORT_MARGIN) {
+    const view = menu.ownerDocument?.defaultView || window;
+    const vw = view.innerWidth;
+    const vh = view.innerHeight;
+    const maxHeight = Math.max(0, vh - 2 * margin);
+    menu.style.maxHeight = `${maxHeight}px`;
+    menu.scrollTop = 0;
+    // flexdesk.css makes the menu `box-sizing: border-box`, so its measured
+    // height (padding and border included) is at most `maxHeight`.
+    const rect = menu.getBoundingClientRect();
+    const left = Math.min(x, vw - rect.width - margin);
+    const top = Math.min(y, vh - rect.height - margin);
+    menu.style.left = `${Math.max(0, left)}px`;
+    menu.style.top = `${Math.max(0, top)}px`;
+}
+
+/**
+ * Focus a menu item and bring it into view inside the (scrolling) menu.
+ * `preventScroll` keeps the page where it is; `block: 'nearest'` scrolls the
+ * menu only as far as the item needs.
+ */
+export function focusMenuItem(item) {
+    if (!item) return;
+    item.focus({ preventScroll: true });
+    item.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+}
+
+/**
+ * Up/Down/Home/End over `items` (the enabled ones), wrapping, from the one
+ * that has focus. Returns true when the key moved focus (the caller's event
+ * has then been `preventDefault`ed).
+ *
+ * @param {KeyboardEvent} e
+ * @param {HTMLElement[]} items
+ */
+export function moveMenuFocus(e, items) {
+    if (!items.length) return false;
+    const at = items.indexOf(items[0].ownerDocument.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 false;
+    e.preventDefault();
+    focusMenuItem(next);
+    return true;
+}