apex-grid 3.5.0 → 3.6.0

package/controllers/history.js.map

@@ -1 +1 @@
-{"version":3,"file":"history.js","sourceRoot":"","sources":["../../src/controllers/history.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { GridHost, Keys } from '../internal/types.js';\n\n/** Default number of commands retained on the undo stack. */\nconst DEFAULT_STACK_SIZE = 100;\n\n/**\n * A single recorded cell mutation: the record reference, its column, and the\n * before / after values. `rowIndex` is the view-relative index at record time\n * and is used only for the replayed `cellValueChanged` event (the live record\n * reference is authoritative).\n */\nexport interface CellChange<T extends object> {\n  record: T;\n  key: Keys<T>;\n  rowIndex: number;\n  oldValue: unknown;\n  newValue: unknown;\n}\n\n/**\n * A reversible unit of work on the history stacks.\n *\n * @remarks\n * `apply` re-performs the change (redo); `revert` undoes it. Cell-data edits use\n * {@link CellEditCommand}; the interface is deliberately open so later command\n * kinds (e.g. view-state) can join the same stacks.\n */\nexport interface EditCommand {\n  apply(): void;\n  revert(): void;\n}\n\n/**\n * One or more cell mutations that undo / redo as a single step. A single-cell\n * edit holds one change; a row-mode commit or a bulk paste / fill holds many so\n * one Ctrl+Z reverts the whole batch.\n */\nexport class CellEditCommand<T extends object> implements EditCommand {\n  constructor(\n    private host: GridHost<T>,\n    public readonly changes: ReadonlyArray<CellChange<T>>\n  ) {}\n\n  public apply(): void {\n    for (const change of this.changes) {\n      this.#write(change, change.newValue);\n    }\n  }\n\n  public revert(): void {\n    // Revert in reverse so overlapping writes to the same cell unwind cleanly.\n    for (let i = this.changes.length - 1; i >= 0; i -= 1) {\n      this.#write(this.changes[i], this.changes[i].oldValue);\n    }\n  }\n\n  #write(change: CellChange<T>, value: unknown): void {\n    (change.record as Record<string, unknown>)[change.key as string] = value;\n    // Re-emit `cellValueChanged` (never the cancellable `cellValueChanging`) so\n    // data-bound consumers stay in sync. Validation and history recording are\n    // intentionally skipped on replay. Prefer the record's current view index\n    // when it is on the page; fall back to the recorded one.\n    const liveIndex = this.host.pageItems.indexOf(change.record);\n    this.host.emitEvent('cellValueChanged', {\n      detail: {\n        key: change.key,\n        rowIndex: liveIndex >= 0 ? liveIndex : change.rowIndex,\n        data: change.record,\n        value,\n      },\n    });\n  }\n}\n\n/**\n * Reactive controller owning the undo / redo stacks for cell-data edits.\n *\n * @remarks\n * Recording is driven from the {@link EditingController.applyCellEdit} choke\n * point: every successful write calls {@link record}. Single edits push one\n * command; {@link beginBatch} / {@link endBatch} coalesce a row-mode commit or a\n * bulk paste / fill into one command. Disabled unless\n * `editing.history.enabled` is set, so the community grid pays nothing.\n */\nexport class HistoryController<T extends object> implements ReactiveController {\n  #undo: EditCommand[] = [];\n  #redo: EditCommand[] = [];\n  #batch: CellChange<T>[] | null = null;\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected(): void {}\n\n  /** Whether undo / redo tracking is enabled. */\n  public get enabled(): boolean {\n    return Boolean(this.host.editing?.history?.enabled);\n  }\n\n  /** Maximum number of commands retained on the undo stack. */\n  public get stackSize(): number {\n    const size = this.host.editing?.history?.stackSize;\n    return typeof size === 'number' && size > 0 ? size : DEFAULT_STACK_SIZE;\n  }\n\n  /** Whether there is at least one command to undo. */\n  public get canUndo(): boolean {\n    return this.#undo.length > 0;\n  }\n\n  /** Whether there is at least one command to redo. */\n  public get canRedo(): boolean {\n    return this.#redo.length > 0;\n  }\n\n  /**\n   * Records a single cell mutation. Routed to the open batch when one is active,\n   * otherwise pushed immediately as a standalone command. No-op when history is\n   * disabled.\n   */\n  public record(change: CellChange<T>): void {\n    if (!this.enabled) return;\n    if (this.#batch) {\n      this.#batch.push(change);\n      return;\n    }\n    this.#push(new CellEditCommand(this.host, [change]));\n  }\n\n  /**\n   * Opens a batch so subsequent {@link record} calls coalesce into one command.\n   * Nestable calls are flattened (the outermost {@link endBatch} commits).\n   */\n  public beginBatch(): void {\n    if (!this.enabled) return;\n    this.#batch ??= [];\n  }\n\n  /**\n   * Closes the open batch, pushing it as a single command when it captured any\n   * changes.\n   */\n  public endBatch(): void {\n    const batch = this.#batch;\n    this.#batch = null;\n    if (batch && batch.length > 0) {\n      this.#push(new CellEditCommand(this.host, batch));\n    }\n  }\n\n  /** Reverts the most recent command. No-op when the undo stack is empty. */\n  public undo(): void {\n    const command = this.#undo.pop();\n    if (!command) return;\n    command.revert();\n    this.#redo.push(command);\n    this.#afterReplay(command, 'undo');\n  }\n\n  /** Re-applies the most recently undone command. No-op when nothing to redo. */\n  public redo(): void {\n    const command = this.#redo.pop();\n    if (!command) return;\n    command.apply();\n    this.#undo.push(command);\n    this.#afterReplay(command, 'redo');\n  }\n\n  /** Clears both stacks (e.g. after a data reset). */\n  public clear(): void {\n    if (this.#undo.length === 0 && this.#redo.length === 0) return;\n    this.#undo = [];\n    this.#redo = [];\n    this.#batch = null;\n    this.#emitChanged();\n  }\n\n  #push(command: EditCommand): void {\n    this.#undo.push(command);\n    // A fresh edit invalidates the redo branch.\n    this.#redo = [];\n    // Evict the oldest commands once the stack exceeds its cap.\n    while (this.#undo.length > this.stackSize) {\n      this.#undo.shift();\n    }\n    this.#emitChanged();\n  }\n\n  #afterReplay(command: EditCommand, kind: 'undo' | 'redo'): void {\n    this.host.requestUpdate(PIPELINE);\n    const count = command instanceof CellEditCommand ? command.changes.length : 1;\n    const key =\n      kind === 'undo'\n        ? count === 1\n          ? 'announce.undoOne'\n          : 'announce.undoMany'\n        : count === 1\n          ? 'announce.redoOne'\n          : 'announce.redoMany';\n    this.host.announce(this.host.localize(key, { count }));\n    this.#emitChanged();\n  }\n\n  #emitChanged(): void {\n    this.host.emitEvent('historyChanged', {\n      detail: { canUndo: this.canUndo, canRedo: this.canRedo },\n    });\n  }\n}\n"]}
+{"version":3,"file":"history.js","sourceRoot":"","sources":["../../src/controllers/history.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type { GridHost, Keys } from '../internal/types.js';\n\n/** Default number of commands retained on the undo stack. */\nconst DEFAULT_STACK_SIZE = 100;\n\n/**\n * A single recorded cell mutation: the record reference, its column, and the\n * before / after values. `rowIndex` is the view-relative index at record time;\n * replay reports the record's index at replay time instead (the live record\n * reference is authoritative).\n */\nexport interface CellChange<T extends object> {\n  record: T;\n  key: Keys<T>;\n  rowIndex: number;\n  oldValue: unknown;\n  newValue: unknown;\n}\n\n/**\n * A reversible unit of work on the history stacks.\n *\n * @remarks\n * `apply` re-performs the change (redo); `revert` undoes it. Cell-data edits use\n * {@link CellEditCommand}; the interface is deliberately open so later command\n * kinds (e.g. view-state) can join the same stacks.\n */\nexport interface EditCommand {\n  apply(): void;\n  revert(): void;\n  /** The record the command acts on: history is cleared once a reload drops it. */\n  readonly record?: object;\n  /**\n   * For a command staged with a row edit: the value to stage for its cell,\n   * re-read from the row's staged values just before the row commits, so\n   * validation judges what the command will leave there.\n   */\n  stagedValue?(staged: ReadonlyMap<PropertyKey, unknown>): unknown;\n}\n\n/**\n * One or more cell mutations that undo / redo as a single step. A single-cell\n * edit holds one change; a row-mode commit or a bulk paste / fill holds many so\n * one Ctrl+Z reverts the whole batch. `commands` are other commands pushed in\n * the same batch (a feature's state riding with the edit, such as a formula):\n * they replay after the cell values in both directions, so a value write can\n * never undo the state they restore.\n */\nexport class CellEditCommand<T extends object> implements EditCommand {\n  constructor(\n    private host: GridHost<T>,\n    public readonly changes: ReadonlyArray<CellChange<T>>,\n    public readonly commands: ReadonlyArray<EditCommand> = []\n  ) {}\n\n  public apply(): void {\n    const indexOf = viewIndexer(this.host.pageItems, this.changes.length);\n    for (const change of this.changes) {\n      this.#write(change, change.newValue, indexOf);\n    }\n    for (const command of this.commands) command.apply();\n  }\n\n  public revert(): void {\n    const indexOf = viewIndexer(this.host.pageItems, this.changes.length);\n    // Revert in reverse so overlapping writes to the same cell unwind cleanly.\n    for (let i = this.changes.length - 1; i >= 0; i -= 1) {\n      this.#write(this.changes[i], this.changes[i].oldValue, indexOf);\n    }\n    for (let i = this.commands.length - 1; i >= 0; i -= 1) this.commands[i].revert();\n  }\n\n  #write(change: CellChange<T>, value: unknown, indexOf: (record: T) => number): void {\n    (change.record as Record<string, unknown>)[change.key as string] = value;\n    // Re-emit `cellValueChanged` (never the cancellable `cellValueChanging`) so\n    // data-bound consumers stay in sync. Validation and history recording are\n    // intentionally skipped on replay. The index is where the record is now:\n    // -1 when it is pinned or on another page.\n    this.host.emitEvent('cellValueChanged', {\n      detail: { key: change.key, rowIndex: indexOf(change.record), data: change.record, value },\n    });\n  }\n}\n\n/**\n * Returns a lookup of a record's index in `items` (by reference, `-1` when\n * absent). For more than one lookup it indexes `items` once, so a large batch\n * costs one pass instead of one scan per record.\n */\nexport function viewIndexer<T>(items: ReadonlyArray<T>, lookups: number): (record: T) => number {\n  if (lookups < 2) return (record) => items.indexOf(record);\n  let index: Map<T, number> | undefined;\n  return (record) => {\n    if (!index) {\n      index = new Map();\n      // Backwards, so a record listed twice resolves to its first index.\n      for (let i = items.length - 1; i >= 0; i -= 1) index.set(items[i], i);\n    }\n    return index.get(record) ?? -1;\n  };\n}\n\n/**\n * Reactive controller owning the undo / redo stacks for cell-data edits.\n *\n * @remarks\n * Recording is driven from the {@link EditingController.applyCellEdit} choke\n * point: every successful write calls {@link record}. Single edits push one\n * command; {@link beginBatch} / {@link endBatch} coalesce a row-mode commit or a\n * bulk paste / fill into one command. Disabled unless\n * `editing.history.enabled` is set, so the community grid pays nothing.\n */\nexport class HistoryController<T extends object> implements ReactiveController {\n  #undo: EditCommand[] = [];\n  #redo: EditCommand[] = [];\n  /** Changes recorded by the open batch, pushed as one command when it closes. */\n  #batch: CellChange<T>[] = [];\n  /** Commands {@link push}ed while the batch is open, replayed after its changes. */\n  #commands: EditCommand[] = [];\n  /** Open {@link beginBatch} calls; only the outermost {@link endBatch} commits. */\n  #depth = 0;\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected(): void {}\n\n  /** Whether undo / redo tracking is enabled. */\n  public get enabled(): boolean {\n    return Boolean(this.host.editing?.history?.enabled);\n  }\n\n  /** Maximum number of commands retained on the undo stack. */\n  public get stackSize(): number {\n    const size = this.host.editing?.history?.stackSize;\n    return typeof size === 'number' && size > 0 ? size : DEFAULT_STACK_SIZE;\n  }\n\n  /** Whether there is at least one command to undo. */\n  public get canUndo(): boolean {\n    return this.#undo.length > 0;\n  }\n\n  /** Whether there is at least one command to redo. */\n  public get canRedo(): boolean {\n    return this.#redo.length > 0;\n  }\n\n  /**\n   * Records a single cell mutation. Routed to the open batch when one is active,\n   * otherwise pushed immediately as a standalone command. No-op when history is\n   * disabled.\n   */\n  public record(change: CellChange<T>): void {\n    if (!this.enabled) return;\n    if (this.#depth > 0) {\n      this.#batch.push(change);\n      return;\n    }\n    this.#push(new CellEditCommand(this.host, [change]));\n  }\n\n  /**\n   * Records a command that is not a plain cell write (its first `apply` has\n   * already run). Joins the open batch, replaying after the batch's cell\n   * changes, otherwise pushed as its own step. No-op when history is disabled.\n   */\n  public push(command: EditCommand): void {\n    if (!this.enabled) return;\n    if (this.#depth > 0) this.#commands.push(command);\n    else this.#push(command);\n  }\n\n  /**\n   * Opens a batch so subsequent {@link record} calls coalesce into one command.\n   * Nested calls are flattened: a batch opened while another is open (a\n   * `cellValueChanged` listener that calls `applyEdits`, say) joins it, and\n   * only the outermost {@link endBatch} commits. Counted even while history\n   * is disabled, so every begin pairs with its end.\n   */\n  public beginBatch(): void {\n    this.#depth += 1;\n  }\n\n  /**\n   * Closes the innermost open batch. Closing the outermost pushes everything\n   * it captured as a single command.\n   */\n  public endBatch(): void {\n    if (this.#depth === 0 || --this.#depth > 0) return;\n    const batch = this.#batch;\n    const commands = this.#commands;\n    this.#batch = [];\n    this.#commands = [];\n    if (batch.length > 0 || commands.length > 0) {\n      this.#push(new CellEditCommand(this.host, batch, commands));\n    }\n  }\n\n  /** Reverts the most recent command. No-op when the undo stack is empty. */\n  public undo(): void {\n    const command = this.#undo.pop();\n    if (!command) return;\n    command.revert();\n    this.#redo.push(command);\n    this.#afterReplay(command, 'undo');\n  }\n\n  /** Re-applies the most recently undone command. No-op when nothing to redo. */\n  public redo(): void {\n    const command = this.#redo.pop();\n    if (!command) return;\n    command.apply();\n    this.#undo.push(command);\n    this.#afterReplay(command, 'redo');\n  }\n\n  /** Clears both stacks, and the changes an open batch has captured so far. */\n  public clear(): void {\n    this.#batch = [];\n    this.#commands = [];\n    if (this.#undo.length === 0 && this.#redo.length === 0) return;\n    this.#undo = [];\n    this.#redo = [];\n    this.#emitChanged();\n  }\n\n  /**\n   * Clears both stacks when the grid's data was replaced and a recorded change\n   * (or a command's {@link EditCommand.record}) names a record that `records`\n   * no longer yields (a reload with new objects).\n   * Replaying onto such a detached record would change nothing on screen while\n   * still reporting the edit. New data that keeps the edited records (an\n   * append, a re-sorted copy) keeps its history. `records` is read only while\n   * a stack has entries, so the caller may pass an expensive source.\n   */\n  public reconcile(records: () => Iterable<T>): void {\n    if (this.#undo.length === 0 && this.#redo.length === 0) return;\n    const live = new Set(records());\n    const stale = (command: EditCommand): boolean =>\n      (command.record !== undefined && !live.has(command.record as T)) ||\n      (command instanceof CellEditCommand &&\n        (command.changes.some((change: CellChange<T>) => !live.has(change.record)) ||\n          command.commands.some(stale)));\n    if (this.#undo.some(stale) || this.#redo.some(stale)) this.clear();\n  }\n\n  #push(command: EditCommand): void {\n    this.#undo.push(command);\n    // A fresh edit invalidates the redo branch.\n    this.#redo = [];\n    // Evict the oldest commands once the stack exceeds its cap.\n    while (this.#undo.length > this.stackSize) {\n      this.#undo.shift();\n    }\n    this.#emitChanged();\n  }\n\n  #afterReplay(command: EditCommand, kind: 'undo' | 'redo'): void {\n    this.host.requestUpdate(PIPELINE);\n    const count = command instanceof CellEditCommand ? command.changes.length || 1 : 1;\n    const key =\n      kind === 'undo'\n        ? count === 1\n          ? 'announce.undoOne'\n          : 'announce.undoMany'\n        : count === 1\n          ? 'announce.redoOne'\n          : 'announce.redoMany';\n    this.host.announce(this.host.localize(key, { count }));\n    this.#emitChanged();\n  }\n\n  #emitChanged(): void {\n    this.host.emitEvent('historyChanged', {\n      detail: { canUndo: this.canUndo, canRedo: this.canRedo },\n    });\n  }\n}\n"]}

package/controllers/navigation.d.ts

@@ -1,16 +1,18 @@
 import type { ReactiveController } from 'lit';
+import type ApexGridRow from '../components/row.js';
+import { type ScrollInsets } from '../components/virtualizer.js';
 import type { ActiveNode, ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
 export declare class NavigationController<T extends object> implements ReactiveController {
     #private;
     protected host: GridHost<T>;
     protected handlers: Map<string, (() => void) | (() => void) | (() => 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(): {
-        column: keyof T;
-        row: number;
-    };
+    /**
+     * The active cell of this grid. Instance state on purpose: every grid on a
+     * page, including one nested in another grid's detail panel, keeps its own.
+     */
+    protected _active: ActiveNode<T>;
+    protected get nextNode(): ActiveNode<T>;
     protected get columns(): Array<{
         key: Keys<T>;
         hidden?: boolean;
@@ -20,21 +22,72 @@ export declare class NavigationController<T extends object> implements ReactiveC
         hidden?: boolean;
     }[];
     protected get firstColumn(): Keys<T>;
+    /** Whether there is any cell to move to: a body row and a visible column. */
+    protected get navigable(): boolean;
     protected getPreviousColumn(key: Keys<T>): Keys<T>;
     protected getNextColumn(key: Keys<T>): Keys<T>;
+    /** The rendered body row at `index`, when the virtualizer has it in the DOM. */
+    protected findRow(index: number): ApexGridRow<T> | undefined;
+    /**
+     * The element that stands for `node` in the DOM: the cell, or for a row a
+     * feature module renders full width (a group header, a total row) the
+     * row's single focus target, whatever the column.
+     */
+    protected findCell(node: ActiveNode<T>): HTMLElement | undefined;
     protected scrollToCell(node: ActiveNode<T>): void;
-    protected findActiveCell(): import("../components/cell.js").default<T> | undefined;
+    /** Scrolls body row `index` into view, rendered or not. */
+    protected scrollToRow(index: number): void;
+    /**
+     * Scrolls the cell at `node` into view clear of the sticky chrome without
+     * moving the active cell: the cell itself when it is rendered, else its row
+     * first and the cell once the virtualizer has rendered it. For a feature
+     * that moves something other than the active cell with the keyboard (range
+     * extension), so it scrolls the way arrow navigation does.
+     */
+    revealCell(node: ActiveNode<T>): void;
+    /**
+     * Whether ArrowLeft or ArrowRight steps towards the end of the column
+     * order: ArrowRight in a left-to-right grid, ArrowLeft in a right-to-left
+     * one. The rule every inline arrow key on this grid follows.
+     */
+    towardsInlineEnd(key: string): boolean;
+    /**
+     * How much of the scroll container's scrollport the sticky chrome covers
+     * (toolbar, headers and the pinned-top band above, the pinned-bottom band
+     * and the paginator below, pinned columns on either side). Keyboard scrolls
+     * use it as scroll-padding, so a row or cell the keyboard moves to is never
+     * parked underneath that chrome. Measured right before each keyboard scroll
+     * because any of those bands can change size between key presses. Public
+     * so a feature scrolling the body itself (drag auto-scroll) measures the
+     * same chrome.
+     */
+    scrollInsets(): ScrollInsets;
     /**
      * Moves real DOM focus to the active cell (the grid body's roving tab stop),
      * so screen readers track keyboard navigation. Waits for the host render to
-     * commit the cell's `active` state, then retries once on the next frame to
-     * cover virtualizer re-materialization after a long jump. No-op while no
-     * cell is active (the scroll container keeps focus as the entry point).
+     * commit the cell's `active` state and, when the cell is not in the DOM yet
+     * (a long jump), for the virtualizer to finish laying out the new range.
+     * No-op while no cell is active (the scroll container keeps focus as the
+     * entry point).
+     *
+     * @param reveal - also scroll the cell into view once it exists, for jumps
+     * whose target row was not rendered when the scroll started.
      */
-    focusActiveCell(): void;
+    focusActiveCell(reveal?: boolean): void;
     get active(): ActiveNode<T>;
     set active(node: ActiveNode<T>);
     constructor(host: GridHost<T>);
+    /**
+     * Keeps the active cell pointing at something that exists. Runs before
+     * every grid render, so after a data swap, sort, filter, page change or a
+     * column hide or reorder the active node is clamped to the last row and the
+     * nearest visible column, or cleared when there is nothing left to point
+     * at (no rows, no visible columns). Without it a stale node names a cell
+     * that is never rendered, which leaves the body with no tab stop.
+     */
+    hostUpdate(): void;
+    /** The active row is one a feature module renders full width (no cells). */
+    protected isPresentedRow(index: number): boolean;
     /** Home moves to the first cell in the row (ARIA grid pattern). */
     protected home(): void;
     /** End moves to the last cell in the row (ARIA grid pattern). */
@@ -44,8 +97,9 @@ export declare class NavigationController<T extends object> implements ReactiveC
     /** Ctrl/Cmd+End moves to the last cell of the grid. */
     protected ctrlEnd(): void;
     /**
-     * Rows per Page Up/Down step, derived from the host viewport and the height
-     * of a rendered row (fallback: 10 rows when nothing is measurable yet).
+     * Rows per Page Up/Down step: the rows that fit in the part of the
+     * scrollport the sticky chrome leaves visible, minus one so the row the
+     * user was on stays in view. Falls back to 10 when nothing is measurable.
      */
     protected pageStep(): number;
     protected pageUp(): void;

package/controllers/navigation.js

@@ -1,15 +1,25 @@
-import { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';
+import { revealWithin } from '../components/virtualizer.js';
+import { SENTINEL_NODE } from '../internal/constants.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
 import { getDisplayColumns, isRTL } from '../internal/utils.js';
+const RELATIVE_KEYS = new Set([
+    'ArrowDown',
+    'ArrowUp',
+    'ArrowLeft',
+    'ArrowRight',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown',
+]);
 export class NavigationController {
     get virtualizer() {
         return this.host.scrollContainer;
     }
     get nextNode() {
-        const node = this.state.get('current');
-        return node === SENTINEL_NODE
+        return this._active === SENTINEL_NODE
             ? { column: this.firstColumn, row: 0 }
-            : { ...node };
+            : { ...this._active };
     }
     get columns() {
         return getDisplayColumns(this.host.columns);
@@ -21,40 +31,121 @@ export class NavigationController {
         const first = this.visibleColumns.at(0);
         return (first?.key ?? this.host.columns[0]?.key);
     }
+    get navigable() {
+        return this.host.pageItems.length > 0 && this.visibleColumns.length > 0;
+    }
     getPreviousColumn(key) {
         const columns = this.visibleColumns;
         const idx = columns.findIndex((column) => column.key === key);
-        return columns[Math.max(idx - 1, 0)].key;
+        return columns[Math.max(idx - 1, 0)]?.key ?? key;
     }
     getNextColumn(key) {
         const columns = this.visibleColumns;
         const idx = columns.findIndex((column) => column.key === key);
-        return columns[Math.min(idx + 1, columns.length - 1)].key;
+        return columns[Math.min(idx + 1, columns.length - 1)]?.key ?? key;
+    }
+    findRow(index) {
+        return Array.from(this.virtualizer.querySelectorAll(GRID_ROW_TAG)).find((row) => row.index === index);
+    }
+    findCell(node) {
+        const row = this.findRow(node.row);
+        if (!row)
+            return undefined;
+        return (row.presentedCell ??
+            row.cells.find((cell) => cell.column.key === node.column));
     }
     scrollToCell(node) {
-        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)
-                ?.scrollIntoView({ block: 'nearest' });
+        const cell = this.findCell(node);
+        if (cell) {
+            revealWithin(this.host, cell, {
+                block: 'nearest',
+                inline: 'nearest',
+                insets: this.scrollInsets(),
+            });
         }
     }
-    findActiveCell() {
-        const row = Array.from(this.virtualizer.querySelectorAll(GRID_ROW_TAG)).find((el) => el.index === this.active.row);
-        return row?.cells.find((cell) => cell.column.key === this.active.column);
+    scrollToRow(index) {
+        this.virtualizer
+            .element(index)
+            ?.scrollIntoView({ block: 'nearest', insets: this.scrollInsets() });
     }
-    focusActiveCell() {
-        const node = this.state.get('current');
-        if (!node || node === SENTINEL_NODE)
+    #revealing;
+    revealCell(node) {
+        this.#revealing = node;
+        if (this.findCell(node)) {
+            this.scrollToCell(node);
+            return;
+        }
+        this.scrollToRow(node.row);
+        void this.virtualizer.settled().then(() => {
+            if (this.#revealing === node)
+                this.scrollToCell(node);
+        });
+    }
+    towardsInlineEnd(key) {
+        return isRTL(this.host) === (key === 'ArrowLeft');
+    }
+    scrollInsets() {
+        const host = this.host;
+        const root = host.shadowRoot;
+        if (!root)
+            return { top: 0, right: 0, bottom: 0, left: 0 };
+        const box = host.getBoundingClientRect();
+        const top = box.top + host.clientTop;
+        const left = box.left + host.clientLeft;
+        const bottom = top + host.clientHeight;
+        const right = left + host.clientWidth;
+        let insetTop = 0;
+        for (const el of root.querySelectorAll('apex-grid-header-row, [part~="pinned-top"]')) {
+            insetTop = Math.max(insetTop, el.getBoundingClientRect().bottom - top);
+        }
+        let insetBottom = 0;
+        for (const el of root.querySelectorAll('apex-grid-paginator, [part~="pinned-bottom"]')) {
+            insetBottom = Math.max(insetBottom, bottom - el.getBoundingClientRect().top);
+        }
+        let insetLeft = 0;
+        let insetRight = 0;
+        const headerRow = root.querySelector('apex-grid-header-row');
+        const pinned = headerRow?.shadowRoot?.querySelectorAll('[data-pinned="start"], [data-pinned="end"]');
+        if (pinned?.length) {
+            const rtl = isRTL(host);
+            for (const el of pinned) {
+                const rect = el.getBoundingClientRect();
+                const atLeft = (el.getAttribute('data-pinned') === 'start') !== rtl;
+                if (atLeft)
+                    insetLeft = Math.max(insetLeft, rect.right - left);
+                else
+                    insetRight = Math.max(insetRight, right - rect.left);
+            }
+        }
+        const clamp = (inset) => Math.max(0, Math.round(inset));
+        return {
+            top: clamp(insetTop),
+            right: clamp(insetRight),
+            bottom: clamp(insetBottom),
+            left: clamp(insetLeft),
+        };
+    }
+    focusActiveCell(reveal = false) {
+        const node = this._active;
+        if (node === SENTINEL_NODE)
             return;
         void (async () => {
             await this.host.updateComplete;
-            let cell = this.findActiveCell();
+            let cell = this.findCell(node);
+            if (!cell) {
+                await this.virtualizer.settled();
+                cell = this.findCell(node);
+            }
             if (!cell) {
                 await new Promise(requestAnimationFrame);
-                cell = this.findActiveCell();
+                cell = this.findCell(node);
             }
-            cell?.focus({ preventScroll: true });
+            if (!cell || this._active !== node)
+                return;
+            if (reveal)
+                this.scrollToCell(node);
+            cell.focus({ preventScroll: true });
         })();
     }
     get active() {
@@ -62,8 +153,6 @@ export class NavigationController {
     }
     set active(node) {
         this._active = node;
-        this.state.set('previous', this._active);
-        this.state.set('current', node);
         this.host.requestUpdate();
     }
     constructor(host) {
@@ -79,10 +168,46 @@ export class NavigationController {
             PageDown: this.pageDown,
             ' ': this.toggleSelection,
         }));
-        this.state = NAVIGATION_STATE;
         this._active = SENTINEL_NODE;
+        this.#revealing = null;
         this.host.addController(this);
     }
+    hostUpdate() {
+        const node = this._active;
+        if (node === SENTINEL_NODE)
+            return;
+        const count = this.host.pageItems.length;
+        if (!count || !this.visibleColumns.length) {
+            this._active = SENTINEL_NODE;
+            return;
+        }
+        const row = Math.min(node.row, count - 1);
+        const column = this.#nearestVisibleColumn(node.column);
+        if (row !== node.row || column !== node.column) {
+            this._active = { column, row };
+        }
+    }
+    #nearestVisibleColumn(key) {
+        const columns = this.columns;
+        const index = columns.findIndex((column) => column.key === key);
+        if (index < 0)
+            return this.firstColumn;
+        for (let distance = 0; distance < columns.length; distance++) {
+            for (const at of [index + distance, index - distance]) {
+                const column = columns[at];
+                if (column && !column.hidden)
+                    return column.key;
+            }
+        }
+        return this.firstColumn;
+    }
+    isPresentedRow(index) {
+        const data = this.host.pageItems[index];
+        if (!data)
+            return false;
+        const state = this.host.stateController;
+        return state.presentRow(data, { columns: this.host.columns, rowIndex: index }) !== null;
+    }
     home() {
         this.active = Object.assign(this.nextNode, { column: this.firstColumn });
         this.scrollToCell(this.active);
@@ -94,74 +219,75 @@ export class NavigationController {
     }
     ctrlHome() {
         this.active = { column: this.firstColumn, row: 0 };
-        this.virtualizer.element(0)?.scrollIntoView({ block: 'nearest' });
-        this.scrollToCell(this.active);
+        this.scrollToRow(0);
     }
     ctrlEnd() {
-        const row = Math.max(0, this.host.pageItems.length - 1);
+        const row = this.host.pageItems.length - 1;
         const last = this.visibleColumns.at(-1)?.key ?? this.firstColumn;
         this.active = { column: last, row };
-        this.virtualizer.element(row)?.scrollIntoView({ block: 'nearest' });
-        this.scrollToCell(this.active);
+        this.scrollToRow(row);
     }
     pageStep() {
-        const rowEl = this.virtualizer.element(this.nextNode.row);
-        const rowHeight = rowEl?.offsetHeight || 0;
-        const viewport = this.host.clientHeight || 0;
-        if (!rowHeight || !viewport)
+        const host = this.host;
+        let rowHeight = 0;
+        for (const row of this.virtualizer.querySelectorAll(GRID_ROW_TAG)) {
+            const height = row.offsetHeight;
+            if (height > 0 && (!rowHeight || height < rowHeight))
+                rowHeight = height;
+        }
+        const { top, bottom } = this.scrollInsets();
+        const viewport = host.clientHeight - top - bottom;
+        if (!rowHeight || viewport <= 0)
             return 10;
-        const rows = Math.floor(viewport / rowHeight) - 1;
-        return rows > 0 ? rows : 10;
+        return Math.max(1, Math.floor(viewport / rowHeight) - 1);
     }
     pageUp() {
         const next = this.nextNode;
         this.active = Object.assign(next, { row: Math.max(0, next.row - this.pageStep()) });
-        this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
+        this.scrollToRow(this.active.row);
     }
     pageDown() {
         const next = this.nextNode;
         this.active = Object.assign(next, {
             row: Math.min(this.host.pageItems.length - 1, next.row + this.pageStep()),
         });
-        this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
+        this.scrollToRow(this.active.row);
     }
     arrowDown() {
         const next = this.nextNode;
         this.active = Object.assign(next, {
             row: Math.min(next.row + 1, this.host.pageItems.length - 1),
         });
-        this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
+        this.scrollToRow(next.row);
     }
     arrowUp() {
         const next = this.nextNode;
         this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });
-        this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
+        this.scrollToRow(next.row);
     }
     arrowLeft() {
-        this.#moveInline('left');
+        this.#moveInline('ArrowLeft');
     }
     arrowRight() {
-        this.#moveInline('right');
+        this.#moveInline('ArrowRight');
     }
-    #moveInline(direction) {
-        const towardsEnd = isRTL(this.host) === (direction === 'left');
+    #moveInline(key) {
         const next = this.nextNode;
-        const column = towardsEnd
+        const column = this.towardsInlineEnd(key)
             ? this.getNextColumn(next.column)
             : this.getPreviousColumn(next.column);
         this.active = Object.assign(next, { column });
         this.scrollToCell(this.active);
     }
     toggleSelection() {
-        const data = this.host.pageItems[this.active.row];
-        if (!data)
+        const data = this.host.pageItems[this._active.row];
+        if (!data || this.isPresentedRow(this._active.row))
             return;
         void this.host.toggleRowSelection(data);
     }
     hostConnected() { }
     hostDisconnected() {
         this.active = SENTINEL_NODE;
-        this.state = NAVIGATION_STATE;
     }
     get editing() {
         return this.host.stateController.editing;
@@ -171,8 +297,7 @@ export class NavigationController {
             return false;
         if (event.ctrlKey || event.metaKey || event.altKey)
             return false;
-        const node = this.state.get('current');
-        if (!node || node === SENTINEL_NODE)
+        if (this._active === SENTINEL_NODE || this.isPresentedRow(this._active.row))
             return false;
         const editing = this.editing;
         if (!editing?.enabled)
@@ -199,7 +324,7 @@ export class NavigationController {
                     const next = reorder.moveGrabbed(event.key === 'ArrowDown' ? 1 : -1);
                     if (next >= 0) {
                         this.active = Object.assign(this.nextNode, { row: next });
-                        this.virtualizer.element(next)?.scrollIntoView({ block: 'nearest' });
+                        this.scrollToRow(next);
                     }
                     return true;
                 }
@@ -216,7 +341,7 @@ export class NavigationController {
                     return false;
             }
         }
-        if (event.key === ' ' && this.active.row >= 0) {
+        if (event.key === ' ' && this.active.row >= 0 && !this.isPresentedRow(this.active.row)) {
             event.preventDefault();
             return reorder.grab(this.active.row);
         }
@@ -239,18 +364,33 @@ export class NavigationController {
             }
             if (event.key === 'Home' || event.key === 'End') {
                 event.preventDefault();
+                if (!this.navigable)
+                    return;
                 if (event.key === 'Home') {
                     this.ctrlHome();
                 }
                 else {
                     this.ctrlEnd();
                 }
-                this.focusActiveCell();
+                this.focusActiveCell(true);
                 return;
             }
         }
         if (this.handleEditKey(event))
             return;
+        if (RELATIVE_KEYS.has(event.key)) {
+            event.preventDefault();
+            if (!this.navigable)
+                return;
+            if (this._active === SENTINEL_NODE) {
+                this.active = { column: this.firstColumn, row: 0 };
+                if (event.key !== 'End' && event.key !== 'PageDown') {
+                    this.scrollToRow(0);
+                    this.focusActiveCell(true);
+                    return;
+                }
+            }
+        }
         if (this.handlers.has(event.key)) {
             event.preventDefault();
             this.handlers.get(event.key).call(this);