@vaadin/grid 25.0.0-alpha7 → 25.0.0-alpha9

package/src/styles/vaadin-grid-filter-base-styles.js

@@ -6,15 +6,13 @@
 import { css } from 'lit';
 
 export const gridFilterStyles = css`
-  @layer base {
-    :host {
-      display: inline-flex;
-      max-width: 100%;
-    }
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+  }
 
-    ::slotted(*) {
-      width: 100%;
-      box-sizing: border-box;
-    }
+  ::slotted(*) {
+    width: 100%;
+    box-sizing: border-box;
   }
 `;

package/src/styles/vaadin-grid-sorter-base-styles.js

@@ -7,59 +7,57 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const gridSorterStyles = css`
-  @layer base {
-    :host {
-      display: inline-flex;
-      align-items: center;
-      cursor: pointer;
-      max-width: 100%;
-      gap: var(--vaadin-gap-container-inline);
-      -webkit-user-select: none;
-      user-select: none;
-      -webkit-tap-highlight-color: transparent;
-    }
+  :host {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    max-width: 100%;
+    gap: var(--vaadin-gap-container-inline);
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-    [part='content'] {
-      flex: 1 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+  [part='content'] {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-    [part='indicators'] {
-      position: relative;
-      flex: none;
-    }
+  [part='indicators'] {
+    position: relative;
+    flex: none;
+  }
 
-    [part='order'] {
-      display: inline;
-      vertical-align: super;
-      font-size: 0.75em;
-      line-height: 1;
-    }
+  [part='order'] {
+    display: inline;
+    vertical-align: super;
+    font-size: 0.75em;
+    line-height: 1;
+  }
 
-    [part='indicators']::before {
-      content: '';
-      display: inline-block;
-      height: 12px;
-      width: 8px;
-      mask-image: var(--_vaadin-icon-sort);
-      background: currentColor;
-    }
+  [part='indicators']::before {
+    content: '';
+    display: inline-block;
+    height: 12px;
+    width: 8px;
+    mask-image: var(--_vaadin-icon-sort);
+    background: currentColor;
+  }
 
-    :host([direction]) [part='indicators']::before {
-      padding-bottom: 6px;
-      height: 6px;
-      mask-clip: content-box;
-    }
+  :host([direction]) [part='indicators']::before {
+    padding-bottom: 6px;
+    height: 6px;
+    mask-clip: content-box;
+  }
 
-    :host([direction='desc']) [part='indicators']::before {
-      padding-block: 6px 0;
-    }
+  :host([direction='desc']) [part='indicators']::before {
+    padding-block: 6px 0;
+  }
 
-    @media (forced-colors: active) {
-      [part='indicators']::before {
-        background: CanvasText;
-      }
+  @media (forced-colors: active) {
+    [part='indicators']::before {
+      background: CanvasText;
     }
   }
 `;

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

@@ -7,72 +7,70 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const gridTreeToggleStyles = css`
-  @layer base {
-    :host {
-      display: flex;
-      max-width: 100%;
-      pointer-events: none;
-    }
+  :host {
+    display: flex;
+    max-width: 100%;
+    pointer-events: none;
+  }
 
-    /* Don't expand/collapse when clicking #level-spacer */
-    [part] {
-      pointer-events: auto;
-    }
+  /* Don't expand/collapse when clicking #level-spacer */
+  [part] {
+    pointer-events: auto;
+  }
 
-    :host([hidden]) {
-      display: none !important;
-    }
+  :host([hidden]) {
+    display: none !important;
+  }
 
-    :host(:not([leaf])) {
-      cursor: var(--vaadin-clickable-cursor);
-    }
+  :host(:not([leaf])) {
+    cursor: var(--vaadin-clickable-cursor);
+  }
 
-    #level-spacer,
-    [part='toggle'] {
-      flex: none;
-    }
+  #level-spacer,
+  [part='toggle'] {
+    flex: none;
+  }
 
-    #level-spacer {
-      width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 1em));
-    }
+  #level-spacer {
+    width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 16px));
+  }
 
-    [part='toggle'] {
-      margin-inline-end: var(--vaadin-gap-container-inline);
-    }
+  [part='toggle'] {
+    margin-inline-end: var(--vaadin-gap-container-inline);
+  }
 
-    [part='toggle']::before {
-      content: '';
-      display: block;
-      width: var(--vaadin-icon-size, 1lh);
-      height: var(--vaadin-icon-size, 1lh);
-      background: currentColor;
-      mask-image: var(--_vaadin-icon-chevron-down);
-    }
+  [part='toggle']::before {
+    content: '';
+    display: block;
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    background: currentColor;
+    mask-image: var(--_vaadin-icon-chevron-down);
+  }
 
-    :host(:not([expanded])) [part='toggle']::before {
-      rotate: -90deg;
-    }
+  :host(:not([expanded])) [part='toggle']::before {
+    rotate: -90deg;
+  }
 
-    @media (prefers-reduced-motion: no-preference) {
-      [part='toggle']::before {
-        transition: rotate 120ms;
-      }
+  @media (prefers-reduced-motion: no-preference) {
+    [part='toggle']::before {
+      transition: rotate 120ms;
     }
+  }
 
-    :host([leaf]) [part='toggle'] {
-      visibility: hidden;
-    }
+  :host([leaf]) [part='toggle'] {
+    visibility: hidden;
+  }
 
-    slot {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+  slot {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-    @media (forced-colors: active) {
-      [part='toggle']::before {
-        background: CanvasText;
-      }
+  @media (forced-colors: active) {
+    [part='toggle']::before {
+      background: CanvasText;
     }
   }
 `;

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

@@ -59,9 +59,15 @@ export const ColumnAutoWidthMixin = (superClass) =>
     }
 
     /** @private */
-    __flatSizeChangedAutoWidth() {
+    __flatSizeChangedAutoWidth(flatSize) {
       // Flat size changed, recalculate column widths if pending (asynchronously, to allow grid to render row elements first)
-      requestAnimationFrame(() => this.__tryToRecalculateColumnWidthsIfPending());
+      requestAnimationFrame(() => {
+        if (!!flatSize && !this.__hasHadRenderedRowsForColumnWidthCalculation) {
+          this.recalculateColumnWidths();
+        } else {
+          this.__tryToRecalculateColumnWidthsIfPending();
+        }
+      });
     }
 
     /**

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

@@ -7,7 +7,6 @@ import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
-import { getBodyRowCells, updateCellsPart, updateState } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -182,46 +181,20 @@ export const DataProviderMixin = (superClass) =>
       this.requestContentUpdate();
     }
 
-    /**
-     * @param {number} index
-     * @param {HTMLElement} el
-     * @protected
-     */
-    _getItem(index, el) {
-      el.index = index;
-
-      const { item } = this._dataProviderController.getFlatIndexContext(index);
-      if (item) {
-        this.__updateLoading(el, false);
-        this._updateItem(el, item);
-        if (this._isExpanded(item)) {
-          this._dataProviderController.ensureFlatIndexHierarchy(index);
-        }
-      } else {
-        this.__updateLoading(el, true);
-        this._dataProviderController.ensureFlatIndexLoaded(index);
-      }
+    /** @private */
+    __getRowItem(row) {
+      const { item } = this._dataProviderController.getFlatIndexContext(row.index);
+      return item;
     }
 
-    /**
-     * @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);
+    /** @private */
+    __ensureRowItem(row) {
+      this._dataProviderController.ensureFlatIndexLoaded(row.index);
+    }
 
-      if (loading) {
-        // Run style generators for the loading row to have custom names cleared
-        this._generateCellClassNames(row);
-        this._generateCellPartNames(row);
-      }
+    /** @private */
+    __ensureRowHierarchy(row) {
+      this._dataProviderController.ensureFlatIndexHierarchy(row.index);
     }
 
     /**
@@ -302,7 +275,7 @@ export const DataProviderMixin = (superClass) =>
       if (this._flatSize !== this._dataProviderController.flatSize) {
         // Schedule an update of all rendered rows by _debouncerApplyCachedData,
         // to ensure that all pages associated with the rendered rows are loaded.
-        this._shouldUpdateAllRenderedRowsAfterPageLoad = true;
+        this._shouldLoadAllRenderedRowsAfterPageLoad = true;
 
         // TODO: Updating the flat size property can still result in a synchonous virtualizer update
         // if the size change requires the virtualizer to increase the amount of physical elements
@@ -312,9 +285,7 @@ export const DataProviderMixin = (superClass) =>
       }
 
       // After updating the cache, check if some of the expanded items should have sub-caches loaded
-      this._getRenderedRows().forEach((row) => {
-        this._dataProviderController.ensureFlatIndexHierarchy(row.index);
-      });
+      this._getRenderedRows().forEach((row) => this.__ensureRowHierarchy(row));
 
       this._hasData = true;
     }
@@ -325,13 +296,14 @@ export const DataProviderMixin = (superClass) =>
       this._debouncerApplyCachedData = Debouncer.debounce(this._debouncerApplyCachedData, timeOut.after(0), () => {
         this._setLoading(false);
 
-        const shouldUpdateAllRenderedRowsAfterPageLoad = this._shouldUpdateAllRenderedRowsAfterPageLoad;
-        this._shouldUpdateAllRenderedRowsAfterPageLoad = false;
+        const shouldLoadAllRenderedRowsAfterPageLoad = this._shouldLoadAllRenderedRowsAfterPageLoad;
+        this._shouldLoadAllRenderedRowsAfterPageLoad = false;
 
         this._getRenderedRows().forEach((row) => {
-          const { item } = this._dataProviderController.getFlatIndexContext(row.index);
-          if (item || shouldUpdateAllRenderedRowsAfterPageLoad) {
-            this._getItem(row.index, row);
+          this.__updateRow(row);
+
+          if (shouldLoadAllRenderedRowsAfterPageLoad) {
+            this.__ensureRowItem(row);
           }
         });
 

package/src/vaadin-grid-filter.js

@@ -41,7 +41,7 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  * @extends HTMLElement
  * @mixes GridFilterElementMixin
  */
-class GridFilter extends GridFilterElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
+class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-grid-filter';
   }

package/src/vaadin-grid-mixin.js

@@ -28,6 +28,7 @@ import {
   iterateRowCells,
   updateBooleanRowStates,
   updateCellsPart,
+  updateState,
 } from './vaadin-grid-helpers.js';
 import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
 import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';
@@ -345,7 +346,7 @@ export const GridMixin = (superClass) =>
         row.setAttribute('role', 'row');
         row.setAttribute('tabindex', '-1');
         if (this._columnTree) {
-          this._updateRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
+          this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
         }
         rows.push(row);
       }
@@ -457,9 +458,9 @@ export const GridMixin = (superClass) =>
      * @param {?string} section
      * @param {boolean} isColumnRow
      * @param {boolean} noNotify
-     * @protected
+     * @private
      */
-    _updateRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
+    __initRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
       const contentsFragment = document.createDocumentFragment();
 
       iterateRowCells(row, (cell) => {
@@ -639,10 +640,15 @@ export const GridMixin = (superClass) =>
         return;
       }
 
+      row.index = index;
+
       this._updateRowOrderParts(row, index);
 
       this._a11yUpdateRowRowindex(row, index);
-      this._getItem(index, row);
+
+      this.__ensureRowItem(row);
+      this.__ensureRowHierarchy(row);
+      this.__updateRow(row);
     }
 
     /** @private */
@@ -683,7 +689,7 @@ export const GridMixin = (superClass) =>
      */
     _renderColumnTree(columnTree) {
       iterateChildren(this.$.items, (row) => {
-        this._updateRow(row, columnTree[columnTree.length - 1], 'body', false, true);
+        this.__initRow(row, columnTree[columnTree.length - 1], 'body', false, true);
 
         const model = this.__getRowModel(row);
         this._updateRowOrderParts(row);
@@ -710,7 +716,7 @@ export const GridMixin = (superClass) =>
       }
 
       iterateChildren(this.$.header, (headerRow, index, rows) => {
-        this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
+        this.__initRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
 
         const cells = getBodyRowCells(headerRow);
         updateCellsPart(cells, 'first-header-row-cell', index === 0);
@@ -718,7 +724,7 @@ export const GridMixin = (superClass) =>
       });
 
       iterateChildren(this.$.footer, (footerRow, index, rows) => {
-        this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
+        this.__initRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
 
         const cells = getBodyRowCells(footerRow);
         updateCellsPart(cells, 'first-footer-row-cell', index === 0);
@@ -726,7 +732,7 @@ export const GridMixin = (superClass) =>
       });
 
       // Sizer rows
-      this._updateRow(this.$.sizer, columnTree[columnTree.length - 1]);
+      this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
       this._resizeHandler();
       this._frozenCellsChanged();
@@ -741,10 +747,38 @@ export const GridMixin = (superClass) =>
 
     /**
      * @param {!HTMLElement} row
-     * @param {GridItem} item
-     * @protected
+     * @param {boolean} loading
+     * @private
      */
-    _updateItem(row, item) {
+    __updateRowLoading(row, loading) {
+      const cells = getBodyRowCells(row);
+
+      // Row state attribute
+      updateState(row, 'loading', loading);
+
+      // Cells part attribute
+      updateCellsPart(cells, 'loading-row-cell', loading);
+
+      if (loading) {
+        // Run style generators for the loading row to have custom names cleared
+        this._generateCellClassNames(row);
+        this._generateCellPartNames(row);
+      }
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @private
+     */
+    __updateRow(row) {
+      const item = this.__getRowItem(row);
+      if (item) {
+        this.__updateRowLoading(row, false);
+      } else {
+        this.__updateRowLoading(row, true);
+        return;
+      }
+
       row._item = item;
       const model = this.__getRowModel(row);
 

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

@@ -85,7 +85,7 @@ export const RowDetailsMixin = (superClass) =>
         // Only update the rows if the column tree has already been initialized
         iterateChildren(this.$.items, (row) => {
           if (!row.querySelector('[part~=details-cell]')) {
-            this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
+            this.__initRow(row, this._columnTree[this._columnTree.length - 1]);
             const isDetailsOpened = this._isDetailsOpened(row._item);
             this._toggleDetailsCell(row, isDetailsOpened);
           }
@@ -98,13 +98,13 @@ export const RowDetailsMixin = (superClass) =>
       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);
+          this.__updateRow(row);
           return;
         }
 
         // Re-renders the row to open the details when a row details renderer is provided.
         if (rowDetailsRenderer && this._isDetailsOpened(row._item)) {
-          this._updateItem(row, row._item);
+          this.__updateRow(row);
         }
       });
     }
@@ -140,7 +140,7 @@ export const RowDetailsMixin = (superClass) =>
       }
 
       // Assigns a renderer when the details cell is opened.
-      // The details cell content is rendered later in the `_updateItem` method.
+      // The details cell content is rendered later in the `__updateRow` method.
       if (this.rowDetailsRenderer) {
         cell._renderer = this.rowDetailsRenderer;
       }

package/src/vaadin-grid-sorter.js

@@ -57,7 +57,7 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  * @mixes ThemableMixin
  * @mixes DirMixin
  */
-class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
+class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-grid-sorter';
   }

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

@@ -67,7 +67,7 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
  * @mixes GridTreeToggleMixin
  */
 class GridTreeToggle extends GridTreeToggleMixin(
-  ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement)))),
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-grid-tree-toggle';

package/src/vaadin-grid.js

@@ -262,7 +262,7 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  * @mixes GridMixin
  * @mixes ThemableMixin
  */
-class Grid extends GridMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
+class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-grid';
   }