@vaadin/grid 24.2.0-beta2 → 24.2.0-beta3

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

@@ -3,18 +3,11 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 
-/**
- * Fired when the `value` property changes.
- */
-export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
-
-export interface GridFilterCustomEventMap {
-  'value-changed': GridFilterValueChangedEvent;
-}
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridFilterElementMixin, type GridFilterEventMap } from './vaadin-grid-filter-element-mixin.js';
 
-export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCustomEventMap {}
+export * from './vaadin-grid-filter-element-mixin.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -41,17 +34,7 @@ export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCusto
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class GridFilter extends ControllerMixin(HTMLElement) {
-  /**
-   * JS Path of the property in the item used for filtering the data.
-   */
-  path: string | null | undefined;
-
-  /**
-   * Current filter value.
-   */
-  value: string | null | undefined;
-
+declare class GridFilter extends GridFilterElementMixin(ThemableMixin(HTMLElement)) {
   addEventListener<K extends keyof GridFilterEventMap>(
     type: K,
     listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,

package/src/vaadin-grid-filter.js

@@ -5,11 +5,9 @@
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { timeOut } from '@vaadin/component-base/src/async.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -38,93 +36,16 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  *
  * @customElement
  * @extends HTMLElement
+ * @mixes GridFilterElementMixin
  */
-class GridFilter extends ControllerMixin(PolymerElement) {
+class GridFilter extends GridFilterElementMixin(ThemableMixin(PolymerElement)) {
   static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-flex;
-          max-width: 100%;
-        }
-
-        ::slotted(*) {
-          width: 100%;
-          box-sizing: border-box;
-        }
-      </style>
-      <slot></slot>
-    `;
+    return html`<slot></slot>`;
   }
 
   static get is() {
     return 'vaadin-grid-filter';
   }
-
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used for filtering the data.
-       */
-      path: String,
-
-      /**
-       * Current filter value.
-       */
-      value: {
-        type: String,
-        notify: true,
-      },
-
-      /** @private */
-      _textField: {
-        type: Object,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_filterChanged(path, value, _textField)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._filterController = new SlotController(this, '', 'vaadin-text-field', {
-      initializer: (field) => {
-        field.addEventListener('value-changed', (e) => {
-          this.value = e.detail.value;
-        });
-
-        this._textField = field;
-      },
-    });
-    this.addController(this._filterController);
-  }
-
-  /** @private */
-  _filterChanged(path, value, textField) {
-    if (path === undefined || value === undefined || !textField) {
-      return;
-    }
-    if (this._previousValue === undefined && value === '') {
-      return;
-    }
-
-    textField.value = value;
-    this._previousValue = value;
-
-    this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
-      this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
-    });
-  }
-
-  focus() {
-    if (this._textField) {
-      this._textField.focus();
-    }
-  }
 }
 
 defineCustomElement(GridFilter);

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._effectiveSize : activeRowGroup.children.length) - 1;
+      const maxRowIndex = (activeRowGroup === this.$.items ? this._flatSize : 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 dstItem = this._cache.getItemForIndex(dstRowIndex);
+          const { item: dstItem } = this._dataProviderController.getFlatIndexContext(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 DataProviderMixin(
-    ArrayDataProviderMixin(
+  class extends ArrayDataProviderMixin(
+    DataProviderMixin(
       DynamicColumnsMixin(
         ActiveItemMixin(
           ScrollMixin(
@@ -88,7 +88,7 @@ export const GridMixin = (superClass) =>
     static get observers() {
       return [
         '_columnTreeChanged(_columnTree, _columnTree.*)',
-        '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)',
+        '_flatSizeChanged(_flatSize, __virtualizer, _hasData, _columnTree)',
       ];
     }
 
@@ -294,20 +294,20 @@ export const GridMixin = (superClass) =>
     }
 
     /** @private */
-    _effectiveSizeChanged(effectiveSize, virtualizer, hasData, columnTree) {
+    _flatSizeChanged(flatSize, 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 = effectiveSize;
+        virtualizer.size = flatSize;
 
         // Request an update for the previous last row to have the "last" state removed
         virtualizer.update(previousSize - 1, previousSize - 1);
-        if (effectiveSize < previousSize) {
+        if (flatSize < previousSize) {
           // Size was decreased, so the new last row requires an explicit update
-          virtualizer.update(effectiveSize - 1, effectiveSize - 1);
+          virtualizer.update(flatSize - 1, flatSize - 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._cache.isLoading()) {
+      if (isElementHidden(this) || this._dataProviderController.isLoading()) {
         this.__pendingRecalculateColumnWidths = true;
         return;
       }
@@ -476,7 +476,7 @@ export const GridMixin = (superClass) =>
       if (
         this.__pendingRecalculateColumnWidths &&
         !isElementHidden(this) &&
-        !this._cache.isLoading() &&
+        !this._dataProviderController.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._effectiveSize - 1,
+        last: index === this._flatSize - 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._effectiveSize - 1, Math.max(0, index));
+      index = Math.min(this._flatSize - 1, Math.max(0, index));
       this.__virtualizer.scrollToIndex(index);
       this.__scrollIntoViewport(index);
     }

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

@@ -0,0 +1,44 @@
+/**
+ * @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 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 {}
+
+export declare function GridSorterMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<GridSorterMixinClass> & T;
+
+declare class GridSorterMixinClass {
+  /**
+   * 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;
+}

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

@@ -0,0 +1,198 @@
+/**
+ * @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';
+
+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);
+
+registerStyles(
+  'vaadin-grid-sorter',
+  css`
+    :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';
+    }
+  `,
+  { moduleId: 'vaadin-grid-sorter-styles' },
+);
+
+/**
+ * A mixin providing common sorter functionality.
+ *
+ * @polymerMixin
+ */
+export const GridSorterMixin = (superClass) =>
+  class GridSorterMixinClass extends superClass {
+    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';
+      }
+    }
+  };

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

@@ -5,26 +5,9 @@
  */
 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 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 {}
+export * from './vaadin-grid-sorter-mixin.js';
 
 /**
  * `<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -65,19 +48,7 @@ export interface GridSorterEventMap extends HTMLElementEventMap, GridSorterCusto
  * @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 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;
-
+declare class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(HTMLElement))) {
   addEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,