@vaadin/grid 25.3.0-dev.1fa5a51482 → 25.3.0-rc1

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,
@@ -245,27 +245,16 @@ export const ColumnBaseMixin = (superClass) =>
           type: Function,
           computed: '_computeFooterRenderer(footerRenderer, __initialized)',
         },
-
-        /**
-         * An internal property that is mainly used by `vaadin-template-renderer`
-         * to identify grid column elements.
-         *
-         * @private
-         */
-        __gridColumnElement: {
-          type: Boolean,
-          value: true,
-        },
       };
     }
 
     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 +264,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 +336,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 +365,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 +409,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 +441,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 +475,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 +594,7 @@ export const ColumnBaseMixin = (superClass) =>
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
 
-      this._grid?.__scheduleRenderHeaderFooter();
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */
@@ -641,19 +603,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 +639,7 @@ export const ColumnBaseMixin = (superClass) =>
 
       this.__renderCellsContent(footerRenderer, [footerCell]);
 
-      this._grid?.__scheduleRenderHeaderFooter();
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */

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

@@ -116,7 +116,7 @@ export const ColumnReorderingMixin = (superClass) =>
           return;
         }
 
-        if (headerCell._content.contains(this.getRootNode().activeElement)) {
+        if (headerCell._content.matches(':focus-within')) {
           // Something was focused inside the cell
           return;
         }

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));
     }
 
     /**
@@ -429,7 +429,7 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     __scrollToPendingIndexes() {
-      if (this.__pendingScrollToIndexes && this.$.items.children.length) {
+      if (this.__pendingScrollToIndexes) {
         const indexes = this.__pendingScrollToIndexes;
         delete this.__pendingScrollToIndexes;
         this.scrollToIndex(...indexes);

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-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-header-footer-rendering-mixin.js

@@ -8,19 +8,20 @@ import { cache } from 'lit/directives/cache.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { microTask } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { partMap } from '@vaadin/component-base/src/directives/part-map.js';
 import { cellContent } from './directives/cell-content-directive.js';
 
-function isEmptyCell(column, level, columnTree) {
-  const isColumnRow = level === columnTree.length - 1;
-  return !isColumnRow && column.localName !== 'vaadin-grid-column-group';
+function isContentCell(column, level, columnTree) {
+  const isLastRow = level === columnTree.length - 1;
+  return isLastRow || column.localName === 'vaadin-grid-column-group';
 }
 
 function isHeaderRowVisible(columns, level, columnTree) {
   return columns.some((column) => {
-    if (column.hidden || isEmptyCell(column, level, columnTree)) {
+    if (column.hidden || !isContentCell(column, level, columnTree)) {
       return false;
     }
 
@@ -40,7 +41,7 @@ function isHeaderRowVisible(columns, level, columnTree) {
 
 function isFooterRowVisible(columns, level, columnTree) {
   return columns.some((column) => {
-    if (column.hidden || isEmptyCell(column, level, columnTree)) {
+    if (column.hidden || !isContentCell(column, level, columnTree)) {
       return false;
     }
 
@@ -48,6 +49,19 @@ function isFooterRowVisible(columns, level, columnTree) {
   });
 }
 
+/**
+ * Converts a whitespace separated list of custom part names
+ * into an object accepted by the `partMap` directive.
+ */
+function getCustomParts(partName) {
+  return Object.fromEntries(
+    (partName ?? '')
+      .split(' ')
+      .filter((name) => name !== '')
+      .map((name) => [name, true]),
+  );
+}
+
 /**
  * A mixin providing rendering of header and footer rows based on the column tree.
  */
@@ -76,7 +90,7 @@ export const HeaderFooterRenderingMixin = (superClass) =>
       this.#renderFooter(sortedColumnTree);
 
       this._resetKeyboardNavigation();
-      this.__a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
+      this.__a11yUpdateGridSize(this._flatSize, this._columnTree, this.__emptyState);
     }
 
     #renderHeader(columnTree) {
@@ -113,7 +127,7 @@ export const HeaderFooterRenderingMixin = (superClass) =>
           ${repeat(
             cells,
             ({ column }) => column._id,
-            ({ column, isFirstCell, isLastCell }) => {
+            ({ column, isFirstCell, isLastCell, isContentCell }) => {
               // `cache` keeps the cell and its rendered content when the
               // column gets hidden, so it can be restored as-is when the
               // column is shown again.
@@ -128,11 +142,17 @@ export const HeaderFooterRenderingMixin = (superClass) =>
                 'last-column-cell': isLastCell,
               };
 
+              const customCellParts = isContentCell ? getCustomParts(column.headerPartName) : {};
+
               return cache(html`
                 <th
                   role="columnheader"
-                  part="cell header-cell${partMap(cellParts)}"
+                  part="cell header-cell${partMap({ ...cellParts, ...customCellParts })}"
                   class="cell header-cell${classMap(cellParts)}"
+                  style="${styleMap({
+                    width: column.width,
+                    'flex-grow': column.flexGrow,
+                  })}"
                   ?first-column="${isFirstCell}"
                   ?last-column="${isLastCell}"
                   @keydown="${this.__onCellKeyDown}"
@@ -144,7 +164,9 @@ export const HeaderFooterRenderingMixin = (superClass) =>
                   tabindex="-1"
                   ._column=${column}
                 >
-                  ${cellContent(this, `vaadin-grid-header-cell-content-${level}-${column._id}`)}
+                  ${cellContent(this, `vaadin-grid-header-cell-content-${level}-${column._id}`, {
+                    textAlign: column.textAlign,
+                  })}
                   ${column.resizable ? html`<div part="resize-handle" class="resize-handle"></div>` : nothing}
                 </th>
               `);
@@ -188,7 +210,7 @@ export const HeaderFooterRenderingMixin = (superClass) =>
           ${repeat(
             cells,
             ({ column }) => column._id,
-            ({ column, isFirstCell, isLastCell }) => {
+            ({ column, isFirstCell, isLastCell, isContentCell }) => {
               // `cache` keeps the cell and its rendered content when the
               // column gets hidden, so it can be restored as-is when the
               // column is shown again.
@@ -203,11 +225,17 @@ export const HeaderFooterRenderingMixin = (superClass) =>
                 'last-column-cell': isLastCell,
               };
 
+              const customCellParts = isContentCell ? getCustomParts(column.footerPartName) : {};
+
               return cache(html`
                 <td
                   role="gridcell"
-                  part="cell footer-cell${partMap(cellParts)}"
+                  part="cell footer-cell${partMap({ ...cellParts, ...customCellParts })}"
                   class="cell footer-cell${classMap(cellParts)}"
+                  style="${styleMap({
+                    width: column.width,
+                    'flex-grow': column.flexGrow,
+                  })}"
                   ?first-column="${isFirstCell}"
                   ?last-column="${isLastCell}"
                   @keydown="${this.__onCellKeyDown}"
@@ -219,7 +247,9 @@ export const HeaderFooterRenderingMixin = (superClass) =>
                   tabindex="-1"
                   ._column=${column}
                 >
-                  ${cellContent(this, `vaadin-grid-footer-cell-content-${level}-${column._id}`)}
+                  ${cellContent(this, `vaadin-grid-footer-cell-content-${level}-${column._id}`, {
+                    textAlign: column.textAlign,
+                  })}
                 </td>
               `);
             },
@@ -239,6 +269,7 @@ export const HeaderFooterRenderingMixin = (superClass) =>
               column,
               isFirstCell: column === visibleColumns.at(0),
               isLastCell: column === visibleColumns.at(-1),
+              isContentCell: isContentCell(column, level, columnTree),
             };
           }),
           isRowVisible:

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

@@ -154,9 +154,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @private */
     _focusableChanged(focusable, oldFocusable) {
-      if (oldFocusable) {
-        oldFocusable.setAttribute('tabindex', '-1');
-      }
+      oldFocusable?.setAttribute('tabindex', '-1');
       if (focusable) {
         this._updateGridSectionFocusTarget(focusable);
       }
@@ -415,9 +413,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onRowNavigation(activeRow, dy) {
       const { dstRow } = this.__navigateRows(dy, activeRow);
 
-      if (dstRow) {
-        dstRow.focus();
-      }
+      dstRow?.focus();
     }
 
     /** @private */
@@ -765,7 +761,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       // When clicking a cell with only text nodes, skip activating the cell
       // on click, since that is already handled on keydown.
       const cell = e.composedPath()[0];
-      const target = (cell._content && cell._content.firstElementChild) || cell;
+      const target = cell._content?.firstElementChild || cell;
       const wasNavigating = this.hasAttribute('navigating');
       const clickEvent = new MouseEvent('click', {
         shiftKey: e.shiftKey,

package/src/vaadin-grid-mixin.js

@@ -124,17 +124,6 @@ export const GridMixin = (superClass) =>
           value: false,
         },
 
-        /**
-         * An internal property that is mainly used by `vaadin-template-renderer`
-         * to identify grid elements.
-         *
-         * @private
-         */
-        __gridElement: {
-          type: Boolean,
-          value: true,
-        },
-
         /** @private */
         __hasEmptyStateContent: {
           type: Boolean,
@@ -152,13 +141,13 @@ export const GridMixin = (superClass) =>
     /** @private */
     get _firstVisibleIndex() {
       const firstVisibleItem = this.__getFirstVisibleItem();
-      return firstVisibleItem ? firstVisibleItem.index : undefined;
+      return firstVisibleItem?.index;
     }
 
     /** @private */
     get _lastVisibleIndex() {
       const lastVisibleItem = this.__getLastVisibleItem();
-      return lastVisibleItem ? lastVisibleItem.index : undefined;
+      return lastVisibleItem?.index;
     }
 
     constructor() {
@@ -247,13 +236,6 @@ export const GridMixin = (superClass) =>
         // otherwise be triggered by this logic because it reads the row height
         // right after updating the rows' content.
         __disableHeightPlaceholder: true,
-        // The virtualizer amortizes scroller height updates to avoid reflows while
-        // scrolling. In `allRowsVisible` mode the grid has no scrolling and its
-        // height must track the content exactly, so tell the virtualizer to always
-        // apply the scroller height. Otherwise the items container can be left at a
-        // stale, too-small height and clip rows when the grid grows (e.g. when
-        // expanding a tree grid from a small size).
-        __alwaysUpdateScrollerSize: () => this.allRowsVisible,
       });
 
       this._tooltipController = new TooltipController(this);
@@ -305,9 +287,7 @@ export const GridMixin = (superClass) =>
     __focusBodyCell({ item, column }) {
       const row = this._getRenderedRows().find((row) => row._item === item);
       const cell = row && [...row.children].find((cell) => cell._column === column);
-      if (cell) {
-        cell.focus();
-      }
+      cell?.focus();
     }
 
     /** @protected */
@@ -530,7 +510,6 @@ export const GridMixin = (superClass) =>
       // Might be empty if only cache was used
       this.appendChild(contentsFragment);
 
-      this._frozenCellsChanged();
       this._updateFirstAndLastColumnForRow(row);
     }
 
@@ -596,11 +575,8 @@ export const GridMixin = (superClass) =>
       this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
       this._resizeHandler();
-      this._frozenCellsChanged();
-      this._resetKeyboardNavigation();
       this.__a11yUpdateHeaderRows();
       this.__a11yUpdateFooterRows();
-      this.generateCellPartNames();
       this.__updateHeaderAndFooter();
     }
 

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

@@ -180,7 +180,7 @@ export const RowDetailsMixin = (superClass) =>
      * @protected
      */
     _isDetailsOpened(item) {
-      return this.__detailsOpenedKeys && this.__detailsOpenedKeys.has(this.getItemId(item));
+      return this.__detailsOpenedKeys?.has(this.getItemId(item));
     }
 
     /** @private */