@dxos/lit-grid 0.6.12-main.f9d0246 → 0.6.12-staging.0b4bb48

package/dist/lib/browser/index.mjs

@@ -1,19 +1,7 @@
 // packages/ui/lit-grid/src/dx-grid.ts
-import { LitElement as LitElement2, html as html2, nothing } from "lit";
-import { customElement as customElement2, state, property as property2, eventOptions } from "lit/decorators.js";
-import { ref as ref2, createRef } from "lit/directives/ref.js";
-
-// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.ts
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
-import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
-
-// packages/ui/lit-grid/src/util.ts
-var separator = ",";
-var toCellIndex = (cellCoords) => `${cellCoords.col}${separator}${cellCoords.row}`;
+import { LitElement, html } from "lit";
+import { customElement, state, property, eventOptions } from "lit/decorators.js";
+import { ref, createRef } from "lit/directives/ref.js";
 
 // packages/ui/lit-grid/src/types.ts
 var DxAxisResize = class extends Event {
@@ -24,124 +12,9 @@ var DxAxisResize = class extends Event {
     this.size = props.size;
   }
 };
-var DxAxisResizeInternal = class extends Event {
-  constructor(props) {
-    super("dx-axis-resize-internal", {
-      composed: true,
-      bubbles: true
-    });
-    this.axis = props.axis;
-    this.index = props.index;
-    this.size = props.size;
-    this.delta = props.delta;
-    this.state = props.state;
-  }
-};
-var DxEditRequest = class extends Event {
-  constructor(props) {
-    super("dx-edit-request");
-    this.cellIndex = props.cellIndex;
-    this.cellBox = props.cellBox;
-    this.initialContent = props.initialContent;
-  }
-};
-var DxGridCellsSelect = class extends Event {
-  constructor({ start, end }) {
-    super("dx-grid-cells-select");
-    this.start = toCellIndex(start);
-    this.end = toCellIndex(end);
-    this.minCol = Math.min(start.col, end.col);
-    this.maxCol = Math.max(start.col, end.col);
-    this.minRow = Math.min(start.row, end.row);
-    this.maxRow = Math.max(start.row, end.row);
-  }
-};
-
-// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.ts
-function _ts_decorate(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-var DxGridAxisResizeHandle = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.axis = "row";
-    this.index = "-1";
-    this.size = 128;
-    this.dragStartSize = 128;
-    this.cleanup = null;
-  }
-  render() {
-    return html`<button class="dx-grid__resize-handle" ${ref(this.mount)}>
-      <span class="sr-only">Resize</span>
-    </button>`;
-  }
-  dispatchResize(location, state2) {
-    const client = this.axis === "row" ? "clientY" : "clientX";
-    const event = new DxAxisResizeInternal({
-      axis: this.axis,
-      size: this.dragStartSize,
-      index: this.index,
-      delta: location.current.input[client] - location.initial.input[client],
-      state: state2
-    });
-    this.dispatchEvent(event);
-  }
-  mount(element) {
-    this.cleanup?.();
-    const host = this;
-    if (element) {
-      this.cleanup = draggable({
-        element,
-        onGenerateDragPreview: ({ nativeSetDragImage }) => {
-          disableNativeDragPreview({
-            nativeSetDragImage
-          });
-          preventUnhandled.start();
-        },
-        onDragStart() {
-          host.dragStartSize = host.size;
-        },
-        onDrag({ location }) {
-          host.dispatchResize(location, "dragging");
-        },
-        onDrop({ location }) {
-          host.dispatchResize(location, "dropped");
-        }
-      });
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.cleanup?.();
-  }
-  createRenderRoot() {
-    return this;
-  }
-};
-_ts_decorate([
-  property({
-    type: String
-  })
-], DxGridAxisResizeHandle.prototype, "axis", void 0);
-_ts_decorate([
-  property({
-    type: String
-  })
-], DxGridAxisResizeHandle.prototype, "index", void 0);
-_ts_decorate([
-  property({
-    type: Number
-  })
-], DxGridAxisResizeHandle.prototype, "size", void 0);
-DxGridAxisResizeHandle = _ts_decorate([
-  customElement("dx-grid-axis-resize-handle")
-], DxGridAxisResizeHandle);
 
 // packages/ui/lit-grid/src/dx-grid.ts
-function _ts_decorate2(decorators, target, key, desc) {
+function _ts_decorate(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -155,46 +28,19 @@ var sizeColMin = 32;
 var sizeColMax = 1024;
 var sizeRowMin = 16;
 var sizeRowMax = 1024;
+var separator = ",";
 var colToA1Notation = (col) => {
   return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
 };
 var rowToA1Notation = (row) => {
   return `${row + 1}`;
 };
-var closestAction = (target) => {
-  const actionEl = target?.closest("[data-dx-grid-action]") ?? null;
-  return {
-    actionEl,
-    action: actionEl?.getAttribute("data-dx-grid-action") ?? null
-  };
-};
-var closestCell = (target, actionEl) => {
-  let cellElement = actionEl;
-  if (!cellElement) {
-    const { action, actionEl: actionEl2 } = closestAction(target);
-    if (action === "cell") {
-      cellElement = actionEl2;
-    }
-  }
-  if (cellElement) {
-    const col = parseInt(cellElement.getAttribute("aria-colindex") ?? "never");
-    const row = parseInt(cellElement.getAttribute("aria-rowindex") ?? "never");
-    return {
-      col,
-      row
-    };
-  } else {
-    return null;
-  }
-};
-var isSameCell = (a, b) => a && b && Number.isFinite(a.col) && Number.isFinite(a.row) && a.col === b.col && a.row === b.row;
 var localChId = (c0) => `ch--${c0}`;
 var localRhId = (r0) => `rh--${r0}`;
 var getPage = (axis, event) => axis === "col" ? event.pageX : event.pageY;
-var DxGrid = class extends LitElement2 {
+var DxGrid = class extends LitElement {
   constructor() {
-    super();
-    this.gridId = "default-grid-id";
+    super(...arguments);
     this.rowDefault = {
       size: 32
     };
@@ -203,13 +49,6 @@ var DxGrid = class extends LitElement2 {
     };
     this.rows = {};
     this.columns = {};
-    this.initialCells = {};
-    this.mode = "browse";
-    /**
-    * When this function is defined, it is used first to try to get a value for a cell, and otherwise will fall back
-    * to `cells`.
-    */
-    this.getCells = null;
     this.cells = {};
     //
     // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
@@ -247,76 +86,55 @@ var DxGrid = class extends LitElement2 {
     this.templateColumns = `${this.colSize(0)}px`;
     this.templateRows = `${this.rowSize(0)}px`;
     //
-    // Focus, selection, and resize states
+    // Resize state and handlers
     //
-    this.pointer = null;
     this.colSizes = {};
     this.rowSizes = {};
-    this.focusActive = false;
-    this.focusedCell = {
-      col: 0,
-      row: 0
-    };
-    this.selectionStart = {
-      col: 0,
-      row: 0
-    };
-    this.selectionEnd = {
-      col: 0,
-      row: 0
-    };
+    this.resizing = null;
     this.handlePointerDown = (event) => {
-      if (event.isPrimary) {
-        const { action, actionEl } = closestAction(event.target);
-        if (action) {
-          if (action.startsWith("resize") && this.mode === "browse") {
-            const [resize, index] = action.split(",");
-            const [_, axis] = resize.split("-");
-            this.pointer = {
-              state: "resizing",
-              axis,
-              size: axis === "col" ? this.colSize(index) : this.rowSize(index),
-              page: getPage(axis, event),
-              index
-            };
-          } else if (action === "cell") {
-            const cellCoords = closestCell(event.target, actionEl);
-            if (cellCoords) {
-              this.pointer = {
-                state: "selecting"
-              };
-              this.selectionStart = cellCoords;
-            }
-            if (this.mode === "edit") {
-              event.preventDefault();
-            } else {
-              if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
-                this.dispatchEditRequest();
-              }
-            }
-          }
+      const actionEl = event.target?.closest("[data-dx-grid-action]");
+      const action = actionEl?.getAttribute("data-dx-grid-action");
+      if (action) {
+        if (action.startsWith("resize")) {
+          const [resize, index] = action.split(",");
+          const [_, axis] = resize.split("-");
+          this.resizing = {
+            axis,
+            size: axis === "col" ? this.colSize(index) : this.rowSize(index),
+            page: getPage(axis, event),
+            index
+          };
         }
       }
     };
-    this.handlePointerUp = (event) => {
-      if (this.pointer?.state === "resizing") {
-      } else {
-        const cell = closestCell(event.target);
-        if (cell) {
-          this.selectionEnd = cell;
-          this.dispatchEvent(new DxGridCellsSelect({
-            start: this.selectionStart,
-            end: this.selectionEnd
-          }));
-        }
+    this.handlePointerUp = (_event) => {
+      if (this.resizing) {
+        const resizeEvent = new DxAxisResize({
+          axis: this.resizing.axis,
+          index: this.resizing.index,
+          size: this[this.resizing.axis === "col" ? "colSize" : "rowSize"](this.resizing.index)
+        });
+        this.dispatchEvent(resizeEvent);
+        this.resizing = null;
       }
-      this.pointer = null;
     };
     this.handlePointerMove = (event) => {
-      if (this.pointer?.state === "selecting") {
-        const cell = closestCell(event.target);
-        if (cell && (cell.col !== this.selectionEnd.col || cell.row !== this.selectionEnd.row)) {
-          this.selectionEnd = cell;
+      if (this.resizing) {
+        const delta = getPage(this.resizing.axis, event) - this.resizing.page;
+        if (this.resizing.axis === "col") {
+          const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));
+          this.colSizes = {
+            ...this.colSizes,
+            [this.resizing.index]: nextSize
+          };
+          this.updateVisInline();
+        } else {
+          const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));
+          this.rowSizes = {
+            ...this.rowSizes,
+            [this.resizing.index]: nextSize
+          };
+          this.updateVisBlock();
         }
       }
     };
@@ -335,92 +153,20 @@ var DxGrid = class extends LitElement2 {
       }
     });
     this.viewportRef = createRef();
-    this.maybeUpdateVis = () => {
+    this.handleWheel = ({ deltaX, deltaY }) => {
+      this.posInline = Math.max(0, this.posInline + deltaX);
+      this.posBlock = Math.max(0, this.posBlock + deltaY);
       if (this.posInline >= this.binInlineMin && this.posInline < this.binInlineMax && this.posBlock >= this.binBlockMin && this.posBlock < this.binBlockMax) {
       } else {
         this.updateVis();
       }
     };
-    this.handleWheel = ({ deltaX, deltaY }) => {
-      if (this.mode === "browse") {
-        this.posInline = Math.max(0, this.posInline + deltaX);
-        this.posBlock = Math.max(0, this.posBlock + deltaY);
-        this.maybeUpdateVis();
-      }
+    // Focus handlers
+    this.focusedCell = {
+      col: 0,
+      row: 0
     };
-    this.addEventListener("dx-axis-resize-internal", this.handleAxisResizeInternal);
-    this.addEventListener("wheel", this.handleWheel);
-    this.addEventListener("pointerdown", this.handlePointerDown);
-    this.addEventListener("pointermove", this.handlePointerMove);
-    this.addEventListener("pointerup", this.handlePointerUp);
-    this.addEventListener("pointerleave", this.handlePointerUp);
-    this.addEventListener("focus", this.handleFocus, {
-      capture: true
-    });
-    this.addEventListener("blur", this.handleBlur, {
-      capture: true
-    });
-    this.addEventListener("keydown", this.handleKeydown);
-  }
-  //
-  // Primary pointer and keyboard handlers
-  //
-  dispatchEditRequest(initialContent) {
-    this.snapPosToFocusedCell();
-    queueMicrotask(() => this.dispatchEvent(new DxEditRequest({
-      cellIndex: toCellIndex(this.focusedCell),
-      cellBox: this.focusedCellBox(),
-      initialContent
-    })));
-  }
-  handleKeydown(event) {
-    if (this.focusActive && this.mode === "browse") {
-      switch (event.key) {
-        case "ArrowDown":
-          this.focusedCell = {
-            ...this.focusedCell,
-            row: this.focusedCell.row + 1
-          };
-          break;
-        case "ArrowUp":
-          this.focusedCell = {
-            ...this.focusedCell,
-            row: Math.max(0, this.focusedCell.row - 1)
-          };
-          break;
-        case "ArrowRight":
-          this.focusedCell = {
-            ...this.focusedCell,
-            col: this.focusedCell.col + 1
-          };
-          break;
-        case "ArrowLeft":
-          this.focusedCell = {
-            ...this.focusedCell,
-            col: Math.max(0, this.focusedCell.col - 1)
-          };
-          break;
-      }
-      switch (event.key) {
-        case "Enter":
-          this.dispatchEditRequest();
-          break;
-        default:
-          if (event.key.length === 1 && event.key.match(/\P{Cc}/u)) {
-            this.dispatchEditRequest(event.key);
-          }
-          break;
-      }
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowUp":
-        case "ArrowRight":
-        case "ArrowLeft":
-          event.preventDefault();
-          this.snapPosToFocusedCell();
-          break;
-      }
-    }
+    this.focusActive = false;
   }
   //
   // Accessors
@@ -431,33 +177,8 @@ var DxGrid = class extends LitElement2 {
   rowSize(r) {
     return this.rowSizes?.[r] ?? this.rowDefault.size;
   }
-  cell(c, r) {
-    const index = `${c}${separator}${r}`;
-    return this.cells[index] ?? this.initialCells[index];
-  }
-  focusedCellBox() {
-    const cellElement = this.focusedCellElement();
-    const cellSize = {
-      inlineSize: this.colSize(this.focusedCell.col),
-      blockSize: this.rowSize(this.focusedCell.row)
-    };
-    if (!cellElement) {
-      return {
-        insetInlineStart: NaN,
-        insetBlockStart: NaN,
-        ...cellSize
-      };
-    }
-    const contentElement = cellElement.offsetParent;
-    const [_translate3d, inlineStr, blockStr] = contentElement.style.transform.split(/[()]|px,?\s?/);
-    const contentOffsetInline = parseFloat(inlineStr);
-    const contentOffsetBlock = parseFloat(blockStr);
-    const offsetParent = contentElement.offsetParent;
-    return {
-      insetInlineStart: cellElement.offsetLeft + contentOffsetInline + offsetParent.offsetLeft,
-      insetBlockStart: cellElement.offsetTop + contentOffsetBlock + offsetParent.offsetTop,
-      ...cellSize
-    };
+  getCell(c, r) {
+    return this.cells[`${c}${separator}${r}`];
   }
   updateVisInline() {
     let colIndex = 0;
@@ -513,45 +234,31 @@ var DxGrid = class extends LitElement2 {
     this.updateVisInline();
     this.updateVisBlock();
   }
-  // Focus handlers
   handleFocus(event) {
-    const cellCoords = closestCell(event.target);
-    if (cellCoords) {
-      this.focusedCell = cellCoords;
+    const target = event.target;
+    const action = target.getAttribute("data-dx-grid-action");
+    if (action === "cell") {
+      const c = parseInt(target.getAttribute("aria-colindex") ?? "never");
+      const r = parseInt(target.getAttribute("aria-rowindex") ?? "never");
+      this.focusedCell = {
+        col: c,
+        row: r
+      };
       this.focusActive = true;
     }
   }
   handleBlur(event) {
-    if (!event.relatedTarget || !event.relatedTarget.closest(`[data-grid="${this.gridId}"]`)) {
+    if (!event.relatedTarget || event.relatedTarget.closest(".dx-grid__viewport") !== this.viewportRef.value) {
       this.focusActive = false;
     }
   }
-  focusedCellElement() {
-    return this.viewportRef.value?.querySelector(`[aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`);
-  }
   /**
   * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
   */
-  refocus(increment, delta = 1) {
-    switch (increment) {
-      case "row":
-        this.focusedCell = {
-          ...this.focusedCell,
-          row: this.focusedCell.row + delta
-        };
-        break;
-      case "col":
-        this.focusedCell = {
-          ...this.focusedCell,
-          col: this.focusedCell.col + delta
-        };
-    }
-    (this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax || this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax ? this.viewportRef.value : this.focusedCellElement())?.focus({
+  refocus() {
+    (this.focusedCell.row < this.visRowMin || this.focusedCell.row > this.visRowMax || this.focusedCell.col < this.visColMin || this.focusedCell.col > this.visColMax ? this.viewportRef.value : this.viewportRef.value?.querySelector(`[aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`))?.focus({
       preventScroll: true
     });
-    if (increment) {
-      this.snapPosToFocusedCell();
-    }
   }
   /**
   * Updates `pos` so that a cell in focus is fully within the viewport
@@ -570,7 +277,7 @@ var DxGrid = class extends LitElement2 {
           acc += this.colSize(this.visColMin + overscanCol + c0) + gap;
           return acc;
         }, 0);
-        this.posInline = Math.max(0, this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline);
+        this.posInline = this.binInlineMin + sizeSumCol + gap * 2 - this.sizeInline;
         this.updateVisInline();
       }
       if (this.focusedCell.row <= this.visRowMin + overscanRow) {
@@ -583,55 +290,49 @@ var DxGrid = class extends LitElement2 {
           acc += this.rowSize(this.visRowMin + overscanRow + r0) + gap;
           return acc;
         }, 0);
-        this.posBlock = Math.max(0, this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock);
+        this.posBlock = this.binBlockMin + sizeSumRow + gap * 2 - this.sizeBlock;
         this.updateVisBlock();
       }
     }
   }
-  //
-  // Map scroll DOM methods to virtualized value.
-  //
-  get scrollLeft() {
-    return this.posInline;
-  }
-  set scrollLeft(nextValue) {
-    this.posInline = nextValue;
-    this.maybeUpdateVis();
-  }
-  get scrollTop() {
-    return this.posBlock;
-  }
-  set scrollTop(nextValue) {
-    this.posBlock = nextValue;
-    this.maybeUpdateVis();
-  }
-  //
-  // Resize handlers
-  //
-  handleAxisResizeInternal(event) {
-    event.stopPropagation();
-    const { axis, delta, size, index, type } = event;
-    if (axis === "col") {
-      const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, size + delta));
-      this.colSizes = {
-        ...this.colSizes,
-        [index]: nextSize
-      };
-      this.updateVisInline();
-    } else {
-      const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, size + delta));
-      this.rowSizes = {
-        ...this.rowSizes,
-        [index]: nextSize
-      };
-      this.updateVisBlock();
-    }
-    if (type === "dropped") {
-      this.dispatchEvent(new DxAxisResize({
-        axis,
-        index,
-        size: this[axis === "col" ? "colSize" : "rowSize"](index)
-      }));
+  // Keyboard interactions
+  handleKeydown(event) {
+    if (this.focusActive) {
+      switch (event.key) {
+        case "ArrowDown":
+          this.focusedCell = {
+            ...this.focusedCell,
+            row: this.focusedCell.row + 1
+          };
+          break;
+        case "ArrowUp":
+          this.focusedCell = {
+            ...this.focusedCell,
+            row: Math.max(0, this.focusedCell.row - 1)
+          };
+          break;
+        case "ArrowRight":
+          this.focusedCell = {
+            ...this.focusedCell,
+            col: this.focusedCell.col + 1
+          };
+          break;
+        case "ArrowLeft":
+          this.focusedCell = {
+            ...this.focusedCell,
+            col: Math.max(0, this.focusedCell.col - 1)
+          };
+          break;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "ArrowRight":
+        case "ArrowLeft":
+          event.preventDefault();
+          this.snapPosToFocusedCell();
+          break;
+      }
     }
   }
   //
@@ -640,19 +341,17 @@ var DxGrid = class extends LitElement2 {
   render() {
     const visibleCols = this.visColMax - this.visColMin;
     const visibleRows = this.visRowMax - this.visRowMin;
-    const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;
-    const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
-    const selectColMin = Math.min(this.selectionStart.col, this.selectionEnd.col);
-    const selectColMax = Math.max(this.selectionStart.col, this.selectionEnd.col);
-    const selectRowMin = Math.min(this.selectionStart.row, this.selectionEnd.row);
-    const selectRowMax = Math.max(this.selectionStart.row, this.selectionEnd.row);
-    const selectVisible = selectColMin !== selectColMax || selectRowMin !== selectRowMax;
-    return html2`<div
+    const offsetInline = gap + this.binInlineMin - this.posInline - this.overscanInline;
+    const offsetBlock = gap + this.binBlockMin - this.posBlock - this.overscanBlock;
+    return html`<div
       role="none"
       class="dx-grid"
-      data-grid=${this.gridId}
-      data-grid-mode=${this.mode}
-      ?data-grid-select=${selectVisible}
+      @pointerdown=${this.handlePointerDown}
+      @pointerup=${this.handlePointerUp}
+      @pointermove=${this.handlePointerMove}
+      @focus=${this.handleFocus}
+      @blur=${this.handleBlur}
+      @keydown=${this.handleKeydown}
     >
       <div role="none" class="dx-grid__corner"></div>
       <div role="none" class="dx-grid__columnheader">
@@ -665,18 +364,15 @@ var DxGrid = class extends LitElement2 {
       ...Array(visibleCols)
     ].map((_, c0) => {
       const c = this.visColMin + c0;
-      return html2`<div
+      return html`<div
               role="columnheader"
               ?inert=${c < 0}
               style="block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 2};"
             >
               <span id=${localChId(c0)}>${colToA1Notation(c)}</span>
-              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) && html2`<dx-grid-axis-resize-handle
-                axis="col"
-                index=${c}
-                size=${this.colSize(c)}
-                @dxaxisresizeinternal=${this.handleAxisResizeInternal}
-              ></dx-grid-axis-resize-handle>`}
+              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-col,${c}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
             </div>`;
     })}
         </div>
@@ -692,18 +388,16 @@ var DxGrid = class extends LitElement2 {
       ...Array(visibleRows)
     ].map((_, r0) => {
       const r = this.visRowMin + r0;
-      return html2`<div role="rowheader" ?inert=${r < 0} style="grid-row:${r0 + 1}/${r0 + 2}">
+      return html`<div role="rowheader" ?inert=${r < 0} style="grid-row:${r0 + 1}/${r0 + 2}">
               <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>
-              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) && html2`<dx-grid-axis-resize-handle
-                axis="row"
-                index=${r}
-                size=${this.rowSize(r)}
-              ></dx-grid-axis-resize-handle>`}
+              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-row,${r}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
             </div>`;
     })}
         </div>
       </div>
-      <div role="grid" class="dx-grid__viewport" tabindex="0" @wheel=${this.handleWheel} ${ref2(this.viewportRef)}>
+      <div role="grid" class="dx-grid__viewport" tabindex="0" @wheel=${this.handleWheel} ${ref(this.viewportRef)}>
         <div
           role="none"
           class="dx-grid__content"
@@ -717,15 +411,11 @@ var DxGrid = class extends LitElement2 {
       ].map((_2, r0) => {
         const c = c0 + this.visColMin;
         const r = r0 + this.visRowMin;
-        const cell = this.cell(c, r);
-        const active = this.focusActive && this.focusedCell.col === c && this.focusedCell.row === r;
-        const selected = c >= selectColMin && c <= selectColMax && r >= selectRowMin && r <= selectRowMax;
-        return html2`<div
+        const cell = this.getCell(c, r);
+        return html`<div
                 role="gridcell"
                 tabindex="0"
                 ?inert=${c < 0 || r < 0}
-                ?aria-selected=${selected}
-                class=${cell || active ? (cell?.className ? cell.className + " " : "") + (active ? "dx-grid__cell--active" : "") : nothing}
                 aria-rowindex=${r}
                 aria-colindex=${c}
                 data-dx-grid-action="cell"
@@ -748,18 +438,6 @@ var DxGrid = class extends LitElement2 {
     </div>`;
   }
   firstUpdated() {
-    if (this.getCells) {
-      this.cells = this.getCells({
-        start: {
-          col: this.visColMin,
-          row: this.visRowMin
-        },
-        end: {
-          col: this.visColMax,
-          row: this.visRowMax
-        }
-      });
-    }
     this.observer.observe(this.viewportRef.value);
     this.colSizes = Object.entries(this.columns).reduce((acc, [colId, colMeta]) => {
       if (colMeta?.size) {
@@ -774,20 +452,6 @@ var DxGrid = class extends LitElement2 {
       return acc;
     }, {});
   }
-  willUpdate(changedProperties) {
-    if (this.getCells && (changedProperties.has("initialCells") || changedProperties.has("visColMin") || changedProperties.has("visColMax") || changedProperties.has("visRowMin") || changedProperties.has("visRowMax"))) {
-      this.cells = this.getCells({
-        start: {
-          col: this.visColMin,
-          row: this.visRowMin
-        },
-        end: {
-          col: this.visColMax,
-          row: this.visRowMax
-        }
-      });
-    }
-  }
   updated(changedProperties) {
     if (this.focusActive && (changedProperties.has("visRowMin") || changedProperties.has("visColMin") || changedProperties.has("focusedCell"))) {
       this.refocus();
@@ -803,134 +467,112 @@ var DxGrid = class extends LitElement2 {
     return this;
   }
 };
-_ts_decorate2([
-  property2({
-    type: String
-  })
-], DxGrid.prototype, "gridId", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "rowDefault", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "columnDefault", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "rows", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
 ], DxGrid.prototype, "columns", void 0);
-_ts_decorate2([
-  property2({
+_ts_decorate([
+  property({
     type: Object
   })
-], DxGrid.prototype, "initialCells", void 0);
-_ts_decorate2([
-  property2({
-    type: String
-  })
-], DxGrid.prototype, "mode", void 0);
-_ts_decorate2([
-  state()
 ], DxGrid.prototype, "cells", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "posInline", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "posBlock", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "sizeInline", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "sizeBlock", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "overscanInline", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "overscanBlock", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binInlineMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binInlineMax", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binBlockMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "binBlockMax", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visColMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visColMax", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visRowMin", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "visRowMax", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "templateColumns", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "templateRows", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "pointer", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "colSizes", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
 ], DxGrid.prototype, "rowSizes", void 0);
-_ts_decorate2([
-  state()
-], DxGrid.prototype, "focusActive", void 0);
-_ts_decorate2([
+_ts_decorate([
   state()
-], DxGrid.prototype, "focusedCell", void 0);
-_ts_decorate2([
+], DxGrid.prototype, "resizing", void 0);
+_ts_decorate([
   state()
-], DxGrid.prototype, "selectionStart", void 0);
-_ts_decorate2([
+], DxGrid.prototype, "observer", void 0);
+_ts_decorate([
   state()
-], DxGrid.prototype, "selectionEnd", void 0);
-_ts_decorate2([
+], DxGrid.prototype, "focusedCell", void 0);
+_ts_decorate([
   state()
-], DxGrid.prototype, "observer", void 0);
-_ts_decorate2([
+], DxGrid.prototype, "focusActive", void 0);
+_ts_decorate([
   eventOptions({
     capture: true
   })
 ], DxGrid.prototype, "handleFocus", null);
-_ts_decorate2([
+_ts_decorate([
   eventOptions({
     capture: true
   })
 ], DxGrid.prototype, "handleBlur", null);
-DxGrid = _ts_decorate2([
-  customElement2("dx-grid")
+DxGrid = _ts_decorate([
+  customElement("dx-grid")
 ], DxGrid);
 export {
   DxAxisResize,
-  DxAxisResizeInternal,
-  DxEditRequest,
-  DxGrid,
-  DxGridCellsSelect
+  DxGrid
 };
 //# sourceMappingURL=index.mjs.map