@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/virtual-list/root/virtual-list-root.js

@@ -4,54 +4,106 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
-import { html, render } from 'lit';
+import { AriaForwardController, commaList, customElement, elementById, HelixBeforeChangeEvent, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, isRtl, rangeAdd, requestChange, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VirtualizeController, } from '@fusion.dev/helix-core';
+import { html, nothing, render } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { holdControls, releaseControls } from '../controls.js';
-import { fillHoles } from '../fill.js';
+import { fillHoles, keyOf, textsOf } from '../fill.js';
 import { stepIndex } from '../keys.js';
+import { drawPlan, itemsOf, stopAfter } from '../plan.js';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
     constructor() {
         super(...arguments);
+        this.columns = 1;
         this.estimate = 32;
         this.for = '';
+        this.keyField = '';
         this.label = '';
+        this.loading = false;
+        this.loadingLabel = 'Loading more';
         this.measured = false;
+        this.textField = '';
+        this.value = '';
         this.rows = [];
         this.source = null;
         this.active = 0;
         this.said = { first: 0, last: 0 };
-        this.askedAt = -1;
+        this.typeahead = new Typeahead();
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('viewport'),
         });
         this.virtualize = new VirtualizeController(this, {
             container: () => this.partNamed('viewport'),
-            count: () => this.data.length,
+            count: () => Math.ceil(this.data.length / this.across),
             estimate: () => this.estimate,
             measured: () => this.measured,
-            rows: () => this.drawn(),
+            rows: () => this.lines(),
         });
         this.handleKeydown = (event) => {
-            if (event.defaultPrevented ||
-                event.altKey ||
-                event.ctrlKey ||
-                event.metaKey ||
-                event.shiftKey) {
+            if (event.defaultPrevented) {
                 return;
             }
             const at = this.indexOf(event.target);
             if (at === undefined) {
                 return;
             }
+            if (typesCharacter(event) && (event.key !== ' ' || this.typeahead.typing())) {
+                const found = this.typeahead.match(event.key, this.texts(), at);
+                event.preventDefault();
+                if (found >= 0 && found !== at) {
+                    void this.focusIndex(found);
+                }
+                return;
+            }
+            const toggle = event.ctrlKey || event.metaKey;
+            if (this.selectionMode && !event.altKey) {
+                if (selectsAll(event) && this.selectionMode === 'multiple') {
+                    event.preventDefault();
+                    this.choose(this.keys().join(','));
+                    return;
+                }
+                if (event.key === ' ' && !toggle) {
+                    event.preventDefault();
+                    this.press(at, event.shiftKey);
+                    return;
+                }
+            }
+            const extend = event.shiftKey && this.selectionMode === 'multiple';
+            if (event.altKey || toggle || (event.shiftKey && !extend)) {
+                return;
+            }
             const { first, last } = this.virtualize.visible();
-            const next = stepIndex(event.key, at, this.data.length, last - first - 1);
+            const next = stepIndex(event.key, at, this.data.length, last - first - 1, {
+                across: this.across,
+                forward: isRtl(this) ? 'ArrowLeft' : 'ArrowRight',
+            });
             if (next === undefined) {
                 return;
             }
             event.preventDefault();
             void this.focusIndex(next);
+            if (extend) {
+                this.anchor ??= this.keyAt(at);
+                this.press(next, true);
+            }
+        };
+        this.handleClick = (event) => {
+            if (!this.selectionMode) {
+                return;
+            }
+            const path = event.composedPath();
+            const row = path.find((node) => node instanceof HTMLElement && node.parentElement === this);
+            const at = this.indexOf(row ?? null);
+            if (at === undefined) {
+                return;
+            }
+            const inner = path.slice(0, path.indexOf(row));
+            if (inner.some((node) => node instanceof HTMLElement &&
+                node.matches('a[href], button, input, select, textarea, label'))) {
+                return;
+            }
+            this.press(at, event.shiftKey && this.selectionMode === 'multiple');
         };
         this.handleFocusOut = () => {
             this.requestUpdate();
@@ -69,14 +121,21 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         };
     }
     get range() {
-        return this.virtualize.visible();
+        return this.itemsOn(this.virtualize.visible());
+    }
+    get across() {
+        return Math.max(1, Math.trunc(this.columns) || 1);
+    }
+    itemsOn(lines) {
+        return itemsOf(lines, this.across, this.data.length);
     }
     scrollToIndex(index, options = {}) {
         const count = this.data.length;
         if (count === 0 || !Number.isFinite(index)) {
             return;
         }
-        this.virtualize.reveal(Math.max(0, Math.min(Math.trunc(index), count - 1)), 0, options);
+        const at = Math.max(0, Math.min(Math.trunc(index), count - 1));
+        this.virtualize.reveal(Math.floor(at / this.across), 0, options);
         this.virtualize.measure();
     }
     get data() {
@@ -88,6 +147,15 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             index: Number(element.dataset.index),
         }));
     }
+    lines() {
+        const across = this.across;
+        const drawn = this.drawn();
+        return across === 1
+            ? drawn
+            : drawn
+                .filter(({ index }) => index % across === 0)
+                .map(({ element, index }) => ({ element, index: index / across }));
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (this.readFor !== this.for && searchableById(this) && !this.hydrating) {
@@ -98,6 +166,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('focusout', this.handleFocusOut);
         if (typeof MutationObserver === 'undefined') {
@@ -113,6 +182,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('click', this.handleClick);
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('focusout', this.handleFocusOut);
         this.watcher?.disconnect();
@@ -155,22 +225,23 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         }
     }
     report() {
-        const { first, last } = this.virtualize.visible();
+        const { first, last } = this.range;
         if (first !== this.said.first || last !== this.said.last) {
             this.said = { first, last };
             this.dispatchEvent(new HelixRangeChangeEvent({ first, last }));
         }
-        const box = this.partNamed('viewport');
-        const count = this.data.length;
-        const screen = box?.clientHeight ?? 0;
-        if (count > 0 &&
-            screen > 0 &&
-            this.askedAt !== count &&
-            this.virtualize.remaining() <= screen) {
-            this.askedAt = count;
+        if (!this.loading && this.virtualize.endInSight()) {
             this.dispatchEvent(new HelixLoadMoreEvent());
         }
     }
+    texts() {
+        const field = this.textField ||
+            this.querySelector(':scope > template')
+                ?.content.querySelector('[data-field]')
+                ?.getAttribute('data-field') ||
+            '';
+        return textsOf(this.data, field);
+    }
     indexOf(node) {
         if (!(node instanceof HTMLElement) || node.parentElement !== this) {
             return undefined;
@@ -181,10 +252,62 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     rowFor(index) {
         return this.querySelector(`:scope > [data-index="${index}"]`);
     }
+    keyAt(at) {
+        return keyOf(this.data[at], at, this.keyField);
+    }
+    keys() {
+        return this.data.map((_, at) => this.keyAt(at));
+    }
+    get chosen() {
+        return new Set(commaList(this.value));
+    }
+    press(at, extend = false) {
+        const mode = this.selectionMode;
+        const key = this.keyAt(at);
+        if (!mode || at < 0 || at >= this.data.length) {
+            return;
+        }
+        const now = commaList(this.value);
+        if (extend && mode === 'multiple') {
+            const keys = this.keys();
+            const from = this.anchor === undefined ? -1 : keys.indexOf(this.anchor);
+            const range = rangeAdd(now, keys, from, at);
+            if (range) {
+                this.choose(this.inOrder(range));
+            }
+            return;
+        }
+        this.anchor = key;
+        if (mode === 'single') {
+            this.choose(now.length === 1 && now[0] === key ? '' : key);
+            return;
+        }
+        this.choose(this.inOrder(toggleValue(now, key)));
+    }
+    inOrder(keys) {
+        const wanted = new Set(keys);
+        const ordered = this.keys().filter((key) => wanted.has(key));
+        const placed = new Set(ordered);
+        return [...ordered, ...keys.filter((key) => !placed.has(key))].join(',');
+    }
+    choose(next) {
+        if (next === this.value) {
+            return;
+        }
+        requestChange({
+            apply: (value) => {
+                this.value = value;
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            },
+            event: (value) => new HelixBeforeChangeEvent({ value }),
+            host: this,
+            next,
+        });
+    }
     async focusIndex(index) {
         this.active = index;
         this.focusing = index;
-        this.virtualize.reveal(index);
+        this.virtualize.reveal(Math.floor(index / this.across));
         this.virtualize.measure();
         this.requestUpdate();
         try {
@@ -206,13 +329,21 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     }
     keptIndex() {
         const index = this.focusing ?? this.focusedIndex();
-        const { first, last } = this.virtualize.window;
+        const { first, last } = this.itemsOn(this.virtualize.window);
         return index !== undefined && index < this.data.length && (index < first || index >= last)
             ? index
             : undefined;
     }
+    mark(element, at, chosen) {
+        element.setAttribute('role', this.selectionMode ? 'option' : 'listitem');
+        if (this.selectionMode) {
+            element.setAttribute('aria-selected', String(chosen.has(this.keyAt(at))));
+        }
+        else {
+            element.removeAttribute('aria-selected');
+        }
+    }
     stamp(element, at) {
-        element.setAttribute('role', 'listitem');
         element.setAttribute('aria-posinset', String(at + 1));
         element.setAttribute('aria-setsize', String(this.data.length));
         element.setAttribute('data-index', String(at));
@@ -246,25 +377,21 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             return;
         }
         const count = this.data.length;
-        const { first, last } = this.virtualize.window;
-        const kept = this.keptIndex();
-        const wanted = [];
-        for (let at = first; at < Math.min(last, count); at += 1) {
-            wanted.push(at);
-        }
-        if (kept !== undefined) {
-            wanted.push(kept);
-            wanted.sort((a, b) => a - b);
-        }
-        const keep = new Set(wanted);
-        const redraw = (this.filledBy === undefined) !== (this.renderItem === undefined);
+        const { first, last } = this.itemsOn(this.virtualize.window);
+        const children = [...this.children].filter((child) => child !== template && child instanceof HTMLElement && !child.hasAttribute('slot'));
+        const plan = drawPlan({
+            across: this.across,
+            count,
+            drawn: children.map((child) => Number(child.dataset.index)),
+            first,
+            kept: this.keptIndex(),
+            last,
+            redraw: (this.filledBy === undefined) !== (this.renderItem === undefined),
+        });
         const drawn = new Map();
-        for (const child of [...this.children]) {
-            if (child === template) {
-                continue;
-            }
+        for (const child of children) {
             const index = Number(child.dataset.index);
-            if (redraw || !Number.isInteger(index) || !keep.has(index)) {
+            if (plan.remove.has(index)) {
                 child.remove();
                 continue;
             }
@@ -275,7 +402,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.filledBy = this.renderItem;
         const fresh = new Set();
         let anchor = drawn.values().next().value?.[0] ?? null;
-        for (const at of wanted) {
+        for (const at of plan.wanted) {
             const group = drawn.get(at);
             if (group) {
                 if (refill) {
@@ -290,11 +417,17 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             fresh.add(at);
             this.insertBefore(fragment, anchor);
         }
-        if (!keep.has(this.active)) {
-            const onScreen = this.virtualize.visible().first;
-            this.active = Math.max(Math.min(onScreen, Math.min(last, count) - 1), first, 0);
-        }
+        this.active = stopAfter(this.active, plan.wanted, {
+            count,
+            first,
+            last,
+            onScreen: this.range.first,
+        });
+        const chosen = this.chosen;
         for (const [at, group] of drawn) {
+            for (const element of group) {
+                this.mark(element, at, chosen);
+            }
             const stop = at === this.active;
             group[0]?.setAttribute('tabindex', stop ? '0' : '-1');
             if (stop && (fresh.has(at) || this.released !== at)) {
@@ -307,11 +440,15 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.released = this.active;
     }
     render() {
-        const { after, before } = this.virtualize.spacers(this.hasUpdated ? this.keptIndex() : undefined);
+        const kept = this.hasUpdated ? this.keptIndex() : undefined;
+        const { after, before } = this.virtualize.spacers(kept === undefined ? undefined : Math.floor(kept / this.across));
+        const across = this.across;
         return html `<div
       data-scroller
       part="viewport"
-      role="list"
+      role=${this.selectionMode ? 'listbox' : 'list'}
+      aria-multiselectable=${this.selectionMode === 'multiple' ? 'true' : nothing}
+      aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label}
       @scroll=${() => {
             this.virtualize.measure();
@@ -319,11 +456,23 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         }}
     >
       <div part="before" style="block-size: ${before}px"></div>
-      <slot></slot>
+      <slot
+        style=${across === 1
+            ? nothing
+            : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))`}
+      ></slot>
       <div part="after" style="block-size: ${after}px"></div>
+      ${this.loading
+            ? html `<div part="loading" role=${this.selectionMode ? 'option' : 'listitem'}>
+              <slot name="loading">${this.loadingLabel}</slot>
+            </div>`
+            : nothing}
     </div>`;
     }
 };
+__decorate([
+    property({ type: Number })
+], HelixHeadlessVirtualList.prototype, "columns", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessVirtualList.prototype, "estimate", void 0);
@@ -333,15 +482,33 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessVirtualList.prototype, "items", void 0);
+__decorate([
+    property({ attribute: 'key-field' })
+], HelixHeadlessVirtualList.prototype, "keyField", void 0);
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessVirtualList.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: 'loading-label' })
+], HelixHeadlessVirtualList.prototype, "loadingLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessVirtualList.prototype, "measured", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessVirtualList.prototype, "renderItem", void 0);
+__decorate([
+    property({ attribute: 'selection-mode' })
+], HelixHeadlessVirtualList.prototype, "selectionMode", void 0);
+__decorate([
+    property({ attribute: 'text-field' })
+], HelixHeadlessVirtualList.prototype, "textField", void 0);
+__decorate([
+    property()
+], HelixHeadlessVirtualList.prototype, "value", void 0);
 __decorate([
     state()
 ], HelixHeadlessVirtualList.prototype, "rows", void 0);