@vaadin/grid 23.3.3 → 24.0.0-alpha10

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/checkbox/src/vaadin-checkbox.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-sorter.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

package/src/vaadin-grid-sorter.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-grid-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

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

@@ -1,13 +1,18 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 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';
 import type { GridItemModel } from './vaadin-grid.js';
 import type { GridColumn } from './vaadin-grid-column.js';
 
-export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
+export type GridCellPartNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
+
+/**
+ * @deprecated Use `GridPartCellGenerator` type and `cellPartNameGenerator` API instead.
+ */
+export type GridCellClassNameGenerator<TItem> = GridCellPartNameGenerator<TItem>;
 
 export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
@@ -29,14 +34,45 @@ export declare class StylingMixinClass<TItem> {
    *   - `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.
+   *
+   * The return value should be the generated part name as a string, or multiple part 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.
+   */
+  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
+   * call this function manually in order to update the styles when
+   * the conditions change.
+   */
+  generateCellPartNames(): void;
 }

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

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { iterateChildren, updatePart } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -28,13 +29,38 @@ export const StylingMixin = (superClass) =>
          *   - `model.selected` Selected state.
          *
          * @type {GridCellClassNameGenerator | null | undefined}
+         * @deprecated Use `cellPartNameGenerator` instead.
          */
         cellClassNameGenerator: Function,
+
+        /**
+         * 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.
+         *
+         * The return value should be the generated part name as a string, or multiple part 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 {GridCellPartNameGenerator | null | undefined}
+         */
+        cellPartNameGenerator: Function,
       };
     }
 
     static get observers() {
-      return ['__cellClassNameGeneratorChanged(cellClassNameGenerator)'];
+      return [
+        '__cellClassNameGeneratorChanged(cellClassNameGenerator)',
+        '__cellPartNameGeneratorChanged(cellPartNameGenerator)',
+      ];
     }
 
     /** @private */
@@ -42,21 +68,44 @@ export const StylingMixin = (superClass) =>
       this.generateCellClassNames();
     }
 
+    /** @private */
+    __cellPartNameGeneratorChanged() {
+      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() {
-      Array.from(this.$.items.children)
-        .filter((row) => !row.hidden && !row.hasAttribute('loading'))
-        .forEach((row) => this._generateCellClassNames(row, this.__getRowModel(row)));
+      iterateChildren(this.$.items, (row) => {
+        if (!row.hidden && !row.hasAttribute('loading')) {
+          this._generateCellClassNames(row, this.__getRowModel(row));
+        }
+      });
+    }
+
+    /**
+     * Runs the `cellPartNameGenerator` 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.
+     */
+    generateCellPartNames() {
+      iterateChildren(this.$.items, (row) => {
+        if (!row.hidden && !row.hasAttribute('loading')) {
+          this._generateCellPartNames(row, this.__getRowModel(row));
+        }
+      });
     }
 
     /** @private */
     _generateCellClassNames(row, model) {
-      Array.from(row.children).forEach((cell) => {
+      iterateChildren(row, (cell) => {
         if (cell.__generatedClasses) {
           cell.__generatedClasses.forEach((className) => cell.classList.remove(className));
         }
@@ -69,4 +118,26 @@ export const StylingMixin = (superClass) =>
         }
       });
     }
+
+    /** @private */
+    _generateCellPartNames(row, model) {
+      iterateChildren(row, (cell) => {
+        if (cell.__generatedParts) {
+          cell.__generatedParts.forEach((partName) => {
+            // Remove previously generated part names
+            updatePart(cell, null, partName);
+          });
+        }
+        if (this.cellPartNameGenerator) {
+          const result = this.cellPartNameGenerator(cell._column, model);
+          cell.__generatedParts = result && result.split(' ').filter((partName) => partName.length > 0);
+          if (cell.__generatedParts) {
+            cell.__generatedParts.forEach((partName) => {
+              // Add the newly generated names to part
+              updatePart(cell, true, partName);
+            });
+          }
+        }
+      });
+    }
   };

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
@@ -24,13 +24,6 @@ declare class GridTreeColumn<TItem = GridDefaultItem> extends GridColumn<TItem>
    * JS Path of the property in the item used as text content for the tree toggle.
    */
   path: string | null | undefined;
-
-  /**
-   * JS Path of the property in the item that indicates whether the item has child items.
-   * @attr {string} item-has-children-path
-   * @deprecated Use `grid.itemHasChildrenPath` instead.
-   */
-  itemHasChildrenPath: string | null | undefined;
 }
 
 declare global {

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-tree-toggle.js';
@@ -30,21 +30,11 @@ class GridTreeColumn extends GridColumn {
        * JS Path of the property in the item used as text content for the tree toggle.
        */
       path: String,
-
-      /**
-       * JS Path of the property in the item that indicates whether the item has child items.
-       * @attr {string} item-has-children-path
-       * @deprecated Use `grid.itemHasChildrenPath` instead.
-       */
-      itemHasChildrenPath: {
-        type: String,
-        observer: '_itemHasChildrenPathChanged',
-      },
     };
   }
 
   static get observers() {
-    return ['_onRendererOrBindingChanged(_renderer, _cells, _cells.*, path, itemHasChildrenPath)'];
+    return ['_onRendererOrBindingChanged(_renderer, _cells, _cells.*, path)'];
   }
 
   constructor() {
@@ -85,19 +75,6 @@ class GridTreeColumn extends GridColumn {
     return this.__defaultRenderer;
   }
 
-  /** @private */
-  _itemHasChildrenPathChanged(itemHasChildrenPath) {
-    if (itemHasChildrenPath) {
-      console.warn(
-        `WARNING: Since Vaadin 23, itemHasChildrenPath on <vaadin-grid-tree-column> is deprecated. Please set this property on the <vaadin-grid> instead.`,
-      );
-
-      if (this._grid) {
-        this._grid.itemHasChildrenPath = itemHasChildrenPath;
-      }
-    }
-  }
-
   /**
    * Expands or collapses the row once the tree toggle is switched.
    * The listener handles only user-fired events.

package/src/vaadin-grid-tree-toggle.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-grid.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
@@ -30,12 +30,16 @@ import { GridRowDetailsRenderer } from './vaadin-grid-row-details-mixin.js';
 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 { StylingMixinClass } from './vaadin-grid-styling-mixin.js';
-import { GridCellClassNameGenerator } from './vaadin-grid-styling-mixin.js';
+import type {
+  GridCellClassNameGenerator,
+  GridCellPartNameGenerator,
+  StylingMixinClass,
+} from './vaadin-grid-styling-mixin.js';
 
 export {
   GridBodyRenderer,
   GridCellClassNameGenerator,
+  GridCellPartNameGenerator,
   GridDataProvider,
   GridDataProviderCallback,
   GridDataProviderParams,
@@ -299,17 +303,56 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------------|----------------
- * `row` | Row in the internal table
- * `cell` | Cell in the internal table
- * `header-cell` | Header cell in the internal table
- * `body-cell` | Body cell in the internal table
- * `footer-cell` | Footer cell in the internal table
- * `details-cell` | Row details cell in the internal table
- * `focused-cell` | Focused cell in the internal table
- * `resize-handle` | Handle for resizing the columns
- * `reorder-ghost` | Ghost element of the header cell being dragged
+ * Part name                  | Description
+ * ---------------------------|----------------
+ * `row`                      | Row in the internal table
+ * `expanded-row`             | Expanded row
+ * `selected-row`             | Selected row
+ * `details-opened-row`       | Row with details open
+ * `odd-row`                  | Odd row
+ * `even-row`                 | Even row
+ * `first-row`                | The first body row
+ * `last-row`                 | The last body row
+ * `dragstart-row`            | Set on the row for one frame when drag is starting.
+ * `dragover-above-row`       | Set on the row when the a row is dragged over above
+ * `dragover-below-row`       | Set on the row when the a row is dragged over below
+ * `dragover-on-top-row`      | Set on the row when the a row is dragged over on top
+ * `drag-disabled-row`        | Set to a row that isn't available for dragging
+ * `drop-disabled-row`        | Set to a row that can't be dropped on top of
+ * `cell`                     | Cell in the internal table
+ * `header-cell`              | Header cell in the internal table
+ * `body-cell`                | Body cell in the internal table
+ * `footer-cell`              | Footer cell in the internal table
+ * `details-cell`             | Row details cell in the internal table
+ * `focused-cell`             | Focused cell in the internal table
+ * `odd-row-cell`             | Cell in an odd row
+ * `even-row-cell`            | Cell in an even row
+ * `first-row-cell`           | Cell in the first body row
+ * `last-row-cell`            | Cell in the last body row
+ * `first-header-row-cell`    | Cell in the first header row
+ * `first-footer-row-cell`    | Cell in the first footer row
+ * `last-header-row-cell`     | Cell in the last header row
+ * `last-footer-row-cell`     | Cell in the last footer row
+ * `loading-row-cell`         | Cell in a row that is waiting for data from data provider
+ * `selected-row-cell`        | Cell in a selected row
+ * `expanded-row-cell`        | Cell in an expanded row
+ * `details-opened-row-cell`  | Cell in an row with details open
+ * `dragstart-row-cell`       | Cell in a row that user started to drag (set for one frame)
+ * `dragover-above-row-cell`  | Cell in a row that has another row dragged over above
+ * `dragover-below-row-cell`  | Cell in a row that has another row dragged over below
+ * `dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top
+ * `drag-disabled-row-cell`   | Cell in a row that isn't available for dragging
+ * `drop-disabled-row-cell`   | Cell in a row that can't be dropped on top of
+ * `frozen-cell`              | Frozen cell in the internal table
+ * `frozen-to-end-cell`       | Frozen to end cell in the internal table
+ * `last-frozen-cell`         | Last frozen cell
+ * `first-frozen-to-end-cell` | First cell frozen to end
+ * `first-column-cell`        | First visible cell on a row
+ * `last-column-cell`         | Last visible cell on a row
+ * `reorder-allowed-cell`     | Cell in a column where another column can be reordered
+ * `reorder-dragging-cell`    | Cell in a column currently being reordered
+ * `resize-handle`            | Handle for resizing the columns
+ * `reorder-ghost`            | Ghost element of the header cell being dragged
  *
  * The following state attributes are available for styling:
  *
@@ -385,17 +428,6 @@ declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
    */
   requestContentUpdate(): void;
 
-  /**
-   * Updates the computed metrics and positioning of internal grid parts
-   * (row/details cell positioning etc). Needs to be invoked whenever the sizing of grid
-   * content changes asynchronously to ensure consistent appearance (e.g. when a
-   * contained image whose bounds aren't known beforehand finishes loading).
-   *
-   * @deprecated Since Vaadin 22, `notifyResize()` is deprecated. The component uses a
-   * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
-   */
-  notifyResize(): void;
-
   addEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,