@fusion.dev/helix-headless 0.182.2 → 0.184.0

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, anchorAt, commaList, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, inRowOrder, isRtl, pressedOwnControl, rangeAdd, requestValue, SCROLLER_RULE, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VIRTUAL_RULE, VirtualizeController, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, commaList, customElement, elementById, HelixElement, HelixLoadMoreEvent, HelixRangeChangeEvent, inRowOrder, isRtl, pressedOwnControl, rangeAdd, requestValue, SCROLLER_RULE, searchableById, selectsAll, Typeahead, toggleValue, typesCharacter, VIRTUAL_RULE, VirtualizeController, Waterfall, words, } from '@fusion.dev/helix-core';
 import { html, nothing, render } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { holdControls, releaseControls } from '../controls.js';
@@ -13,6 +13,7 @@ const nextSectionId = () => {
     return `virtual-list-${sectionCount}`;
 };
 const ROWS = ':scope > [data-index], :scope > [data-section] > [data-index]';
+const LINE = 'helix-line-';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
     constructor() {
         super(...arguments);
@@ -24,6 +25,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.gap = 0;
         this.keyField = '';
         this.label = '';
+        this.layout = 'grid';
         this.loading = false;
         this.loadingLabel = 'Loading more';
         this.measured = false;
@@ -54,7 +56,12 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             horizontal: () => this.horizontal,
             measured: () => this.measured,
             rows: () => this.lines(),
+            waterfall: () => {
+                this.lanes.lanes = this.columnCount;
+                return this.waterfall ? this.lanes : undefined;
+            },
         });
+        this.lanes = new Waterfall();
         this.boxWidth = 0;
         this.measuredAcross = 1;
         this.handleKeydown = (event) => {
@@ -97,7 +104,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                 }
             }
             const extend = event.shiftKey && this.selectionMode === 'multiple';
-            if (event.altKey || (toggle && !replacing) || (event.shiftKey && !extend)) {
+            const ends = event.key === 'Home' || event.key === 'End';
+            const lined = this.lined;
+            if (event.altKey || (toggle && !replacing && !(lined && ends)) || (event.shiftKey && !extend)) {
                 return;
             }
             const count = this.data.length;
@@ -112,13 +121,19 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                         : event.key === 'ArrowDown' || event.key === 'ArrowUp'
                             ? ''
                             : event.key;
-            const stepped = stepIndex(key, at, count, last - first - 1, {
-                across: this.across,
-                forward,
-            });
+            const disabled = (one) => this.isDisabled(one);
+            const across = this.across;
+            const start = at - (at % across);
+            const stepped = lined && ends && !toggle
+                ? key === 'Home'
+                    ? start
+                    : Math.min(start + across, count) - 1
+                : this.waterfall && !ends
+                    ? this.inWaterfall(key, at, count, forward)
+                    : stepIndex(key, at, count, last - first - 1, { across, forward });
             const next = stepped === undefined
                 ? undefined
-                : skipDisabled(key, at, stepped, count, (one) => this.isDisabled(one), this.across);
+                : skipDisabled(key, at, stepped, count, disabled, this.waterfall ? 1 : across);
             if (next === undefined) {
                 if (stepped !== undefined) {
                     event.preventDefault();
@@ -172,6 +187,8 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.requestUpdate();
         };
         this.visited = false;
+        this.placedWaterfall = false;
+        this.drawnLines = [];
         this.sectionId = nextSectionId();
     }
     static { this.markRules = [SCROLLER_RULE, VIRTUAL_RULE]; }
@@ -182,7 +199,20 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     get space() {
         return Number.isFinite(this.gap) && this.gap > 0 ? this.gap : 0;
     }
+    get waterfall() {
+        return this.layout === 'waterfall';
+    }
+    get lined() {
+        return (!this.selectionMode &&
+            !this.waterfall &&
+            !this.horizontal &&
+            this.sections === undefined &&
+            (this.across > 1 || this.minColumnWidth > 0));
+    }
     get across() {
+        return this.waterfall ? 1 : this.columnCount;
+    }
+    get columnCount() {
         if (this.minColumnWidth > 0 && this.boxWidth > 0) {
             const space = this.space;
             return Math.max(1, Math.floor((this.boxWidth + space) / (this.minColumnWidth + space)));
@@ -191,7 +221,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     }
     watchWidth() {
         const viewport = this.partNamed('viewport');
-        if (this.minColumnWidth <= 0 || !viewport || typeof ResizeObserver === 'undefined') {
+        if ((this.minColumnWidth <= 0 && !this.waterfall) ||
+            !viewport ||
+            typeof ResizeObserver === 'undefined') {
             this.widthWatch?.disconnect();
             this.widthWatch = undefined;
             return;
@@ -218,11 +250,11 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         return sections ? entryOf(sections, at) : Math.floor(at / this.across);
     }
     get horizontal() {
-        return this.orientation === 'horizontal' && this.across === 1;
+        return this.orientation === 'horizontal' && this.across === 1 && !this.waterfall;
     }
     get sections() {
         const data = this.data;
-        if (this.sectionField === '' || data.length === 0 || this.across !== 1) {
+        if (this.sectionField === '' || data.length === 0 || this.columnCount !== 1 || this.waterfall) {
             return undefined;
         }
         const read = this.sectionsRead;
@@ -275,7 +307,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.readFor = this.for;
             this.read();
         }
-        const across = this.across;
+        const across = this.waterfall ? `${this.columnCount} ${this.boxWidth}` : this.across;
         if (across !== this.measuredAcross) {
             this.measuredAcross = across;
             this.virtualize.forget();
@@ -450,6 +482,16 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     rowFor(index) {
         return ([...this.querySelectorAll(ROWS)].find((row) => row.dataset.index === String(index)) ?? null);
     }
+    inWaterfall(key, at, count, forward) {
+        const way = key === forward ? 'next' : key === 'ArrowLeft' || key === 'ArrowRight' ? 'previous' : key;
+        const box = this.partNamed('viewport');
+        let to = this.lanes.step(way, at, count, box?.clientHeight ?? 0);
+        const again = way === 'PageDown' ? 'ArrowDown' : way === 'PageUp' ? 'ArrowUp' : way;
+        while (to !== undefined && this.isDisabled(to)) {
+            to = this.lanes.step(again, to, count, 0);
+        }
+        return to;
+    }
     keyAt(at) {
         return keyOf(this.data[at], at, this.keyField);
     }
@@ -530,7 +572,22 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             : undefined;
     }
     mark(element, at, chosen, off) {
-        element.setAttribute('role', this.selectionMode ? 'option' : 'listitem');
+        const lined = this.lined;
+        element.setAttribute('role', this.selectionMode ? 'option' : lined ? 'gridcell' : 'listitem');
+        const across = this.across;
+        for (const [name, value] of [
+            ['aria-colindex', lined ? (at % across) + 1 : undefined],
+            ['aria-posinset', lined ? undefined : at + 1],
+            ['aria-setsize', lined ? undefined : this.data.length],
+            ['slot', lined ? `${LINE}${Math.floor(at / across)}` : undefined],
+        ]) {
+            if (value === undefined) {
+                element.removeAttribute(name);
+            }
+            else {
+                element.setAttribute(name, String(value));
+            }
+        }
         const selected = Boolean(this.selectionMode) && chosen.has(this.keyAt(at));
         if (this.selectionMode) {
             element.setAttribute('aria-selected', String(selected));
@@ -549,8 +606,6 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         element.toggleAttribute('data-disabled', disabled);
     }
     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) {
@@ -595,12 +650,13 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.partNamed('after')?.style.setProperty(size, `${spacers.after}px`);
         }
         const sections = this.sections;
-        const regroup = sections !== this.placedSections;
+        const regroup = sections !== this.placedSections || this.waterfall !== this.placedWaterfall;
         this.placedSections = sections;
+        this.placedWaterfall = this.waterfall;
         const children = [
             ...[...this.children].filter((child) => child !== template &&
                 child instanceof HTMLElement &&
-                !child.hasAttribute('slot') &&
+                (child.dataset.index !== undefined || !child.hasAttribute('slot')) &&
                 !child.hasAttribute('data-section')),
             ...this.querySelectorAll(':scope > [data-section] > [data-index]'),
         ];
@@ -660,9 +716,23 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         });
         const chosen = this.chosen;
         const off = this.disabled;
+        const lines = this.lined ? [...new Set(plan.wanted.map((at) => this.lineOf(at)))] : [];
+        if (lines.join() !== this.drawnLines.join()) {
+            this.drawnLines = lines;
+            this.requestUpdate();
+        }
+        const gap = this.space;
+        const columns = this.columnCount;
         for (const [at, group] of drawn) {
             for (const element of group) {
                 this.mark(element, at, chosen, off);
+                if (this.waterfall) {
+                    const style = element.style;
+                    style.setProperty('position', 'absolute');
+                    style.setProperty('inset-block-start', `${this.virtualize.offsetOf(at)}px`);
+                    style.setProperty('inset-inline-start', `calc((100% + ${gap}px) * ${this.lanes.lane(at)} / ${columns})`);
+                    style.setProperty('inline-size', `calc((100% - ${gap * (columns - 1)}px) / ${columns})`);
+                }
             }
             const stop = at === this.active;
             group[0]?.setAttribute('tabindex', stop ? '0' : '-1');
@@ -745,6 +815,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         return groups;
     }
     spacerSizes() {
+        if (this.waterfall) {
+            return { after: 0, before: 0 };
+        }
         const kept = this.hasUpdated ? this.keptIndex() : undefined;
         const room = this.virtualize.spacers(kept === undefined ? undefined : this.lineOf(kept));
         const sections = this.sections;
@@ -779,14 +852,20 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const size = horizontal ? 'inline-size' : 'block-size';
         const flex = horizontal ? '; flex: none' : '';
         const gap = this.space;
+        const grid = gap === 0 ? '' : `; gap: ${gap}px; padding-block-end: ${gap}px`;
         const empty = this.readFor !== undefined &&
             !this.loading &&
             this.data.length === 0 &&
             (this.emptyLabel !== '' || this.querySelector(':scope > [slot="empty"]') !== null);
+        const lined = this.lined;
+        const own = (content) => lined ? html `<div role="gridcell">${content}</div>` : content;
+        const role = this.selectionMode ? 'option' : lined ? 'row' : 'listitem';
         return html `<div
       data-scroller
       part="viewport"
-      role=${this.selectionMode ? 'listbox' : 'list'}
+      role=${this.selectionMode ? 'listbox' : lined ? 'grid' : 'list'}
+      aria-colcount=${lined ? across : nothing}
+      aria-rowcount=${lined ? Math.ceil(this.data.length / across) : nothing}
       aria-multiselectable=${this.selectionMode === 'multiple' ? 'true' : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label}
@@ -798,24 +877,37 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         }}
     >
       <div part="before" style="${size}: ${before}px${flex}"></div>
+      ${lined
+            ? html `<div style=${`display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${grid}`}>
+              ${this.drawnLines.map((line) => html `<div
+                  aria-rowindex=${line + 1}
+                  role="row"
+                  style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid"
+                >
+                  <slot name=${`${LINE}${line}`}></slot>
+                </div>`)}
+            </div>`
+            : nothing}
       <slot
-        style=${horizontal
-            ? `display: flex; flex: none${gap === 0 ? '' : `; column-gap: ${gap}px; padding-inline-end: ${gap}px`}`
-            : across === 1
-                ? gap === 0
-                    ? nothing
-                    : `display: flex; flex-direction: column; row-gap: ${gap}px; padding-block-end: ${gap}px`
-                : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${gap === 0 ? '' : `; gap: ${gap}px; padding-block-end: ${gap}px`}`}
+        style=${this.waterfall
+            ? `display: block; position: relative; block-size: ${this.virtualize.offsetOf(this.data.length)}px`
+            : horizontal
+                ? `display: flex; flex: none${gap === 0 ? '' : `; column-gap: ${gap}px; padding-inline-end: ${gap}px`}`
+                : across === 1 || lined
+                    ? gap === 0
+                        ? nothing
+                        : `display: flex; flex-direction: column; row-gap: ${gap}px; padding-block-end: ${gap}px`
+                    : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${grid}`}
       ></slot>
       <div part="after" style="${size}: ${after}px${flex}"></div>
       ${this.loading
-            ? html `<div part="loading" role=${this.selectionMode ? 'option' : 'listitem'}>
-              <slot name="loading">${this.loadingLabel}</slot>
+            ? html `<div part="loading" role=${role}>
+              ${own(html `<slot name="loading">${this.loadingLabel}</slot>`)}
             </div>`
             : nothing}
       ${empty
-            ? html `<div part="empty" role=${this.selectionMode ? 'option' : 'listitem'}>
-              <slot name="empty">${this.emptyLabel}</slot>
+            ? html `<div part="empty" role=${role}>
+              ${own(html `<slot name="empty">${this.emptyLabel}</slot>`)}
             </div>`
             : nothing}
     </div>`;
@@ -848,6 +940,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessVirtualList.prototype, "layout", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessVirtualList.prototype, "loading", void 0);