@dxos/lit-grid 0.8.2-staging.7ac8446 → 0.8.2-staging.8c95c61

package/src/dx-grid.ts

@@ -8,7 +8,7 @@ import { ref, createRef, type 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 { defaultSizeCol, defaultSizeRow } from './defs';
+import { defaultColSize, defaultRowSize } from './defs';
 // eslint-disable-next-line unused-imports/no-unused-imports
 import './dx-grid-axis-resize-handle';
 import {
@@ -85,12 +85,12 @@ export class DxGrid extends LitElement {
 
   @property({ type: Object })
   rowDefault: DxGridPlaneRecord<DxGridFrozenRowsPlane, DxGridAxisMetaProps> = {
-    grid: { size: defaultSizeRow },
+    grid: { size: defaultRowSize },
   };
 
   @property({ type: Object })
   columnDefault: DxGridPlaneRecord<DxGridFrozenColsPlane, DxGridAxisMetaProps> = {
-    grid: { size: defaultSizeCol },
+    grid: { size: defaultColSize },
   };
 
   @property({ type: Object })
@@ -167,13 +167,13 @@ export class DxGrid extends LitElement {
   private binInlineMin = 0;
 
   @state()
-  private binInlineMax = defaultSizeCol;
+  private binInlineMax = defaultColSize;
 
   @state()
   private binBlockMin = 0;
 
   @state()
-  private binBlockMax = defaultSizeRow;
+  private binBlockMax = defaultRowSize;
 
   //
   // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
@@ -258,23 +258,25 @@ export class DxGrid extends LitElement {
   // Primary pointer and keyboard handlers
   //
 
-  private dispatchEditRequest(initialContent?: string) {
+  private dispatchEditRequest(initialContent?: string): void {
     this.snapPosToFocusedCell();
     if (!this.cellReadonly(this.focusedCell.col, this.focusedCell.row, this.focusedCell.plane)) {
       // Without deferring, the event dispatches before `focusedCellBox` can get updated bounds of the cell, hence:
-      queueMicrotask(() =>
-        this.dispatchEvent(
+      queueMicrotask(() => {
+        const cellIndex = toCellIndex(this.focusedCell);
+        return this.dispatchEvent(
           new DxEditRequest({
-            cellIndex: toCellIndex(this.focusedCell),
+            cellIndex,
             cellBox: this.focusedCellBox(),
+            cellElement: this.focusedCellElement(),
             initialContent,
           }),
-        ),
-      );
+        );
+      });
     }
   }
 
-  private dispatchSelectionChange() {
+  private dispatchSelectionChange(): boolean {
     return this.dispatchEvent(
       new DxGridCellsSelect({
         start: this.selectionStart,
@@ -353,7 +355,7 @@ export class DxGrid extends LitElement {
    * Increments focus among all theoretically possible cells in a plane, cycling as tab would but accounting for the
    * theoretical bounds of the grid plane (handling infinite planes heuristically).
    */
-  private incrementFocusWithinPlane(event: KeyboardEvent) {
+  private incrementFocusWithinPlane(event: KeyboardEvent): void {
     const reverse = event.shiftKey;
     const colPlane = resolveColPlane(this.focusedCell.plane);
     const rowPlane = resolveRowPlane(this.focusedCell.plane);
@@ -381,7 +383,7 @@ export class DxGrid extends LitElement {
   /**
    * Increments focus in a specific direction without cycling.
    */
-  private moveFocusOrSelectionEndWithinPlane(event: KeyboardEvent) {
+  private moveFocusOrSelectionEndWithinPlane(event: KeyboardEvent): void {
     const current = event.shiftKey ? this.selectionEnd : this.focusedCell;
     const deltaCol = event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
     const deltaRow = event.key === 'ArrowUp' ? -1 : event.key === 'ArrowDown' ? 1 : 0;
@@ -396,7 +398,7 @@ export class DxGrid extends LitElement {
     }
   }
 
-  private moveFocusBetweenPlanes(event: KeyboardEvent, plane: DxGridPlane) {
+  private moveFocusBetweenPlanes(event: KeyboardEvent, plane: DxGridPlane): void {
     const planeElement = this.gridRef.value?.querySelector(`[data-dx-grid-plane="${plane}"]`) as HTMLElement | null;
     if (planeElement) {
       const axis = event.key === 'ArrowUp' || event.key === 'ArrowDown' ? 'col' : 'row';
@@ -413,7 +415,7 @@ export class DxGrid extends LitElement {
     }
   }
 
-  private moveFocusIntoPlane(plane: DxGridPlane) {
+  private moveFocusIntoPlane(plane: DxGridPlane): void {
     if (this.focusedCell.plane !== plane) {
       const colPlane = resolveColPlane(plane);
       const rowPlane = resolveRowPlane(plane);
@@ -426,11 +428,11 @@ export class DxGrid extends LitElement {
     this.focusedCellElement()?.focus({ preventScroll: true });
   }
 
-  private moveFocusToPlane() {
+  private moveFocusToPlane(): void {
     this.focusedPlaneElement()?.focus({ preventScroll: true });
   }
 
-  private handleKeydown(event: KeyboardEvent) {
+  private handleKeydown(event: KeyboardEvent): void {
     if (this.focusActive && this.mode === 'browse') {
       const plane = targetIsPlane(event.target);
       if (plane) {
@@ -493,14 +495,14 @@ export class DxGrid extends LitElement {
   // Accessors
   //
 
-  private colSize(c: number | string, plane: DxGridPlane) {
+  private colSize(c: number | string, plane: DxGridPlane): number {
     const resolvedPlane = resolveColPlane(plane);
-    return this.colSizes?.[resolvedPlane]?.[c] ?? this.columnDefault[resolvedPlane]?.size ?? defaultSizeCol;
+    return this.colSizes?.[resolvedPlane]?.[c] ?? this.columnDefault[resolvedPlane]?.size ?? defaultColSize;
   }
 
-  private rowSize(r: number | string, plane: DxGridPlane) {
+  private rowSize(r: number | string, plane: DxGridPlane): number {
     const resolvedPlane = resolveRowPlane(plane);
-    return this.rowSizes?.[resolvedPlane]?.[r] ?? this.rowDefault[resolvedPlane]?.size ?? defaultSizeRow;
+    return this.rowSizes?.[resolvedPlane]?.[r] ?? this.rowDefault[resolvedPlane]?.size ?? defaultRowSize;
   }
 
   private cell(c: number | string, r: number | string, plane: DxGridPlane): DxGridCellValue | undefined {
@@ -512,7 +514,7 @@ export class DxGrid extends LitElement {
     return this.focusedCell.plane === plane && this.focusedCell.col === c && this.focusedCell.row === r;
   }
 
-  private setFocusedCell(nextCoords: DxGridPosition) {
+  private setFocusedCell(nextCoords: DxGridPosition): void {
     if (
       this.focusedCell.plane !== nextCoords.plane ||
       this.focusedCell.col !== nextCoords.col ||
@@ -528,7 +530,7 @@ export class DxGrid extends LitElement {
 
   // Internal utility for setting selection end.
 
-  private setSelectionEnd(nextCoords: DxGridPosition) {
+  private setSelectionEnd(nextCoords: DxGridPosition): void {
     if (
       this.selectionEnd.plane !== nextCoords.plane ||
       this.selectionEnd.col !== nextCoords.col ||
@@ -541,7 +543,7 @@ export class DxGrid extends LitElement {
 
   // Selection setter for consumers
 
-  setSelection(range: DxGridRange) {
+  setSelection(range: DxGridRange): void {
     if (this.mode !== 'edit') {
       this.selectionStart = range.start;
       this.selectionEnd = range.end;
@@ -608,25 +610,25 @@ export class DxGrid extends LitElement {
     }
   };
 
-  private maxPosInline() {
+  private maxPosInline(): number {
     return this.intrinsicInlineSize - this.sizeInline;
   }
 
-  private maxPosBlock() {
+  private maxPosBlock(): number {
     return this.intrinsicBlockSize - this.sizeBlock;
   }
 
-  private updatePosInline(inline?: number, maxInline: number = this.maxPosInline()) {
+  private updatePosInline(inline?: number, maxInline: number = this.maxPosInline()): void {
     this.posInline = Math.max(0, Math.min(maxInline, inline ?? this.posInline));
     this.maybeUpdateVisInline();
   }
 
-  private updatePosBlock(block?: number, maxBlock: number = this.maxPosBlock()) {
+  private updatePosBlock(block?: number, maxBlock: number = this.maxPosBlock()): void {
     this.posBlock = Math.max(0, Math.min(maxBlock, block ?? this.posBlock));
     this.maybeUpdateVisBlock();
   }
 
-  private updatePos(inline?: number, block?: number, maxInline?: number, maxBlock?: number) {
+  private updatePos(inline?: number, block?: number, maxInline?: number, maxBlock?: number): void {
     this.updatePosInline(inline, maxInline);
     this.updatePosBlock(block, maxBlock);
   }
@@ -659,7 +661,7 @@ export class DxGrid extends LitElement {
     }
   };
 
-  private updateVisInline() {
+  private updateVisInline(): void {
     // todo: avoid starting from zero
     let axisCursor = 0;
     let pxCursor = this.colSize(axisCursor, 'grid');
@@ -708,7 +710,7 @@ export class DxGrid extends LitElement {
       .join(' ');
   }
 
-  private updateVisBlock() {
+  private updateVisBlock(): void {
     // todo: avoid starting from zero
     let axisCursor = 0;
     let pxCursor = this.rowSize(axisCursor, 'grid');
@@ -757,12 +759,12 @@ export class DxGrid extends LitElement {
       .join(' ');
   }
 
-  private updateVis() {
+  private updateVis(): void {
     this.updateVisInline();
     this.updateVisBlock();
   }
 
-  public updateCells(includeFixed?: boolean) {
+  public updateCells(includeFixed?: boolean): void {
     this.cells.grid = this.getCells!(
       {
         start: { col: this.visColMin, row: this.visRowMin },
@@ -828,7 +830,7 @@ export class DxGrid extends LitElement {
 
   // Focus handlers
 
-  setFocus(coords: DxGridPosition, snap = true) {
+  setFocus(coords: DxGridPosition, snap = true): void {
     this.setFocusedCell(coords);
     this.focusActive = true;
     if (snap) {
@@ -836,7 +838,7 @@ export class DxGrid extends LitElement {
     }
   }
 
-  private handleFocus(event: FocusEvent) {
+  private handleFocus(event: FocusEvent): void {
     const cellCoords = closestCell(event.target);
     if (cellCoords || targetIsPlane(event.target)) {
       this.focusActive = true;
@@ -846,26 +848,26 @@ export class DxGrid extends LitElement {
     }
   }
 
-  private handleBlur(event: FocusEvent) {
+  private handleBlur(event: FocusEvent): void {
     // Only unset `focusActive` if focus is moving to an element outside the grid.
     if (event.relatedTarget && !(event.relatedTarget as HTMLElement).closest(`[data-grid="${this.gridId}"]`)) {
       this.focusActive = false;
     }
   }
 
-  private focusedCellQuery() {
+  private focusedCellQuery(): string {
     return `[data-dx-grid-plane=${this.focusedCell.plane}] [aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`;
   }
 
-  private focusedPlaneQuery() {
+  private focusedPlaneQuery(): string {
     return `[data-dx-grid-plane=${this.focusedCell.plane}]`;
   }
 
-  private focusedCellElement() {
+  private focusedCellElement(): HTMLElement | null {
     return this.gridRef.value?.querySelector(this.focusedCellQuery()) as HTMLElement | null;
   }
 
-  private focusedPlaneElement() {
+  private focusedPlaneElement(): HTMLElement | null {
     return this.gridRef.value?.querySelector(this.focusedPlaneQuery()) as HTMLElement | null;
   }
 
@@ -874,7 +876,7 @@ export class DxGrid extends LitElement {
   // `delta`, otherwise zero if it is within that range.
   //
 
-  private focusedCellRowOutOfVis() {
+  private focusedCellRowOutOfVis(): number {
     return this.focusedCell.row <= this.visRowMin
       ? this.focusedCell.row - this.visRowMin - 1
       : this.focusedCell.row >= this.visRowMax - 1
@@ -882,7 +884,7 @@ export class DxGrid extends LitElement {
         : 0;
   }
 
-  private focusedCellColOutOfVis() {
+  private focusedCellColOutOfVis(): number {
     return this.focusedCell.col <= this.visColMin
       ? this.focusedCell.col - this.visColMin - 1
       : this.focusedCell.col >= this.visColMax - 1
@@ -905,13 +907,13 @@ export class DxGrid extends LitElement {
     }
   }
 
-  private clampCol(coords: DxGridPosition, deltaCol = 0) {
+  private clampCol(coords: DxGridPosition, deltaCol = 0): number {
     const colPlane = resolveColPlane(coords.plane);
     const colMax = (colPlane === 'grid' ? this.limitColumns : this.frozen[colPlane]!) - 1;
     return Math.max(0, Math.min(colMax, coords.col + deltaCol));
   }
 
-  private clampRow(coords: DxGridPosition, deltaRow = 0) {
+  private clampRow(coords: DxGridPosition, deltaRow = 0): number {
     const rowPlane = resolveRowPlane(coords.plane);
     const rowMax = (rowPlane === 'grid' ? this.limitRows : this.frozen[rowPlane]!) - 1;
     return Math.max(0, Math.min(rowMax, coords.row + deltaRow));
@@ -920,7 +922,7 @@ export class DxGrid extends LitElement {
   /**
    * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
    */
-  refocus(increment: 'col' | 'row' | undefined = undefined, delta: 1 | -1 | 0 = 1) {
+  refocus(increment: 'col' | 'row' | undefined = undefined, delta: 1 | -1 | 0 = 1): void {
     if (increment) {
       switch (increment) {
         case 'col': {
@@ -947,11 +949,11 @@ export class DxGrid extends LitElement {
     });
   }
 
-  private clampPosInline(nextPos: number) {
+  private clampPosInline(nextPos: number): number {
     return Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, nextPos));
   }
 
-  private clampPosBlock(nextPos: number) {
+  private clampPosBlock(nextPos: number): number {
     return Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, nextPos));
   }
 
@@ -978,7 +980,7 @@ export class DxGrid extends LitElement {
   /**
    * Updates `pos` so that a cell in focus is fully within the viewport
    */
-  snapPosToFocusedCell() {
+  snapPosToFocusedCell(): void {
     const outOfVis = this.focusedCellOutOfVis();
     if (outOfVis.col < 0) {
       // align viewport start edge with focused cell start edge
@@ -1001,7 +1003,7 @@ export class DxGrid extends LitElement {
     }
   }
 
-  scrollToCoord({ coords }: { coords: DxGridPosition }) {
+  scrollToCoord({ coords }: { coords: DxGridPosition }): void {
     const plane = coords.plane;
     const { row, col } = coords;
 
@@ -1009,15 +1011,15 @@ export class DxGrid extends LitElement {
     this.updatePosInline(this.inlineOffset(col, plane));
   }
 
-  scrollToColumn(col: number) {
+  scrollToColumn(col: number): void {
     this.updatePosInline(this.inlineOffset(col, 'grid'));
   }
 
-  scrollToRow(row: number) {
+  scrollToRow(row: number): void {
     this.updatePosBlock(this.blockOffset(row, 'grid'));
   }
 
-  scrollToEndRow() {
+  scrollToEndRow(): void {
     this.updatePosBlock(Infinity);
   }
 
@@ -1047,13 +1049,13 @@ export class DxGrid extends LitElement {
   // Resize handlers
   //
 
-  private axisResizeable(plane: 'grid' | DxGridFrozenPlane, axis: DxGridAxis, index: number | string) {
+  private axisResizeable(plane: 'grid' | DxGridFrozenPlane, axis: DxGridAxis, index: number | string): boolean {
     return axis === 'col'
       ? !!(this.columns[plane]?.[index]?.resizeable ?? this.columnDefault[plane as DxGridFrozenColsPlane]?.resizeable)
       : !!(this.rows[plane]?.[index]?.resizeable ?? this.rowDefault[plane as DxGridFrozenRowsPlane]?.resizeable);
   }
 
-  private handleAxisResizeInternal(event: DxAxisResizeInternal) {
+  private handleAxisResizeInternal(event: DxAxisResizeInternal): void {
     event.stopPropagation();
     const { plane, axis, delta, size, index, state } = event;
     if (axis === 'col') {
@@ -1223,7 +1225,7 @@ export class DxGrid extends LitElement {
       : null;
   }
 
-  private cellReadonly(col: number, row: number, plane: DxGridPlane) {
+  private cellReadonly(col: number, row: number, plane: DxGridPlane): boolean {
     const colPlane = resolveColPlane(plane);
     const rowPlane = resolveRowPlane(plane);
 
@@ -1382,7 +1384,7 @@ export class DxGrid extends LitElement {
       </div>`;
   }
 
-  private updateIntrinsicInlineSize() {
+  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)
@@ -1400,7 +1402,7 @@ export class DxGrid extends LitElement {
         : 0);
   }
 
-  private updateIntrinsicBlockSize() {
+  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)
@@ -1418,12 +1420,12 @@ export class DxGrid extends LitElement {
         : 0);
   }
 
-  private updateIntrinsicSizes() {
+  private updateIntrinsicSizes(): void {
     this.updateIntrinsicInlineSize();
     this.updateIntrinsicBlockSize();
   }
 
-  private computeColSizes() {
+  private computeColSizes(): void {
     this.colSizes = Object.entries(this.columns ?? {}).reduce(
       (acc: DxGridAxisSizes, [plane, planeColMeta]) => {
         acc[plane as 'grid' | DxGridFrozenPlane] = Object.entries(planeColMeta).reduce(
@@ -1441,7 +1443,7 @@ export class DxGrid extends LitElement {
     );
   }
 
-  private computeRowSizes() {
+  private computeRowSizes(): void {
     this.rowSizes = Object.entries(this.rows ?? {}).reduce(
       (acc: DxGridAxisSizes, [plane, planeRowMeta]) => {
         acc[plane as 'grid' | DxGridFrozenPlane] = Object.entries(planeRowMeta).reduce(
@@ -1459,7 +1461,7 @@ export class DxGrid extends LitElement {
     );
   }
 
-  override firstUpdated() {
+  override firstUpdated(): void {
     if (this.getCells) {
       this.updateCells(true);
     }
@@ -1469,7 +1471,7 @@ export class DxGrid extends LitElement {
     this.updateIntrinsicSizes();
   }
 
-  override willUpdate(changedProperties: Map<string, any>) {
+  override willUpdate(changedProperties: Map<string, any>): void {
     if (changedProperties.has('rowDefault') || changedProperties.has('rows') || changedProperties.has('limitRows')) {
       this.computeRowSizes();
       this.updateIntrinsicBlockSize();
@@ -1504,7 +1506,7 @@ export class DxGrid extends LitElement {
     }
   }
 
-  override updated(changedProperties: Map<string, any>) {
+  override updated(changedProperties: Map<string, any>): void {
     // Update the focused element if there is a change in bounds (otherwise Lit keeps focus on the relative element).
     if (
       this.focusActive &&
@@ -1526,7 +1528,7 @@ export class DxGrid extends LitElement {
     return false;
   }
 
-  override disconnectedCallback() {
+  override disconnectedCallback(): void {
     super.disconnectedCallback();
     if (this.viewportRef.value) {
       this.observer.unobserve(this.viewportRef.value);
@@ -1534,7 +1536,7 @@ export class DxGrid extends LitElement {
     document.defaultView?.removeEventListener('wheel', this.handleTopLevelWheel);
   }
 
-  override createRenderRoot() {
+  override createRenderRoot(): this {
     return this;
   }
 }

package/src/testing/playwright/dx-grid-manager.ts

@@ -19,29 +19,29 @@ export class DxGridManager {
   grid: Locator;
   page: Page;
 
-  async ready() {
+  async ready(): Promise<void> {
     return this.grid.locator('.dx-grid').waitFor({ state: 'visible' });
   }
 
-  planes() {
+  planes(): Locator {
     return this.grid.locator('.dx-grid [data-dx-grid-plane]');
   }
 
-  cellsWithinPlane(plane: string) {
+  cellsWithinPlane(plane: string): Locator {
     return this.grid.locator(`.dx-grid [data-dx-grid-plane="${plane}"]`).getByRole('gridcell');
   }
 
-  cell(col: number, row: number, plane: string) {
+  cell(col: number, row: number, plane: string): Locator {
     return this.grid.locator(
       `.dx-grid [data-dx-grid-plane="${plane}"] [aria-colindex="${col}"][aria-rowindex="${row}"]`,
     );
   }
 
-  mode() {
+  mode(): Promise<string | null> {
     return this.grid.locator('.dx-grid').getAttribute('data-grid-mode');
   }
 
-  panByWheel(deltaX: number, deltaY: number) {
+  panByWheel(deltaX: number, deltaY: number): Promise<void> {
     return this.grid.locator('.dx-grid [data-dx-grid-plane="grid"]').dispatchEvent('wheel', { deltaX, deltaY });
   }
 
@@ -49,7 +49,7 @@ export class DxGridManager {
     start: DxGridPlanePosition,
     end: DxGridPlanePosition,
     iterator: (col: number, row: number) => Promise<void>,
-  ) {
+  ): Promise<void> {
     const nCols = 1 + end.col - start.col;
     const nRows = 1 + end.row - start.row;
 
@@ -64,13 +64,13 @@ export class DxGridManager {
     );
   }
 
-  async expectSelectionResult(start: DxGridPlanePosition, end: DxGridPlanePosition) {
+  async expectSelectionResult(start: DxGridPlanePosition, end: DxGridPlanePosition): Promise<void> {
     return this.forCellsInRange(start, end, (col, row) =>
       expect(this.cell(col, row, 'grid')).toHaveAttribute('aria-selected', 'true'),
     );
   }
 
-  async expectVirtualizationResult(cols: number, rows: number, minColIndex = 0, minRowIndex = 0) {
+  async expectVirtualizationResult(cols: number, rows: number, minColIndex = 0, minRowIndex = 0): Promise<void> {
     await this.cell(minColIndex, minRowIndex, 'grid').waitFor({ state: 'visible' });
     // Top planes
     await expect(this.cellsWithinPlane('fixedStartStart')).toHaveCount(4);
@@ -86,11 +86,11 @@ export class DxGridManager {
     await expect(this.cellsWithinPlane('fixedEndEnd')).toHaveCount(1);
   }
 
-  async expectFocus(locator: Locator) {
+  async expectFocus(locator: Locator): Promise<void> {
     return expect(await locator.evaluate((node) => document.activeElement === node)).toBeTruthy();
   }
 
-  listenForSelect() {
+  listenForSelect(): Promise<void> {
     return this.grid.evaluate(() => {
       document.querySelector('dx-grid')!.addEventListener('dx-grid-cells-select', (event) => {
         (window as any).DX_GRID_EVENT = event;

package/src/types.ts

@@ -153,16 +153,18 @@ export class DxAxisResizeInternal extends Event {
   }
 }
 
-export type DxEditRequestProps = Pick<DxEditRequest, 'cellIndex' | 'cellBox' | 'initialContent'>;
+export type DxEditRequestProps = Pick<DxEditRequest, 'cellIndex' | 'cellBox' | 'cellElement' | 'initialContent'>;
 
 export class DxEditRequest extends Event {
   public readonly cellIndex: DxGridCellIndex;
   public readonly cellBox: Record<'insetInlineStart' | 'insetBlockStart' | 'inlineSize' | 'blockSize', number>;
+  public readonly cellElement: HTMLElement | null;
   public readonly initialContent?: string;
   constructor(props: DxEditRequestProps) {
     super('dx-edit-request');
     this.cellIndex = props.cellIndex;
     this.cellBox = props.cellBox;
+    this.cellElement = props.cellElement;
     this.initialContent = props.initialContent;
   }
 }

package/src/util.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { defaultSizeRow } from './defs';
+import { defaultRowSize } from './defs';
 import {
   type DxGridPlaneCellIndex,
   type DxGridCellIndex,
@@ -16,8 +16,8 @@ import {
   type DxGridFrozenPlane,
   type DxGridAxis,
   type DxGridPlanePosition,
-  separator,
   type DxGridReadonlyValue,
+  separator,
 } from './types';
 
 export const toPlaneCellIndex = (cellCoords: Partial<DxGridPosition> & DxGridPlanePosition): DxGridPlaneCellIndex =>
@@ -80,9 +80,9 @@ export const selectTolerance = 4;
 //
 // `size`, when suffixed with ‘row’ or ‘col’, are limits on size applied when resizing
 //
-export const sizeColMin = defaultSizeRow;
+export const sizeColMin = defaultRowSize;
 export const sizeColMax = 1024;
-export const sizeRowMin = defaultSizeRow;
+export const sizeRowMin = defaultRowSize;
 export const sizeRowMax = 1024;
 
 export const shouldSelect = (pointer: DxGridPointer, { pageX, pageY }: PointerEvent) => {