@fusion.dev/helix-headless 0.144.0 → 0.146.0

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

@@ -4,32 +4,134 @@ 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, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { AriaForwardController, commaList, customElement, elementById, HelixBeforeChangeEvent, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, rangeAdd, requestChange, searchableById, Typeahead, toggleValue, typesCharacter, VirtualizeController, valueAt, } 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, textOf } from '../fill.js';
+import { stepIndex } from '../keys.js';
+import { drawPlan, stopAfter } from '../plan.js';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
     constructor() {
         super(...arguments);
         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.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.rows.length,
+            count: () => this.data.length,
             estimate: () => this.estimate,
             measured: () => this.measured,
             rows: () => this.drawn(),
         });
+        this.handleKeydown = (event) => {
+            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 (toggle && event.key.toLowerCase() === 'a' && 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);
+            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();
+        };
+        this.handleFocusIn = (event) => {
+            let node = event.target;
+            while (node && node.parentNode !== this) {
+                node = node.parentNode;
+            }
+            const index = this.indexOf(node);
+            if (index !== undefined) {
+                this.active = index;
+            }
+            this.requestUpdate();
+        };
+    }
+    get range() {
+        return this.virtualize.visible();
+    }
+    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);
+        this.virtualize.measure();
+    }
+    get data() {
+        return this.items ?? this.rows;
     }
     drawn() {
-        return [...this.querySelectorAll('[data-index]')].map((element) => ({
+        return [...this.querySelectorAll(':scope > [data-index]')].map((element) => ({
             element,
             index: Number(element.dataset.index),
         }));
@@ -43,6 +145,10 @@ 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') {
             return;
         }
@@ -55,6 +161,10 @@ 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();
         this.watcher = undefined;
     }
@@ -76,6 +186,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         super.updated?.(changed);
         this.virtualize.measure();
         this.place();
+        this.report();
     }
     read() {
         const source = this.for === '' ? null : elementById(this, this.for);
@@ -93,6 +204,106 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.rows = [];
         }
     }
+    report() {
+        const { first, last } = this.virtualize.visible();
+        if (first !== this.said.first || last !== this.said.last) {
+            this.said = { first, last };
+            this.dispatchEvent(new HelixRangeChangeEvent({ first, last }));
+        }
+        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 this.data.map((item) => field === '' || item === null || typeof item !== 'object'
+            ? textOf(item)
+            : textOf(valueAt(item, field)));
+    }
+    indexOf(node) {
+        if (!(node instanceof HTMLElement) || node.parentElement !== this) {
+            return undefined;
+        }
+        const index = node.dataset.index;
+        return index === undefined ? undefined : Number(index);
+    }
+    rowFor(index) {
+        return this.querySelector(`:scope > [data-index="${index}"]`);
+    }
+    keyAt(at) {
+        const item = this.data[at];
+        if (this.keyField !== '' && item !== null && typeof item === 'object') {
+            return textOf(valueAt(item, this.keyField));
+        }
+        return typeof item === 'string' || typeof item === 'number' ? String(item) : String(at);
+    }
+    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.measure();
+        this.requestUpdate();
+        try {
+            await this.updateComplete;
+        }
+        finally {
+            this.focusing = undefined;
+        }
+        this.rowFor(index)?.focus();
+    }
     focusedIndex() {
         const root = this.getRootNode();
         let node = root.activeElement;
@@ -103,89 +314,138 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         return index === undefined ? undefined : Number(index);
     }
     keptIndex() {
-        const index = this.focusedIndex();
+        const index = this.focusing ?? this.focusedIndex();
         const { first, last } = this.virtualize.window;
-        return index !== undefined && index < this.rows.length && (index < first || index >= last)
+        return index !== undefined && index < this.data.length && (index < first || index >= last)
             ? index
             : undefined;
     }
-    fill(elements, row, at) {
-        const total = String(this.rows.length);
+    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('aria-posinset', String(at + 1));
+        element.setAttribute('aria-setsize', String(this.data.length));
+        element.setAttribute('data-index', String(at));
+    }
+    fill(elements, at) {
+        const item = this.data[at];
         for (const element of elements) {
-            for (const hole of [
-                ...(element.matches('[data-field]') ? [element] : []),
-                ...element.querySelectorAll('[data-field]'),
-            ]) {
-                hole.textContent = row[hole.dataset.field ?? ''] ?? '';
+            if (this.renderItem) {
+                render(this.renderItem(item, at), element);
             }
-            element.setAttribute('role', 'listitem');
-            element.setAttribute('aria-posinset', String(at + 1));
-            element.setAttribute('aria-setsize', total);
-            element.setAttribute('data-index', String(at));
+            else {
+                fillHoles(element, item);
+            }
+            this.stamp(element, at);
         }
     }
+    draw(template, at) {
+        const fragment = document.createDocumentFragment();
+        if (this.renderItem) {
+            fragment.append(document.createElement('div'));
+        }
+        else if (template) {
+            fragment.append(template.content.cloneNode(true));
+        }
+        this.fill([...fragment.children], at);
+        return fragment;
+    }
     place() {
-        const template = this.querySelector('template');
-        if (!template) {
+        const template = this.querySelector(':scope > template');
+        if (!template && !this.renderItem) {
             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, this.rows.length); at += 1) {
-            wanted.push(at);
-        }
-        if (kept !== undefined) {
-            wanted.push(kept);
-            wanted.sort((a, b) => a - b);
-        }
-        const keep = new Set(wanted);
+        const children = [...this.children].filter((child) => child !== template && child instanceof HTMLElement && !child.hasAttribute('slot'));
+        const plan = drawPlan({
+            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 (!Number.isInteger(index) || !keep.has(index)) {
+            if (plan.remove.has(index)) {
                 child.remove();
                 continue;
             }
             drawn.set(index, [...(drawn.get(index) ?? []), child]);
         }
-        const refill = this.filledFrom !== this.rows;
-        this.filledFrom = this.rows;
+        const refill = this.filledFrom !== this.data || this.filledBy !== this.renderItem;
+        this.filledFrom = this.data;
+        this.filledBy = this.renderItem;
+        const fresh = new Set();
         let anchor = drawn.values().next().value?.[0] ?? null;
-        for (const at of wanted) {
-            const row = this.rows[at];
+        for (const at of plan.wanted) {
             const group = drawn.get(at);
             if (group) {
                 if (refill) {
-                    this.fill(group, row, at);
+                    this.fill(group, at);
+                    fresh.add(at);
                 }
                 anchor = group.at(-1).nextElementSibling;
                 continue;
             }
-            const clone = template.content.cloneNode(true);
-            this.fill([...clone.children], row, at);
-            this.insertBefore(clone, anchor);
+            const fragment = this.draw(template, at);
+            drawn.set(at, [...fragment.children]);
+            fresh.add(at);
+            this.insertBefore(fragment, anchor);
+        }
+        this.active = stopAfter(this.active, plan.wanted, {
+            count,
+            first,
+            last,
+            onScreen: this.virtualize.visible().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)) {
+                releaseControls(group);
+            }
+            else if (!stop && (fresh.has(at) || this.released === at)) {
+                holdControls(group);
+            }
         }
+        this.released = this.active;
     }
     render() {
-        const window = this.virtualize.window;
-        const kept = this.hasUpdated ? this.keptIndex() : undefined;
-        const room = kept === undefined ? 0 : this.virtualize.sizeOf(kept);
-        const before = window.before - (kept !== undefined && kept < window.first ? room : 0);
-        const after = window.after - (kept !== undefined && kept >= window.last ? room : 0);
+        const { after, before } = this.virtualize.spacers(this.hasUpdated ? this.keptIndex() : undefined);
         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()}
+      @scroll=${() => {
+            this.virtualize.measure();
+            this.report();
+        }}
     >
       <div part="before" style="block-size: ${before}px"></div>
       <slot></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>`;
     }
 };
@@ -195,12 +455,36 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "for", void 0);
+__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);