@fusion.dev/helix-headless 0.160.0 → 0.161.0

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

@@ -9,20 +9,24 @@ import { html, nothing, render } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { holdControls, releaseControls } from '../controls.js';
 import { fillHoles, keyOf, textsOf } from '../fill.js';
-import { stepIndex } from '../keys.js';
+import { skipDisabled, stepIndex } from '../keys.js';
 import { drawPlan, itemsOf, stopAfter } from '../plan.js';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
     constructor() {
         super(...arguments);
         this.columns = 1;
+        this.disabledKeys = '';
         this.emptyLabel = '';
         this.estimate = 32;
         this.for = '';
+        this.gap = 0;
         this.keyField = '';
         this.label = '';
         this.loading = false;
         this.loadingLabel = 'Loading more';
         this.measured = false;
+        this.minColumnWidth = 0;
+        this.selectionBehavior = 'toggle';
         this.textField = '';
         this.value = '';
         this.rows = [];
@@ -39,9 +43,12 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             container: () => this.partNamed('viewport'),
             count: () => Math.ceil(this.data.length / this.across),
             estimate: () => this.estimate,
+            gap: () => this.space,
             measured: () => this.measured,
             rows: () => this.lines(),
         });
+        this.boxWidth = 0;
+        this.measuredAcross = 1;
         this.handleKeydown = (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -59,28 +66,45 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                 return;
             }
             const toggle = event.ctrlKey || event.metaKey;
+            const replacing = this.selectionMode !== undefined && this.selectionBehavior === 'replace';
             if (this.selectionMode && !event.altKey) {
                 if (selectsAll(event) && this.selectionMode === 'multiple') {
                     event.preventDefault();
-                    this.choose(this.keys().join(','));
+                    const off = this.disabled;
+                    this.choose(this.keys()
+                        .filter((key) => !off.has(key))
+                        .join(','));
                     return;
                 }
-                if (event.key === ' ' && !toggle) {
+                if (event.key === ' ' && (!toggle || replacing)) {
                     event.preventDefault();
-                    this.press(at, event.shiftKey);
+                    this.press(at, event.shiftKey, toggle);
+                    return;
+                }
+                if (event.key === 'Escape' && this.value !== '' && !toggle && !event.shiftKey) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.choose('');
                     return;
                 }
             }
             const extend = event.shiftKey && this.selectionMode === 'multiple';
-            if (event.altKey || toggle || (event.shiftKey && !extend)) {
+            if (event.altKey || (toggle && !replacing) || (event.shiftKey && !extend)) {
                 return;
             }
+            const count = this.data.length;
             const { first, last } = this.virtualize.visible();
-            const next = stepIndex(event.key, at, this.data.length, last - first - 1, {
+            const stepped = stepIndex(event.key, at, count, last - first - 1, {
                 across: this.across,
                 forward: isRtl(this) ? 'ArrowLeft' : 'ArrowRight',
             });
+            const next = stepped === undefined
+                ? undefined
+                : skipDisabled(event.key, at, stepped, count, (one) => this.isDisabled(one), this.across);
             if (next === undefined) {
+                if (stepped !== undefined) {
+                    event.preventDefault();
+                }
                 return;
             }
             event.preventDefault();
@@ -89,6 +113,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                 this.anchor ??= this.keyAt(at);
                 this.press(next, true);
             }
+            else if (replacing && !toggle) {
+                this.press(next);
+            }
         };
         this.handleClick = (event) => {
             if (!this.selectionMode) {
@@ -103,7 +130,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             if (pressedOwnControl(event, row, 'a[href], button, input, select, textarea, label')) {
                 return;
             }
-            this.press(at, event.shiftKey && this.selectionMode === 'multiple');
+            this.press(at, event.shiftKey && this.selectionMode === 'multiple', event.ctrlKey || event.metaKey);
         };
         this.handleFocusOut = (event) => {
             const next = event.relatedTarget;
@@ -130,9 +157,34 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     get range() {
         return this.itemsOn(this.virtualize.visible());
     }
+    get space() {
+        return Number.isFinite(this.gap) && this.gap > 0 ? this.gap : 0;
+    }
     get across() {
+        if (this.minColumnWidth > 0 && this.boxWidth > 0) {
+            const space = this.space;
+            return Math.max(1, Math.floor((this.boxWidth + space) / (this.minColumnWidth + space)));
+        }
         return Math.max(1, Math.trunc(this.columns) || 1);
     }
+    watchWidth() {
+        const viewport = this.partNamed('viewport');
+        if (this.minColumnWidth <= 0 || !viewport || typeof ResizeObserver === 'undefined') {
+            this.widthWatch?.disconnect();
+            this.widthWatch = undefined;
+            return;
+        }
+        if (this.widthWatch) {
+            return;
+        }
+        this.widthWatch = new ResizeObserver(([entry]) => {
+            const width = entry?.contentRect.width ?? 0;
+            if (width > 0 && Math.abs(width - this.boxWidth) >= 1) {
+                this.boxWidth = width;
+            }
+        });
+        this.widthWatch.observe(viewport);
+    }
     itemsOn(lines) {
         return itemsOf(lines, this.across, this.data.length);
     }
@@ -169,6 +221,40 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             this.readFor = this.for;
             this.read();
         }
+        const across = this.across;
+        if (across !== this.measuredAcross) {
+            this.measuredAcross = across;
+            this.virtualize.forget();
+        }
+        if (this.hasUpdated) {
+            if (changed.has('items')) {
+                this.keepPlace(changed.get('items'));
+            }
+            this.place();
+        }
+    }
+    keepPlace(was) {
+        const now = this.data;
+        if (!was || was.length === 0 || now.length <= was.length) {
+            return;
+        }
+        const by = now.length - was.length;
+        const same = (at, then) => now[at] === was[then] ||
+            (this.keyField !== '' &&
+                keyOf(now[at], at, this.keyField) === keyOf(was[then], then, this.keyField));
+        if (!same(by, 0) || !same(now.length - 1, was.length - 1)) {
+            return;
+        }
+        if (by % this.across === 0) {
+            this.virtualize.shift(by / this.across);
+        }
+        for (const row of this.querySelectorAll(':scope > [data-index]')) {
+            row.dataset.index = String(Number(row.dataset.index) + by);
+        }
+        this.active += by;
+        if (this.released !== undefined) {
+            this.released += by;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -194,6 +280,31 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.removeEventListener('focusout', this.handleFocusOut);
         this.watcher?.disconnect();
         this.watcher = undefined;
+        this.sizes?.disconnect();
+        this.sizes = undefined;
+        this.widthWatch?.disconnect();
+        this.widthWatch = undefined;
+        if (this.resized !== undefined) {
+            cancelAnimationFrame(this.resized);
+            this.resized = undefined;
+        }
+    }
+    watchSize(elements) {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.sizes ??= new ResizeObserver(() => {
+            if (this.resized !== undefined) {
+                return;
+            }
+            this.resized = requestAnimationFrame(() => {
+                this.resized = undefined;
+                this.virtualize.settle();
+            });
+        });
+        for (const element of elements) {
+            this.sizes.observe(element);
+        }
     }
     handleMutations(records) {
         if (this.for === '' || this.hydrating || this.readFor === undefined) {
@@ -213,8 +324,12 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         super.updated?.(changed);
         this.toggleState('empty', this.readFor !== undefined && this.data.length === 0);
         this.toggleState('loading', this.loading);
+        this.watchWidth();
+        const was = this.virtualize.window;
         this.virtualize.measure();
-        this.place();
+        if (this.virtualize.window === was) {
+            this.place();
+        }
         this.virtualize.settle();
         this.report();
     }
@@ -250,7 +365,15 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                 ?.content.querySelector('[data-field]')
                 ?.getAttribute('data-field') ||
             '';
-        return textsOf(this.data, field);
+        const off = this.disabled;
+        const texts = textsOf(this.data, field);
+        return off.size === 0 ? texts : texts.map((text, at) => (off.has(this.keyAt(at)) ? '' : text));
+    }
+    get disabled() {
+        return new Set(commaList(this.disabledKeys));
+    }
+    isDisabled(at) {
+        return this.disabledKeys !== '' && this.disabled.has(this.keyAt(at));
     }
     indexOf(node) {
         if (!(node instanceof HTMLElement) || node.parentElement !== this) {
@@ -271,22 +394,29 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     get chosen() {
         return new Set(commaList(this.value));
     }
-    press(at, extend = false) {
+    press(at, extend = false, toggle = false) {
         const mode = this.selectionMode;
-        const key = this.keyAt(at);
-        if (!mode || at < 0 || at >= this.data.length) {
+        if (!mode || at < 0 || at >= this.data.length || this.isDisabled(at)) {
             return;
         }
+        const key = this.keyAt(at);
         const now = commaList(this.value);
         if (extend && mode === 'multiple') {
             const keys = this.keys();
-            const range = rangeAdd(now, keys, anchorAt(keys, this.anchor, at).anchor, at);
+            const off = this.disabled;
+            const range = rangeAdd(now, keys.map((one) => (off.has(one) ? '' : one)), anchorAt(keys, this.anchor, at).anchor, at)?.filter((one) => one !== '');
             if (range) {
                 this.choose(this.inOrder(range));
             }
             return;
         }
         this.anchor = key;
+        if (this.selectionBehavior === 'replace' && !toggle) {
+            if (!(now.length === 1 && now[0] === key)) {
+                this.choose(key);
+            }
+            return;
+        }
         if (mode === 'single') {
             this.choose(now.length === 1 && now[0] === key ? '' : key);
             return;
@@ -334,7 +464,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             ? index
             : undefined;
     }
-    mark(element, at, chosen) {
+    mark(element, at, chosen, off) {
         element.setAttribute('role', this.selectionMode ? 'option' : 'listitem');
         if (this.selectionMode) {
             element.setAttribute('aria-selected', String(chosen.has(this.keyAt(at))));
@@ -342,6 +472,12 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         else {
             element.removeAttribute('aria-selected');
         }
+        if (off.size > 0 && off.has(this.keyAt(at))) {
+            element.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            element.removeAttribute('aria-disabled');
+        }
     }
     stamp(element, at) {
         element.setAttribute('aria-posinset', String(at + 1));
@@ -378,6 +514,13 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         }
         const count = this.data.length;
         const { first, last } = this.itemsOn(this.virtualize.window);
+        const holding = this.focusedIndex();
+        const onScreen = this.range.first;
+        if (this.hasUpdated) {
+            const spacers = this.spacerSizes();
+            this.partNamed('before')?.style.setProperty('block-size', `${spacers.before}px`);
+            this.partNamed('after')?.style.setProperty('block-size', `${spacers.after}px`);
+        }
         const children = [...this.children].filter((child) => child !== template && child instanceof HTMLElement && !child.hasAttribute('slot'));
         const plan = drawPlan({
             across: this.across,
@@ -392,6 +535,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         for (const child of children) {
             const index = Number(child.dataset.index);
             if (plan.remove.has(index)) {
+                this.sizes?.unobserve(child);
                 child.remove();
                 continue;
             }
@@ -414,6 +558,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
             const fragment = this.draw(template, at);
             drawn.set(at, [...fragment.children]);
+            this.watchSize([...fragment.children]);
             fresh.add(at);
             this.insertBefore(fragment, anchor);
         }
@@ -421,12 +566,13 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             count,
             first,
             last,
-            onScreen: this.range.first,
+            onScreen,
         });
         const chosen = this.chosen;
+        const off = this.disabled;
         for (const [at, group] of drawn) {
             for (const element of group) {
-                this.mark(element, at, chosen);
+                this.mark(element, at, chosen, off);
             }
             const stop = at === this.active;
             group[0]?.setAttribute('tabindex', stop ? '0' : '-1');
@@ -438,10 +584,22 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
         }
         this.released = this.active;
+        if (holding !== undefined && plan.remove.has(holding) && count > 0) {
+            const next = Math.min(holding, count - 1);
+            this.active = next;
+            setTimeout(() => {
+                if (this.focusedIndex() === undefined && this.isConnected) {
+                    void this.focusIndex(next);
+                }
+            }, 0);
+        }
     }
-    render() {
+    spacerSizes() {
         const kept = this.hasUpdated ? this.keptIndex() : undefined;
-        const { after, before } = this.virtualize.spacers(kept === undefined ? undefined : Math.floor(kept / this.across));
+        return this.virtualize.spacers(kept === undefined ? undefined : Math.floor(kept / this.across));
+    }
+    render() {
+        const { after, before } = this.spacerSizes();
         const across = this.across;
         const empty = this.readFor !== undefined &&
             !this.loading &&
@@ -462,8 +620,10 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
       <div part="before" style="block-size: ${before}px"></div>
       <slot
         style=${across === 1
-            ? nothing
-            : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))`}
+            ? this.space === 0
+                ? nothing
+                : `display: flex; flex-direction: column; row-gap: ${this.space}px; padding-block-end: ${this.space}px`
+            : `display: grid; grid-template-columns: repeat(${across}, minmax(0, 1fr))${this.space === 0 ? '' : `; gap: ${this.space}px; padding-block-end: ${this.space}px`}`}
       ></slot>
       <div part="after" style="block-size: ${after}px"></div>
       ${this.loading
@@ -482,6 +642,9 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
 __decorate([
     property({ type: Number })
 ], HelixHeadlessVirtualList.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: 'disabled-keys' })
+], HelixHeadlessVirtualList.prototype, "disabledKeys", void 0);
 __decorate([
     property({ attribute: 'empty-label' })
 ], HelixHeadlessVirtualList.prototype, "emptyLabel", void 0);
@@ -491,6 +654,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "for", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessVirtualList.prototype, "gap", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessVirtualList.prototype, "items", void 0);
@@ -510,9 +676,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessVirtualList.prototype, "measured", void 0);
+__decorate([
+    property({ attribute: 'min-column-width', type: Number })
+], HelixHeadlessVirtualList.prototype, "minColumnWidth", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessVirtualList.prototype, "renderItem", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessVirtualList.prototype, "selectionBehavior", void 0);
 __decorate([
     property({ attribute: 'selection-mode' })
 ], HelixHeadlessVirtualList.prototype, "selectionMode", void 0);
@@ -525,6 +697,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessVirtualList.prototype, "rows", void 0);
+__decorate([
+    state()
+], HelixHeadlessVirtualList.prototype, "boxWidth", void 0);
 HelixHeadlessVirtualList = __decorate([
     customElement('helix-headless-virtual-list')
 ], HelixHeadlessVirtualList);