@vaadin/grid 24.0.0-alpha1 → 24.0.0-alpha11

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
@@ -77,6 +77,33 @@ export const KeyboardNavigationMixin = (superClass) =>
       };
     }
 
+    /** @private */
+    get __rowFocusMode() {
+      return (
+        this.__isRow(this._itemsFocusable) || this.__isRow(this._headerFocusable) || this.__isRow(this._footerFocusable)
+      );
+    }
+
+    set __rowFocusMode(value) {
+      ['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
+        const focusable = this[prop];
+        if (value) {
+          const parent = focusable && focusable.parentElement;
+          if (this.__isCell(focusable)) {
+            // Cell itself focusable (default)
+            this[prop] = parent;
+          } else if (this.__isCell(parent)) {
+            // Focus button mode is enabled for the column,
+            // button element inside the cell is focusable.
+            this[prop] = parent.parentElement;
+          }
+        } else if (!value && this.__isRow(focusable)) {
+          const cell = focusable.firstElementChild;
+          this[prop] = cell._focusButton || cell;
+        }
+      });
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -108,33 +135,6 @@ export const KeyboardNavigationMixin = (superClass) =>
       });
     }
 
-    /** @private */
-    get __rowFocusMode() {
-      return (
-        this.__isRow(this._itemsFocusable) || this.__isRow(this._headerFocusable) || this.__isRow(this._footerFocusable)
-      );
-    }
-
-    set __rowFocusMode(value) {
-      ['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
-        const focusable = this[prop];
-        if (value) {
-          const parent = focusable && focusable.parentElement;
-          if (this.__isCell(focusable)) {
-            // Cell itself focusable (default)
-            this[prop] = parent;
-          } else if (this.__isCell(parent)) {
-            // Focus button mode is enabled for the column,
-            // button element inside the cell is focusable.
-            this[prop] = parent.parentElement;
-          }
-        } else if (!value && this.__isRow(focusable)) {
-          const cell = focusable.firstElementChild;
-          this[prop] = cell._focusButton || cell;
-        }
-      });
-    }
-
     /** @private */
     _focusableChanged(focusable, oldFocusable) {
       if (oldFocusable) {
@@ -300,6 +300,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       e.preventDefault();
 
       const visibleItemsCount = this._lastVisibleIndex - this._firstVisibleIndex - 1;
+      const isRTL = this.__isRTL;
 
       // Handle keyboard interaction as defined in:
       // https://w3c.github.io/aria-practices/#keyboard-interaction-24
@@ -308,10 +309,10 @@ export const KeyboardNavigationMixin = (superClass) =>
         dy = 0;
       switch (key) {
         case 'ArrowRight':
-          dx = this.__isRTL ? -1 : 1;
+          dx = isRTL ? -1 : 1;
           break;
         case 'ArrowLeft':
-          dx = this.__isRTL ? 1 : -1;
+          dx = isRTL ? 1 : -1;
           break;
         case 'Home':
           if (this.__rowFocusMode) {
@@ -361,8 +362,8 @@ export const KeyboardNavigationMixin = (superClass) =>
         return;
       }
 
-      const forwardsKey = this.__isRTL ? 'ArrowLeft' : 'ArrowRight';
-      const backwardsKey = this.__isRTL ? 'ArrowRight' : 'ArrowLeft';
+      const forwardsKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
+      const backwardsKey = isRTL ? 'ArrowRight' : 'ArrowLeft';
       if (key === forwardsKey) {
         // "Right Arrow:"
         if (this.__rowFocusMode) {
@@ -585,7 +586,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       const localTarget = e.composedPath()[0];
       const localTargetIsTextInput =
         localTarget.localName === 'input' &&
-        !/^(button|checkbox|color|file|image|radio|range|reset|submit)$/i.test(localTarget.type);
+        !/^(button|checkbox|color|file|image|radio|range|reset|submit)$/iu.test(localTarget.type);
 
       let wantInteracting;
       switch (key) {
@@ -723,7 +724,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @private */
     _onKeyUp(e) {
-      if (!/^( |SpaceBar)$/.test(e.key) || this.interacting) {
+      if (!/^( |SpaceBar)$/u.test(e.key) || this.interacting) {
         return;
       }
 
@@ -732,7 +733,14 @@ export const KeyboardNavigationMixin = (superClass) =>
       const cell = e.composedPath()[0];
       if (cell._content && cell._content.firstElementChild) {
         const wasNavigating = this.hasAttribute('navigating');
-        cell._content.firstElementChild.click();
+        cell._content.firstElementChild.dispatchEvent(
+          new MouseEvent('click', {
+            shiftKey: e.shiftKey,
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+          }),
+        );
         this.toggleAttribute('navigating', wasNavigating);
       }
     }
@@ -773,6 +781,11 @@ export const KeyboardNavigationMixin = (superClass) =>
     /** @private */
     _onContentFocusIn(e) {
       const { section, cell, row } = this._getGridEventLocation(e);
+
+      if (!cell && !this.__rowFocusMode) {
+        return;
+      }
+
       this._detectInteracting(e);
 
       if (section && (cell || row)) {

package/src/vaadin-grid-row-details-mixin.d.ts

@@ -1,16 +1,12 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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 type { Grid, GridItemModel } from './vaadin-grid.js';
 
-export type GridRowDetailsRenderer<TItem> = (
-  root: HTMLElement,
-  grid?: Grid<TItem>,
-  model?: GridItemModel<TItem>,
-) => void;
+export type GridRowDetailsRenderer<TItem> = (root: HTMLElement, grid: Grid<TItem>, model: GridItemModel<TItem>) => void;
 
 export declare function RowDetailsMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,

package/src/vaadin-grid-row-details-mixin.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { iterateChildren } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -78,7 +79,7 @@ export const RowDetailsMixin = (superClass) =>
 
       if (this._columnTree) {
         // Only update the rows if the column tree has already been initialized
-        Array.from(this.$.items.children).forEach((row) => {
+        iterateChildren(this.$.items, (row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
             const isDetailsOpened = this._isDetailsOpened(row._item);
@@ -95,7 +96,7 @@ export const RowDetailsMixin = (superClass) =>
         return;
       }
 
-      [...this.$.items.children].forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
         // Re-renders the row to possibly close the previously opened details.
         if (row.hasAttribute('details-opened')) {
           this._updateItem(row, row._item);
@@ -162,7 +163,7 @@ export const RowDetailsMixin = (superClass) =>
 
     /** @protected */
     _updateDetailsCellHeights() {
-      [...this.$.items.children].forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
         this._updateDetailsCellHeight(row);
       });
     }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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';

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

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 const timeouts = {
@@ -41,6 +42,11 @@ export const ScrollMixin = (superClass) =>
       };
     }
 
+    /** @private */
+    get _scrollLeft() {
+      return this.$.table.scrollLeft;
+    }
+
     /** @private */
     get _scrollTop() {
       return this.$.table.scrollTop;
@@ -54,11 +60,6 @@ export const ScrollMixin = (superClass) =>
       this.$.table.scrollTop = top;
     }
 
-    /** @private */
-    get _scrollLeft() {
-      return this.$.table.scrollLeft;
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -157,7 +158,7 @@ export const ScrollMixin = (superClass) =>
         overflow += ' top';
       }
 
-      const scrollLeft = this.__getNormalizedScrollLeft(table);
+      const scrollLeft = getNormalizedScrollLeft(table, this.getAttribute('dir'));
       if (scrollLeft > 0) {
         overflow += ' start';
       }
@@ -167,7 +168,7 @@ export const ScrollMixin = (superClass) =>
       }
 
       if (this.__isRTL) {
-        overflow = overflow.replace(/start|end/gi, (matched) => {
+        overflow = overflow.replace(/start|end/giu, (matched) => {
           return matched === 'start' ? 'end' : 'start';
         });
       }
@@ -201,10 +202,17 @@ export const ScrollMixin = (superClass) =>
         this._frozenToEndCells = Array.prototype.slice.call(this.$.table.querySelectorAll('[frozen-to-end]'));
         this.__updateHorizontalScrollPosition();
       });
-      this._updateFrozenColumn();
+      this._debounceUpdateFrozenColumn();
     }
 
     /** @protected */
+    _debounceUpdateFrozenColumn() {
+      this.__debounceUpdateFrozenColumn = Debouncer.debounce(this.__debounceUpdateFrozenColumn, microTask, () =>
+        this._updateFrozenColumn(),
+      );
+    }
+
+    /** @private */
     _updateFrozenColumn() {
       if (!this._columnTree) {
         return;
@@ -248,7 +256,7 @@ export const ScrollMixin = (superClass) =>
       const scrollWidth = this.$.table.scrollWidth;
       const clientWidth = this.$.table.clientWidth;
       const scrollLeft = Math.max(0, this.$.table.scrollLeft);
-      const normalizedScrollLeft = this.__getNormalizedScrollLeft(this.$.table);
+      const normalizedScrollLeft = getNormalizedScrollLeft(this.$.table, this.getAttribute('dir'));
 
       // Position header, footer and items container
       const transform = `translate(${-scrollLeft}px, 0)`;

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/checkbox/src/vaadin-checkbox.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-sorter.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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';
@@ -36,4 +36,13 @@ export declare class SortMixinClass {
    * @attr {string} multi-sort-priority
    */
   multiSortPriority: 'append' | 'prepend';
+
+  /**
+   * When `true`, Shift-clicking an unsorted column's sorter adds it to the multi-sort.
+   * Shift + Space does the same action via keyboard. This property has precedence over the
+   * `multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.
+   *
+   * @attr {boolean} multi-sort-on-shift-click
+   */
+  multiSortOnShiftClick: boolean;
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -42,6 +42,19 @@ export const SortMixin = (superClass) =>
           value: () => defaultMultiSortPriority,
         },
 
+        /**
+         * When `true`, Shift-clicking an unsorted column's sorter adds it to the multi-sort.
+         * Shift + Space does the same action via keyboard. This property has precedence over the
+         * `multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.
+         *
+         * @attr {boolean} multi-sort-on-shift-click
+         * @type {boolean}
+         */
+        multiSortOnShiftClick: {
+          type: Boolean,
+          value: false,
+        },
+
         /**
          * @type {!Array<!GridSorterDefinition>}
          * @protected
@@ -81,7 +94,7 @@ export const SortMixin = (superClass) =>
       const sorter = e.target;
       e.stopPropagation();
       sorter._grid = this;
-      this.__updateSorter(sorter);
+      this.__updateSorter(sorter, e.detail.shiftClick, e.detail.fromSorterClick);
       this.__applySorters();
     }
 
@@ -126,22 +139,25 @@ export const SortMixin = (superClass) =>
     }
 
     /** @private */
-    __updateSorter(sorter) {
+    __updateSorter(sorter, shiftClick, fromSorterClick) {
       if (!sorter.direction && this._sorters.indexOf(sorter) === -1) {
         return;
       }
 
       sorter._order = null;
 
-      if (this.multiSort) {
+      if (
+        (this.multiSort && (!this.multiSortOnShiftClick || !fromSorterClick)) ||
+        (this.multiSortOnShiftClick && shiftClick)
+      ) {
         if (this.multiSortPriority === 'append') {
           this.__appendSorter(sorter);
         } else {
           this.__prependSorter(sorter);
         }
-      } else if (sorter.direction) {
+      } else if (sorter.direction || this.multiSortOnShiftClick) {
         const otherSorters = this._sorters.filter((s) => s !== sorter);
-        this._sorters = [sorter];
+        this._sorters = sorter.direction ? [sorter] : [];
         otherSorters.forEach((sorter) => {
           sorter._order = null;
           sorter.direction = null;

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
@@ -8,13 +8,18 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 
 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': Event;
+  'sorter-changed': GridSorterChangedEvent;
 
   'direction-changed': GridSorterDirectionChangedEvent;
 }

package/src/vaadin-grid-sorter.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -202,7 +202,16 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
       return;
     }
 
-    this.dispatchEvent(new CustomEvent('sorter-changed', { bubbles: true, composed: true }));
+    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 */
@@ -212,6 +221,11 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
 
   /** @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.
@@ -219,6 +233,8 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
     }
 
     e.preventDefault();
+    this._shiftClick = e.shiftKey;
+    this._fromSorterClick = true;
     if (this.direction === 'asc') {
       this.direction = 'desc';
     } else if (this.direction === 'desc') {

package/src/vaadin-grid-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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';
@@ -248,6 +248,10 @@ registerStyles(
       transform: none;
     }
 
+    [first-frozen-to-end] {
+      margin-inline-start: auto;
+    }
+
     /* Hide resize handle if scrolled to end */
     :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
       display: none;

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

@@ -1,13 +1,18 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * 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 type { GridItemModel } from './vaadin-grid.js';
 import type { GridColumn } from './vaadin-grid-column.js';
 
-export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
+export type GridCellPartNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
+
+/**
+ * @deprecated Use `GridPartCellGenerator` type and `cellPartNameGenerator` API instead.
+ */
+export type GridCellClassNameGenerator<TItem> = GridCellPartNameGenerator<TItem>;
 
 export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
@@ -29,14 +34,45 @@ export declare class StylingMixinClass<TItem> {
    *   - `model.expanded` Sublevel toggle state.
    *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
    *   - `model.selected` Selected state.
+   *
+   * @deprecated Use `cellPartNameGenerator` instead.
    */
   cellClassNameGenerator: GridCellClassNameGenerator<TItem> | null | undefined;
 
+  /**
+   * A function that allows generating CSS `part` names for grid cells in Shadow DOM based
+   * on their row and column, for styling from outside using the `::part()` selector.
+   *
+   * The return value should be the generated part name as a string, or multiple part names
+   * separated by whitespace characters.
+   *
+   * Receives two arguments:
+   * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
+   * - `model` The object with the properties related with
+   *   the rendered item, contains:
+   *   - `model.index` The index of the item.
+   *   - `model.item` The item.
+   *   - `model.expanded` Sublevel toggle state.
+   *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+   *   - `model.selected` Selected state.
+   */
+  cellPartNameGenerator: GridCellPartNameGenerator<TItem> | null | undefined;
+
   /**
    * Runs the `cellClassNameGenerator` for the visible cells.
    * If the generator depends on varying conditions, you need to
    * call this function manually in order to update the styles when
    * the conditions change.
+   *
+   * @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
    */
   generateCellClassNames(): void;
+
+  /**
+   * Runs the `cellPastNameGenerator` for the visible cells.
+   * If the generator depends on varying conditions, you need to
+   * call this function manually in order to update the styles when
+   * the conditions change.
+   */
+  generateCellPartNames(): void;
 }