@dxos/lit-grid 0.6.12-main.c1d977f → 0.6.12-main.c4a728f

package/dist/lib/browser/index.mjs

@@ -1,51 +1,21 @@
 // packages/ui/lit-grid/src/dx-grid.ts
-import { LitElement as LitElement2, html as html2, nothing } from "lit";
-import { customElement as customElement2, state, property as property2 } from "lit/decorators.js";
-import { ref as ref2, createRef } from "lit/directives/ref.js";
-import { styleMap } from "lit/directives/style-map.js";
-
-// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.ts
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
-import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
+import { LitElement, html, nothing } from "lit";
+import { customElement, state, property, eventOptions } from "lit/decorators.js";
+import { ref, createRef } from "lit/directives/ref.js";
 
 // packages/ui/lit-grid/src/util.ts
 var separator = ",";
 var toCellIndex = (cellCoords) => `${cellCoords.col}${separator}${cellCoords.row}`;
-var colToA1Notation = (col) => {
-  return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
-};
-var rowToA1Notation = (row) => {
-  return `${row + 1}`;
-};
 
 // packages/ui/lit-grid/src/types.ts
 var DxAxisResize = class extends Event {
   constructor(props) {
     super("dx-axis-resize");
     this.axis = props.axis;
-    this.plane = props.plane;
     this.index = props.index;
     this.size = props.size;
   }
 };
-var DxAxisResizeInternal = class extends Event {
-  constructor(props) {
-    super("dx-axis-resize-internal", {
-      composed: true,
-      bubbles: true
-    });
-    this.axis = props.axis;
-    this.plane = props.plane;
-    this.index = props.index;
-    this.size = props.size;
-    this.delta = props.delta;
-    this.state = props.state;
-  }
-};
 var DxEditRequest = class extends Event {
   constructor(props) {
     super("dx-edit-request");
@@ -66,137 +36,26 @@ var DxGridCellsSelect = class extends Event {
   }
 };
 
-// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.ts
-function _ts_decorate(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-var DxGridAxisResizeHandle = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.axis = "row";
-    this.plane = "grid";
-    this.index = "-1";
-    this.size = 128;
-    this.dragStartSize = 128;
-    this.cleanup = null;
-  }
-  render() {
-    return html`<button class="dx-grid__resize-handle" data-dx-grid-axis=${this.axis} ${ref(this.mount)}>
-      <span class="sr-only">Resize</span>
-    </button>`;
-  }
-  dispatchResize(location, state2) {
-    const client = this.axis === "row" ? "clientY" : "clientX";
-    const event = new DxAxisResizeInternal({
-      axis: this.axis,
-      plane: this.plane,
-      size: this.dragStartSize,
-      index: this.index,
-      delta: location.current.input[client] - location.initial.input[client],
-      state: state2
-    });
-    this.dispatchEvent(event);
-  }
-  mount(element) {
-    this.cleanup?.();
-    const host = this;
-    if (element) {
-      this.cleanup = draggable({
-        element,
-        onGenerateDragPreview: ({ nativeSetDragImage }) => {
-          disableNativeDragPreview({
-            nativeSetDragImage
-          });
-          preventUnhandled.start();
-        },
-        onDragStart() {
-          host.dragStartSize = host.size;
-        },
-        onDrag({ location }) {
-          host.dispatchResize(location, "dragging");
-        },
-        onDrop({ location }) {
-          host.dispatchResize(location, "dropped");
-        }
-      });
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.cleanup?.();
-  }
-  createRenderRoot() {
-    return this;
-  }
-};
-_ts_decorate([
-  property({
-    type: String
-  })
-], DxGridAxisResizeHandle.prototype, "axis", void 0);
-_ts_decorate([
-  property({
-    type: String
-  })
-], DxGridAxisResizeHandle.prototype, "plane", void 0);
-_ts_decorate([
-  property({
-    type: String
-  })
-], DxGridAxisResizeHandle.prototype, "index", void 0);
-_ts_decorate([
-  property({
-    type: Number
-  })
-], DxGridAxisResizeHandle.prototype, "size", void 0);
-DxGridAxisResizeHandle = _ts_decorate([
-  customElement("dx-grid-axis-resize-handle")
-], DxGridAxisResizeHandle);
-
 // packages/ui/lit-grid/src/dx-grid.ts
-function _ts_decorate2(decorators, target, key, desc) {
+function _ts_decorate(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
 var gap = 1;
-var resizeTolerance = 1;
-var selectTolerance = 4;
+var resizeTolerance = 8;
 var overscanCol = 1;
 var overscanRow = 1;
 var sizeColMin = 32;
 var sizeColMax = 1024;
 var sizeRowMin = 16;
 var sizeRowMax = 1024;
-var shouldSelect = (pointer, { pageX, pageY }) => {
-  if (pointer?.state === "maybeSelecting") {
-    return Math.hypot(Math.abs(pointer.pageX - pageX), Math.abs(pointer.pageY - pageY)) >= selectTolerance;
-  } else {
-    return false;
-  }
-};
-var selectionProps = (selectionStart, selectionEnd) => {
-  const colMin = Math.min(selectionStart.col, selectionEnd.col);
-  const colMax = Math.max(selectionStart.col, selectionEnd.col);
-  const rowMin = Math.min(selectionStart.row, selectionEnd.row);
-  const rowMax = Math.max(selectionStart.row, selectionEnd.row);
-  const plane = selectionStart.plane;
-  const visible = colMin !== colMax || rowMin !== rowMax;
-  return {
-    colMin,
-    colMax,
-    rowMin,
-    rowMax,
-    plane,
-    visible
-  };
+var colToA1Notation = (col) => {
+  return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
 };
-var cellSelected = (col, row, plane, selection) => {
-  return plane === selection.plane && col >= selection.colMin && col <= selection.colMax && row >= selection.rowMin && row <= selection.rowMax;
+var rowToA1Notation = (row) => {
+  return `${row + 1}`;
 };
 var closestAction = (target) => {
   const actionEl = target?.closest("[data-dx-grid-action]") ?? null;
@@ -216,9 +75,7 @@ var closestCell = (target, actionEl) => {
   if (cellElement) {
     const col = parseInt(cellElement.getAttribute("aria-colindex") ?? "never");
     const row = parseInt(cellElement.getAttribute("aria-rowindex") ?? "never");
-    const plane = cellElement.closest("[data-dx-grid-plane]")?.getAttribute("data-dx-grid-plane") ?? "grid";
     return {
-      plane,
       col,
       row
     };
@@ -226,92 +83,30 @@ var closestCell = (target, actionEl) => {
     return null;
   }
 };
-var resolveRowPlane = (plane) => {
-  switch (plane) {
-    case "fixedStartStart":
-    case "fixedStartEnd":
-    case "frozenRowsStart":
-      return "frozenRowsStart";
-    case "fixedEndStart":
-    case "fixedEndEnd":
-    case "frozenRowsEnd":
-      return "frozenRowsEnd";
-    default:
-      return "grid";
-  }
-};
-var resolveColPlane = (plane) => {
-  switch (plane) {
-    case "fixedStartStart":
-    case "fixedEndStart":
-    case "frozenColsStart":
-      return "frozenColsStart";
-    case "fixedStartEnd":
-    case "fixedEndEnd":
-    case "frozenColsEnd":
-      return "frozenColsEnd";
-    default:
-      return "grid";
-  }
-};
-var resolveResizePlane = (resizeAxis, cellPlane) => {
-  switch (cellPlane) {
-    case "fixedStartStart":
-      return resizeAxis === "col" ? "frozenColsStart" : "frozenRowsStart";
-    case "fixedStartEnd":
-      return resizeAxis === "col" ? "frozenColsEnd" : "frozenRowsStart";
-    case "fixedEndStart":
-      return resizeAxis === "col" ? "frozenColsStart" : "frozenRowsEnd";
-    case "fixedEndEnd":
-      return resizeAxis === "col" ? "frozenColsEnd" : "frozenRowsEnd";
-    case "frozenColsStart":
-    case "frozenColsEnd":
-      return resizeAxis === "col" ? cellPlane : "grid";
-    case "frozenRowsStart":
-    case "frozenRowsEnd":
-      return resizeAxis === "row" ? cellPlane : "grid";
-    default:
-      return cellPlane;
-  }
-};
-var isSameCell = (a, b) => a && b && a.plane === b.plane && Number.isFinite(a.col) && Number.isFinite(a.row) && a.col === b.col && a.row === b.row;
-var defaultRowSize = 32;
-var defaultColSize = 180;
-var DxGrid = class extends LitElement2 {
+var isSameCell = (a, b) => a && b && Number.isFinite(a.col) && Number.isFinite(a.row) && a.col === b.col && a.row === b.row;
+var localChId = (c0) => `ch--${c0}`;
+var localRhId = (r0) => `rh--${r0}`;
+var getPage = (axis, event) => axis === "col" ? event.pageX : event.pageY;
+var DxGrid = class extends LitElement {
   constructor() {
-    super();
+    super(...arguments);
     this.gridId = "default-grid-id";
     this.rowDefault = {
-      grid: {
-        size: defaultRowSize
-      }
+      size: 32
     };
     this.columnDefault = {
-      grid: {
-        size: defaultColSize
-      }
-    };
-    this.rows = {
-      grid: {}
-    };
-    this.columns = {
-      grid: {}
-    };
-    this.initialCells = {
-      grid: {}
+      size: 180
     };
+    this.rows = {};
+    this.columns = {};
+    this.initialCells = {};
     this.mode = "browse";
-    this.limitColumns = Infinity;
-    this.limitRows = Infinity;
-    this.frozen = {};
     /**
     * When this function is defined, it is used first to try to get a value for a cell, and otherwise will fall back
     * to `cells`.
     */
     this.getCells = null;
-    this.cells = {
-      grid: {}
-    };
+    this.cells = {};
     //
     // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
     //
@@ -331,9 +126,9 @@ var DxGrid = class extends LitElement2 {
     // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.
     //
     this.binInlineMin = 0;
-    this.binInlineMax = defaultColSize;
+    this.binInlineMax = this.colSize(0);
     this.binBlockMin = 0;
-    this.binBlockMax = defaultRowSize;
+    this.binBlockMax = this.rowSize(0);
     //
     // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
     // the viewport. These start with naïve values that are updated before first contentful render.
@@ -345,57 +140,48 @@ var DxGrid = class extends LitElement2 {
     //
     // `template` is the rendered value of `grid-{axis}-template`.
     //
-    this.templateGridColumns = "0";
-    this.templatefrozenColsStart = "";
-    this.templatefrozenColsEnd = "";
-    this.templateGridRows = "0";
-    this.templatefrozenRowsStart = "";
-    this.templatefrozenRowsEnd = "";
+    this.templateColumns = `${this.colSize(0)}px`;
+    this.templateRows = `${this.rowSize(0)}px`;
     //
     // Focus, selection, and resize states
     //
     this.pointer = null;
-    this.colSizes = {
-      grid: {}
-    };
-    this.rowSizes = {
-      grid: {}
-    };
+    this.colSizes = {};
+    this.rowSizes = {};
     this.focusActive = false;
     this.focusedCell = {
-      plane: "grid",
       col: 0,
       row: 0
     };
     this.selectionStart = {
-      plane: "grid",
       col: 0,
       row: 0
     };
     this.selectionEnd = {
-      plane: "grid",
       col: 0,
       row: 0
     };
-    //
-    // Limits
-    //
-    this.intrinsicInlineSize = Infinity;
-    this.intrinsicBlockSize = Infinity;
     this.handlePointerDown = (event) => {
       if (event.isPrimary) {
         const { action, actionEl } = closestAction(event.target);
         if (action) {
-          if (action === "cell") {
+          if (action.startsWith("resize") && this.mode === "browse") {
+            const [resize, index] = action.split(",");
+            const [_, axis] = resize.split("-");
+            this.pointer = {
+              state: "resizing",
+              axis,
+              size: axis === "col" ? this.colSize(index) : this.rowSize(index),
+              page: getPage(axis, event),
+              index
+            };
+          } else if (action === "cell") {
             const cellCoords = closestCell(event.target, actionEl);
             if (cellCoords) {
               this.pointer = {
-                state: "maybeSelecting",
-                pageX: event.pageX,
-                pageY: event.pageY
+                state: "selecting"
               };
               this.selectionStart = cellCoords;
-              this.selectionEnd = cellCoords;
             }
             if (this.mode === "edit") {
               event.preventDefault();
@@ -409,24 +195,46 @@ var DxGrid = class extends LitElement2 {
       }
     };
     this.handlePointerUp = (event) => {
-      const cell = closestCell(event.target);
-      if (cell) {
-        this.selectionEnd = cell;
-        this.dispatchEvent(new DxGridCellsSelect({
-          start: this.selectionStart,
-          end: this.selectionEnd
-        }));
+      if (this.pointer?.state === "resizing") {
+        const resizeEvent = new DxAxisResize({
+          axis: this.pointer.axis,
+          index: this.pointer.index,
+          size: this[this.pointer.axis === "col" ? "colSize" : "rowSize"](this.pointer.index)
+        });
+        this.dispatchEvent(resizeEvent);
+      } else {
+        const cell = closestCell(event.target);
+        if (cell) {
+          this.selectionEnd = cell;
+          this.dispatchEvent(new DxGridCellsSelect({
+            start: this.selectionStart,
+            end: this.selectionEnd
+          }));
+        }
       }
       this.pointer = null;
     };
     this.handlePointerMove = (event) => {
-      if (shouldSelect(this.pointer, event)) {
-        this.pointer = {
-          state: "selecting"
-        };
+      if (this.pointer?.state === "resizing") {
+        const delta = getPage(this.pointer.axis, event) - this.pointer.page;
+        if (this.pointer.axis === "col") {
+          const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.pointer.size + delta));
+          this.colSizes = {
+            ...this.colSizes,
+            [this.pointer.index]: nextSize
+          };
+          this.updateVisInline();
+        } else {
+          const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.pointer.size + delta));
+          this.rowSizes = {
+            ...this.rowSizes,
+            [this.pointer.index]: nextSize
+          };
+          this.updateVisBlock();
+        }
       } else if (this.pointer?.state === "selecting") {
         const cell = closestCell(event.target);
-        if (cell && cell.plane === this.selectionStart.plane && (cell.col !== this.selectionEnd.col || cell.row !== this.selectionEnd.row)) {
+        if (cell && (cell.col !== this.selectionEnd.col || cell.row !== this.selectionEnd.row)) {
           this.selectionEnd = cell;
         }
       }
@@ -443,40 +251,19 @@ var DxGrid = class extends LitElement2 {
         this.sizeInline = inlineSize;
         this.sizeBlock = blockSize;
         this.updateVis();
-        queueMicrotask(() => this.updatePos());
       }
     });
     this.viewportRef = createRef();
-    this.maybeUpdateVisInline = () => {
-      if (this.posInline < this.binInlineMin || this.posInline >= this.binInlineMax) {
-        this.updateVisInline();
-      }
-    };
-    this.maybeUpdateVisBlock = () => {
-      if (this.posBlock < this.binBlockMin || this.posBlock >= this.binBlockMax) {
-        this.updateVisBlock();
-      }
-    };
     this.handleWheel = ({ deltaX, deltaY }) => {
       if (this.mode === "browse") {
-        this.updatePos(this.posInline + deltaX, this.posBlock + deltaY);
+        this.posInline = Math.max(0, this.posInline + deltaX);
+        this.posBlock = Math.max(0, this.posBlock + deltaY);
+        if (this.posInline >= this.binInlineMin && this.posInline < this.binInlineMax && this.posBlock >= this.binBlockMin && this.posBlock < this.binBlockMax) {
+        } else {
+          this.updateVis();
+        }
       }
     };
-    this.addEventListener("dx-axis-resize-internal", this.handleAxisResizeInternal);
-    this.addEventListener("wheel", this.handleWheel, {
-      passive: true
-    });
-    this.addEventListener("pointerdown", this.handlePointerDown);
-    this.addEventListener("pointermove", this.handlePointerMove);
-    this.addEventListener("pointerup", this.handlePointerUp);
-    this.addEventListener("pointerleave", this.handlePointerUp);
-    this.addEventListener("focus", this.handleFocus, {
-      capture: true
-    });
-    this.addEventListener("blur", this.handleBlur, {
-      capture: true
-    });
-    this.addEventListener("keydown", this.handleKeydown);
   }
   //
   // Primary pointer and keyboard handlers
@@ -495,7 +282,7 @@ var DxGrid = class extends LitElement2 {
         case "ArrowDown":
           this.focusedCell = {
             ...this.focusedCell,
-            row: Math.min(this.limitRows - 1, this.focusedCell.row + 1)
+            row: this.focusedCell.row + 1
           };
           break;
         case "ArrowUp":
@@ -507,7 +294,7 @@ var DxGrid = class extends LitElement2 {
         case "ArrowRight":
           this.focusedCell = {
             ...this.focusedCell,
-            col: Math.min(this.limitColumns - 1, this.focusedCell.col + 1)
+            col: this.focusedCell.col + 1
           };
           break;
         case "ArrowLeft":
@@ -541,26 +328,21 @@ var DxGrid = class extends LitElement2 {
   //
   // Accessors
   //
-  colSize(c, plane) {
-    const resolvedPlane = resolveColPlane(plane);
-    return this.colSizes?.[resolvedPlane]?.[c] ?? this.columnDefault[resolvedPlane]?.size ?? defaultColSize;
+  colSize(c) {
+    return this.colSizes?.[c] ?? this.columnDefault.size;
   }
-  rowSize(r, plane) {
-    const resolvedPlane = resolveRowPlane(plane);
-    return this.rowSizes?.[resolvedPlane]?.[r] ?? this.rowDefault[resolvedPlane]?.size ?? defaultRowSize;
+  rowSize(r) {
+    return this.rowSizes?.[r] ?? this.rowDefault.size;
   }
-  cell(c, r, plane) {
+  cell(c, r) {
     const index = `${c}${separator}${r}`;
-    return this.cells?.[plane]?.[index] ?? this.initialCells?.[plane]?.[index];
-  }
-  cellActive(c, r, plane) {
-    return this.focusActive && this.focusedCell.plane === plane && this.focusedCell.col === c && this.focusedCell.row === r;
+    return this.cells[index] ?? this.initialCells[index];
   }
   focusedCellBox() {
     const cellElement = this.focusedCellElement();
     const cellSize = {
-      inlineSize: this.colSize(this.focusedCell.col, this.focusedCell.plane),
-      blockSize: this.rowSize(this.focusedCell.row, this.focusedCell.plane)
+      inlineSize: this.colSize(this.focusedCell.col),
+      blockSize: this.rowSize(this.focusedCell.row)
     };
     if (!cellElement) {
       return {
@@ -580,167 +362,60 @@ var DxGrid = class extends LitElement2 {
       ...cellSize
     };
   }
-  updatePosInline(inline) {
-    this.posInline = Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, inline ?? this.posInline));
-    this.maybeUpdateVisInline();
-  }
-  updatePosBlock(block) {
-    this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, block ?? this.posBlock));
-    this.maybeUpdateVisBlock();
-  }
-  updatePos(inline, block) {
-    this.updatePosInline(inline);
-    this.updatePosBlock(block);
-  }
   updateVisInline() {
     let colIndex = 0;
-    let pxInline = this.colSize(colIndex, "grid");
+    let pxInline = this.colSize(colIndex);
     while (pxInline < this.posInline) {
       colIndex += 1;
-      pxInline += this.colSize(colIndex, "grid") + gap;
+      pxInline += this.colSize(colIndex) + gap;
     }
     this.visColMin = colIndex - overscanCol;
-    this.binInlineMin = pxInline - this.colSize(colIndex, "grid") - gap;
+    this.binInlineMin = pxInline - this.colSize(colIndex) - gap;
     this.binInlineMax = pxInline + gap;
     this.overscanInline = [
       ...Array(overscanCol)
     ].reduce((acc, _, c0) => {
-      acc += this.colSize(this.visColMin + c0, "grid");
+      acc += this.colSize(this.visColMin + c0);
       return acc;
     }, 0) + gap * (overscanCol - 1);
-    while (pxInline < this.binInlineMax + this.sizeInline - gap * 2) {
+    while (pxInline < this.binInlineMax + this.sizeInline + gap) {
       colIndex += 1;
-      pxInline += this.colSize(colIndex, "grid") + gap;
+      pxInline += this.colSize(colIndex) + gap;
     }
-    this.visColMax = Math.min(this.limitColumns, colIndex + overscanCol);
-    this.templateGridColumns = [
+    this.visColMax = colIndex + overscanCol;
+    this.templateColumns = [
       ...Array(this.visColMax - this.visColMin)
-    ].map((_, c0) => `${this.colSize(this.visColMin + c0, "grid")}px`).join(" ");
-    this.templatefrozenColsStart = [
-      ...Array(this.frozen.frozenColsStart ?? 0)
-    ].map((_, c0) => `${this.colSize(c0, "frozenColsStart")}px`).join(" ");
-    this.templatefrozenColsEnd = [
-      ...Array(this.frozen.frozenColsEnd ?? 0)
-    ].map((_, c0) => `${this.colSize(c0, "frozenColsEnd")}px`).join(" ");
+    ].map((_, c0) => `${this.colSize(this.visColMin + c0)}px`).join(" ");
   }
   updateVisBlock() {
     let rowIndex = 0;
-    let pxBlock = this.rowSize(rowIndex, "grid");
+    let pxBlock = this.rowSize(rowIndex);
     while (pxBlock < this.posBlock) {
       rowIndex += 1;
-      pxBlock += this.rowSize(rowIndex, "grid") + gap;
+      pxBlock += this.rowSize(rowIndex) + gap;
     }
     this.visRowMin = rowIndex - overscanRow;
-    this.binBlockMin = pxBlock - this.rowSize(rowIndex, "grid") - gap;
+    this.binBlockMin = pxBlock - this.rowSize(rowIndex) - gap;
     this.binBlockMax = pxBlock + gap;
     this.overscanBlock = [
       ...Array(overscanRow)
     ].reduce((acc, _, r0) => {
-      acc += this.rowSize(this.visRowMin + r0, "grid");
+      acc += this.rowSize(this.visRowMin + r0);
       return acc;
     }, 0) + gap * (overscanRow - 1);
-    while (pxBlock < this.binBlockMax + this.sizeBlock - gap * 2) {
+    while (pxBlock < this.binBlockMax + this.sizeBlock) {
       rowIndex += 1;
-      pxBlock += this.rowSize(rowIndex, "grid") + gap;
+      pxBlock += this.rowSize(rowIndex) + gap;
     }
-    this.visRowMax = Math.min(this.limitRows, rowIndex + overscanRow);
-    this.templateGridRows = [
+    this.visRowMax = rowIndex + overscanRow;
+    this.templateRows = [
       ...Array(this.visRowMax - this.visRowMin)
-    ].map((_, r0) => `${this.rowSize(this.visRowMin + r0, "grid")}px`).join(" ");
-    this.templatefrozenRowsStart = [
-      ...Array(this.frozen.frozenRowsStart ?? 0)
-    ].map((_, r0) => `${this.rowSize(r0, "frozenRowsStart")}px`).join(" ");
-    this.templatefrozenRowsEnd = [
-      ...Array(this.frozen.frozenRowsEnd ?? 0)
-    ].map((_, r0) => `${this.rowSize(r0, "frozenRowsEnd")}px`).join(" ");
+    ].map((_, r0) => `${this.rowSize(this.visRowMin + r0)}px`).join(" ");
   }
   updateVis() {
     this.updateVisInline();
     this.updateVisBlock();
   }
-  updateCells(includeFixed) {
-    this.cells.grid = this.getCells({
-      start: {
-        col: this.visColMin,
-        row: this.visRowMin
-      },
-      end: {
-        col: this.visColMax,
-        row: this.visRowMax
-      }
-    }, "grid");
-    Object.entries(this.frozen).filter(([_, limit]) => limit && limit > 0).forEach(([plane, limit]) => {
-      this.cells[plane] = this.getCells(plane.startsWith("frozenRows") ? {
-        start: {
-          col: this.visColMin,
-          row: 0
-        },
-        end: {
-          col: this.visColMax,
-          row: limit
-        }
-      } : {
-        start: {
-          col: 0,
-          row: this.visRowMin
-        },
-        end: {
-          col: limit,
-          row: this.visRowMax
-        }
-      }, plane);
-    });
-    if (includeFixed) {
-      if ((this.frozen.frozenColsStart ?? 0) > 0 && (this.frozen.frozenRowsStart ?? 0) > 0) {
-        this.cells.fixedStartStart = this.getCells({
-          start: {
-            col: 0,
-            row: 0
-          },
-          end: {
-            col: this.frozen.frozenColsStart,
-            row: this.frozen.frozenRowsStart
-          }
-        }, "fixedStartStart");
-      }
-      if ((this.frozen.frozenColsEnd ?? 0) > 0 && (this.frozen.frozenRowsStart ?? 0) > 0) {
-        this.cells.fixedStartEnd = this.getCells({
-          start: {
-            col: 0,
-            row: 0
-          },
-          end: {
-            col: this.frozen.frozenColsEnd,
-            row: this.frozen.frozenRowsStart
-          }
-        }, "fixedStartEnd");
-      }
-      if ((this.frozen.frozenColsStart ?? 0) > 0 && (this.frozen.frozenRowsEnd ?? 0) > 0) {
-        this.cells.fixedEndStart = this.getCells({
-          start: {
-            col: 0,
-            row: 0
-          },
-          end: {
-            col: this.frozen.frozenColsStart,
-            row: this.frozen.frozenRowsEnd
-          }
-        }, "fixedEndStart");
-      }
-      if ((this.frozen.frozenColsEnd ?? 0) > 0 && (this.frozen.frozenRowsEnd ?? 0) > 0) {
-        this.cells.fixedEndEnd = this.getCells({
-          start: {
-            col: 0,
-            row: 0
-          },
-          end: {
-            col: this.frozen.frozenColsEnd,
-            row: this.frozen.frozenRowsEnd
-          }
-        }, "fixedEndEnd");
-      }
-    }
-  }
   // Focus handlers
   handleFocus(event) {
     const cellCoords = closestCell(event.target);
@@ -755,43 +430,7 @@ var DxGrid = class extends LitElement2 {
     }
   }
   focusedCellElement() {
-    return this.viewportRef.value?.querySelector(`[data-dx-grid-plane=${this.focusedCell.plane}] > [aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`);
-  }
-  //
-  // `outOfVis` returns by how many rows/cols the focused cell is outside of the `vis` range for an axis, inset by a
-  // `delta`, otherwise zero if it is within that range.
-  //
-  focusedCellRowOutOfVis(minDelta = 0, maxDelta = minDelta) {
-    return this.focusedCell.row <= this.visRowMin + minDelta ? this.focusedCell.row - (this.visRowMin + minDelta) : this.focusedCell.row >= this.visRowMax - maxDelta ? -(this.focusedCell.row - this.visRowMax - maxDelta) : 0;
-  }
-  focusedCellColOutOfVis(minDelta = 0, maxDelta = minDelta) {
-    return this.focusedCell.col <= this.visColMin + minDelta ? this.focusedCell.col - (this.visColMin + minDelta) : this.focusedCell.col >= this.visColMax - maxDelta ? -(this.focusedCell.col - this.visColMax - maxDelta) : 0;
-  }
-  focusedCellOutOfVis(colDelta = 0, rowDelta = colDelta) {
-    switch (this.focusedCell.plane) {
-      case "grid":
-        return {
-          row: this.focusedCellRowOutOfVis(rowDelta),
-          col: this.focusedCellColOutOfVis(colDelta)
-        };
-      case "frozenRowsStart":
-      case "frozenRowsEnd":
-        return {
-          col: this.focusedCellColOutOfVis(colDelta),
-          row: 0
-        };
-      case "frozenColsStart":
-      case "frozenColsEnd":
-        return {
-          col: 0,
-          row: this.focusedCellRowOutOfVis(rowDelta)
-        };
-      default:
-        return {
-          col: 0,
-          row: 0
-        };
-    }
+    return this.viewportRef.value?.querySelector(`[aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`);
   }
   /**
   * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
@@ -810,238 +449,124 @@ var DxGrid = class extends LitElement2 {
           col: this.focusedCell.col + delta
         };
     }
+    (this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax || this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax ? this.viewportRef.value : this.focusedCellElement())?.focus({
+      preventScroll: true
+    });
     if (increment) {
       this.snapPosToFocusedCell();
     }
-    queueMicrotask(() => {
-      const outOfVis = this.focusedCellOutOfVis(overscanCol, overscanRow);
-      (outOfVis.col !== 0 || outOfVis.row !== 0 ? this.viewportRef.value : this.focusedCellElement())?.focus({
-        preventScroll: true
-      });
-    });
-  }
-  findPosInlineFromVisColMin(deltaCols) {
-    return [
-      ...Array(deltaCols)
-    ].reduce((acc, _, c0) => acc - this.colSize(this.visColMin - c0, "grid") - gap, this.binInlineMin + gap);
-  }
-  findPosBlockFromVisRowMin(deltaRows) {
-    return [
-      ...Array(deltaRows)
-    ].reduce((acc, _, r0) => acc - this.rowSize(this.visRowMin - r0, "grid") - gap, this.binBlockMin + gap);
   }
   /**
   * Updates `pos` so that a cell in focus is fully within the viewport
   */
   snapPosToFocusedCell() {
-    const outOfVis = this.focusedCellOutOfVis(overscanCol, overscanRow);
-    if (outOfVis.col < 0) {
-      this.posInline = this.findPosInlineFromVisColMin(-outOfVis.col);
-      this.updateVisInline();
-    } else if (outOfVis.col > 0) {
-      const sizeSumCol = [
-        ...Array(this.focusedCell.col - this.visColMin)
-      ].reduce((acc, _, c0) => {
-        acc += this.colSize(this.visColMin + overscanCol + c0, "grid") + gap;
-        return acc;
-      }, 0);
-      this.posInline = Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, this.binInlineMin + sizeSumCol - this.sizeInline));
-      this.updateVisInline();
-    }
-    if (outOfVis.row < 0) {
-      this.posBlock = this.findPosBlockFromVisRowMin(-outOfVis.row);
-      this.updateVisBlock();
-    } else if (outOfVis.row > 0) {
-      const sizeSumRow = [
-        ...Array(this.focusedCell.row - this.visRowMin)
-      ].reduce((acc, _, r0) => {
-        acc += this.rowSize(this.visRowMin + overscanRow + r0, "grid") + gap;
-        return acc;
-      }, 0);
-      this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, this.binBlockMin + sizeSumRow - this.sizeBlock));
-      this.updateVisBlock();
-    }
-  }
-  //
-  // Map scroll DOM methods to virtualized value.
-  //
-  get scrollLeft() {
-    return this.posInline;
-  }
-  set scrollLeft(nextValue) {
-    this.posInline = nextValue;
-    this.maybeUpdateVisInline();
-  }
-  get scrollTop() {
-    return this.posBlock;
-  }
-  set scrollTop(nextValue) {
-    this.posBlock = nextValue;
-    this.maybeUpdateVisBlock();
-  }
-  //
-  // Resize handlers
-  //
-  axisResizeable(plane, axis, index) {
-    return axis === "col" ? !!(this.columns[plane]?.[index]?.resizeable ?? this.columnDefault[plane]?.resizeable) : !!(this.rows[plane]?.[index]?.resizeable ?? this.rowDefault[plane]?.resizeable);
-  }
-  handleAxisResizeInternal(event) {
-    event.stopPropagation();
-    const { plane, axis, delta, size, index, state: state2 } = event;
-    if (axis === "col") {
-      const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, size + delta));
-      this.colSizes = {
-        ...this.colSizes,
-        [plane]: {
-          ...this.colSizes[plane],
-          [index]: nextSize
-        }
-      };
-      this.updateVisInline();
-      this.updateIntrinsicInlineSize();
+    if (this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax || this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax) {
+    } else if (this.focusedCell.col > this.visColMin + overscanCol && this.focusedCell.col < this.visColMax - overscanCol - 1 && this.focusedCell.row > this.visRowMin + overscanRow && this.focusedCell.row < this.visRowMax - overscanRow - 1) {
     } else {
-      const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, size + delta));
-      this.rowSizes = {
-        ...this.colSizes,
-        [plane]: {
-          ...this.rowSizes[plane],
-          [index]: nextSize
-        }
-      };
-      this.updateVisBlock();
-      this.updateIntrinsicBlockSize();
-    }
-    if (state2 === "dropped") {
-      this.dispatchEvent(new DxAxisResize({
-        plane,
-        axis,
-        index,
-        size: this[`${axis}Size`](index, plane)
-      }));
+      if (this.focusedCell.col <= this.visColMin + overscanCol) {
+        this.posInline = this.binInlineMin;
+        this.updateVisInline();
+      } else if (this.focusedCell.col >= this.visColMax - overscanCol - 1) {
+        const sizeSumCol = [
+          ...Array(this.focusedCell.col - this.visColMin)
+        ].reduce((acc, _, c0) => {
+          acc += this.colSize(this.visColMin + overscanCol + c0) + gap;
+          return acc;
+        }, 0);
+        this.posInline = Math.max(0, this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline);
+        this.updateVisInline();
+      }
+      if (this.focusedCell.row <= this.visRowMin + overscanRow) {
+        this.posBlock = this.binBlockMin;
+        this.updateVisBlock();
+      } else if (this.focusedCell.row >= this.visRowMax - overscanRow - 1) {
+        const sizeSumRow = [
+          ...Array(this.focusedCell.row - this.visRowMin)
+        ].reduce((acc, _, r0) => {
+          acc += this.rowSize(this.visRowMin + overscanRow + r0) + gap;
+          return acc;
+        }, 0);
+        this.posBlock = Math.max(0, this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock);
+        this.updateVisBlock();
+      }
     }
   }
   //
   // Render and other lifecycle methods
   //
-  renderFixed(plane, selection) {
-    const colPlane = resolveColPlane(plane);
-    const rowPlane = resolveRowPlane(plane);
-    const cols = this.frozen[colPlane];
-    const rows = this.frozen[rowPlane];
-    return (cols ?? 0) > 0 && (rows ?? 0) > 0 ? html2`<div
-          role="none"
-          data-dx-grid-plane=${plane}
-          class="dx-grid__plane--fixed"
-          style=${styleMap({
-      "grid-template-columns": this[`template${colPlane}`],
-      "grid-template-rows": this[`template${rowPlane}`]
-    })}
-        >
-          ${[
-      ...Array(cols)
-    ].map((_, c) => {
-      return [
-        ...Array(rows)
-      ].map((_2, r) => {
-        return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection));
-      });
-    })}
-        </div>` : null;
-  }
-  renderFrozenRows(plane, visibleCols, offsetInline, selection) {
-    const rowPlane = resolveRowPlane(plane);
-    const rows = this.frozen[rowPlane];
-    return (rows ?? 0) > 0 ? html2`<div role="none" class="dx-grid__plane--frozen-row">
-          <div
-            role="none"
-            data-dx-grid-plane=${plane}
-            class="dx-grid__plane--frozen-row__content"
-            style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateGridColumns};grid-template-rows:${this[`template${rowPlane}`]}"
-          >
-            ${[
-      ...Array(visibleCols)
-    ].map((_, c0) => {
-      return [
-        ...Array(rows)
-      ].map((_2, r) => {
-        const c = this.visColMin + c0;
-        return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection), c0, r);
-      });
-    })}
-          </div>
-        </div>` : null;
-  }
-  renderFrozenColumns(plane, visibleRows, offsetBlock, selection) {
-    const colPlane = resolveColPlane(plane);
-    const cols = this.frozen[colPlane];
-    return (cols ?? 0) > 0 ? html2`<div role="none" class="dx-grid__plane--frozen-col">
-          <div
-            role="none"
-            data-dx-grid-plane=${plane}
-            class="dx-grid__plane--frozen-col__content"
-            style="transform:translate3d(0,${offsetBlock}px,0);grid-template-rows:${this.templateGridRows};grid-template-columns:${this[`template${colPlane}`]}"
-          >
-            ${[
-      ...Array(cols)
-    ].map((_, c) => {
-      return [
-        ...Array(visibleRows)
-      ].map((_2, r0) => {
-        const r = this.visRowMin + r0;
-        return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection), c, r0);
-      });
-    })}
-          </div>
-        </div>` : null;
-  }
-  renderCell(col, row, plane, selected, visCol = col, visRow = row) {
-    const cell = this.cell(col, row, plane);
-    const active = this.cellActive(col, row, plane);
-    const resizeIndex = cell?.resizeHandle ? cell.resizeHandle === "col" ? col : row : void 0;
-    const resizePlane = cell?.resizeHandle ? resolveResizePlane(cell.resizeHandle, plane) : void 0;
-    return html2`<div
-      role="gridcell"
-      tabindex="0"
-      ?inert=${col < 0 || row < 0}
-      ?aria-selected=${selected}
-      class=${cell || active ? (cell?.className ? cell.className + " " : "") + (active ? "dx-grid__cell--active" : "") : nothing}
-      aria-colindex=${col}
-      aria-rowindex=${row}
-      data-dx-grid-action="cell"
-      style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
-    >
-      ${cell?.value}${cell?.resizeHandle && this.axisResizeable(resizePlane, cell.resizeHandle, resizeIndex) ? html2`<dx-grid-axis-resize-handle
-            axis=${cell.resizeHandle}
-            plane=${resizePlane}
-            index=${resizeIndex}
-            size=${this[`${cell.resizeHandle}Size`](resizeIndex, plane)}
-          ></dx-grid-axis-resize-handle>` : null}
-    </div>`;
-  }
   render() {
     const visibleCols = this.visColMax - this.visColMin;
     const visibleRows = this.visRowMax - this.visRowMin;
     const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;
     const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
-    const selection = selectionProps(this.selectionStart, this.selectionEnd);
-    return html2`<div
+    const selectColMin = Math.min(this.selectionStart.col, this.selectionEnd.col);
+    const selectColMax = Math.max(this.selectionStart.col, this.selectionEnd.col);
+    const selectRowMin = Math.min(this.selectionStart.row, this.selectionEnd.row);
+    const selectRowMax = Math.max(this.selectionStart.row, this.selectionEnd.row);
+    const selectVisible = selectColMin !== selectColMax || selectRowMin !== selectRowMax;
+    return html`<div
       role="none"
       class="dx-grid"
-      style=${styleMap({
-      "grid-template-columns": `${this.templatefrozenColsStart ? "min-content " : ""}minmax(0, ${Number.isFinite(this.limitColumns) ? `${this.intrinsicInlineSize}px` : "1fr"})${this.templatefrozenColsEnd ? " min-content" : ""}`,
-      "grid-template-rows": `${this.templatefrozenRowsStart ? "min-content " : ""}minmax(0, ${Number.isFinite(this.limitRows) ? `${this.intrinsicBlockSize}px` : "1fr"})${this.templatefrozenRowsEnd ? " min-content" : ""}`
-    })}
       data-grid=${this.gridId}
       data-grid-mode=${this.mode}
-      ?data-grid-select=${selection.visible}
+      ?data-grid-select=${selectVisible}
+      @pointerdown=${this.handlePointerDown}
+      @pointerup=${this.handlePointerUp}
+      @pointermove=${this.handlePointerMove}
+      @pointerleave=${this.handlePointerUp}
+      @focus=${this.handleFocus}
+      @blur=${this.handleBlur}
+      @keydown=${this.handleKeydown}
     >
-      ${this.renderFixed("fixedStartStart", selection)}${this.renderFrozenRows("frozenRowsStart", visibleCols, offsetInline, selection)}${this.renderFixed("fixedStartEnd", selection)}${this.renderFrozenColumns("frozenColsStart", visibleRows, offsetBlock, selection)}
-      <div role="grid" class="dx-grid__plane--grid" tabindex="0" ${ref2(this.viewportRef)}>
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__columnheader">
+        <div
+          role="none"
+          class="dx-grid__columnheader__content"
+          style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateColumns};"
+        >
+          ${[
+      ...Array(visibleCols)
+    ].map((_, c0) => {
+      const c = this.visColMin + c0;
+      return html`<div
+              role="columnheader"
+              ?inert=${c < 0}
+              style="block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 2};"
+            >
+              <span id=${localChId(c0)}>${colToA1Notation(c)}</span>
+              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-col,${c}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
+            </div>`;
+    })}
+        </div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__rowheader">
+        <div
+          role="none"
+          class="dx-grid__rowheader__content"
+          style="transform:translate3d(0,${offsetBlock}px,0);grid-template-rows:${this.templateRows};"
+        >
+          ${[
+      ...Array(visibleRows)
+    ].map((_, r0) => {
+      const r = this.visRowMin + r0;
+      return html`<div role="rowheader" ?inert=${r < 0} style="grid-row:${r0 + 1}/${r0 + 2}">
+              <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>
+              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-row,${r}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
+            </div>`;
+    })}
+        </div>
+      </div>
+      <div role="grid" class="dx-grid__viewport" tabindex="0" @wheel=${this.handleWheel} ${ref(this.viewportRef)}>
         <div
           role="none"
-          class="dx-grid__plane--grid__content"
-          data-dx-grid-plane="grid"
-          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this.templateGridColumns};grid-template-rows:${this.templateGridRows};"
+          class="dx-grid__content"
+          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this.templateColumns};grid-template-rows:${this.templateRows};"
         >
           ${[
       ...Array(visibleCols)
@@ -1051,70 +576,75 @@ var DxGrid = class extends LitElement2 {
       ].map((_2, r0) => {
         const c = c0 + this.visColMin;
         const r = r0 + this.visRowMin;
-        return this.renderCell(c, r, "grid", cellSelected(c, r, "grid", selection), c0, r0);
+        const cell = this.cell(c, r);
+        const active = this.focusActive && this.focusedCell.col === c && this.focusedCell.row === r;
+        const selected = c >= selectColMin && c <= selectColMax && r >= selectRowMin && r <= selectRowMax;
+        return html`<div
+                role="gridcell"
+                tabindex="0"
+                ?inert=${c < 0 || r < 0}
+                ?aria-selected=${selected}
+                class=${cell || active ? (cell?.className ? cell.className + " " : "") + (active ? "dx-grid__cell--active" : "") : nothing}
+                aria-rowindex=${r}
+                aria-colindex=${c}
+                data-dx-grid-action="cell"
+                style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
+              >
+                ${cell?.value}
+              </div>`;
       });
     })}
         </div>
       </div>
-      ${this.renderFrozenColumns("frozenColsEnd", visibleRows, offsetBlock, selection)}${this.renderFixed("fixedEndStart", selection)}${this.renderFrozenRows("frozenRowsEnd", visibleCols, offsetInline, selection)}${this.renderFixed("fixedEndEnd", selection)}
+      <div role="none" class="dx-grid__scrollbar" aria-orientation="vertical">
+        <div role="none" class="dx-grid__scrollbar__thumb"></div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__scrollbar" aria-orientation="horizontal">
+        <div role="none" class="dx-grid__scrollbar__thumb"></div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
     </div>`;
   }
-  updateIntrinsicInlineSize() {
-    this.intrinsicInlineSize = Number.isFinite(this.limitColumns) ? [
-      ...Array(this.limitColumns)
-    ].reduce((acc, _, c0) => acc + this.colSize(c0, "grid"), 0) + gap * (this.limitColumns - 1) : Infinity;
-  }
-  updateIntrinsicBlockSize() {
-    this.intrinsicBlockSize = Number.isFinite(this.limitRows) ? [
-      ...Array(this.limitRows)
-    ].reduce((acc, _, r0) => acc + this.rowSize(r0, "grid"), 0) + gap * (this.limitRows - 1) : Infinity;
-  }
-  updateIntrinsicSizes() {
-    this.updateIntrinsicInlineSize();
-    this.updateIntrinsicBlockSize();
-  }
   firstUpdated() {
     if (this.getCells) {
-      this.updateCells(true);
+      this.cells = this.getCells({
+        start: {
+          col: this.visColMin,
+          row: this.visRowMin
+        },
+        end: {
+          col: this.visColMax,
+          row: this.visRowMax
+        }
+      });
     }
     this.observer.observe(this.viewportRef.value);
-    this.colSizes = Object.entries(this.columns).reduce((acc, [plane, planeColMeta]) => {
-      acc[plane] = Object.entries(planeColMeta).reduce((planeAcc, [col, colMeta]) => {
-        if (colMeta?.size) {
-          planeAcc[col] = colMeta.size;
-        }
-        return planeAcc;
-      }, {});
+    this.colSizes = Object.entries(this.columns).reduce((acc, [colId, colMeta]) => {
+      if (colMeta?.size) {
+        acc[colId] = colMeta.size;
+      }
       return acc;
-    }, {
-      grid: {}
-    });
-    this.rowSizes = Object.entries(this.rows).reduce((acc, [plane, planeRowMeta]) => {
-      acc[plane] = Object.entries(planeRowMeta).reduce((planeAcc, [row, rowMeta]) => {
-        if (rowMeta?.size) {
-          planeAcc[row] = rowMeta.size;
-        }
-        return planeAcc;
-      }, {});
+    }, {});
+    this.rowSizes = Object.entries(this.rows).reduce((acc, [rowId, rowMeta]) => {
+      if (rowMeta?.size) {
+        acc[rowId] = rowMeta.size;
+      }
       return acc;
-    }, {
-      grid: {}
-    });
-    this.updateIntrinsicSizes();
+    }, {});
   }
   willUpdate(changedProperties) {
     if (this.getCells && (changedProperties.has("initialCells") || changedProperties.has("visColMin") || changedProperties.has("visColMax") || changedProperties.has("visRowMin") || changedProperties.has("visRowMax"))) {
-      this.updateCells();
-    }
-    if (changedProperties.has("rowDefault") || changedProperties.has("rows") || changedProperties.has("limitRows")) {
-      this.updateIntrinsicBlockSize();
-      this.updatePosBlock();
-      this.updateVisBlock();
-    }
-    if (changedProperties.has("colDefault") || changedProperties.has("columns") || changedProperties.has("limitColumns")) {
-      this.updateIntrinsicInlineSize();
-      this.updatePosInline();
-      this.updateVisInline();
+      this.cells = this.getCells({
+        start: {
+          col: this.visColMin,
+          row: this.visRowMin
+        },
+        end: {
+          col: this.visColMax,
+          row: this.visRowMax
+        }
+      });
     }
   }
   updated(changedProperties) {
@@ -1122,13 +652,6 @@ var DxGrid = class extends LitElement2 {
       this.refocus();
     }
   }
-  updateIfWithinBounds({ col, row }) {
-    if (col >= this.visColMin && col <= this.visColMax && row >= this.visRowMin && row <= this.visRowMax) {
-      this.requestUpdate();
-      return true;
-    }
-    return false;
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.viewportRef.value) {
@@ -1139,159 +662,133 @@ var DxGrid = class extends LitElement2 {
     return this;
   }
 };
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: String
   })
 ], DxGrid.prototype, "gridId", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "rowDefault", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "columnDefault", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "rows", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "columns", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "initialCells", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: String
   })
 ], DxGrid.prototype, "mode", void 0);
-_ts_decorate2([
-  property2({
-    type: Number
-  })
-], DxGrid.prototype, "limitColumns", void 0);
-_ts_decorate2([
-  property2({
-    type: Number
-  })
-], DxGrid.prototype, "limitRows", void 0);
-_ts_decorate2([
-  property2({
-    type: Object
-  })
-], DxGrid.prototype, "frozen", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "cells", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "posInline", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "posBlock", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "sizeInline", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "sizeBlock", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "overscanInline", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "overscanBlock", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binInlineMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binInlineMax", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binBlockMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binBlockMax", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visColMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visColMax", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visRowMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visRowMax", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "templateGridColumns", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "templatefrozenColsStart", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "templatefrozenColsEnd", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "templateGridRows", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
-], DxGrid.prototype, "templatefrozenRowsStart", void 0);
-_ts_decorate2([
+], DxGrid.prototype, "templateColumns", void 0);
+_ts_decorate([
   state()
-], DxGrid.prototype, "templatefrozenRowsEnd", void 0);
-_ts_decorate2([
+], DxGrid.prototype, "templateRows", void 0);
+_ts_decorate([
   state()
 ], DxGrid.prototype, "pointer", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "colSizes", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "rowSizes", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "focusActive", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "focusedCell", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "selectionStart", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "selectionEnd", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "intrinsicInlineSize", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "intrinsicBlockSize", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "observer", void 0);
-DxGrid = _ts_decorate2([
-  customElement2("dx-grid")
+_ts_decorate([
+  eventOptions({
+    capture: true
+  })
+], DxGrid.prototype, "handleFocus", null);
+_ts_decorate([
+  eventOptions({
+    capture: true
+  })
+], DxGrid.prototype, "handleBlur", null);
+DxGrid = _ts_decorate([
+  customElement("dx-grid")
 ], DxGrid);
 export {
   DxAxisResize,
-  DxAxisResizeInternal,
   DxEditRequest,
   DxGrid,
-  DxGridCellsSelect,
-  colToA1Notation,
-  rowToA1Notation
+  DxGridCellsSelect
 };
 //# sourceMappingURL=index.mjs.map