@vaadin/grid 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isKeyboardActive } from '@vaadin/component-base/src/focus-utils.js';
 
 /**
  * @polymerMixin
@@ -95,7 +96,9 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Reset stored order when moving focus with mouse.
         this._focusedColumnOrder = undefined;
       });
-      this.addEventListener('mouseup', () => (this._isMousedown = false));
+      this.addEventListener('mouseup', () => {
+        this._isMousedown = false;
+      });
     }
 
     /** @private */
@@ -370,7 +373,7 @@ export const KeyboardNavigationMixin = (superClass) =>
      * Focuses the target row after navigating by the given dy offset.
      * If the row is not in the viewport, it is first scrolled to.
      * @private
-     **/
+     */
     _onRowNavigation(activeRow, dy) {
       const { dstRow } = this.__navigateRows(dy, activeRow);
 
@@ -394,7 +397,7 @@ export const KeyboardNavigationMixin = (superClass) =>
      * Also returns information whether the details cell should be the target on the target row.
      * If the row is not in the viewport, it is first scrolled to.
      * @private
-     **/
+     */
     __navigateRows(dy, activeRow, activeCell) {
       const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
       const activeRowGroup = activeRow.parentNode;
@@ -469,7 +472,7 @@ export const KeyboardNavigationMixin = (superClass) =>
      * Focuses the target cell after navigating by the given dx and dy offset.
      * If the cell is not in the viewport, it is first scrolled to.
      * @private
-     **/
+     */
     _onCellNavigation(activeCell, dx, dy) {
       const activeRow = activeCell.parentNode;
       const { dstRow, dstIsRowDetails } = this.__navigateRows(dy, activeRow, activeCell);
@@ -582,6 +585,10 @@ export const KeyboardNavigationMixin = (superClass) =>
           this.toggleAttribute('navigating', true);
         }
       }
+
+      if (key === 'Escape') {
+        this._hideTooltip();
+      }
     }
 
     /** @private */
@@ -719,6 +726,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onFocusOut(e) {
       this.toggleAttribute('navigating', false);
       this._detectInteracting(e);
+      this._hideTooltip();
     }
 
     /** @private */
@@ -740,16 +748,21 @@ export const KeyboardNavigationMixin = (superClass) =>
           // Fire a public event for cell.
           const context = this.getEventContext(e);
           cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
+
+          if (isKeyboardActive() && e.target === cell) {
+            this._showTooltip(e);
+          }
         }
       }
 
       this._detectFocusedItemIndex(e);
     }
 
-    /** @private
+    /**
      * Enables interaction mode if a cells descendant receives focus or keyboard
      * input. Disables it if the event is not related to cell content.
      * @param {!KeyboardEvent|!FocusEvent} e
+     * @private
      */
     _detectInteracting(e) {
       const isInteracting = e.composedPath().some((el) => el.localName === 'vaadin-grid-cell-content');
@@ -765,11 +778,12 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
     }
 
-    /** @private
+    /**
      * Enables or disables the focus target of the containing section of the
      * grid from receiving focus, based on whether the user is interacting with
      * that section of the grid.
      * @param {HTMLElement} focusTarget
+     * @private
      */
     _updateGridSectionFocusTarget(focusTarget) {
       if (!focusTarget) {

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { Grid, GridItemModel } from './vaadin-grid.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { Grid, GridItemModel } from './vaadin-grid.js';
 
 export type GridRowDetailsRenderer<TItem> = (
   root: HTMLElement,
@@ -14,7 +14,7 @@ export type GridRowDetailsRenderer<TItem> = (
 
 export declare function RowDetailsMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<RowDetailsMixinClass<TItem>>;
+): Constructor<RowDetailsMixinClass<TItem>> & T;
 
 export declare class RowDetailsMixinClass<TItem> {
   /**

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

@@ -3,9 +3,9 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
-export declare function ScrollMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ScrollMixinClass>;
+export declare function ScrollMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ScrollMixinClass> & T;
 
 export declare class ScrollMixinClass {
   /**

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

@@ -69,7 +69,9 @@ export const ScrollMixin = (superClass) =>
         const itemsIndex = e.composedPath().indexOf(this.$.items);
         this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
       });
-      this.$.items.addEventListener('focusout', () => (this._rowWithFocusedElement = undefined));
+      this.$.items.addEventListener('focusout', () => {
+        this._rowWithFocusedElement = undefined;
+      });
 
       this.$.table.addEventListener('scroll', () => this._afterScroll());
     }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridDefaultItem } from './vaadin-grid.js';
+import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -57,13 +57,13 @@ declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TI
   addEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -184,8 +184,10 @@ class GridSelectionColumn extends GridColumn {
       return;
     }
 
-    if (selectAll && Array.isArray(this._grid.items)) {
-      this.__withFilteredItemsArray((items) => (this._grid.selectedItems = items));
+    if (selectAll && this.__hasArrayDataProvider()) {
+      this.__withFilteredItemsArray((items) => {
+        this._grid.selectedItems = items;
+      });
     } else {
       this._grid.selectedItems = [];
     }
@@ -254,10 +256,15 @@ class GridSelectionColumn extends GridColumn {
     this.__previousActiveItem = activeItem;
   }
 
+  /** @private */
+  __hasArrayDataProvider() {
+    return Array.isArray(this._grid.items) && !!this._grid.dataProvider;
+  }
+
   /** @private */
   __onSelectedItemsChanged() {
     this._selectAllChangeLock = true;
-    if (Array.isArray(this._grid.items)) {
+    if (this.__hasArrayDataProvider()) {
       this.__withFilteredItemsArray((items) => {
         if (!this._grid.selectedItems.length) {
           this.selectAll = false;

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

@@ -3,11 +3,11 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function SelectionMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<SelectionMixinClass<TItem>>;
+): Constructor<SelectionMixinClass<TItem>> & T;
 
 export declare class SelectionMixinClass<TItem> {
   /**

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

@@ -3,9 +3,9 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridDefaultItem } from './vaadin-grid.js';
+import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
-import { GridSorterDirection } from './vaadin-grid-sorter.js';
+import type { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 /**
  * Fired when the `direction` property changes.
@@ -49,13 +49,13 @@ declare class GridSortColumn<TItem = GridDefaultItem> extends GridColumn<TItem>
   addEventListener<K extends keyof GridSortColumnEventMap>(
     type: K,
     listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridSortColumnEventMap>(
     type: K,
     listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -3,14 +3,37 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
-export declare function SortMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SortMixinClass>;
+export declare function SortMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SortMixinClass> & T;
 
 export declare class SortMixinClass {
+  /**
+   * Sets the default multi-sort priority to use for all grid instances.
+   * This method should be called before creating any grid instances.
+   * Changing this setting does not affect the default for existing grids.
+   */
+  static setDefaultMultiSortPriority(priority: 'append' | 'prepend'): void;
+
   /**
    * When `true`, all `<vaadin-grid-sorter>` are applied for sorting.
    * @attr {boolean} multi-sort
    */
   multiSort: boolean;
+
+  /**
+   * Controls how columns are added to the sort order when using multi-sort.
+   * The sort order is visually indicated by numbers in grid sorters placed in column headers.
+   *
+   * By default, whenever an unsorted column is sorted, or the sort-direction of a column is
+   * changed, that column gets sort priority 1, thus affecting the priority for all the other
+   * sorted columns. This is identical to using `multi-sort-priority="prepend"`.
+   *
+   * Using this property allows to change this behavior so that sorting an unsorted column
+   * would add it to the "end" of the sort, and changing column's sort direction would retain
+   * it's previous priority. To set this, use `multi-sort-priority="append"`.
+   *
+   * @attr {string} multi-sort-priority
+   */
+  multiSortPriority: 'append' | 'prepend';
 }

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

@@ -4,6 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+let defaultMultiSortPriority = 'prepend';
+
 /**
  * @polymerMixin
  */
@@ -21,6 +23,25 @@ export const SortMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * Controls how columns are added to the sort order when using multi-sort.
+         * The sort order is visually indicated by numbers in grid sorters placed in column headers.
+         *
+         * By default, whenever an unsorted column is sorted, or the sort-direction of a column is
+         * changed, that column gets sort priority 1, thus affecting the priority for all the other
+         * sorted columns. This is identical to using `multi-sort-priority="prepend"`.
+         *
+         * Using this property allows to change this behavior so that sorting an unsorted column
+         * would add it to the "end" of the sort, and changing column's sort direction would retain
+         * it's previous priority. To set this, use `multi-sort-priority="append"`.
+         *
+         * @attr {string} multi-sort-priority
+         */
+        multiSortPriority: {
+          type: String,
+          value: () => defaultMultiSortPriority,
+        },
+
         /**
          * @type {!Array<!GridSorterDefinition>}
          * @protected
@@ -38,6 +59,17 @@ export const SortMixin = (superClass) =>
       };
     }
 
+    /**
+     * Sets the default multi-sort priority to use for all grid instances.
+     * This method should be called before creating any grid instances.
+     * Changing this setting does not affect the default for existing grids.
+     *
+     * @param {string} priority
+     */
+    static setDefaultMultiSortPriority(priority) {
+      defaultMultiSortPriority = ['append', 'prepend'].includes(priority) ? priority : 'prepend';
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -48,6 +80,7 @@ export const SortMixin = (superClass) =>
     _onSorterChanged(e) {
       const sorter = e.target;
       e.stopPropagation();
+      sorter._grid = this;
       this.__updateSorter(sorter);
       this.__applySorters();
     }
@@ -67,7 +100,29 @@ export const SortMixin = (superClass) =>
 
     /** @private */
     __updateSortOrders() {
-      this._sorters.forEach((sorter, index) => (sorter._order = this._sorters.length > 1 ? index : null), this);
+      this._sorters.forEach((sorter, index) => {
+        sorter._order = this._sorters.length > 1 ? index : null;
+      });
+    }
+
+    /** @private */
+    __appendSorter(sorter) {
+      if (!sorter.direction) {
+        this._removeArrayItem(this._sorters, sorter);
+      } else if (!this._sorters.includes(sorter)) {
+        this._sorters.push(sorter);
+      }
+
+      this.__updateSortOrders();
+    }
+
+    /** @private */
+    __prependSorter(sorter) {
+      this._removeArrayItem(this._sorters, sorter);
+      if (sorter.direction) {
+        this._sorters.unshift(sorter);
+      }
+      this.__updateSortOrders();
     }
 
     /** @private */
@@ -79,11 +134,11 @@ export const SortMixin = (superClass) =>
       sorter._order = null;
 
       if (this.multiSort) {
-        this._removeArrayItem(this._sorters, sorter);
-        if (sorter.direction) {
-          this._sorters.unshift(sorter);
+        if (this.multiSortPriority === 'append') {
+          this.__appendSorter(sorter);
+        } else {
+          this.__prependSorter(sorter);
         }
-        this.__updateSortOrders();
       } else if (sorter.direction) {
         const otherSorters = this._sorters.filter((s) => s !== sorter);
         this._sorters = [sorter];

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

@@ -76,13 +76,13 @@ declare class GridSorter extends ThemableMixin(DirMixin(HTMLElement)) {
   addEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-grid-sorter.js

@@ -7,9 +7,9 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: 'vaadin-grid-sorter-icons';
@@ -20,7 +20,7 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);
 
 /**
  * `<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -176,6 +176,10 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
   disconnectedCallback() {
     super.disconnectedCallback();
     this._isConnected = false;
+
+    if (!this.parentNode && this._grid) {
+      this._grid.__removeSorters([this]);
+    }
   }
 
   /** @private */

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

@@ -3,15 +3,15 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { GridItemModel } from './vaadin-grid.js';
-import { GridColumn } from './vaadin-grid-column.js';
+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 declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<StylingMixinClass<TItem>>;
+): Constructor<StylingMixinClass<TItem>> & T;
 
 export declare class StylingMixinClass<TItem> {
   /**

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

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

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

@@ -85,13 +85,13 @@ declare class GridTreeToggle extends ThemableMixin(DirMixin(HTMLElement)) {
   addEventListener<K extends keyof GridTreeToggleEventMap>(
     type: K,
     listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridTreeToggleEventMap>(
     type: K,
     listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -8,9 +8,9 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { isFocusable } from './vaadin-grid-active-item-mixin.js';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: "vaadin-grid-tree-icons";
@@ -21,7 +21,7 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);
 
 /**
  * `<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`

package/src/vaadin-grid.d.ts

@@ -3,15 +3,17 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
-import { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
-import { GridBodyRenderer, GridColumn, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
-import { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
+import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
+import type { GridColumn } from './vaadin-grid-column.js';
+import { GridBodyRenderer, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
+import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
+import type { DataProviderMixinClass } from './vaadin-grid-data-provider-mixin.js';
 import {
-  DataProviderMixinClass,
   GridDataProvider,
   GridDataProviderCallback,
   GridDataProviderParams,
@@ -19,18 +21,17 @@ import {
   GridSorterDefinition,
   GridSorterDirection,
 } from './vaadin-grid-data-provider-mixin.js';
-import {
-  DragAndDropMixinClass,
-  GridDragAndDropFilter,
-  GridDropLocation,
-  GridDropMode,
-} from './vaadin-grid-drag-and-drop-mixin.js';
-import { EventContextMixinClass, GridEventContext } from './vaadin-grid-event-context-mixin.js';
-import { GridRowDetailsRenderer, RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
-import { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
-import { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
-import { SortMixinClass } from './vaadin-grid-sort-mixin.js';
-import { GridCellClassNameGenerator, StylingMixinClass } from './vaadin-grid-styling-mixin.js';
+import type { DragAndDropMixinClass } from './vaadin-grid-drag-and-drop-mixin.js';
+import { GridDragAndDropFilter, GridDropLocation, GridDropMode } from './vaadin-grid-drag-and-drop-mixin.js';
+import type { EventContextMixinClass } from './vaadin-grid-event-context-mixin.js';
+import { GridEventContext } from './vaadin-grid-event-context-mixin.js';
+import type { RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
+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';
 
 export {
   GridBodyRenderer,
@@ -305,7 +306,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `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
+ * `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
@@ -323,7 +324,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `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/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
  * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
@@ -379,13 +380,13 @@ declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 
@@ -393,6 +394,7 @@ interface Grid<TItem = GridDefaultItem>
   extends DisabledMixinClass,
     ElementMixinClass,
     ThemableMixinClass,
+    ThemePropertyMixinClass,
     ActiveItemMixinClass<TItem>,
     ArrayDataProviderMixinClass<TItem>,
     DataProviderMixinClass<TItem>,