@fusion.dev/helix-core 0.142.0 → 0.143.0

package/dist/controllers/source-controller/source-controller.d.ts

@@ -26,10 +26,24 @@ export interface SourceHost extends ReactiveControllerHost, HTMLElement {
  * The element is watched for `childList` and `characterData` alike, because
  * renaming a series edits a text node in place rather than replacing a cell,
  * and nothing in a page has reason to know a chart is reading it.
+ *
+ * **The tree around it is watched as well, for the table that is not there
+ * yet.** A framework page renders a chart first and its table once the data
+ * loads, or re-keys the table and so replaces it under the same id. Watching
+ * only the element resolved on connect found nothing in the first case and
+ * kept a detached table in the second, and the chart drew neither until some
+ * unrelated property changed. So the root the id resolves in is watched for
+ * nodes arriving and leaving and for `id` and `role` changing, and each batch
+ * asks the id again. That is one lookup by id per batch, and a chart redraws
+ * only when the answer is a different element.
  */
 export declare class SourceController implements ReactiveController {
     private host;
     private observer;
+    /** Watches the tree `for` resolves in, for the table arriving, leaving or being replaced. */
+    private tree;
+    /** The element the watcher is on, or null where `for` named nothing. */
+    private watched;
     /** Whether a hydrating render was told there was nothing, and needs the render after. */
     private deferred;
     /**
@@ -96,4 +110,12 @@ export declare class SourceController implements ReactiveController {
      * there is no `MutationObserver`, which is the server.
      */
     watch(): void;
+    /**
+     * Watches the root `for` resolves in, so a table that arrives, leaves or is
+     * replaced under the same id is followed.
+     *
+     * Only while `for` names something and the host sits in a tree that can
+     * resolve an id, which a detached host and a server render do not.
+     */
+    private watchTree;
 }

package/dist/controllers/source-controller/source-controller.js

@@ -2,6 +2,7 @@ import { elementById } from '../../utils/element-by-id/element-by-id.js';
 import { readRows, readSeries } from '../../utils/read-series/read-series.js';
 export class SourceController {
     constructor(host) {
+        this.watched = null;
         this.deferred = false;
         this.version = 0;
         this.host = host;
@@ -58,12 +59,20 @@ export class SourceController {
     hostDisconnected() {
         this.observer?.disconnect();
         this.observer = undefined;
+        this.tree?.disconnect();
+        this.tree = undefined;
     }
     watch() {
         this.observer?.disconnect();
+        this.tree?.disconnect();
         this.version += 1;
         const element = this.resolve();
-        if (!element || typeof MutationObserver === 'undefined') {
+        this.watched = element;
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.watchTree();
+        if (!element) {
             return;
         }
         this.observer ??= new MutationObserver(() => {
@@ -76,4 +85,21 @@ export class SourceController {
             subtree: true,
         });
     }
+    watchTree() {
+        const root = this.host.getRootNode();
+        if (this.host.for === '' || typeof root.getElementById !== 'function') {
+            return;
+        }
+        this.tree ??= new MutationObserver(() => {
+            if (this.resolve() !== this.watched) {
+                this.watch();
+                this.host.requestUpdate();
+            }
+        });
+        this.tree.observe(root, {
+            attributeFilter: ['id', 'role'],
+            childList: true,
+            subtree: true,
+        });
+    }
 }

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -198,6 +198,22 @@ export declare class VirtualizeController implements ReactiveController {
      * Call it from `willUpdate`, before the render that draws the grown set.
      */
     shift(by: number): void;
+    /**
+     * How tall item `index` is: what was measured, or the estimate.
+     *
+     * For a host that draws an item outside the window, the row holding focus
+     * say, and has to take that item's room out of a spacer.
+     */
+    sizeOf(index: number): number;
+    /**
+     * Scrolls the box the least distance that shows item `index` whole.
+     *
+     * For a host moving focus to an item outside the window, whose own element
+     * cannot be scrolled to because it is not drawn where it belongs. `inset` is
+     * how far into the box the items start, for a heading that sticks at its
+     * top and covers that much of every item scrolled under it.
+     */
+    reveal(index: number, inset?: number): void;
     /**
      * Drops every measurement, for a host that swapped its data.
      *

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -74,7 +74,7 @@ export class VirtualizeController {
         this.host.requestUpdate();
     }
     uniform(box, total, size, overscan) {
-        const first = Math.max(0, Math.floor(box.scrollTop / size) - overscan);
+        const first = Math.max(0, Math.min(Math.floor(box.scrollTop / size), total) - overscan);
         const fits = Math.ceil(box.clientHeight / size) + overscan * 2;
         const last = Math.min(total, first + fits);
         return { after: Math.max(0, (total - last) * size), before: first * size, first, last };
@@ -146,6 +146,26 @@ export class VirtualizeController {
         };
         this.owed += room;
     }
+    sizeOf(index) {
+        return this.measuring() ? this.heights.at(index) : Math.max(1, this.options.estimate());
+    }
+    reveal(index, inset = 0) {
+        const box = this.options.container();
+        if (!box) {
+            return;
+        }
+        const total = Math.max(0, this.options.count());
+        const top = this.measuring()
+            ? this.heights.before(index, total)
+            : index * Math.max(1, this.options.estimate());
+        const bottom = top + this.sizeOf(index) + inset;
+        if (top < box.scrollTop) {
+            box.scrollTop = top;
+        }
+        else if (bottom > box.scrollTop + box.clientHeight) {
+            box.scrollTop = bottom - box.clientHeight;
+        }
+    }
     forget() {
         this.heights.forget();
     }
@@ -161,7 +181,9 @@ export class VirtualizeController {
                 'the last one. That happens when the scrolling box has no height of its own: its ' +
                 '`clientHeight` is then a function of the rows just drawn, so measuring moves what is ' +
                 'being measured and the two never agree. Give the container a block size and an ' +
-                'overflow, which is what the styled tier does and what a headless consumer has to.',
+                'overflow, which is what the styled tier does and what a headless consumer has to. ' +
+                'It also happens when the rows report no height, such as a row drawn with ' +
+                '`display: contents`, which is a fault in the component that draws them.',
             tag: typeof host.localName === 'string' ? host.localName : undefined,
         });
     }

package/dist/events/events.d.ts

@@ -319,6 +319,13 @@ export type MapPanDetail = ViewportPanDetail;
 export type MapZoomDetail = ViewportZoomDetail;
 /** Detail carried by `helix-navigate`. */
 export interface NavigateDetail {
+    /**
+     * The page asked for, as a number, where the component pages by number.
+     *
+     * Beside `value` rather than in place of it, because a calendar pages by
+     * month and its `value` is a month.
+     */
+    page?: number;
     /** Where the view is moving to, in whatever the component pages by. */
     value: string;
 }
@@ -368,7 +375,7 @@ export interface FacetDetail {
 export interface ReadDetail {
     /**
      * The state being asked for, as a boolean rather than a word that reads like
-     * one, which is `helix-toggle`'s rule and for the same reason: `"false"` is
+     * one, which is `helix-before-toggle`'s rule and for the same reason: `"false"` is
      * truthy and a consumer who forgets that marks everything read.
      */
     read: boolean;
@@ -472,7 +479,7 @@ export declare class HelixDismissEvent extends CustomEvent<DismissDetail> {
  *
  * A boolean is the case where it *is* lost, because `"false"` is truthy, so a
  * consumer who forgets to compare against the word gets the opposite answer and
- * no error. That is why checkedness has `helix-toggle` and its own boolean, and
+ * no error. That is why checkedness has `helix-before-toggle` and its own boolean, and
  * it is the line to hold: **stringify a value, never a fact.** A new control
  * whose state is a boolean wants an event with a typed detail, not a `String()`
  * call here.
@@ -750,11 +757,37 @@ export declare class HelixBeforePinEvent extends CustomEvent<ChangeDetail> {
     static readonly eventName = "helix-before-pin";
     constructor(detail: ChangeDetail);
 }
+/**
+ * A transcript was pinned to the bottom, or let go of it.
+ *
+ * The notification half of `helix-before-pin`, sent once `pinned` has moved,
+ * so `currentTarget.pinned` is the new state and `detail.value` says it as
+ * `true` or `false`. Not cancelable: the decision was the request's.
+ */
+export declare class HelixPinEvent extends CustomEvent<ChangeDetail> {
+    static readonly eventName = "helix-pin";
+    constructor(detail: ChangeDetail);
+}
 /** A divider is about to move, and can be refused. */
 export declare class HelixBeforeResizeEvent extends CustomEvent<ChangeDetail> {
     static readonly eventName = "helix-before-resize";
     constructor(detail: ChangeDetail);
 }
+/**
+ * A divider settled somewhere new.
+ *
+ * The notification half of `helix-before-resize`, sent once `position` has
+ * moved, with the new position. Not cancelable: the decision was the
+ * request's.
+ *
+ * **Past tense, because `helix-resize` was already taken** by a measurement,
+ * the height a sandboxed preview reports for what it drew, and one name cannot
+ * carry both.
+ */
+export declare class HelixResizedEvent extends CustomEvent<ChangeDetail> {
+    static readonly eventName = "helix-resized";
+    constructor(detail: ChangeDetail);
+}
 /**
  * The divider between a sandbox's panes is about to move, and can be refused.
  *
@@ -783,6 +816,17 @@ export declare class HelixBeforeCollapseEvent extends CustomEvent<ChangeDetail>
     static readonly eventName = "helix-before-collapse";
     constructor(detail: ChangeDetail);
 }
+/**
+ * A pane shut or reopened.
+ *
+ * The notification half of `helix-before-collapse`, sent once `collapsed` has
+ * moved. `detail.value` is the side that is shut, or empty where both panes
+ * are open. Not cancelable: the decision was the request's.
+ */
+export declare class HelixCollapseEvent extends CustomEvent<ChangeDetail> {
+    static readonly eventName = "helix-collapse";
+    constructor(detail: ChangeDetail);
+}
 /** Source is about to be edited, and can be refused. */
 export declare class HelixBeforeEditEvent extends CustomEvent<ChangeDetail> {
     static readonly eventName = "helix-before-edit";
@@ -839,11 +883,11 @@ export declare class HelixBeforeToggleEvent extends CustomEvent<ToggleDetail> {
 export interface ScrolledDetail {
     /**
      * Whether the page is scrolled away from the top, as a boolean and not a word
-     * that reads like one. Follows `helix-toggle`'s rule for the same reason.
+     * that reads like one. Follows `helix-before-toggle`'s rule for the same reason.
      */
     scrolled: boolean;
 }
-/** Detail carried by `helix-toggle`. */
+/** Detail carried by `helix-before-toggle`. */
 export interface ToggleDetail {
     /** The state being asked for, as a boolean and not a word that reads like one. */
     checked: boolean;
@@ -1089,6 +1133,20 @@ export declare class HelixSortEvent extends CustomEvent<SortDetail> {
     static readonly eventName = "helix-sort";
     constructor(detail: SortDetail);
 }
+/**
+ * The rows are in a different order.
+ *
+ * The notification after `helix-sort`, sent once `sort` has moved, with the
+ * order now in force. Not cancelable: the decision was the request's.
+ *
+ * **Past tense, because the plain verb is the request.** `helix-sort` was
+ * cancelable before the library had a word for its notification, and
+ * consumers bind it by that name, so the notification takes the one after it.
+ */
+export declare class HelixSortedEvent extends CustomEvent<SortDetail> {
+    static readonly eventName = "helix-sorted";
+    constructor(detail: SortDetail);
+}
 /**
  * Fired when the reader changes which values a field is filtered by.
  *
@@ -1116,6 +1174,17 @@ export declare class HelixFilterEvent extends CustomEvent<FilterDetail> {
     static readonly eventName = "helix-filter";
     constructor(detail: FilterDetail);
 }
+/**
+ * A component is showing a narrower or a wider set.
+ *
+ * The notification after `helix-filter`, sent once the query has moved, with
+ * the query now in force. Not cancelable, and past tense for the reason
+ * `helix-sorted` is.
+ */
+export declare class HelixFilteredEvent extends CustomEvent<FilterDetail> {
+    static readonly eventName = "helix-filtered";
+    constructor(detail: FilterDetail);
+}
 /** What a shortcut reports when its chord is pressed. */
 export interface ShortcutDetail {
     /**
@@ -1149,6 +1218,17 @@ export declare class HelixSelectEvent extends CustomEvent<SelectDetail> {
     static readonly eventName = "helix-select";
     constructor(detail: SelectDetail);
 }
+/**
+ * A set holds a different selection.
+ *
+ * The notification after a `helix-select` that asked to change what is
+ * selected, sent once the selection has moved, with the selection now in
+ * force. Not cancelable, and past tense for the reason `helix-sorted` is.
+ */
+export declare class HelixSelectedEvent extends CustomEvent<SelectDetail> {
+    static readonly eventName = "helix-selected";
+    constructor(detail: SelectDetail);
+}
 /**
  * Fired when the reader asks for the columns in a different order.
  *
@@ -1166,6 +1246,17 @@ export declare class HelixReorderEvent extends CustomEvent<ChangeDetail> {
     static readonly eventName = "helix-reorder";
     constructor(detail: ChangeDetail);
 }
+/**
+ * The columns are in a different order.
+ *
+ * The notification after `helix-reorder`, sent once the order has moved, with
+ * every field in the new one. Not cancelable, and past tense for the reason
+ * `helix-sorted` is.
+ */
+export declare class HelixReorderedEvent extends CustomEvent<ChangeDetail> {
+    static readonly eventName = "helix-reordered";
+    constructor(detail: ChangeDetail);
+}
 /**
  * Fired when a reader reaches the oldest turn a transcript holds, while there are
  * older ones to fetch.
@@ -1214,6 +1305,7 @@ declare const registry: {
     readonly HelixCanvasViewEvent: typeof HelixCanvasViewEvent;
     readonly HelixCanvasZoomEvent: typeof HelixCanvasZoomEvent;
     readonly HelixCaretEvent: typeof HelixCaretEvent;
+    readonly HelixCollapseEvent: typeof HelixCollapseEvent;
     readonly HelixCompleteEvent: typeof HelixCompleteEvent;
     readonly HelixConnectEvent: typeof HelixConnectEvent;
     readonly HelixConsoleEvent: typeof HelixConsoleEvent;
@@ -1222,6 +1314,7 @@ declare const registry: {
     readonly HelixDismissEvent: typeof HelixDismissEvent;
     readonly HelixFacetEvent: typeof HelixFacetEvent;
     readonly HelixFilterEvent: typeof HelixFilterEvent;
+    readonly HelixFilteredEvent: typeof HelixFilteredEvent;
     readonly HelixGraphFilterEvent: typeof HelixGraphFilterEvent;
     readonly HelixGraphLayoutEvent: typeof HelixGraphLayoutEvent;
     readonly HelixGraphPanEvent: typeof HelixGraphPanEvent;
@@ -1240,20 +1333,25 @@ declare const registry: {
     readonly HelixMoveEvent: typeof HelixMoveEvent;
     readonly HelixNavigateEvent: typeof HelixNavigateEvent;
     readonly HelixNextEvent: typeof HelixNextEvent;
+    readonly HelixPinEvent: typeof HelixPinEvent;
     readonly HelixPreviousEvent: typeof HelixPreviousEvent;
     readonly HelixReadEvent: typeof HelixReadEvent;
     readonly HelixReconnectEvent: typeof HelixReconnectEvent;
     readonly HelixRelabelEvent: typeof HelixRelabelEvent;
     readonly HelixRemoveEvent: typeof HelixRemoveEvent;
     readonly HelixReorderEvent: typeof HelixReorderEvent;
+    readonly HelixReorderedEvent: typeof HelixReorderedEvent;
+    readonly HelixResizedEvent: typeof HelixResizedEvent;
     readonly HelixResizeEvent: typeof HelixResizeEvent;
     readonly HelixSampleEndEvent: typeof HelixSampleEndEvent;
     readonly HelixSampleStartEvent: typeof HelixSampleStartEvent;
     readonly HelixScrolledEvent: typeof HelixScrolledEvent;
     readonly HelixSelectEvent: typeof HelixSelectEvent;
+    readonly HelixSelectedEvent: typeof HelixSelectedEvent;
     readonly HelixSendEvent: typeof HelixSendEvent;
     readonly HelixShortcutEvent: typeof HelixShortcutEvent;
     readonly HelixSortEvent: typeof HelixSortEvent;
+    readonly HelixSortedEvent: typeof HelixSortedEvent;
     readonly HelixTourAskEvent: typeof HelixTourAskEvent;
 };
 /**

package/dist/events/events.js

@@ -385,6 +385,17 @@ export class HelixBeforePinEvent extends CustomEvent {
         });
     }
 }
+export class HelixPinEvent extends CustomEvent {
+    static { this.eventName = 'helix-pin'; }
+    constructor(detail) {
+        super(HelixPinEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixBeforeResizeEvent extends CustomEvent {
     static { this.eventName = 'helix-before-resize'; }
     constructor(detail) {
@@ -396,6 +407,17 @@ export class HelixBeforeResizeEvent extends CustomEvent {
         });
     }
 }
+export class HelixResizedEvent extends CustomEvent {
+    static { this.eventName = 'helix-resized'; }
+    constructor(detail) {
+        super(HelixResizedEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixBeforeSplitEvent extends CustomEvent {
     static { this.eventName = 'helix-before-split'; }
     constructor(detail) {
@@ -429,6 +451,17 @@ export class HelixBeforeCollapseEvent extends CustomEvent {
         });
     }
 }
+export class HelixCollapseEvent extends CustomEvent {
+    static { this.eventName = 'helix-collapse'; }
+    constructor(detail) {
+        super(HelixCollapseEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixBeforeEditEvent extends CustomEvent {
     static { this.eventName = 'helix-before-edit'; }
     constructor(detail) {
@@ -582,6 +615,17 @@ export class HelixSortEvent extends CustomEvent {
         });
     }
 }
+export class HelixSortedEvent extends CustomEvent {
+    static { this.eventName = 'helix-sorted'; }
+    constructor(detail) {
+        super(HelixSortedEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixFacetEvent extends CustomEvent {
     static { this.eventName = 'helix-facet'; }
     constructor(detail) {
@@ -604,6 +648,17 @@ export class HelixFilterEvent extends CustomEvent {
         });
     }
 }
+export class HelixFilteredEvent extends CustomEvent {
+    static { this.eventName = 'helix-filtered'; }
+    constructor(detail) {
+        super(HelixFilteredEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixShortcutEvent extends CustomEvent {
     static { this.eventName = 'helix-shortcut'; }
     constructor(detail) {
@@ -626,6 +681,17 @@ export class HelixSelectEvent extends CustomEvent {
         });
     }
 }
+export class HelixSelectedEvent extends CustomEvent {
+    static { this.eventName = 'helix-selected'; }
+    constructor(detail) {
+        super(HelixSelectedEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixReorderEvent extends CustomEvent {
     static { this.eventName = 'helix-reorder'; }
     constructor(detail) {
@@ -637,6 +703,17 @@ export class HelixReorderEvent extends CustomEvent {
         });
     }
 }
+export class HelixReorderedEvent extends CustomEvent {
+    static { this.eventName = 'helix-reordered'; }
+    constructor(detail) {
+        super(HelixReorderedEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixHistoryEvent extends CustomEvent {
     static { this.eventName = 'helix-history'; }
     constructor() {
@@ -669,6 +746,7 @@ const registry = {
     HelixCanvasViewEvent,
     HelixCanvasZoomEvent,
     HelixCaretEvent,
+    HelixCollapseEvent,
     HelixCompleteEvent,
     HelixConnectEvent,
     HelixConsoleEvent,
@@ -677,6 +755,7 @@ const registry = {
     HelixDismissEvent,
     HelixFacetEvent,
     HelixFilterEvent,
+    HelixFilteredEvent,
     HelixGraphFilterEvent,
     HelixGraphLayoutEvent,
     HelixGraphPanEvent,
@@ -695,20 +774,25 @@ const registry = {
     HelixMoveEvent,
     HelixNavigateEvent,
     HelixNextEvent,
+    HelixPinEvent,
     HelixPreviousEvent,
     HelixReadEvent,
     HelixReconnectEvent,
     HelixRelabelEvent,
     HelixRemoveEvent,
     HelixReorderEvent,
+    HelixReorderedEvent,
+    HelixResizedEvent,
     HelixResizeEvent,
     HelixSampleEndEvent,
     HelixSampleStartEvent,
     HelixScrolledEvent,
     HelixSelectEvent,
+    HelixSelectedEvent,
     HelixSendEvent,
     HelixShortcutEvent,
     HelixSortEvent,
+    HelixSortedEvent,
     HelixTourAskEvent,
 };
 export const helixEventNames = new Set(Object.values(registry).map((event) => event.eventName));

package/dist/helix-element/react-bridge.js

@@ -78,16 +78,18 @@ export const reactPropFor = (event) => {
     }
     return `on${event.type.charAt(0).toUpperCase()}${event.type.slice(1)}`;
 };
+const lowercasePropFor = (event) => event.type.includes('-') || REACT_WIRES.has(event.type) ? undefined : `on${event.type}`;
 export const bindReactHandler = (host, event) => {
     const props = reactPropsOf(host);
     if (props === undefined) {
         return;
     }
     auditReactProps(host, props);
-    const key = reactPropFor(event);
-    const handler = key === undefined ? undefined : props[key];
-    if (typeof handler === 'function') {
-        host.addEventListener(event.type, handler);
+    for (const key of [reactPropFor(event), lowercasePropFor(event)]) {
+        const handler = key === undefined ? undefined : props[key];
+        if (typeof handler === 'function') {
+            host.addEventListener(event.type, handler);
+        }
     }
 };
 export const applyReactProperties = (host) => {