@vaadin/grid 24.3.0-alpha2 → 24.3.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.3.0-alpha2",
+  "version": "24.3.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -46,14 +46,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-alpha2",
-    "@vaadin/checkbox": "24.3.0-alpha2",
-    "@vaadin/component-base": "24.3.0-alpha2",
-    "@vaadin/lit-renderer": "24.3.0-alpha2",
-    "@vaadin/text-field": "24.3.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha2"
+    "@vaadin/a11y-base": "24.3.0-alpha4",
+    "@vaadin/checkbox": "24.3.0-alpha4",
+    "@vaadin/component-base": "24.3.0-alpha4",
+    "@vaadin/lit-renderer": "24.3.0-alpha4",
+    "@vaadin/text-field": "24.3.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha4",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0fd437292fa2a2f65e29b424d2456909ad2d684b"
+  "gitHead": "d6884bc788b98a4e8dfd14f3f399c6eb9022bd44"
 }

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

@@ -93,6 +93,20 @@ export declare class ColumnBaseMixinClass<TItem, Column extends ColumnBaseMixinC
    * - `column` The `<vaadin-grid-column>` element.
    */
   footerRenderer: GridHeaderFooterRenderer<TItem, Column> | null | undefined;
+
+  /**
+   * Custom part name for the header cell.
+   *
+   * @attr {string} header-part-name
+   */
+  headerPartName: string | null | undefined;
+
+  /**
+   * Custom part name for the footer cell.
+   *
+   * @attr {string} footer-part-name
+   */
+  footerPartName: string | null | undefined;
 }
 
 export interface GridColumnMixin<TItem, Column extends GridColumnMixinClass<TItem, Column>>

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

@@ -101,6 +101,24 @@ export const ColumnBaseMixin = (superClass) =>
           type: String,
         },
 
+        /**
+         * Custom part name for the header cell.
+         *
+         * @attr {string} header-part-name
+         */
+        headerPartName: {
+          type: String,
+        },
+
+        /**
+         * Custom part name for the footer cell.
+         *
+         * @attr {string} footer-part-name
+         */
+        footerPartName: {
+          type: String,
+        },
+
         /**
          * @type {boolean}
          * @protected
@@ -238,6 +256,7 @@ export const ColumnBaseMixin = (superClass) =>
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells.*)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)',
         '_rowHeaderChanged(rowHeader, _cells.*)',
+        '__headerFooterPartNameChanged(_headerCell, _footerCell, headerPartName, footerPartName)',
       ];
     }
 
@@ -487,7 +506,7 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _textAlignChanged(textAlign) {
-      if (textAlign === undefined) {
+      if (textAlign === undefined || this._grid === undefined) {
         return;
       }
       if (['start', 'end', 'center'].indexOf(textAlign) === -1) {
@@ -631,6 +650,22 @@ export const ColumnBaseMixin = (superClass) =>
       this._renderHeaderCellContent(headerRenderer, headerCell);
     }
 
+    /** @private */
+    __headerFooterPartNameChanged(headerCell, footerCell, headerPartName, footerPartName) {
+      [
+        { cell: headerCell, partName: headerPartName },
+        { cell: footerCell, partName: footerPartName },
+      ].forEach(({ cell, partName }) => {
+        if (cell) {
+          const customParts = cell.__customParts || [];
+          cell.part.remove(...customParts);
+
+          cell.__customParts = partName ? partName.trim().split(' ') : [];
+          cell.part.add(...cell.__customParts);
+        }
+      });
+    }
+
     /**
      * Renders the content of body cells using a renderer.
      *

package/src/vaadin-grid-data-provider-mixin.js

@@ -134,6 +134,7 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController = new DataProviderController(this, {
         size: this.size,
         pageSize: this.pageSize,
+        getItemId: this.getItemId.bind(this),
         isExpanded: this._isExpanded.bind(this),
         dataProvider: this.dataProvider ? this.dataProvider.bind(this) : null,
         dataProviderParams: () => {
@@ -332,6 +333,7 @@ export const DataProviderMixin = (superClass) =>
         });
 
         this.__scrollToPendingIndexes();
+        this.__dispatchPendingBodyCellFocus();
       });
 
       // If the grid is not loading anything, flush the debouncer immediately

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

@@ -0,0 +1,22 @@
+/**
+ * @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 GridFilterColumnMixin<T extends Constructor<HTMLElement>>(
+  superclass: T,
+): Constructor<GridFilterColumnMixinClass> & T;
+
+export declare class GridFilterColumnMixinClass {
+  /**
+   * Text to display as the label of the column filter text-field.
+   */
+  header: string | null | undefined;
+
+  /**
+   * JS Path of the property in the item used for filtering the data.
+   */
+  path: string | null | undefined;
+}

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

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const GridFilterColumnMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /**
+         * JS Path of the property in the item used for filtering the data.
+         */
+        path: String,
+
+        /**
+         * Text to display as the label of the column filter text-field.
+         */
+        header: String,
+      };
+    }
+
+    static get observers() {
+      return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
+    }
+
+    constructor() {
+      super();
+
+      this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
+    }
+
+    /**
+     * Renders the grid filter with the custom text field to the header cell.
+     *
+     * @override
+     */
+    _defaultHeaderRenderer(root, _column) {
+      let filter = root.firstElementChild;
+      let textField = filter ? filter.firstElementChild : undefined;
+
+      if (!filter) {
+        filter = document.createElement('vaadin-grid-filter');
+        textField = document.createElement('vaadin-text-field');
+        textField.setAttribute('theme', 'small');
+        textField.setAttribute('style', 'max-width: 100%;');
+        textField.setAttribute('focus-target', '');
+        textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
+        filter.appendChild(textField);
+        root.appendChild(filter);
+      }
+
+      filter.path = this.path;
+      filter.value = this._filterValue;
+
+      textField.__rendererValue = this._filterValue;
+      textField.value = this._filterValue;
+      textField.label = this.__getHeader(this.header, this.path);
+    }
+
+    /**
+     * The filter column doesn't allow to use a custom header renderer
+     * to override the header cell content.
+     * It always renders the grid filter to the header cell.
+     *
+     * @override
+     */
+    _computeHeaderRenderer() {
+      return this._defaultHeaderRenderer;
+    }
+
+    /**
+     * Updates the internal filter value once the filter text field is changed.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onFilterValueChanged(e) {
+      // Skip if the value is changed by the renderer.
+      if (e.detail.value === e.target.__rendererValue) {
+        return;
+      }
+
+      this._filterValue = e.detail.value;
+    }
+
+    /** @private */
+    __getHeader(header, path) {
+      if (header) {
+        return header;
+      }
+
+      if (path) {
+        return this._generateHeader(path);
+      }
+    }
+  };

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

@@ -4,7 +4,10 @@
  * 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 { GridFilterColumnMixinClass } from './vaadin-grid-filter-column-mixin.js';
+
+export * from './vaadin-grid-filter-column-mixin.js';
 
 /**
  * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`
@@ -19,17 +22,12 @@ import { GridColumn } from './vaadin-grid-column.js';
  *    ...
  * ```
  */
-declare class GridFilterColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
-  /**
-   * Text to display as the label of the column filter text-field.
-   */
-  header: string | null | undefined;
+declare class GridFilterColumn<TItem = GridDefaultItem> extends HTMLElement {}
 
-  /**
-   * JS Path of the property in the item used for filtering the data.
-   */
-  path: string | null | undefined;
-}
+interface GridFilterColumn<TItem = GridDefaultItem>
+  extends GridFilterColumnMixinClass,
+    GridColumnMixin<TItem, GridColumn<TItem>>,
+    GridColumn<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -6,6 +6,7 @@
 import './vaadin-grid-filter.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import { GridFilterColumnMixin } from './vaadin-grid-filter-column-mixin.js';
 
 /**
  * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`
@@ -22,100 +23,12 @@ import { GridColumn } from './vaadin-grid-column.js';
  *
  * @customElement
  * @extends GridColumn
+ * @mixes GridFilterColumnMixin
  */
-class GridFilterColumn extends GridColumn {
+class GridFilterColumn extends GridFilterColumnMixin(GridColumn) {
   static get is() {
     return 'vaadin-grid-filter-column';
   }
-
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used for filtering the data.
-       */
-      path: String,
-
-      /**
-       * Text to display as the label of the column filter text-field.
-       */
-      header: String,
-    };
-  }
-
-  static get observers() {
-    return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
-  }
-
-  /**
-   * Renders the grid filter with the custom text field to the header cell.
-   *
-   * @override
-   */
-  _defaultHeaderRenderer(root, _column) {
-    let filter = root.firstElementChild;
-    let textField = filter ? filter.firstElementChild : undefined;
-
-    if (!filter) {
-      filter = document.createElement('vaadin-grid-filter');
-      textField = document.createElement('vaadin-text-field');
-      textField.setAttribute('theme', 'small');
-      textField.setAttribute('style', 'max-width: 100%;');
-      textField.setAttribute('focus-target', '');
-      textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
-      filter.appendChild(textField);
-      root.appendChild(filter);
-    }
-
-    filter.path = this.path;
-    filter.value = this._filterValue;
-
-    textField.__rendererValue = this._filterValue;
-    textField.value = this._filterValue;
-    textField.label = this.__getHeader(this.header, this.path);
-  }
-
-  /**
-   * The filter column doesn't allow to use a custom header renderer
-   * to override the header cell content.
-   * It always renders the grid filter to the header cell.
-   *
-   * @override
-   */
-  _computeHeaderRenderer() {
-    return this._defaultHeaderRenderer;
-  }
-
-  /**
-   * Updates the internal filter value once the filter text field is changed.
-   * The listener handles only user-fired events.
-   *
-   * @private
-   */
-  __onFilterValueChanged(e) {
-    // Skip if the value is changed by the renderer.
-    if (e.detail.value === e.target.__rendererValue) {
-      return;
-    }
-
-    this._filterValue = e.detail.value;
-  }
-
-  /** @private */
-  __getHeader(header, path) {
-    if (header) {
-      return header;
-    }
-
-    if (path) {
-      return this._generateHeader(path);
-    }
-  }
 }
 
 defineCustomElement(GridFilterColumn);

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

@@ -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

@@ -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) {

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));
+    }
+  };