@vaadin/grid 22.0.3 → 22.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "22.0.3",
+  "version": "22.0.6",
   "publishConfig": {
     "access": "public"
   },
@@ -40,19 +40,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^22.0.3",
-    "@vaadin/component-base": "^22.0.3",
-    "@vaadin/text-field": "^22.0.3",
-    "@vaadin/vaadin-lumo-styles": "^22.0.3",
-    "@vaadin/vaadin-material-styles": "^22.0.3",
-    "@vaadin/vaadin-themable-mixin": "^22.0.3"
+    "@vaadin/checkbox": "^22.0.6",
+    "@vaadin/component-base": "^22.0.6",
+    "@vaadin/text-field": "^22.0.6",
+    "@vaadin/vaadin-lumo-styles": "^22.0.6",
+    "@vaadin/vaadin-material-styles": "^22.0.6",
+    "@vaadin/vaadin-themable-mixin": "^22.0.6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^22.0.3",
+    "@vaadin/polymer-legacy-adapter": "^22.0.6",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "935ad1ea65a79b0f9ecb10d767689479b36c4e07"
+  "gitHead": "18c55872d764e338e0f98e65826cbe895156251a"
 }

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

@@ -94,24 +94,12 @@ export const A11yMixin = (superClass) =>
      * @protected
      */
     _a11yUpdateRowLevel(row, level) {
-      row.setAttribute('aria-level', level + 1);
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @param {boolean} detailsOpened
-     * @protected
-     */
-    _a11yUpdateRowDetailsOpened(row, detailsOpened) {
-      const detailsCell = row.querySelector('[part~=details-cell]');
-
-      Array.from(row.children).forEach((cell) => {
-        if (detailsCell) {
-          cell.setAttribute('aria-expanded', detailsOpened);
-        } else {
-          cell.removeAttribute('aria-expanded');
-        }
-      });
+      // Set level for the expandable rows itself, and all the nested rows.
+      if (level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row)) {
+        row.setAttribute('aria-level', level + 1);
+      } else {
+        row.removeAttribute('aria-level');
+      }
     }
 
     /**

package/src/vaadin-grid-column.js

@@ -494,7 +494,9 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
-      this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);
+      if (this._grid) {
+        this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);
+      }
     }
 
     /** @protected */
@@ -533,7 +535,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
@@ -532,7 +563,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();
@@ -582,6 +617,9 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onTabKeyDown(e) {
       const focusTarget = this._predictFocusStepTarget(e.composedPath()[0], e.shiftKey ? -1 : 1);
 
+      // Prevent focus-trap logic from intercepting the event.
+      e.stopPropagation();
+
       if (focusTarget === this.$.table) {
         // The focus is about to exit the grid to the top.
         this.$.table.focus();
@@ -804,6 +842,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,8 @@ 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._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

@@ -908,7 +908,6 @@ class Grid extends ElementMixin(
 
     this._a11yUpdateRowLevel(row, model.level);
     this._a11yUpdateRowSelected(row, model.selected);
-    this._a11yUpdateRowDetailsOpened(row, model.detailsOpened);
 
     row.toggleAttribute('expanded', model.expanded);
     row.toggleAttribute('selected', model.selected);