@fusion.dev/helix-headless 0.183.0 → 0.185.0

package/dist/menu/root/menu-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, formatWords, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MIRROR_RULE, MixinCollection, MixinControllerOpen, markMatches, OpenPhaseController, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, auditEntry, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MIRROR_RULE, MixinCollection, MixinControllerOpen, OpenPhaseController, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -98,18 +98,13 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             surface: () => this.partNamed('surface'),
         });
         this.settledOnce = false;
-        this.filterPage = null;
-        this.handleFilterInput = (event) => {
-            event.stopPropagation();
-            this.filterBy(event.target.value);
-        };
         this.followRemoved = (records) => {
             if (!this.open) {
                 return;
             }
             const active = deepActiveElement();
             const lost = active === null || active === document.body || !active.isConnected;
-            const record = records.find((one) => [...one.removedNodes].some((node) => isItem(node) && (this.filterable ? node === this.highlighted : lost)));
+            const record = records.find((one) => [...one.removedNodes].some((node) => isItem(node) && (this.filters ? node === this.filters.highlighted : lost)));
             if (!record) {
                 return;
             }
@@ -125,7 +120,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             const next = after(record.nextSibling, 'nextSibling') ??
                 after(record.previousSibling, 'previousSibling') ??
                 items.at(-1);
-            if (this.filterable || next) {
+            if (this.filters || next) {
                 this.reach(next);
                 return;
             }
@@ -188,23 +183,13 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             const items = this.items;
             const at = items.findIndex((item) => item.active);
             const along = inlineStep(this, event.key);
-            const typing = this.filterable && event.composedPath()[0] === this.field;
-            const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+            if (this.filters?.keydown(event, items, at)) {
+                event.preventDefault();
+                return;
+            }
             if (event.key === 'Escape') {
                 event.stopPropagation();
-                if (!this.filterable || this.filter === '') {
-                    this.leave();
-                }
-                else {
-                    this.filterBy('');
-                }
-            }
-            else if (typing && step !== 0) {
-                const count = items.length;
-                this.reach(items[at < 0 ? (step > 0 ? 0 : count - 1) : (at + step + count) % count]);
-            }
-            else if (typing && event.key === 'Enter') {
-                items[at]?.renderRoot.querySelector('[part="item"]')?.click();
+                this.leave();
             }
             else if (along === 1 && items[at]?.hasSubmenu) {
                 this.enter(items[at]);
@@ -244,14 +229,6 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.longPress.down(event);
             }
         };
-        this.handleMouseDown = (event) => {
-            if (this.filterable &&
-                this.open &&
-                event.composedPath()[0] !== this.field &&
-                !this.fromTrigger(event)) {
-                event.preventDefault();
-            }
-        };
         this.handlePointerMove = (event) => {
             this.longPress.move(event);
         };
@@ -406,48 +383,27 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         return rows.filter((row) => !row.disabled && this.kept(row));
     }
     get menuBox() {
-        return this.filterable
+        return this.filters
             ? (this.renderRoot?.querySelector('#items') ?? null)
             : this.partNamed('surface');
     }
-    get field() {
-        return this.partNamed('search-field');
-    }
-    get filtering() {
-        return this.filterable && this.filter.trim() !== '' && this.filter !== this.refused;
+    get filters() {
+        return this.filterable ? this.filterer : undefined;
     }
     kept(row) {
-        return (!this.filtering ||
-            this.holderOf(row) !== this.filterPage ||
-            filterKeeps(slottedWords(row, ['']), this.filter.trim(), this.filterMatch));
+        return this.filters?.kept(row) ?? true;
     }
     requestFilter(value) {
-        if (value === this.filter) {
-            return;
-        }
-        this.filterPage = this.flies ? this.keyPage : this.drilldown.page;
-        this.refused = this.dispatchEvent(new HelixFilterEvent({ value })) ? undefined : value;
-        this.filter = value;
-    }
-    filterBy(value) {
-        this.requestFilter(value);
-        void this.updateComplete.then(() => this.reach(this.items[0]));
+        this.filterer?.request(value);
     }
     reach(row) {
-        if (!this.filterable) {
+        const filters = this.filters;
+        if (!filters) {
             row?.focus();
             return;
         }
-        if (this.highlighted && this.highlighted !== row) {
-            this.highlighted.highlighted = false;
-        }
-        this.highlighted = row;
-        const field = this.field;
-        if (field && 'ariaActiveDescendantElement' in field) {
-            field.ariaActiveDescendantElement = row ?? null;
-        }
+        filters.highlight(row);
         if (row) {
-            row.highlighted = true;
             this.revealRow(row);
         }
     }
@@ -460,7 +416,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         this.updateComplete.then(() => {
             const items = this.items;
-            this.field?.focus();
+            this.filters?.field?.focus();
             this.reach(end === 'first' ? items[0] : items[items.length - 1]);
         });
     }
@@ -610,7 +566,6 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('contextmenu', this.handleContextMenu);
         this.addEventListener('pointerdown', this.handlePointerDown);
-        this.addEventListener('mousedown', this.handleMouseDown);
         this.addEventListener('pointermove', this.handlePointerMove);
         this.addEventListener('pointerup', this.handlePointerUp);
         this.addEventListener('pointercancel', this.handlePointerCancel);
@@ -635,10 +590,6 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('contextmenu', this.handleContextMenu);
         this.removeEventListener('pointerdown', this.handlePointerDown);
-        this.removeEventListener('mousedown', this.handleMouseDown);
-        if (this.filterable) {
-            markMatches(this, [], '');
-        }
         this.removeEventListener('pointermove', this.handlePointerMove);
         this.removeEventListener('pointerup', this.handlePointerUp);
         this.removeEventListener('pointercancel', this.handlePointerCancel);
@@ -667,7 +618,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             if (isSection(child)) {
                 child.onPage =
                     top &&
-                        (!this.filtering || [...child.children].some((row) => isItem(row) && this.kept(row)));
+                        (!this.filters?.filtering ||
+                            [...child.children].some((row) => isItem(row) && this.kept(row)));
                 for (const row of child.children) {
                     if (row.isMenuItem === true) {
                         this.mark(row, top);
@@ -684,14 +636,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.toggleState('drilled', !this.flies && !this.drilldown.atRoot);
         this.markColumns();
         this.nameSurface();
-        if (this.filterable) {
-            markMatches(this, this.rowsOf(this.filterPage).filter((row) => this.kept(row)), this.filtering ? this.filter.trim() : '');
-            const items = this.items;
-            if (changed.has('filter') &&
-                this.open &&
-                !items.includes(this.highlighted)) {
-                this.reach(items[0]);
-            }
+        this.filterer?.updated();
+        if (this.filterable && !this.filterer) {
+            auditEntry(this, 'filterable', 'menu/filter', 'it shows no filter field', () => this.filterable && !this.filterer);
         }
     }
     nameSurface() {
@@ -729,7 +676,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     mark(item, onPage) {
         const page = this.drilldown.page;
         item.onPage = onPage && this.kept(item);
-        item.virtual = this.filterable;
+        item.virtual = this.filters !== undefined;
         const holds = page !== null && item.contains(page);
         item.flyout = this.flies;
         item.expanded = this.flies && holds;
@@ -753,16 +700,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     render() {
         const point = this.context && this.point;
-        const filtering = this.filtering;
-        const count = filtering
-            ? this.rowsOf(this.filterPage).filter((row) => this.kept(row)).length
-            : 0;
-        const none = filtering && count === 0;
-        this.announced = none
-            ? this.noResultsText
-            : filtering
-                ? formatWords(this, 'resultsLabel', { count })
-                : '';
+        const filters = this.filters;
+        this.announced = '';
+        const none = filters?.status();
         const rows = html `${this.flies || this.drilldown.atRoot
             ? nothing
             : html `<div part="header">
@@ -781,9 +721,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             <span part="title" id="title">${this.drilldown.label}</span>
           </div>`}
       <slot @slotchange=${(event) => this.countRows(event)}></slot>
-      ${none
-            ? html `<p part="empty"><slot name="no-results">${this.noResultsText}</slot></p>`
-            : this.renderStatus(this.hasRows)}`;
+      ${none ?? this.renderStatus(this.hasRows)}`;
         const busy = this.loading ? 'true' : nothing;
         const label = this.label || nothing;
         return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>${point
@@ -796,27 +734,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
       <div
         part="surface"
         popover="manual"
-        role=${this.filterable ? nothing : 'menu'}
-        aria-busy=${this.filterable ? nothing : busy}
-        aria-label=${this.filterable ? nothing : label}
+        role=${filters ? nothing : 'menu'}
+        aria-busy=${filters ? nothing : busy}
+        aria-label=${filters ? nothing : label}
         data-drilled=${this.flies || this.drilldown.atRoot ? nothing : ''}
-        data-filtered=${filtering ? '' : nothing}
+        data-filtered=${filters?.filtering ? '' : nothing}
         ?hidden=${!this.open}
       >
-        ${this.filterable
-            ? html `<input
-                  part="search-field"
-                  type="text"
-                  autocomplete="off"
-                  spellcheck="false"
-                  .value=${this.filter}
-                  placeholder=${this.filterLabel}
-                  aria-label=${this.filterLabel}
-                  aria-autocomplete="list"
-                  aria-controls="items"
-                  @input=${this.handleFilterInput}
-                /><div id="items" role="menu" aria-busy=${busy} aria-label=${label}>${rows}</div>`
-            : rows}
+        ${filters ? filters.drawFilter(rows, busy) : rows}
       </div>${this.renderLive(this.hasRows)}`;
     }
 };

package/dist/table/root/table-root.d.ts

@@ -243,13 +243,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * **It is also the only track list a server can send.** The shim has no tree
      * to walk, so a render there knows of no columns and this attribute is the
      * whole answer: a table given one lays its grid out in the first paint, and a
-     * table sized only by its columns is one track wide until it upgrades.
+     * table sized only by its columns takes, until it upgrades, a track for each
+     * column at the width a column with no `width` takes (`helix.css`).
      *
-     * **Data Table has none of this, and should not.** Its columns are its schema
-     * rather than an option, so there is always a column to write a `width` on
-     * and a list here would be a second way to say what that says. This table's
-     * cells are markup, and a table written as rows of cells with no column
-     * declared in it has nowhere else to be sized from.
+     * Data Table takes the same list, for the same reason: a data table that
+     * serves its first page as rows is laid out by it before it upgrades.
      */
     columns: string;
     /**

package/dist/table/root/table-root.js

@@ -1,38 +1,12 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, anchorAt, assignSlots, auditName, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, treeArrow, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, auditName, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, toggleEvery, treeArrow, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../checkbox/index.js';
 import { edgeOf } from '../column/table-column.js';
 import { TableGridController } from '../grid-controller.js';
-const tracksOf = (list, wanted) => {
-    const words = splitValues(list, ' ');
-    const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
-    const tracks = [];
-    let names = '';
-    for (const one of words) {
-        if (tracks.length >= wanted) {
-            break;
-        }
-        if (one.startsWith('[')) {
-            names += `${one} `;
-            continue;
-        }
-        const repeat = /^repeat\(\s*(\d+)\s*,(.*)\)$/is.exec(one);
-        if (repeat) {
-            const inner = tracksOf(repeat[2] ?? '', wanted);
-            for (let time = 0; time < Number(repeat[1]) && tracks.length < wanted; time += 1) {
-                tracks.push(...inner.map((track, index) => (time === 0 && index === 0 ? names + track : track)));
-            }
-        }
-        else if (!/^repeat\(/i.test(one)) {
-            tracks.push(valid(names + one) ? names + one : '');
-        }
-        names = '';
-    }
-    return tracks.slice(0, wanted);
-};
+import { tracksOf } from '../tracks.js';
 const SHORT = 32;
 const FLOOR = '14ch';
 const SAMPLE = 200;

package/dist/table/tracks.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The first `wanted` tracks of a track list, one entry each, so every declared
+ * column can take the one in its place.
+ *
+ * Split on the spaces between tracks and never inside a function, so
+ * `minmax(0, 1fr)` stays one track. A `repeat()` with a count is that many
+ * tracks, written out; an automatic one names no count and yields none. Line
+ * names go with the track after them.
+ *
+ * Everything above the split is a fact about a grid track list rather than
+ * about a value list, which is why only the split itself is shared.
+ *
+ * **A track the grid would refuse yields nothing either**, where the platform
+ * can say. One invalid track makes the whole `grid-template-columns` invalid,
+ * which a grid ignores in silence and draws as one column. That is the failure
+ * that once had `columns` deprecated, a list of headings handed over as widths,
+ * and dealt out a track at a time it costs the one column its width and no
+ * more.
+ */
+export declare const tracksOf: (list: string, wanted: number) => string[];

package/dist/table/tracks.js

@@ -0,0 +1,28 @@
+import { splitValues } from '@fusion.dev/helix-core';
+export const tracksOf = (list, wanted) => {
+    const words = splitValues(list, ' ');
+    const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
+    const tracks = [];
+    let names = '';
+    for (const one of words) {
+        if (tracks.length >= wanted) {
+            break;
+        }
+        if (one.startsWith('[')) {
+            names += `${one} `;
+            continue;
+        }
+        const repeat = /^repeat\(\s*(\d+)\s*,(.*)\)$/is.exec(one);
+        if (repeat) {
+            const inner = tracksOf(repeat[2] ?? '', wanted);
+            for (let time = 0; time < Number(repeat[1]) && tracks.length < wanted; time += 1) {
+                tracks.push(...inner.map((track, index) => (time === 0 && index === 0 ? names + track : track)));
+            }
+        }
+        else if (!/^repeat\(/i.test(one)) {
+            tracks.push(valid(names + one) ? names + one : '');
+        }
+        names = '';
+    }
+    return tracks.slice(0, wanted);
+};

package/dist/time-input/root/time-input-root.d.ts

@@ -217,6 +217,11 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * on why a wheel cannot do either.
      */
     mode?: 'multiple' | 'range';
+    /**
+     * The words on the list's button that chooses the current time, drawn with
+     * `show-now`.
+     */
+    nowLabel: string;
     /**
      * Placeholder text shown before a time is entered.
      */
@@ -252,6 +257,12 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * See Time Picker's `seconds`.
      */
     seconds: boolean;
+    /**
+     * Draws a button under the times in the list that chooses the current time,
+     * moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+     * are `now-label`.
+     */
+    showNow: boolean;
     /**
      * How far apart the offered times are, in minutes, or in seconds with
      * `seconds`.

package/dist/time-input/root/time-input-root.js

@@ -21,12 +21,14 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         this.locale = '';
         this.max = '23:59';
         this.min = '00:00';
+        this.nowLabel = 'Now';
         this.placeholder = 'HH:mm';
         this.rangeLengthMessage = 'A range is two times.';
         this.rangeOverflowMessage = 'Choose a time at or before {max}.';
         this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.removeLabel = 'Remove {name}';
         this.seconds = false;
+        this.showNow = false;
         this.step = 15;
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
@@ -246,7 +248,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       locale=${handedLocale(this) || nothing}
       max=${this.max}
       min=${this.min}
+      now-label=${this.nowLabel}
       ?seconds=${this.seconds}
+      ?show-now=${this.showNow}
       step=${this.step}
       .value=${this.picked}
       @helix-before-change=${this.handlePicked}
@@ -400,6 +404,10 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimeInput.prototype, "mode", void 0);
+__decorate([
+    words,
+    property({ attribute: 'now-label' })
+], HelixHeadlessTimeInput.prototype, "nowLabel", void 0);
 __decorate([
     words,
     property()
@@ -423,6 +431,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTimeInput.prototype, "seconds", void 0);
+__decorate([
+    property({ attribute: 'show-now', type: Boolean })
+], HelixHeadlessTimeInput.prototype, "showNow", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimeInput.prototype, "step", void 0);