flexdesk 0.17.18 → 0.18.1

package/src/ui/utils/fire_event.js

@@ -0,0 +1,17 @@
+/**
+ * Fire a DOM event on `target`, built by `target`'s own window.
+ *
+ * `dispatchEvent` takes only an event from the target's realm. A bare
+ * `new Event(...)` reads whatever global the running code sees, and that is a
+ * different realm from the element's in an iframe, and under jsdom on any Node
+ * with a global `Event` of its own: there it throws "parameter 1 is not of type
+ * 'Event'" in the middle of whatever fired it.
+ *
+ * @param {EventTarget & Node} target  an element
+ * @param {string} type
+ * @param {CustomEventInit} [init]
+ */
+export function fireEvent(target, type, init) {
+    const view = target.ownerDocument.defaultView;
+    target.dispatchEvent(new view.CustomEvent(type, init));
+}

package/src/ui/utils/focusable.js

@@ -0,0 +1,25 @@
+/**
+ * Collect the focusable elements inside `root`, in DOM order: what a focus trap
+ * cycles through. Hidden and zero-size elements are skipped, since Tab visits only
+ * what the reader can see.
+ *
+ * @param {HTMLElement|null} root
+ * @returns {HTMLElement[]}
+ */
+export function collectFocusable(root) {
+    if (!root) return [];
+    const sel = [
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled]):not([type="hidden"])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(',');
+    return Array.from(root.querySelectorAll(sel)).filter((el) => {
+        if (el.hidden) return false;
+        if (el.closest('[hidden]')) return false;
+        const r = el.getBoundingClientRect();
+        return r.width > 0 || r.height > 0;
+    });
+}

package/src/ui/utils/modal_host.js

@@ -0,0 +1,27 @@
+/**
+ * C25. WHERE A DIALOG OR A FLOATING PANEL OPENS, when the application spans more
+ * than one window.
+ *
+ * Every modal is a `ManagedWindow` with no `container`, so it mounts into
+ * `document.body` — and "document" is the document the MODULE was loaded in. A
+ * consumer that opens a second browser window with `window.open` and builds its
+ * DOM from the opener's realm (which is how a pop-out grid works: same modules,
+ * same JS context, a different document) therefore gets its dialogs in the
+ * window it popped OUT of. The user presses "Add column" on their second monitor
+ * and a dialog appears on the first, behind whatever is there.
+ *
+ * Passing a container at each call site was the other option and it is worse:
+ * twenty-one of them across eleven files, every one of which would have to be
+ * given a document it has no other reason to know about, and any one missed is
+ * this bug again with no way to see it from here.
+ *
+ * So the HOST is ambient and the consumer sets it when its focus moves. Null —
+ * every consumer today — means `document.body`, exactly as before.
+ *
+ * A module of its own because modals and the anchored layers both ask it, and
+ * `openForm` draws its combobox on an anchored layer. `modal.js` re-exports both
+ * names: that is where they are public.
+ */
+let host = null;
+export function setModalHost(el) { host = el || null; }
+export function modalHost() { return host; }

package/src/ui/utils/tooltip_service.js

@@ -13,6 +13,10 @@ let currentTarget = null;
 let listenersAttached = false;
 let mouseCheckInterval = null;
 let lastMousePosition = { x: 0, y: 0 };
+/** The target keyboard focus is showing a tooltip for: no pointer holds it up. */
+let focusTarget = null;
+/** The last press was a key. Focus that follows a pointer's, or a script's after one, shows nothing. */
+let byKeyboard = false;
 
 /**
  * Create or get the tooltip DOM element.
@@ -140,14 +144,15 @@ function showTooltip(target) {
     const hasPlain = target.classList && target.classList.contains('twm-has-tooltip');
 
     if (!hasLatex && !hasPlain) return;
+    if (!target.getAttribute(hasLatex ? 'data-latex-tooltip' : 'data-tooltip')) return;
 
+    stopMouseCheck();
     currentTarget = target;
     const tooltip = createTooltipElement();
 
     if (hasLatex) {
         // Render LaTeX using KaTeX
         const latex = target.getAttribute('data-latex-tooltip');
-        if (!latex) return;
 
         try {
             if (typeof katex !== 'undefined') {
@@ -166,7 +171,6 @@ function showTooltip(target) {
     } else if (hasPlain) {
         // Plain text tooltip with line breaks preserved
         const text = target.getAttribute('data-tooltip');
-        if (!text) return;
 
         // Replace 
 with actual line breaks, preserve formatting
         const formattedText = text.replace(/
/g, '\n');
@@ -197,11 +201,13 @@ function showTooltip(target) {
 
     // Position and show
     requestAnimationFrame(() => {
+        // Gone in the frame's wait: focus passing through, or the pointer leaving.
+        if (currentTarget !== target) return;
         positionTooltip(target, tooltip);
         tooltip.classList.add('visible');
 
-        // Start mouse position check for auto-hide
-        startMouseCheck();
+        // Start mouse position check for auto-hide, unless focus is what holds it.
+        if (focusTarget !== target) startMouseCheck();
     });
 }
 
@@ -213,23 +219,51 @@ function hideTooltip() {
         tooltipElement.classList.remove('visible');
     }
     currentTarget = null;
+    focusTarget = null;
+    stopMouseCheck();
+}
 
-    // Clear mouse check interval
+function stopMouseCheck() {
     if (mouseCheckInterval) {
         clearInterval(mouseCheckInterval);
         mouseCheckInterval = null;
     }
 }
 
+/**
+ * The pointer has gone from what it showed, or a scroll took that away. What focus
+ * holds is not the pointer's to hide: it stays, or comes back from under the
+ * pointer's, as long as its target is in sight.
+ */
+function pointerGone() {
+    const held = focusTarget;
+    if (held && held === currentTarget) return;
+    hideTooltip();
+    if (!held) return;
+    focusTarget = held;
+    showTooltip(held);
+    requestAnimationFrame(() => {
+        if (held === focusTarget && held === currentTarget) followFocus();
+    });
+}
+
+/**
+ * A scroll while focus holds the tooltip, the one the focus itself caused included:
+ * the tooltip goes with its target, and waits while the target is out of sight.
+ */
+function followFocus() {
+    const { left, top, width, height } = focusTarget.getBoundingClientRect();
+    const inSight = focusTarget.contains(document.elementFromPoint(left + width / 2, top + height / 2));
+    tooltipElement.classList.toggle('visible', inSight);
+    if (inSight) positionTooltip(focusTarget, tooltipElement);
+}
+
 /**
  * Start the mouse position check interval.
  * Hides tooltip if mouse is no longer over the target element.
  */
 function startMouseCheck() {
-    // Clear any existing interval
-    if (mouseCheckInterval) {
-        clearInterval(mouseCheckInterval);
-    }
+    stopMouseCheck();
 
     // Check every 3 seconds if mouse is still on the target element
     mouseCheckInterval = setInterval(() => {
@@ -249,11 +283,11 @@ function startMouseCheck() {
                                      elementUnderMouse.closest('.twm-has-tooltip, .has-latex-tooltip') === currentTarget;
 
             if (!isStillOnTarget) {
-                hideTooltip();
+                pointerGone();
             }
         } else {
             // Mouse is outside the document
-            hideTooltip();
+            pointerGone();
         }
     }, 3000);
 }
@@ -289,11 +323,44 @@ function attachListeners() {
         if (!(target instanceof Element)) return;
         const tooltipTarget = target.closest('.has-latex-tooltip, .twm-has-tooltip');
         if (!tooltipTarget) return;
-        hideTooltip();
+        pointerGone();
+    }, true);
+
+    // On the window, ahead of a chord handler that stops the event. A chord is not
+    // a person walking the page by keyboard: it says nothing either way.
+    window.addEventListener('keydown', (event) => {
+        if (!event.ctrlKey && !event.metaKey && !event.altKey) byKeyboard = true;
+    }, true);
+    window.addEventListener('pointerdown', () => {
+        byKeyboard = false;
     }, true);
 
-    // Hide on scroll
-    document.addEventListener('scroll', hideTooltip, true);
+    // Keyboard focus shows what hovering shows. The focus a click leaves, or that
+    // its handler moves into a field, would keep a tooltip standing after the pointer
+    // has gone. `:focus-visible` cannot tell: it is true for any text field.
+    document.addEventListener('focusin', (event) => {
+        const target = event.target;
+        if (!(target instanceof Element) || !byKeyboard) return;
+        const tooltipTarget = target.closest('.has-latex-tooltip, .twm-has-tooltip');
+        if (!tooltipTarget) return;
+        focusTarget = tooltipTarget;
+        showTooltip(tooltipTarget);
+    }, true);
+
+    document.addEventListener('focusout', (event) => {
+        if (!focusTarget) return;
+        const next = event.relatedTarget;
+        if (next instanceof Node && focusTarget.contains(next)) return;
+        // A pointer's tooltip on another target is the pointer's to take down.
+        if (focusTarget === currentTarget) hideTooltip();
+        else focusTarget = null;
+    }, true);
+
+    // Hide on scroll, unless focus is what holds it.
+    document.addEventListener('scroll', () => {
+        if (focusTarget && focusTarget === currentTarget) followFocus();
+        else pointerGone();
+    }, true);
 
     // ESC key hides all tooltips application-wide (does not stop propagation)
     document.addEventListener('keydown', (event) => {

package/widgets.js

@@ -1,10 +1,10 @@
 /**
  * @flexdesk/widgets — The widget set: DataTable, modals, managed windows, toasts, trees,
- * context menus, menu bars, panels, section stacks, a step wizard, the help modal and the notification centre.
+ * context menus, menu bars, panels, section stacks, a rich select, a combobox, a popover, a step wizard, a workspace picker, a filter builder, an assistant chat shell, the help modal and the notification centre.
  *
  * GENERATED by scripts/gen_barrels.py. Do not hand-edit.
  *
- * 60 modules.
+ * 71 modules.
  */
 
 export * from './src/ui/base/component_base.js';
@@ -14,6 +14,7 @@ export * from './src/ui/components/about_dialog.js';
 export * from './src/ui/components/alert_log.js';
 export * from './src/ui/components/alerts_pane.js';
 export * from './src/ui/components/action_dropdown.js';
+export * from './src/ui/components/anchored_layer.js';
 export * from './src/ui/components/attribute_list_editor.js';
 export * from './src/ui/components/autocomplete_field.js';
 export * from './src/ui/components/category_picker.js';
@@ -23,24 +24,32 @@ export * from './src/ui/components/cell_selection.js';
 export * from './src/ui/components/color_field.js';
 export * from './src/ui/components/color_list_field.js';
 export * from './src/ui/components/column_fit.js';
+export * from './src/ui/components/combobox.js';
 export * from './src/ui/components/computing_status_window.js';
 export * from './src/ui/components/confirm_dialog.js';
 export * from './src/ui/components/context_menu.js';
+export * from './src/ui/components/chat_shell.js';
+export * from './src/ui/components/chat_state_machine.js';
 export * from './src/ui/components/conversation_view.js';
 export * from './src/ui/components/data_table.js';
 export * from './src/ui/components/detail_header.js';
 export * from './src/ui/components/document_outline.js';
 export * from './src/ui/components/drag_reorder.js';
 export * from './src/ui/components/fact_table.js';
+export * from './src/ui/components/filter_builder.js';
+export * from './src/ui/components/filter_model.js';
 export * from './src/ui/components/gallery_picker.js';
 export * from './src/ui/components/inline_renamer.js';
 export * from './src/ui/components/managed_window.js';
 export * from './src/ui/components/menu_bar.js';
 export * from './src/ui/components/modal.js';
 export * from './src/ui/components/notification_history.js';
+export * from './src/ui/components/popover.js';
 export * from './src/ui/components/progress.js';
+export * from './src/ui/components/recent_items.js';
 export * from './src/ui/components/record_list.js';
 export * from './src/ui/components/section_stack.js';
+export * from './src/ui/components/select.js';
 export * from './src/ui/components/series.js';
 export * from './src/ui/components/settings_view.js';
 export * from './src/ui/components/slide_out_panel.js';
@@ -56,6 +65,7 @@ export * from './src/ui/components/tree_view.js';
 export * from './src/ui/components/tsv.js';
 export * from './src/ui/components/window_taskbar.js';
 export * from './src/ui/components/wizard.js';
+export * from './src/ui/components/workspace_picker.js';
 export * from './src/ui/controllers/window_chrome_controller.js';
 export * from './src/ui/notification_center.js';
 export * from './src/ui/utils/auto_scrollbars.js';