@vaadin/grid 24.2.0-beta3 → 24.2.0-beta4

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

@@ -443,7 +443,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __navigateRows(dy, activeRow, activeCell) {
       const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
       const activeRowGroup = activeRow.parentNode;
-      const maxRowIndex = (activeRowGroup === this.$.items ? this._flatSize : activeRowGroup.children.length) - 1;
+      const maxRowIndex = (activeRowGroup === this.$.items ? this._effectiveSize : activeRowGroup.children.length) - 1;
 
       // Index of the destination row
       let dstRowIndex = Math.max(0, Math.min(currentRowIndex + dy, maxRowIndex));
@@ -476,7 +476,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Row details navigation logic
         if (activeRowGroup === this.$.items) {
           const item = activeRow._item;
-          const { item: dstItem } = this._dataProviderController.getFlatIndexContext(dstRowIndex);
+          const dstItem = this._cache.getItemForIndex(dstRowIndex);
           // Should we navigate to row details?
           if (isRowDetails) {
             dstIsRowDetails = dy === 0;

package/src/vaadin-grid-mixin.js

@@ -58,8 +58,8 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * @mixes DragAndDropMixin
  */
 export const GridMixin = (superClass) =>
-  class extends ArrayDataProviderMixin(
-    DataProviderMixin(
+  class extends DataProviderMixin(
+    ArrayDataProviderMixin(
       DynamicColumnsMixin(
         ActiveItemMixin(
           ScrollMixin(
@@ -88,7 +88,7 @@ export const GridMixin = (superClass) =>
     static get observers() {
       return [
         '_columnTreeChanged(_columnTree, _columnTree.*)',
-        '_flatSizeChanged(_flatSize, __virtualizer, _hasData, _columnTree)',
+        '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)',
       ];
     }
 
@@ -294,20 +294,20 @@ export const GridMixin = (superClass) =>
     }
 
     /** @private */
-    _flatSizeChanged(flatSize, virtualizer, hasData, columnTree) {
+    _effectiveSizeChanged(effectiveSize, virtualizer, hasData, columnTree) {
       if (virtualizer && hasData && columnTree) {
         // Changing the virtualizer size may result in the row with focus getting hidden
         const cell = this.shadowRoot.activeElement;
         const cellCoordinates = this.__getBodyCellCoordinates(cell);
 
         const previousSize = virtualizer.size || 0;
-        virtualizer.size = flatSize;
+        virtualizer.size = effectiveSize;
 
         // Request an update for the previous last row to have the "last" state removed
         virtualizer.update(previousSize - 1, previousSize - 1);
-        if (flatSize < previousSize) {
+        if (effectiveSize < previousSize) {
           // Size was decreased, so the new last row requires an explicit update
-          virtualizer.update(flatSize - 1, flatSize - 1);
+          virtualizer.update(effectiveSize - 1, effectiveSize - 1);
         }
 
         // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
@@ -463,7 +463,7 @@ export const GridMixin = (superClass) =>
       if (!this._columnTree) {
         return; // No columns
       }
-      if (isElementHidden(this) || this._dataProviderController.isLoading()) {
+      if (isElementHidden(this) || this._cache.isLoading()) {
         this.__pendingRecalculateColumnWidths = true;
         return;
       }
@@ -476,7 +476,7 @@ export const GridMixin = (superClass) =>
       if (
         this.__pendingRecalculateColumnWidths &&
         !isElementHidden(this) &&
-        !this._dataProviderController.isLoading() &&
+        !this._cache.isLoading() &&
         this.__hasRowsWithClientHeight()
       ) {
         this.__pendingRecalculateColumnWidths = false;
@@ -801,7 +801,7 @@ export const GridMixin = (superClass) =>
     _updateRowOrderParts(row, index = row.index) {
       updateBooleanRowStates(row, {
         first: index === 0,
-        last: index === this._flatSize - 1,
+        last: index === this._effectiveSize - 1,
         odd: index % 2 !== 0,
         even: index % 2 === 0,
       });

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

@@ -160,7 +160,7 @@ export const ScrollMixin = (superClass) =>
      * @protected
      */
     _scrollToFlatIndex(index) {
-      index = Math.min(this._flatSize - 1, Math.max(0, index));
+      index = Math.min(this._effectiveSize - 1, Math.max(0, index));
       this.__virtualizer.scrollToIndex(index);
       this.__scrollIntoViewport(index);
     }

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

@@ -5,9 +5,26 @@
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { type GridSorterEventMap, GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
 
-export * from './vaadin-grid-sorter-mixin.js';
+export type GridSorterDirection = 'asc' | 'desc' | null;
+
+/**
+ * Fired when the `path` or `direction` property changes.
+ */
+export type GridSorterChangedEvent = CustomEvent<{ shiftClick: boolean; fromSorterClick: boolean }>;
+
+/**
+ * Fired when the `direction` property changes.
+ */
+export type GridSorterDirectionChangedEvent = CustomEvent<{ value: GridSorterDirection }>;
+
+export interface GridSorterCustomEventMap {
+  'sorter-changed': GridSorterChangedEvent;
+
+  'direction-changed': GridSorterDirectionChangedEvent;
+}
+
+export interface GridSorterEventMap extends HTMLElementEventMap, GridSorterCustomEventMap {}
 
 /**
  * `<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -48,7 +65,19 @@ export * from './vaadin-grid-sorter-mixin.js';
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
  */
-declare class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(HTMLElement))) {
+declare class GridSorter extends ThemableMixin(DirMixin(HTMLElement)) {
+  /**
+   * JS Path of the property in the item used for sorting the data.
+   */
+  path: string | null | undefined;
+
+  /**
+   * How to sort the data.
+   * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
+   * descending direction, or `null` for not sorting the data.
+   */
+  direction: GridSorterDirection | null | undefined;
+
   addEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,

package/src/vaadin-grid-sorter.js

@@ -7,7 +7,21 @@ 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 { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <style>
+    @font-face {
+      font-family: 'vaadin-grid-sorter-icons';
+      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAA0AAAAABuwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEFAAAABkAAAAcfep+mUdERUYAAAP4AAAAHAAAAB4AJwAOT1MvMgAAAZgAAAA/AAAAYA8TBPpjbWFwAAAB7AAAAFUAAAFeF1fZ4mdhc3AAAAPwAAAACAAAAAgAAAAQZ2x5ZgAAAlgAAABcAAAAnMvguMloZWFkAAABMAAAAC8AAAA2C5Ap72hoZWEAAAFgAAAAHQAAACQGbQPHaG10eAAAAdgAAAAUAAAAHAoAAABsb2NhAAACRAAAABIAAAASAIwAYG1heHAAAAGAAAAAFgAAACAACwAKbmFtZQAAArQAAAECAAACZxWCgKhwb3N0AAADuAAAADUAAABZCrApUXicY2BkYGAA4rDECVrx/DZfGbhZGEDgyqNPOxH0/wNMq5kPALkcDEwgUQBWRA0dAHicY2BkYGA+8P8AAwMLAwgwrWZgZEAFbABY4QM8AAAAeJxjYGRgYOAAQiYGEICQSAAAAi8AFgAAeJxjYGY6yziBgZWBgWkm0xkGBoZ+CM34msGYkZMBFTAKoAkwODAwvmRiPvD/AIMDMxCD1CDJKjAwAgBktQsXAHicY2GAAMZQCM0EwqshbAALxAEKeJxjYGBgZoBgGQZGBhCIAPIYwXwWBhsgzcXAwcAEhIwMCi+Z/v/9/x+sSuElA4T9/4k4K1gHFwMMMILMY2QDYmaoABOQYGJABUA7WBiGNwAAJd4NIQAAAAAAAAAACAAIABAAGAAmAEAATgAAeJyNjLENgDAMBP9tIURJwQCMQccSZgk2i5fIYBDAidJjycXr7x5EPwE2wY8si7jmyBNXGo/bNBerxJNrpxhbO3/fEFpx8ZICpV+ghxJ74fAMe+h7Ox14AbrsHB14nK2QQWrDMBRER4mTkhQK3ZRQKOgCNk7oGQqhhEIX2WSlWEI1BAlkJ5CDdNsj5Ey9Rncdi38ES+jzNJo/HwTgATcoDEthhY3wBHc4CE+pfwsX5F/hGe7Vo/AcK/UhvMSz+mGXKhZU6pww8ISz3oWn1BvhgnwTnuEJf8Jz1OpFeIlX9YULDLdFi4ASHolkSR0iuYdjLak1vAequBhj21D61Nqyi6l3qWybGPjySbPHGScGJl6dP58MYcQRI0bts7mjebBqrFENH7t3qWtj0OuqHnXcW7b0HOTZFnKryRGW2hFX1m0O2vEM3opNMfTau+CS6Z3Vx6veNnEXY6jwDxhsc2gAAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSrpYEBlIbxjQDrzgsuAAAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKyoz1cD0o087YTQATOcIewAAAA==) format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }
+  </style>
+`;
+
+document.head.appendChild(template.content);
 
 /**
  * `<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -50,13 +64,50 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  *
  * @customElement
  * @extends HTMLElement
- * @mixes GridSorterMixin
- * @mixes ThemableMixin
- * @mixes DirMixin
  */
-class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolymerElement))) {
+class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
   static get template() {
     return html`
+      <style>
+        :host {
+          display: inline-flex;
+          cursor: pointer;
+          max-width: 100%;
+        }
+
+        [part='content'] {
+          flex: 1 1 auto;
+        }
+
+        [part='indicators'] {
+          position: relative;
+          align-self: center;
+          flex: none;
+        }
+
+        [part='order'] {
+          display: inline;
+          vertical-align: super;
+        }
+
+        [part='indicators']::before {
+          font-family: 'vaadin-grid-sorter-icons';
+          display: inline-block;
+        }
+
+        :host(:not([direction])) [part='indicators']::before {
+          content: '\\e901';
+        }
+
+        :host([direction='asc']) [part='indicators']::before {
+          content: '\\e900';
+        }
+
+        :host([direction='desc']) [part='indicators']::before {
+          content: '\\e902';
+        }
+      </style>
+
       <div part="content">
         <slot></slot>
       </div>
@@ -69,6 +120,131 @@ class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolymerElement))
   static get is() {
     return 'vaadin-grid-sorter';
   }
+
+  static get properties() {
+    return {
+      /**
+       * JS Path of the property in the item used for sorting the data.
+       */
+      path: String,
+
+      /**
+       * How to sort the data.
+       * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
+       * descending direction, or `null` for not sorting the data.
+       * @type {GridSorterDirection | undefined}
+       */
+      direction: {
+        type: String,
+        reflectToAttribute: true,
+        notify: true,
+        value: null,
+      },
+
+      /**
+       * @type {number | null}
+       * @protected
+       */
+      _order: {
+        type: Number,
+        value: null,
+      },
+
+      /** @private */
+      _isConnected: {
+        type: Boolean,
+        observer: '__isConnectedChanged',
+      },
+    };
+  }
+
+  static get observers() {
+    return ['_pathOrDirectionChanged(path, direction)'];
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+    this.addEventListener('click', this._onClick.bind(this));
+  }
+
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    this._isConnected = true;
+  }
+
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._isConnected = false;
+
+    if (!this.parentNode && this._grid) {
+      this._grid.__removeSorters([this]);
+    }
+  }
+
+  /** @private */
+  _pathOrDirectionChanged() {
+    this.__dispatchSorterChangedEvenIfPossible();
+  }
+
+  /** @private */
+  __isConnectedChanged(newValue, oldValue) {
+    if (oldValue === false) {
+      return;
+    }
+
+    this.__dispatchSorterChangedEvenIfPossible();
+  }
+
+  /** @private */
+  __dispatchSorterChangedEvenIfPossible() {
+    if (this.path === undefined || this.direction === undefined || !this._isConnected) {
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('sorter-changed', {
+        detail: { shiftClick: Boolean(this._shiftClick), fromSorterClick: Boolean(this._fromSorterClick) },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    // Cleaning up as a programatically sorting can be done after some user interaction
+    this._fromSorterClick = false;
+    this._shiftClick = false;
+  }
+
+  /** @private */
+  _getDisplayOrder(order) {
+    return order === null ? '' : order + 1;
+  }
+
+  /** @private */
+  _onClick(e) {
+    if (e.defaultPrevented) {
+      // Something else has already handled the click event, do nothing.
+      return;
+    }
+
+    const activeElement = this.getRootNode().activeElement;
+    if (this !== activeElement && this.contains(activeElement)) {
+      // Some focusable content inside the sorter was clicked, do nothing.
+      return;
+    }
+
+    e.preventDefault();
+    this._shiftClick = e.shiftKey;
+    this._fromSorterClick = true;
+    if (this.direction === 'asc') {
+      this.direction = 'desc';
+    } else if (this.direction === 'desc') {
+      this.direction = null;
+    } else {
+      this.direction = 'asc';
+    }
+  }
 }
 
 defineCustomElement(GridSorter);

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

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

@@ -5,10 +5,17 @@
  */
 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';
 
-export * 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 {}
 
 /**
  * `<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`
@@ -58,7 +65,23 @@ export * from './vaadin-grid-tree-toggle-mixin.js';
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  */
-declare class GridTreeToggle extends GridTreeToggleMixin(ThemableMixin(DirMixin(HTMLElement))) {
+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;
+
   addEventListener<K extends keyof GridTreeToggleEventMap>(
     type: K,
     listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,