@vaadin/grid 24.0.0-alpha1 → 24.0.0-alpha11

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,34 +29,83 @@ 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 */
     __cellClassNameGeneratorChanged() {
       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));
         }
@@ -68,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';
@@ -192,7 +192,7 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
     if (this.leaf) {
       return;
     }
-    if (isFocusable(e.target)) {
+    if (isFocusable(e.target) || e.target instanceof HTMLLabelElement) {
       return;
     }
 

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,
@@ -86,6 +90,11 @@ export type GridColumnReorderEvent<TItem> = CustomEvent<{ columns: Array<GridCol
  */
 export type GridColumnResizeEvent<TItem> = CustomEvent<{ resizedColumn: GridColumn<TItem> }>;
 
+/**
+ * Fired when the `dataProvider` property changes.
+ */
+export type GridDataProviderChangedEvent<TItem> = CustomEvent<{ value: GridDataProvider<TItem> }>;
+
 /**
  * Fired when the `expandedItems` property changes.
  */
@@ -119,6 +128,11 @@ export type GridLoadingChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type GridSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
 
+/**
+ * Fired when the `size` property changes.
+ */
+export type GridSizeChangedEvent = CustomEvent<{ value: number }>;
+
 export interface GridCustomEventMap<TItem> {
   'active-item-changed': GridActiveItemChangedEvent<TItem>;
 
@@ -130,6 +144,8 @@ export interface GridCustomEventMap<TItem> {
 
   'column-resize': GridColumnResizeEvent<TItem>;
 
+  'data-provider-changed': GridDataProviderChangedEvent<TItem>;
+
   'expanded-items-changed': GridExpandedItemsChangedEvent<TItem>;
 
   'grid-dragstart': GridDragStartEvent<TItem>;
@@ -141,6 +157,8 @@ export interface GridCustomEventMap<TItem> {
   'loading-changed': GridLoadingChangedEvent;
 
   'selected-items-changed': GridSelectedItemsChangedEvent<TItem>;
+
+  'size-changed': GridSizeChangedEvent;
 }
 
 export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEventMap<TItem> {}
@@ -285,45 +303,86 @@ 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:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `loading` | Set when the grid is loading data from data provider | :host
- * `interacting` | Keyboard navigation in interaction mode | :host
- * `navigating` | Keyboard navigation in navigation mode | :host
- * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
- * `reordering` | Set when the grid's columns are being reordered | :host
- * `dragover` | Set when the grid (not a specific row) is dragged over | :host
- * `dragging-rows` | Set when grid rows are dragged  | :host
- * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
- * `frozen` | Frozen cell | cell
- * `last-frozen` | Last frozen cell | cell
- * `first-column` | First visible cell on a row | cell
- * `last-column` | Last visible cell on a row | cell
- * `selected` | Selected row | row
- * `expanded` | Expanded row | row
- * `details-opened` | Row with details open | row
- * `loading` | Row that is waiting for data from data provider | row
- * `odd` | Odd row | row
- * `first` | The first body row | row
- * `last` | The last body row | row
- * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
- * `dragover` | Set when the row is dragged over | row
- * `drag-disabled` | Set to a row that isn't available for dragging | row
- * `drop-disabled` | Set to a row that can't be dropped on top of | row
+ * Attribute              | Description                                                                                       | Part name
+ * -----------------------|---------------------------------------------------------------------------------------------------|-----------
+ * `loading`              | Set when the grid is loading data from data provider                                              | :host
+ * `interacting`          | Keyboard navigation in interaction mode                                                           | :host
+ * `navigating`           | Keyboard navigation in navigation mode                                                            | :host
+ * `overflow`             | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
+ * `reordering`           | Set when the grid's columns are being reordered                                                   | :host
+ * `dragover`             | Set when the grid (not a specific row) is dragged over                                            | :host
+ * `dragging-rows`        | Set when grid rows are dragged                                                                    | :host
+ * `reorder-status`       | Reflects the status of a cell while columns are being reordered                                   | cell
+ * `frozen`               | Frozen cell                                                                                       | cell
+ * `frozen-to-end`        | Cell frozen to end                                                                                | cell
+ * `last-frozen`          | Last frozen cell                                                                                  | cell
+ * `first-frozen-to-end`  | First cell frozen to end                                                                          | cell
+ * `first-column`         | First visible cell on a row                                                                       | cell
+ * `last-column`          | Last visible cell on a row                                                                        | cell
+ * `selected`             | Selected row                                                                                      | row
+ * `expanded`             | Expanded row                                                                                      | row
+ * `details-opened`       | Row with details open                                                                             | row
+ * `loading`              | Row that is waiting for data from data provider                                                   | row
+ * `odd`                  | Odd row                                                                                           | row
+ * `first`                | The first body row                                                                                | row
+ * `last`                 | The last body row                                                                                 | row
+ * `dragstart`            | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows  | row
+ * `dragover`             | Set when the row is dragged over                                                                  | row
+ * `drag-disabled`        | Set to a row that isn't available for dragging                                                    | row
+ * `drop-disabled`        | Set to a row that can't be dropped on top of                                                      | row
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
@@ -332,12 +391,14 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation.
  * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
  * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
+ * @fires {CustomEvent} data-provider-changed - Fired when the `dataProvider` property changes.
  * @fires {CustomEvent} expanded-items-changed - Fired when the `expandedItems` property changes.
  * @fires {CustomEvent} grid-dragstart - Fired when starting to drag grid rows.
  * @fires {CustomEvent} grid-dragend - Fired when the dragging of the rows ends.
  * @fires {CustomEvent} grid-drop - Fired when a drop occurs on top of the grid.
  * @fires {CustomEvent} loading-changed - Fired when the `loading` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
+ * @fires {CustomEvent} size-changed - Fired when the `size` property changes.
  */
 declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
   /**
@@ -367,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,