@vaadin/grid 23.0.0-alpha5 → 23.0.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.0.0-alpha5",
+  "version": "23.0.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -41,19 +41,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.0.0-alpha5",
-    "@vaadin/component-base": "23.0.0-alpha5",
-    "@vaadin/text-field": "23.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha5"
+    "@vaadin/checkbox": "23.0.0-beta4",
+    "@vaadin/component-base": "23.0.0-beta4",
+    "@vaadin/text-field": "23.0.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta4",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha5",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-beta4",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
+  "gitHead": "d0b447f1c31ca4256a5e26f2dcd27784447ff79b"
 }

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

@@ -497,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 */
@@ -536,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-data-provider-mixin.d.ts

@@ -101,6 +101,12 @@ export declare class DataProviderMixinClass<TItem> {
    */
   readonly loading: boolean | null | undefined;
 
+  /**
+   * Path to an item sub-property that indicates whether the item has child items.
+   * @attr {string} item-has-children-path
+   */
+  itemHasChildrenPath: string;
+
   /**
    * Path to an item sub-property that identifies the item.
    * @attr {string} item-id-path

package/src/vaadin-grid-data-provider-mixin.js

@@ -186,6 +186,15 @@ export const DataProviderMixin = (superClass) =>
           value: false
         },
 
+        /**
+         * Path to an item sub-property that indicates whether the item has child items.
+         * @attr {string} item-has-children-path
+         */
+        itemHasChildrenPath: {
+          type: String,
+          value: 'children'
+        },
+
         /**
          * Path to an item sub-property that identifies the item.
          * @attr {string} item-id-path

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
@@ -185,14 +216,12 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
     }
 
-    // TODO: A tree toggle component should not be the way to determine if the row is expandable
     /** @private */
     __isRowExpandable(row) {
-      const treeToggle = [...row.children].reduce(
-        (value, cell) => value || cell._content.querySelector('vaadin-grid-tree-toggle'),
-        null
-      );
-      return treeToggle && !treeToggle.expanded && !treeToggle.leaf;
+      if (this.itemHasChildrenPath) {
+        const item = row._item;
+        return item && this.get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+      }
     }
 
     /** @private */
@@ -531,7 +560,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 +838,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-styles.js

@@ -27,6 +27,10 @@ registerStyles(
       display: none !important;
     }
 
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
     #scroller {
       display: block;
       transform: translateY(0);

package/src/vaadin-grid-tree-column.d.ts

@@ -28,6 +28,7 @@ declare class GridTreeColumn<TItem = GridDefaultItem> extends GridColumn<TItem>
   /**
    * JS Path of the property in the item that indicates whether the item has child items.
    * @attr {string} item-has-children-path
+   * @deprecated Use `grid.itemHasChildrenPath` instead.
    */
   itemHasChildrenPath: string | null | undefined;
 }

package/src/vaadin-grid-tree-column.js

@@ -34,10 +34,11 @@ class GridTreeColumn extends GridColumn {
       /**
        * JS Path of the property in the item that indicates whether the item has child items.
        * @attr {string} item-has-children-path
+       * @deprecated Use `grid.itemHasChildrenPath` instead.
        */
       itemHasChildrenPath: {
         type: String,
-        value: 'children'
+        observer: '_itemHasChildrenPathChanged'
       }
     };
   }
@@ -68,7 +69,7 @@ class GridTreeColumn extends GridColumn {
     toggle.__item = item;
     toggle.__rendererExpanded = expanded;
     toggle.expanded = expanded;
-    toggle.leaf = this.__isLeafItem(item, this.itemHasChildrenPath);
+    toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath);
     toggle.textContent = this.__getToggleContent(this.path, item);
     toggle.level = level;
   }
@@ -84,6 +85,19 @@ class GridTreeColumn extends GridColumn {
     return this.__defaultRenderer;
   }
 
+  /** @private */
+  _itemHasChildrenPathChanged(itemHasChildrenPath) {
+    if (itemHasChildrenPath) {
+      console.warn(
+        `WARNING: Since Vaadin 23, itemHasChildrenPath on <vaadin-grid-tree-column> is deprecated. Please set this property on the <vaadin-grid> instead.`
+      );
+
+      if (this._grid) {
+        this._grid.itemHasChildrenPath = itemHasChildrenPath;
+      }
+    }
+  }
+
   /**
    * Expands or collapses the row once the tree toggle is switched.
    * The listener handles only user-fired events.

package/src/vaadin-grid.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
@@ -389,7 +390,8 @@ declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
 }
 
 interface Grid<TItem = GridDefaultItem>
-  extends ElementMixinClass,
+  extends DisabledMixinClass,
+    ElementMixinClass,
     ThemableMixinClass,
     ActiveItemMixinClass<TItem>,
     ArrayDataProviderMixinClass<TItem>,

package/src/vaadin-grid.js

@@ -9,6 +9,7 @@ import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { isAndroid, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -256,7 +257,9 @@ class Grid extends ElementMixin(
                       A11yMixin(
                         FilterMixin(
                           ColumnReorderingMixin(
-                            ColumnResizingMixin(EventContextMixin(DragAndDropMixin(StylingMixin(PolymerElement))))
+                            ColumnResizingMixin(
+                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(PolymerElement))))
+                            )
                           )
                         )
                       )
@@ -337,6 +340,11 @@ class Grid extends ElementMixin(
         value: isTouch
       },
 
+      /** @protected */
+      tabindex: {
+        value: undefined
+      },
+
       /**
        * If true, the grid's height is defined by its rows.
        *
@@ -465,6 +473,23 @@ class Grid extends ElementMixin(
     }
   }
 
+  /**
+   * Override an observer from `DisabledMixin` to not
+   * set `tabindex` on the grid when it is re-enabled.
+   *
+   * @param {boolean} disabled
+   * @param {boolean} oldDisabled
+   * @protected
+   * @override
+   */
+  _disabledChanged(disabled, oldDisabled) {
+    super._disabledChanged(disabled, oldDisabled);
+
+    if (oldDisabled) {
+      this.removeAttribute('tabindex');
+    }
+  }
+
   /** @private */
   __getBodyCellCoordinates(cell) {
     if (this.$.items.contains(cell) && cell.localName === 'td') {
@@ -910,7 +935,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);

package/theme/lumo/vaadin-grid-styles.js

@@ -35,6 +35,10 @@ registerStyles(
       border: var(--_lumo-grid-border-width) solid var(--_lumo-grid-border-color);
     }
 
+    :host([disabled]) {
+      opacity: 0.7;
+    }
+
     /* Cell styles */
 
     [part~='cell'] {

package/theme/material/vaadin-grid-styles.js

@@ -13,6 +13,10 @@ registerStyles(
       color: var(--material-body-text-color);
     }
 
+    :host([disabled]) {
+      opacity: 0.7;
+    }
+
     [part~='cell'] {
       min-height: 48px;
       -webkit-tap-highlight-color: transparent;