@dxos/lit-grid 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

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 { defaultColSize, defaultRowSize } from './defs';
-// eslint-disable-next-line unused-imports/no-unused-imports
+import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
+import { defaultColSize, defaultRowSize, focusUnfurlDefault } from './defs';
 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 = {
@@ -37,6 +35,7 @@ let DxGrid = class DxGrid extends LitElement {
         this.frozen = {};
         this.overscroll = undefined;
         this.activeRefs = '';
+        this.focusIndicatorVariant = '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`.
@@ -83,6 +82,11 @@ let DxGrid = class DxGrid extends LitElement {
         this.templatefrozenRowsStart = '';
         this.templatefrozenRowsEnd = '';
         //
+        // `frozen…Size` is used to measure space available for the non-fixed planes
+        //
+        this.frozenColsSize = 0;
+        this.frozenRowsSize = 0;
+        //
         // Focus, selection, and resize states
         //
         this.pointer = null;
@@ -133,8 +137,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 +147,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 +158,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,22 +171,20 @@ 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,
             };
-            if (Math.abs(inlineSize - this.sizeInline) > resizeTolerance ||
-                Math.abs(blockSize - this.sizeBlock) > resizeTolerance) {
+            if (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());
             }
         });
         this.gridRef = createRef();
-        this.viewportRef = createRef();
         this.maybeUpdateVisInline = () => {
             if (this.posInline < this.binInlineMin || this.posInline >= this.binInlineMax) {
                 this.updateVisInline();
@@ -196,8 +196,7 @@ 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)) {
@@ -230,7 +229,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);
@@ -314,32 +313,27 @@ 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);
-            this.focusedCell = {
-                plane,
-                col: colPlane === 'grid' ? this.visColMin : 0,
-                row: rowPlane === 'grid' ? this.visRowMin : 0,
-            };
-        }
-        (_a = this.focusedCellElement()) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        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 });
     }
     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') {
@@ -390,6 +384,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);
@@ -403,19 +404,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;
@@ -476,11 +474,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) {
@@ -488,7 +486,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');
@@ -518,15 +515,19 @@ 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(' ');
+        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);
     }
     updateVisBlock() {
-        var _a, _b;
         // todo: avoid starting from zero
         let axisCursor = 0;
         let pxCursor = this.rowSize(axisCursor, 'grid');
@@ -556,19 +557,23 @@ 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(' ');
+        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);
     }
     updateVis() {
         this.updateVisInline();
         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 },
@@ -587,25 +592,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 },
@@ -643,12 +648,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
@@ -807,22 +810,37 @@ 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);
+    }
+    clampAxisSize(plane, axis, index, requestedSize) {
+        const minSize = axis === 'col'
+            ? (this.columns[plane]?.[index]?.minSize ??
+                this.columnDefault[plane]?.minSize ??
+                sizeColMin)
+            : (this.rows[plane]?.[index]?.minSize ??
+                this.rowDefault[plane]?.minSize ??
+                sizeRowMin);
+        const maxSize = axis === 'col'
+            ? (this.columns[plane]?.[index]?.maxSize ??
+                this.columnDefault[plane]?.maxSize ??
+                sizeColMax)
+            : (this.rows[plane]?.[index]?.maxSize ??
+                this.rowDefault[plane]?.maxSize ??
+                sizeRowMax);
+        return Math.max(minSize, Math.min(maxSize, requestedSize));
     }
     handleAxisResizeInternal(event) {
         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();
@@ -841,7 +859,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
@@ -849,32 +866,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) {
@@ -882,7 +896,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"
@@ -906,7 +920,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 && this.limitColumns > 0
             ? html `<div
           role="none"
           class="dx-grid__plane--frozen-row"
@@ -934,7 +948,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 && this.limitRows > 0
             ? html `<div
           role="none"
           class="dx-grid__plane--frozen-col"
@@ -959,47 +973,84 @@ let DxGrid = class DxGrid extends LitElement {
         </div>`
             : null;
     }
+    renderMainGrid(visibleCols, visibleRows, offsetInline, offsetBlock, selection) {
+        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;
+    }
     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);
     }
+    cellFocusUnfurl(col, row, plane) {
+        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.
      */
     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) {
-        var _a;
         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 || !((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.contains(element))) {
+        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
@@ -1019,21 +1070,22 @@ let DxGrid = class DxGrid extends LitElement {
         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 focusUnfurl = this.cellFocusUnfurl(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-focus-unfurl=${focusUnfurl ? nothing : 'false'}
       ?data-dx-active=${active}
       data-text-selectable=${textSelectable ? 'true' : 'false'}
       data-dx-grid-action="cell"
@@ -1041,10 +1093,8 @@ let DxGrid = class DxGrid extends LitElement {
       aria-rowindex=${row}
       style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
     >
-      <div role="none" class="dx-grid__cell__content">
-        ${this.mode !== 'browse' && active ? null : cell === null || cell === void 0 ? void 0 : cell.value}${this.mode !== 'browse' && active ? null : accessory}
-      </div>
-      ${(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
@@ -1074,9 +1124,24 @@ let DxGrid = class DxGrid extends LitElement {
       <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',
@@ -1086,74 +1151,39 @@ let DxGrid = 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)}
       >
         ${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"
-          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)}${this.renderFrozenRows('frozenRowsEnd', visibleCols, offsetInline, selection)}${this.renderFixed('fixedEndEnd', selection)}
       </div>`;
     }
     updateIntrinsicInlineSize() {
         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;
     }
     updateIntrinsicBlockSize() {
         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;
     }
     updateIntrinsicSizes() {
         this.updateIntrinsicInlineSize();
         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;
@@ -1162,10 +1192,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;
@@ -1177,7 +1206,7 @@ let DxGrid = 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();
@@ -1228,20 +1257,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);
+        if (this.gridRef.value) {
+            this.observer.unobserve(this.gridRef.value);
         }
-        (_a = document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', this.handleTopLevelWheel);
+        document.defaultView?.removeEventListener('wheel', this.handleTopLevelWheel);
     }
     createRenderRoot() {
         return this;
@@ -1283,6 +1312,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], DxGrid.prototype, "activeRefs", void 0);
+__decorate([
+    property({ type: String })
+], DxGrid.prototype, "focusIndicatorVariant", void 0);
 __decorate([
     state()
 ], DxGrid.prototype, "cells", void 0);
@@ -1346,6 +1378,12 @@ __decorate([
 __decorate([
     state()
 ], DxGrid.prototype, "templatefrozenRowsEnd", void 0);
+__decorate([
+    state()
+], DxGrid.prototype, "frozenColsSize", void 0);
+__decorate([
+    state()
+], DxGrid.prototype, "frozenRowsSize", void 0);
 __decorate([
     state()
 ], DxGrid.prototype, "pointer", void 0);
@@ -1386,6 +1424,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