@vaadin/grid 25.3.0-alpha7 → 25.3.0-alpha9

package/src/vaadin-grid-column-auto-width-mixin.js

@@ -214,11 +214,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
           }
         });
 
-      if (autoWidth) {
-        this.$.scroller.setAttribute('measuring-auto-width', '');
-      } else {
-        this.$.scroller.removeAttribute('measuring-auto-width');
-      }
+      this.$.scroller.toggleAttribute('measuring-auto-width', autoWidth);
     }
 
     /**
@@ -311,10 +307,9 @@ export const ColumnAutoWidthMixin = (superClass) =>
       // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
       const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
 
-      const debouncingHiddenChanged = this._debouncerHiddenChanged && this._debouncerHiddenChanged.isActive();
+      const debouncingHiddenChanged = this._debouncerHiddenChanged?.isActive();
 
-      const debouncingUpdateFrozenColumn =
-        this.__debounceUpdateFrozenColumn && this.__debounceUpdateFrozenColumn.isActive();
+      const debouncingUpdateFrozenColumn = this.__debounceUpdateFrozenColumn?.isActive();
 
       // When using a percentage-based height, the grid's effective height may
       // be 0 until the resize observer in grid-mixin calculates a min-height.

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

@@ -57,7 +57,7 @@ export const GridColumnGroupMixin = (superClass) =>
         '_groupFrozenChanged(frozen, _rootColumns)',
         '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
         '_groupHiddenChanged(hidden)',
-        '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
+        '_colSpanChanged(_colSpan)',
         '_groupOrderChanged(_order, _rootColumns)',
         '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
         '_groupResizableChanged(resizable, _rootColumns)',
@@ -74,9 +74,7 @@ export const GridColumnGroupMixin = (superClass) =>
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      if (this._observer) {
-        this._observer.disconnect();
-      }
+      this._observer?.disconnect();
     }
 
     /**
@@ -307,19 +305,8 @@ export const GridColumnGroupMixin = (superClass) =>
     }
 
     /** @private */
-    _colSpanChanged(colSpan, headerCell, footerCell) {
-      if (headerCell) {
-        headerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(headerCell, colSpan);
-        }
-      }
-      if (footerCell) {
-        footerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(footerCell, colSpan);
-        }
-      }
+    _colSpanChanged() {
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /**
@@ -344,9 +331,7 @@ export const GridColumnGroupMixin = (superClass) =>
         this._preventHiddenSynchronization = false;
 
         // Update the column tree
-        if (this._grid && this._grid._debounceUpdateColumnTree) {
-          this._grid._debounceUpdateColumnTree();
-        }
+        this._grid?._debounceUpdateColumnTree?.();
       });
       this._observer.flush();
     }

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

@@ -12,7 +12,7 @@ export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column
   model: GridItemModel<TItem>,
 ) => void;
 
-export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
+export type GridColumnTextAlign = 'center' | 'end' | 'left' | 'right' | 'start' | null;
 
 export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
   root: HTMLElement,
@@ -71,8 +71,8 @@ export declare class ColumnBaseMixinClass<TItem, Column extends ColumnBaseMixinC
 
   /**
    * Aligns the columns cell content horizontally.
-   * Supported values: "start", "center" and "end".
-   * @attr {start|center|end} text-align
+   *
+   * @attr {start|center|end|left|right} text-align
    */
   textAlign: GridColumnTextAlign | null | undefined;
 

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

@@ -93,8 +93,8 @@ export const ColumnBaseMixin = (superClass) =>
 
         /**
          * Aligns the columns cell content horizontally.
-         * Supported values: "start", "center" and "end".
-         * @attr {start|center|end} text-align
+         *
+         * @attr {start|center|end|left|right} text-align
          */
         textAlign: {
           type: String,
@@ -261,11 +261,11 @@ export const ColumnBaseMixin = (superClass) =>
 
     static get observers() {
       return [
-        '_widthChanged(width, _headerCell, _footerCell, _cells)',
+        '_widthChanged(width, _cells)',
         '_frozenChanged(frozen, _headerCell, _footerCell, _cells)',
         '_frozenToEndChanged(frozenToEnd, _headerCell, _footerCell, _cells)',
-        '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells)',
-        '_textAlignChanged(textAlign, _cells, _headerCell, _footerCell)',
+        '_flexGrowChanged(flexGrow, _cells)',
+        '_textAlignChanged(textAlign, _cells)',
         '_lastFrozenChanged(_lastFrozen)',
         '_firstFrozenToEndChanged(_firstFrozenToEnd)',
         '_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, path)',
@@ -275,7 +275,7 @@ export const ColumnBaseMixin = (superClass) =>
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells)',
         '_rowHeaderChanged(rowHeader, _cells)',
-        '__headerFooterPartNameChanged(_headerCell, _footerCell, headerPartName, footerPartName)',
+        '__headerFooterPartNameChanged(headerPartName, footerPartName)',
       ];
     }
 
@@ -347,9 +347,7 @@ export const ColumnBaseMixin = (superClass) =>
         }
 
         this._cells?.forEach((cell) => {
-          if (cell._content.parentNode) {
-            cell._content.parentNode.removeChild(cell._content);
-          }
+          cell._content.parentNode?.removeChild(cell._content);
         });
       });
 
@@ -378,46 +376,40 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _flexGrowChanged(flexGrow) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('flexGrow');
-      }
+      this.parentElement?._columnPropChanged?.('flexGrow');
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.flexGrow = flexGrow;
       });
     }
 
     /** @private */
     _widthChanged(width) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('width');
-      }
+      this.parentElement?._columnPropChanged?.('width');
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.width = width;
       });
     }
 
     /** @private */
     _frozenChanged(frozen) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('frozen', frozen);
-      }
+      this.parentElement?._columnPropChanged?.('frozen', frozen);
 
       this._allCells.forEach((cell) => {
         updateCellState(cell, 'frozen', frozen);
       });
 
-      if (this._grid && this._grid._frozenCellsChanged) {
-        this._grid._frozenCellsChanged();
-      }
+      this._grid?._frozenCellsChanged?.();
     }
 
     /** @private */
     _frozenToEndChanged(frozenToEnd) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
-      }
+      this.parentElement?._columnPropChanged?.('frozenToEnd', frozenToEnd);
 
       this._allCells.forEach((cell) => {
         // Skip sizer cells to keep correct scrollWidth.
@@ -428,9 +420,7 @@ export const ColumnBaseMixin = (superClass) =>
         updateCellState(cell, 'frozen-to-end', frozenToEnd);
       });
 
-      if (this._grid && this._grid._frozenCellsChanged) {
-        this._grid._frozenCellsChanged();
-      }
+      this._grid?._frozenCellsChanged?.();
     }
 
     /** @private */
@@ -462,11 +452,7 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _rowHeaderChanged(rowHeader, cells) {
-      if (!cells) {
-        return;
-      }
-
-      cells.forEach((cell) => {
+      cells?.forEach((cell) => {
         cell.setAttribute('role', rowHeader ? 'rowheader' : 'gridcell');
       });
     }
@@ -500,59 +486,46 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _resizableChanged(resizable) {
-      if (resizable === undefined || this._grid === undefined) {
+      if (resizable === undefined) {
         return;
       }
 
-      this._grid.__scheduleRenderHeaderFooter?.();
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @private */
     _textAlignChanged(textAlign) {
-      if (textAlign === undefined || this._grid === undefined) {
-        return;
-      }
-      if (['start', 'end', 'center'].indexOf(textAlign) === -1) {
-        console.warn('textAlign can only be set as "start", "end" or "center"');
+      if (textAlign === undefined) {
         return;
       }
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell._content.style.textAlign = textAlign;
       });
     }
 
     /** @private */
     _hiddenChanged(hidden) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('hidden', hidden);
-      }
+      this.parentElement?._columnPropChanged?.('hidden', hidden);
 
       if (!!hidden !== !!this._previousHidden && this._grid) {
         if (hidden === true) {
           this._cells?.forEach((cell) => {
-            if (cell._content.parentNode) {
-              cell._content.parentNode.removeChild(cell._content);
-            }
+            cell._content.parentNode?.removeChild(cell._content);
           });
         }
         this._grid._debouncerHiddenChanged = Debouncer.debounce(
           this._grid._debouncerHiddenChanged,
           animationFrame,
           () => {
-            if (this._grid && this._grid._renderColumnTree) {
-              this._grid._renderColumnTree(this._grid._columnTree);
-            }
+            this._grid?._renderColumnTree?.(this._grid._columnTree);
           },
         );
 
-        if (this._grid._debounceUpdateFrozenColumn) {
-          this._grid._debounceUpdateFrozenColumn();
-        }
-
-        if (this._grid._resetKeyboardNavigation) {
-          this._grid._resetKeyboardNavigation();
-        }
+        this._grid._debounceUpdateFrozenColumn?.();
+        this._grid._resetKeyboardNavigation?.();
       }
       this._previousHidden = hidden;
     }
@@ -632,7 +605,7 @@ export const ColumnBaseMixin = (superClass) =>
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
 
-      this._grid?.__scheduleRenderHeaderFooter();
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */
@@ -641,19 +614,8 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __headerFooterPartNameChanged(headerCell, footerCell, headerPartName, footerPartName) {
-      [
-        { cell: headerCell, partName: headerPartName },
-        { cell: footerCell, partName: footerPartName },
-      ].forEach(({ cell, partName }) => {
-        if (cell) {
-          const customParts = cell.__customParts || [];
-          cell.part.remove(...customParts);
-
-          cell.__customParts = partName ? partName.trim().split(' ') : [];
-          cell.part.add(...cell.__customParts);
-        }
-      });
+    __headerFooterPartNameChanged() {
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /**
@@ -688,7 +650,7 @@ export const ColumnBaseMixin = (superClass) =>
 
       this.__renderCellsContent(footerRenderer, [footerCell]);
 
-      this._grid?.__scheduleRenderHeaderFooter();
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */

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

@@ -457,9 +457,12 @@ export const ColumnReorderingMixin = (superClass) =>
         }
       });
 
+      [...this.$.items.children, this.$.sizer].forEach((row) => {
+        this._updateFirstAndLastColumnForRow(row);
+      });
+
       this.__scheduleRenderHeaderFooter();
       this._debounceUpdateFrozenColumn();
-      this._updateFirstAndLastColumn();
     }
 
     /**

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

@@ -98,6 +98,10 @@ export const ColumnResizingMixin = (superClass) =>
           cell._column.flexGrow = 0;
         });
 
+        // Flush the scheduled header/footer render to apply the new widths
+        // to the cells before measuring the layout below
+        this.__renderHeaderFooterDebouncer?.flush();
+
         const cellFrozenToEnd = this._frozenToEndCells[0];
 
         // When handle moves below the cell frozen to end, scroll into view.

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

@@ -214,7 +214,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _isExpanded(item) {
-      return this.__expandedKeys && this.__expandedKeys.has(this.getItemId(item));
+      return this.__expandedKeys?.has(this.getItemId(item));
     }
 
     /**

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import {
   getBodyRowCells,
   iterateChildren,
@@ -494,11 +495,7 @@ export const DragAndDropMixin = (superClass) =>
       const draggableAttribute = isChrome ? 'draggable-source' : 'draggable';
 
       iterateRowCells(row, (cell) => {
-        if (dragDisabled) {
-          cell._content.removeAttribute(draggableAttribute);
-        } else {
-          cell._content.setAttribute(draggableAttribute, true);
-        }
+        setOrRemoveAttribute(cell._content, draggableAttribute, !dragDisabled);
       });
 
       updateBooleanRowStates(row, {

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

@@ -143,11 +143,6 @@ export const DynamicColumnsMixin = (superClass) =>
       });
     }
 
-    /** @protected */
-    _updateFirstAndLastColumn() {
-      Array.from(this.shadowRoot.querySelectorAll('tr')).forEach((row) => this._updateFirstAndLastColumnForRow(row));
-    }
-
     /**
      * @param {!HTMLElement} row
      * @protected

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

@@ -37,7 +37,7 @@ export const GridFilterColumnMixin = (superClass) =>
      */
     _defaultHeaderRenderer(root, _column) {
       let filter = root.firstElementChild;
-      let textField = filter ? filter.firstElementChild : undefined;
+      let textField = filter?.firstElementChild;
 
       if (!filter) {
         filter = document.createElement('vaadin-grid-filter');

package/src/vaadin-grid-filter-element-mixin.js

@@ -71,8 +71,6 @@ export const GridFilterElementMixin = (superClass) =>
     }
 
     focus() {
-      if (this._textField) {
-        this._textField.focus();
-      }
+      this._textField?.focus();
     }
   };

package/src/vaadin-grid-filter.js

@@ -37,6 +37,7 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-grid-filter
  * @extends HTMLElement
  */