@vaadin/grid 23.2.0-alpha2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.2.0-alpha2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -43,20 +43,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.2.0-alpha2",
-    "@vaadin/component-base": "23.2.0-alpha2",
-    "@vaadin/lit-renderer": "23.2.0-alpha2",
-    "@vaadin/text-field": "23.2.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha2"
+    "@vaadin/checkbox": "23.2.0-alpha3",
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/lit-renderer": "23.2.0-alpha3",
+    "@vaadin/text-field": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha2",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

package/src/lit/column-renderer-directives.d.ts

@@ -4,11 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* eslint-disable max-classes-per-file */
-import { TemplateResult } from 'lit';
-import { DirectiveResult } from 'lit/directive';
-import { LitRenderer, LitRendererDirective } from '@vaadin/lit-renderer';
-import { GridItemModel } from '../vaadin-grid.js';
-import { GridColumn } from '../vaadin-grid-column.js';
+import type { TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive';
+import type { LitRenderer } from '@vaadin/lit-renderer';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import type { GridItemModel } from '../vaadin-grid.js';
+import type { GridColumn } from '../vaadin-grid-column.js';
 
 export type GridColumnBodyLitRenderer<TItem> = (
   item: TItem,

package/src/lit/renderer-directives.d.ts

@@ -3,10 +3,10 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { TemplateResult } from 'lit';
-import { DirectiveResult } from 'lit/directive';
+import type { TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
-import { Grid, GridItemModel } from '../vaadin-grid.js';
+import type { Grid, GridItemModel } from '../vaadin-grid.js';
 
 export type GridRowDetailsLitRenderer<TItem> = (item: TItem, model: GridItemModel<TItem>, grid: Grid) => TemplateResult;
 

package/src/vaadin-grid-active-item-mixin.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 { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ActiveItemMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,

package/src/vaadin-grid-array-data-provider-mixin.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 { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ArrayDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,

package/src/vaadin-grid-column-group.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 { GridDefaultItem } from './vaadin-grid.js';
-import { ColumnBaseMixinClass } from './vaadin-grid-column.js';
+import type { GridDefaultItem } from './vaadin-grid.js';
+import type { ColumnBaseMixinClass } from './vaadin-grid-column.js';
 
 /**
  * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and

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

@@ -156,7 +156,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       const _rootColumns = rootColumns.slice(0);
 
       if (!order) {
-        _rootColumns.forEach((column) => (column._order = 0));
+        _rootColumns.forEach((column) => {
+          column._order = 0;
+        });
         return;
       }
       // The parent column order number cascades downwards to it's children
@@ -190,7 +192,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       return;
     }
 
-    rootColumns.forEach((column) => (column._reorderStatus = reorderStatus));
+    rootColumns.forEach((column) => {
+      column._reorderStatus = reorderStatus;
+    });
   }
 
   /** @private */
@@ -199,7 +203,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       return;
     }
 
-    rootColumns.forEach((column) => (column.resizable = resizable));
+    rootColumns.forEach((column) => {
+      column.resizable = resizable;
+    });
   }
 
   /** @private */
@@ -217,7 +223,10 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
     if (this._visibleChildColumns.length > 0) {
       const width = this._visibleChildColumns
-        .reduce((prev, curr) => (prev += ` + ${(curr.width || '0px').replace('calc', '')}`), '')
+        .reduce((prev, curr) => {
+          prev += ` + ${(curr.width || '0px').replace('calc', '')}`;
+          return prev;
+        }, '')
         .substring(3);
       this._setWidth(`calc(${width})`);
     } else {
@@ -235,7 +244,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
     // Don’t propagate the default `false` value.
     if (frozen !== false) {
-      Array.from(rootColumns).forEach((col) => (col.frozen = frozen));
+      Array.from(rootColumns).forEach((col) => {
+        col.frozen = frozen;
+      });
     }
   }
 
@@ -247,7 +258,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
     // Don’t propagate the default `false` value.
     if (frozenToEnd !== false) {
-      Array.from(rootColumns).forEach((col) => (col.frozenToEnd = frozenToEnd));
+      Array.from(rootColumns).forEach((col) => {
+        col.frozenToEnd = frozenToEnd;
+      });
     }
   }
 
@@ -276,7 +289,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   /** @private */
   _synchronizeHidden() {
     if (this._childColumns && !this._preventHiddenSynchronization) {
-      this._childColumns.forEach((column) => (column.hidden = this.hidden));
+      this._childColumns.forEach((column) => {
+        column.hidden = this.hidden;
+      });
     }
   }
 

package/src/vaadin-grid-column-reordering-mixin.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 { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ColumnReorderingMixin<T extends Constructor<HTMLElement>>(
   base: T,

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

@@ -263,7 +263,9 @@ export const ColumnReorderingMixin = (superClass) =>
         'border',
         'flex-direction',
         'overflow',
-      ].forEach((propertyName) => (ghost.style[propertyName] = style[propertyName]));
+      ].forEach((propertyName) => {
+        ghost.style[propertyName] = style[propertyName];
+      });
       return ghost;
     }
 
@@ -274,7 +276,9 @@ export const ColumnReorderingMixin = (superClass) =>
       }
 
       // Reset all column orders
-      columnTree[0].forEach((column) => (column._order = 0));
+      columnTree[0].forEach((column) => {
+        column._order = 0;
+      });
       // Set order numbers to top-level columns
       updateColumnOrders(columnTree[0], this._orderBaseScope, 0);
     }
@@ -287,7 +291,9 @@ export const ColumnReorderingMixin = (superClass) =>
     _setSiblingsReorderStatus(column, status) {
       Array.from(column.parentNode.children)
         .filter((child) => /column/.test(child.localName) && this._isSwapAllowed(child, column))
-        .forEach((sibling) => (sibling._reorderStatus = status));
+        .forEach((sibling) => {
+          sibling._reorderStatus = status;
+        });
     }
 
     /** @protected */

package/src/vaadin-grid-column.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 { GridDefaultItem, GridItemModel } from './vaadin-grid.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { GridDefaultItem, GridItemModel } from './vaadin-grid.js';
 
 export type GridBodyRenderer<TItem> = (
   root: HTMLElement,

package/src/vaadin-grid-column.js

@@ -312,12 +312,16 @@ export const ColumnBaseMixin = (superClass) =>
         this.parentElement._columnPropChanged('flexGrow');
       }
 
-      this._allCells.forEach((cell) => (cell.style.flexGrow = flexGrow));
+      this._allCells.forEach((cell) => {
+        cell.style.flexGrow = flexGrow;
+      });
     }
 
     /** @private */
     _orderChanged(order) {
-      this._allCells.forEach((cell) => (cell.style.order = order));
+      this._allCells.forEach((cell) => {
+        cell.style.order = order;
+      });
     }
 
     /** @private */
@@ -326,7 +330,9 @@ export const ColumnBaseMixin = (superClass) =>
         this.parentElement._columnPropChanged('width');
       }
 
-      this._allCells.forEach((cell) => (cell.style.width = width));
+      this._allCells.forEach((cell) => {
+        cell.style.width = width;
+      });
     }
 
     /** @private */

package/src/vaadin-grid-data-provider-mixin.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 { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 import { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 export { GridSorterDirection };

package/src/vaadin-grid-drag-and-drop-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 { GridItemModel } from './vaadin-grid.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { GridItemModel } from './vaadin-grid.js';
 
 export type GridDragAndDropFilter<TItem> = (model: GridItemModel<TItem>) => boolean;
 

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

@@ -280,7 +280,9 @@ export const DragAndDropMixin = (superClass) =>
         if (scrollTopChanged) {
           this.__dndAutoScrolling = true;
           // Disallow more auto-scrolls within 20ms
-          setTimeout(() => (this.__dndAutoScrolling = false), 20);
+          setTimeout(() => {
+            this.__dndAutoScrolling = false;
+          }, 20);
           return true;
         }
       }

package/src/vaadin-grid-event-context-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 { GridColumn } from './vaadin-grid-column.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { GridColumn } from './vaadin-grid-column.js';
 
 export interface GridEventContext<TItem> {
   section?: 'body' | 'header' | 'footer' | 'details';

package/src/vaadin-grid-filter-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-keyboard-navigation-mixin.js

@@ -95,7 +95,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 +372,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 +396,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 +471,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);
@@ -746,10 +748,11 @@ export const KeyboardNavigationMixin = (superClass) =>
       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 +768,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,

package/src/vaadin-grid-scroll-mixin.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 { 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>;
 

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';
 
 /**

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

@@ -185,7 +185,9 @@ class GridSelectionColumn extends GridColumn {
     }
 
     if (selectAll && Array.isArray(this._grid.items)) {
-      this.__withFilteredItemsArray((items) => (this._grid.selectedItems = items));
+      this.__withFilteredItemsArray((items) => {
+        this._grid.selectedItems = items;
+      });
     } else {
       this._grid.selectedItems = [];
     }

package/src/vaadin-grid-selection-mixin.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 { 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,

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.

package/src/vaadin-grid-sort-mixin.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 { 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>;
 
@@ -13,4 +13,20 @@ export declare class SortMixinClass {
    * @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: 'prepend' | 'append';
 }

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

@@ -21,6 +21,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: 'prepend',
+        },
+
         /**
          * @type {!Array<!GridSorterDefinition>}
          * @protected
@@ -48,6 +67,7 @@ export const SortMixin = (superClass) =>
     _onSorterChanged(e) {
       const sorter = e.target;
       e.stopPropagation();
+      sorter._grid = this;
       this.__updateSorter(sorter);
       this.__applySorters();
     }
@@ -67,7 +87,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 +121,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.js

@@ -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,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 { 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;
 

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.d.ts

@@ -3,15 +3,16 @@
  * 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 { 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 +20,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,

package/src/vaadin-grid.js

@@ -708,7 +708,9 @@ class Grid extends ElementMixin(
 
     const contentsFragment = document.createDocumentFragment();
 
-    Array.from(row.children).forEach((cell) => (cell._vacant = true));
+    Array.from(row.children).forEach((cell) => {
+      cell._vacant = true;
+    });
     row.innerHTML = '';
 
     columns