@fusion.dev/helix-headless 0.144.0 → 0.145.0

package/dist/data-table/root/data-table-root.js

@@ -5,14 +5,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, deepActiveElement, deepContains, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, reportRuntime, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
+import { countLabel, customElement, deepActiveElement, deepContains, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, rangeAdd, reportRuntime, requestChange, Typeahead, typesCharacter, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
+import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import { at, edgeOf } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
+import { grow } from '../tree.js';
 import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
 const CONTROL = [
     'a[href]',
@@ -28,6 +31,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     constructor() {
         super(...arguments);
         this.ascendingLabel = 'ascending';
+        this.defaultExpanded = '';
         this.defaultFilter = '';
         this.defaultOrder = '';
         this.defaultPage = 1;
@@ -38,6 +42,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.estimate = 32;
         this.gapLabel = 'Skip to page {page}';
         this.label = '';
+        this.loadMore = false;
+        this.loadMoreLabel = 'Load more';
         this.mode = 'client';
         this.nextLabel = 'Next page';
         this.pageLabel = 'Page {page}';
@@ -63,11 +69,17 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.paginatedState = undefined;
         this.orderState = undefined;
         this.selectedState = undefined;
+        this.expandedState = undefined;
         this.activeRow = undefined;
         this.activeColumn = 0;
         this.activeKey = undefined;
         this.focusWanted = false;
         this.drawnPage = [];
+        this.moreDrawn = false;
+        this.typeahead = new Typeahead();
+        this.anchorKey = undefined;
+        this.shiftPressed = false;
+        this.askedAt = -1;
         this.counts = {
             columns: undefined,
             rows: undefined,
@@ -84,6 +96,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.warnedAboutSize = false;
         this.toggleRow = (key, event) => {
             event.preventDefault();
+            const to = this.pageKeys.indexOf(key);
+            if (this.shiftPressed && this.anchorKey !== undefined && to >= 0) {
+                this.selectRange(to);
+                return;
+            }
             this.chooseRow(key, event.detail.checked);
         };
         this.toggleAll = (event) => {
@@ -100,8 +117,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.handleScroll = () => {
             if (this.windowed) {
                 this.virtualize.measure();
+                this.askNearEnd();
             }
         };
+        this.notePress = (event) => {
+            this.shiftPressed = event.shiftKey;
+        };
         this.handleHeadClick = (event) => {
             if (this.partIn(event, 'grip') || this.partIn(event, 'resizer')) {
                 return;
@@ -144,9 +165,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 this.handleControlKey(event, place);
                 return;
             }
-            const last = this.drawnPage.length - 1;
+            const last = this.drawnPage.length - 1 + (this.moreDrawn ? 1 : 0);
             const edge = this.width - 1;
             const control = event.ctrlKey || event.metaKey;
+            if (control && !event.shiftKey && event.key.toLowerCase() === 'a' && this.selectable) {
+                event.preventDefault();
+                this.requestSelected(new Set([...this.chosen, ...this.everyKey]));
+                return;
+            }
+            if (typesCharacter(event) && (event.key !== ' ' || this.typeahead.typing())) {
+                const found = this.typeahead.match(event.key, this.rowWords, place.row);
+                if (found >= 0) {
+                    event.preventDefault();
+                    this.moveTo(found, place.column);
+                }
+                return;
+            }
             let { column, row } = place;
             switch (event.key) {
                 case 'ArrowUp':
@@ -157,6 +191,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     break;
                 case 'ArrowLeft':
                 case 'ArrowRight':
+                    if (this.treeKey(event, place)) {
+                        return;
+                    }
                     column = Math.max(0, Math.min(edge, column + inlineStep(this, event.key)));
                     break;
                 case 'Home':
@@ -182,6 +219,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     return;
             }
             event.preventDefault();
+            if (event.shiftKey &&
+                this.selectable &&
+                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
+                place.row >= 0 &&
+                row >= 0 &&
+                row < this.drawnPage.length) {
+                this.selectRange(row, place.row);
+            }
             if (row !== place.row || column !== place.column) {
                 this.moveTo(row, column);
             }
@@ -264,6 +309,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    get expanded() {
+        return this.expandedState ?? this.defaultExpanded;
+    }
+    set expanded(next) {
+        const previous = this.expanded;
+        this.expandedState = next;
+        this.requestUpdate('expanded', previous);
+    }
     get filter() {
         return this.filterState ?? this.defaultFilter;
     }
@@ -331,15 +384,58 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     get available() {
         if (this.mode === 'server') {
-            return this.rows.length;
+            return this.childField ? this.tree().rows.length : this.rows.length;
         }
-        const matched = this.windowed ? this.arrange().rows.length : this.matched;
+        const matched = this.windowed ? this.flat().rows.length : this.matched;
         const size = this.pageSize;
         if (size <= 0) {
             return matched;
         }
         return Math.max(0, Math.min(size, matched - (this.page - 1) * size));
     }
+    tree() {
+        const axes = this.axes;
+        const server = this.mode === 'server';
+        const query = server ? '' : this.filter;
+        const spec = server ? '' : this.sort;
+        const key = [
+            query,
+            spec,
+            this.childField,
+            this.expanded,
+            axes.map((axis) => axis.field).join('\u0001'),
+        ].join('\u0000');
+        if (this.grown?.key === key && this.grown.source === this.rows) {
+            return this.grown.value;
+        }
+        if (!this.rowKey && !this.warnedAboutKey && typeof window !== 'undefined') {
+            this.warnedAboutKey = true;
+            reportRuntime({
+                kind: 'missing-row-key',
+                message: `<${this.localName} child-field> has no \`row-key\`, so it cannot tell which rows are open. Set \`row-key\` to the field that identifies a row.`,
+                tag: this.localName,
+            });
+        }
+        const open = this.opened;
+        const value = grow(this.rows, axes, {
+            field: this.childField ?? '',
+            isOpen: (row) => open.has(this.rowKeyOf(row, -1)),
+            query,
+            spec,
+        });
+        this.grown = { key, source: this.rows, value };
+        return value;
+    }
+    get opened() {
+        return new Set(writtenList(this.expanded.replaceAll(',', ' ')));
+    }
+    flat() {
+        if (this.childField) {
+            const { rows, total } = this.tree();
+            return { rows, total };
+        }
+        return this.arrange();
+    }
     arrange() {
         const axes = this.axes;
         const key = `${this.filter}\u0000${this.sort}\u0000${axes.map((axis) => axis.field).join('\u0001')}`;
@@ -370,7 +466,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
         const row = this.currentRow(rows);
         const { first, last } = this.virtualize.window;
-        return row >= 0 && (row < first || row >= last) ? row : undefined;
+        return row >= 0 && row < rows.length && (row < first || row >= last) ? row : undefined;
     }
     rowKeyOf(row, index) {
         if (!this.rowKey) {
@@ -391,7 +487,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 return found;
             }
         }
-        return Math.min(asked, rows.length - 1);
+        return Math.min(asked, rows.length - 1 + (this.moreDrawn ? 1 : 0));
     }
     get width() {
         return this.shownColumns.length + (this.selectable ? 1 : 0);
@@ -455,7 +551,16 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     get view() {
         if (this.mode === 'server') {
             const total = Math.max(this.total, this.rows.length);
-            return { available: this.rows.length, matched: total, page: this.rows, total };
+            const page = this.childField ? this.tree().rows : this.rows;
+            return { available: page.length, matched: total, page, total };
+        }
+        if (this.childField) {
+            const { rows: inOrder, total } = this.tree();
+            const page = window_(inOrder, this.page, this.pageSize);
+            if (!this.windowed) {
+                this.warnIfCrowded(page.length);
+            }
+            return { available: page.length, matched: inOrder.length, page, total };
         }
         if (!this.windowed) {
             const view = ordered(this.rows, this.axes, {
@@ -485,6 +590,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return Math.max(1, Math.ceil(count / size));
     }
     get matched() {
+        if (this.childField) {
+            return this.tree().rows.length;
+        }
         const query = this.filter.trim();
         if (query === '') {
             return this.rows.length;
@@ -565,10 +673,57 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return String(place);
     }
     get everyKey() {
+        if (this.childField) {
+            return this.tree().every.map((row, place) => this.keyOf(row, place));
+        }
         const rows = this.mode === 'server' ? this.rows : this.arrange().rows;
         return rows.map((row, place) => this.keyOf(row, place));
     }
+    get pageKeys() {
+        return this.drawnPage.map((row, index) => this.keyOf(row, this.rowIndex(index) - 2));
+    }
+    selectRange(to, from = to) {
+        const keys = this.pageKeys;
+        let anchor = this.anchorKey === undefined ? -1 : keys.indexOf(this.anchorKey);
+        if (anchor < 0) {
+            anchor = from;
+            this.anchorKey = keys[from];
+        }
+        const next = rangeAdd([...this.chosen], keys, anchor, to);
+        if (next) {
+            this.requestSelected(new Set(next));
+        }
+    }
+    get rowWords() {
+        const header = this.headerColumn;
+        return this.drawnPage.map((row) => {
+            const value = header?.order(row);
+            return value === undefined || value === null ? '' : String(value);
+        });
+    }
+    get headerColumn() {
+        const columns = this.shownColumns;
+        return (columns.find((column) => column.rowHeader) ?? columns.find((column) => column.field !== ''));
+    }
+    askForMore() {
+        this.dispatchEvent(new HelixLoadMoreEvent());
+    }
+    askNearEnd() {
+        if (!this.windowed || !this.loadMore || this.loading) {
+            return;
+        }
+        const screen = this.partNamed('table')?.clientHeight ?? 0;
+        const count = this.rows.length;
+        if (screen > 0 &&
+            count > 0 &&
+            this.askedAt !== count &&
+            this.virtualize.remaining() <= screen) {
+            this.askedAt = count;
+            this.askForMore();
+        }
+    }
     chooseRow(key, checked) {
+        this.anchorKey = key;
         const keys = this.chosen;
         if (checked) {
             keys.add(key);
@@ -609,7 +764,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     csv() {
         const columns = this.shownColumns.filter((column) => column.field !== '');
-        const rows = this.mode === 'server' ? this.rows : this.arrange().rows;
+        const rows = this.mode === 'server' && !this.childField ? this.rows : this.flat().rows;
         const quote = (value) => {
             if (value === undefined || value === null) {
                 return '';
@@ -711,10 +866,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
         else if (this.hasUpdated && this.filter !== this.heardFilter) {
             const count = this.mode === 'server' ? Math.max(this.total, this.rows.length) : this.matched;
-            const one = new Intl.PluralRules(this.lang || undefined).select(count) === 'one';
-            said = fillTemplate(one ? this.resultLabel : this.resultsLabel, {
-                count: formatNumbers(this.lang)(count),
-            });
+            said = countLabel(count, this.resultLabel, this.resultsLabel, this.lang);
         }
         this.heardSort = sort;
         this.heardSelected = selected;
@@ -725,7 +877,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         super.willUpdate(changed);
         this.hadFocus = this.hasUpdated && this.gridHasFocus();
         this.announced = this.news();
-        hostAria(this.internals, { label: this.label || 'Table', role: 'grid' });
+        hostAria(this.internals, {
+            label: this.label || 'Table',
+            role: this.childField ? 'treegrid' : 'grid',
+        });
         this.internals.ariaMultiSelectable = this.selectable ? 'true' : null;
         const placement = this.placement;
         if (changed.has('rows') || placement !== this.measuredAgainst) {
@@ -750,6 +905,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         if (this.windowed) {
             this.virtualize.measure();
         }
+        this.askNearEnd();
     }
     announceSort() {
         const current = parse(this.sort);
@@ -768,17 +924,48 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     : undefined;
         }
     }
-    renderCell(column, row, picked, place, stop) {
+    renderCell(column, row, picked, place, stop, header) {
         const edge = edgeOf(column.textAlign);
+        const placed = header && this.childField ? this.tree().placed.get(row) : undefined;
+        const style = [
+            edge ? `--data-table-cell-align: ${edge}` : '',
+            placed ? `--data-table-level: ${placed.level}` : '',
+        ]
+            .filter(Boolean)
+            .join('; ');
         return html `<span
-      part="cell${picked ? ' cell-selected' : ''}"
-      role="gridcell"
+      part="cell${picked ? ' cell-selected' : ''}${header ? ' cell-header' : ''}"
+      role=${header ? 'rowheader' : 'gridcell'}
       tabindex=${stop ? '0' : '-1'}
       data-column=${place}
-      style=${edge ? `--data-table-cell-align: ${edge}` : nothing}
-      >${column.read(row)}</span
+      style=${style || nothing}
+      >${placed?.branch ? this.renderToggle(row, placed.open) : nothing}${column.read(row)}</span
     >`;
     }
+    renderToggle(row, open) {
+        const glyph = open ? caretDown : caretRight;
+        return html `<span
+      part="toggle${open ? ' toggle-open' : ''}"
+      aria-hidden="true"
+      @click=${() => this.toggleOpen(row, !open)}
+    ><svg part="toggle-mark" ?data-mirror=${!open} fill="currentColor" viewBox=${glyph.viewBox}>${unsafeSVG(glyph.content)}</svg></span>`;
+    }
+    toggleOpen(row, open) {
+        const key = this.rowKeyOf(row, -1);
+        const keys = this.opened;
+        if (keys.has(key) === open) {
+            return false;
+        }
+        if (open) {
+            keys.add(key);
+        }
+        else {
+            keys.delete(key);
+        }
+        this.expanded = [...keys].join(',');
+        this.dispatchEvent(new HelixExpandEvent({ value: this.expanded }));
+        return true;
+    }
     renderCheckbox(name, checked, indeterminate, toggle) {
         const checkbox = this.tag('checkbox');
         return html `<${checkbox}
@@ -797,19 +984,24 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     renderRows(rows, page) {
         const columns = this.shownColumns;
         const chosen = this.selectable ? this.chosen : undefined;
-        const named = columns.find((column) => column.field !== '');
+        const named = this.headerColumn;
         const stopRow = this.currentRow(page);
         const stopColumn = this.currentColumn;
         const offset = this.selectable ? 1 : 0;
         return html `${repeat(rows, ({ index, row }) => this.rowKeyOf(row, index), ({ index, row }) => {
             const key = chosen ? this.keyOf(row, this.rowIndex(index) - 2) : '';
             const picked = chosen?.has(key) ?? false;
+            const placed = this.childField ? this.tree().placed.get(row) : undefined;
             const stop = (place) => index === stopRow && place === stopColumn;
             return html `<div
           part="row"
           role="row"
           aria-rowindex=${this.rowIndex(index)}
           aria-selected=${chosen ? String(picked) : nothing}
+          aria-level=${placed ? placed.level : nothing}
+          aria-posinset=${placed ? placed.position : nothing}
+          aria-setsize=${placed ? placed.siblings : nothing}
+          aria-expanded=${placed?.branch ? String(placed.open) : nothing}
           data-index=${this.windowed ? index : nothing}
           data-row=${index}
         >
@@ -823,7 +1015,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     row: named ? String(named.order(row) ?? key) : key,
                 }), picked, false, (event) => this.toggleRow(key, event))}</span
                 >`
-                : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset)))}
+                : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset), column === named))}
         </div>`;
         })}`;
     }
@@ -833,16 +1025,21 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return page + within + 2;
     }
     get placement() {
-        return [this.mode, this.filter, this.sort, this.page, this.pageSize].join('\u0000');
+        return [
+            this.mode,
+            this.filter,
+            this.sort,
+            this.page,
+            this.pageSize,
+            this.childField,
+            this.expanded,
+        ].join('\u0000');
     }
     renderSpacer(end, kept) {
         if (!this.windowed) {
             return nothing;
         }
-        const window = this.virtualize.window;
-        const room = kept === undefined ? 0 : this.virtualize.sizeOf(kept);
-        const before = Math.max(0, window.before - (kept !== undefined && kept < window.first ? room : 0));
-        const after = Math.max(0, window.after - (kept !== undefined && kept >= window.last ? room : 0));
+        const { after, before } = this.virtualize.spacers(kept);
         return end === 'before'
             ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>`
             : html `<div part="after" role="presentation" style="block-size: ${after}px"></div>`;
@@ -858,9 +1055,26 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
       data-column="0"
     >${this.renderCheckbox(this.selectAllLabel, every.length > 0 && count === every.length, count > 0 && count < every.length, this.toggleAll)}</span>`;
     }
+    renderMore(page) {
+        if (!this.moreDrawn) {
+            return nothing;
+        }
+        const stop = this.currentRow(page) === page.length;
+        return html `<div part="more" role="row" aria-rowindex=${this.rowIndex(page.length)} data-row=${page.length}>
+      <span
+        part="more-cell"
+        role="gridcell"
+        aria-colspan=${this.width}
+        tabindex=${stop ? '0' : '-1'}
+        data-column="0"
+        ><button part="more-button" type="button" tabindex="-1" @click=${this.askForMore}>${this.loadMoreLabel}</button></span
+      >
+    </div>`;
+    }
     render() {
         const { available, matched, page } = this.view;
         this.drawnPage = page;
+        this.moreDrawn = this.loadMore && !this.loading && page.length > 0;
         const rows = this.windowOf(page);
         const kept = this.keptRow(page);
         const headStop = this.currentRow(page) === -1;
@@ -872,7 +1086,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const countKnown = counted > 0 || this.sourceKnown;
         this.counts = {
             columns: columns.length ? columns.length + (this.selectable ? 1 : 0) : undefined,
-            rows: countKnown ? counted + 1 : undefined,
+            rows: countKnown ? counted + 1 + (this.moreDrawn ? 1 : 0) : undefined,
         };
         return html `<div part="toolbar"><slot name="toolbar"></slot></div>
       <div
@@ -888,7 +1102,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
         </div>
         ${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}
-        ${this.renderStatus(filled, 'gridcell')}
+        ${this.renderMore(page)}${this.renderStatus(filled, 'gridcell')}
       </div>
       ${this.renderLive(filled)}
       <div part="footer">
@@ -918,7 +1132,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleHeadClick);
+        this.addEventListener('pointerdown', this.notePress, true);
+        this.addEventListener('keydown', this.notePress, true);
         this.addEventListener('focusin', this.handleFocusIn);
+        this.renderRoot.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('keydown', this.handleGridKey);
         this.addEventListener('keydown', this.handleGripKey);
         this.addEventListener('pointerdown', this.handleGripDown);
@@ -927,7 +1144,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.handleHeadClick);
+        this.removeEventListener('pointerdown', this.notePress, true);
+        this.removeEventListener('keydown', this.notePress, true);
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.renderRoot.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('keydown', this.handleGridKey);
         this.removeEventListener('keydown', this.handleGripKey);
         this.removeEventListener('pointerdown', this.handleGripDown);
@@ -941,6 +1161,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 ? this.partNamed('select-all')
                 : (this.shownColumns[column - offset]?.cellBox ?? null);
         }
+        if (this.moreDrawn && row === this.drawnPage.length) {
+            return this.partNamed('more-cell');
+        }
         const line = this.renderRoot.querySelector(`[part="row"][data-row="${row}"]`);
         return line?.querySelector(`:scope > [data-column="${column}"]`) ?? null;
     }
@@ -961,7 +1184,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
             const role = node.getAttribute('role');
             if (node.dataset.column !== undefined &&
-                (role === 'gridcell' || role === 'columnheader') &&
+                (role === 'gridcell' || role === 'columnheader' || role === 'rowheader') &&
                 node.getRootNode() === this.renderRoot) {
                 const line = node.parentElement?.dataset.row;
                 return {
@@ -1067,9 +1290,38 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             box.scrollLeft += rect.right - frame.right;
         }
     }
+    treeKey(event, place) {
+        const row = this.drawnPage[place.row];
+        const header = this.headerColumn;
+        if (!this.childField || !row || !header) {
+            return false;
+        }
+        if (place.column !== this.shownColumns.indexOf(header) + (this.selectable ? 1 : 0)) {
+            return false;
+        }
+        const placed = this.tree().placed.get(row);
+        const forward = inlineStep(this, event.key) > 0;
+        if (placed?.branch && placed.open !== forward) {
+            event.preventDefault();
+            this.toggleOpen(row, forward);
+            return true;
+        }
+        const parent = placed?.parent ? this.drawnPage.indexOf(placed.parent) : -1;
+        if (!forward && parent >= 0) {
+            event.preventDefault();
+            this.moveTo(parent, place.column);
+            return true;
+        }
+        return false;
+    }
     activate(event, place) {
         const offset = this.selectable ? 1 : 0;
         const heading = place.row === -1 ? this.shownColumns[place.column - offset] : undefined;
+        if (this.moreDrawn && place.row === this.drawnPage.length && event.key !== 'F2') {
+            event.preventDefault();
+            this.askForMore();
+            return;
+        }
         if (event.key !== 'F2') {
             if (heading?.canSort) {
                 event.preventDefault();
@@ -1083,7 +1335,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
             if (event.key === ' ') {
                 const row = this.drawnPage[place.row];
-                if (this.selectable && row) {
+                if (this.selectable && row && event.shiftKey && this.anchorKey !== undefined) {
+                    event.preventDefault();
+                    this.selectRange(place.row);
+                }
+                else if (this.selectable && row) {
                     event.preventDefault();
                     const key = this.keyOf(row, this.rowIndex(place.row) - 2);
                     this.chooseRow(key, !this.chosen.has(key));
@@ -1140,6 +1396,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
 __decorate([
     property({ attribute: 'ascending-label' })
 ], HelixHeadlessDataTable.prototype, "ascendingLabel", void 0);
+__decorate([
+    property({ attribute: 'child-field', reflect: true })
+], HelixHeadlessDataTable.prototype, "childField", void 0);
+__decorate([
+    property({ attribute: 'default-expanded' })
+], HelixHeadlessDataTable.prototype, "defaultExpanded", void 0);
 __decorate([
     property({ attribute: 'default-filter' })
 ], HelixHeadlessDataTable.prototype, "defaultFilter", void 0);
@@ -1164,6 +1426,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "estimate", void 0);
+__decorate([
+    property()
+], HelixHeadlessDataTable.prototype, "expanded", null);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "filter", null);
@@ -1173,6 +1438,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'load-more', type: Boolean })
+], HelixHeadlessDataTable.prototype, "loadMore", void 0);
+__decorate([
+    property({ attribute: 'load-more-label' })
+], HelixHeadlessDataTable.prototype, "loadMoreLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "mode", void 0);
@@ -1266,6 +1537,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDataTable.prototype, "selectedState", void 0);
+__decorate([
+    state()
+], HelixHeadlessDataTable.prototype, "expandedState", void 0);
 __decorate([
     state()
 ], HelixHeadlessDataTable.prototype, "activeRow", void 0);

package/dist/data-table/tree.d.ts

@@ -0,0 +1,40 @@
+import { type Axis, type DataRow } from './root/order.js';
+/** Where a row sits in the tree. */
+export interface Placement {
+    /** Whether it has children to show. */
+    branch: boolean;
+    /** How deep the row is, from 1 for a row with no parent. */
+    level: number;
+    /** Whether its children are shown. */
+    open: boolean;
+    /** The row it sits under, if any. */
+    parent: DataRow | undefined;
+    /** Its place among its siblings, from 1. */
+    position: number;
+    /** How many siblings it has, itself included. */
+    siblings: number;
+}
+/** The rows a tree shows, and the counts around them. */
+export interface Grown {
+    /** Every row in the tree, shown or not, for a selection of every row. */
+    every: DataRow[];
+    /** Where each shown row sits. */
+    placed: Map<DataRow, Placement>;
+    /** The rows shown, in reading order. */
+    rows: DataRow[];
+    /** How many rows the tree holds before filtering. */
+    total: number;
+}
+/** The rows under `row`, read from `field`: an array, or none. */
+export declare const childrenOf: (row: DataRow, field: string) => DataRow[];
+/**
+ * The tree laid out flat: each shown row followed by its children where it is
+ * open, which `isOpen` says. While `query` is set, a row with a match under it
+ * is open whatever `isOpen` says.
+ */
+export declare const grow: (rows: readonly DataRow[], axes: readonly Axis[], { field, isOpen, query, spec, }: {
+    field: string;
+    isOpen: (row: DataRow) => boolean;
+    query: string;
+    spec: string;
+}) => Grown;