@fusion.dev/helix-headless 0.144.0 → 0.145.0

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

@@ -4,9 +4,12 @@ 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, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
+import { html, render } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { holdControls, releaseControls } from '../controls.js';
+import { fillHoles } from '../fill.js';
+import { stepIndex } from '../keys.js';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
     constructor() {
         super(...arguments);
@@ -16,20 +19,71 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.measured = false;
         this.rows = [];
         this.source = null;
+        this.active = 0;
+        this.said = { first: 0, last: 0 };
+        this.askedAt = -1;
         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 ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.shiftKey) {
+                return;
+            }
+            const at = this.indexOf(event.target);
+            if (at === undefined) {
+                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);
+        };
+        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 +97,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
         if (typeof MutationObserver === 'undefined') {
             return;
         }
@@ -55,6 +112,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.watcher?.disconnect();
         this.watcher = undefined;
     }
@@ -76,6 +136,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 +154,47 @@ 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 }));
+        }
+        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;
+            this.dispatchEvent(new HelixLoadMoreEvent());
+        }
+    }
+    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}"]`);
+    }
+    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,36 +205,51 @@ 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);
+    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));
+    }
+    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) {
+        for (let at = first; at < Math.min(last, count); at += 1) {
             wanted.push(at);
         }
         if (kept !== undefined) {
@@ -140,48 +257,66 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             wanted.sort((a, b) => a - b);
         }
         const keep = new Set(wanted);
+        const redraw = (this.filledBy === undefined) !== (this.renderItem === undefined);
         const drawn = new Map();
         for (const child of [...this.children]) {
             if (child === template) {
                 continue;
             }
             const index = Number(child.dataset.index);
-            if (!Number.isInteger(index) || !keep.has(index)) {
+            if (redraw || !Number.isInteger(index) || !keep.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];
             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);
+        }
+        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);
+        }
+        for (const [at, group] of drawn) {
+            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"
       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>
@@ -195,12 +330,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "for", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessVirtualList.prototype, "items", void 0);
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessVirtualList.prototype, "measured", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessVirtualList.prototype, "renderItem", void 0);
 __decorate([
     state()
 ], HelixHeadlessVirtualList.prototype, "rows", void 0);