@vaadin/grid 23.0.0-alpha3 → 23.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.0.0-alpha3",
+  "version": "23.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-grid.js",
   "module": "vaadin-grid.js",
+  "type": "module",
   "files": [
     "all-imports.js",
     "src",
@@ -40,19 +41,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.0.0-alpha3",
-    "@vaadin/component-base": "23.0.0-alpha3",
-    "@vaadin/text-field": "23.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha3"
+    "@vaadin/checkbox": "23.0.0-beta2",
+    "@vaadin/component-base": "23.0.0-beta2",
+    "@vaadin/text-field": "23.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha3",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "490037919a9e054cc002c1b3be0c94a1603e1a44"
+  "gitHead": "a276f7a0fd00e5459b87267468e0dd0d4fb6f7f3"
 }

package/src/vaadin-grid-column.js

@@ -449,6 +449,10 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       cells.forEach((cell) => {
+        if (!cell.parentElement) {
+          return;
+        }
+
         const model = this._grid.__getRowModel(cell.parentElement);
 
         if (!renderer) {
@@ -493,7 +497,9 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
-      this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);
+      if (this._grid) {
+        this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);
+      }
     }
 
     /** @protected */
@@ -532,7 +538,9 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(footerRenderer, [footerCell]);
-      this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);
+      if (this._grid) {
+        this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);
+      }
     }
 
     /** @protected */

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -130,6 +130,37 @@ export const KeyboardNavigationMixin = (superClass) =>
       this._updateGridSectionFocusTarget(this._footerFocusable);
     }
 
+    /**
+     * Since the focused cell/row state is stored as an element reference, the reference may get
+     * out of sync when the virtual indexes for elements update due to effective size change.
+     * This function updates the reference to the correct element after a possible index change.
+     * @private
+     */
+    __updateItemsFocusable() {
+      if (!this._itemsFocusable) {
+        return;
+      }
+
+      const wasFocused = this.shadowRoot.activeElement === this._itemsFocusable;
+
+      this._getVisibleRows().forEach((row) => {
+        if (row.index === this._focusedItemIndex) {
+          if (this.__rowFocusMode) {
+            // Row focus mode
+            this._itemsFocusable = row;
+          } else if (this._itemsFocusable.parentElement) {
+            // Cell focus mode
+            const cellIndex = [...this._itemsFocusable.parentElement.children].indexOf(this._itemsFocusable);
+            this._itemsFocusable = row.children[cellIndex];
+          }
+        }
+      });
+
+      if (wasFocused) {
+        this._itemsFocusable.focus();
+      }
+    }
+
     /**
      * @param {!KeyboardEvent} e
      * @protected
@@ -531,7 +562,11 @@ export const KeyboardNavigationMixin = (superClass) =>
 
       if (this.interacting !== wantInteracting && cell !== null) {
         if (wantInteracting) {
-          const focusTarget = cell._content.querySelector('[focus-target]') || cell._content.firstElementChild;
+          const focusTarget =
+            cell._content.querySelector('[focus-target]') ||
+            // If a child element hasn't been explicitly marked as a focus target,
+            // fall back to any focusable element inside the cell.
+            [...cell._content.querySelectorAll('*')].find((node) => this._isFocusable(node));
           if (focusTarget) {
             e.preventDefault();
             focusTarget.focus();
@@ -805,6 +840,8 @@ export const KeyboardNavigationMixin = (superClass) =>
           delete this._focusedColumnOrder;
           this._itemsFocusable = this.__rowFocusMode ? firstVisibleRow : firstVisibleCell;
         }
+      } else {
+        this.__updateItemsFocusable();
       }
     }
 

package/src/vaadin-grid-row-details-mixin.js

@@ -83,7 +83,9 @@ export const RowDetailsMixin = (superClass) =>
         Array.from(this.$.items.children).forEach((row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
-            this._a11yUpdateRowDetailsOpened(row, false);
+            const isDetailsOpened = this._isDetailsOpened(row._item);
+            this._a11yUpdateRowDetailsOpened(row, isDetailsOpened);
+            this._toggleDetailsCell(row, isDetailsOpened);
           }
         });
       }

package/src/vaadin-grid-selection-mixin.js

@@ -77,12 +77,8 @@ export const SelectionMixin = (superClass) =>
     }
 
     /** @private */
-    _selectedItemsChanged(e) {
-      if (this.$.items.children.length && (e.path === 'selectedItems' || e.path === 'selectedItems.splices')) {
-        Array.from(this.$.items.children).forEach((row) => {
-          this._updateItem(row, row._item);
-        });
-      }
+    _selectedItemsChanged() {
+      this.requestContentUpdate();
     }
 
     /**

package/src/vaadin-grid.js

@@ -584,6 +584,9 @@ class Grid extends ElementMixin(
    * @private
    */
   _recalculateColumnWidths(cols) {
+    // Flush to make sure DOM is up-to-date when measuring the column widths
+    this.__virtualizer.flush();
+
     cols.forEach((col) => {
       col.width = `${this.__getDistributedWidth(col)}px`;
     });