@vaadin/grid 25.0.0-alpha9 → 25.0.0-beta2

package/src/styles/vaadin-grid-tree-toggle-base-styles.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const gridTreeToggleStyles = css`
@@ -36,7 +36,7 @@ export const gridTreeToggleStyles = css`
   }
 
   [part='toggle'] {
-    margin-inline-end: var(--vaadin-gap-container-inline);
+    margin-inline-end: var(--vaadin-gap-s);
   }
 
   [part='toggle']::before {
@@ -45,7 +45,7 @@ export const gridTreeToggleStyles = css`
     width: var(--vaadin-icon-size, 1lh);
     height: var(--vaadin-icon-size, 1lh);
     background: currentColor;
-    mask-image: var(--_vaadin-icon-chevron-down);
+    mask: var(--_vaadin-icon-chevron-down) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   :host(:not([expanded])) [part='toggle']::before {
@@ -54,7 +54,7 @@ export const gridTreeToggleStyles = css`
 
   @media (prefers-reduced-motion: no-preference) {
     [part='toggle']::before {
-      transition: rotate 120ms;
+      transition: var(--_non-focused-row-none, rotate 120ms);
     }
   }
 

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
+import { findTreeToggleCell, iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -22,7 +22,7 @@ export const A11yMixin = (superClass) =>
       };
     }
     static get observers() {
-      return ['_a11yUpdateGridSize(size, _columnTree)'];
+      return ['_a11yUpdateGridSize(size, _columnTree, __emptyState)'];
     }
 
     /** @private */
@@ -34,21 +34,27 @@ export const A11yMixin = (superClass) =>
 
     /** @private */
     _a11yGetFooterRowCount(_columnTree) {
-      return _columnTree.filter((level) => level.some((col) => col.headerRenderer)).length;
+      return _columnTree.filter((level) => level.some((col) => col.footerRenderer)).length;
     }
 
     /** @private */
-    _a11yUpdateGridSize(size, _columnTree) {
+    _a11yUpdateGridSize(size, _columnTree, emptyState) {
       if (size === undefined || _columnTree === undefined) {
         return;
       }
 
+      const headerRowsCount = this._a11yGetHeaderRowCount(_columnTree);
+      const footerRowsCount = this._a11yGetFooterRowCount(_columnTree);
+      const bodyRowsCount = emptyState ? 1 : size;
+      const rowsCount = bodyRowsCount + headerRowsCount + footerRowsCount;
+
+      this.$.table.setAttribute('aria-rowcount', rowsCount);
+
       const bodyColumns = _columnTree[_columnTree.length - 1];
-      this.$.table.setAttribute(
-        'aria-rowcount',
-        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree),
-      );
-      this.$.table.setAttribute('aria-colcount', (bodyColumns && bodyColumns.length) || 0);
+      // If no header and footer rows while the empty state is active, count as one column
+      // Otherwise, use the number of body columns, if present
+      const columnsCount = emptyState ? 1 : (rowsCount && bodyColumns && bodyColumns.length) || 0;
+      this.$.table.setAttribute('aria-colcount', columnsCount);
 
       this._a11yUpdateHeaderRows();
       this._a11yUpdateFooterRows();
@@ -95,12 +101,22 @@ export const A11yMixin = (superClass) =>
      * @protected
      */
     _a11yUpdateRowExpanded(row) {
+      const toggleCell = findTreeToggleCell(row);
       if (this.__isRowExpandable(row)) {
         row.setAttribute('aria-expanded', 'false');
+        if (toggleCell) {
+          toggleCell.setAttribute('aria-expanded', 'false');
+        }
       } else if (this.__isRowCollapsible(row)) {
         row.setAttribute('aria-expanded', 'true');
+        if (toggleCell) {
+          toggleCell.setAttribute('aria-expanded', 'true');
+        }
       } else {
         row.removeAttribute('aria-expanded');
+        if (toggleCell) {
+          toggleCell.removeAttribute('aria-expanded');
+        }
       }
     }
 
@@ -132,7 +148,7 @@ export const A11yMixin = (superClass) =>
     }
 
     /**
-     * @param {!HTMLElement} row
+     * @param {!HTMLElement} cell
      * @param {number} colspan
      * @protected
      */

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

@@ -30,14 +30,12 @@ export const ColumnAutoWidthMixin = (superClass) =>
       ];
     }
 
-    constructor() {
-      super();
-      this.addEventListener('animationend', this.__onAnimationEndAutoWidth);
-    }
+    /** @protected */
+    updated(props) {
+      super.updated(props);
 
-    /** @private */
-    __onAnimationEndAutoWidth(e) {
-      if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
+      // If the grid was hidden and is now visible
+      if (props.has('__hostVisible') && !props.get('__hostVisible')) {
         this.__tryToRecalculateColumnWidthsIfPending();
       }
     }
@@ -137,10 +135,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
       return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
     }
 
-    /**
-     * @param {!Array<!GridColumn>} cols the columns to auto size based on their content width
-     * @private
-     */
+    /** @private */
     _recalculateColumnWidths() {
       // Flush to make sure DOM is up-to-date when measuring the column widths
       this.__virtualizer.flush();

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

@@ -147,6 +147,7 @@ export declare class GridColumnMixinClass<
    *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
    *   - `model.selected` Selected state.
    *   - `model.detailsOpened` Details opened state.
+   *   - `model.hasChildren` Whether the item has children.
    */
   renderer: GridBodyRenderer<TItem, Column> | null | undefined;
 

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

@@ -536,24 +536,8 @@ export const ColumnBaseMixin = (superClass) =>
         return;
       }
 
-      let textAlignFallback;
-      if (getComputedStyle(this._grid).direction === 'ltr') {
-        if (textAlign === 'start') {
-          textAlignFallback = 'left';
-        } else if (textAlign === 'end') {
-          textAlignFallback = 'right';
-        }
-      } else if (textAlign === 'start') {
-        textAlignFallback = 'right';
-      } else if (textAlign === 'end') {
-        textAlignFallback = 'left';
-      }
-
       this._allCells.forEach((cell) => {
         cell._content.style.textAlign = textAlign;
-        if (getComputedStyle(cell._content).textAlign !== textAlign) {
-          cell._content.style.textAlign = textAlignFallback;
-        }
       });
     }
 
@@ -885,6 +869,7 @@ export const GridColumnMixin = (superClass) =>
          *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
          *   - `model.selected` Selected state.
          *   - `model.detailsOpened` Details opened state.
+         *   - `model.hasChildren` Whether the item has children.
          *
          * @type {GridBodyRenderer | null | undefined}
          */

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

@@ -127,9 +127,9 @@ export const ColumnReorderingMixin = (superClass) =>
         return;
       }
 
-      // Cancel reordering if there are draggable nodes on the event path
+      // Cancel reordering if there are draggable nodes on the event path following this element
       const path = e.composedPath && e.composedPath();
-      if (path && path.some((node) => node.hasAttribute && node.hasAttribute('draggable'))) {
+      if (path && path.slice(0, Math.max(0, path.indexOf(this))).some((node) => node.draggable)) {
         return;
       }
 

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

@@ -181,6 +181,12 @@ export const DataProviderMixin = (superClass) =>
       this.requestContentUpdate();
     }
 
+    /** @private */
+    __getRowLevel(row) {
+      const { level } = this._dataProviderController.getFlatIndexContext(row.index);
+      return level;
+    }
+
     /** @private */
     __getRowItem(row) {
       const { item } = this._dataProviderController.getFlatIndexContext(row.index);
@@ -216,6 +222,15 @@ export const DataProviderMixin = (superClass) =>
       return this.__expandedKeys && this.__expandedKeys.has(this.getItemId(item));
     }
 
+    /**
+     * @param {!GridItem} item
+     * @return {boolean}
+     * @protected
+     */
+    _hasChildren(item) {
+      return this.itemHasChildrenPath && item && !!get(this.itemHasChildrenPath, item);
+    }
+
     /** @private */
     _expandedItemsChanged() {
       this._dataProviderController.recalculateFlatSize();
@@ -254,16 +269,6 @@ export const DataProviderMixin = (superClass) =>
       }
     }
 
-    /**
-     * @param {number} index
-     * @return {number}
-     * @protected
-     */
-    _getIndexLevel(index = 0) {
-      const { level } = this._dataProviderController.getFlatIndexContext(index);
-      return level;
-    }
-
     /** @protected */
     _onDataProviderPageRequested() {
       this._setLoading(true);

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

@@ -413,7 +413,7 @@ export const DragAndDropMixin = (superClass) =>
 
     /** @private */
     _onDrop(e) {
-      if (this.dropMode) {
+      if (this.dropMode && this._dropLocation) {
         e.stopPropagation();
         e.preventDefault();
 

package/src/vaadin-grid-event-context-mixin.d.ts

@@ -13,6 +13,7 @@ export interface GridEventContext<TItem> {
   index?: number;
   selected?: boolean;
   detailsOpened?: boolean;
+  hasChildren?: boolean;
   expanded?: boolean;
   level?: number;
 }
@@ -34,6 +35,7 @@ export declare class EventContextMixinClass<TItem> {
    * - `detailsOpened`: whether the row details are open for the item
    * - `expanded`: the expanded state of the tree toggle
    * - `level`: the tree hierarchy level
+   * - `hasChildren`: whether the item has children
    *
    * The returned object is populated only when a grid cell, header, footer or row details is found in `event.composedPath()`.
    * This means mostly mouse and keyboard events. If such a grid part is not found in the path, an empty object is returned.

package/src/vaadin-grid-event-context-mixin.js

@@ -21,6 +21,7 @@ export const EventContextMixin = (superClass) =>
      * - `detailsOpened`: whether the row details are open for the item
      * - `expanded`: the expanded state of the tree toggle
      * - `level`: the tree hierarchy level
+     * - `hasChildren`: whether the item has children
      *
      * The returned object is populated only when a grid cell, header, footer or row details is found in `event.composedPath()`.
      * This means mostly mouse and keyboard events. If such a grid part is not found in the path, an empty object is returned.

package/src/vaadin-grid-filter.js

@@ -9,7 +9,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
-import { gridFilterStyles } from './styles/vaadin-grid-filter-core-styles.js';
+import { gridFilterStyles } from './styles/vaadin-grid-filter-base-styles.js';
 import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
 
 /**

package/src/vaadin-grid-helpers.js

@@ -173,6 +173,15 @@ export function updateCellState(cell, attribute, value, part, oldPart) {
   updatePart(cell, value, part || `${attribute}-cell`);
 }
 
+/**
+ * Finds the cell containing the tree toggle element
+ * @param {!HTMLElement} row
+ * @return {HTMLElement | null}
+ */
+export function findTreeToggleCell(row) {
+  return getBodyRowCells(row).find((cell) => cell._content.querySelector('vaadin-grid-tree-toggle'));
+}
+
 /**
  * A helper for observing flattened child column list of an element.
  */

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

@@ -7,7 +7,6 @@ import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
-import { get } from '@vaadin/component-base/src/path-utils.js';
 
 function isRow(element) {
   return element instanceof HTMLTableRowElement;
@@ -286,10 +285,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @private */
     __isRowExpandable(row) {
-      if (this.itemHasChildrenPath) {
-        const item = row._item;
-        return !!(item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item));
-      }
+      return this._hasChildren(row._item) && !this._isExpanded(row._item);
     }
 
     /** @private */

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

@@ -62,6 +62,7 @@ export interface GridItemModel<TItem> {
   expanded?: boolean;
   level?: number;
   detailsOpened?: boolean;
+  hasChildren?: boolean;
 }
 
 /**

package/src/vaadin-grid-mixin.js

@@ -31,6 +31,7 @@ import {
   updateState,
 } from './vaadin-grid-helpers.js';
 import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
+import { ResizeMixin } from './vaadin-grid-resize-mixin.js';
 import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';
 import { ScrollMixin } from './vaadin-grid-scroll-mixin.js';
 import { SelectionMixin } from './vaadin-grid-selection-mixin.js';
@@ -57,6 +58,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * @mixes EventContextMixin
  * @mixes StylingMixin
  * @mixes DragAndDropMixin
+ * @mixes ResizeMixin
  */
 export const GridMixin = (superClass) =>
   class extends ColumnAutoWidthMixin(
@@ -73,7 +75,7 @@ export const GridMixin = (superClass) =>
                         FilterMixin(
                           ColumnReorderingMixin(
                             ColumnResizingMixin(
-                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(superClass)))),
+                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(ResizeMixin(superClass))))),
                             ),
                           ),
                         ),
@@ -168,11 +170,6 @@ export const GridMixin = (superClass) =>
       };
     }
 
-    constructor() {
-      super();
-      this.addEventListener('animationend', this._onAnimationEnd);
-    }
-
     /** @private */
     get _firstVisibleIndex() {
       const firstVisibleItem = this.__getFirstVisibleItem();
@@ -256,24 +253,13 @@ export const GridMixin = (superClass) =>
         scrollContainer: this.$.items,
         scrollTarget: this.$.table,
         reorderElements: true,
+        // Grid rows have a CSS-defined minimum height, so the virtualizer's height
+        // placeholder logic can be disabled. This helps save reflows which might
+        // otherwise be triggered by this logic because it reads the row height
+        // right after updating the rows' content.
+        __disableHeightPlaceholder: true,
       });
 
-      new ResizeObserver(() =>
-        setTimeout(() => {
-          this.__updateColumnsBodyContentHidden();
-        }),
-      ).observe(this.$.table);
-
-      const minHeightObserver = new ResizeObserver(() =>
-        setTimeout(() => {
-          this.__updateMinHeight();
-        }),
-      );
-
-      minHeightObserver.observe(this.$.header);
-      minHeightObserver.observe(this.$.items);
-      minHeightObserver.observe(this.$.footer);
-
       this._tooltipController = new TooltipController(this);
       this.addController(this._tooltipController);
       this._tooltipController.setManual(true);
@@ -284,6 +270,31 @@ export const GridMixin = (superClass) =>
       });
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      // If the grid was hidden and is now visible
+      if (props.has('__hostVisible') && !props.get('__hostVisible')) {
+        // Ensure header and footer have tabbable elements
+        this._resetKeyboardNavigation();
+
+        requestAnimationFrame(() => this.__scrollToPendingIndexes());
+      }
+
+      if (props.has('__headerRect') || props.has('__footerRect') || props.has('__itemsRect')) {
+        setTimeout(() => this.__updateMinHeight());
+      }
+
+      if (props.has('__tableRect')) {
+        setTimeout(() => this.__updateColumnsBodyContentHidden());
+
+        // Updating data can change the visibility of the scroll bar. Therefore,
+        // the scroll position has to be recalculated.
+        this.__updateHorizontalScrollPosition();
+      }
+    }
+
     /** @private */
     __getBodyCellCoordinates(cell) {
       if (this.$.items.contains(cell) && cell.localName === 'td') {
@@ -630,6 +641,7 @@ export const GridMixin = (superClass) =>
 
       // Make sure the section has a tabbable element
       this._resetKeyboardNavigation();
+      this._a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
     }
 
     /** @private */
@@ -815,21 +827,6 @@ export const GridMixin = (superClass) =>
       this.__updateHorizontalScrollPosition();
     }
 
-    /** @private */
-    _onAnimationEnd(e) {
-      // ShadyCSS applies scoping suffixes to animation names
-      if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
-        e.stopPropagation();
-
-        // Ensure header and footer have tabbable elements
-        this._resetKeyboardNavigation();
-
-        requestAnimationFrame(() => {
-          this.__scrollToPendingIndexes();
-        });
-      }
-    }
-
     /**
      * @param {!HTMLTableRowElement} row
      * @return {!GridItemModel}
@@ -839,9 +836,10 @@ export const GridMixin = (superClass) =>
       return {
         index: row.index,
         item: row._item,
-        level: this._getIndexLevel(row.index),
+        level: this.__getRowLevel(row),
         expanded: this._isExpanded(row._item),
         selected: this._isSelected(row._item),
+        hasChildren: this._hasChildren(row._item),
         detailsOpened: !!this.rowDetailsRenderer && this._isDetailsOpened(row._item),
       };
     }

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 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';
+
+export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ResizeMixinClass> & T;
+
+declare class ResizeMixinClass {}

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to observe size changes of the grid and its main parts.
+ *
+ * @polymerMixin
+ */
+export const ResizeMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /** @private */
+        __hostVisible: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @private */
+        __tableRect: Object,
+
+        /** @private */
+        __headerRect: Object,
+
+        /** @private */
+        __itemsRect: Object,
+
+        /** @private */
+        __footerRect: Object,
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        const hostEntry = entries.findLast(({ target }) => target === this);
+        if (hostEntry) {
+          this.__hostVisible = this.checkVisibility();
+        }
+
+        const tableEntry = entries.findLast(({ target }) => target === this.$.table);
+        if (tableEntry) {
+          this.__tableRect = tableEntry.contentRect;
+        }
+
+        const headerEntry = entries.findLast(({ target }) => target === this.$.header);
+        if (headerEntry) {
+          this.__headerRect = headerEntry.contentRect;
+        }
+
+        const itemsEntry = entries.findLast(({ target }) => target === this.$.items);
+        if (itemsEntry) {
+          this.__itemsRect = itemsEntry.contentRect;
+        }
+
+        const footerEntry = entries.findLast(({ target }) => target === this.$.footer);
+        if (footerEntry) {
+          this.__footerRect = footerEntry.contentRect;
+        }
+      });
+
+      resizeObserver.observe(this);
+      resizeObserver.observe(this.$.table);
+      resizeObserver.observe(this.$.header);
+      resizeObserver.observe(this.$.items);
+      resizeObserver.observe(this.$.footer);
+    }
+  };

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

@@ -68,10 +68,6 @@ export const RowDetailsMixin = (superClass) =>
         entries.forEach(({ target: cell }) => {
           this._updateDetailsCellHeight(cell.parentElement);
         });
-
-        // This workaround is needed until Safari also supports
-        // ResizeObserver.observe with {box: 'border-box'}
-        this.__virtualizer.__adapter._resizeHandler();
       });
     }
 
@@ -124,7 +120,7 @@ export const RowDetailsMixin = (superClass) =>
 
     /**
      * @param {!HTMLElement} row
-     * @param {!GridItem} item
+     * @param {boolean} detailsOpened
      * @protected
      */
     _toggleDetailsCell(row, detailsOpened) {