@vaadin/grid 25.0.0-beta4 → 25.0.0-beta5

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

@@ -73,7 +73,7 @@ export const ActiveItemMixin = (superClass) =>
         // No clicked cell available
         !cell ||
         // Cell is a details cell
-        cell.getAttribute('part').includes('details-cell') ||
+        cell.part.contains('details-cell') ||
         // Cell is the empty state cell
         cell === this.$.emptystatecell ||
         // Cell content is focused

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

@@ -7,7 +7,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 { get } from '@vaadin/component-base/src/path-utils.js';
-import { updateCellState } from './vaadin-grid-helpers.js';
+import { updateCellState, updatePart } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -518,7 +518,7 @@ export const ColumnBaseMixin = (superClass) =>
 
             if (resizable) {
               const handle = document.createElement('div');
-              handle.setAttribute('part', 'resize-handle');
+              updatePart(handle, 'resize-handle', true);
               cell.appendChild(handle);
             }
           }

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

@@ -134,7 +134,7 @@ export const ColumnReorderingMixin = (superClass) =>
       }
 
       const headerCell = this._cellFromPoint(e.detail.x, e.detail.y);
-      if (!headerCell || !headerCell.getAttribute('part').includes('header-cell')) {
+      if (!headerCell || !headerCell.part.contains('header-cell')) {
         return;
       }
 

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

@@ -20,22 +20,16 @@ export const ColumnResizingMixin = (superClass) =>
       scroller.addEventListener('touchmove', (e) => scroller.hasAttribute('column-resizing') && e.preventDefault());
 
       // Disable contextmenu on any resize separator.
-      scroller.addEventListener(
-        'contextmenu',
-        (e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault(),
-      );
+      scroller.addEventListener('contextmenu', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
 
       // Disable native cell focus when resizing
-      scroller.addEventListener(
-        'mousedown',
-        (e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault(),
-      );
+      scroller.addEventListener('mousedown', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
     }
 
     /** @private */
     _onHeaderTrack(e) {
       const handle = e.target;
-      if (handle.getAttribute('part') === 'resize-handle') {
+      if (handle.part.contains('resize-handle')) {
         const cell = handle.parentElement;
         let column = cell._column;
 

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

@@ -447,7 +447,7 @@ export const DragAndDropMixin = (superClass) =>
       return rows
         .map((row) => {
           return Array.from(row.children)
-            .filter((cell) => !cell.hidden && cell.getAttribute('part').indexOf('details-cell') === -1)
+            .filter((cell) => !cell.hidden && !cell.part.contains('details-cell'))
             .sort((a, b) => {
               return a._column._order > b._column._order ? 1 : -1;
             })

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

@@ -40,8 +40,8 @@ export const EventContextMixin = (superClass) =>
         return context;
       }
 
-      context.section = ['body', 'header', 'footer', 'details'].find(
-        (section) => cell.getAttribute('part').indexOf(section) > -1,
+      context.section = ['body', 'header', 'footer', 'details'].find((section) =>
+        cell.part.contains(`${section}-cell`),
       );
 
       if (cell._column) {

package/src/vaadin-grid-helpers.js

@@ -5,7 +5,6 @@
  */
 import { microTask } 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';
 
 /**
  * Returns the cells of the given row, excluding the details cell.
@@ -81,15 +80,13 @@ export function updateState(element, attribute, value) {
 
 /**
  * @param {!HTMLElement} element
- * @param {boolean | string | null | undefined} value
  * @param {string} part
+ * @param {boolean | string | null | undefined} value
  */
-export function updatePart(element, value, part) {
-  if (value || value === '') {
-    addValueToAttribute(element, 'part', part);
-  } else {
-    removeValueFromAttribute(element, 'part', part);
-  }
+export function updatePart(element, part, value) {
+  element.classList.toggle(part, value || value === '');
+  element.part.toggle(part, value || value === '');
+  element.part.length === 0 && element.removeAttribute('part');
 }
 
 /**
@@ -99,7 +96,7 @@ export function updatePart(element, value, part) {
  */
 export function updateCellsPart(cells, part, value) {
   cells.forEach((cell) => {
-    updatePart(cell, value, part);
+    updatePart(cell, part, value);
   });
 }
 
@@ -117,7 +114,7 @@ export function updateBooleanRowStates(row, states) {
     const rowPart = `${state}-row`;
 
     // Row part attribute
-    updatePart(row, value, rowPart);
+    updatePart(row, rowPart, value);
 
     // Cells part attribute
     updateCellsPart(cells, `${rowPart}-cell`, value);
@@ -140,14 +137,14 @@ export function updateStringRowStates(row, states) {
     // remove previous part from row and cells if there was any
     if (prevValue) {
       const prevRowPart = `${state}-${prevValue}-row`;
-      updatePart(row, false, prevRowPart);
+      updatePart(row, prevRowPart, false);
       updateCellsPart(cells, `${prevRowPart}-cell`, false);
     }
 
     // set new part to rows and cells if there is a value
     if (value) {
       const rowPart = `${state}-${value}-row`;
-      updatePart(row, value, rowPart);
+      updatePart(row, rowPart, value);
       updateCellsPart(cells, `${rowPart}-cell`, value);
     }
   });
@@ -166,11 +163,11 @@ export function updateCellState(cell, attribute, value, part, oldPart) {
 
   // Remove old part from the attribute
   if (oldPart) {
-    updatePart(cell, false, oldPart);
+    updatePart(cell, oldPart, false);
   }
 
   // Add new part to the cell attribute
-  updatePart(cell, value, part || `${attribute}-cell`);
+  updatePart(cell, part || `${attribute}-cell`, value);
 }
 
 /**

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

@@ -6,7 +6,7 @@
 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 { updatePart } from './vaadin-grid-helpers.js';
 
 function isRow(element) {
   return element instanceof HTMLTableRowElement;
@@ -169,11 +169,11 @@ export const KeyboardNavigationMixin = (superClass) =>
     /** @private */
     _focusedCellChanged(focusedCell, oldFocusedCell) {
       if (oldFocusedCell) {
-        removeValueFromAttribute(oldFocusedCell, 'part', 'focused-cell');
+        updatePart(oldFocusedCell, 'focused-cell', false);
       }
 
       if (focusedCell) {
-        addValueToAttribute(focusedCell, 'part', 'focused-cell');
+        updatePart(focusedCell, 'focused-cell', true);
       }
     }
 
@@ -603,7 +603,7 @@ export const KeyboardNavigationMixin = (superClass) =>
           this._scrollHorizontallyToCell(dstCell);
         }
 
-        dstCell.focus();
+        dstCell.focus({ preventScroll: true });
       }
     }
 
@@ -1016,8 +1016,9 @@ export const KeyboardNavigationMixin = (superClass) =>
       const dstRow = dstCell.parentNode;
       const dstCellIndex = Array.from(dstRow.children).indexOf(dstCell);
       const tableRect = this.$.table.getBoundingClientRect();
-      let leftBoundary = tableRect.left,
-        rightBoundary = tableRect.right;
+      const scrollbarWidth = this.$.table.clientWidth - this.$.table.offsetWidth;
+      let leftBoundary = tableRect.left - (this.__isRTL ? scrollbarWidth : 0);
+      let rightBoundary = tableRect.right + (this.__isRTL ? 0 : scrollbarWidth);
       for (let i = dstCellIndex - 1; i >= 0; i--) {
         const cell = dstRow.children[i];
         if (cell.hasAttribute('hidden') || isDetailsCell(cell)) {
@@ -1040,10 +1041,10 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
 
       if (dstCellRect.left < leftBoundary) {
-        this.$.table.scrollLeft += Math.round(dstCellRect.left - leftBoundary);
+        this.$.table.scrollLeft += dstCellRect.left - leftBoundary;
       }
       if (dstCellRect.right > rightBoundary) {
-        this.$.table.scrollLeft += Math.round(dstCellRect.right - rightBoundary);
+        this.$.table.scrollLeft += dstCellRect.right - rightBoundary;
       }
     }
 

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

@@ -31,15 +31,10 @@ import type { GridRowDetailsRenderer, RowDetailsMixinClass } from './vaadin-grid
 import type { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
 import type { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
 import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
-import type {
-  GridCellClassNameGenerator,
-  GridCellPartNameGenerator,
-  StylingMixinClass,
-} from './vaadin-grid-styling-mixin.js';
+import type { GridCellPartNameGenerator, StylingMixinClass } from './vaadin-grid-styling-mixin.js';
 
 export {
   GridBodyRenderer,
-  GridCellClassNameGenerator,
   GridCellPartNameGenerator,
   GridDataProvider,
   GridDataProviderCallback,

package/src/vaadin-grid-mixin.js

@@ -354,9 +354,10 @@ export const GridMixin = (superClass) =>
       const rows = [];
       for (let i = 0; i < count; i++) {
         const row = document.createElement('tr');
-        row.setAttribute('part', 'row body-row');
         row.setAttribute('role', 'row');
         row.setAttribute('tabindex', '-1');
+        updatePart(row, 'row', true);
+        updatePart(row, 'body-row', true);
         if (this._columnTree) {
           this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
         }
@@ -503,7 +504,8 @@ export const GridMixin = (superClass) =>
               }
               column._cells.push(cell);
             }
-            cell.setAttribute('part', 'cell body-cell');
+            updatePart(cell, 'cell', true);
+            updatePart(cell, 'body-cell', true);
             cell.__parentRow = row;
             // Cache the cell reference
             row.__cells.push(cell);
@@ -565,7 +567,8 @@ export const GridMixin = (superClass) =>
                 column._emptyCells.push(cell);
               }
             }
-            cell.part.add('cell', `${section}-cell`);
+            updatePart(cell, 'cell', true);
+            updatePart(cell, `${section}-cell`, true);
           }
 
           if (!cell._content.parentElement) {
@@ -713,15 +716,17 @@ export const GridMixin = (superClass) =>
 
       while (this.$.header.children.length < columnTree.length) {
         const headerRow = document.createElement('tr');
-        headerRow.setAttribute('part', 'row header-row');
         headerRow.setAttribute('role', 'row');
         headerRow.setAttribute('tabindex', '-1');
+        updatePart(headerRow, 'row', true);
+        updatePart(headerRow, 'header-row', true);
         this.$.header.appendChild(headerRow);
 
         const footerRow = document.createElement('tr');
-        footerRow.setAttribute('part', 'row footer-row');
         footerRow.setAttribute('role', 'row');
         footerRow.setAttribute('tabindex', '-1');
+        updatePart(footerRow, 'row', true);
+        updatePart(footerRow, 'footer-row', true);
         this.$.footer.appendChild(footerRow);
       }
       while (this.$.header.children.length > columnTree.length) {
@@ -748,7 +753,6 @@ export const GridMixin = (superClass) =>
       this._resetKeyboardNavigation();
       this.__a11yUpdateHeaderRows();
       this.__a11yUpdateFooterRows();
-      this.generateCellClassNames();
       this.generateCellPartNames();
       this.__updateHeaderAndFooter();
     }
@@ -757,12 +761,12 @@ export const GridMixin = (superClass) =>
     __updateHeaderFooterRowParts(section) {
       const visibleRows = [...this.$[section].querySelectorAll('tr:not([hidden])')];
       [...this.$[section].children].forEach((row) => {
-        updatePart(row, row === visibleRows.at(0), `first-${section}-row`);
-        updatePart(row, row === visibleRows.at(-1), `last-${section}-row`);
+        updatePart(row, `first-${section}-row`, row === visibleRows.at(0));
+        updatePart(row, `last-${section}-row`, row === visibleRows.at(-1));
 
         getBodyRowCells(row).forEach((cell) => {
-          updatePart(cell, row === visibleRows.at(0), `first-${section}-row-cell`);
-          updatePart(cell, row === visibleRows.at(-1), `last-${section}-row-cell`);
+          updatePart(cell, `first-${section}-row-cell`, row === visibleRows.at(0));
+          updatePart(cell, `last-${section}-row-cell`, row === visibleRows.at(-1));
         });
       });
     }
@@ -783,7 +787,6 @@ export const GridMixin = (superClass) =>
 
       if (loading) {
         // Run style generators for the loading row to have custom names cleared
-        this._generateCellClassNames(row);
         this._generateCellPartNames(row);
       }
     }
@@ -814,7 +817,6 @@ export const GridMixin = (superClass) =>
 
       this.__updateRowStateParts(row, model);
 
-      this._generateCellClassNames(row, model);
       this._generateCellPartNames(row, model);
       this._filterDragAndDrop(row, model);
       this.__updateDragSourceParts(row, model);

package/src/vaadin-grid-row-details-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 } from './vaadin-grid-helpers.js';
+import { iterateChildren, updatePart } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -109,7 +109,8 @@ export const RowDetailsMixin = (superClass) =>
      * @protected
      */
     _configureDetailsCell(cell) {
-      cell.setAttribute('part', 'cell details-cell');
+      updatePart(cell, 'cell', true);
+      updatePart(cell, 'details-cell', true);
       // Freeze the details cell, so that it does not scroll horizontally
       // with the normal cells. This way it looks less weird.
       cell.toggleAttribute('frozen', true);

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

@@ -178,13 +178,17 @@ export const ScrollMixin = (superClass) =>
         return;
       }
 
-      const dstRect = element.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+      const elementComputedStyle = getComputedStyle(element);
+      const elementTop = elementRect.top + parseInt(elementComputedStyle.scrollMarginTop || 0);
+      const elementBottom = elementRect.bottom + parseInt(elementComputedStyle.scrollMarginBottom || 0);
+
       const footerTop = this.$.footer.getBoundingClientRect().top;
       const headerBottom = this.$.header.getBoundingClientRect().bottom;
-      if (dstRect.bottom > footerTop) {
-        this.$.table.scrollTop += dstRect.bottom - footerTop;
-      } else if (dstRect.top < headerBottom) {
-        this.$.table.scrollTop -= headerBottom - dstRect.top;
+      if (elementBottom > footerTop) {
+        this.$.table.scrollTop += elementBottom - footerTop;
+      } else if (elementTop < headerBottom) {
+        this.$.table.scrollTop -= headerBottom - elementTop;
       }
     }
 
@@ -450,6 +454,16 @@ export const ScrollMixin = (superClass) =>
         // Update the horizontal scroll position property of the focused row
         this.__updateRowScrollPositionProperty(focusedRow);
       }
+
+      const lastHeaderRow = this.$.header.querySelector("[part~='last-header-row']");
+      if (lastHeaderRow) {
+        this.__updateRowScrollPositionProperty(lastHeaderRow);
+      }
+
+      const firstFooterRow = this.$.footer.querySelector("[part~='first-footer-row']");
+      if (firstFooterRow) {
+        this.__updateRowScrollPositionProperty(firstFooterRow);
+      }
     }
 
     /**

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

@@ -9,36 +9,11 @@ import type { GridColumn } from './vaadin-grid-column.js';
 
 export type GridCellPartNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
 
-/**
- * @deprecated Use `GridCellPartNameGenerator` type and `cellPartNameGenerator` API instead.
- */
-export type GridCellClassNameGenerator<TItem> = GridCellPartNameGenerator<TItem>;
-
 export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<StylingMixinClass<TItem>> & T;
 
 export declare class StylingMixinClass<TItem> {
-  /**
-   * A function that allows generating CSS class names for grid cells
-   * based on their row and column. The return value should be the generated
-   * class name as a string, or multiple class names separated by whitespace
-   * characters.
-   *
-   * Receives two arguments:
-   * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
-   * - `model` The object with the properties related with
-   *   the rendered item, contains:
-   *   - `model.index` The index of the item.
-   *   - `model.item` The item.
-   *   - `model.expanded` Sublevel toggle state.
-   *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
-   *   - `model.selected` Selected state.
-   *
-   * @deprecated Use `cellPartNameGenerator` instead.
-   */
-  cellClassNameGenerator: GridCellClassNameGenerator<TItem> | null | undefined;
-
   /**
    * A function that allows generating CSS `part` names for grid cells in Shadow DOM based
    * on their row and column, for styling from outside using the `::part()` selector.
@@ -58,16 +33,6 @@ export declare class StylingMixinClass<TItem> {
    */
   cellPartNameGenerator: GridCellPartNameGenerator<TItem> | null | undefined;
 
-  /**
-   * Runs the `cellClassNameGenerator` for the visible cells.
-   * If the generator depends on varying conditions, you need to
-   * call this function manually in order to update the styles when
-   * the conditions change.
-   *
-   * @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
-   */
-  generateCellClassNames(): void;
-
   /**
    * Runs the `cellPastNameGenerator` for the visible cells.
    * If the generator depends on varying conditions, you need to

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

@@ -12,30 +12,6 @@ export const StylingMixin = (superClass) =>
   class StylingMixin extends superClass {
     static get properties() {
       return {
-        /**
-         * A function that allows generating CSS class names for grid cells
-         * based on their row and column. The return value should be the generated
-         * class name as a string, or multiple class names separated by whitespace
-         * characters.
-         *
-         * Receives two arguments:
-         * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
-         * - `model` The object with the properties related with
-         *   the rendered item, contains:
-         *   - `model.index` The index of the item.
-         *   - `model.item` The item.
-         *   - `model.expanded` Sublevel toggle state.
-         *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
-         *   - `model.selected` Selected state.
-         *
-         * @type {GridCellClassNameGenerator | null | undefined}
-         * @deprecated Use `cellPartNameGenerator` instead.
-         */
-        cellClassNameGenerator: {
-          type: Function,
-          sync: true,
-        },
-
         /**
          * A function that allows generating CSS `part` names for grid cells in Shadow DOM based
          * on their row and column, for styling from outside using the `::part()` selector.
@@ -63,15 +39,7 @@ export const StylingMixin = (superClass) =>
     }
 
     static get observers() {
-      return [
-        '__cellClassNameGeneratorChanged(cellClassNameGenerator)',
-        '__cellPartNameGeneratorChanged(cellPartNameGenerator)',
-      ];
-    }
-
-    /** @private */
-    __cellClassNameGeneratorChanged() {
-      this.generateCellClassNames();
+      return ['__cellPartNameGeneratorChanged(cellPartNameGenerator)'];
     }
 
     /** @private */
@@ -79,22 +47,6 @@ export const StylingMixin = (superClass) =>
       this.generateCellPartNames();
     }
 
-    /**
-     * Runs the `cellClassNameGenerator` for the visible cells.
-     * If the generator depends on varying conditions, you need to
-     * call this function manually in order to update the styles when
-     * the conditions change.
-     *
-     * @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
-     */
-    generateCellClassNames() {
-      iterateChildren(this.$.items, (row) => {
-        if (!row.hidden) {
-          this._generateCellClassNames(row, this.__getRowModel(row));
-        }
-      });
-    }
-
     /**
      * Runs the `cellPartNameGenerator` for the visible cells.
      * If the generator depends on varying conditions, you need to
@@ -109,29 +61,13 @@ export const StylingMixin = (superClass) =>
       });
     }
 
-    /** @private */
-    _generateCellClassNames(row, model) {
-      iterateRowCells(row, (cell) => {
-        if (cell.__generatedClasses) {
-          cell.__generatedClasses.forEach((className) => cell.classList.remove(className));
-        }
-        if (this.cellClassNameGenerator && !row.hasAttribute('loading')) {
-          const result = this.cellClassNameGenerator(cell._column, model);
-          cell.__generatedClasses = result && result.split(' ').filter((className) => className.length > 0);
-          if (cell.__generatedClasses) {
-            cell.__generatedClasses.forEach((className) => cell.classList.add(className));
-          }
-        }
-      });
-    }
-
     /** @private */
     _generateCellPartNames(row, model) {
       iterateRowCells(row, (cell) => {
         if (cell.__generatedParts) {
           cell.__generatedParts.forEach((partName) => {
             // Remove previously generated part names
-            updatePart(cell, null, partName);
+            updatePart(cell, partName, null);
           });
         }
         if (this.cellPartNameGenerator && !row.hasAttribute('loading')) {
@@ -140,7 +76,7 @@ export const StylingMixin = (superClass) =>
           if (cell.__generatedParts) {
             cell.__generatedParts.forEach((partName) => {
               // Add the newly generated names to part
-              updatePart(cell, true, partName);
+              updatePart(cell, partName, true);
             });
           }
         }

package/src/vaadin-grid.js

@@ -302,7 +302,7 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
           <tbody id="items" role="rowgroup"></tbody>
           <tbody id="emptystatebody">
             <tr id="emptystaterow">
-              <td part="empty-state" id="emptystatecell" tabindex="0">
+              <td part="empty-state" class="empty-state" id="emptystatecell" tabindex="0">
                 <slot name="empty-state" id="emptystateslot"></slot>
               </td>
             </tr>
@@ -310,7 +310,7 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
           <tfoot id="footer" role="rowgroup"></tfoot>
         </table>
 
-        <div part="reorder-ghost"></div>
+        <div part="reorder-ghost" class="reorder-ghost"></div>
       </div>
 
       <slot name="tooltip"></slot>