apex-grid 1.1.0 → 3.0.0

package/controllers/data-operation.d.ts

@@ -1,17 +1,31 @@
 import type { ReactiveController } from 'lit';
 import type { GridHost } from '../internal/types.js';
 import FilterDataOperation from '../operations/filter.js';
+import QuickFilterDataOperation from '../operations/quick-filter.js';
 import SortDataOperation from '../operations/sort.js';
 import type { StateController } from './state.js';
 export declare class DataOperationsController<T extends object> implements ReactiveController {
     protected host: GridHost<T>;
     protected sorting: SortDataOperation<T>;
     protected filtering: FilterDataOperation<T>;
+    protected quickFiltering: QuickFilterDataOperation<T>;
     constructor(host: GridHost<T>);
     hostConnected(): void;
     protected get hasCustomSort(): boolean;
     protected get hasCustomFilter(): boolean;
+    protected get hasCustomQuickFilter(): boolean;
     protected get customFilter(): import("../index.js").DataPipelineHook<T>;
     protected get customSort(): import("../index.js").DataPipelineHook<T>;
+    protected get customQuickFilter(): import("../index.js").DataPipelineHook<T>;
+    /**
+     * Applies the quick-filter (global search), column-filter, and sort steps of the
+     * data pipeline.
+     *
+     * @remarks
+     * The returned dataset is the full post-filter, post-sort view. Pagination is
+     * intentionally not applied here so callers can derive `totalItems` and the
+     * paginator's `pageCount` from a stable value. The grid slices the page for
+     * the virtualizer at render time.
+     */
     apply(data: T[], state: StateController<T>): Promise<T[]>;
 }

package/controllers/data-operation.js

@@ -1,11 +1,13 @@
 import { isDefined } from '../internal/is-defined.js';
 import FilterDataOperation from '../operations/filter.js';
+import QuickFilterDataOperation from '../operations/quick-filter.js';
 import SortDataOperation from '../operations/sort.js';
 export class DataOperationsController {
     constructor(host) {
         this.host = host;
         this.sorting = new SortDataOperation();
         this.filtering = new FilterDataOperation();
+        this.quickFiltering = new QuickFilterDataOperation();
         this.host.addController(this);
     }
     hostConnected() { }
@@ -15,21 +17,36 @@ export class DataOperationsController {
     get hasCustomFilter() {
         return isDefined(this.host.dataPipelineConfiguration?.filter);
     }
+    get hasCustomQuickFilter() {
+        return isDefined(this.host.dataPipelineConfiguration?.quickFilter);
+    }
     get customFilter() {
         return this.host.dataPipelineConfiguration.filter;
     }
     get customSort() {
         return this.host.dataPipelineConfiguration.sort;
     }
+    get customQuickFilter() {
+        return this.host.dataPipelineConfiguration.quickFilter;
+    }
     async apply(data, state) {
         const { filtering, sorting } = state;
         let transformed;
+        const quickFilterTerm = (this.host.quickFilter ?? '').trim();
+        transformed = this.hasCustomQuickFilter
+            ? await this.customQuickFilter({ data, grid: this.host, type: 'quickFilter' })
+            : quickFilterTerm
+                ? this.quickFiltering.apply(data, quickFilterTerm, this.host.columns)
+                : data;
         transformed = this.hasCustomFilter
-            ? await this.customFilter({ data, grid: this.host, type: 'filter' })
-            : this.filtering.apply(data, filtering.state);
+            ? await this.customFilter({ data: transformed, grid: this.host, type: 'filter' })
+            : this.filtering.apply(transformed, filtering.state);
         transformed = this.hasCustomSort
             ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })
             : this.sorting.apply(transformed, sorting.state);
+        if (state.tree.enabled) {
+            transformed = state.tree.process(transformed);
+        }
         return transformed;
     }
 }

package/controllers/data-operation.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-operation.js","sourceRoot":"","sources":["../../src/controllers/data-operation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAGtD,MAAM,OAAO,wBAAwB;IAInC,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAH7B,YAAO,GAAG,IAAI,iBAAiB,EAAK,CAAC;QACrC,cAAS,GAAG,IAAI,mBAAmB,EAAK,CAAC;QAGjD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAEzB,IAAc,aAAa;QACzB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAc,eAAe;QAC3B,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC;IAED,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,MAAO,CAAC;IACtD,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,IAAK,CAAC;IACpD,CAAC;IAEM,KAAK,CAAC,KAAK,CAAC,IAAS,EAAE,KAAyB;QACrD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QACrC,IAAI,WAAgB,CAAC;QAErB,WAAW,GAAG,IAAI,CAAC,eAAe;YAChC,CAAC,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YACpE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhD,WAAW,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC7E,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,WAAW,CAAC;IACrB,CAAC;CACF","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { isDefined } from '../internal/is-defined.js';\nimport type { GridHost } from '../internal/types.js';\nimport FilterDataOperation from '../operations/filter.js';\nimport SortDataOperation from '../operations/sort.js';\nimport type { StateController } from './state.js';\n\nexport class DataOperationsController<T extends object> implements ReactiveController {\n  protected sorting = new SortDataOperation<T>();\n  protected filtering = new FilterDataOperation<T>();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  protected get hasCustomSort() {\n    return isDefined(this.host.dataPipelineConfiguration?.sort);\n  }\n\n  protected get hasCustomFilter() {\n    return isDefined(this.host.dataPipelineConfiguration?.filter);\n  }\n\n  protected get customFilter() {\n    return this.host.dataPipelineConfiguration!.filter!;\n  }\n\n  protected get customSort() {\n    return this.host.dataPipelineConfiguration!.sort!;\n  }\n\n  public async apply(data: T[], state: StateController<T>) {\n    const { filtering, sorting } = state;\n    let transformed: T[];\n\n    transformed = this.hasCustomFilter\n      ? await this.customFilter({ data, grid: this.host, type: 'filter' })\n      : this.filtering.apply(data, filtering.state);\n\n    transformed = this.hasCustomSort\n      ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })\n      : this.sorting.apply(transformed, sorting.state);\n\n    return transformed;\n  }\n}\n"]}
+{"version":3,"file":"data-operation.js","sourceRoot":"","sources":["../../src/controllers/data-operation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { isDefined } from '../internal/is-defined.js';\nimport type { GridHost } from '../internal/types.js';\nimport FilterDataOperation from '../operations/filter.js';\nimport QuickFilterDataOperation from '../operations/quick-filter.js';\nimport SortDataOperation from '../operations/sort.js';\nimport type { StateController } from './state.js';\n\nexport class DataOperationsController<T extends object> implements ReactiveController {\n  protected sorting = new SortDataOperation<T>();\n  protected filtering = new FilterDataOperation<T>();\n  protected quickFiltering = new QuickFilterDataOperation<T>();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  protected get hasCustomSort() {\n    return isDefined(this.host.dataPipelineConfiguration?.sort);\n  }\n\n  protected get hasCustomFilter() {\n    return isDefined(this.host.dataPipelineConfiguration?.filter);\n  }\n\n  protected get hasCustomQuickFilter() {\n    return isDefined(this.host.dataPipelineConfiguration?.quickFilter);\n  }\n\n  protected get customFilter() {\n    return this.host.dataPipelineConfiguration!.filter!;\n  }\n\n  protected get customSort() {\n    return this.host.dataPipelineConfiguration!.sort!;\n  }\n\n  protected get customQuickFilter() {\n    return this.host.dataPipelineConfiguration!.quickFilter!;\n  }\n\n  /**\n   * Applies the quick-filter (global search), column-filter, and sort steps of the\n   * data pipeline.\n   *\n   * @remarks\n   * The returned dataset is the full post-filter, post-sort view. Pagination is\n   * intentionally not applied here so callers can derive `totalItems` and the\n   * paginator's `pageCount` from a stable value. The grid slices the page for\n   * the virtualizer at render time.\n   */\n  public async apply(data: T[], state: StateController<T>) {\n    const { filtering, sorting } = state;\n    let transformed: T[];\n\n    const quickFilterTerm = (this.host.quickFilter ?? '').trim();\n    transformed = this.hasCustomQuickFilter\n      ? await this.customQuickFilter({ data, grid: this.host, type: 'quickFilter' })\n      : quickFilterTerm\n        ? this.quickFiltering.apply(data, quickFilterTerm, this.host.columns)\n        : data;\n\n    transformed = this.hasCustomFilter\n      ? await this.customFilter({ data: transformed, grid: this.host, type: 'filter' })\n      : this.filtering.apply(transformed, filtering.state);\n\n    transformed = this.hasCustomSort\n      ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })\n      : this.sorting.apply(transformed, sorting.state);\n\n    // Tree mode flattens the post-sort rows according to the current\n    // expansion set. Disabled is a no-op pass-through, so flat tables keep\n    // their existing behaviour untouched.\n    if (state.tree.enabled) {\n      transformed = state.tree.process(transformed);\n    }\n\n    return transformed;\n  }\n}\n"]}

package/controllers/dom.d.ts

@@ -1,7 +1,7 @@
 import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';
 import { type ReactiveController } from 'lit';
 import { type StyleInfo } from 'lit/directives/style-map.js';
-import type { GridHost } from '../internal/types.js';
+import type { ColumnConfiguration, GridHost } from '../internal/types.js';
 import type { StateController } from './state.js';
 export declare class GridDOMController<T extends object> implements ReactiveController {
     #private;
@@ -9,11 +9,47 @@ export declare class GridDOMController<T extends object> implements ReactiveCont
     protected state: StateController<T>;
     constructor(host: GridHost<T>, state: StateController<T>);
     get container(): import("../components/virtualizer.js").default;
+    /**
+     * Visual render order: `'start'`-pinned columns first, then unpinned, then
+     * `'end'`-pinned. The user-supplied `columns` array is never mutated.
+     */
+    get displayColumns(): Array<ColumnConfiguration<T>>;
     columnSizes: StyleInfo;
+    /**
+     * The resolved inline-start (for `'start'` pin) or inline-end (for `'end'` pin)
+     * pixel offset per pinned column key. Populated after layout by
+     * {@link recomputePinOffsets}.
+     */
+    pinOffsets: Map<keyof T, number>;
     rowRenderer: RenderItemFunction<T>;
     hostConnected(): Promise<void>;
     hostUpdate(): void;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    /**
+     * Writes the grid host's `clientWidth` into `--apex-host-width`. Used by the
+     * toolbar and paginator to clamp their width to the visible viewport so
+     * horizontal scrolling doesn't drag them off-screen.
+     */
+    recomputeHostWidth(): void;
     setScrollOffset(): void;
     protected setGridColumnSizes(): void;
     getActiveRowStyles(index: number): StyleInfo;
+    /**
+     * Measures the rendered widths of pinned header cells and writes cumulative
+     * inline-start / inline-end pixel offsets into {@link pinOffsets}. Called after
+     * each grid update and whenever a header cell is resized.
+     */
+    recomputePinOffsets(): void;
+    protected observeHeaderCells(): void;
+    /**
+     * Writes the cumulative height of the sticky top rows into CSS custom
+     * properties used by the header/filter rows for their `inset-block-start`
+     * offsets. The toolbar is always at `top: 0`; the header sits below it
+     * (`--apex-row-top-header`) and the filter sits below the header
+     * (`--apex-row-top-filter`). Writes are skipped when the values haven't
+     * changed so the ResizeObserver feedback loop terminates.
+     */
+    recomputeStickyRowOffsets(): void;
+    protected observeStickyRows(): void;
 }

package/controllers/dom.js

@@ -1,16 +1,28 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
-import { registerGridIcons } from '../internal/icon-registry.js';
-import { applyColumnWidths } from '../internal/utils.js';
+import { applyColumnWidths, getDisplayColumns } from '../internal/utils.js';
 export class GridDOMController {
     constructor(host, state) {
         this.host = host;
         this.state = state;
         this.#initialSize = () => {
-            setTimeout(() => this.setScrollOffset());
+            setTimeout(() => {
+                this.setScrollOffset();
+                this.recomputePinOffsets();
+                this.recomputeStickyRowOffsets();
+            });
         };
+        this.#resizeObserver = null;
+        this.#observedHeaders = new Set();
+        this.#stickyRowObserver = null;
+        this.#observedStickyRows = new Set();
         this.columnSizes = {};
+        this.pinOffsets = new Map();
         this.rowRenderer = (data, index) => {
+            const editingCell = this.state.editing.activeCell;
+            const editingKey = editingCell?.rowIndex === index ? editingCell.columnKey : null;
+            const hasFilter = this.host.columns.some((column) => column.filter);
+            const ariaRowOffset = hasFilter ? 2 : 1;
             return html `
       <apex-grid-row
         part="row"
@@ -18,37 +30,192 @@ export class GridDOMController {
         .index=${index}
         .activeNode=${this.state.active}
         .data=${data}
-        .columns=${this.host.columns}
+        .columns=${this.displayColumns}
+        .pinOffsets=${this.pinOffsets}
+        .editingKey=${editingKey}
+        .ariaRowOffset=${ariaRowOffset}
       >
       </apex-grid-row>
     `;
         };
+        this.#lastHeaderTop = -1;
+        this.#lastFilterTop = -1;
+        this.#lastHostWidth = -1;
+        this.#hostWidthObserver = null;
         this.host.addController(this);
     }
     #initialSize;
+    #resizeObserver;
+    #observedHeaders;
+    #stickyRowObserver;
+    #observedStickyRows;
     get container() {
         return this.host.scrollContainer;
     }
+    get displayColumns() {
+        return getDisplayColumns(this.host.columns);
+    }
     async hostConnected() {
-        registerGridIcons();
         this.setGridColumnSizes();
         await this.host.updateComplete;
-        this.container.addEventListener('visibilityChanged', this.#initialSize, { once: true });
+        this.#initialSize();
+        if (typeof ResizeObserver !== 'undefined' && !this.#hostWidthObserver) {
+            this.#hostWidthObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.recomputeHostWidth());
+            });
+            this.#hostWidthObserver.observe(this.host);
+        }
+        this.recomputeHostWidth();
     }
     hostUpdate() {
         this.setScrollOffset();
         this.setGridColumnSizes();
     }
+    hostUpdated() {
+        this.recomputePinOffsets();
+        this.observeHeaderCells();
+        this.recomputeStickyRowOffsets();
+        this.observeStickyRows();
+    }
+    hostDisconnected() {
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = null;
+        this.#observedHeaders.clear();
+        this.#stickyRowObserver?.disconnect();
+        this.#stickyRowObserver = null;
+        this.#observedStickyRows.clear();
+        this.#hostWidthObserver?.disconnect();
+        this.#hostWidthObserver = null;
+    }
+    recomputeHostWidth() {
+        const host = this.host;
+        const width = host.clientWidth;
+        if (width === this.#lastHostWidth)
+            return;
+        host.style.setProperty('--apex-host-width', `${width}px`);
+        this.#lastHostWidth = width;
+    }
     setScrollOffset() {
-        const size = this.container ? this.container.offsetWidth - this.container.clientWidth : 0;
-        this.host.style.setProperty('--scrollbar-offset', `${size}px`);
+        this.host.style.setProperty('--scrollbar-offset', '0px');
     }
     setGridColumnSizes() {
-        this.columnSizes = applyColumnWidths(this.host.columns);
+        this.columnSizes = applyColumnWidths(this.displayColumns, {
+            showSelectionColumn: this.state.selection.showCheckboxColumn,
+            showExpansionColumn: this.state.expansion.showToggleColumn,
+        });
     }
     getActiveRowStyles(index) {
         const { row } = this.state.active;
         return row === index ? { 'z-index': '3' } : {};
     }
+    recomputePinOffsets() {
+        const headerRow = this.host.headerRow;
+        if (!headerRow?.headers)
+            return;
+        const next = new Map();
+        const headersByKey = new Map();
+        for (const header of headerRow.headers) {
+            headersByKey.set(header.column.key, header.getBoundingClientRect());
+        }
+        let leftAccum = 0;
+        for (const column of this.displayColumns) {
+            if (column.hidden)
+                continue;
+            if (column.pinned !== 'start')
+                break;
+            next.set(column.key, leftAccum);
+            const rect = headersByKey.get(column.key);
+            leftAccum += rect?.width ?? 0;
+        }
+        let rightAccum = 0;
+        for (let i = this.displayColumns.length - 1; i >= 0; i--) {
+            const column = this.displayColumns[i];
+            if (column.hidden)
+                continue;
+            if (column.pinned !== 'end')
+                break;
+            next.set(column.key, rightAccum);
+            const rect = headersByKey.get(column.key);
+            rightAccum += rect?.width ?? 0;
+        }
+        if (!offsetsEqual(this.pinOffsets, next)) {
+            this.pinOffsets = next;
+            this.host.requestUpdate();
+        }
+    }
+    observeHeaderCells() {
+        const headerRow = this.host.headerRow;
+        if (!headerRow?.headers)
+            return;
+        if (!this.#resizeObserver) {
+            this.#resizeObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.recomputePinOffsets());
+            });
+        }
+        const next = new Set(headerRow.headers);
+        for (const element of this.#observedHeaders) {
+            if (!next.has(element))
+                this.#resizeObserver.unobserve(element);
+        }
+        for (const element of next) {
+            if (!this.#observedHeaders.has(element))
+                this.#resizeObserver.observe(element);
+        }
+        this.#observedHeaders = next;
+    }
+    #lastHeaderTop;
+    #lastFilterTop;
+    #lastHostWidth;
+    #hostWidthObserver;
+    recomputeStickyRowOffsets() {
+        const root = this.host.shadowRoot;
+        if (!root)
+            return;
+        const toolbar = root.querySelector('apex-grid-toolbar');
+        const header = root.querySelector('apex-grid-header-row');
+        const toolbarH = toolbar?.offsetHeight ?? 0;
+        const headerH = header?.offsetHeight ?? 0;
+        const headerTop = toolbarH;
+        const filterTop = toolbarH + headerH;
+        if (headerTop !== this.#lastHeaderTop) {
+            this.host.style.setProperty('--apex-row-top-header', `${headerTop}px`);
+            this.#lastHeaderTop = headerTop;
+        }
+        if (filterTop !== this.#lastFilterTop) {
+            this.host.style.setProperty('--apex-row-top-filter', `${filterTop}px`);
+            this.#lastFilterTop = filterTop;
+        }
+    }
+    observeStickyRows() {
+        const root = this.host.shadowRoot;
+        if (!root)
+            return;
+        const toolbar = root.querySelector('apex-grid-toolbar');
+        const header = root.querySelector('apex-grid-header-row');
+        if (!this.#stickyRowObserver) {
+            this.#stickyRowObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.recomputeStickyRowOffsets());
+            });
+        }
+        const next = new Set([toolbar, header].filter((el) => !!el));
+        for (const element of this.#observedStickyRows) {
+            if (!next.has(element))
+                this.#stickyRowObserver.unobserve(element);
+        }
+        for (const element of next) {
+            if (!this.#observedStickyRows.has(element))
+                this.#stickyRowObserver.observe(element);
+        }
+        this.#observedStickyRows = next;
+    }
+}
+function offsetsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const [key, value] of a) {
+        if (b.get(key) !== value)
+            return false;
+    }
+    return true;
 }
 //# sourceMappingURL=dom.js.map

package/controllers/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/controllers/dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA2B,MAAM,KAAK,CAAC;AACpD,OAAO,EAAkB,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,OAAO,iBAAiB;IAC5B,YACY,IAAiB,EACjB,KAAyB;QADzB,SAAI,GAAJ,IAAI,CAAa;QACjB,UAAK,GAAL,KAAK,CAAoB;QAKrC,iBAAY,GAAG,GAAG,EAAE;YAClB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC;QAOK,gBAAW,GAAc,EAAE,CAAC;QAE5B,gBAAW,GAA0B,CAAC,IAAO,EAAE,KAAa,EAAE,EAAE;YACrE,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;iBACnE,KAAK;sBACA,IAAI,CAAC,KAAK,CAAC,MAAM;gBACvB,IAAI;mBACD,IAAI,CAAC,IAAI,CAAC,OAAO;;;KAG/B,CAAC;QACJ,CAAC,CAAC;QA1BA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,YAAY,CAEV;IAEF,IAAW,SAAS;QAElB,OAAO,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACnC,CAAC;IAkBM,KAAK,CAAC,aAAa;QACxB,iBAAiB,EAAE,CAAC;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAG1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,eAAe;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1F,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;IACjE,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC;IAEM,kBAAkB,CAAC,KAAa;QACrC,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAClC,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport { html, type ReactiveController } from 'lit';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { registerGridIcons } from '../internal/icon-registry.js';\nimport type { GridHost } from '../internal/types.js';\nimport { applyColumnWidths } from '../internal/utils.js';\nimport type { StateController } from './state.js';\n\nexport class GridDOMController<T extends object> implements ReactiveController {\n  constructor(\n    protected host: GridHost<T>,\n    protected state: StateController<T>\n  ) {\n    this.host.addController(this);\n  }\n\n  #initialSize = () => {\n    setTimeout(() => this.setScrollOffset());\n  };\n\n  public get container() {\n    // @ts-expect-error: protected member access\n    return this.host.scrollContainer;\n  }\n\n  public columnSizes: StyleInfo = {};\n\n  public rowRenderer: RenderItemFunction<T> = (data: T, index: number) => {\n    return html`\n      <apex-grid-row\n        part=\"row\"\n        style=${styleMap({ ...this.columnSizes, ...this.getActiveRowStyles(index) })}\n        .index=${index}\n        .activeNode=${this.state.active}\n        .data=${data}\n        .columns=${this.host.columns}\n      >\n      </apex-grid-row>\n    `;\n  };\n\n  public async hostConnected() {\n    registerGridIcons();\n    this.setGridColumnSizes();\n    // Wait for the initial paint of the virtualizer and recalculate the scrollbar offset\n    // for the next one\n    await this.host.updateComplete;\n    this.container.addEventListener('visibilityChanged', this.#initialSize, { once: true });\n  }\n\n  public hostUpdate(): void {\n    this.setScrollOffset();\n    this.setGridColumnSizes();\n  }\n\n  public setScrollOffset() {\n    const size = this.container ? this.container.offsetWidth - this.container.clientWidth : 0;\n    this.host.style.setProperty('--scrollbar-offset', `${size}px`);\n  }\n\n  protected setGridColumnSizes() {\n    this.columnSizes = applyColumnWidths(this.host.columns);\n  }\n\n  public getActiveRowStyles(index: number): StyleInfo {\n    const { row } = this.state.active;\n    return row === index ? { 'z-index': '3' } : {};\n  }\n}\n"]}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/controllers/dom.ts"],"names":[],"mappings":"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","sourcesContent":["import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport { html, type ReactiveController } from 'lit';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\nimport { applyColumnWidths, getDisplayColumns } from '../internal/utils.js';\nimport type { StateController } from './state.js';\n\nexport class GridDOMController<T extends object> implements ReactiveController {\n  constructor(\n    protected host: GridHost<T>,\n    protected state: StateController<T>\n  ) {\n    this.host.addController(this);\n  }\n\n  #initialSize = () => {\n    setTimeout(() => {\n      this.setScrollOffset();\n      this.recomputePinOffsets();\n      this.recomputeStickyRowOffsets();\n    });\n  };\n\n  #resizeObserver: ResizeObserver | null = null;\n  #observedHeaders = new Set<Element>();\n  #stickyRowObserver: ResizeObserver | null = null;\n  #observedStickyRows = new Set<Element>();\n\n  public get container() {\n    // @ts-expect-error: protected member access\n    return this.host.scrollContainer;\n  }\n\n  /**\n   * Visual render order: `'start'`-pinned columns first, then unpinned, then\n   * `'end'`-pinned. The user-supplied `columns` array is never mutated.\n   */\n  public get displayColumns(): Array<ColumnConfiguration<T>> {\n    return getDisplayColumns(this.host.columns);\n  }\n\n  public columnSizes: StyleInfo = {};\n\n  /**\n   * The resolved inline-start (for `'start'` pin) or inline-end (for `'end'` pin)\n   * pixel offset per pinned column key. Populated after layout by\n   * {@link recomputePinOffsets}.\n   */\n  public pinOffsets = new Map<Keys<T>, number>();\n\n  public rowRenderer: RenderItemFunction<T> = (data: T, index: number) => {\n    const editingCell = this.state.editing.activeCell;\n    const editingKey = editingCell?.rowIndex === index ? editingCell.columnKey : null;\n    // aria-rowindex offset: header row is always row 1; filter row (when\n    // any column has a filter configured) sits at row 2; body rows start\n    // immediately after.\n    const hasFilter = this.host.columns.some((column) => column.filter);\n    const ariaRowOffset = hasFilter ? 2 : 1;\n    return html`\n      <apex-grid-row\n        part=\"row\"\n        style=${styleMap({ ...this.columnSizes, ...this.getActiveRowStyles(index) })}\n        .index=${index}\n        .activeNode=${this.state.active}\n        .data=${data}\n        .columns=${this.displayColumns}\n        .pinOffsets=${this.pinOffsets}\n        .editingKey=${editingKey}\n        .ariaRowOffset=${ariaRowOffset}\n      >\n      </apex-grid-row>\n    `;\n  };\n\n  public async hostConnected() {\n    this.setGridColumnSizes();\n    // Wait for the initial paint of the virtualizer and recalculate the scrollbar offset\n    // for the next one\n    await this.host.updateComplete;\n    this.#initialSize();\n    if (typeof ResizeObserver !== 'undefined' && !this.#hostWidthObserver) {\n      this.#hostWidthObserver = new ResizeObserver(() => {\n        requestAnimationFrame(() => this.recomputeHostWidth());\n      });\n      this.#hostWidthObserver.observe(this.host as HTMLElement);\n    }\n    this.recomputeHostWidth();\n  }\n\n  public hostUpdate(): void {\n    this.setScrollOffset();\n    this.setGridColumnSizes();\n  }\n\n  public hostUpdated(): void {\n    this.recomputePinOffsets();\n    this.observeHeaderCells();\n    this.recomputeStickyRowOffsets();\n    this.observeStickyRows();\n  }\n\n  public hostDisconnected(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n    this.#observedHeaders.clear();\n    this.#stickyRowObserver?.disconnect();\n    this.#stickyRowObserver = null;\n    this.#observedStickyRows.clear();\n    this.#hostWidthObserver?.disconnect();\n    this.#hostWidthObserver = null;\n  }\n\n  /**\n   * Writes the grid host's `clientWidth` into `--apex-host-width`. Used by the\n   * toolbar and paginator to clamp their width to the visible viewport so\n   * horizontal scrolling doesn't drag them off-screen.\n   */\n  public recomputeHostWidth(): void {\n    const host = this.host as HTMLElement;\n    const width = host.clientWidth;\n    if (width === this.#lastHostWidth) return;\n    host.style.setProperty('--apex-host-width', `${width}px`);\n    this.#lastHostWidth = width;\n  }\n\n  public setScrollOffset() {\n    // The grid host now owns vertical scrolling, so the historic per-row\n    // padding-inline-end compensation is no longer needed. Keep the CSS var\n    // set to `0` for forward compatibility with consumer themes that read it.\n    this.host.style.setProperty('--scrollbar-offset', '0px');\n  }\n\n  protected setGridColumnSizes() {\n    this.columnSizes = applyColumnWidths(this.displayColumns, {\n      showSelectionColumn: this.state.selection.showCheckboxColumn,\n      showExpansionColumn: this.state.expansion.showToggleColumn,\n    });\n  }\n\n  public getActiveRowStyles(index: number): StyleInfo {\n    const { row } = this.state.active;\n    return row === index ? { 'z-index': '3' } : {};\n  }\n\n  /**\n   * Measures the rendered widths of pinned header cells and writes cumulative\n   * inline-start / inline-end pixel offsets into {@link pinOffsets}. Called after\n   * each grid update and whenever a header cell is resized.\n   */\n  public recomputePinOffsets(): void {\n    // @ts-expect-error - protected member access\n    const headerRow = this.host.headerRow as\n      | {\n          headers?: Array<{\n            column: ColumnConfiguration<T>;\n            getBoundingClientRect: () => DOMRect;\n          }>;\n        }\n      | undefined;\n    if (!headerRow?.headers) return;\n\n    const next = new Map<Keys<T>, number>();\n    const headersByKey = new Map<Keys<T>, DOMRect>();\n    for (const header of headerRow.headers) {\n      headersByKey.set(header.column.key as Keys<T>, header.getBoundingClientRect());\n    }\n\n    let leftAccum = 0;\n    for (const column of this.displayColumns) {\n      if (column.hidden) continue;\n      if (column.pinned !== 'start') break;\n      next.set(column.key as Keys<T>, leftAccum);\n      const rect = headersByKey.get(column.key as Keys<T>);\n      leftAccum += rect?.width ?? 0;\n    }\n\n    let rightAccum = 0;\n    for (let i = this.displayColumns.length - 1; i >= 0; i--) {\n      const column = this.displayColumns[i];\n      if (column.hidden) continue;\n      if (column.pinned !== 'end') break;\n      next.set(column.key as Keys<T>, rightAccum);\n      const rect = headersByKey.get(column.key as Keys<T>);\n      rightAccum += rect?.width ?? 0;\n    }\n\n    if (!offsetsEqual(this.pinOffsets, next)) {\n      this.pinOffsets = next;\n      this.host.requestUpdate();\n    }\n  }\n\n  protected observeHeaderCells(): void {\n    // @ts-expect-error - protected member access\n    const headerRow = this.host.headerRow as { headers?: Array<Element> } | undefined;\n    if (!headerRow?.headers) return;\n\n    if (!this.#resizeObserver) {\n      this.#resizeObserver = new ResizeObserver(() => {\n        // Defer to a new frame so any layout writes can't synchronously feed back\n        // into this observer (which makes the browser raise the benign\n        // \"ResizeObserver loop completed\" warning).\n        requestAnimationFrame(() => this.recomputePinOffsets());\n      });\n    }\n\n    const next = new Set<Element>(headerRow.headers);\n    for (const element of this.#observedHeaders) {\n      if (!next.has(element)) this.#resizeObserver.unobserve(element);\n    }\n    for (const element of next) {\n      if (!this.#observedHeaders.has(element)) this.#resizeObserver.observe(element);\n    }\n    this.#observedHeaders = next;\n  }\n\n  #lastHeaderTop = -1;\n  #lastFilterTop = -1;\n  #lastHostWidth = -1;\n  #hostWidthObserver: ResizeObserver | null = null;\n\n  /**\n   * Writes the cumulative height of the sticky top rows into CSS custom\n   * properties used by the header/filter rows for their `inset-block-start`\n   * offsets. The toolbar is always at `top: 0`; the header sits below it\n   * (`--apex-row-top-header`) and the filter sits below the header\n   * (`--apex-row-top-filter`). Writes are skipped when the values haven't\n   * changed so the ResizeObserver feedback loop terminates.\n   */\n  public recomputeStickyRowOffsets(): void {\n    const root = (this.host as HTMLElement).shadowRoot;\n    if (!root) return;\n    const toolbar = root.querySelector('apex-grid-toolbar') as HTMLElement | null;\n    const header = root.querySelector('apex-grid-header-row') as HTMLElement | null;\n\n    const toolbarH = toolbar?.offsetHeight ?? 0;\n    const headerH = header?.offsetHeight ?? 0;\n    const headerTop = toolbarH;\n    const filterTop = toolbarH + headerH;\n\n    if (headerTop !== this.#lastHeaderTop) {\n      this.host.style.setProperty('--apex-row-top-header', `${headerTop}px`);\n      this.#lastHeaderTop = headerTop;\n    }\n    if (filterTop !== this.#lastFilterTop) {\n      this.host.style.setProperty('--apex-row-top-filter', `${filterTop}px`);\n      this.#lastFilterTop = filterTop;\n    }\n  }\n\n  protected observeStickyRows(): void {\n    const root = (this.host as HTMLElement).shadowRoot;\n    if (!root) return;\n    const toolbar = root.querySelector('apex-grid-toolbar') as HTMLElement | null;\n    const header = root.querySelector('apex-grid-header-row') as HTMLElement | null;\n\n    if (!this.#stickyRowObserver) {\n      this.#stickyRowObserver = new ResizeObserver(() => {\n        requestAnimationFrame(() => this.recomputeStickyRowOffsets());\n      });\n    }\n\n    const next = new Set<Element>([toolbar, header].filter((el): el is HTMLElement => !!el));\n    for (const element of this.#observedStickyRows) {\n      if (!next.has(element)) this.#stickyRowObserver.unobserve(element);\n    }\n    for (const element of next) {\n      if (!this.#observedStickyRows.has(element)) this.#stickyRowObserver.observe(element);\n    }\n    this.#observedStickyRows = next;\n  }\n}\n\nfunction offsetsEqual<K>(a: Map<K, number>, b: Map<K, number>): boolean {\n  if (a.size !== b.size) return false;\n  for (const [key, value] of a) {\n    if (b.get(key) !== value) return false;\n  }\n  return true;\n}\n"]}

package/controllers/editing.d.ts

@@ -0,0 +1,130 @@
+import type { ReactiveController } from 'lit';
+import type { ColumnConfiguration, EditMode, EditTrigger, GridHost, Keys } from '../internal/types.js';
+/**
+ * The default editing configuration used when the grid has none set.
+ */
+export declare const DEFAULT_EDITING_CONFIG: Readonly<{
+    enabled: false;
+    mode: EditMode;
+    trigger: EditTrigger;
+}>;
+interface ActiveCell<T> {
+    rowIndex: number;
+    columnKey: Keys<T>;
+    /**
+     * Live reference to the underlying record (preserved through the pipeline so
+     * the source array can be mutated on commit).
+     */
+    data: T;
+}
+/**
+ * Reactive controller backing inline cell + row editing.
+ *
+ * @remarks
+ * Holds the currently active cell / row, pending values for row-mode edits,
+ * and is responsible for emitting the cancellable `cellValueChanging` event
+ * and follow-up `cellValueChanged` event. The actual data mutation writes
+ * through to {@link ApexGrid.data} so changes survive pipeline runs and
+ * propagate to consumers that own the source array.
+ */
+export declare class EditingController<T extends object> implements ReactiveController {
+    protected host: GridHost<T>;
+    /** The cell currently in edit mode, or `null`. */
+    activeCell: ActiveCell<T> | null;
+    /** The row currently in edit mode (row mode only), or `null`. */
+    activeRow: {
+        rowIndex: number;
+        data: T;
+    } | null;
+    /**
+     * Pending values keyed by column for the currently editing row. Populated in
+     * row mode as the user edits individual cells; flushed on
+     * {@link commitRow}.
+     */
+    pending: Map<Keys<T>, unknown>;
+    constructor(host: GridHost<T>);
+    hostConnected(): void;
+    /**
+     * Whether editing is enabled at the grid level.
+     */
+    get enabled(): boolean;
+    /**
+     * The resolved edit mode (`'cell'` if unset).
+     */
+    get mode(): EditMode;
+    /**
+     * The resolved edit trigger (`'doubleClick'` if unset).
+     */
+    get trigger(): EditTrigger;
+    /**
+     * Whether the given column can be edited.
+     */
+    isEditable(column: ColumnConfiguration<T>): boolean;
+    /**
+     * Whether the cell `(rowIndex, columnKey)` is currently in edit mode.
+     */
+    isCellEditing(rowIndex: number, columnKey: Keys<T>): boolean;
+    /**
+     * Whether the given row is currently in edit mode (row mode).
+     */
+    isRowEditing(rowIndex: number): boolean;
+    /**
+     * Begins editing the cell at `(rowIndex, columnKey)`. Auto-commits any cell
+     * already in edit mode (in cell mode); in row mode it switches the active
+     * cell within the same row and rejects cross-row moves.
+     *
+     * @returns `true` if edit started, `false` if rejected (column not editable
+     * or row-mode constraint violated).
+     */
+    editCell(rowIndex: number, columnKey: Keys<T>): Promise<boolean>;
+    /**
+     * Begins editing the given row in row mode. Emits `rowEditStarted` on
+     * success. No-op in cell mode.
+     */
+    editRow(rowIndex: number): Promise<boolean>;
+    /**
+     * Commits a candidate value for the currently editing cell. In cell mode the
+     * value is written through to {@link ApexGrid.data}; in row mode it is staged
+     * in {@link pending} until {@link commitRow} is called.
+     *
+     * @param value - The candidate value.
+     * @returns `true` if accepted (or staged), `false` if rejected by
+     * `cellValueChanging.preventDefault()`.
+     */
+    commitCell(value?: unknown): Promise<boolean>;
+    /**
+     * Writes `value` directly to the cell at `(rowIndex, columnKey)` without
+     * entering edit mode. Used by interactive display widgets (e.g. the boolean
+     * checkbox) that handle their own input. Goes through the same
+     * `cellValueChanging` / `cellValueChanged` event path as a normal commit.
+     *
+     * @returns `true` if the value was applied, `false` if rejected by
+     * `cellValueChanging.preventDefault()` or the column is not editable.
+     */
+    commitImmediate(rowIndex: number, columnKey: Keys<T>, value: unknown): Promise<boolean>;
+    /**
+     * Discards the current cell edit without writing. In row mode the row edit
+     * stays open.
+     */
+    cancelCell(): void;
+    /**
+     * Commits all pending edits for the currently editing row. Emits
+     * `cellValueChanging` for every changed cell and `rowEditEnded` at the end.
+     *
+     * @returns `true` if the row was applied, `false` if any cell change was
+     * cancelled (the row remains in edit mode in that case).
+     */
+    commitRow(): Promise<boolean>;
+    /**
+     * Discards every pending edit for the active row and exits row edit mode.
+     * Emits `rowEditEnded` with `committed: false`.
+     */
+    cancelRow(): void;
+    /**
+     * Returns the current pending or committed value for `(rowIndex, columnKey)`.
+     * Cells in row mode read this so unstaged-but-pending values are reflected
+     * during the edit.
+     */
+    getValue(rowIndex: number, columnKey: Keys<T>): unknown;
+}
+export {};