@dxos/lit-grid 0.8.3-staging.0fa589b → 0.8.4-main.28f8d3d

package/dist/src/dx-grid.js

@@ -8,18 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html, nothing } from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
-import { ref, createRef } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { 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 { DxAxisResize, DxEditRequest, DxGridCellsSelect, separator, } from './types';
-import { toCellIndex, gap, resizeTolerance, sizeColMin, sizeColMax, sizeRowMin, sizeRowMax, shouldSelect, selectionProps, cellSelected, closestAction, closestCell, targetIsPlane, resolveRowPlane, resolveColPlane, resolveFrozenPlane, isSameCell, isReadonly, } from './util';
+import { cellSelected, closestAction, closestCell, gap, isReadonly, isSameCell, resizeTolerance, resolveColPlane, resolveFrozenPlane, resolveRowPlane, selectionProps, shouldSelect, sizeColMax, sizeColMin, sizeRowMax, sizeRowMin, targetIsPlane, toCellIndex, } from './util';
 let DxGrid = class DxGrid extends LitElement {
     constructor() {
-        var _a;
         super();
         this.gridId = 'default-grid-id';
         this.rowDefault = {
@@ -133,8 +131,7 @@ let DxGrid = class DxGrid extends LitElement {
             }
         };
         this.handlePointerUp = (event) => {
-            var _a;
-            if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.state) === 'selecting') {
+            if (this.pointer?.state === 'selecting') {
                 const cell = closestCell(event.target);
                 if (cell) {
                     this.setSelectionEnd(cell);
@@ -144,8 +141,7 @@ let DxGrid = class DxGrid extends LitElement {
             this.pointer = null;
         };
         this.handlePointerMove = (event) => {
-            var _a, _b;
-            if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.state) === 'panning') {
+            if (this.pointer?.state === 'panning') {
                 const panEvent = event;
                 panEvent.deltaX = this.pointer.pageX - event.pageX;
                 panEvent.deltaY = this.pointer.pageY - event.pageY;
@@ -156,7 +152,7 @@ let DxGrid = class DxGrid extends LitElement {
             else if (shouldSelect(this.pointer, event)) {
                 this.pointer = { state: 'selecting' };
             }
-            else if (((_b = this.pointer) === null || _b === void 0 ? void 0 : _b.state) === 'selecting') {
+            else if (this.pointer?.state === 'selecting') {
                 const cell = closestCell(event.target);
                 if (cell &&
                     cell.plane === this.selectionStart.plane &&
@@ -169,8 +165,7 @@ let DxGrid = class DxGrid extends LitElement {
         // Resize & reposition handlers, observer, ref
         //
         this.observer = new ResizeObserver((entries) => {
-            var _a, _b, _c;
-            const { inlineSize, blockSize } = (_c = (_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentBoxSize) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : {
+            const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
                 inlineSize: 0,
                 blockSize: 0,
             };
@@ -196,20 +191,28 @@ let DxGrid = class DxGrid extends LitElement {
             }
         };
         this.handleTopLevelWheel = (event) => {
-            var _a;
-            if (event.gridId === ((_a = this.gridId) !== null && _a !== void 0 ? _a : 'never')) {
+            if (event.gridId === (this.gridId ?? 'never')) {
                 if (this.overscroll === 'trap' ||
                     (this.overscroll === 'inline' && event.overscrollInline === 0) ||
                     (this.overscroll === 'block' && event.overscrollBlock === 0)) {
-                    event.preventDefault();
-                    event.stopPropagation();
+                    const element = event.target;
+                    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();
+                    }
                 }
             }
         };
         this.handleWheel = (event) => {
             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);
@@ -221,7 +224,7 @@ let DxGrid = class DxGrid extends LitElement {
             }
         };
         // Wheel, top-level and element-level
-        (_a = document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', this.handleTopLevelWheel, { passive: false });
+        document.defaultView?.addEventListener('wheel', this.handleTopLevelWheel, { passive: false });
         this.addEventListener('wheel', this.handleWheel);
         // Custom event(s)
         this.addEventListener('dx-axis-resize-internal', this.handleAxisResizeInternal);
@@ -305,18 +308,16 @@ let DxGrid = class DxGrid extends LitElement {
         }
     }
     moveFocusBetweenPlanes(event, plane) {
-        var _a, _b, _c, _d;
-        const planeElement = (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-dx-grid-plane="${plane}"]`);
+        const planeElement = this.gridRef.value?.querySelector(`[data-dx-grid-plane="${plane}"]`);
         if (planeElement) {
             const axis = event.key === 'ArrowUp' || event.key === 'ArrowDown' ? 'col' : 'row';
             const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;
-            const planeAxis = planeElement === null || planeElement === void 0 ? void 0 : planeElement.getAttribute(`data-dx-grid-plane-${axis}`);
-            const adjacentPlanes = Array.from((_c = (_b = this.gridRef.value) === null || _b === void 0 ? void 0 : _b.querySelectorAll(`[data-dx-grid-plane-${axis}="${planeAxis}"]`)) !== null && _c !== void 0 ? _c : [planeElement]).filter((el) => !!el);
-            (_d = adjacentPlanes[(adjacentPlanes.length + adjacentPlanes.indexOf(planeElement) + delta) % adjacentPlanes.length]) === null || _d === void 0 ? void 0 : _d.focus({ preventScroll: true });
+            const planeAxis = planeElement?.getAttribute(`data-dx-grid-plane-${axis}`);
+            const adjacentPlanes = Array.from(this.gridRef.value?.querySelectorAll(`[data-dx-grid-plane-${axis}="${planeAxis}"]`) ?? [planeElement]).filter((el) => !!el);
+            adjacentPlanes[(adjacentPlanes.length + adjacentPlanes.indexOf(planeElement) + delta) % adjacentPlanes.length]?.focus({ preventScroll: true });
         }
     }
     moveFocusIntoPlane(plane) {
-        var _a;
         if (this.focusedCell.plane !== plane) {
             const colPlane = resolveColPlane(plane);
             const rowPlane = resolveRowPlane(plane);
@@ -326,11 +327,10 @@ let DxGrid = class DxGrid extends LitElement {
                 row: rowPlane === 'grid' ? this.visRowMin : 0,
             };
         }
-        (_a = this.focusedCellElement()) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        this.focusedCellElement()?.focus({ preventScroll: true });
     }
     moveFocusToPlane() {
-        var _a;
-        (_a = this.focusedPlaneElement()) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        this.focusedPlaneElement()?.focus({ preventScroll: true });
     }
     handleKeydown(event) {
         if (this.focusActive && this.mode === 'browse') {
@@ -381,6 +381,13 @@ let DxGrid = 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);
@@ -394,19 +401,16 @@ let DxGrid = class DxGrid extends LitElement {
     // Accessors
     //
     colSize(c, plane) {
-        var _a, _b, _c, _d, _e;
         const resolvedPlane = resolveColPlane(plane);
-        return (_e = (_c = (_b = (_a = this.colSizes) === null || _a === void 0 ? void 0 : _a[resolvedPlane]) === null || _b === void 0 ? void 0 : _b[c]) !== null && _c !== void 0 ? _c : (_d = this.columnDefault[resolvedPlane]) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : defaultColSize;
+        return this.colSizes?.[resolvedPlane]?.[c] ?? this.columnDefault[resolvedPlane]?.size ?? defaultColSize;
     }
     rowSize(r, plane) {
-        var _a, _b, _c, _d, _e;
         const resolvedPlane = resolveRowPlane(plane);
-        return (_e = (_c = (_b = (_a = this.rowSizes) === null || _a === void 0 ? void 0 : _a[resolvedPlane]) === null || _b === void 0 ? void 0 : _b[r]) !== null && _c !== void 0 ? _c : (_d = this.rowDefault[resolvedPlane]) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : defaultRowSize;
+        return this.rowSizes?.[resolvedPlane]?.[r] ?? this.rowDefault[resolvedPlane]?.size ?? defaultRowSize;
     }
     cell(c, r, plane) {
-        var _a, _b, _c, _d, _e;
         const index = `${c}${separator}${r}`;
-        return (_c = (_b = (_a = this.cells) === null || _a === void 0 ? void 0 : _a[plane]) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : (_e = (_d = this.initialCells) === null || _d === void 0 ? void 0 : _d[plane]) === null || _e === void 0 ? void 0 : _e[index];
+        return this.cells?.[plane]?.[index] ?? this.initialCells?.[plane]?.[index];
     }
     cellActive(c, r, plane) {
         return this.focusedCell.plane === plane && this.focusedCell.col === c && this.focusedCell.row === r;
@@ -467,11 +471,11 @@ let DxGrid = class DxGrid extends LitElement {
         return this.intrinsicBlockSize - this.sizeBlock;
     }
     updatePosInline(inline, maxInline = this.maxPosInline()) {
-        this.posInline = Math.max(0, Math.min(maxInline, inline !== null && inline !== void 0 ? inline : this.posInline));
+        this.posInline = Math.max(0, Math.min(maxInline, inline ?? this.posInline));
         this.maybeUpdateVisInline();
     }
     updatePosBlock(block, maxBlock = this.maxPosBlock()) {
-        this.posBlock = Math.max(0, Math.min(maxBlock, block !== null && block !== void 0 ? block : this.posBlock));
+        this.posBlock = Math.max(0, Math.min(maxBlock, block ?? this.posBlock));
         this.maybeUpdateVisBlock();
     }
     updatePos(inline, block, maxInline, maxBlock) {
@@ -479,7 +483,6 @@ let DxGrid = class DxGrid extends LitElement {
         this.updatePosBlock(block, maxBlock);
     }
     updateVisInline() {
-        var _a, _b;
         // todo: avoid starting from zero
         let axisCursor = 0;
         let pxCursor = this.colSize(axisCursor, 'grid');
@@ -509,15 +512,14 @@ let DxGrid = class DxGrid extends LitElement {
         this.templateGridColumns = [...Array(this.visColMax - this.visColMin)]
             .map((_, c0) => `${this.colSize(this.visColMin + c0, 'grid')}px`)
             .join(' ');
-        this.templatefrozenColsStart = [...Array((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0)]
+        this.templatefrozenColsStart = [...Array(this.frozen.frozenColsStart ?? 0)]
             .map((_, c0) => `${this.colSize(c0, 'frozenColsStart')}px`)
             .join(' ');
-        this.templatefrozenColsEnd = [...Array((_b = this.frozen.frozenColsEnd) !== null && _b !== void 0 ? _b : 0)]
+        this.templatefrozenColsEnd = [...Array(this.frozen.frozenColsEnd ?? 0)]
             .map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`)
             .join(' ');
     }
     updateVisBlock() {
-        var _a, _b;
         // todo: avoid starting from zero
         let axisCursor = 0;
         let pxCursor = this.rowSize(axisCursor, 'grid');
@@ -547,10 +549,10 @@ let DxGrid = class DxGrid extends LitElement {
         this.templateGridRows = [...Array(this.visRowMax - this.visRowMin)]
             .map((_, r0) => `${this.rowSize(this.visRowMin + r0, 'grid')}px`)
             .join(' ');
-        this.templatefrozenRowsStart = [...Array((_a = this.frozen.frozenRowsStart) !== null && _a !== void 0 ? _a : 0)]
+        this.templatefrozenRowsStart = [...Array(this.frozen.frozenRowsStart ?? 0)]
             .map((_, r0) => `${this.rowSize(r0, 'frozenRowsStart')}px`)
             .join(' ');
-        this.templatefrozenRowsEnd = [...Array((_b = this.frozen.frozenRowsEnd) !== null && _b !== void 0 ? _b : 0)]
+        this.templatefrozenRowsEnd = [...Array(this.frozen.frozenRowsEnd ?? 0)]
             .map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`)
             .join(' ');
     }
@@ -559,7 +561,6 @@ let DxGrid = class DxGrid extends LitElement {
         this.updateVisBlock();
     }
     updateCells(includeFixed) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
         this.cells.grid = this.getCells({
             start: { col: this.visColMin, row: this.visRowMin },
             end: { col: this.visColMax, row: this.visRowMax },
@@ -578,25 +579,25 @@ let DxGrid = class DxGrid extends LitElement {
                 }, plane);
         });
         if (includeFixed) {
-            if (((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0) > 0 && ((_b = this.frozen.frozenRowsStart) !== null && _b !== void 0 ? _b : 0) > 0) {
+            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 (((_c = this.frozen.frozenColsEnd) !== null && _c !== void 0 ? _c : 0) > 0 && ((_d = this.frozen.frozenRowsStart) !== null && _d !== void 0 ? _d : 0) > 0) {
+            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 (((_e = this.frozen.frozenColsStart) !== null && _e !== void 0 ? _e : 0) > 0 && ((_f = this.frozen.frozenRowsEnd) !== null && _f !== void 0 ? _f : 0) > 0) {
+            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 (((_g = this.frozen.frozenColsEnd) !== null && _g !== void 0 ? _g : 0) > 0 && ((_h = this.frozen.frozenRowsEnd) !== null && _h !== void 0 ? _h : 0) > 0) {
+            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 },
@@ -634,12 +635,10 @@ let DxGrid = class DxGrid extends LitElement {
         return `[data-dx-grid-plane=${this.focusedCell.plane}]`;
     }
     focusedCellElement() {
-        var _a;
-        return (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(this.focusedCellQuery());
+        return this.gridRef.value?.querySelector(this.focusedCellQuery());
     }
     focusedPlaneElement() {
-        var _a;
-        return (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(this.focusedPlaneQuery());
+        return this.gridRef.value?.querySelector(this.focusedPlaneQuery());
     }
     //
     // `outOfVis` returns by how many rows/cols the focused cell is outside of the `vis` range for an axis, inset by a
@@ -798,10 +797,9 @@ let DxGrid = class DxGrid extends LitElement {
     // Resize handlers
     //
     axisResizeable(plane, axis, index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
         return axis === 'col'
-            ? !!((_c = (_b = (_a = this.columns[plane]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.resizeable) !== null && _c !== void 0 ? _c : (_d = this.columnDefault[plane]) === null || _d === void 0 ? void 0 : _d.resizeable)
-            : !!((_g = (_f = (_e = this.rows[plane]) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f.resizeable) !== null && _g !== void 0 ? _g : (_h = this.rowDefault[plane]) === null || _h === void 0 ? void 0 : _h.resizeable);
+            ? !!(this.columns[plane]?.[index]?.resizeable ?? this.columnDefault[plane]?.resizeable)
+            : !!(this.rows[plane]?.[index]?.resizeable ?? this.rowDefault[plane]?.resizeable);
     }
     handleAxisResizeInternal(event) {
         event.stopPropagation();
@@ -832,7 +830,6 @@ let DxGrid = class DxGrid extends LitElement {
     //
     // TODO(thure): This is for rendering presentational objects superimposed onto the canonical grid (e.g. DnD drop line for #8108).
     renderPresentationLayer(offsetInline, offsetBlock) {
-        var _a, _b, _c, _d, _e, _f;
         const visibleCols = this.visColMax - this.visColMin;
         const visibleRows = this.visRowMax - this.visRowMin;
         return html `<div
@@ -840,32 +837,29 @@ let DxGrid = class DxGrid extends LitElement {
       class="dx-grid-layer--presentation"
       style=${styleMap({
             gridTemplateColumns: [
-                ...[...Array((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsStart')}px`),
+                ...[...Array(this.frozen.frozenColsStart ?? 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsStart')}px`),
                 ...[...Array(visibleCols)].map((_, c0) => c0 === visibleCols - 1
                     ? '1fr'
                     : `${this.colSize(this.visColMin + c0, 'grid') + (c0 === 0 ? offsetInline : 0)}px`),
-                ...[...Array((_b = this.frozen.frozenColsEnd) !== null && _b !== void 0 ? _b : 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`),
+                ...[...Array(this.frozen.frozenColsEnd ?? 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`),
             ].join(' '),
             gridTemplateRows: [
-                ...[...Array((_c = this.frozen.frozenRowsStart) !== null && _c !== void 0 ? _c : 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsStart')}px`),
+                ...[...Array(this.frozen.frozenRowsStart ?? 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsStart')}px`),
                 ...[...Array(visibleRows)].map((_, r0) => r0 === visibleRows - 1
                     ? '1fr'
                     : `${this.rowSize(this.visRowMin + r0, 'grid') + (r0 === 0 ? offsetBlock : 0)}px`),
-                ...[...Array((_d = this.frozen.frozenRowsEnd) !== null && _d !== void 0 ? _d : 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`),
+                ...[...Array(this.frozen.frozenRowsEnd ?? 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`),
             ].join(' '),
         })}
     >
       ${
         /* TODO(thure): These are debug cells, remove when rendering actual overlay content. */ [
-            ...Array(((_e = this.frozen.frozenRowsStart) !== null && _e !== void 0 ? _e : 0) + visibleRows + ((_f = this.frozen.frozenRowsEnd) !== null && _f !== void 0 ? _f : 0)),
-        ].map((_, r0) => {
-            var _a, _b;
-            return [...Array(((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0) + visibleCols + ((_b = this.frozen.frozenColsEnd) !== null && _b !== void 0 ? _b : 0))].map((_, c0) => html `<div
+            ...Array((this.frozen.frozenRowsStart ?? 0) + visibleRows + (this.frozen.frozenRowsEnd ?? 0)),
+        ].map((_, r0) => [...Array((this.frozen.frozenColsStart ?? 0) + visibleCols + (this.frozen.frozenColsEnd ?? 0))].map((_, c0) => html `<div
                 role="none"
                 class="dx-grid-layer--presentation__cell"
                 style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
-              ></div>`);
-        })}
+              ></div>`))}
     </div>`;
     }
     renderFixed(plane, selection) {
@@ -873,7 +867,7 @@ let DxGrid = class DxGrid extends LitElement {
         const rowPlane = resolveRowPlane(plane);
         const cols = this.frozen[colPlane];
         const rows = this.frozen[rowPlane];
-        return (cols !== null && cols !== void 0 ? cols : 0) > 0 && (rows !== null && rows !== void 0 ? rows : 0) > 0
+        return (cols ?? 0) > 0 && (rows ?? 0) > 0
             ? html `<div
           role="none"
           tabindex="0"
@@ -897,7 +891,7 @@ let DxGrid = class DxGrid extends LitElement {
     renderFrozenRows(plane, visibleCols, offsetInline, selection) {
         const rowPlane = resolveRowPlane(plane);
         const rows = this.frozen[rowPlane];
-        return (rows !== null && rows !== void 0 ? rows : 0) > 0
+        return (rows ?? 0) > 0
             ? html `<div
           role="none"
           class="dx-grid__plane--frozen-row"
@@ -925,7 +919,7 @@ let DxGrid = class DxGrid extends LitElement {
     renderFrozenColumns(plane, visibleRows, offsetBlock, selection) {
         const colPlane = resolveColPlane(plane);
         const cols = this.frozen[colPlane];
-        return (cols !== null && cols !== void 0 ? cols : 0) > 0
+        return (cols ?? 0) > 0
             ? html `<div
           role="none"
           class="dx-grid__plane--frozen-col"
@@ -951,17 +945,16 @@ let DxGrid = class DxGrid extends LitElement {
             : null;
     }
     cellReadonly(col, row, plane) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const colPlane = resolveColPlane(plane);
         const rowPlane = resolveRowPlane(plane);
         // Check cell-specific setting first.
-        const cellReadonly = (_a = this.cell(col, row, plane)) === null || _a === void 0 ? void 0 : _a.readonly;
+        const cellReadonly = this.cell(col, row, plane)?.readonly;
         if (cellReadonly !== undefined) {
             return isReadonly(cellReadonly);
         }
         // Check column/row defaults.
-        const colReadOnly = (_e = (_d = (_c = (_b = this.columns) === null || _b === void 0 ? void 0 : _b[colPlane]) === null || _c === void 0 ? void 0 : _c[col]) === null || _d === void 0 ? void 0 : _d.readonly) !== null && _e !== void 0 ? _e : (_g = (_f = this.columnDefault) === null || _f === void 0 ? void 0 : _f[colPlane]) === null || _g === void 0 ? void 0 : _g.readonly;
-        const rowReadOnly = (_l = (_k = (_j = (_h = this.rows) === null || _h === void 0 ? void 0 : _h[rowPlane]) === null || _j === void 0 ? void 0 : _j[row]) === null || _k === void 0 ? void 0 : _k.readonly) !== null && _l !== void 0 ? _l : (_o = (_m = this.rowDefault) === null || _m === void 0 ? void 0 : _m[rowPlane]) === null || _o === void 0 ? void 0 : _o.readonly;
+        const colReadOnly = this.columns?.[colPlane]?.[col]?.readonly ?? this.columnDefault?.[colPlane]?.readonly;
+        const rowReadOnly = this.rows?.[rowPlane]?.[row]?.readonly ?? this.rowDefault?.[rowPlane]?.readonly;
         return isReadonly(colReadOnly) || isReadonly(rowReadOnly);
     }
     /**
@@ -969,35 +962,59 @@ let DxGrid = class DxGrid extends LitElement {
      * @returns true if the cells text content is selectable, false otherwise.
      */
     cellTextSelectable(col, row, plane) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const colPlane = resolveColPlane(plane);
         const rowPlane = resolveRowPlane(plane);
         // Check cell-specific setting first.
-        const cellReadonly = (_a = this.cell(col, row, plane)) === null || _a === void 0 ? void 0 : _a.readonly;
+        const cellReadonly = this.cell(col, row, plane)?.readonly;
         if (cellReadonly !== undefined) {
             return cellReadonly === 'text-select';
         }
         // Check column/row defaults.
-        const colReadonly = (_e = (_d = (_c = (_b = this.columns) === null || _b === void 0 ? void 0 : _b[colPlane]) === null || _c === void 0 ? void 0 : _c[col]) === null || _d === void 0 ? void 0 : _d.readonly) !== null && _e !== void 0 ? _e : (_g = (_f = this.columnDefault) === null || _f === void 0 ? void 0 : _f[colPlane]) === null || _g === void 0 ? void 0 : _g.readonly;
-        const rowReadonly = (_l = (_k = (_j = (_h = this.rows) === null || _h === void 0 ? void 0 : _h[rowPlane]) === null || _j === void 0 ? void 0 : _j[row]) === null || _k === void 0 ? void 0 : _k.readonly) !== null && _l !== void 0 ? _l : (_o = (_m = this.rowDefault) === null || _m === void 0 ? void 0 : _m[rowPlane]) === null || _o === void 0 ? void 0 : _o.readonly;
+        const colReadonly = this.columns?.[colPlane]?.[col]?.readonly ?? this.columnDefault?.[colPlane]?.readonly;
+        const rowReadonly = this.rows?.[rowPlane]?.[row]?.readonly ?? this.rowDefault?.[rowPlane]?.readonly;
         return colReadonly === 'text-select' || rowReadonly === 'text-select';
     }
+    getOverflowingCellModifiedDeltas(event) {
+        if (!event.target) {
+            return event;
+        }
+        const element = event.target;
+        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 };
+    }
     renderCell(col, row, plane, selected, visCol = col, visRow = row) {
-        var _a, _b;
         const cell = this.cell(col, row, plane);
         const active = this.cellActive(col, row, plane);
         const readonly = this.cellReadonly(col, row, plane);
         const textSelectable = this.cellTextSelectable(col, row, plane);
-        const resizeIndex = (cell === null || cell === void 0 ? void 0 : cell.resizeHandle) ? (cell.resizeHandle === 'col' ? col : row) : undefined;
-        const resizePlane = (cell === null || cell === void 0 ? void 0 : cell.resizeHandle) ? resolveFrozenPlane(cell.resizeHandle, plane) : undefined;
-        const accessory = (cell === null || cell === void 0 ? void 0 : cell.accessoryHtml) ? staticHtml `${unsafeStatic(cell.accessoryHtml)}` : null;
+        const resizeIndex = cell?.resizeHandle ? (cell.resizeHandle === 'col' ? col : row) : undefined;
+        const resizePlane = cell?.resizeHandle ? resolveFrozenPlane(cell.resizeHandle, plane) : undefined;
+        const accessory = cell?.accessoryHtml ? staticHtml `${unsafeStatic(cell.accessoryHtml)}` : null;
         return html `<div
       role="gridcell"
       tabindex="0"
       aria-selected=${selected ? 'true' : nothing}
       aria-readonly=${readonly ? 'true' : nothing}
-      class=${(_a = cell === null || cell === void 0 ? void 0 : cell.className) !== null && _a !== void 0 ? _a : nothing}
-      data-refs=${(_b = cell === null || cell === void 0 ? void 0 : cell.dataRefs) !== null && _b !== void 0 ? _b : nothing}
+      class=${cell?.className ?? nothing}
+      data-refs=${cell?.dataRefs ?? nothing}
       ?data-dx-active=${active}
       data-text-selectable=${textSelectable ? 'true' : 'false'}
       data-dx-grid-action="cell"
@@ -1005,9 +1022,8 @@ let DxGrid = class DxGrid extends LitElement {
       aria-rowindex=${row}
       style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
     >
-      ${this.mode !== 'browse' && active ? null : cell === null || cell === void 0 ? void 0 : cell.value}${this.mode !== 'browse' && active
-            ? null
-            : accessory}${(cell === null || cell === void 0 ? void 0 : 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
@@ -1113,10 +1129,9 @@ let DxGrid = class DxGrid extends LitElement {
         this.updateIntrinsicBlockSize();
     }
     computeColSizes() {
-        var _a;
-        this.colSizes = Object.entries((_a = this.columns) !== null && _a !== void 0 ? _a : {}).reduce((acc, [plane, planeColMeta]) => {
+        this.colSizes = Object.entries(this.columns ?? {}).reduce((acc, [plane, planeColMeta]) => {
             acc[plane] = Object.entries(planeColMeta).reduce((planeAcc, [col, colMeta]) => {
-                if (colMeta === null || colMeta === void 0 ? void 0 : colMeta.size) {
+                if (colMeta?.size) {
                     planeAcc[col] = colMeta.size;
                 }
                 return planeAcc;
@@ -1125,10 +1140,9 @@ let DxGrid = class DxGrid extends LitElement {
         }, { grid: {} });
     }
     computeRowSizes() {
-        var _a;
-        this.rowSizes = Object.entries((_a = this.rows) !== null && _a !== void 0 ? _a : {}).reduce((acc, [plane, planeRowMeta]) => {
+        this.rowSizes = Object.entries(this.rows ?? {}).reduce((acc, [plane, planeRowMeta]) => {
             acc[plane] = Object.entries(planeRowMeta).reduce((planeAcc, [row, rowMeta]) => {
-                if (rowMeta === null || rowMeta === void 0 ? void 0 : rowMeta.size) {
+                if (rowMeta?.size) {
                     planeAcc[row] = rowMeta.size;
                 }
                 return planeAcc;
@@ -1160,6 +1174,12 @@ let DxGrid = class DxGrid extends LitElement {
             this.updatePosInline();
             this.updateVisInline();
         }
+        if (changedProperties.has('frozen')) {
+            this.updateIntrinsicBlockSize();
+            this.updateIntrinsicInlineSize();
+            this.updateVisBlock();
+            this.updateVisInline();
+        }
         if (this.getCells &&
             (changedProperties.has('initialCells') ||
                 changedProperties.has('visColMin') ||
@@ -1169,7 +1189,8 @@ let DxGrid = 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);
         }
     }
@@ -1184,20 +1205,20 @@ let DxGrid = class DxGrid extends LitElement {
             this.refocus();
         }
     }
-    updateIfWithinBounds({ col, row }) {
+    updateIfWithinBounds({ col, row }, includeFixed) {
         if (col >= this.visColMin && col <= this.visColMax && row >= this.visRowMin && row <= this.visRowMax) {
+            this.updateCells(includeFixed);
             this.requestUpdate();
             return true;
         }
         return false;
     }
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
         if (this.viewportRef.value) {
             this.observer.unobserve(this.viewportRef.value);
         }
-        (_a = document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', this.handleTopLevelWheel);
+        document.defaultView?.removeEventListener('wheel', this.handleTopLevelWheel);
     }
     createRenderRoot() {
         return this;
@@ -1342,6 +1363,6 @@ DxGrid = __decorate([
     customElement('dx-grid')
 ], DxGrid);
 export { DxGrid };
-export { rowToA1Notation, colToA1Notation, closestAction, closestCell, parseCellIndex, toPlaneCellIndex, cellQuery, } from './util';
+export { rowToA1Notation, colToA1Notation, closestAction, closestCell, parseCellIndex, toPlaneCellIndex, cellQuery, accessoryHandlesPointerdownAttrs, } from './util';
 export const commentedClassName = 'dx-grid__cell--commented';
 //# sourceMappingURL=dx-grid.js.map