@vaadin/grid 24.0.0-alpha4 → 24.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.0.0-alpha4",
+  "version": "24.0.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -46,17 +46,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "24.0.0-alpha4",
-    "@vaadin/component-base": "24.0.0-alpha4",
-    "@vaadin/lit-renderer": "24.0.0-alpha4",
-    "@vaadin/text-field": "24.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha4"
+    "@vaadin/checkbox": "24.0.0-alpha5",
+    "@vaadin/component-base": "24.0.0-alpha5",
+    "@vaadin/lit-renderer": "24.0.0-alpha5",
+    "@vaadin/text-field": "24.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha5",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "24.0.0-alpha4",
+    "@vaadin/polymer-legacy-adapter": "24.0.0-alpha5",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "66be46e82c4d0a673859fbc9bdb1581dd89f360c"
+  "gitHead": "fc0b1721eda9e39cb289b239e440fc9e29573a31"
 }

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

@@ -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 { iterateChildren } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -42,16 +43,16 @@ export const A11yMixin = (superClass) =>
 
     /** @protected */
     _a11yUpdateHeaderRows() {
-      Array.from(this.$.header.children).forEach((headerRow, index) =>
-        headerRow.setAttribute('aria-rowindex', index + 1),
-      );
+      iterateChildren(this.$.header, (headerRow, index) => {
+        headerRow.setAttribute('aria-rowindex', index + 1);
+      });
     }
 
     /** @protected */
     _a11yUpdateFooterRows() {
-      Array.from(this.$.footer.children).forEach((footerRow, index) =>
-        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1),
-      );
+      iterateChildren(this.$.footer, (footerRow, index) => {
+        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1);
+      });
     }
 
     /**
@@ -71,7 +72,9 @@ export const A11yMixin = (superClass) =>
     _a11yUpdateRowSelected(row, selected) {
       // Jaws reads selection only for rows, NVDA only for cells
       row.setAttribute('aria-selected', Boolean(selected));
-      Array.from(row.children).forEach((cell) => cell.setAttribute('aria-selected', Boolean(selected)));
+      iterateChildren(row, (cell) => {
+        cell.setAttribute('aria-selected', Boolean(selected));
+      });
     }
 
     /**
@@ -108,7 +111,7 @@ export const A11yMixin = (superClass) =>
      * @protected
      */
     _a11ySetRowDetailsCell(row, detailsCell) {
-      Array.from(row.children).forEach((cell) => {
+      iterateChildren(row, (cell) => {
         if (cell !== detailsCell) {
           cell.setAttribute('aria-controls', detailsCell.id);
         }

package/src/vaadin-grid-active-item-mixin.js

@@ -111,7 +111,10 @@ export const isFocusable = (target) => {
     target.parentNode.querySelectorAll(
       '[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]',
     ),
-  ).filter((element) => element.getAttribute('part') !== 'cell body-cell');
+  ).filter((element) => {
+    const part = element.getAttribute('part');
+    return !(part && part.includes('body-cell'));
+  });
 
   const isFocusableElement = focusables.includes(target);
   return !target.disabled && isFocusableElement;

package/src/vaadin-grid-column-reordering-mixin.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { addListener } from '@vaadin/component-base/src/gestures.js';
-import { updateColumnOrders } from './vaadin-grid-helpers.js';
+import { iterateChildren, updateColumnOrders } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -304,11 +304,11 @@ export const ColumnReorderingMixin = (superClass) =>
      * @protected
      */
     _setSiblingsReorderStatus(column, status) {
-      Array.from(column.parentNode.children)
-        .filter((child) => /column/.test(child.localName) && this._isSwapAllowed(child, column))
-        .forEach((sibling) => {
+      iterateChildren(column.parentNode, (sibling) => {
+        if (/column/.test(sibling.localName) && this._isSwapAllowed(sibling, column)) {
           sibling._reorderStatus = status;
-        });
+        }
+      });
     }
 
     /** @protected */

package/src/vaadin-grid-column.js

@@ -8,6 +8,7 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
+import { updateCellState } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -341,7 +342,9 @@ export const ColumnBaseMixin = (superClass) =>
         this.parentElement._columnPropChanged('frozen', frozen);
       }
 
-      this._allCells.forEach((cell) => cell.toggleAttribute('frozen', frozen));
+      this._allCells.forEach((cell) => {
+        updateCellState(cell, 'frozen', frozen);
+      });
 
       if (this._grid && this._grid._frozenCellsChanged) {
         this._grid._frozenCellsChanged();
@@ -359,7 +362,8 @@ export const ColumnBaseMixin = (superClass) =>
         if (this._grid && cell.parentElement === this._grid.$.sizer) {
           return;
         }
-        cell.toggleAttribute('frozen-to-end', frozenToEnd);
+
+        updateCellState(cell, 'frozen-to-end', frozenToEnd);
       });
 
       if (this._grid && this._grid._frozenCellsChanged) {
@@ -369,7 +373,9 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _lastFrozenChanged(lastFrozen) {
-      this._allCells.forEach((cell) => cell.toggleAttribute('last-frozen', lastFrozen));
+      this._allCells.forEach((cell) => {
+        updateCellState(cell, 'last-frozen', lastFrozen);
+      });
 
       if (this.parentElement && this.parentElement._columnPropChanged) {
         this.parentElement._lastFrozen = lastFrozen;
@@ -384,7 +390,7 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        cell.toggleAttribute('first-frozen-to-end', firstFrozenToEnd);
+        updateCellState(cell, 'first-frozen-to-end', firstFrozenToEnd);
       });
 
       if (this.parentElement && this.parentElement._columnPropChanged) {
@@ -408,7 +414,15 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _reorderStatusChanged(reorderStatus) {
-      this._allCells.forEach((cell) => cell.setAttribute('reorder-status', reorderStatus));
+      const prevStatus = this.__previousReorderStatus;
+      const oldPart = prevStatus ? `reorder-${prevStatus}-cell` : '';
+      const newPart = `reorder-${reorderStatus}-cell`;
+
+      this._allCells.forEach((cell) => {
+        updateCellState(cell, 'reorder-status', reorderStatus, newPart, oldPart);
+      });
+
+      this.__previousReorderStatus = reorderStatus;
     }
 
     /** @private */

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

@@ -5,6 +5,7 @@
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { getBodyRowCells, iterateChildren, updateCellsPart, updateState } from './vaadin-grid-helpers.js';
 
 /**
  * @private
@@ -260,17 +261,32 @@ export const DataProviderMixin = (superClass) =>
       const { cache, scaledIndex } = this._cache.getCacheAndIndex(index);
       const item = cache.items[scaledIndex];
       if (item) {
-        el.toggleAttribute('loading', false);
+        this.__updateLoading(el, false);
         this._updateItem(el, item);
         if (this._isExpanded(item)) {
           cache.ensureSubCacheForScaledIndex(scaledIndex);
         }
       } else {
-        el.toggleAttribute('loading', true);
+        this.__updateLoading(el, true);
         this._loadPage(this._getPageForIndex(scaledIndex), cache);
       }
     }
 
+    /**
+     * @param {!HTMLElement} row
+     * @param {boolean} loading
+     * @private
+     */
+    __updateLoading(row, loading) {
+      const cells = getBodyRowCells(row);
+
+      // Row state attribute
+      updateState(row, 'loading', loading);
+
+      // Cells part attribute
+      updateCellsPart(cells, 'loading-row-cell', loading);
+    }
+
     /**
      * Returns a value that identifies the item. Uses `itemIdPath` if available.
      * Can be customized by overriding.
@@ -389,14 +405,14 @@ export const DataProviderMixin = (superClass) =>
             this._cache.updateSize();
             this._effectiveSize = this._cache.effectiveSize;
 
-            Array.from(this.$.items.children)
-              .filter((row) => !row.hidden)
-              .forEach((row) => {
+            iterateChildren(this.$.items, (row) => {
+              if (!row.hidden) {
                 const cachedItem = this._cache.getItemForIndex(row.index);
                 if (cachedItem) {
                   this._getItem(row.index, row);
                 }
-              });
+              }
+            });
 
             this.__scrollToPendingIndex();
           });
@@ -510,6 +526,7 @@ export const DataProviderMixin = (superClass) =>
       }
     }
 
+    /** @private */
     __scrollToPendingIndex() {
       if (this.__pendingScrollToIndex && this.$.items.children.length) {
         const index = this.__pendingScrollToIndex;

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -3,6 +3,8 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { iterateChildren, updateRowStates } from './vaadin-grid-helpers.js';
+
 const DropMode = {
   BETWEEN: 'between',
   ON_TOP: 'on-top',
@@ -154,12 +156,12 @@ export const DragAndDropMixin = (superClass) =>
         // Set the default transfer data
         e.dataTransfer.setData('text', this.__formatDefaultTransferData(rows));
 
-        this._updateRowState(row, 'dragstart', rows.length > 1 ? `${rows.length}` : '');
+        updateRowStates(row, { dragstart: rows.length > 1 ? `${rows.length}` : '' });
         this.style.setProperty('--_grid-drag-start-x', `${e.clientX - rowRect.left + 20}px`);
         this.style.setProperty('--_grid-drag-start-y', `${e.clientY - rowRect.top + 10}px`);
 
         requestAnimationFrame(() => {
-          this._updateRowState(row, 'dragstart', null);
+          updateRowStates(row, { dragstart: null });
           this.style.setProperty('--_grid-drag-start-x', '');
           this.style.setProperty('--_grid-drag-start-y', '');
         });
@@ -253,7 +255,7 @@ export const DragAndDropMixin = (superClass) =>
         } else if (row) {
           this._dragOverItem = row._item;
           if (row.getAttribute('dragover') !== this._dropLocation) {
-            this._updateRowState(row, 'dragover', this._dropLocation, true);
+            updateRowStates(row, { dragover: this._dropLocation }, true);
           }
         } else {
           this._clearDragStyles();
@@ -307,8 +309,8 @@ export const DragAndDropMixin = (superClass) =>
     /** @protected */
     _clearDragStyles() {
       this.removeAttribute('dragover');
-      Array.from(this.$.items.children).forEach((row) => {
-        this._updateRowState(row, 'dragover', null, true);
+      iterateChildren(this.$.items, (row) => {
+        updateRowStates(row, { dragover: null }, true);
       });
     }
 
@@ -371,11 +373,11 @@ export const DragAndDropMixin = (superClass) =>
      * the conditions change.
      */
     filterDragAndDrop() {
-      Array.from(this.$.items.children)
-        .filter((row) => !row.hidden)
-        .forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
+        if (!row.hidden) {
           this._filterDragAndDrop(row, this.__getRowModel(row));
-        });
+        }
+      });
     }
 
     /**
@@ -388,18 +390,18 @@ export const DragAndDropMixin = (superClass) =>
       const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
       const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
-      const draggableElements = Array.from(row.children).map((cell) => cell._content);
-
-      draggableElements.forEach((e) => {
+      iterateChildren(row, (cell) => {
         if (dragDisabled) {
-          e.removeAttribute('draggable');
+          cell._content.removeAttribute('draggable');
         } else {
-          e.setAttribute('draggable', true);
+          cell._content.setAttribute('draggable', true);
         }
       });
 
-      this._updateRowState(row, 'drag-disabled', !!dragDisabled);
-      this._updateRowState(row, 'drop-disabled', !!dropDisabled);
+      updateRowStates(row, {
+        'drag-disabled': !!dragDisabled,
+        'drop-disabled': !!dropDisabled,
+      });
     }
 
     /**

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -7,6 +7,7 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { updateCellState } from './vaadin-grid-helpers.js';
 
 function arrayEquals(arr1, arr2) {
   if (!arr1 || !arr2 || arr1.length !== arr2.length) {
@@ -160,8 +161,8 @@ export const DynamicColumnsMixin = (superClass) =>
           return a._column._order - b._column._order;
         })
         .forEach((cell, cellIndex, children) => {
-          cell.toggleAttribute('first-column', cellIndex === 0);
-          cell.toggleAttribute('last-column', cellIndex === children.length - 1);
+          updateCellState(cell, 'first-column', cellIndex === 0);
+          updateCellState(cell, 'last-column', cellIndex === children.length - 1);
         });
     }
 

package/src/vaadin-grid-helpers.js

@@ -3,6 +3,23 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+
+/**
+ * @param {HTMLTableRowElement} row the table row
+ * @return {HTMLTableCellElement[]} array of cells
+ */
+export function getBodyRowCells(row) {
+  return Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'));
+}
+
+/**
+ * @param {HTMLElement} container the DOM element with children
+ * @param {Function} callback function to call on each child
+ */
+export function iterateChildren(container, callback) {
+  [...container.children].forEach(callback);
+}
 
 /**
  * @param {Array<Object>} columns array of columns to be modified
@@ -21,3 +38,89 @@ export function updateColumnOrders(columns, scope, baseOrder) {
     c += 1;
   });
 }
+
+/**
+ * @param {!HTMLElement} element
+ * @param {string} attribute
+ * @param {boolean | string | null | undefined} value
+ */
+export function updateState(element, attribute, value) {
+  switch (typeof value) {
+    case 'boolean':
+      element.toggleAttribute(attribute, value);
+      break;
+    case 'string':
+      element.setAttribute(attribute, value);
+      break;
+    default:
+      // Value set to null / undefined
+      element.removeAttribute(attribute);
+      break;
+  }
+}
+
+/**
+ * @param {!HTMLElement} element
+ * @param {boolean | string | null | undefined} value
+ * @param {string} part
+ */
+export function updatePart(element, value, part) {
+  if (value || value === '') {
+    addValueToAttribute(element, 'part', part);
+  } else {
+    removeValueFromAttribute(element, 'part', part);
+  }
+}
+
+/**
+ * @param {HTMLTableCellElement[]} cells
+ * @param {string} part
+ * @param {boolean | string | null | undefined} value
+ */
+export function updateCellsPart(cells, part, value) {
+  cells.forEach((cell) => {
+    updatePart(cell, value, part);
+  });
+}
+
+/**
+ * @param {!HTMLElement} row
+ * @param {Object} states
+ * @param {boolean} appendValue
+ */
+export function updateRowStates(row, states, appendValue) {
+  const cells = getBodyRowCells(row);
+
+  Object.entries(states).forEach(([state, value]) => {
+    // Row state attribute
+    updateState(row, state, value);
+
+    const rowPart = appendValue ? `${state}-${value}-row` : `${state}-row`;
+
+    // Row part attribute
+    updatePart(row, value, rowPart);
+
+    // Cells part attribute
+    updateCellsPart(cells, `${rowPart}-cell`, value);
+  });
+}
+
+/**
+ * @param {!HTMLElement} cell
+ * @param {string} attribute
+ * @param {boolean | string | null | undefined} value
+ * @param {string} part
+ * @param {?string} oldPart
+ */
+export function updateCellState(cell, attribute, value, part, oldPart) {
+  // Toggle state attribute on the cell
+  updateState(cell, attribute, value);
+
+  // Remove old part from the attribute
+  if (oldPart) {
+    updatePart(cell, false, oldPart);
+  }
+
+  // Add new part to the cell attribute
+  updatePart(cell, value, part || `${attribute}-cell`);
+}

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

@@ -781,6 +781,11 @@ export const KeyboardNavigationMixin = (superClass) =>
     /** @private */
     _onContentFocusIn(e) {
       const { section, cell, row } = this._getGridEventLocation(e);
+
+      if (!cell && !this.__rowFocusMode) {
+        return;
+      }
+
       this._detectInteracting(e);
 
       if (section && (cell || row)) {

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

@@ -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 { iterateChildren } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -78,7 +79,7 @@ export const RowDetailsMixin = (superClass) =>
 
       if (this._columnTree) {
         // Only update the rows if the column tree has already been initialized
-        Array.from(this.$.items.children).forEach((row) => {
+        iterateChildren(this.$.items, (row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
             const isDetailsOpened = this._isDetailsOpened(row._item);
@@ -95,7 +96,7 @@ export const RowDetailsMixin = (superClass) =>
         return;
       }
 
-      [...this.$.items.children].forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
         // Re-renders the row to possibly close the previously opened details.
         if (row.hasAttribute('details-opened')) {
           this._updateItem(row, row._item);
@@ -162,7 +163,7 @@ export const RowDetailsMixin = (superClass) =>
 
     /** @protected */
     _updateDetailsCellHeights() {
-      [...this.$.items.children].forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
         this._updateDetailsCellHeight(row);
       });
     }

package/src/vaadin-grid-styles.js

@@ -248,6 +248,10 @@ registerStyles(
       transform: none;
     }
 
+    [first-frozen-to-end] {
+      margin-inline-start: auto;
+    }
+
     /* Hide resize handle if scrolled to end */
     :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
       display: none;

package/src/vaadin-grid-styling-mixin.d.ts

@@ -7,7 +7,12 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { GridItemModel } from './vaadin-grid.js';
 import type { GridColumn } from './vaadin-grid-column.js';
 
-export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
+export type GridCellPartNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
+
+/**
+ * @deprecated Use `GridPartCellGenerator` type and `cellPartNameGenerator` API instead.
+ */
+export type GridCellClassNameGenerator<TItem> = GridCellPartNameGenerator<TItem>;
 
 export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
@@ -29,14 +34,45 @@ export declare class StylingMixinClass<TItem> {
    *   - `model.expanded` Sublevel toggle state.
    *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
    *   - `model.selected` Selected state.
+   *
+   * @deprecated Use `cellPartNameGenerator` instead.
    */
   cellClassNameGenerator: GridCellClassNameGenerator<TItem> | null | undefined;
 
+  /**
+   * A function that allows generating CSS `part` names for grid cells in Shadow DOM based
+   * on their row and column, for styling from outside using the `::part()` selector.
+   *
+   * The return value should be the generated part name as a string, or multiple part names
+   * separated by whitespace characters.
+   *
+   * Receives two arguments:
+   * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
+   * - `model` The object with the properties related with
+   *   the rendered item, contains:
+   *   - `model.index` The index of the item.
+   *   - `model.item` The item.
+   *   - `model.expanded` Sublevel toggle state.
+   *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+   *   - `model.selected` Selected state.
+   */
+  cellPartNameGenerator: GridCellPartNameGenerator<TItem> | null | undefined;
+
   /**
    * Runs the `cellClassNameGenerator` for the visible cells.
    * If the generator depends on varying conditions, you need to
    * call this function manually in order to update the styles when
    * the conditions change.
+   *
+   * @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
    */
   generateCellClassNames(): void;
+
+  /**
+   * Runs the `cellPastNameGenerator` for the visible cells.
+   * If the generator depends on varying conditions, you need to
+   * call this function manually in order to update the styles when
+   * the conditions change.
+   */
+  generateCellPartNames(): void;
 }