apex-grid 1.0.1 → 2.0.0

package/controllers/resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../src/controllers/resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA2B,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,MAAM,OAAO,gBAAgB;IAC3B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAIhC,oBAAe,GAAG,KAAK,CAAC;QACxB,oBAAe,GAAG,CAAC,CAAC;QAJzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAKD,QAAQ,CAAC,GAAY,EAAE,WAAmB;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI;aACvB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,CAAE,CAAC;aAChE,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE3F,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;IAC/D,CAAC;IAOM,KAAK,CAAC,MAAyB;QACpC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAKM,IAAI;QACT,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,MAAM,CAAC,MAA8B,EAAE,KAAa,EAAE,WAAoB;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC;QACrC,CAAC;QAED,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,KAAK,CAAC,QAAQ,CAAC,MAA8B,EAAE,MAAyB;QAC7E,MAAM,CAAC,KAAK,GAAG,aAAa,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAE/B,MAAM,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;QACpE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,aAAa,KAAI,CAAC;IAKlB,eAAe;QACpB,OAAO,IAAI,CAAC,eAAe;YACzB,CAAC,CAAC,IAAI,CAAA;;kBAEM,QAAQ,CAAC;gBACf,SAAS,EAAE,cAAc,IAAI,CAAC,eAAe,KAAK;aACnD,CAAC;gBACI;YACV,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;CACF","sourcesContent":["import { html, nothing, type ReactiveController } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type ApexGridHeader from '../components/header.js';\nimport { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\n\nexport class ResizeController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public indicatorActive = false;\n  public indicatorOffset = 0;\n\n  #maxSize(key: Keys<T>, headerWidth: number) {\n    const max = this.host.rows\n      .map((row) => row.cells.find((cell) => cell.column.key === key)!)\n      .reduce((prev, current) => (current.offsetWidth > prev ? current.offsetWidth : prev), 0);\n\n    return Math.max(...[MIN_COL_RESIZE_WIDTH, max, headerWidth]);\n  }\n\n  /**\n   * Begins resizing a column by showing and positioning the resize indicator in relation to the column.\n   *\n   * @param header the\n   */\n  public start(header: ApexGridHeader<T>) {\n    this.indicatorActive = true;\n    this.indicatorOffset = header.offsetLeft + header.offsetWidth;\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Stops and resets the resizing state.\n   */\n  public stop() {\n    this.indicatorActive = false;\n    this.host.requestUpdate();\n  }\n\n  public resize(column: ColumnConfiguration<T>, width: number, sizerOffset?: number) {\n    if (sizerOffset) {\n      this.indicatorOffset = sizerOffset;\n    }\n\n    column.width = `${width}px`;\n    this.host.requestUpdate();\n  }\n\n  public async autosize(column: ColumnConfiguration<T>, header: ApexGridHeader<T>) {\n    column.width = 'max-content';\n\n    this.host.requestUpdate();\n    await this.host.updateComplete;\n\n    column.width = `${this.#maxSize(column.key, header.offsetWidth)}px`;\n    this.host.requestUpdate();\n  }\n\n  public hostConnected() {}\n\n  /**\n   * Renders the resize indicator in the grid.\n   */\n  public renderIndicator() {\n    return this.indicatorActive\n      ? html`<div\n          part=\"resize-indicator\"\n          style=${styleMap({\n            transform: `translateX(${this.indicatorOffset}px)`,\n          })}\n        ></div>`\n      : nothing;\n  }\n}\n"]}

package/controllers/selection.d.ts

@@ -0,0 +1,109 @@
+import type { ReactiveController } from 'lit';
+import type { GridHost, SelectionMode } from '../internal/types.js';
+/**
+ * The default selection configuration used when the grid has none set.
+ */
+export declare const DEFAULT_SELECTION_CONFIG: Readonly<{
+    enabled: false;
+    mode: SelectionMode;
+    showCheckboxColumn: false;
+}>;
+/**
+ * Reactive controller backing row selection.
+ *
+ * @remarks
+ * Selection state is reference-based — the controller holds a `Set` of row
+ * data references so the selection survives sort / filter / pagination as
+ * long as those operations preserve identities (the default in-place
+ * pipeline does). Replacing {@link ApexGrid.data} wholesale will invalidate
+ * any selected rows that are no longer present in the new array; consumers
+ * should call {@link clear} or re-apply selection after such a change.
+ *
+ * Mutations go through the cancellable `rowSelecting` event and emit a
+ * follow-up `rowSelected` event, mirroring the pattern used by editing.
+ */
+export declare class SelectionController<T extends object> implements ReactiveController {
+    #private;
+    protected host: GridHost<T>;
+    /** Set of currently selected row data references. */
+    selected: Set<T>;
+    /**
+     * Anchor row for Shift+click range selection. Set whenever a single row
+     * is toggled / picked so a follow-up Shift+click knows where to start.
+     */
+    anchor: T | null;
+    constructor(host: GridHost<T>);
+    hostConnected(): void;
+    /**
+     * Whether selection is enabled at the grid level.
+     */
+    get enabled(): boolean;
+    /**
+     * The resolved selection mode (`'multiple'` if unset).
+     */
+    get mode(): SelectionMode;
+    /**
+     * Whether to render the built-in checkbox column.
+     */
+    get showCheckboxColumn(): boolean;
+    /**
+     * Whether the given row is currently selected.
+     */
+    isSelected(row: T): boolean;
+    /**
+     * Returns the currently selected rows in insertion order.
+     */
+    selectedRows(): T[];
+    /**
+     * Whether every row in the current view ({@link ApexGrid.dataView}) is
+     * selected. Used by the header checkbox to render its "all" state.
+     */
+    allSelected(): boolean;
+    /**
+     * Whether some — but not all — rows in the current view are selected.
+     * Used to render the header checkbox in its indeterminate state.
+     */
+    someSelected(): boolean;
+    /**
+     * Toggles selection of `row`. In `'single'` mode this either selects the
+     * row (replacing any previous selection) or deselects it if it was the
+     * only selected row.
+     */
+    toggleRow(row: T): Promise<boolean>;
+    /**
+     * Adds `row` to the selection. In `'single'` mode the existing selection
+     * is cleared first.
+     */
+    selectRow(row: T): Promise<boolean>;
+    /**
+     * Removes `row` from the selection.
+     */
+    deselectRow(row: T): Promise<boolean>;
+    /**
+     * Adds `row` to the selection without affecting other selected rows
+     * (`'multiple'` mode only). In `'single'` mode this behaves like
+     * {@link selectRow}.
+     */
+    additiveToggle(row: T): Promise<boolean>;
+    /**
+     * Selects every row between {@link anchor} and `row` (inclusive) in the
+     * current page view. No-op in `'single'` mode or when no anchor is set —
+     * in those cases the call falls back to a plain {@link selectRow}.
+     */
+    rangeToggle(row: T): Promise<boolean>;
+    /**
+     * Selects every row currently in view ({@link ApexGrid.dataView}). No-op
+     * in `'single'` mode.
+     */
+    selectAll(): Promise<boolean>;
+    /**
+     * Clears the selection.
+     */
+    clear(): Promise<boolean>;
+    /**
+     * Replaces the current selection with `rows`. Used by the public
+     * {@link ApexGrid.selectedRows} setter so callers can drive selection
+     * programmatically. Single-mode keeps at most one row.
+     */
+    replaceSelection(rows: ReadonlyArray<T>): Promise<boolean>;
+}

package/controllers/selection.js

@@ -0,0 +1,168 @@
+export const DEFAULT_SELECTION_CONFIG = Object.freeze({
+    enabled: false,
+    mode: 'multiple',
+    showCheckboxColumn: false,
+});
+export class SelectionController {
+    constructor(host) {
+        this.host = host;
+        this.selected = new Set();
+        this.anchor = null;
+        this.host.addController(this);
+    }
+    hostConnected() { }
+    get enabled() {
+        return Boolean(this.host.selection?.enabled);
+    }
+    get mode() {
+        return this.host.selection?.mode ?? DEFAULT_SELECTION_CONFIG.mode;
+    }
+    get showCheckboxColumn() {
+        return (this.enabled &&
+            (this.host.selection?.showCheckboxColumn ?? DEFAULT_SELECTION_CONFIG.showCheckboxColumn));
+    }
+    isSelected(row) {
+        return this.selected.has(row);
+    }
+    selectedRows() {
+        return Array.from(this.selected);
+    }
+    allSelected() {
+        const view = this.host.dataView;
+        if (view.length === 0)
+            return false;
+        return view.every((row) => this.selected.has(row));
+    }
+    someSelected() {
+        if (this.selected.size === 0)
+            return false;
+        if (this.allSelected())
+            return false;
+        return true;
+    }
+    async toggleRow(row) {
+        if (!this.enabled)
+            return false;
+        const next = new Set(this.selected);
+        if (next.has(row)) {
+            next.delete(row);
+        }
+        else {
+            if (this.mode === 'single')
+                next.clear();
+            next.add(row);
+        }
+        this.anchor = next.has(row) ? row : null;
+        return this.#commit(next);
+    }
+    async selectRow(row) {
+        if (!this.enabled)
+            return false;
+        const next = new Set(this.mode === 'single' ? [] : this.selected);
+        next.add(row);
+        this.anchor = row;
+        return this.#commit(next);
+    }
+    async deselectRow(row) {
+        if (!this.enabled)
+            return false;
+        if (!this.selected.has(row))
+            return true;
+        const next = new Set(this.selected);
+        next.delete(row);
+        return this.#commit(next);
+    }
+    async additiveToggle(row) {
+        if (!this.enabled)
+            return false;
+        if (this.mode === 'single')
+            return this.toggleRow(row);
+        const next = new Set(this.selected);
+        if (next.has(row)) {
+            next.delete(row);
+        }
+        else {
+            next.add(row);
+        }
+        this.anchor = next.has(row) ? row : this.anchor;
+        return this.#commit(next);
+    }
+    async rangeToggle(row) {
+        if (!this.enabled)
+            return false;
+        if (this.mode === 'single' || !this.anchor) {
+            return this.selectRow(row);
+        }
+        const pageItems = this.host.pageItems;
+        const startIdx = pageItems.indexOf(this.anchor);
+        const endIdx = pageItems.indexOf(row);
+        if (startIdx === -1 || endIdx === -1) {
+            return this.selectRow(row);
+        }
+        const [lo, hi] = startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];
+        const next = new Set(this.selected);
+        for (let i = lo; i <= hi; i++) {
+            next.add(pageItems[i]);
+        }
+        return this.#commit(next);
+    }
+    async selectAll() {
+        if (!this.enabled || this.mode === 'single')
+            return false;
+        const next = new Set(this.host.dataView);
+        return this.#commit(next);
+    }
+    async clear() {
+        if (this.selected.size === 0)
+            return true;
+        return this.#commit(new Set());
+    }
+    async replaceSelection(rows) {
+        if (!this.enabled)
+            return false;
+        const next = new Set(this.mode === 'single' ? rows.slice(0, 1) : rows);
+        return this.#commit(next);
+    }
+    async #commit(next) {
+        const added = [];
+        const removed = [];
+        for (const row of next) {
+            if (!this.selected.has(row))
+                added.push(row);
+        }
+        for (const row of this.selected) {
+            if (!next.has(row))
+                removed.push(row);
+        }
+        if (added.length === 0 && removed.length === 0)
+            return true;
+        const proceed = this.host.emitEvent('rowSelecting', {
+            detail: {
+                added,
+                removed,
+                current: Array.from(this.selected),
+                next: Array.from(next),
+            },
+            cancelable: true,
+        });
+        if (!proceed)
+            return false;
+        this.selected = next;
+        this.host.requestUpdate();
+        const total = this.selected.size;
+        if (total === 0) {
+            this.host.announce('Selection cleared');
+        }
+        else if (added.length === 1 && removed.length === 0 && total === 1) {
+            this.host.announce('1 row selected');
+        }
+        else {
+            this.host.announce(`${total} rows selected`);
+        }
+        this.host.emitEvent('rowSelected', {
+            detail: { added, removed, selected: Array.from(this.selected) },
+        });
+        return true;
+    }
+}
+//# sourceMappingURL=selection.js.map

package/controllers/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","sourceRoot":"","sources":["../../src/controllers/selection.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC;IACpD,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,UAA2B;IACjC,kBAAkB,EAAE,KAAK;CAC1B,CAAC,CAAC;AAgBH,MAAM,OAAO,mBAAmB;IAU9B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QARhC,aAAQ,GAAW,IAAI,GAAG,EAAE,CAAC;QAM7B,WAAM,GAAa,IAAI,CAAC;QAG7B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAKzB,IAAW,OAAO;QAChB,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC/C,CAAC;IAKD,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC;IACpE,CAAC;IAKD,IAAW,kBAAkB;QAC3B,OAAO,CACL,IAAI,CAAC,OAAO;YACZ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,kBAAkB,IAAI,wBAAwB,CAAC,kBAAkB,CAAC,CACzF,CAAC;IACJ,CAAC;IAKM,UAAU,CAAC,GAAM;QACtB,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,CAAC;IAKM,YAAY;QACjB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAMM,WAAW;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QAChC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QACpC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAQ,CAAC,CAAC,CAAC;IAC1D,CAAC;IAMM,YAAY;QACjB,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC3C,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,OAAO,KAAK,CAAC;QACrC,OAAO,IAAI,CAAC;IACd,CAAC;IAOM,KAAK,CAAC,SAAS,CAAC,GAAM;QAC3B,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAAE,IAAI,CAAC,KAAK,EAAE,CAAC;YACzC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChB,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;QACzC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAMM,KAAK,CAAC,SAAS,CAAC,GAAM;QAC3B,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAClB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAKM,KAAK,CAAC,WAAW,CAAC,GAAM;QAC7B,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,OAAO,IAAI,CAAC;QACzC,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAOM,KAAK,CAAC,cAAc,CAAC,GAAM;QAChC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChB,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QAChD,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAOM,KAAK,CAAC,WAAW,CAAC,GAAM;QAC7B,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC7B,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAA6B,CAAC;QAC1D,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,QAAQ,KAAK,CAAC,CAAC,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC7B,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAC7E,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YAC9B,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAM,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAMM,KAAK,CAAC,SAAS;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO,KAAK,CAAC;QAC1D,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAA4B,CAAC,CAAC;QAC7D,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAKM,KAAK,CAAC,KAAK;QAChB,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1C,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IACjC,CAAC;IAOM,KAAK,CAAC,gBAAgB,CAAC,IAAsB;QAClD,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,IAAY;QACxB,MAAM,KAAK,GAAQ,EAAE,CAAC;QACtB,MAAM,OAAO,GAAQ,EAAE,CAAC;QACxB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/C,CAAC;QACD,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAE5D,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;YAClD,MAAM,EAAE;gBACN,KAAK;gBACL,OAAO;gBACP,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAClC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;aACvB;YACD,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAE1B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC1C,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YACrE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,gBAAgB,CAAC,CAAC;QAC/C,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;YACjC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;SAChE,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type { GridHost, SelectionMode } from '../internal/types.js';\n\n/**\n * The default selection configuration used when the grid has none set.\n */\nexport const DEFAULT_SELECTION_CONFIG = Object.freeze({\n  enabled: false,\n  mode: 'multiple' as SelectionMode,\n  showCheckboxColumn: false,\n});\n\n/**\n * Reactive controller backing row selection.\n *\n * @remarks\n * Selection state is reference-based — the controller holds a `Set` of row\n * data references so the selection survives sort / filter / pagination as\n * long as those operations preserve identities (the default in-place\n * pipeline does). Replacing {@link ApexGrid.data} wholesale will invalidate\n * any selected rows that are no longer present in the new array; consumers\n * should call {@link clear} or re-apply selection after such a change.\n *\n * Mutations go through the cancellable `rowSelecting` event and emit a\n * follow-up `rowSelected` event, mirroring the pattern used by editing.\n */\nexport class SelectionController<T extends object> implements ReactiveController {\n  /** Set of currently selected row data references. */\n  public selected: Set<T> = new Set();\n\n  /**\n   * Anchor row for Shift+click range selection. Set whenever a single row\n   * is toggled / picked so a follow-up Shift+click knows where to start.\n   */\n  public anchor: T | null = null;\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  /**\n   * Whether selection is enabled at the grid level.\n   */\n  public get enabled(): boolean {\n    return Boolean(this.host.selection?.enabled);\n  }\n\n  /**\n   * The resolved selection mode (`'multiple'` if unset).\n   */\n  public get mode(): SelectionMode {\n    return this.host.selection?.mode ?? DEFAULT_SELECTION_CONFIG.mode;\n  }\n\n  /**\n   * Whether to render the built-in checkbox column.\n   */\n  public get showCheckboxColumn(): boolean {\n    return (\n      this.enabled &&\n      (this.host.selection?.showCheckboxColumn ?? DEFAULT_SELECTION_CONFIG.showCheckboxColumn)\n    );\n  }\n\n  /**\n   * Whether the given row is currently selected.\n   */\n  public isSelected(row: T): boolean {\n    return this.selected.has(row);\n  }\n\n  /**\n   * Returns the currently selected rows in insertion order.\n   */\n  public selectedRows(): T[] {\n    return Array.from(this.selected);\n  }\n\n  /**\n   * Whether every row in the current view ({@link ApexGrid.dataView}) is\n   * selected. Used by the header checkbox to render its \"all\" state.\n   */\n  public allSelected(): boolean {\n    const view = this.host.dataView;\n    if (view.length === 0) return false;\n    return view.every((row) => this.selected.has(row as T));\n  }\n\n  /**\n   * Whether some — but not all — rows in the current view are selected.\n   * Used to render the header checkbox in its indeterminate state.\n   */\n  public someSelected(): boolean {\n    if (this.selected.size === 0) return false;\n    if (this.allSelected()) return false;\n    return true;\n  }\n\n  /**\n   * Toggles selection of `row`. In `'single'` mode this either selects the\n   * row (replacing any previous selection) or deselects it if it was the\n   * only selected row.\n   */\n  public async toggleRow(row: T): Promise<boolean> {\n    if (!this.enabled) return false;\n    const next = new Set(this.selected);\n    if (next.has(row)) {\n      next.delete(row);\n    } else {\n      if (this.mode === 'single') next.clear();\n      next.add(row);\n    }\n    this.anchor = next.has(row) ? row : null;\n    return this.#commit(next);\n  }\n\n  /**\n   * Adds `row` to the selection. In `'single'` mode the existing selection\n   * is cleared first.\n   */\n  public async selectRow(row: T): Promise<boolean> {\n    if (!this.enabled) return false;\n    const next = new Set(this.mode === 'single' ? [] : this.selected);\n    next.add(row);\n    this.anchor = row;\n    return this.#commit(next);\n  }\n\n  /**\n   * Removes `row` from the selection.\n   */\n  public async deselectRow(row: T): Promise<boolean> {\n    if (!this.enabled) return false;\n    if (!this.selected.has(row)) return true;\n    const next = new Set(this.selected);\n    next.delete(row);\n    return this.#commit(next);\n  }\n\n  /**\n   * Adds `row` to the selection without affecting other selected rows\n   * (`'multiple'` mode only). In `'single'` mode this behaves like\n   * {@link selectRow}.\n   */\n  public async additiveToggle(row: T): Promise<boolean> {\n    if (!this.enabled) return false;\n    if (this.mode === 'single') return this.toggleRow(row);\n    const next = new Set(this.selected);\n    if (next.has(row)) {\n      next.delete(row);\n    } else {\n      next.add(row);\n    }\n    this.anchor = next.has(row) ? row : this.anchor;\n    return this.#commit(next);\n  }\n\n  /**\n   * Selects every row between {@link anchor} and `row` (inclusive) in the\n   * current page view. No-op in `'single'` mode or when no anchor is set —\n   * in those cases the call falls back to a plain {@link selectRow}.\n   */\n  public async rangeToggle(row: T): Promise<boolean> {\n    if (!this.enabled) return false;\n    if (this.mode === 'single' || !this.anchor) {\n      return this.selectRow(row);\n    }\n    const pageItems = this.host.pageItems as ReadonlyArray<T>;\n    const startIdx = pageItems.indexOf(this.anchor);\n    const endIdx = pageItems.indexOf(row);\n    if (startIdx === -1 || endIdx === -1) {\n      return this.selectRow(row);\n    }\n    const [lo, hi] = startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];\n    const next = new Set(this.selected);\n    for (let i = lo; i <= hi; i++) {\n      next.add(pageItems[i] as T);\n    }\n    return this.#commit(next);\n  }\n\n  /**\n   * Selects every row currently in view ({@link ApexGrid.dataView}). No-op\n   * in `'single'` mode.\n   */\n  public async selectAll(): Promise<boolean> {\n    if (!this.enabled || this.mode === 'single') return false;\n    const next = new Set(this.host.dataView as ReadonlyArray<T>);\n    return this.#commit(next);\n  }\n\n  /**\n   * Clears the selection.\n   */\n  public async clear(): Promise<boolean> {\n    if (this.selected.size === 0) return true;\n    return this.#commit(new Set());\n  }\n\n  /**\n   * Replaces the current selection with `rows`. Used by the public\n   * {@link ApexGrid.selectedRows} setter so callers can drive selection\n   * programmatically. Single-mode keeps at most one row.\n   */\n  public async replaceSelection(rows: ReadonlyArray<T>): Promise<boolean> {\n    if (!this.enabled) return false;\n    const next = new Set(this.mode === 'single' ? rows.slice(0, 1) : rows);\n    return this.#commit(next);\n  }\n\n  async #commit(next: Set<T>): Promise<boolean> {\n    const added: T[] = [];\n    const removed: T[] = [];\n    for (const row of next) {\n      if (!this.selected.has(row)) added.push(row);\n    }\n    for (const row of this.selected) {\n      if (!next.has(row)) removed.push(row);\n    }\n    if (added.length === 0 && removed.length === 0) return true;\n\n    const proceed = this.host.emitEvent('rowSelecting', {\n      detail: {\n        added,\n        removed,\n        current: Array.from(this.selected),\n        next: Array.from(next),\n      },\n      cancelable: true,\n    });\n    if (!proceed) return false;\n\n    this.selected = next;\n    this.host.requestUpdate();\n\n    const total = this.selected.size;\n    if (total === 0) {\n      this.host.announce('Selection cleared');\n    } else if (added.length === 1 && removed.length === 0 && total === 1) {\n      this.host.announce('1 row selected');\n    } else {\n      this.host.announce(`${total} rows selected`);\n    }\n\n    this.host.emitEvent('rowSelected', {\n      detail: { added, removed, selected: Array.from(this.selected) },\n    });\n    return true;\n  }\n}\n"]}

package/{dist/src/controllers → controllers}/sort.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
 import type { SortExpression, SortState } from '../operations/sort/types.js';
 export declare class SortController<T extends object> implements ReactiveController {
@@ -13,4 +13,3 @@ export declare class SortController<T extends object> implements ReactiveControl
     sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
     hostConnected(): void;
 }
-//# sourceMappingURL=sort.d.ts.map

package/controllers/sort.js

@@ -0,0 +1,122 @@
+import { PIPELINE } from '../internal/constants.js';
+import { awaitChildUpdates, playKeyedFlip } from '../internal/flip.js';
+import { asArray } from '../internal/utils.js';
+export class SortController {
+    constructor(host) {
+        this.host = host;
+        this.state = new Map();
+        this.host.addController(this);
+    }
+    get #isMultipleSort() {
+        return this.host.sortConfiguration.multiple;
+    }
+    get #isTriStateSort() {
+        return this.host.sortConfiguration.triState;
+    }
+    #resolveSortOptions(options) {
+        const expr = {
+            caseSensitive: false,
+            comparer: undefined,
+        };
+        if (!options || typeof options === 'boolean') {
+            return expr;
+        }
+        return Object.assign(expr, {
+            caseSensitive: options.caseSensitive,
+            comparer: options.comparer,
+        });
+    }
+    #createDefaultExpression(key) {
+        const options = this.host.getColumn(key)?.sort;
+        return {
+            key,
+            direction: 'ascending',
+            ...this.#resolveSortOptions(options),
+        };
+    }
+    #orderBy(dir) {
+        return this.#isTriStateSort
+            ? dir === 'ascending'
+                ? 'descending'
+                : dir === 'descending'
+                    ? 'none'
+                    : 'ascending'
+            : dir === 'ascending'
+                ? 'descending'
+                : 'ascending';
+    }
+    #emitSortingEvent(detail) {
+        return this.host.emitEvent('sorting', { detail, cancelable: true });
+    }
+    #emitSortedEvent(detail) {
+        return this.host.emitEvent('sorted', { detail });
+    }
+    #setExpression(expression) {
+        expression.direction === 'none'
+            ? this.reset(expression.key)
+            : this.state.set(expression.key, { ...expression });
+    }
+    async sortFromHeaderClick(column) {
+        const expression = this.prepareExpression(column);
+        if (!this.#emitSortingEvent(expression)) {
+            return;
+        }
+        if (!this.#isMultipleSort) {
+            this.reset();
+        }
+        const beforeRects = this.#captureRowRects();
+        this._sort(expression);
+        await this.host.updateComplete;
+        await awaitChildUpdates(this.host.rows);
+        this.#playRowFlip(beforeRects);
+        this.#announce(expression, column);
+        this.#emitSortedEvent(expression);
+    }
+    #announce(expression, column) {
+        const label = column.headerText ?? String(column.key);
+        const message = expression.direction === 'none'
+            ? `Sort cleared on ${label}`
+            : `Sorted by ${label} ${expression.direction}`;
+        this.host.announce(message);
+    }
+    #captureRowRects() {
+        const entries = [];
+        for (const row of this.host.rows) {
+            const el = row;
+            entries.push({ key: row.data, rect: el.getBoundingClientRect() });
+        }
+        return entries;
+    }
+    #playRowFlip(before) {
+        const rows = this.host.rows;
+        const byData = new Map();
+        for (const row of rows) {
+            byData.set(row.data, row);
+        }
+        playKeyedFlip(before, (data) => byData.get(data) ?? null, 'y');
+    }
+    prepareExpression({ key, sort: options }) {
+        if (this.state.has(key)) {
+            const expr = this.state.get(key);
+            return Object.assign(expr, {
+                direction: this.#orderBy(expr.direction),
+                ...this.#resolveSortOptions(options),
+            });
+        }
+        return this.#createDefaultExpression(key);
+    }
+    reset(key) {
+        key ? this.state.delete(key) : this.state.clear();
+    }
+    _sort(expressions) {
+        for (const expr of asArray(expressions)) {
+            this.#setExpression(expr);
+        }
+        this.host.requestUpdate(PIPELINE);
+    }
+    sort(expressions) {
+        this._sort(asArray(expressions).map((expr) => Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)));
+    }
+    hostConnected() { }
+}
+//# sourceMappingURL=sort.js.map

package/controllers/sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../src/controllers/sort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport { awaitChildUpdates, type KeyedFlipEntry, playKeyedFlip } from '../internal/flip.js';\nimport type {\n  ColumnConfiguration,\n  ColumnSortConfiguration,\n  GridHost,\n  Keys,\n} from '../internal/types.js';\nimport { asArray } from '../internal/utils.js';\nimport type { SortExpression, SortingDirection, SortState } from '../operations/sort/types.js';\n\nexport class SortController<T extends object> implements ReactiveController {\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public state: SortState<T> = new Map();\n\n  get #isMultipleSort() {\n    return this.host.sortConfiguration.multiple;\n  }\n\n  get #isTriStateSort() {\n    return this.host.sortConfiguration.triState;\n  }\n\n  #resolveSortOptions(options?: boolean | ColumnSortConfiguration<T>) {\n    const expr: Pick<SortExpression<T>, 'caseSensitive' | 'comparer'> = {\n      caseSensitive: false,\n      comparer: undefined,\n    };\n\n    if (!options || typeof options === 'boolean') {\n      return expr as Partial<SortExpression<T>>;\n    }\n\n    return Object.assign(expr, {\n      caseSensitive: options.caseSensitive,\n      comparer: options.comparer,\n    }) as Partial<SortExpression<T>>;\n  }\n\n  #createDefaultExpression(key: Keys<T>) {\n    const options = this.host.getColumn(key)?.sort;\n\n    return {\n      key,\n      direction: 'ascending',\n      ...this.#resolveSortOptions(options),\n    } as SortExpression<T>;\n  }\n\n  #orderBy(dir?: SortingDirection): SortingDirection {\n    return this.#isTriStateSort\n      ? dir === 'ascending'\n        ? 'descending'\n        : dir === 'descending'\n          ? 'none'\n          : 'ascending'\n      : dir === 'ascending'\n        ? 'descending'\n        : 'ascending';\n  }\n\n  #emitSortingEvent(detail: SortExpression<T>) {\n    return this.host.emitEvent('sorting', { detail, cancelable: true });\n  }\n\n  #emitSortedEvent(detail: SortExpression<T>) {\n    return this.host.emitEvent('sorted', { detail });\n  }\n\n  #setExpression(expression: SortExpression<T>) {\n    expression.direction === 'none'\n      ? this.reset(expression.key)\n      : this.state.set(expression.key, { ...expression });\n  }\n\n  public async sortFromHeaderClick(column: ColumnConfiguration<T>) {\n    const expression = this.prepareExpression(column);\n\n    if (!this.#emitSortingEvent(expression)) {\n      return;\n    }\n\n    if (!this.#isMultipleSort) {\n      this.reset();\n    }\n\n    // Capture visible-row rects keyed by data identity BEFORE the pipeline\n    // runs. After the new render the virtualizer will have repositioned\n    // rows; we use those captured rects as the \"First\" of a FLIP and\n    // animate each row from its old viewport position back to identity.\n    const beforeRects = this.#captureRowRects();\n\n    this._sort(expression);\n\n    await this.host.updateComplete;\n    // Wait for body row updates so the new data is committed to each row\n    // element before measuring the \"Last\" rect — otherwise the captured-\n    // before and measured-after rects match and the animation no-ops.\n    await awaitChildUpdates(this.host.rows);\n    this.#playRowFlip(beforeRects);\n    this.#announce(expression, column);\n    this.#emitSortedEvent(expression);\n  }\n\n  #announce(expression: SortExpression<T>, column: ColumnConfiguration<T>) {\n    const label = column.headerText ?? String(column.key);\n    const message =\n      expression.direction === 'none'\n        ? `Sort cleared on ${label}`\n        : `Sorted by ${label} ${expression.direction}`;\n    this.host.announce(message);\n  }\n\n  #captureRowRects(): KeyedFlipEntry<T>[] {\n    const entries: KeyedFlipEntry<T>[] = [];\n    for (const row of this.host.rows) {\n      const el = row as unknown as HTMLElement;\n      entries.push({ key: row.data, rect: el.getBoundingClientRect() });\n    }\n    return entries;\n  }\n\n  #playRowFlip(before: ReadonlyArray<KeyedFlipEntry<T>>) {\n    // After sort, the same data may be rendered by a different `<apex-grid-row>`\n    // DOM element (virtualizer recycles rows). Resolve by data identity.\n    const rows = this.host.rows;\n    const byData = new Map<T, HTMLElement>();\n    for (const row of rows) {\n      byData.set(row.data, row as unknown as HTMLElement);\n    }\n    playKeyedFlip(before, (data) => byData.get(data) ?? null, 'y');\n  }\n\n  public prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortExpression<T> {\n    if (this.state.has(key)) {\n      const expr = this.state.get(key)!;\n\n      return Object.assign(expr, {\n        direction: this.#orderBy(expr.direction),\n        ...this.#resolveSortOptions(options),\n      });\n    }\n\n    // Initial state\n    return this.#createDefaultExpression(key);\n  }\n\n  public reset(key?: Keys<T>) {\n    key ? this.state.delete(key) : this.state.clear();\n  }\n\n  protected _sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n    for (const expr of asArray(expressions)) {\n      this.#setExpression(expr);\n    }\n\n    this.host.requestUpdate(PIPELINE);\n  }\n\n  public sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n    this._sort(\n      asArray(expressions).map((expr) =>\n        Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)\n      )\n    );\n  }\n\n  public hostConnected() {}\n}\n"]}

package/controllers/state.d.ts

@@ -0,0 +1,56 @@
+import type { ReactiveController } from 'lit';
+import type { ActiveNode, GridHost } from '../internal/types.js';
+import { EditingController } from './editing.js';
+import { ExpansionController } from './expansion.js';
+import { FilterController } from './filter.js';
+import { NavigationController } from './navigation.js';
+import { PaginationController } from './pagination.js';
+import { ReorderController } from './reorder.js';
+import { ResizeController } from './resize.js';
+import { SelectionController } from './selection.js';
+import { SortController } from './sort.js';
+import { TreeController } from './tree.js';
+export declare class StateController<T extends object> implements ReactiveController {
+    #private;
+    host: GridHost<T>;
+    sorting: SortController<T>;
+    filtering: FilterController<T>;
+    navigation: NavigationController<T>;
+    resizing: ResizeController<T>;
+    pagination: PaginationController<T>;
+    reordering: ReorderController<T>;
+    editing: EditingController<T>;
+    selection: SelectionController<T>;
+    expansion: ExpansionController<T>;
+    tree: TreeController<T>;
+    /**
+     * Current message in the grid's polite live region. Bound by the host's
+     * `renderLiveRegion()` template; mutated through {@link setAnnouncement}
+     * so screen readers re-announce on every change.
+     */
+    announcement: string;
+    /**
+     * Updates the polite live region's text. Repeats are forced to fire by
+     * appending a zero-width space — screen readers ignore unchanged content,
+     * so two identical sort announcements wouldn't otherwise be read aloud.
+     */
+    setAnnouncement(message: string): void;
+    get active(): ActiveNode<T>;
+    set active(node: ActiveNode<T>);
+    get headerRow(): import("../components/header-row.js").default<T>;
+    get scrollContainer(): import("../components/virtualizer.js").default;
+    get paginator(): import("../components/paginator.js").default<T>;
+    get toolbar(): import("../components/toolbar.js").default<T>;
+    /**
+     * Cumulative pin offsets (in px) keyed by column key. Populated by the
+     * {@link GridDOMController} after each layout.
+     */
+    get pinOffsets(): Map<unknown, number>;
+    constructor(host: GridHost<T>);
+    protected init(): void;
+    hostConnected(): void;
+    hostUpdate(): void;
+}
+export declare const gridStateContext: {
+    __context__: StateController<any>;
+};

package/controllers/state.js

@@ -0,0 +1,74 @@
+import { createContext } from '@lit/context';
+import { EditingController } from './editing.js';
+import { ExpansionController } from './expansion.js';
+import { FilterController } from './filter.js';
+import { NavigationController } from './navigation.js';
+import { PaginationController } from './pagination.js';
+import { ReorderController } from './reorder.js';
+import { ResizeController } from './resize.js';
+import { SelectionController } from './selection.js';
+import { SortController } from './sort.js';
+import { TreeController } from './tree.js';
+export class StateController {
+    #announceToken;
+    setAnnouncement(message) {
+        if (!message) {
+            this.announcement = '';
+            this.host.requestUpdate();
+            return;
+        }
+        this.#announceToken = (this.#announceToken + 1) % 2;
+        this.announcement = this.#announceToken ? message : `${message} `;
+        this.host.requestUpdate();
+    }
+    get active() {
+        return this.navigation.active;
+    }
+    set active(node) {
+        this.navigation.active = node;
+    }
+    get headerRow() {
+        return this.host.headerRow;
+    }
+    get scrollContainer() {
+        return this.host.scrollContainer;
+    }
+    get paginator() {
+        return this.host.paginator;
+    }
+    get toolbar() {
+        return this.host.toolbar;
+    }
+    get pinOffsets() {
+        const dom = this.host.DOM;
+        return dom?.pinOffsets ?? new Map();
+    }
+    constructor(host) {
+        this.host = host;
+        this.announcement = '';
+        this.#announceToken = 0;
+        this.host.addController(this);
+        this.init();
+    }
+    init() {
+        this.sorting = new SortController(this.host);
+        this.filtering = new FilterController(this.host);
+        this.navigation = new NavigationController(this.host);
+        this.resizing = new ResizeController(this.host);
+        this.pagination = new PaginationController(this.host);
+        this.reordering = new ReorderController(this.host);
+        this.editing = new EditingController(this.host);
+        this.selection = new SelectionController(this.host);
+        this.expansion = new ExpansionController(this.host);
+        this.tree = new TreeController(this.host);
+    }
+    hostConnected() { }
+    hostUpdate() {
+        this.headerRow?.requestUpdate();
+        this.scrollContainer?.requestUpdate();
+        this.paginator?.requestUpdate();
+        this.toolbar?.requestUpdate();
+    }
+}
+export const gridStateContext = createContext('gridStateController');
+//# sourceMappingURL=state.js.map

package/controllers/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/controllers/state.ts"],"names":[],"mappings":"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","sourcesContent":["import { createContext } from '@lit/context';\nimport type { ReactiveController } from 'lit';\nimport type { ActiveNode, GridHost } from '../internal/types.js';\nimport { EditingController } from './editing.js';\nimport { ExpansionController } from './expansion.js';\nimport { FilterController } from './filter.js';\nimport { NavigationController } from './navigation.js';\nimport { PaginationController } from './pagination.js';\nimport { ReorderController } from './reorder.js';\nimport { ResizeController } from './resize.js';\nimport { SelectionController } from './selection.js';\nimport { SortController } from './sort.js';\nimport { TreeController } from './tree.js';\n\nexport class StateController<T extends object> implements ReactiveController {\n  public sorting!: SortController<T>;\n  public filtering!: FilterController<T>;\n  public navigation!: NavigationController<T>;\n  public resizing!: ResizeController<T>;\n  public pagination!: PaginationController<T>;\n  public reordering!: ReorderController<T>;\n  public editing!: EditingController<T>;\n  public selection!: SelectionController<T>;\n  public expansion!: ExpansionController<T>;\n  public tree!: TreeController<T>;\n\n  /**\n   * Current message in the grid's polite live region. Bound by the host's\n   * `renderLiveRegion()` template; mutated through {@link setAnnouncement}\n   * so screen readers re-announce on every change.\n   */\n  public announcement = '';\n  #announceToken = 0;\n\n  /**\n   * Updates the polite live region's text. Repeats are forced to fire by\n   * appending a zero-width space — screen readers ignore unchanged content,\n   * so two identical sort announcements wouldn't otherwise be read aloud.\n   */\n  public setAnnouncement(message: string): void {\n    if (!message) {\n      this.announcement = '';\n      this.host.requestUpdate();\n      return;\n    }\n    this.#announceToken = (this.#announceToken + 1) % 2;\n    this.announcement = this.#announceToken ? message : `${message} `;\n    this.host.requestUpdate();\n  }\n\n  public get active() {\n    return this.navigation.active;\n  }\n\n  public set active(node: ActiveNode<T>) {\n    this.navigation.active = node;\n  }\n\n  public get headerRow() {\n    // @ts-expect-error - Protected member access\n    return this.host.headerRow;\n  }\n\n  public get scrollContainer() {\n    // @ts-expect-error - Protected member access\n    return this.host.scrollContainer;\n  }\n\n  public get paginator() {\n    // @ts-expect-error - Protected member access\n    return this.host.paginator;\n  }\n\n  public get toolbar() {\n    // @ts-expect-error - Protected member access\n    return this.host.toolbar;\n  }\n\n  /**\n   * Cumulative pin offsets (in px) keyed by column key. Populated by the\n   * {@link GridDOMController} after each layout.\n   */\n  public get pinOffsets(): Map<unknown, number> {\n    // @ts-expect-error - Protected member access\n    const dom = this.host.DOM as { pinOffsets?: Map<unknown, number> } | undefined;\n    return dom?.pinOffsets ?? new Map();\n  }\n\n  constructor(public host: GridHost<T>) {\n    this.host.addController(this);\n    this.init();\n  }\n\n  protected init() {\n    this.sorting = new SortController(this.host);\n    this.filtering = new FilterController(this.host);\n    this.navigation = new NavigationController(this.host);\n    this.resizing = new ResizeController(this.host);\n    this.pagination = new PaginationController(this.host);\n    this.reordering = new ReorderController(this.host);\n    this.editing = new EditingController(this.host);\n    this.selection = new SelectionController(this.host);\n    this.expansion = new ExpansionController(this.host);\n    this.tree = new TreeController(this.host);\n  }\n\n  public hostConnected() {}\n\n  public hostUpdate(): void {\n    this.headerRow?.requestUpdate();\n    this.scrollContainer?.requestUpdate();\n    this.paginator?.requestUpdate();\n    this.toolbar?.requestUpdate();\n  }\n}\n\nexport const gridStateContext = createContext<StateController<any>>('gridStateController');\n"]}