apex-grid 1.1.0 → 3.0.0

package/controllers/editing.js

@@ -0,0 +1,197 @@
+import { PIPELINE } from '../internal/constants.js';
+export const DEFAULT_EDITING_CONFIG = Object.freeze({
+    enabled: false,
+    mode: 'cell',
+    trigger: 'doubleClick',
+});
+export class EditingController {
+    constructor(host) {
+        this.host = host;
+        this.activeCell = null;
+        this.activeRow = null;
+        this.pending = new Map();
+        this.host.addController(this);
+    }
+    hostConnected() { }
+    get enabled() {
+        return Boolean(this.host.editing?.enabled);
+    }
+    get mode() {
+        return this.host.editing?.mode ?? DEFAULT_EDITING_CONFIG.mode;
+    }
+    get trigger() {
+        return this.host.editing?.trigger ?? DEFAULT_EDITING_CONFIG.trigger;
+    }
+    isEditable(column) {
+        return Boolean(this.enabled && column.editable && !column.hidden);
+    }
+    isCellEditing(rowIndex, columnKey) {
+        return this.activeCell?.rowIndex === rowIndex && this.activeCell?.columnKey === columnKey;
+    }
+    isRowEditing(rowIndex) {
+        return this.activeRow?.rowIndex === rowIndex;
+    }
+    async editCell(rowIndex, columnKey) {
+        if (!this.enabled)
+            return false;
+        const column = this.host.getColumn(columnKey);
+        if (!column || !this.isEditable(column))
+            return false;
+        const data = this.host.pageItems[rowIndex];
+        if (!data)
+            return false;
+        if (this.mode === 'row') {
+            if (!this.activeRow) {
+                await this.editRow(rowIndex);
+            }
+            else if (this.activeRow.rowIndex !== rowIndex) {
+                const committed = await this.commitRow();
+                if (!committed)
+                    return false;
+                await this.editRow(rowIndex);
+            }
+        }
+        else if (this.activeCell && !this.isCellEditing(rowIndex, columnKey)) {
+            await this.commitCell();
+        }
+        this.activeCell = { rowIndex, columnKey, data };
+        this.host.requestUpdate();
+        return true;
+    }
+    async editRow(rowIndex) {
+        if (!this.enabled || this.mode !== 'row')
+            return false;
+        const data = this.host.pageItems[rowIndex];
+        if (!data)
+            return false;
+        if (this.activeRow && this.activeRow.rowIndex !== rowIndex) {
+            const committed = await this.commitRow();
+            if (!committed)
+                return false;
+        }
+        if (this.activeRow?.rowIndex === rowIndex)
+            return true;
+        this.activeRow = { rowIndex, data };
+        this.pending.clear();
+        this.host.requestUpdate();
+        this.host.emitEvent('rowEditStarted', { detail: { rowIndex } });
+        return true;
+    }
+    async commitCell(value) {
+        const active = this.activeCell;
+        if (!active)
+            return false;
+        const { rowIndex, columnKey, data } = active;
+        const oldValue = data[columnKey];
+        const candidate = value === undefined ? oldValue : value;
+        if (this.mode === 'cell') {
+            if (Object.is(candidate, oldValue)) {
+                this.activeCell = null;
+                this.host.requestUpdate();
+                return true;
+            }
+            const proceed = this.host.emitEvent('cellValueChanging', {
+                detail: { key: columnKey, rowIndex, data, oldValue, newValue: candidate },
+                cancelable: true,
+            });
+            if (!proceed)
+                return false;
+            data[columnKey] = candidate;
+            this.activeCell = null;
+            this.host.requestUpdate(PIPELINE);
+            await this.host.updateComplete;
+            this.host.emitEvent('cellValueChanged', {
+                detail: { key: columnKey, rowIndex, data, value: candidate },
+            });
+            return true;
+        }
+        if (!Object.is(candidate, oldValue)) {
+            this.pending.set(columnKey, candidate);
+        }
+        this.activeCell = null;
+        this.host.requestUpdate();
+        return true;
+    }
+    async commitImmediate(rowIndex, columnKey, value) {
+        if (!this.enabled)
+            return false;
+        const column = this.host.getColumn(columnKey);
+        if (!column || !this.isEditable(column))
+            return false;
+        const data = this.host.pageItems[rowIndex];
+        if (!data)
+            return false;
+        const oldValue = data[columnKey];
+        if (Object.is(value, oldValue))
+            return true;
+        const proceed = this.host.emitEvent('cellValueChanging', {
+            detail: { key: columnKey, rowIndex, data, oldValue, newValue: value },
+            cancelable: true,
+        });
+        if (!proceed)
+            return false;
+        data[columnKey] = value;
+        this.host.requestUpdate(PIPELINE);
+        await this.host.updateComplete;
+        this.host.emitEvent('cellValueChanged', {
+            detail: { key: columnKey, rowIndex, data, value },
+        });
+        return true;
+    }
+    cancelCell() {
+        if (!this.activeCell)
+            return;
+        this.activeCell = null;
+        this.host.requestUpdate();
+    }
+    async commitRow() {
+        const active = this.activeRow;
+        if (!active)
+            return false;
+        const { rowIndex, data } = active;
+        if (this.activeCell?.rowIndex === rowIndex) {
+            await this.commitCell();
+        }
+        for (const [columnKey, candidate] of this.pending) {
+            const oldValue = data[columnKey];
+            if (Object.is(candidate, oldValue))
+                continue;
+            const proceed = this.host.emitEvent('cellValueChanging', {
+                detail: { key: columnKey, rowIndex, data, oldValue, newValue: candidate },
+                cancelable: true,
+            });
+            if (!proceed)
+                return false;
+            data[columnKey] = candidate;
+            this.host.emitEvent('cellValueChanged', {
+                detail: { key: columnKey, rowIndex, data, value: candidate },
+            });
+        }
+        this.pending.clear();
+        this.activeRow = null;
+        this.host.requestUpdate(PIPELINE);
+        await this.host.updateComplete;
+        this.host.emitEvent('rowEditEnded', { detail: { rowIndex, committed: true } });
+        return true;
+    }
+    cancelRow() {
+        if (!this.activeRow)
+            return;
+        const { rowIndex } = this.activeRow;
+        this.activeCell = null;
+        this.activeRow = null;
+        this.pending.clear();
+        this.host.requestUpdate();
+        this.host.emitEvent('rowEditEnded', { detail: { rowIndex, committed: false } });
+    }
+    getValue(rowIndex, columnKey) {
+        if (this.mode === 'row' &&
+            this.activeRow?.rowIndex === rowIndex &&
+            this.pending.has(columnKey)) {
+            return this.pending.get(columnKey);
+        }
+        const data = this.host.pageItems[rowIndex];
+        return data ? data[columnKey] : undefined;
+    }
+}
+//# sourceMappingURL=editing.js.map

package/controllers/editing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editing.js","sourceRoot":"","sources":["../../src/controllers/editing.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC;IAClD,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAkB;IACxB,OAAO,EAAE,aAA4B;CACtC,CAAC,CAAC;AAsBH,MAAM,OAAO,iBAAiB;IAc5B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAZhC,eAAU,GAAyB,IAAI,CAAC;QAGxC,cAAS,GAAyC,IAAI,CAAC;QAOvD,YAAO,GAA0B,IAAI,GAAG,EAAE,CAAC;QAGhD,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,OAAO,EAAE,OAAO,CAAC,CAAC;IAC7C,CAAC;IAKD,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,sBAAsB,CAAC,IAAI,CAAC;IAChE,CAAC;IAKD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,IAAI,sBAAsB,CAAC,OAAO,CAAC;IACtE,CAAC;IAKM,UAAU,CAAC,MAA8B;QAC9C,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACpE,CAAC;IAKM,aAAa,CAAC,QAAgB,EAAE,SAAkB;QACvD,OAAO,IAAI,CAAC,UAAU,EAAE,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,KAAK,SAAS,CAAC;IAC5F,CAAC;IAKM,YAAY,CAAC,QAAgB;QAClC,OAAO,IAAI,CAAC,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC;IAC/C,CAAC;IAUM,KAAK,CAAC,QAAQ,CAAC,QAAgB,EAAE,SAAkB;QACxD,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YAAE,OAAO,KAAK,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAkB,CAAC;QAC5D,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QAExB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC/B,CAAC;iBAAM,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAGhD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;gBACzC,IAAI,CAAC,SAAS;oBAAE,OAAO,KAAK,CAAC;gBAC7B,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC;YAEvE,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1B,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAMM,KAAK,CAAC,OAAO,CAAC,QAAgB;QACnC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;YAAE,OAAO,KAAK,CAAC;QACvD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAkB,CAAC;QAC5D,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC3D,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;YACzC,IAAI,CAAC,SAAS;gBAAE,OAAO,KAAK,CAAC;QAC/B,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,QAAQ,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QACvD,IAAI,CAAC,SAAS,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;QAChE,OAAO,IAAI,CAAC;IACd,CAAC;IAWM,KAAK,CAAC,UAAU,CAAC,KAAe;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;QAC/B,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC1B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;QAC7C,MAAM,QAAQ,GAAI,IAAgC,CAAC,SAAmB,CAAC,CAAC;QACxE,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;QAEzD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,IAAI,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC;gBACnC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC1B,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE;gBACvD,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;gBACzE,UAAU,EAAE,IAAI;aACjB,CAAC,CAAC;YACH,IAAI,CAAC,OAAO;gBAAE,OAAO,KAAK,CAAC;YAC1B,IAAgC,CAAC,SAAmB,CAAC,GAAG,SAAS,CAAC;YACnE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAClC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;gBACtC,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;aAC7D,CAAC,CAAC;YACH,OAAO,IAAI,CAAC;QACd,CAAC;QAGD,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAWM,KAAK,CAAC,eAAe,CAC1B,QAAgB,EAChB,SAAkB,EAClB,KAAc;QAEd,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YAAE,OAAO,KAAK,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAkB,CAAC;QAC5D,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,MAAM,QAAQ,GAAI,IAAgC,CAAC,SAAmB,CAAC,CAAC;QACxE,IAAI,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;YAAE,OAAO,IAAI,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE;YACvD,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACrE,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAC1B,IAAgC,CAAC,SAAmB,CAAC,GAAG,KAAK,CAAC;QAC/D,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;YACtC,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE;SAClD,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACd,CAAC;IAMM,UAAU;QACf,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IASM,KAAK,CAAC,SAAS;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;QAC9B,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC1B,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;QAGlC,IAAI,IAAI,CAAC,UAAU,EAAE,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC3C,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1B,CAAC;QAED,KAAK,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClD,MAAM,QAAQ,GAAI,IAAgC,CAAC,SAAmB,CAAC,CAAC;YACxE,IAAI,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;gBAAE,SAAS;YAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE;gBACvD,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;gBACzE,UAAU,EAAE,IAAI;aACjB,CAAC,CAAC;YACH,IAAI,CAAC,OAAO;gBAAE,OAAO,KAAK,CAAC;YAC1B,IAAgC,CAAC,SAAmB,CAAC,GAAG,SAAS,CAAC;YACnE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;gBACtC,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;aAC7D,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC/E,OAAO,IAAI,CAAC;IACd,CAAC;IAMM,SAAS;QACd,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAClF,CAAC;IAOM,QAAQ,CAAC,QAAgB,EAAE,SAAkB;QAClD,IACE,IAAI,CAAC,IAAI,KAAK,KAAK;YACnB,IAAI,CAAC,SAAS,EAAE,QAAQ,KAAK,QAAQ;YACrC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAC3B,CAAC;YACD,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAkB,CAAC;QAC5D,OAAO,IAAI,CAAC,CAAC,CAAE,IAAgC,CAAC,SAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACnF,CAAC;CACF","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type {\n  ColumnConfiguration,\n  EditMode,\n  EditTrigger,\n  GridHost,\n  Keys,\n} from '../internal/types.js';\n\n/**\n * The default editing configuration used when the grid has none set.\n */\nexport const DEFAULT_EDITING_CONFIG = Object.freeze({\n  enabled: false,\n  mode: 'cell' as EditMode,\n  trigger: 'doubleClick' as EditTrigger,\n});\n\ninterface ActiveCell<T> {\n  rowIndex: number;\n  columnKey: Keys<T>;\n  /**\n   * Live reference to the underlying record (preserved through the pipeline so\n   * the source array can be mutated on commit).\n   */\n  data: T;\n}\n\n/**\n * Reactive controller backing inline cell + row editing.\n *\n * @remarks\n * Holds the currently active cell / row, pending values for row-mode edits,\n * and is responsible for emitting the cancellable `cellValueChanging` event\n * and follow-up `cellValueChanged` event. The actual data mutation writes\n * through to {@link ApexGrid.data} so changes survive pipeline runs and\n * propagate to consumers that own the source array.\n */\nexport class EditingController<T extends object> implements ReactiveController {\n  /** The cell currently in edit mode, or `null`. */\n  public activeCell: ActiveCell<T> | null = null;\n\n  /** The row currently in edit mode (row mode only), or `null`. */\n  public activeRow: { rowIndex: number; data: T } | null = null;\n\n  /**\n   * Pending values keyed by column for the currently editing row. Populated in\n   * row mode as the user edits individual cells; flushed on\n   * {@link commitRow}.\n   */\n  public pending: Map<Keys<T>, unknown> = new Map();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  /**\n   * Whether editing is enabled at the grid level.\n   */\n  public get enabled(): boolean {\n    return Boolean(this.host.editing?.enabled);\n  }\n\n  /**\n   * The resolved edit mode (`'cell'` if unset).\n   */\n  public get mode(): EditMode {\n    return this.host.editing?.mode ?? DEFAULT_EDITING_CONFIG.mode;\n  }\n\n  /**\n   * The resolved edit trigger (`'doubleClick'` if unset).\n   */\n  public get trigger(): EditTrigger {\n    return this.host.editing?.trigger ?? DEFAULT_EDITING_CONFIG.trigger;\n  }\n\n  /**\n   * Whether the given column can be edited.\n   */\n  public isEditable(column: ColumnConfiguration<T>): boolean {\n    return Boolean(this.enabled && column.editable && !column.hidden);\n  }\n\n  /**\n   * Whether the cell `(rowIndex, columnKey)` is currently in edit mode.\n   */\n  public isCellEditing(rowIndex: number, columnKey: Keys<T>): boolean {\n    return this.activeCell?.rowIndex === rowIndex && this.activeCell?.columnKey === columnKey;\n  }\n\n  /**\n   * Whether the given row is currently in edit mode (row mode).\n   */\n  public isRowEditing(rowIndex: number): boolean {\n    return this.activeRow?.rowIndex === rowIndex;\n  }\n\n  /**\n   * Begins editing the cell at `(rowIndex, columnKey)`. Auto-commits any cell\n   * already in edit mode (in cell mode); in row mode it switches the active\n   * cell within the same row and rejects cross-row moves.\n   *\n   * @returns `true` if edit started, `false` if rejected (column not editable\n   * or row-mode constraint violated).\n   */\n  public async editCell(rowIndex: number, columnKey: Keys<T>): Promise<boolean> {\n    if (!this.enabled) return false;\n    const column = this.host.getColumn(columnKey);\n    if (!column || !this.isEditable(column)) return false;\n    const data = this.host.pageItems[rowIndex] as T | undefined;\n    if (!data) return false;\n\n    if (this.mode === 'row') {\n      if (!this.activeRow) {\n        await this.editRow(rowIndex);\n      } else if (this.activeRow.rowIndex !== rowIndex) {\n        // Switching rows in row mode — commit pending edits in the previous row\n        // before starting elsewhere.\n        const committed = await this.commitRow();\n        if (!committed) return false;\n        await this.editRow(rowIndex);\n      }\n    } else if (this.activeCell && !this.isCellEditing(rowIndex, columnKey)) {\n      // Cell mode — commit any in-flight cell before switching.\n      await this.commitCell();\n    }\n\n    this.activeCell = { rowIndex, columnKey, data };\n    this.host.requestUpdate();\n    return true;\n  }\n\n  /**\n   * Begins editing the given row in row mode. Emits `rowEditStarted` on\n   * success. No-op in cell mode.\n   */\n  public async editRow(rowIndex: number): Promise<boolean> {\n    if (!this.enabled || this.mode !== 'row') return false;\n    const data = this.host.pageItems[rowIndex] as T | undefined;\n    if (!data) return false;\n    if (this.activeRow && this.activeRow.rowIndex !== rowIndex) {\n      const committed = await this.commitRow();\n      if (!committed) return false;\n    }\n    if (this.activeRow?.rowIndex === rowIndex) return true;\n    this.activeRow = { rowIndex, data };\n    this.pending.clear();\n    this.host.requestUpdate();\n    this.host.emitEvent('rowEditStarted', { detail: { rowIndex } });\n    return true;\n  }\n\n  /**\n   * Commits a candidate value for the currently editing cell. In cell mode the\n   * value is written through to {@link ApexGrid.data}; in row mode it is staged\n   * in {@link pending} until {@link commitRow} is called.\n   *\n   * @param value - The candidate value.\n   * @returns `true` if accepted (or staged), `false` if rejected by\n   * `cellValueChanging.preventDefault()`.\n   */\n  public async commitCell(value?: unknown): Promise<boolean> {\n    const active = this.activeCell;\n    if (!active) return false;\n    const { rowIndex, columnKey, data } = active;\n    const oldValue = (data as Record<string, unknown>)[columnKey as string];\n    const candidate = value === undefined ? oldValue : value;\n\n    if (this.mode === 'cell') {\n      if (Object.is(candidate, oldValue)) {\n        this.activeCell = null;\n        this.host.requestUpdate();\n        return true;\n      }\n      const proceed = this.host.emitEvent('cellValueChanging', {\n        detail: { key: columnKey, rowIndex, data, oldValue, newValue: candidate },\n        cancelable: true,\n      });\n      if (!proceed) return false;\n      (data as Record<string, unknown>)[columnKey as string] = candidate;\n      this.activeCell = null;\n      this.host.requestUpdate(PIPELINE);\n      await this.host.updateComplete;\n      this.host.emitEvent('cellValueChanged', {\n        detail: { key: columnKey, rowIndex, data, value: candidate },\n      });\n      return true;\n    }\n\n    // Row mode — stage and exit cell edit (row stays open).\n    if (!Object.is(candidate, oldValue)) {\n      this.pending.set(columnKey, candidate);\n    }\n    this.activeCell = null;\n    this.host.requestUpdate();\n    return true;\n  }\n\n  /**\n   * Writes `value` directly to the cell at `(rowIndex, columnKey)` without\n   * entering edit mode. Used by interactive display widgets (e.g. the boolean\n   * checkbox) that handle their own input. Goes through the same\n   * `cellValueChanging` / `cellValueChanged` event path as a normal commit.\n   *\n   * @returns `true` if the value was applied, `false` if rejected by\n   * `cellValueChanging.preventDefault()` or the column is not editable.\n   */\n  public async commitImmediate(\n    rowIndex: number,\n    columnKey: Keys<T>,\n    value: unknown\n  ): Promise<boolean> {\n    if (!this.enabled) return false;\n    const column = this.host.getColumn(columnKey);\n    if (!column || !this.isEditable(column)) return false;\n    const data = this.host.pageItems[rowIndex] as T | undefined;\n    if (!data) return false;\n    const oldValue = (data as Record<string, unknown>)[columnKey as string];\n    if (Object.is(value, oldValue)) return true;\n    const proceed = this.host.emitEvent('cellValueChanging', {\n      detail: { key: columnKey, rowIndex, data, oldValue, newValue: value },\n      cancelable: true,\n    });\n    if (!proceed) return false;\n    (data as Record<string, unknown>)[columnKey as string] = value;\n    this.host.requestUpdate(PIPELINE);\n    await this.host.updateComplete;\n    this.host.emitEvent('cellValueChanged', {\n      detail: { key: columnKey, rowIndex, data, value },\n    });\n    return true;\n  }\n\n  /**\n   * Discards the current cell edit without writing. In row mode the row edit\n   * stays open.\n   */\n  public cancelCell(): void {\n    if (!this.activeCell) return;\n    this.activeCell = null;\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Commits all pending edits for the currently editing row. Emits\n   * `cellValueChanging` for every changed cell and `rowEditEnded` at the end.\n   *\n   * @returns `true` if the row was applied, `false` if any cell change was\n   * cancelled (the row remains in edit mode in that case).\n   */\n  public async commitRow(): Promise<boolean> {\n    const active = this.activeRow;\n    if (!active) return false;\n    const { rowIndex, data } = active;\n\n    // Make sure any open cell editor flushes its pending value first.\n    if (this.activeCell?.rowIndex === rowIndex) {\n      await this.commitCell();\n    }\n\n    for (const [columnKey, candidate] of this.pending) {\n      const oldValue = (data as Record<string, unknown>)[columnKey as string];\n      if (Object.is(candidate, oldValue)) continue;\n      const proceed = this.host.emitEvent('cellValueChanging', {\n        detail: { key: columnKey, rowIndex, data, oldValue, newValue: candidate },\n        cancelable: true,\n      });\n      if (!proceed) return false;\n      (data as Record<string, unknown>)[columnKey as string] = candidate;\n      this.host.emitEvent('cellValueChanged', {\n        detail: { key: columnKey, rowIndex, data, value: candidate },\n      });\n    }\n\n    this.pending.clear();\n    this.activeRow = null;\n    this.host.requestUpdate(PIPELINE);\n    await this.host.updateComplete;\n    this.host.emitEvent('rowEditEnded', { detail: { rowIndex, committed: true } });\n    return true;\n  }\n\n  /**\n   * Discards every pending edit for the active row and exits row edit mode.\n   * Emits `rowEditEnded` with `committed: false`.\n   */\n  public cancelRow(): void {\n    if (!this.activeRow) return;\n    const { rowIndex } = this.activeRow;\n    this.activeCell = null;\n    this.activeRow = null;\n    this.pending.clear();\n    this.host.requestUpdate();\n    this.host.emitEvent('rowEditEnded', { detail: { rowIndex, committed: false } });\n  }\n\n  /**\n   * Returns the current pending or committed value for `(rowIndex, columnKey)`.\n   * Cells in row mode read this so unstaged-but-pending values are reflected\n   * during the edit.\n   */\n  public getValue(rowIndex: number, columnKey: Keys<T>): unknown {\n    if (\n      this.mode === 'row' &&\n      this.activeRow?.rowIndex === rowIndex &&\n      this.pending.has(columnKey)\n    ) {\n      return this.pending.get(columnKey);\n    }\n    const data = this.host.pageItems[rowIndex] as T | undefined;\n    return data ? (data as Record<string, unknown>)[columnKey as string] : undefined;\n  }\n}\n"]}

package/controllers/expansion.d.ts

@@ -0,0 +1,68 @@
+import type { ReactiveController } from 'lit';
+import type { GridHost } from '../internal/types.js';
+/**
+ * The default expansion configuration used when the grid has none set.
+ *
+ * @remarks
+ * `detailTemplate` defaults to `null` here — the controller will refuse to
+ * toggle rows when the configuration is missing or no template is provided.
+ */
+export declare const DEFAULT_EXPANSION_CONFIG: Readonly<{
+    enabled: false;
+    showToggleColumn: true;
+}>;
+/**
+ * Reactive controller backing row expansion (master-detail).
+ *
+ * @remarks
+ * Expansion state is reference-based — the controller holds a `Set` of row
+ * data references so the expansion set survives sort / filter / pagination as
+ * long as those operations preserve row identity (the default in-place
+ * pipeline does). Replacing {@link ApexGrid.data} wholesale invalidates any
+ * expanded rows that are no longer present; consumers should call
+ * {@link collapseAll} or re-apply expansion afterwards.
+ *
+ * Mutations go through the cancellable `rowExpanding` event and emit a
+ * follow-up `rowExpanded` event, mirroring the pattern used by selection
+ * and editing.
+ */
+export declare class ExpansionController<T extends object> implements ReactiveController {
+    #private;
+    protected host: GridHost<T>;
+    /** Set of currently expanded row data references. */
+    expanded: Set<T>;
+    constructor(host: GridHost<T>);
+    hostConnected(): void;
+    /** Whether expansion is enabled at the grid level. */
+    get enabled(): boolean;
+    /** Whether the built-in chevron toggle column should be rendered. */
+    get showToggleColumn(): boolean;
+    /** Whether `row` is currently expanded. */
+    isExpanded(row: T): boolean;
+    /**
+     * Whether `row` is permitted to expand. Combines the grid-wide `enabled`
+     * flag, the presence of a `detailTemplate`, and the optional per-row
+     * `isExpandable` predicate.
+     */
+    canExpand(row: T): boolean;
+    /** Snapshot of currently expanded rows in insertion order. */
+    expandedRows(): T[];
+    /** Toggles the expansion of `row`. */
+    toggleRow(row: T): Promise<boolean>;
+    /** Expands `row`. No-op when the row is already expanded or not expandable. */
+    expandRow(row: T): Promise<boolean>;
+    /** Collapses `row`. No-op when the row is not expanded. */
+    collapseRow(row: T): Promise<boolean>;
+    /**
+     * Expands every expandable row in {@link ApexGrid.dataView}. Skips rows
+     * the optional `isExpandable` predicate rejects.
+     */
+    expandAll(): Promise<boolean>;
+    /** Collapses every currently expanded row. */
+    collapseAll(): Promise<boolean>;
+    /**
+     * Replaces the expansion set with `rows`. Used by the public
+     * {@link ApexGrid.expandedRows} setter for programmatic control.
+     */
+    replaceExpansion(rows: ReadonlyArray<T>): Promise<boolean>;
+}

package/controllers/expansion.js

@@ -0,0 +1,126 @@
+export const DEFAULT_EXPANSION_CONFIG = Object.freeze({
+    enabled: false,
+    showToggleColumn: true,
+});
+export class ExpansionController {
+    constructor(host) {
+        this.host = host;
+        this.expanded = new Set();
+        this.host.addController(this);
+    }
+    hostConnected() { }
+    get enabled() {
+        return Boolean(this.host.expansion?.enabled);
+    }
+    get showToggleColumn() {
+        return (this.enabled &&
+            (this.host.expansion?.showToggleColumn ?? DEFAULT_EXPANSION_CONFIG.showToggleColumn));
+    }
+    isExpanded(row) {
+        return this.expanded.has(row);
+    }
+    canExpand(row) {
+        if (!this.enabled)
+            return false;
+        if (typeof this.host.expansion?.detailTemplate !== 'function')
+            return false;
+        const predicate = this.host.expansion?.isExpandable;
+        return predicate ? Boolean(predicate(row)) : true;
+    }
+    expandedRows() {
+        return Array.from(this.expanded);
+    }
+    async toggleRow(row) {
+        if (!this.canExpand(row) && !this.expanded.has(row))
+            return false;
+        const next = new Set(this.expanded);
+        if (next.has(row))
+            next.delete(row);
+        else
+            next.add(row);
+        return this.#commit(next);
+    }
+    async expandRow(row) {
+        if (this.expanded.has(row))
+            return true;
+        if (!this.canExpand(row))
+            return false;
+        const next = new Set(this.expanded);
+        next.add(row);
+        return this.#commit(next);
+    }
+    async collapseRow(row) {
+        if (!this.expanded.has(row))
+            return true;
+        const next = new Set(this.expanded);
+        next.delete(row);
+        return this.#commit(next);
+    }
+    async expandAll() {
+        if (!this.enabled || typeof this.host.expansion?.detailTemplate !== 'function')
+            return false;
+        const predicate = this.host.expansion?.isExpandable;
+        const next = new Set(this.expanded);
+        for (const row of this.host.dataView) {
+            if (!predicate || predicate(row))
+                next.add(row);
+        }
+        return this.#commit(next);
+    }
+    async collapseAll() {
+        if (this.expanded.size === 0)
+            return true;
+        return this.#commit(new Set());
+    }
+    async replaceExpansion(rows) {
+        if (!this.enabled)
+            return false;
+        const predicate = this.host.expansion?.isExpandable;
+        const next = new Set(predicate ? rows.filter((row) => predicate(row)) : rows);
+        return this.#commit(next);
+    }
+    async #commit(next) {
+        const added = [];
+        const removed = [];
+        for (const row of next) {
+            if (!this.expanded.has(row))
+                added.push(row);
+        }
+        for (const row of this.expanded) {
+            if (!next.has(row))
+                removed.push(row);
+        }
+        if (added.length === 0 && removed.length === 0)
+            return true;
+        const proceed = this.host.emitEvent('rowExpanding', {
+            detail: {
+                added,
+                removed,
+                current: Array.from(this.expanded),
+                next: Array.from(next),
+            },
+            cancelable: true,
+        });
+        if (!proceed)
+            return false;
+        this.expanded = next;
+        this.host.requestUpdate();
+        if (added.length === 1 && removed.length === 0) {
+            this.host.announce('Row expanded');
+        }
+        else if (added.length === 0 && removed.length === 1) {
+            this.host.announce('Row collapsed');
+        }
+        else if (added.length > 0 && next.size === added.length + this.expanded.size - added.length) {
+            this.host.announce(`${added.length} rows expanded`);
+        }
+        else if (removed.length > 0 && next.size === 0) {
+            this.host.announce('All rows collapsed');
+        }
+        this.host.emitEvent('rowExpanded', {
+            detail: { added, removed, expanded: Array.from(this.expanded) },
+        });
+        return true;
+    }
+}
+//# sourceMappingURL=expansion.js.map

package/controllers/expansion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion.js","sourceRoot":"","sources":["../../src/controllers/expansion.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type { GridHost } from '../internal/types.js';\n\n/**\n * The default expansion configuration used when the grid has none set.\n *\n * @remarks\n * `detailTemplate` defaults to `null` here — the controller will refuse to\n * toggle rows when the configuration is missing or no template is provided.\n */\nexport const DEFAULT_EXPANSION_CONFIG = Object.freeze({\n  enabled: false,\n  showToggleColumn: true,\n});\n\n/**\n * Reactive controller backing row expansion (master-detail).\n *\n * @remarks\n * Expansion state is reference-based — the controller holds a `Set` of row\n * data references so the expansion set survives sort / filter / pagination as\n * long as those operations preserve row identity (the default in-place\n * pipeline does). Replacing {@link ApexGrid.data} wholesale invalidates any\n * expanded rows that are no longer present; consumers should call\n * {@link collapseAll} or re-apply expansion afterwards.\n *\n * Mutations go through the cancellable `rowExpanding` event and emit a\n * follow-up `rowExpanded` event, mirroring the pattern used by selection\n * and editing.\n */\nexport class ExpansionController<T extends object> implements ReactiveController {\n  /** Set of currently expanded row data references. */\n  public expanded: Set<T> = new Set();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  /** Whether expansion is enabled at the grid level. */\n  public get enabled(): boolean {\n    return Boolean(this.host.expansion?.enabled);\n  }\n\n  /** Whether the built-in chevron toggle column should be rendered. */\n  public get showToggleColumn(): boolean {\n    return (\n      this.enabled &&\n      (this.host.expansion?.showToggleColumn ?? DEFAULT_EXPANSION_CONFIG.showToggleColumn)\n    );\n  }\n\n  /** Whether `row` is currently expanded. */\n  public isExpanded(row: T): boolean {\n    return this.expanded.has(row);\n  }\n\n  /**\n   * Whether `row` is permitted to expand. Combines the grid-wide `enabled`\n   * flag, the presence of a `detailTemplate`, and the optional per-row\n   * `isExpandable` predicate.\n   */\n  public canExpand(row: T): boolean {\n    if (!this.enabled) return false;\n    if (typeof this.host.expansion?.detailTemplate !== 'function') return false;\n    const predicate = this.host.expansion?.isExpandable;\n    return predicate ? Boolean(predicate(row)) : true;\n  }\n\n  /** Snapshot of currently expanded rows in insertion order. */\n  public expandedRows(): T[] {\n    return Array.from(this.expanded);\n  }\n\n  /** Toggles the expansion of `row`. */\n  public async toggleRow(row: T): Promise<boolean> {\n    if (!this.canExpand(row) && !this.expanded.has(row)) return false;\n    const next = new Set(this.expanded);\n    if (next.has(row)) next.delete(row);\n    else next.add(row);\n    return this.#commit(next);\n  }\n\n  /** Expands `row`. No-op when the row is already expanded or not expandable. */\n  public async expandRow(row: T): Promise<boolean> {\n    if (this.expanded.has(row)) return true;\n    if (!this.canExpand(row)) return false;\n    const next = new Set(this.expanded);\n    next.add(row);\n    return this.#commit(next);\n  }\n\n  /** Collapses `row`. No-op when the row is not expanded. */\n  public async collapseRow(row: T): Promise<boolean> {\n    if (!this.expanded.has(row)) return true;\n    const next = new Set(this.expanded);\n    next.delete(row);\n    return this.#commit(next);\n  }\n\n  /**\n   * Expands every expandable row in {@link ApexGrid.dataView}. Skips rows\n   * the optional `isExpandable` predicate rejects.\n   */\n  public async expandAll(): Promise<boolean> {\n    if (!this.enabled || typeof this.host.expansion?.detailTemplate !== 'function') return false;\n    const predicate = this.host.expansion?.isExpandable;\n    const next = new Set(this.expanded);\n    for (const row of this.host.dataView as ReadonlyArray<T>) {\n      if (!predicate || predicate(row)) next.add(row);\n    }\n    return this.#commit(next);\n  }\n\n  /** Collapses every currently expanded row. */\n  public async collapseAll(): Promise<boolean> {\n    if (this.expanded.size === 0) return true;\n    return this.#commit(new Set());\n  }\n\n  /**\n   * Replaces the expansion set with `rows`. Used by the public\n   * {@link ApexGrid.expandedRows} setter for programmatic control.\n   */\n  public async replaceExpansion(rows: ReadonlyArray<T>): Promise<boolean> {\n    if (!this.enabled) return false;\n    const predicate = this.host.expansion?.isExpandable;\n    const next = new Set(predicate ? rows.filter((row) => predicate(row)) : 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.expanded.has(row)) added.push(row);\n    }\n    for (const row of this.expanded) {\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('rowExpanding', {\n      detail: {\n        added,\n        removed,\n        current: Array.from(this.expanded),\n        next: Array.from(next),\n      },\n      cancelable: true,\n    });\n    if (!proceed) return false;\n\n    this.expanded = next;\n    this.host.requestUpdate();\n\n    if (added.length === 1 && removed.length === 0) {\n      this.host.announce('Row expanded');\n    } else if (added.length === 0 && removed.length === 1) {\n      this.host.announce('Row collapsed');\n    } else if (added.length > 0 && next.size === added.length + this.expanded.size - added.length) {\n      this.host.announce(`${added.length} rows expanded`);\n    } else if (removed.length > 0 && next.size === 0) {\n      this.host.announce('All rows collapsed');\n    }\n\n    this.host.emitEvent('rowExpanded', {\n      detail: { added, removed, expanded: Array.from(this.expanded) },\n    });\n    return true;\n  }\n}\n"]}

package/controllers/navigation.d.ts

@@ -2,15 +2,25 @@ import type { ReactiveController } from 'lit';
 import type { ActiveNode, GridHost, Keys } from '../internal/types.js';
 export declare class NavigationController<T extends object> implements ReactiveController {
     protected host: GridHost<T>;
-    protected handlers: Map<string, (() => void) | (() => void) | (() => void) | (() => void) | (() => void) | (() => void)>;
+    protected handlers: Map<string, (() => void) | (() => void) | (() => void) | (() => void) | (() => void) | (() => void) | (() => void)>;
     protected get virtualizer(): import("../components/virtualizer.js").default;
     protected state: Map<import("../internal/types.js").NavigationState, ActiveNode<any>>;
     protected _active: Readonly<ActiveNode<any>>;
-    protected get nextNode(): ActiveNode<T>;
-    protected get columns(): import("../index.js").ColumnConfiguration<T, keyof T>[];
-    protected get firstColumn(): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
-    protected getPreviousColumn(key: Keys<T>): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
-    protected getNextColumn(key: Keys<T>): (keyof T & string) | (keyof T & number) | (keyof T & symbol);
+    protected get nextNode(): {
+        column: keyof T;
+        row: number;
+    };
+    protected get columns(): Array<{
+        key: Keys<T>;
+        hidden?: boolean;
+    }>;
+    protected get visibleColumns(): {
+        key: Keys<T>;
+        hidden?: boolean;
+    }[];
+    protected get firstColumn(): Keys<T>;
+    protected getPreviousColumn(key: Keys<T>): Keys<T>;
+    protected getNextColumn(key: Keys<T>): Keys<T>;
     protected scrollToCell(node: ActiveNode<T>): void;
     get active(): ActiveNode<T>;
     set active(node: ActiveNode<T>);
@@ -21,6 +31,7 @@ export declare class NavigationController<T extends object> implements ReactiveC
     protected arrowUp(): void;
     protected arrowLeft(): void;
     protected arrowRight(): void;
+    protected toggleSelection(): void;
     hostConnected(): void;
     hostDisconnected(): void;
     navigate(event: KeyboardEvent): void;

package/controllers/navigation.js

@@ -1,5 +1,6 @@
-import ApexGridRow from '../components/row.js';
 import { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';
+import { GRID_ROW_TAG } from '../internal/tags.js';
+import { getDisplayColumns } from '../internal/utils.js';
 export class NavigationController {
     get virtualizer() {
         return this.host.scrollContainer;
@@ -11,19 +12,27 @@ export class NavigationController {
             : { ...node };
     }
     get columns() {
-        return this.host.columns;
+        return getDisplayColumns(this.host.columns);
+    }
+    get visibleColumns() {
+        return this.columns.filter((column) => !column.hidden);
     }
     get firstColumn() {
-        return this.host.getColumn(0).key ?? '';
+        const first = this.visibleColumns.at(0);
+        return (first?.key ?? this.host.columns[0]?.key);
     }
     getPreviousColumn(key) {
-        return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)) - 1, 0)].key;
+        const columns = this.visibleColumns;
+        const idx = columns.findIndex((column) => column.key === key);
+        return columns[Math.max(idx - 1, 0)].key;
     }
     getNextColumn(key) {
-        return this.columns[Math.min(this.columns.indexOf(this.host.getColumn(key)) + 1, this.columns.length - 1)].key;
+        const columns = this.visibleColumns;
+        const idx = columns.findIndex((column) => column.key === key);
+        return columns[Math.min(idx + 1, columns.length - 1)].key;
     }
     scrollToCell(node) {
-        const row = Array.from(this.virtualizer.querySelectorAll(ApexGridRow.tagName)).find((row) => row.index === node.row);
+        const row = Array.from(this.virtualizer.querySelectorAll(GRID_ROW_TAG)).find((row) => row.index === node.row);
         if (row) {
             row.cells
                 .find((cell) => cell.column.key === node.column)
@@ -48,6 +57,7 @@ export class NavigationController {
             ArrowRight: this.arrowRight,
             Home: this.home,
             End: this.end,
+            ' ': this.toggleSelection,
         }));
         this.state = NAVIGATION_STATE;
         this._active = SENTINEL_NODE;
@@ -58,13 +68,13 @@ export class NavigationController {
         this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
     }
     end() {
-        this.active = Object.assign(this.nextNode, { row: this.host.totalItems - 1 });
+        this.active = Object.assign(this.nextNode, { row: this.host.pageItems.length - 1 });
         this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
     }
     arrowDown() {
         const next = this.nextNode;
         this.active = Object.assign(next, {
-            row: Math.min(next.row + 1, this.host.totalItems - 1),
+            row: Math.min(next.row + 1, this.host.pageItems.length - 1),
         });
         this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
     }
@@ -83,6 +93,12 @@ export class NavigationController {
         this.active = Object.assign(next, { column: this.getNextColumn(next.column) });
         this.scrollToCell(this.active);
     }
+    toggleSelection() {
+        const data = this.host.pageItems[this.active.row];
+        if (!data)
+            return;
+        void this.host.toggleRowSelection(data);
+    }
     hostConnected() { }
     hostDisconnected() {
         this.active = SENTINEL_NODE;

package/controllers/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport ApexGridRow from '../components/row.js';\nimport { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';\nimport type { ActiveNode, GridHost, Keys } from '../internal/types.js';\n\nexport class NavigationController<T extends object> implements ReactiveController {\n  protected handlers = new Map(\n    Object.entries({\n      ArrowDown: this.arrowDown,\n      ArrowUp: this.arrowUp,\n      ArrowLeft: this.arrowLeft,\n      ArrowRight: this.arrowRight,\n      Home: this.home,\n      End: this.end,\n    })\n  );\n\n  protected get virtualizer() {\n    // @ts-expect-error - Protected member access\n    return this.host.scrollContainer;\n  }\n\n  protected state = NAVIGATION_STATE;\n  protected _active = SENTINEL_NODE;\n\n  protected get nextNode() {\n    const node = this.state.get('current')!;\n    return node === SENTINEL_NODE\n      ? { column: this.firstColumn, row: 0 }\n      : ({ ...node } as ActiveNode<T>);\n  }\n\n  protected get columns() {\n    return this.host.columns;\n  }\n\n  protected get firstColumn() {\n    return this.host.getColumn(0)!.key ?? '';\n  }\n\n  protected getPreviousColumn(key: Keys<T>) {\n    return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)!) - 1, 0)].key;\n  }\n\n  protected getNextColumn(key: Keys<T>) {\n    return this.columns[\n      Math.min(this.columns.indexOf(this.host.getColumn(key)!) + 1, this.columns.length - 1)\n    ].key;\n  }\n\n  protected scrollToCell(node: ActiveNode<T>) {\n    const row = Array.from(this.virtualizer.querySelectorAll(ApexGridRow.tagName)).find(\n      (row) => row.index === node.row\n    ) as unknown as ApexGridRow<T>;\n\n    if (row) {\n      row.cells\n        .find((cell) => cell.column.key === node.column)\n        ?.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  public get active() {\n    return this._active as ActiveNode<T>;\n  }\n\n  public set active(node: ActiveNode<T>) {\n    this._active = node;\n    this.state.set('previous', this._active);\n    this.state.set('current', node);\n    this.host.requestUpdate();\n  }\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  protected home() {\n    this.active = Object.assign(this.nextNode, { row: 0 });\n    this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected end() {\n    this.active = Object.assign(this.nextNode, { row: this.host.totalItems - 1 });\n    this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowDown() {\n    const next = this.nextNode;\n\n    this.active = Object.assign(next, {\n      row: Math.min(next.row + 1, this.host.totalItems - 1),\n    });\n    this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowUp() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });\n    this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowLeft() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { column: this.getPreviousColumn(next.column) });\n    this.scrollToCell(this.active);\n  }\n\n  protected arrowRight() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { column: this.getNextColumn(next.column) });\n    this.scrollToCell(this.active);\n  }\n\n  public hostConnected() {}\n\n  public hostDisconnected() {\n    this.active = SENTINEL_NODE as ActiveNode<T>;\n    this.state = NAVIGATION_STATE;\n  }\n\n  public navigate(event: KeyboardEvent) {\n    if (this.handlers.has(event.key)) {\n      event.preventDefault();\n      this.handlers.get(event.key)!.call(this);\n    }\n  }\n}\n"]}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type ApexGridRow from '../components/row.js';\nimport { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, GridHost, Keys } from '../internal/types.js';\nimport { getDisplayColumns } from '../internal/utils.js';\n\nexport class NavigationController<T extends object> implements ReactiveController {\n  protected handlers = new Map(\n    Object.entries({\n      ArrowDown: this.arrowDown,\n      ArrowUp: this.arrowUp,\n      ArrowLeft: this.arrowLeft,\n      ArrowRight: this.arrowRight,\n      Home: this.home,\n      End: this.end,\n      ' ': this.toggleSelection,\n    })\n  );\n\n  protected get virtualizer() {\n    // @ts-expect-error - Protected member access\n    return this.host.scrollContainer;\n  }\n\n  protected state = NAVIGATION_STATE;\n  protected _active = SENTINEL_NODE;\n\n  protected get nextNode() {\n    const node = this.state.get('current')!;\n    return node === SENTINEL_NODE\n      ? { column: this.firstColumn, row: 0 }\n      : ({ ...node } as ActiveNode<T>);\n  }\n\n  protected get columns(): Array<{ key: Keys<T>; hidden?: boolean }> {\n    return getDisplayColumns(this.host.columns) as unknown as Array<{\n      key: Keys<T>;\n      hidden?: boolean;\n    }>;\n  }\n\n  protected get visibleColumns() {\n    return this.columns.filter((column) => !column.hidden);\n  }\n\n  protected get firstColumn(): Keys<T> {\n    const first = this.visibleColumns.at(0);\n    return (first?.key ?? (this.host.columns[0]?.key as Keys<T>)) as Keys<T>;\n  }\n\n  protected getPreviousColumn(key: Keys<T>): Keys<T> {\n    const columns = this.visibleColumns;\n    const idx = columns.findIndex((column) => column.key === key);\n    return columns[Math.max(idx - 1, 0)].key;\n  }\n\n  protected getNextColumn(key: Keys<T>): Keys<T> {\n    const columns = this.visibleColumns;\n    const idx = columns.findIndex((column) => column.key === key);\n    return columns[Math.min(idx + 1, columns.length - 1)].key;\n  }\n\n  protected scrollToCell(node: ActiveNode<T>) {\n    const row = Array.from(this.virtualizer.querySelectorAll(GRID_ROW_TAG)).find(\n      (row) => (row as unknown as ApexGridRow<T>).index === node.row\n    ) as unknown as ApexGridRow<T>;\n\n    if (row) {\n      row.cells\n        .find((cell) => cell.column.key === node.column)\n        ?.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  public get active() {\n    return this._active as ActiveNode<T>;\n  }\n\n  public set active(node: ActiveNode<T>) {\n    this._active = node;\n    this.state.set('previous', this._active);\n    this.state.set('current', node);\n    this.host.requestUpdate();\n  }\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  protected home() {\n    this.active = Object.assign(this.nextNode, { row: 0 });\n    this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected end() {\n    this.active = Object.assign(this.nextNode, { row: this.host.pageItems.length - 1 });\n    this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowDown() {\n    const next = this.nextNode;\n\n    this.active = Object.assign(next, {\n      row: Math.min(next.row + 1, this.host.pageItems.length - 1),\n    });\n    this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowUp() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });\n    this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  protected arrowLeft() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { column: this.getPreviousColumn(next.column) });\n    this.scrollToCell(this.active);\n  }\n\n  protected arrowRight() {\n    const next = this.nextNode;\n    this.active = Object.assign(next, { column: this.getNextColumn(next.column) });\n    this.scrollToCell(this.active);\n  }\n\n  protected toggleSelection() {\n    // Space on the focused grid toggles selection of the active row.\n    // No-op when selection is disabled or there's no active row.\n    const data = this.host.pageItems[this.active.row] as T | undefined;\n    if (!data) return;\n    void this.host.toggleRowSelection(data);\n  }\n\n  public hostConnected() {}\n\n  public hostDisconnected() {\n    this.active = SENTINEL_NODE as ActiveNode<T>;\n    this.state = NAVIGATION_STATE;\n  }\n\n  public navigate(event: KeyboardEvent) {\n    if (this.handlers.has(event.key)) {\n      event.preventDefault();\n      this.handlers.get(event.key)!.call(this);\n    }\n  }\n}\n"]}