@vaadin/grid 24.3.0-alpha1 → 24.3.0-alpha3

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));
@@ -842,9 +842,12 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
 
         if (cell) {
-          // Fire a public event for cell.
           const context = this.getEventContext(e);
-          cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
+          this.__pendingBodyCellFocus = this.loading && context.section === 'body';
+          if (!this.__pendingBodyCellFocus) {
+            // Fire a cell-focus event for the cell
+            cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
+          }
           this._focusedCell = cell._focusButton || cell;
 
           if (isKeyboardActive() && e.target === cell) {
@@ -858,6 +861,16 @@ export const KeyboardNavigationMixin = (superClass) =>
       this._detectFocusedItemIndex(e);
     }
 
+    /**
+     * @private
+     */
+    __dispatchPendingBodyCellFocus() {
+      // If the body cell focus was pending, dispatch the event once loading is done
+      if (this.__pendingBodyCellFocus && this.shadowRoot.activeElement === this._itemsFocusable) {
+        this._itemsFocusable.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      }
+    }
+
     /**
      * Get the focusable element depending on the current focus mode.
      * It can be a row, a cell, or a focusable div inside a cell.

package/src/vaadin-grid-mixin.js

@@ -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
@@ -339,7 +339,10 @@ export const GridMixin = (superClass) =>
         return 0;
       }
 
-      const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
+      const columnWidth = Math.max(
+        this.__getIntrinsicWidth(col),
+        this.__getDistributedWidth((col.assignedSlot || col).parentElement, col),
+      );
 
       // We're processing a regular grid-column and not a grid-column-group
       if (!innerColumn) {
@@ -697,7 +700,7 @@ export const GridMixin = (superClass) =>
                 column._emptyCells.push(cell);
               }
             }
-            cell.setAttribute('part', `cell ${section}-cell`);
+            cell.part.add('cell', `${section}-cell`);
           }
 
           if (!cell._content.parentElement) {
@@ -801,7 +804,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-selection-column-mixin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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';
+import { GridSelectionColumnBaseMixinClass } from './vaadin-grid-selection-column-base-mixin.js';
+
+/**
+ * Fired when the `selectAll` property changes.
+ */
+export type GridSelectionColumnSelectAllChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface GridSelectionColumnCustomEventMap {
+  'select-all-changed': GridSelectionColumnSelectAllChangedEvent;
+}
+
+export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSelectionColumnCustomEventMap {}
+
+export declare function GridSelectionColumnMixin<TItem, T extends Constructor<HTMLElement>>(
+  superclass: T,
+): Constructor<GridSelectionColumnMixinClass<TItem>> & T;
+
+export declare class GridSelectionColumnMixinClass<TItem> extends GridSelectionColumnBaseMixinClass<TItem> {}

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

@@ -0,0 +1,194 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
+
+/**
+ * @polymerMixin
+ */
+export const GridSelectionColumnMixin = (superClass) =>
+  class extends GridSelectionColumnBaseMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * The previous state of activeItem. When activeItem turns to `null`,
+         * previousActiveItem will have an Object with just unselected activeItem
+         * @private
+         */
+        __previousActiveItem: Object,
+      };
+    }
+
+    static get observers() {
+      return ['__onSelectAllChanged(selectAll)'];
+    }
+
+    constructor() {
+      super();
+
+      this.__boundOnActiveItemChanged = this.__onActiveItemChanged.bind(this);
+      this.__boundOnDataProviderChanged = this.__onDataProviderChanged.bind(this);
+      this.__boundOnSelectedItemsChanged = this.__onSelectedItemsChanged.bind(this);
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      this._grid.removeEventListener('active-item-changed', this.__boundOnActiveItemChanged);
+      this._grid.removeEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
+      this._grid.removeEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
+      this._grid.removeEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
+
+      super.disconnectedCallback();
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      if (this._grid) {
+        this._grid.addEventListener('active-item-changed', this.__boundOnActiveItemChanged);
+        this._grid.addEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
+        this._grid.addEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
+        this._grid.addEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
+      }
+    }
+
+    /** @private */
+    __onSelectAllChanged(selectAll) {
+      if (selectAll === undefined || !this._grid) {
+        return;
+      }
+
+      if (!this.__selectAllInitialized) {
+        // The initial value for selectAll property was applied, avoid clearing pre-selected items
+        this.__selectAllInitialized = true;
+        return;
+      }
+
+      if (this._selectAllChangeLock) {
+        return;
+      }
+
+      if (selectAll && this.__hasArrayDataProvider()) {
+        this.__withFilteredItemsArray((items) => {
+          this._grid.selectedItems = items;
+        });
+      } else {
+        this._grid.selectedItems = [];
+      }
+    }
+
+    /**
+     * Return true if array `a` contains all the items in `b`
+     * We need this when sorting or to preserve selection after filtering.
+     * @private
+     */
+    __arrayContains(a, b) {
+      return Array.isArray(a) && Array.isArray(b) && b.every((i) => a.includes(i));
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * selecting all items.
+     *
+     * @protected
+     * @override
+     */
+    _selectAll() {
+      this.selectAll = true;
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * deselecting all items.
+     *
+     * @protected
+     * @override
+     */
+    _deselectAll() {
+      this.selectAll = false;
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * selecting an item.
+     *
+     * @param {Object} item the item to select
+     * @protected
+     * @override
+     */
+    _selectItem(item) {
+      this._grid.selectItem(item);
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * deselecting an item.
+     *
+     * @param {Object} item the item to deselect
+     * @protected
+     * @override
+     */
+    _deselectItem(item) {
+      this._grid.deselectItem(item);
+    }
+
+    /** @private */
+    __onActiveItemChanged(e) {
+      const activeItem = e.detail.value;
+      if (this.autoSelect) {
+        const item = activeItem || this.__previousActiveItem;
+        if (item) {
+          this._grid._toggleItem(item);
+        }
+      }
+      this.__previousActiveItem = activeItem;
+    }
+
+    /** @private */
+    __hasArrayDataProvider() {
+      return Array.isArray(this._grid.items) && !!this._grid.dataProvider;
+    }
+
+    /** @private */
+    __onSelectedItemsChanged() {
+      this._selectAllChangeLock = true;
+      if (this.__hasArrayDataProvider()) {
+        this.__withFilteredItemsArray((items) => {
+          if (!this._grid.selectedItems.length) {
+            this.selectAll = false;
+            this._indeterminate = false;
+          } else if (this.__arrayContains(this._grid.selectedItems, items)) {
+            this.selectAll = true;
+            this._indeterminate = false;
+          } else {
+            this.selectAll = false;
+            this._indeterminate = true;
+          }
+        });
+      }
+      this._selectAllChangeLock = false;
+    }
+
+    /** @private */
+    __onDataProviderChanged() {
+      this._selectAllHidden = !Array.isArray(this._grid.items);
+    }
+
+    /**
+     * Assuming the grid uses an items array data provider, fetches all the filtered items
+     * from the data provider and invokes the callback with the resulting array.
+     *
+     * @private
+     */
+    __withFilteredItemsArray(callback) {
+      const params = {
+        page: 0,
+        pageSize: Infinity,
+        sortOrders: [],
+        filters: this._grid._mapFilters(),
+      };
+      this._grid.dataProvider(params, (items) => callback(items));
+    }
+  };

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

@@ -4,19 +4,14 @@
  * 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 { GridSelectionColumnBaseMixinClass } from './vaadin-grid-selection-column-base-mixin.js';
+import type { GridColumnMixin } from './vaadin-grid-column.js';
+import type { GridColumn } from './vaadin-grid-column.js';
+import type {
+  GridSelectionColumnEventMap,
+  GridSelectionColumnMixinClass,
+} from './vaadin-grid-selection-column-mixin.js';
 
-/**
- * Fired when the `selectAll` property changes.
- */
-export type GridSelectionColumnSelectAllChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface GridSelectionColumnCustomEventMap {
-  'select-all-changed': GridSelectionColumnSelectAllChangedEvent;
-}
-
-export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSelectionColumnCustomEventMap {}
+export * from './vaadin-grid-selection-column-mixin.js';
 
 /**
  * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
@@ -39,10 +34,13 @@ export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSe
  * selection for all the items at once.
  *
  * __The default content can also be overridden__
- *
- * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
-declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
+declare class GridSelectionColumn<TItem = GridDefaultItem> extends HTMLElement {}
+
+interface GridSelectionColumn<TItem = GridDefaultItem>
+  extends GridSelectionColumnMixinClass<TItem>,
+    GridColumnMixin<TItem, GridColumn<TItem>>,
+    GridColumn<TItem> {
   addEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
@@ -56,8 +54,6 @@ declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TI
   ): void;
 }
 
-interface GridSelectionColumn<TItem = GridDefaultItem> extends GridSelectionColumnBaseMixinClass<TItem> {}
-
 declare global {
   interface HTMLElementTagNameMap {
     'vaadin-grid-selection-column': GridSelectionColumn<GridDefaultItem>;