@vaadin/grid 24.0.0-alpha1 → 24.0.0-alpha11

package/all-imports.d.ts

@@ -0,0 +1,10 @@
+export * from './vaadin-grid-column-group.js';
+export * from './vaadin-grid-column.js';
+export * from './vaadin-grid-filter.js';
+export * from './vaadin-grid-filter-column.js';
+export * from './vaadin-grid-selection-column.js';
+export * from './vaadin-grid-sorter.js';
+export * from './vaadin-grid-sort-column.js';
+export * from './vaadin-grid-tree-column.js';
+export * from './vaadin-grid-tree-toggle.js';
+export * from './vaadin-grid.js';

package/all-imports.js

@@ -1 +1,12 @@
 import './theme/lumo/all-imports.js';
+
+export * from './vaadin-grid-column-group.js';
+export * from './vaadin-grid-column.js';
+export * from './vaadin-grid-filter.js';
+export * from './vaadin-grid-filter-column.js';
+export * from './vaadin-grid-selection-column.js';
+export * from './vaadin-grid-sorter.js';
+export * from './vaadin-grid-sort-column.js';
+export * from './vaadin-grid-tree-column.js';
+export * from './vaadin-grid-tree-toggle.js';
+export * from './vaadin-grid.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -20,6 +20,7 @@
   "module": "vaadin-grid.js",
   "type": "module",
   "files": [
+    "all-imports.d.ts",
     "all-imports.js",
     "lit.d.ts",
     "lit.js",
@@ -45,17 +46,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/lit-renderer": "24.0.0-alpha1",
-    "@vaadin/text-field": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/checkbox": "24.0.0-alpha11",
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/lit-renderer": "24.0.0-alpha11",
+    "@vaadin/text-field": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "24.0.0-alpha1",
+    "@vaadin/polymer-legacy-adapter": "24.0.0-alpha11",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
@@ -64,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

package/src/all-imports.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid.js';

package/src/array-data-provider.js

@@ -28,7 +28,7 @@ function checkPaths(arrayToCheck, action, items) {
       return;
     }
 
-    const parentProperty = path.replace(/\.[^.]*$/, ''); // A.b.c -> a.b
+    const parentProperty = path.replace(/\.[^.]*$/u, ''); // A.b.c -> a.b
     if (get(parentProperty, items[0]) === undefined) {
       console.warn(`Path "${path}" used for ${action} does not exist in all of the items, ${action} is disabled.`);
       result = false;

package/src/lit/column-renderer-directives.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* eslint-disable max-classes-per-file */

package/src/lit/column-renderer-directives.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* eslint-disable max-classes-per-file */

package/src/lit/renderer-directives.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { TemplateResult } from 'lit';

package/src/lit/renderer-directives.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { directive } from 'lit/directive.js';

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

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 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.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -65,7 +65,7 @@ export const ActiveItemMixin = (superClass) =>
 
       const activeElement = this.getRootNode().activeElement;
       const cellContentHasFocus = cellContent.contains(activeElement);
-      if (!cellContentHasFocus && !this._isFocusable(e.target)) {
+      if (!cellContentHasFocus && !this._isFocusable(e.target) && !(e.target instanceof HTMLLabelElement)) {
         this.dispatchEvent(
           new CustomEvent('cell-activate', {
             detail: {
@@ -109,10 +109,15 @@ export const isFocusable = (target) => {
   }
   const focusables = Array.from(
     target.parentNode.querySelectorAll(
-      '[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]',
+      '[tabindex], button, input, select, textarea, object, iframe, 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;
+  return (
+    !target.disabled && isFocusableElement && target.offsetParent && getComputedStyle(target).visibility !== 'hidden'
+  );
 };

package/src/vaadin-grid-array-data-provider-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { createArrayDataProvider } from './array-data-provider.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -126,28 +126,28 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       this._preventHiddenSynchronization = false;
     }
 
-    if (/flexGrow|width|hidden|_childColumns/.test(path)) {
+    if (/flexGrow|width|hidden|_childColumns/u.test(path)) {
       this._updateFlexAndWidth();
     }
 
-    if (path === 'frozen') {
-      // Don’t unfreeze the frozen group because of a non-frozen child
-      this.frozen = this.frozen || value;
+    // Don’t unfreeze the frozen group because of a non-frozen child
+    if (path === 'frozen' && !this.frozen) {
+      this.frozen = value;
     }
 
-    if (path === 'lastFrozen') {
-      // Don’t unfreeze the frozen group because of a non-frozen child
-      this._lastFrozen = this._lastFrozen || value;
+    // Don’t unfreeze the frozen group because of a non-frozen child
+    if (path === 'lastFrozen' && !this._lastFrozen) {
+      this._lastFrozen = value;
     }
 
-    if (path === 'frozenToEnd') {
-      // Don’t unfreeze the frozen group because of a non-frozen child
-      this.frozenToEnd = this.frozenToEnd || value;
+    // Don’t unfreeze the frozen group because of a non-frozen child
+    if (path === 'frozenToEnd' && !this.frozenToEnd) {
+      this.frozenToEnd = value;
     }
 
-    if (path === 'firstFrozenToEnd') {
-      // Don’t unfreeze the frozen group because of a non-frozen child
-      this._firstFrozenToEnd = this._firstFrozenToEnd || value;
+    // Don’t unfreeze the frozen group because of a non-frozen child
+    if (path === 'firstFrozenToEnd' && !this._firstFrozenToEnd) {
+      this._firstFrozenToEnd = value;
     }
   }
 
@@ -169,7 +169,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       // [1110] | [1120] | [1210] | [1220]
 
       // Trailing zeros are counted so we know the level on which we're working on.
-      const trailingZeros = /(0+)$/.exec(order).pop().length;
+      const trailingZeros = /(0+)$/u.exec(order).pop().length;
 
       // In an unlikely situation where a group has more than 9 child columns,
       // the child scope must have 1 digit less...
@@ -247,7 +247,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   __scheduleAutoFreezeWarning(columns, frozenProp) {
     if (this._grid) {
       // Derive the attribute name from the property name
-      const frozenAttr = frozenProp.replace(/([A-Z])/g, '-$1').toLowerCase();
+      const frozenAttr = frozenProp.replace(/([A-Z])/gu, '-$1').toLowerCase();
 
       // Check if all the columns have the same frozen value
       const firstColumnFrozen = columns[0][frozenProp] || columns[0].hasAttribute(frozenAttr);
@@ -394,7 +394,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
    * @protected
    */
   _isColumnElement(node) {
-    return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/.test(node.localName);
+    return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/u.test(node.localName);
   }
 }
 

package/src/vaadin-grid-column-reordering-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,10 +1,10 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * 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
@@ -224,9 +224,7 @@ export const ColumnReorderingMixin = (superClass) =>
      * @return {HTMLElement | undefined}
      * @protected
      */
-    _cellFromPoint(x, y) {
-      x = x || 0;
-      y = y || 0;
+    _cellFromPoint(x = 0, y = 0) {
       if (!this._draggedColumn) {
         this.$.scroller.toggleAttribute('no-content-pointer-events', true);
       }
@@ -304,11 +302,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/u.test(sibling.localName) && this._isSwapAllowed(sibling, column)) {
           sibling._reorderStatus = status;
-        });
+        }
+      });
     }
 
     /** @protected */
@@ -374,7 +372,7 @@ export const ColumnReorderingMixin = (superClass) =>
      */
     _swapColumnOrders(column1, column2) {
       [column1._order, column2._order] = [column2._order, column1._order];
-      this._updateFrozenColumn();
+      this._debounceUpdateFrozenColumn();
       this._updateFirstAndLastColumn();
     }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * 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';
@@ -50,6 +50,7 @@ export const ColumnResizingMixin = (superClass) =>
             .pop();
         }
 
+        const isRTL = this.__isRTL;
         const eventX = e.detail.x;
         const columnRowCells = Array.from(this.$.header.querySelectorAll('[part~="row"]:last-child [part~="cell"]'));
         const targetCell = columnRowCells.find((cell) => cell._column === column);
@@ -72,9 +73,9 @@ export const ColumnResizingMixin = (superClass) =>
 
           // For cells frozen to end, resize handle is flipped horizontally.
           if (targetCell.hasAttribute('frozen-to-end')) {
-            maxWidth = cellWidth + (this.__isRTL ? eventX - cellRect.right : cellRect.left - eventX);
+            maxWidth = cellWidth + (isRTL ? eventX - cellRect.right : cellRect.left - eventX);
           } else {
-            maxWidth = cellWidth + (this.__isRTL ? cellRect.left - eventX : eventX - cellRect.right);
+            maxWidth = cellWidth + (isRTL ? cellRect.left - eventX : eventX - cellRect.right);
           }
 
           column.width = `${Math.max(minWidth, maxWidth)}px`;
@@ -95,9 +96,9 @@ export const ColumnResizingMixin = (superClass) =>
         // When handle moves below the cell frozen to end, scroll into view.
         if (cellFrozenToEnd && this.$.table.scrollWidth > this.$.table.offsetWidth) {
           const frozenRect = cellFrozenToEnd.getBoundingClientRect();
-          const offset = eventX - (this.__isRTL ? frozenRect.right : frozenRect.left);
+          const offset = eventX - (isRTL ? frozenRect.right : frozenRect.left);
 
-          if ((this.__isRTL && offset <= 0) || (!this.__isRTL && offset >= 0)) {
+          if ((isRTL && offset <= 0) || (!isRTL && offset >= 0)) {
             this.$.table.scrollLeft += offset;
           }
         }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-column.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { PolymerElement } from '@polymer/polymer/polymer-element.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
@@ -215,6 +216,30 @@ export const ColumnBaseMixin = (superClass) =>
       ];
     }
 
+    /**
+     * @return {!Grid | undefined}
+     * @protected
+     */
+    get _grid() {
+      if (!this._gridValue) {
+        this._gridValue = this._findHostGrid();
+      }
+      return this._gridValue;
+    }
+
+    /**
+     * @return {!Array<!HTMLElement>}
+     * @protected
+     */
+    get _allCells() {
+      return []
+        .concat(this._cells || [])
+        .concat(this._emptyCells || [])
+        .concat(this._headerCell)
+        .concat(this._footerCell)
+        .filter((cell) => cell);
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
@@ -270,36 +295,12 @@ export const ColumnBaseMixin = (superClass) =>
       // eslint-disable-next-line @typescript-eslint/no-this-alias, consistent-this
       let el = this;
       // Custom elements extending grid must have a specific localName
-      while (el && !/^vaadin.*grid(-pro)?$/.test(el.localName)) {
+      while (el && !/^vaadin.*grid(-pro)?$/u.test(el.localName)) {
         el = el.assignedSlot ? el.assignedSlot.parentNode : el.parentNode;
       }
       return el || undefined;
     }
 
-    /**
-     * @return {!Grid | undefined}
-     * @protected
-     */
-    get _grid() {
-      if (!this._gridValue) {
-        this._gridValue = this._findHostGrid();
-      }
-      return this._gridValue;
-    }
-
-    /**
-     * @return {!Array<!HTMLElement>}
-     * @protected
-     */
-    get _allCells() {
-      return []
-        .concat(this._cells || [])
-        .concat(this._emptyCells || [])
-        .concat(this._headerCell)
-        .concat(this._footerCell)
-        .filter((cell) => cell);
-    }
-
     /** @protected */
     _renderHeaderAndFooter() {
       this._renderHeaderCellContent(this._headerRenderer, this._headerCell);
@@ -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) {
@@ -400,15 +406,23 @@ export const ColumnBaseMixin = (superClass) =>
     _generateHeader(path) {
       return path
         .substr(path.lastIndexOf('.') + 1)
-        .replace(/([A-Z])/g, '-$1')
+        .replace(/([A-Z])/gu, '-$1')
         .toLowerCase()
-        .replace(/-/g, ' ')
-        .replace(/^./, (match) => match.toUpperCase());
+        .replace(/-/gu, ' ')
+        .replace(/^./u, (match) => match.toUpperCase());
     }
 
     /** @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 */
@@ -490,8 +504,8 @@ export const ColumnBaseMixin = (superClass) =>
           },
         );
 
-        if (this._grid._updateFrozenColumn) {
-          this._grid._updateFrozenColumn();
+        if (this._grid._debounceUpdateFrozenColumn) {
+          this._grid._debounceUpdateFrozenColumn();
         }
 
         if (this._grid._resetKeyboardNavigation) {
@@ -571,8 +585,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
-      if (this._grid) {
-        this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);
+      if (this._grid && headerCell.parentElement) {
+        this._grid.__debounceUpdateHeaderFooterRowVisibility(headerCell.parentElement);
       }
     }
 
@@ -612,8 +626,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(footerRenderer, [footerCell]);
-      if (this._grid) {
-        this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);
+      if (this._grid && footerCell.parentElement) {
+        this._grid.__debounceUpdateHeaderFooterRowVisibility(footerCell.parentElement);
       }
     }
 

package/src/vaadin-grid-data-provider-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';