@dxos/lit-grid 0.8.3 → 0.8.4-main.16b68245aa

package/src/dx-grid.ts

@@ -2,75 +2,77 @@
 // Copyright 2024 DXOS.org
 //
 
+import './dx-grid-axis-resize-handle';
+
 import { LitElement, html, nothing } from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
-import { ref, createRef, type Ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { type Ref, createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 
-import { defaultColSize, defaultRowSize } from './defs';
-// eslint-disable-next-line unused-imports/no-unused-imports
-import './dx-grid-axis-resize-handle';
+import { defaultColSize, defaultRowSize, focusUnfurlDefault } from './defs';
 import {
-  type DxGridAxisMetaProps,
-  type DxGridAxisSizes,
-  type DxGridPlaneCellIndex,
-  type DxGridCellValue,
   DxAxisResize,
   type DxAxisResizeInternal,
   DxEditRequest,
+  type DxGridAnnotatedPanEvent,
+  type DxGridAxis,
   type DxGridAxisMeta,
+  type DxGridAxisMetaProps,
+  type DxGridAxisSizes,
+  type DxGridCellValue,
   type DxGridCells,
   DxGridCellsSelect,
   type DxGridFixedPlane,
+  type DxGridFocusIndicatorVariant,
   type DxGridFrozenAxes,
   type DxGridFrozenColsPlane,
   type DxGridFrozenPlane,
   type DxGridFrozenRowsPlane,
   type DxGridMode,
+  type DxGridOverscroll,
   type DxGridPlane,
+  type DxGridPlaneCellIndex,
   type DxGridPlaneCells,
   type DxGridPlaneRange,
   type DxGridPlaneRecord,
   type DxGridPointer,
   type DxGridPosition,
-  type DxGridAxis,
-  type DxGridSelectionProps,
-  type DxGridAnnotatedPanEvent,
   type DxGridRange,
+  type DxGridSelectionProps,
   separator,
 } from './types';
 import {
-  toCellIndex,
-  gap,
-  resizeTolerance,
-  sizeColMin,
-  sizeColMax,
-  sizeRowMin,
-  sizeRowMax,
-  shouldSelect,
-  selectionProps,
   cellSelected,
   closestAction,
   closestCell,
-  targetIsPlane,
-  resolveRowPlane,
+  gap,
+  isReadonly,
+  isSameCell,
+  resizeTolerance,
   resolveColPlane,
   resolveFrozenPlane,
-  isSameCell,
-  isReadonly,
+  resolveRowPlane,
+  selectionProps,
+  shouldSelect,
+  sizeColMax,
+  sizeColMin,
+  sizeRowMax,
+  sizeRowMin,
+  targetIsPlane,
+  toCellIndex,
 } from './util';
 
 @customElement('dx-grid')
 export class DxGrid extends LitElement {
   constructor() {
     super();
-    // Wheel, top-level and element-level
+    // Wheel, top-level and element-level.
     document.defaultView?.addEventListener('wheel', this.handleTopLevelWheel, { passive: false });
     this.addEventListener('wheel', this.handleWheel);
-    // Custom event(s)
+    // Custom event(s).
     this.addEventListener('dx-axis-resize-internal', this.handleAxisResizeInternal as EventListener);
-    // Standard events
+    // Standard events.
     this.addEventListener('pointerdown', this.handlePointerDown);
     this.addEventListener('pointermove', this.handlePointerMove);
     this.addEventListener('pointerup', this.handlePointerUp);
@@ -84,12 +86,12 @@ export class DxGrid extends LitElement {
   gridId: string = 'default-grid-id';
 
   @property({ type: Object })
-  rowDefault: DxGridPlaneRecord<DxGridFrozenRowsPlane, DxGridAxisMetaProps> = {
+  rowDefault: Partial<DxGridPlaneRecord<DxGridFrozenRowsPlane, Partial<DxGridAxisMetaProps>>> = {
     grid: { size: defaultRowSize },
   };
 
   @property({ type: Object })
-  columnDefault: DxGridPlaneRecord<DxGridFrozenColsPlane, DxGridAxisMetaProps> = {
+  columnDefault: Partial<DxGridPlaneRecord<DxGridFrozenColsPlane, Partial<DxGridAxisMetaProps>>> = {
     grid: { size: defaultColSize },
   };
 
@@ -115,11 +117,14 @@ export class DxGrid extends LitElement {
   frozen: DxGridFrozenAxes = {};
 
   @property({ type: String })
-  overscroll: 'inline' | 'block' | 'trap' | undefined = undefined;
+  overscroll: DxGridOverscroll = undefined;
 
   @property({ type: String })
   activeRefs = '';
 
+  @property({ type: String })
+  focusIndicatorVariant: DxGridFocusIndicatorVariant = 'sheet';
+
   /**
    * 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`.
@@ -195,6 +200,7 @@ export class DxGrid extends LitElement {
   //
   // `template` is the rendered value of `grid-{axis}-template`.
   //
+
   @state()
   private templateGridColumns = '0';
 
@@ -213,6 +219,16 @@ export class DxGrid extends LitElement {
   @state()
   private templatefrozenRowsEnd = '';
 
+  //
+  // `frozen…Size` is used to measure space available for the non-fixed planes
+  //
+
+  @state()
+  private frozenColsSize = 0;
+
+  @state()
+  private frozenRowsSize = 0;
+
   //
   // Focus, selection, and resize states
   //
@@ -308,7 +324,7 @@ export class DxGrid extends LitElement {
             this.dispatchSelectionChange();
           }
           if (this.mode === 'edit-select') {
-            // Prevent focus moving when editing while selection is possible
+            // Prevent focus moving when editing while selection is possible.
             event.preventDefault();
           } else if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
             this.dispatchEditRequest();
@@ -416,15 +432,13 @@ export class DxGrid extends LitElement {
   }
 
   private moveFocusIntoPlane(plane: DxGridPlane): void {
-    if (this.focusedCell.plane !== plane) {
-      const colPlane = resolveColPlane(plane);
-      const rowPlane = resolveRowPlane(plane);
-      this.focusedCell = {
-        plane,
-        col: colPlane === 'grid' ? this.visColMin : 0,
-        row: rowPlane === 'grid' ? this.visRowMin : 0,
-      };
-    }
+    const colPlane = resolveColPlane(plane);
+    const rowPlane = resolveRowPlane(plane);
+    this.focusedCell = {
+      plane,
+      col: colPlane === 'grid' ? this.visColMin : 0,
+      row: rowPlane === 'grid' ? this.visRowMin : 0,
+    };
     this.focusedCellElement()?.focus({ preventScroll: true });
   }
 
@@ -481,6 +495,13 @@ export class DxGrid extends LitElement {
             event.preventDefault();
             this.dispatchEditRequest();
             break;
+          case 'Backspace':
+          case 'Delete':
+            if (!event.defaultPrevented) {
+              event.preventDefault();
+              this.dispatchEditRequest('');
+            }
+            break;
           default:
             if (event.key.length === 1 && event.key.match(/\P{Cc}/u) && !(event.metaKey || event.ctrlKey)) {
               this.dispatchEditRequest(event.key);
@@ -574,7 +595,7 @@ export class DxGrid extends LitElement {
   }
 
   //
-  // Resize & reposition handlers, observer, ref
+  // Resize & reposition handlers, observer, ref.
   //
 
   @state()
@@ -584,19 +605,18 @@ export class DxGrid extends LitElement {
       blockSize: 0,
     };
     if (
-      Math.abs(inlineSize - this.sizeInline) > resizeTolerance ||
-      Math.abs(blockSize - this.sizeBlock) > resizeTolerance
+      Math.abs(inlineSize - this.frozenColsSize - this.sizeInline) > resizeTolerance ||
+      Math.abs(blockSize - this.frozenRowsSize - this.sizeBlock) > resizeTolerance
     ) {
       // console.info('[updating bounds]', 'resize', [inlineSize - this.sizeInline, blockSize - this.sizeBlock]);
-      this.sizeInline = inlineSize;
-      this.sizeBlock = blockSize;
+      this.sizeInline = inlineSize - this.frozenColsSize;
+      this.sizeBlock = blockSize - this.frozenRowsSize;
       this.updateVis();
       queueMicrotask(() => this.updatePos());
     }
   });
 
   private gridRef: Ref<HTMLDivElement> = createRef();
-  private viewportRef: Ref<HTMLDivElement> = createRef();
 
   private maybeUpdateVisInline = () => {
     if (this.posInline < this.binInlineMin || this.posInline >= this.binInlineMax) {
@@ -640,16 +660,29 @@ export class DxGrid extends LitElement {
         (this.overscroll === 'inline' && event.overscrollInline === 0) ||
         (this.overscroll === 'block' && event.overscrollBlock === 0)
       ) {
-        event.preventDefault();
-        event.stopPropagation();
+        const element = event.target as HTMLElement;
+        const activeCell = element.closest('[data-dx-active]');
+        const contentEl = element.closest('.dx-grid__cell__content');
+        if (
+          !(
+            element &&
+            activeCell &&
+            contentEl &&
+            (contentEl.scrollWidth > contentEl.clientWidth || contentEl.scrollHeight > contentEl.clientHeight)
+          )
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
       }
     }
   };
 
   private handleWheel = (event: DxGridAnnotatedPanEvent) => {
     if (this.mode === 'browse') {
-      const nextPosInline = this.posInline + event.deltaX;
-      const nextPosBlock = this.posBlock + event.deltaY;
+      const { deltaX, deltaY } = this.getOverflowingCellModifiedDeltas(event);
+      const nextPosInline = this.posInline + deltaX;
+      const nextPosBlock = this.posBlock + deltaY;
       const maxPosInline = this.maxPosInline();
       const maxPosBlock = this.maxPosBlock();
       this.updatePos(nextPosInline, nextPosBlock, maxPosInline, maxPosBlock);
@@ -662,7 +695,7 @@ export class DxGrid extends LitElement {
   };
 
   private updateVisInline(): void {
-    // todo: avoid starting from zero
+    // todo: avoid starting from zero.
     let axisCursor = 0;
     let pxCursor = this.colSize(axisCursor, 'grid');
 
@@ -708,10 +741,19 @@ export class DxGrid extends LitElement {
     this.templatefrozenColsEnd = [...Array(this.frozen.frozenColsEnd ?? 0)]
       .map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`)
       .join(' ');
+
+    this.frozenColsSize =
+      [...Array(this.frozen.frozenColsStart ?? 0)].reduce(
+        (sum, _, c0) => sum + this.colSize(c0, 'frozenColsStart'),
+        0,
+      ) +
+      gap * Math.max(0, this.frozen.frozenColsStart ?? 0 - 1) +
+      [...Array(this.frozen.frozenColsEnd ?? 0)].reduce((sum, _, c0) => sum + this.colSize(c0, 'frozenColsEnd'), 0) +
+      gap * Math.max(0, this.frozen.frozenColsEnd ?? 0 - 1);
   }
 
   private updateVisBlock(): void {
-    // todo: avoid starting from zero
+    // todo: avoid starting from zero.
     let axisCursor = 0;
     let pxCursor = this.rowSize(axisCursor, 'grid');
 
@@ -757,6 +799,15 @@ export class DxGrid extends LitElement {
     this.templatefrozenRowsEnd = [...Array(this.frozen.frozenRowsEnd ?? 0)]
       .map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`)
       .join(' ');
+
+    this.frozenRowsSize =
+      [...Array(this.frozen.frozenRowsStart ?? 0)].reduce(
+        (sum, _, r0) => sum + this.rowSize(r0, 'frozenRowsStart'),
+        0,
+      ) +
+      gap * Math.max(0, this.frozen.frozenRowsStart ?? 0 - 1) +
+      [...Array(this.frozen.frozenRowsEnd ?? 0)].reduce((sum, _, r0) => sum + this.rowSize(r0, 'frozenRowsEnd'), 0) +
+      gap * Math.max(0, this.frozen.frozenRowsEnd ?? 0 - 1);
   }
 
   private updateVis(): void {
@@ -978,7 +1029,7 @@ export class DxGrid extends LitElement {
   }
 
   /**
-   * Updates `pos` so that a cell in focus is fully within the viewport
+   * Updates `pos` so that a cell in focus is fully within the viewport.
    */
   snapPosToFocusedCell(): void {
     const outOfVis = this.focusedCellOutOfVis();
@@ -1055,16 +1106,40 @@ export class DxGrid extends LitElement {
       : !!(this.rows[plane]?.[index]?.resizeable ?? this.rowDefault[plane as DxGridFrozenRowsPlane]?.resizeable);
   }
 
+  private clampAxisSize(
+    plane: 'grid' | DxGridFrozenPlane,
+    axis: DxGridAxis,
+    index: number | string,
+    requestedSize: number,
+  ): number {
+    const minSize =
+      axis === 'col'
+        ? (this.columns[plane]?.[index]?.minSize ??
+          this.columnDefault[plane as DxGridFrozenColsPlane]?.minSize ??
+          sizeColMin)
+        : (this.rows[plane]?.[index]?.minSize ??
+          this.rowDefault[plane as DxGridFrozenRowsPlane]?.minSize ??
+          sizeRowMin);
+    const maxSize =
+      axis === 'col'
+        ? (this.columns[plane]?.[index]?.maxSize ??
+          this.columnDefault[plane as DxGridFrozenColsPlane]?.maxSize ??
+          sizeColMax)
+        : (this.rows[plane]?.[index]?.maxSize ??
+          this.rowDefault[plane as DxGridFrozenRowsPlane]?.maxSize ??
+          sizeRowMax);
+    return Math.max(minSize, Math.min(maxSize, requestedSize));
+  }
+
   private handleAxisResizeInternal(event: DxAxisResizeInternal): void {
     event.stopPropagation();
     const { plane, axis, delta, size, index, state } = event;
+    const nextSize = this.clampAxisSize(plane, axis, index, size + delta);
     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();
     } 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();
@@ -1082,7 +1157,7 @@ export class DxGrid extends LitElement {
   }
 
   //
-  // Render and other lifecycle methods
+  // Render and other lifecycle methods.
   //
 
   // TODO(thure): This is for rendering presentational objects superimposed onto the canonical grid (e.g. DnD drop line for #8108).
@@ -1165,7 +1240,7 @@ export class DxGrid extends LitElement {
   ) {
     const rowPlane = resolveRowPlane(plane) as DxGridFrozenPlane;
     const rows = this.frozen[rowPlane];
-    return (rows ?? 0) > 0
+    return (rows ?? 0) > 0 && this.limitColumns > 0
       ? html`<div
           role="none"
           class="dx-grid__plane--frozen-row"
@@ -1199,7 +1274,7 @@ export class DxGrid extends LitElement {
   ) {
     const colPlane = resolveColPlane(plane) as DxGridFrozenPlane;
     const cols = this.frozen[colPlane];
-    return (cols ?? 0) > 0
+    return (cols ?? 0) > 0 && this.limitRows > 0
       ? html`<div
           role="none"
           class="dx-grid__plane--frozen-col"
@@ -1225,6 +1300,40 @@ export class DxGrid extends LitElement {
       : null;
   }
 
+  private renderMainGrid(
+    visibleCols: number,
+    visibleRows: number,
+    offsetInline: number,
+    offsetBlock: number,
+    selection: DxGridSelectionProps,
+  ) {
+    return this.limitRows > 0 && this.limitColumns > 0
+      ? html`<div
+          role="grid"
+          class="dx-grid__plane--grid"
+          tabindex="0"
+          data-dx-grid-plane="grid"
+          data-dx-grid-plane-row="1"
+          data-dx-grid-plane-col="1"
+        >
+          <div
+            role="none"
+            class="dx-grid__plane--grid__content"
+            style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this
+              .templateGridColumns};grid-template-rows:${this.templateGridRows};"
+          >
+            ${[...Array(visibleRows)].map((_, r0) => {
+              return [...Array(visibleCols)].map((_, c0) => {
+                const c = c0 + this.visColMin;
+                const r = r0 + this.visRowMin;
+                return this.renderCell(c, r, 'grid', cellSelected(c, r, 'grid', selection), c0, r0);
+              });
+            })}
+          </div>
+        </div>`
+      : null;
+  }
+
   private cellReadonly(col: number, row: number, plane: DxGridPlane): boolean {
     const colPlane = resolveColPlane(plane);
     const rowPlane = resolveRowPlane(plane);
@@ -1242,6 +1351,23 @@ export class DxGrid extends LitElement {
     return isReadonly(colReadOnly) || isReadonly(rowReadOnly);
   }
 
+  private cellFocusUnfurl(col: number, row: number, plane: DxGridPlane): boolean {
+    const colPlane = resolveColPlane(plane);
+    const rowPlane = resolveRowPlane(plane);
+
+    // Check cell-specific setting first.
+    const cellUnfurl = this.cell(col, row, plane)?.focusUnfurl;
+    if (cellUnfurl !== undefined) {
+      return cellUnfurl;
+    }
+
+    // Check column/row defaults.
+    const colUnfurl = this.columns?.[colPlane]?.[col]?.focusUnfurl ?? this.columnDefault?.[colPlane]?.focusUnfurl;
+    const rowUnfurl = this.rows?.[rowPlane]?.[row]?.focusUnfurl ?? this.rowDefault?.[rowPlane]?.focusUnfurl;
+
+    return colUnfurl ?? rowUnfurl ?? focusUnfurlDefault;
+  }
+
   /**
    * Determines if the cell's text content should be selectable based on its readonly value.
    * @returns true if the cells text content is selectable, false otherwise.
@@ -1262,10 +1388,49 @@ export class DxGrid extends LitElement {
     return colReadonly === 'text-select' || rowReadonly === 'text-select';
   }
 
+  private getOverflowingCellModifiedDeltas(
+    event: DxGridAnnotatedPanEvent,
+  ): Pick<DxGridAnnotatedPanEvent, 'deltaX' | 'deltaY'> {
+    if (!event.target) {
+      return event;
+    }
+    const element = event.target as HTMLElement;
+    const activeCell = element.closest('[data-dx-active]');
+    const contentEl = element.closest('.dx-grid__cell__content');
+
+    if (!activeCell || !contentEl || !document.activeElement?.contains(element)) {
+      return event;
+    }
+
+    // Commented-out code will let the event delta through unmodified if the cell can scroll but is scrolled to the end
+    // in the same direction as the wheel event, a.k.a. “overscroll”; this is probably undesirable, though.
+
+    const { scrollWidth, clientWidth, scrollHeight, clientHeight /*, scrollLeft, scrollTop */ } = contentEl;
+
+    if (scrollWidth <= clientWidth && scrollHeight <= clientHeight) {
+      return event;
+    }
+
+    const deltaX =
+      scrollWidth > clientWidth /* &&
+      ((event.deltaX < 0 && scrollLeft > 0) || (event.deltaX > 0 && scrollLeft < scrollWidth - clientWidth)) */
+        ? 0
+        : event.deltaX;
+
+    const deltaY =
+      scrollHeight > clientHeight /* &&
+      ((event.deltaY < 0 && scrollTop > 0) || (event.deltaY > 0 && scrollTop < scrollHeight - clientHeight)) */
+        ? 0
+        : event.deltaY;
+
+    return { deltaX, deltaY };
+  }
+
   private renderCell(col: number, row: number, plane: DxGridPlane, selected?: boolean, visCol = col, visRow = row) {
     const cell = this.cell(col, row, plane);
     const active = this.cellActive(col, row, plane);
     const readonly = this.cellReadonly(col, row, plane);
+    const focusUnfurl = this.cellFocusUnfurl(col, row, plane);
     const textSelectable = this.cellTextSelectable(col, row, plane);
     const resizeIndex = cell?.resizeHandle ? (cell.resizeHandle === 'col' ? col : row) : undefined;
     const resizePlane = cell?.resizeHandle ? resolveFrozenPlane(cell.resizeHandle, plane) : undefined;
@@ -1277,16 +1442,17 @@ export class DxGrid extends LitElement {
       aria-readonly=${readonly ? 'true' : nothing}
       class=${cell?.className ?? nothing}
       data-refs=${cell?.dataRefs ?? nothing}
+      data-focus-unfurl=${focusUnfurl ? nothing : 'false'}
       ?data-dx-active=${active}
       data-text-selectable=${textSelectable ? 'true' : 'false'}
       data-dx-grid-action="cell"
       aria-colindex=${col}
       aria-rowindex=${row}
+      data-testid=${`${plane}.${col}.${row}`}
       style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
     >
-      ${this.mode !== 'browse' && active ? null : cell?.value}${this.mode !== 'browse' && active
-        ? null
-        : accessory}${cell?.resizeHandle &&
+      <div role="none" class="dx-grid__cell__content">${cell?.value}${accessory}</div>
+      ${cell?.resizeHandle &&
       this.mode === 'browse' &&
       this.axisResizeable(resizePlane!, cell.resizeHandle, resizeIndex!)
         ? html`<dx-grid-axis-resize-handle
@@ -1311,22 +1477,31 @@ export class DxGrid extends LitElement {
           .split(' ')
           .filter((value) => value)
           .map(
-            // TODO(burdon): Consistent camelCase?
-            (activeRef) =>
-              `[data-refs~="${activeRef}"] { background: var(--dx-grid-commented-active, var(--dx-gridCommentedActive)) !important; }`,
+            (activeRef) => `[data-refs~="${activeRef}"] { background: var(--color-grid-comment-active) !important; }`,
           )
           .join('\n')}
       </style>
       <div
         role="none"
         class="dx-grid"
+        data-arrow-keys="all"
         style=${styleMap({
-          'grid-template-columns': `${this.templatefrozenColsStart ? 'min-content ' : ''}minmax(0, ${
-            Number.isFinite(this.limitColumns) ? `${Math.max(0, this.intrinsicInlineSize)}px` : '1fr'
-          })${this.templatefrozenColsEnd ? ' min-content' : ''}`,
-          'grid-template-rows': `${this.templatefrozenRowsStart ? 'min-content ' : ''}minmax(0, ${
-            Number.isFinite(this.limitRows) ? `${Math.max(0, this.intrinsicBlockSize)}px` : '1fr'
-          })${this.templatefrozenRowsEnd ? ' min-content' : ''}`,
+          'grid-template-columns': [
+            this.templatefrozenColsStart ? 'min-content' : false,
+            this.limitColumns > 0 &&
+              `minmax(0, ${Number.isFinite(this.limitColumns) ? `${Math.max(0, this.intrinsicInlineSize)}px` : '1fr'})`,
+            this.templatefrozenColsEnd ? 'min-content' : false,
+          ]
+            .filter(Boolean)
+            .join(' '),
+          'grid-template-rows': [
+            this.templatefrozenRowsStart ? 'min-content' : false,
+            this.limitRows > 0 &&
+              `minmax(0, ${Number.isFinite(this.limitRows) ? `${Math.max(0, this.intrinsicBlockSize)}px` : '1fr'})`,
+            this.templatefrozenRowsEnd ? ' min-content' : false,
+          ]
+            .filter(Boolean)
+            .join(' '),
           '--dx-grid-content-inline-size': Number.isFinite(this.limitColumns)
             ? `${Math.max(0, this.totalIntrinsicInlineSize)}px`
             : 'max-content',
@@ -1336,6 +1511,7 @@ export class DxGrid extends LitElement {
         })}
         data-grid=${this.gridId}
         data-grid-mode=${this.mode}
+        data-grid-focus-indicator-variant=${this.focusIndicatorVariant}
         ?data-grid-select=${selection.visible}
         ${ref(this.gridRef)}
       >
@@ -1350,30 +1526,7 @@ export class DxGrid extends LitElement {
           offsetBlock,
           selection,
         )}
-        <div
-          role="grid"
-          class="dx-grid__plane--grid"
-          tabindex="0"
-          data-dx-grid-plane="grid"
-          data-dx-grid-plane-row="1"
-          data-dx-grid-plane-col="1"
-          ${ref(this.viewportRef)}
-        >
-          <div
-            role="none"
-            class="dx-grid__plane--grid__content"
-            style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this
-              .templateGridColumns};grid-template-rows:${this.templateGridRows};"
-          >
-            ${[...Array(visibleRows)].map((_, r0) => {
-              return [...Array(visibleCols)].map((_, c0) => {
-                const c = c0 + this.visColMin;
-                const r = r0 + this.visRowMin;
-                return this.renderCell(c, r, 'grid', cellSelected(c, r, 'grid', selection), c0, r0);
-              });
-            })}
-          </div>
-        </div>
+        ${this.renderMainGrid(visibleCols, visibleRows, offsetInline, offsetBlock, selection)}
         ${this.renderFrozenColumns('frozenColsEnd', visibleRows, offsetBlock, selection)}${this.renderFixed(
           'fixedEndStart',
           selection,
@@ -1387,37 +1540,19 @@ export class DxGrid extends LitElement {
   private updateIntrinsicInlineSize(): void {
     this.intrinsicInlineSize = Number.isFinite(this.limitColumns)
       ? [...Array(this.limitColumns)].reduce((acc, _, c0) => acc + this.colSize(c0, 'grid'), 0) +
-        gap * (this.limitColumns - 1)
+        gap * Math.max(0, this.limitColumns - 1)
       : Infinity;
     this.totalIntrinsicInlineSize =
-      this.intrinsicInlineSize +
-      (Number.isFinite(this.frozen.frozenColsStart)
-        ? [...Array(this.frozen.frozenColsStart)].reduce(
-            (acc, _, c0) => acc + gap + this.colSize(c0, 'frozenColsStart'),
-            0,
-          )
-        : 0) +
-      (Number.isFinite(this.frozen.frozenColsEnd)
-        ? [...Array(this.frozen.frozenColsEnd)].reduce((acc, _, c0) => acc + gap + this.colSize(c0, 'frozenColsEnd'), 0)
-        : 0);
+      this.limitColumns > 0 ? this.intrinsicInlineSize + this.frozenColsSize : this.frozenColsSize - gap;
   }
 
   private updateIntrinsicBlockSize(): void {
     this.intrinsicBlockSize = Number.isFinite(this.limitRows)
       ? [...Array(this.limitRows)].reduce((acc, _, r0) => acc + this.rowSize(r0, 'grid'), 0) +
-        gap * (this.limitRows - 1)
+        gap * Math.max(0, this.limitRows - 1)
       : Infinity;
     this.totalIntrinsicBlockSize =
-      this.intrinsicBlockSize +
-      (Number.isFinite(this.frozen.frozenRowsStart)
-        ? [...Array(this.frozen.frozenRowsStart)].reduce(
-            (acc, _, r0) => acc + gap + this.rowSize(r0, 'frozenRowsStart'),
-            0,
-          )
-        : 0) +
-      (Number.isFinite(this.frozen.frozenRowsEnd)
-        ? [...Array(this.frozen.frozenRowsEnd)].reduce((acc, _, r0) => acc + gap + this.rowSize(r0, 'frozenRowsEnd'), 0)
-        : 0);
+      this.limitRows > 0 ? this.intrinsicBlockSize + this.frozenRowsSize : this.frozenRowsSize - gap;
   }
 
   private updateIntrinsicSizes(): void {
@@ -1465,7 +1600,7 @@ export class DxGrid extends LitElement {
     if (this.getCells) {
       this.updateCells(true);
     }
-    this.observer.observe(this.viewportRef.value!);
+    this.observer.observe(this.gridRef.value!);
     this.computeColSizes();
     this.computeRowSizes();
     this.updateIntrinsicSizes();
@@ -1490,6 +1625,13 @@ export class DxGrid extends LitElement {
       this.updateVisInline();
     }
 
+    if (changedProperties.has('frozen')) {
+      this.updateIntrinsicBlockSize();
+      this.updateIntrinsicInlineSize();
+      this.updateVisBlock();
+      this.updateVisInline();
+    }
+
     if (
       this.getCells &&
       (changedProperties.has('initialCells') ||
@@ -1500,7 +1642,8 @@ export class DxGrid extends LitElement {
         changedProperties.has('columns') ||
         changedProperties.has('rows') ||
         changedProperties.has('limitColumns') ||
-        changedProperties.has('limitRows'))
+        changedProperties.has('limitRows') ||
+        changedProperties.has('frozen'))
     ) {
       this.updateCells(true);
     }
@@ -1520,8 +1663,9 @@ export class DxGrid extends LitElement {
     }
   }
 
-  public updateIfWithinBounds({ col, row }: { col: number; row: number }): boolean {
+  public updateIfWithinBounds({ col, row }: { col: number; row: number }, includeFixed?: boolean): boolean {
     if (col >= this.visColMin && col <= this.visColMax && row >= this.visRowMin && row <= this.visRowMax) {
+      this.updateCells(includeFixed);
       this.requestUpdate();
       return true;
     }
@@ -1530,8 +1674,8 @@ export class DxGrid extends LitElement {
 
   override disconnectedCallback(): void {
     super.disconnectedCallback();
-    if (this.viewportRef.value) {
-      this.observer.unobserve(this.viewportRef.value);
+    if (this.gridRef.value) {
+      this.observer.unobserve(this.gridRef.value);
     }
     document.defaultView?.removeEventListener('wheel', this.handleTopLevelWheel);
   }
@@ -1549,6 +1693,7 @@ export {
   parseCellIndex,
   toPlaneCellIndex,
   cellQuery,
+  accessoryHandlesPointerdownAttrs,
 } from './util';
 
 export const commentedClassName = 'dx-grid__cell--commented';