@vaadin/grid 24.2.3 → 24.3.0-alpha10

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * 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';
+
+export declare function GridTreeColumnMixin<TItem, T extends Constructor<HTMLElement>>(
+  superclass: T,
+): Constructor<GridTreeColumnMixinClass<TItem>> & T;
+
+export declare class GridTreeColumnMixinClass<TItem> {
+  /**
+   * JS Path of the property in the item used as text content for the tree toggle.
+   */
+  path: string | null | undefined;
+}

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

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { get } from '@vaadin/component-base/src/path-utils.js';
+
+/**
+ * @polymerMixin
+ */
+export const GridTreeColumnMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /**
+         * JS Path of the property in the item used as text content for the tree toggle.
+         */
+        path: {
+          type: String,
+          sync: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path)'];
+    }
+
+    constructor() {
+      super();
+
+      this.__boundOnExpandedChanged = this.__onExpandedChanged.bind(this);
+    }
+
+    /**
+     * Renders the grid tree toggle to the body cell
+     *
+     * @private
+     */
+    __defaultRenderer(root, _column, { item, expanded, level }) {
+      let toggle = root.firstElementChild;
+      if (!toggle) {
+        toggle = document.createElement('vaadin-grid-tree-toggle');
+        toggle.addEventListener('expanded-changed', this.__boundOnExpandedChanged);
+        root.appendChild(toggle);
+      }
+
+      toggle.__item = item;
+      toggle.__rendererExpanded = expanded;
+      toggle.expanded = expanded;
+      toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath);
+      toggle.textContent = this.__getToggleContent(this.path, item);
+      toggle.level = level;
+
+      if (toggle.performUpdate) {
+        toggle.performUpdate();
+      }
+    }
+
+    /**
+     * The tree column doesn't allow to use a custom renderer
+     * to override the content of body cells.
+     * It always renders the grid tree toggle to body cells.
+     *
+     * @override
+     */
+    _computeRenderer() {
+      return this.__defaultRenderer;
+    }
+
+    /**
+     * Expands or collapses the row once the tree toggle is switched.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onExpandedChanged(e) {
+      // Skip if the state is changed by the renderer.
+      if (e.detail.value === e.target.__rendererExpanded) {
+        return;
+      }
+
+      if (e.detail.value) {
+        this._grid.expandItem(e.target.__item);
+      } else {
+        this._grid.collapseItem(e.target.__item);
+      }
+    }
+
+    /** @private */
+    __isLeafItem(item, itemHasChildrenPath) {
+      return !item || !item[itemHasChildrenPath];
+    }
+
+    /** @private */
+    __getToggleContent(path, item) {
+      return path && get(path, item);
+    }
+  };

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

@@ -4,7 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
-import { GridColumn } from './vaadin-grid-column.js';
+import type { GridColumn, GridColumnMixin } from './vaadin-grid-column.js';
+import type { GridTreeColumnMixinClass } from './vaadin-grid-tree-column-mixin.js';
 
 /**
  * `<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>`
@@ -19,12 +20,13 @@ import { GridColumn } from './vaadin-grid-column.js';
  *    ...
  * ```
  */
-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;
-}
+
+declare class GridTreeColumn<TItem = GridDefaultItem> extends HTMLElement {}
+
+interface GridTreeColumn<TItem = GridDefaultItem>
+  extends GridTreeColumnMixinClass<TItem>,
+    GridColumnMixin<TItem, GridColumn<TItem>>,
+    GridColumn<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -5,8 +5,8 @@
  */
 import './vaadin-grid-tree-toggle.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { get } from '@vaadin/component-base/src/path-utils.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import { GridTreeColumnMixin } from './vaadin-grid-tree-column-mixin.js';
 
 /**
  * `<vaadin-grid-tree-column>` is a helper element for the `<vaadin-grid>`
@@ -22,91 +22,12 @@ import { GridColumn } from './vaadin-grid-column.js';
  * ```
  * @customElement
  * @extends GridColumn
+ * @mixes GridTreeColumnMixin
  */
-class GridTreeColumn extends GridColumn {
+class GridTreeColumn extends GridTreeColumnMixin(GridColumn) {
   static get is() {
     return 'vaadin-grid-tree-column';
   }
-
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used as text content for the tree toggle.
-       */
-      path: String,
-    };
-  }
-
-  static get observers() {
-    return ['_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__boundOnExpandedChanged = this.__onExpandedChanged.bind(this);
-  }
-
-  /**
-   * Renders the grid tree toggle to the body cell
-   *
-   * @private
-   */
-  __defaultRenderer(root, _column, { item, expanded, level }) {
-    let toggle = root.firstElementChild;
-    if (!toggle) {
-      toggle = document.createElement('vaadin-grid-tree-toggle');
-      toggle.addEventListener('expanded-changed', this.__boundOnExpandedChanged);
-      root.appendChild(toggle);
-    }
-
-    toggle.__item = item;
-    toggle.__rendererExpanded = expanded;
-    toggle.expanded = expanded;
-    toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath);
-    toggle.textContent = this.__getToggleContent(this.path, item);
-    toggle.level = level;
-  }
-
-  /**
-   * The tree column doesn't allow to use a custom renderer
-   * to override the content of body cells.
-   * It always renders the grid tree toggle to body cells.
-   *
-   * @override
-   */
-  _computeRenderer() {
-    return this.__defaultRenderer;
-  }
-
-  /**
-   * Expands or collapses the row once the tree toggle is switched.
-   * The listener handles only user-fired events.
-   *
-   * @private
-   */
-  __onExpandedChanged(e) {
-    // Skip if the state is changed by the renderer.
-    if (e.detail.value === e.target.__rendererExpanded) {
-      return;
-    }
-
-    if (e.detail.value) {
-      this._grid.expandItem(e.target.__item);
-    } else {
-      this._grid.collapseItem(e.target.__item);
-    }
-  }
-
-  /** @private */
-  __isLeafItem(item, itemHasChildrenPath) {
-    return !item || !item[itemHasChildrenPath];
-  }
-
-  /** @private */
-  __getToggleContent(path, item) {
-    return path && get(path, item);
-  }
 }
 
 defineCustomElement(GridTreeColumn);

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * Fired when the `expanded` property changes.
+ */
+export type GridTreeToggleExpandedChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface GridTreeToggleCustomEventMap {
+  'expanded-changed': GridTreeToggleExpandedChangedEvent;
+}
+
+export interface GridTreeToggleEventMap extends HTMLElementEventMap, GridTreeToggleCustomEventMap {}
+
+export declare function GridTreeToggleMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<GridTreeToggleMixinClass> & T;
+
+declare class GridTreeToggleMixinClass {
+  /**
+   * Current level of the tree represented with a horizontal offset
+   * of the toggle button.
+   */
+  level: number;
+
+  /**
+   * Hides the toggle icon and disables toggling a tree sublevel.
+   */
+  leaf: boolean;
+
+  /**
+   * Sublevel toggle state.
+   */
+  expanded: boolean;
+}

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

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * 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';
+import { isFocusable } from './vaadin-grid-active-item-mixin.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <style>
+    @font-face {
+      font-family: "vaadin-grid-tree-icons";
+      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQkAA0AAAAABrwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAECAAAABoAAAAcgHwa6EdERUYAAAPsAAAAHAAAAB4AJwAOT1MvMgAAAZQAAAA/AAAAYA8TBIJjbWFwAAAB8AAAAFUAAAFeGJvXWmdhc3AAAAPkAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAABLAAAAhIrPOhFoZWFkAAABMAAAACsAAAA2DsJI02hoZWEAAAFcAAAAHQAAACQHAgPHaG10eAAAAdQAAAAZAAAAHAxVAgBsb2NhAAACSAAAABIAAAASAIAAVG1heHAAAAF8AAAAGAAAACAACgAFbmFtZQAAAqgAAAECAAACTwflzbdwb3N0AAADrAAAADYAAABZQ7Ajh3icY2BkYGAA4twv3Vfi+W2+MnCzMIDANSOmbGSa2YEZRHEwMIEoAAoiB6sAeJxjYGRgYD7w/wADAwsDCDA7MDAyoAI2AFEEAtIAAAB4nGNgZGBg4GBgZgDRDAxMDGgAAAGbABB4nGNgZp7JOIGBlYGBaSbTGQYGhn4IzfiawZiRkwEVMAqgCTA4MDA+38d84P8BBgdmIAapQZJVYGAEAGc/C54AeJxjYYAAxlAIzQTELAwMBxgZGB0ACy0BYwAAAHicY2BgYGaAYBkGRgYQiADyGMF8FgYbIM3FwMHABISMDArP9/3/+/8/WJXC8z0Q9v8nEp5gHVwMMMAIMo+RDYiZoQJMQIKJARUA7WBhGN4AACFKDtoAAAAAAAAAAAgACAAQABgAJgA0AEIAAHichYvBEYBADAKBVHBjBT4swl9KS2k05o0XHd/yW1hAfBFwCv9sIlJu3nZaNS3PXAaXXHI8Lge7DlzF7C1RgXc7xkK6+gvcD2URmQB4nK2RQWoCMRiFX3RUqtCli65yADModOMBLLgQSqHddRFnQghIAnEUvEA3vUUP0LP0Fj1G+yb8R5iEhO9/ef/7FwFwj28o9EthiVp4hBlehcfUP4Ur8o/wBAv8CU+xVFvhOR7UB7tUdUdlVRJ6HnHWTnhM/V24In8JT5j/KzzFSi2E53hUz7jCcrcIiDDwyKSW1JEct2HdIPH1DFytbUM0PofWdNk5E5oUqb/Q6HHBiVGZpfOXkyUMEj5IyBuNmYZQjBobfsuassvnkKLe1OuBBj0VQ8cRni2xjLWsHaM0jrjx3peYA0/vrdmUYqe9iy7bzrX6eNP7Jh1SijX+AaUVbB8AAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSruZMzlHaB0q4A76kLlwAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKxJigiD6mhFTNowGACmcA/8AAA==) format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }
+  </style>
+`;
+
+document.head.appendChild(template.content);
+
+registerStyles(
+  'vaadin-grid-tree-toggle',
+  css`
+    :host {
+      display: inline-flex;
+      align-items: baseline;
+      max-width: 100%;
+
+      /* CSS API for :host */
+      --vaadin-grid-tree-toggle-level-offset: 1em;
+      --_collapsed-icon: '\\e7be\\00a0';
+    }
+
+    :host([dir='rtl']) {
+      --_collapsed-icon: '\\e7bd\\00a0';
+    }
+
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host(:not([leaf])) {
+      cursor: pointer;
+    }
+
+    #level-spacer,
+    [part='toggle'] {
+      flex: none;
+    }
+
+    #level-spacer {
+      display: inline-block;
+      width: calc(var(---level, '0') * var(--vaadin-grid-tree-toggle-level-offset));
+    }
+
+    [part='toggle']::before {
+      font-family: 'vaadin-grid-tree-icons';
+      line-height: 1em; /* make icon font metrics not affect baseline */
+    }
+
+    :host(:not([expanded])) [part='toggle']::before {
+      content: var(--_collapsed-icon);
+    }
+
+    :host([expanded]) [part='toggle']::before {
+      content: '\\e7bc\\00a0'; /* icon glyph + single non-breaking space */
+    }
+
+    :host([leaf]) [part='toggle'] {
+      visibility: hidden;
+    }
+
+    slot {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `,
+  { moduleId: 'vaadin-grid-tree-toggle-styles' },
+);
+
+/**
+ * @polymerMixin
+ */
+export const GridTreeToggleMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Current level of the tree represented with a horizontal offset
+         * of the toggle button.
+         * @type {number}
+         */
+        level: {
+          type: Number,
+          value: 0,
+          observer: '_levelChanged',
+          sync: true,
+        },
+
+        /**
+         * Hides the toggle icon and disables toggling a tree sublevel.
+         * @type {boolean}
+         */
+        leaf: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Sublevel toggle state.
+         * @type {boolean}
+         */
+        expanded: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          notify: true,
+          sync: true,
+        },
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addEventListener('click', (e) => this._onClick(e));
+    }
+
+    /** @private */
+    _onClick(e) {
+      if (this.leaf) {
+        return;
+      }
+      if (isFocusable(e.target) || e.target instanceof HTMLLabelElement) {
+        return;
+      }
+
+      e.preventDefault();
+      this.expanded = !this.expanded;
+    }
+
+    /** @private */
+    _levelChanged(level) {
+      const value = Number(level).toString();
+      this.style.setProperty('---level', value);
+    }
+  };

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

@@ -5,17 +5,10 @@
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { GridTreeToggleEventMap } from './vaadin-grid-tree-toggle-mixin.js';
+import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
 
-/**
- * Fired when the `expanded` property changes.
- */
-export type GridTreeToggleExpandedChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface GridTreeToggleCustomEventMap {
-  'expanded-changed': GridTreeToggleExpandedChangedEvent;
-}
-
-export interface GridTreeToggleEventMap extends HTMLElementEventMap, GridTreeToggleCustomEventMap {}
+export * from './vaadin-grid-tree-toggle-mixin.js';
 
 /**
  * `<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`
@@ -65,23 +58,7 @@ export interface GridTreeToggleEventMap extends HTMLElementEventMap, GridTreeTog
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  */
-declare class GridTreeToggle extends ThemableMixin(DirMixin(HTMLElement)) {
-  /**
-   * Current level of the tree represented with a horizontal offset
-   * of the toggle button.
-   */
-  level: number;
-
-  /**
-   * Hides the toggle icon and disables toggling a tree sublevel.
-   */
-  leaf: boolean;
-
-  /**
-   * Sublevel toggle state.
-   */
-  expanded: boolean;
-
+declare class GridTreeToggle extends GridTreeToggleMixin(ThemableMixin(DirMixin(HTMLElement))) {
   addEventListener<K extends keyof GridTreeToggleEventMap>(
     type: K,
     listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,

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

@@ -6,23 +6,8 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 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 template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    @font-face {
-      font-family: "vaadin-grid-tree-icons";
-      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQkAA0AAAAABrwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAECAAAABoAAAAcgHwa6EdERUYAAAPsAAAAHAAAAB4AJwAOT1MvMgAAAZQAAAA/AAAAYA8TBIJjbWFwAAAB8AAAAFUAAAFeGJvXWmdhc3AAAAPkAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAABLAAAAhIrPOhFoZWFkAAABMAAAACsAAAA2DsJI02hoZWEAAAFcAAAAHQAAACQHAgPHaG10eAAAAdQAAAAZAAAAHAxVAgBsb2NhAAACSAAAABIAAAASAIAAVG1heHAAAAF8AAAAGAAAACAACgAFbmFtZQAAAqgAAAECAAACTwflzbdwb3N0AAADrAAAADYAAABZQ7Ajh3icY2BkYGAA4twv3Vfi+W2+MnCzMIDANSOmbGSa2YEZRHEwMIEoAAoiB6sAeJxjYGRgYD7w/wADAwsDCDA7MDAyoAI2AFEEAtIAAAB4nGNgZGBg4GBgZgDRDAxMDGgAAAGbABB4nGNgZp7JOIGBlYGBaSbTGQYGhn4IzfiawZiRkwEVMAqgCTA4MDA+38d84P8BBgdmIAapQZJVYGAEAGc/C54AeJxjYYAAxlAIzQTELAwMBxgZGB0ACy0BYwAAAHicY2BgYGaAYBkGRgYQiADyGMF8FgYbIM3FwMHABISMDArP9/3/+/8/WJXC8z0Q9v8nEp5gHVwMMMAIMo+RDYiZoQJMQIKJARUA7WBhGN4AACFKDtoAAAAAAAAAAAgACAAQABgAJgA0AEIAAHichYvBEYBADAKBVHBjBT4swl9KS2k05o0XHd/yW1hAfBFwCv9sIlJu3nZaNS3PXAaXXHI8Lge7DlzF7C1RgXc7xkK6+gvcD2URmQB4nK2RQWoCMRiFX3RUqtCli65yADModOMBLLgQSqHddRFnQghIAnEUvEA3vUUP0LP0Fj1G+yb8R5iEhO9/ef/7FwFwj28o9EthiVp4hBlehcfUP4Ur8o/wBAv8CU+xVFvhOR7UB7tUdUdlVRJ6HnHWTnhM/V24In8JT5j/KzzFSi2E53hUz7jCcrcIiDDwyKSW1JEct2HdIPH1DFytbUM0PofWdNk5E5oUqb/Q6HHBiVGZpfOXkyUMEj5IyBuNmYZQjBobfsuassvnkKLe1OuBBj0VQ8cRni2xjLWsHaM0jrjx3peYA0/vrdmUYqe9iy7bzrX6eNP7Jh1SijX+AaUVbB8AAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSruZMzlHaB0q4A76kLlwAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKxJigiD6mhFTNowGACmcA/8AAA==) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild(template.content);
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
 
 /**
  * `<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`
@@ -75,138 +60,21 @@ document.head.appendChild(template.content);
  * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
+ * @mixes DirMixin
+ * @mixes GridTreeToggleMixin
  */
-class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
+class GridTreeToggle extends GridTreeToggleMixin(ThemableMixin(DirMixin(PolymerElement))) {
+  static get is() {
+    return 'vaadin-grid-tree-toggle';
+  }
+
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-flex;
-          align-items: baseline;
-          max-width: 100%;
-
-          /* CSS API for :host */
-          --vaadin-grid-tree-toggle-level-offset: 1em;
-          --_collapsed-icon: '\\e7be\\00a0';
-        }
-
-        :host([dir='rtl']) {
-          --_collapsed-icon: '\\e7bd\\00a0';
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host(:not([leaf])) {
-          cursor: pointer;
-        }
-
-        #level-spacer,
-        [part='toggle'] {
-          flex: none;
-        }
-
-        #level-spacer {
-          display: inline-block;
-          width: calc(var(---level, '0') * var(--vaadin-grid-tree-toggle-level-offset));
-        }
-
-        [part='toggle']::before {
-          font-family: 'vaadin-grid-tree-icons';
-          line-height: 1em; /* make icon font metrics not affect baseline */
-        }
-
-        :host(:not([expanded])) [part='toggle']::before {
-          content: var(--_collapsed-icon);
-        }
-
-        :host([expanded]) [part='toggle']::before {
-          content: '\\e7bc\\00a0'; /* icon glyph + single non-breaking space */
-        }
-
-        :host([leaf]) [part='toggle'] {
-          visibility: hidden;
-        }
-
-        slot {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      </style>
-
       <span id="level-spacer"></span>
       <span part="toggle"></span>
       <slot></slot>
     `;
   }
-
-  static get is() {
-    return 'vaadin-grid-tree-toggle';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Current level of the tree represented with a horizontal offset
-       * of the toggle button.
-       * @type {number}
-       */
-      level: {
-        type: Number,
-        value: 0,
-        observer: '_levelChanged',
-      },
-
-      /**
-       * Hides the toggle icon and disables toggling a tree sublevel.
-       * @type {boolean}
-       */
-      leaf: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Sublevel toggle state.
-       * @type {boolean}
-       */
-      expanded: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-        notify: true,
-      },
-    };
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addEventListener('click', (e) => this._onClick(e));
-  }
-
-  /** @private */
-  _onClick(e) {
-    if (this.leaf) {
-      return;
-    }
-    if (isFocusable(e.target) || e.target instanceof HTMLLabelElement) {
-      return;
-    }
-
-    e.preventDefault();
-    this.expanded = !this.expanded;
-  }
-
-  /** @private */
-  _levelChanged(level) {
-    const value = Number(level).toString();
-    this.style.setProperty('---level', value);
-  }
 }
 
 defineCustomElement(GridTreeToggle);

package/src/vaadin-grid.d.ts

@@ -156,6 +156,8 @@ export type GridDefaultItem = any;
  * Part name                  | Description
  * ---------------------------|----------------
  * `row`                      | Row in the internal table
+ * `body-row`                 | Body row in the internal table
+ * `collapsed-row`            | Collapsed row
  * `expanded-row`             | Expanded row
  * `selected-row`             | Selected row
  * `details-opened-row`       | Row with details open
@@ -185,6 +187,7 @@ export type GridDefaultItem = any;
  * `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
+ * `collapsed-row-cell`       | Cell in a collapsed 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)