apex-grid 3.6.0 → 4.0.0-beta.2

package/components/grid.js

@@ -4,6 +4,7 @@ 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;
 };
+var _a;
 import { ContextProvider } from '@lit/context';
 import { html, nothing } from 'lit';
 import { eventOptions, property, query, queryAll, state } from 'lit/decorators.js';
@@ -11,9 +12,11 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { DataOperationsController } from '../controllers/data-operation.js';
 import { GridDOMController } from '../controllers/dom.js';
 import { viewIndexer } from '../controllers/history.js';
+import { DEFAULT_PAGINATION } from '../controllers/pagination.js';
 import { gridStateContext, StateController } from '../controllers/state.js';
 import { localize as resolveLocaleText, } from '../i18n/index.js';
 import { DEFAULT_COLUMN_CONFIG, PIPELINE, SENTINEL_NODE } from '../internal/constants.js';
+import { connectDesignSystem, disconnectDesignSystem } from '../internal/design-system.js';
 import { adoptGridDocumentStyles } from '../internal/document-styles.js';
 import { buildCSV, downloadBlob, } from '../internal/export.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
@@ -31,7 +34,7 @@ import ApexGridHeaderRow from './header-row.js';
 import ApexGridPaginator from './paginator.js';
 import ApexGridRow from './row.js';
 import ApexGridToolbar from './toolbar.js';
-import ApexVirtualizer from './virtualizer.js';
+import ApexVirtualizer, { quietResizeObserverLoopNotice } from './virtualizer.js';
 const SORT_DIRECTIONS = ['ascending', 'descending', 'none'];
 const VIEW_SHAPING_SLICES = new Set([
     'columns',
@@ -45,7 +48,7 @@ const VIEW_SHAPING_PROPERTIES = new Map([
     ['quickFilter', null],
     ['pagination', ['enabled', 'mode', 'pageSize', 'totalItems']],
     ['tree', ['enabled', 'getDataPath', 'defaultExpanded']],
-    ['dataPipelineConfiguration', ['sort', 'filter', 'pagination', 'quickFilter']],
+    ['dataPipelineConfiguration', ['sort', 'filter', 'quickFilter']],
 ]);
 function viewShapeChanged(fields, before, after) {
     if (Object.is(before, after))
@@ -56,6 +59,13 @@ function viewShapeChanged(fields, before, after) {
     const b = (after ?? {});
     return fields.some((field) => !Object.is(a[field], b[field]));
 }
+function keyChanged(key, previous) {
+    return key.some((value, i) => value !== previous[i]);
+}
+const OFF_SWITCH = {
+    fromAttribute: (value) => value !== 'off',
+    toAttribute: (value) => (value ? null : 'off'),
+};
 function warnDropped(message) {
     console.warn(`[apex-grid] ${message}`);
 }
@@ -83,23 +93,33 @@ export class ApexGrid extends EventEmitterBase {
         this.showExport = false;
         this.columnReordering = false;
         this.columnSeparator = true;
+        this.#rowRecycling = _a.defaultRowRecycling;
         this.coordinateHints = false;
         this.columnMenu = true;
+        this.showHeader = true;
+        this.designSystem = true;
+        this.tokens = true;
+        this.#bodyKey = [];
+        this.#bodyRows = [];
+        this.#pageKey = [];
+        this.#pageItems = [];
         this.#viewChangePending = false;
         this.#shapingPending = false;
         this.#pipelineRun = 0;
         this.#pipelineSettled = Promise.resolve();
         this.#settlePipeline = null;
-        this.#autoAriaLabel = null;
+        this.#pinKey = [];
         this.#stateChangedListeners = new Map();
         this.#lastStateJson = null;
+        this.#labelObserver = new MutationObserver(() => this.requestUpdate());
     }
     static get tagName() {
         return GRID_TAG;
     }
     static { this.styles = gridStyles; }
+    static { this.defaultRowRecycling = globalThis.__apexRowKeying !== 'item'; }
     static register() {
-        registerComponent(ApexGrid, ApexVirtualizer, ApexGridRow, ApexGridGroupHeaderRow, ApexGridHeaderRow, ApexFilterRow, ApexGridPaginator, ApexGridToolbar);
+        registerComponent(_a, ApexVirtualizer, ApexGridRow, ApexGridGroupHeaderRow, ApexGridHeaderRow, ApexFilterRow, ApexGridPaginator, ApexGridToolbar);
     }
     createStateController() {
         return new StateController(this);
@@ -125,6 +145,13 @@ export class ApexGrid extends EventEmitterBase {
     localize(key, params, fallback) {
         return resolveLocaleText(this.localeText, key, params, fallback);
     }
+    get rowRecycling() {
+        return this.#rowRecycling;
+    }
+    set rowRecycling(value) {
+        this.#rowRecycling = value ?? _a.defaultRowRecycling;
+    }
+    #rowRecycling;
     get selectedRows() {
         return this.stateController.selection.selectedRows();
     }
@@ -254,26 +281,44 @@ export class ApexGrid extends EventEmitterBase {
         return getDisplayColumns(this.columns);
     }
     get totalItems() {
-        if (this.pagination?.mode === 'remote') {
-            return Math.max(0, this.pagination?.totalItems ?? 0);
+        return this.stateController.pagination.totalItems;
+    }
+    get bodyRows() {
+        const { rowPin, dataVersion } = this.stateController;
+        const key = [this.dataState, dataVersion, rowPin.version, rowPin.enabled];
+        if (keyChanged(key, this.#bodyKey)) {
+            this.#bodyKey = key;
+            this.#bodyRows = rowPin.hasPinnedRows
+                ? this.dataState.filter((row) => !rowPin.isPinned(row))
+                : this.dataState;
         }
-        return this.dataState.length;
+        return this.#bodyRows;
     }
+    #bodyKey;
+    #bodyRows;
     get pageItems() {
-        const rowPin = this.stateController.rowPin;
-        const base = rowPin?.hasPinnedRows
-            ? this.dataState.filter((row) => !rowPin.isPinned(row))
-            : this.dataState;
-        if (!this.stateController.pagination.enabled)
-            return base;
-        if (this.pagination?.mode === 'remote')
-            return base;
-        const { page, pageSize } = this.stateController.pagination;
-        if (!pageSize)
-            return base;
-        const start = page * pageSize;
-        return base.slice(start, start + pageSize);
+        const { pagination, dataVersion } = this.stateController;
+        const key = [
+            this.bodyRows,
+            dataVersion,
+            pagination.enabled,
+            this.pagination?.mode,
+            pagination.page,
+            pagination.pageSize,
+        ];
+        if (keyChanged(key, this.#pageKey)) {
+            this.#pageKey = key;
+            const base = this.bodyRows;
+            const { page, pageSize } = pagination;
+            this.#pageItems =
+                !pagination.enabled || this.pagination?.mode === 'remote' || !pageSize
+                    ? base
+                    : base.slice(page * pageSize, (page + 1) * pageSize);
+        }
+        return this.#pageItems;
     }
+    #pageKey;
+    #pageItems;
     get page() {
         return this.stateController.pagination.page;
     }
@@ -450,35 +495,23 @@ export class ApexGrid extends EventEmitterBase {
         if (entries.length)
             this.filter([...entries]);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const { rowPin, pagination } = this.stateController;
+        const key = [rowPin.version, rowPin.enabled];
+        if (keyChanged(key, this.#pinKey)) {
+            this.#pinKey = key;
+            if (!changed.has(PIPELINE) && !this.#viewStale)
+                pagination.reclamp();
+        }
+    }
+    #pinKey;
     updated() {
         this.#viewChangePending = false;
-        this.setAttribute('role', this.stateController.tree.enabled ? 'treegrid' : 'grid');
-        const pinned = this.stateController.rowPin.pinnedRows;
-        this.setAttribute('aria-rowcount', String(this.headerRowCount + pinned.top.length + this.pageItems.length + pinned.bottom.length));
-        const visibleColumns = this.columns.filter((column) => !column.hidden).length;
-        const extras = (this.stateController.selection.showCheckboxColumn ? 1 : 0) +
-            (this.stateController.expansion.showToggleColumn ? 1 : 0);
-        this.setAttribute('aria-colcount', String(visibleColumns + extras));
-        const selection = this.stateController.selection;
-        if (selection.enabled && selection.mode === 'multiple') {
-            this.setAttribute('aria-multiselectable', 'true');
-        }
-        else {
-            this.removeAttribute('aria-multiselectable');
-        }
         this.#syncBodyTabStop();
-        const currentLabel = this.getAttribute('aria-label');
-        const authorLabeled = this.hasAttribute('aria-labelledby') ||
-            (currentLabel !== null && currentLabel !== this.#autoAriaLabel);
-        if (!authorLabeled) {
-            const label = this.localize('grid.label');
-            if (currentLabel !== label)
-                this.setAttribute('aria-label', label);
-            this.#autoAriaLabel = label;
-        }
+        this.stateController.navigation.reconcileFocus();
         this.#emitStateChangedIfNeeded();
     }
-    #autoAriaLabel;
     #stateChangedListeners;
     #lastStateJson;
     addEventListener(type, listener, options) {
@@ -545,7 +578,17 @@ export class ApexGrid extends EventEmitterBase {
     connectedCallback() {
         super.connectedCallback();
         adoptGridDocumentStyles(this);
+        connectDesignSystem(this);
+        quietResizeObserverLoopNotice();
+        this.#labelObserver.observe(this, {
+            attributeFilter: ['aria-label', 'aria-labelledby', 'aria-describedby'],
+        });
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        disconnectDesignSystem(this);
+    }
+    #labelObserver;
     firstUpdated() {
         if (typeof getComputedStyle === 'function' && getComputedStyle(this).display !== 'grid') {
             console.warn('[apex-grid] Host `display` has been overridden. The grid requires ' +
@@ -745,7 +788,11 @@ export class ApexGrid extends EventEmitterBase {
         const selection = asArray(state.selection, 'selection');
         if (selection) {
             const ctrl = this.stateController.selection;
-            const rows = resolveCounted(selection, 'selection');
+            const resolved = resolveCounted(selection, 'selection');
+            const rows = ctrl.selectable(resolved);
+            if (rows.length < resolved.length) {
+                warn(`selection: ${resolved.length - rows.length} row(s) are not selectable; skipped`);
+            }
             const expected = ctrl.mode === 'single' ? rows.slice(0, 1) : rows;
             if (this.#replaceRows('selection', ctrl.enabled, expected, warn, () => {
                 void ctrl.replaceSelection(expected);
@@ -1053,7 +1100,7 @@ export class ApexGrid extends EventEmitterBase {
         for (const node of event.composedPath()) {
             if (node === this || node === this.scrollContainer)
                 return true;
-            if (node instanceof ApexGrid || node instanceof ApexVirtualizer)
+            if (node instanceof _a || node instanceof ApexVirtualizer)
                 return false;
         }
         return false;
@@ -1074,6 +1121,7 @@ export class ApexGrid extends EventEmitterBase {
             (focused.index < first || focused.index > last)) {
             this.scrollContainer.focus({ preventScroll: true });
         }
+        this.stateController.navigation.reconcileFocus();
     }
     #ownCell(event) {
         if (!this.ownsEvent(event))
@@ -1114,10 +1162,16 @@ export class ApexGrid extends EventEmitterBase {
         }
     }
     bodyFocusHandler(event) {
-        if (this.scrollContainer.isSameNode(event.target)) {
-            this.stateController.navigation.focusActiveCell();
+        const navigation = this.stateController.navigation;
+        navigation.focusEntered(event, this.ownsEvent(event));
+        if (this.scrollContainer.isSameNode(event.target) &&
+            navigation.forwardsBodyFocus) {
+            navigation.focusActiveCell();
         }
     }
+    bodyFocusOutHandler(event) {
+        this.stateController.navigation.focusLeft(event, this.ownsEvent(event));
+    }
     bodyPointerHandler(event) {
         if (this.stateController.modules.size === 0)
             return;
@@ -1143,6 +1197,7 @@ export class ApexGrid extends EventEmitterBase {
             return nothing;
         return html `
       <apex-grid-group-header-row
+        ?data-visually-hidden=${!this.showHeader}
         style=${styleMap(this.DOM.columnSizes)}
         .columns=${this.DOM.displayColumns}
         .pinOffsets=${this.DOM.pinOffsets}
@@ -1153,6 +1208,7 @@ export class ApexGrid extends EventEmitterBase {
     renderHeaderRow() {
         return html `
       <apex-grid-header-row
+      ?data-visually-hidden=${!this.showHeader}
       style=${styleMap(this.DOM.columnSizes)}
       .columns=${this.DOM.displayColumns}
       .pinOffsets=${this.DOM.pinOffsets}
@@ -1163,11 +1219,14 @@ export class ApexGrid extends EventEmitterBase {
     renderBody() {
         return html `
       <apex-virtualizer
+        role="rowgroup"
         .items=${this.pageItems}
         .renderItem=${this.DOM.rowRenderer}
+        .rowMode=${this.rowRecycling ? 'slot' : 'item'}
         @click=${this.bodyClickHandler}
         @keydown=${this.bodyKeydownHandler}
         @focusin=${this.bodyFocusHandler}
+        @focusout=${this.bodyFocusOutHandler}
         @rangeChanged=${this.bodyRangeChanged}
         @pointerdown=${this.bodyPointerHandler}
         @pointermove=${this.bodyPointerHandler}
@@ -1175,16 +1234,13 @@ export class ApexGrid extends EventEmitterBase {
       ></apex-virtualizer>
     `;
     }
-    get headerRowCount() {
-        return this.columnGroupDepth + 1 + (this.columns.some((column) => column.filter) ? 1 : 0);
-    }
     renderPinnedTop() {
         const rowPin = this.stateController.rowPin;
         const rows = rowPin.pinnedRows.top;
         if (rows.length === 0)
             return nothing;
         return html `<div part="pinned-rows pinned-top">
-      ${rows.map((data, i) => this.DOM.pinnedRowRenderer(data, i, this.headerRowCount))}
+      ${rows.map((data, i) => this.DOM.pinnedRowRenderer(data, i, this.DOM.headerRowCount))}
     </div>`;
     }
     renderPinnedBottom() {
@@ -1192,13 +1248,13 @@ export class ApexGrid extends EventEmitterBase {
         const rows = rowPin.pinnedRows.bottom;
         if (rows.length === 0)
             return nothing;
-        const offset = this.headerRowCount + rowPin.pinnedRows.top.length + this.pageItems.length;
+        const offset = this.DOM.headerRowCount + rowPin.pinnedRows.top.length + this.pageItems.length;
         return html `<div part="pinned-rows pinned-bottom">
       ${rows.map((data, i) => this.DOM.pinnedRowRenderer(data, i, offset))}
     </div>`;
     }
     renderFilterRow() {
-        return this.columns.some((column) => column.filter)
+        return this.showHeader && this.columns.some((column) => column.filter)
             ? html `<apex-filter-row></apex-filter-row>`
             : nothing;
     }
@@ -1207,22 +1263,27 @@ export class ApexGrid extends EventEmitterBase {
             return nothing;
         }
         return html `<apex-grid-toolbar
+      part="toolbar-host"
+      exportparts="toolbar,toolbar-search,search-field,search-icon,search-input,toolbar-actions,toolbar-action,export,export-trigger,export-icon,export-caret,export-menu,export-menu-item"
       .value=${this.quickFilter}
       .showQuickFilter=${this.showQuickFilter}
       .showExport=${this.showExport}
       @apex-quick-filter=${(event) => {
             event.stopPropagation();
             this.setQuickFilter(event.detail);
+            if (this.quickFilter !== event.detail)
+                event.preventDefault();
         }}
     ></apex-grid-toolbar>`;
     }
     renderPaginator() {
         if (!this.stateController.pagination.enabled)
             return nothing;
-        const options = this.pagination?.pageSizeOptions && this.pagination.pageSizeOptions.length > 0
-            ? this.pagination.pageSizeOptions
-            : [10, 25, 50, 100];
-        return html `<apex-grid-paginator .pageSizeOptions=${options}></apex-grid-paginator>`;
+        return html `<apex-grid-paginator
+      part="paginator-host"
+      exportparts="paginator,paginator-size,paginator-info,paginator-controls,paginator-page,paginator-button,paginator-first,paginator-prev,paginator-next,paginator-last"
+      .pageSizeOptions=${this.pagination?.pageSizeOptions ?? DEFAULT_PAGINATION.pageSizeOptions}
+    ></apex-grid-paginator>`;
     }
     renderLiveRegion() {
         return html `<div
@@ -1235,6 +1296,22 @@ export class ApexGrid extends EventEmitterBase {
       ${this.stateController.announcement}
     </div>`;
     }
+    renderColumnDragGhost() {
+        const state = this.stateController.reordering.state;
+        if (!state)
+            return nothing;
+        return html `<div
+      part="drag-ghost"
+      style=${styleMap({
+            left: `${state.ghostX}px`,
+            top: `${state.ghostY}px`,
+            width: `${state.ghostWidth}px`,
+            height: `${state.ghostHeight}px`,
+        })}
+    >
+      ${state.label}
+    </div>`;
+    }
     renderRowDragGhost() {
         const ghost = this.stateController.rowReorder.ghost;
         if (!ghost)
@@ -1264,18 +1341,45 @@ export class ApexGrid extends EventEmitterBase {
           >`)}
     </div>`;
     }
+    #refs(attr) {
+        const root = this.getRootNode();
+        const found = (this.getAttribute(attr) ?? '')
+            .split(/\s+/)
+            .flatMap((id) => (id && root.getElementById?.(id)) || []);
+        return found.length ? found : null;
+    }
+    renderTable() {
+        const state = this.stateController;
+        const { top, bottom } = state.rowPin.pinnedRows;
+        const selection = state.selection;
+        const labelledBy = this.#refs('aria-labelledby');
+        const describedBy = this.#refs('aria-describedby');
+        const copy = (refs) => !('ariaLabelledByElements' in Element.prototype) &&
+            refs?.map((el) => el.textContent?.trim()).join(' ');
+        return html `<div
+      part="table"
+      role=${state.hierarchical ? 'treegrid' : 'grid'}
+      aria-rowcount=${this.DOM.headerRowCount + top.length + this.pageItems.length + bottom.length}
+      aria-colcount=${state.colCount}
+      aria-multiselectable=${selection.enabled && selection.mode === 'multiple' ? 'true' : nothing}
+      aria-label=${copy(labelledBy) || this.getAttribute('aria-label') || this.localize('grid.label')}
+      aria-description=${copy(describedBy) || nothing}
+      .ariaLabelledByElements=${labelledBy}
+      .ariaDescribedByElements=${describedBy}
+    >
+      ${this.renderGroupHeaderRow()} ${this.renderHeaderRow()} ${this.renderPinnedTop()}
+      ${this.renderBody()} ${this.renderPinnedBottom()}
+    </div>`;
+    }
     render() {
         return html `
       ${this.stateController.resizing.renderIndicator()}
       ${this.renderToolbar()}
-      ${this.renderGroupHeaderRow()}
-      ${this.renderHeaderRow()}
+      ${this.renderTable()}
       ${this.renderFilterRow()}
-      ${this.renderPinnedTop()}
-      ${this.renderBody()}
-      ${this.renderPinnedBottom()}
       ${this.renderPaginator()}
       ${this.renderLiveRegion()}
+      ${this.renderColumnDragGhost()}
       ${this.renderRowDragGhost()}
     `;
     }
@@ -1283,6 +1387,7 @@ export class ApexGrid extends EventEmitterBase {
         this.stateController.setAnnouncement(message);
     }
 }
+_a = ApexGrid;
 __decorate([
     query(ApexVirtualizer.tagName)
 ], ApexGrid.prototype, "scrollContainer", void 0);
@@ -1343,6 +1448,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'column-separator', reflect: true })
 ], ApexGrid.prototype, "columnSeparator", void 0);
+__decorate([
+    property({ attribute: 'row-recycling', converter: (value) => value !== 'false' })
+], ApexGrid.prototype, "rowRecycling", null);
 __decorate([
     property({ attribute: false })
 ], ApexGrid.prototype, "editing", void 0);
@@ -1364,6 +1472,15 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], ApexGrid.prototype, "columnMenu", void 0);
+__decorate([
+    property({ attribute: 'show-header', converter: (value) => value !== 'false' })
+], ApexGrid.prototype, "showHeader", void 0);
+__decorate([
+    property({ attribute: 'design-system', reflect: true, converter: OFF_SWITCH })
+], ApexGrid.prototype, "designSystem", void 0);
+__decorate([
+    property({ attribute: 'tokens', reflect: true, converter: OFF_SWITCH })
+], ApexGrid.prototype, "tokens", void 0);
 __decorate([
     property({ attribute: false })
 ], ApexGrid.prototype, "columnGroups", void 0);
@@ -1403,4 +1520,7 @@ __decorate([
 __decorate([
     eventOptions({ capture: true })
 ], ApexGrid.prototype, "bodyClickHandler", null);
+__decorate([
+    eventOptions({ capture: true })
+], ApexGrid.prototype, "bodyFocusOutHandler", null);
 //# sourceMappingURL=grid.js.map