@vaadin/grid 25.2.0-alpha1 → 25.2.0-alpha11

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

@@ -7,9 +7,6 @@ import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
-/**
- * @polymerMixin
- */
 export const GridFilterElementMixin = (superClass) =>
   class extends superClass {
     static get properties() {
@@ -68,6 +65,7 @@ export const GridFilterElementMixin = (superClass) =>
       textField.value = value;
 
       this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
+        /** @internal to not document it in CEM */
         this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
       });
     }

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

@@ -4,9 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-/**
- * @polymerMixin
- */
 export const FilterMixin = (superClass) =>
   class FilterMixin extends superClass {
     static get properties() {

package/src/vaadin-grid-filter.js

@@ -39,7 +39,6 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  *
  * @customElement vaadin-grid-filter
  * @extends HTMLElement
- * @mixes GridFilterElementMixin
  */
 class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {

package/src/vaadin-grid-helpers.js

@@ -221,7 +221,7 @@ export class ColumnObserver {
   __onMutation() {
     // Detect if this is the initial call
     const initialCall = !this.__currentColumns;
-    this.__currentColumns = this.__currentColumns || [];
+    this.__currentColumns ||= [];
 
     // Detect added and removed columns or if the columns order has changed
     const columns = ColumnObserver.getColumns(this.__host);

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

@@ -20,9 +20,6 @@ function isDetailsCell(element) {
   return element.matches('[part~="details-cell"]');
 }
 
-/**
- * @polymerMixin
- */
 export const KeyboardNavigationMixin = (superClass) =>
   class KeyboardNavigationMixin extends superClass {
     static get properties() {
@@ -103,7 +100,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       ['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
         const focusable = this[prop];
         if (value) {
-          const parent = focusable && focusable.parentElement;
+          const parent = focusable?.parentElement;
           if (isCell(focusable)) {
             // Cell itself focusable (default)
             this[prop] = parent;
@@ -428,7 +425,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       const rowGroup = row.parentNode;
       // Body rows have index property, otherwise DOM child index of the row is used.
       if (rowGroup === this.$.items) {
-        return bodyFallbackIndex !== undefined ? bodyFallbackIndex : row.index;
+        return bodyFallbackIndex ?? row.index;
       }
       return [...rowGroup.children].indexOf(row);
     }
@@ -1097,12 +1094,4 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
       return null;
     }
-
-    /**
-     * Fired when a cell is focused with click or keyboard navigation.
-     *
-     * Use context property of @see {@link GridCellFocusEvent} to get detail information about the event.
-     *
-     * @event cell-focus
-     */
   };

package/src/vaadin-grid-mixin.js

@@ -42,25 +42,6 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
 
 /**
  * A mixin providing common grid functionality.
- *
- * @polymerMixin
- * @mixes A11yMixin
- * @mixes ActiveItemMixin
- * @mixes ArrayDataProviderMixin
- * @mixes ColumnResizingMixin
- * @mixes DataProviderMixin
- * @mixes DynamicColumnsMixin
- * @mixes FilterMixin
- * @mixes RowDetailsMixin
- * @mixes ScrollMixin
- * @mixes SelectionMixin
- * @mixes SortMixin
- * @mixes KeyboardNavigationMixin
- * @mixes ColumnReorderingMixin
- * @mixes EventContextMixin
- * @mixes StylingMixin
- * @mixes DragAndDropMixin
- * @mixes ResizeMixin
  */
 export const GridMixin = (superClass) =>
   class extends ColumnAutoWidthMixin(
@@ -417,7 +398,7 @@ export const GridMixin = (superClass) =>
       const slot = document.createElement('slot');
       slot.setAttribute('name', slotName);
 
-      if (column && column._focusButtonMode) {
+      if (column?._focusButtonMode) {
         const div = document.createElement('div');
         div.setAttribute('role', 'button');
         div.setAttribute('tabindex', '-1');
@@ -536,6 +517,7 @@ export const GridMixin = (superClass) =>
                 contentsFragment.appendChild(detailsCell._content);
               }
               this._configureDetailsCell(detailsCell);
+              detailsCell.__parentRow = row;
               row.appendChild(detailsCell);
               // Cache the details cell reference
               row.__detailsCell = detailsCell;
@@ -870,7 +852,7 @@ export const GridMixin = (superClass) =>
     _showTooltip(event) {
       // Check if there is a slotted vaadin-tooltip element.
       const tooltip = this._tooltipController.node;
-      if (tooltip && tooltip.isConnected) {
+      if (tooltip?.isConnected) {
         const target = event.target;
 
         if (!this.__isCellFullyVisible(target)) {
@@ -881,7 +863,7 @@ export const GridMixin = (superClass) =>
         this._tooltipController.setContext(this.getEventContext(event));
 
         // Trigger opening using the corresponding delay.
-        tooltip._stateController.open({
+        this._tooltipController.open({
           focus: event.type === 'focusin',
           hover: event.type === 'mouseenter',
         });
@@ -917,10 +899,7 @@ export const GridMixin = (superClass) =>
 
     /** @protected */
     _hideTooltip(immediate) {
-      const tooltip = this._tooltipController && this._tooltipController.node;
-      if (tooltip) {
-        tooltip._stateController.close(immediate);
-      }
+      this._tooltipController.close(immediate);
     }
 
     /**

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

@@ -6,8 +6,6 @@
 
 /**
  * A mixin to observe size changes of the grid and its main parts.
- *
- * @polymerMixin
  */
 export const ResizeMixin = (superClass) =>
   class extends superClass {

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

@@ -3,11 +3,8 @@
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { iterateChildren, updatePart } from './vaadin-grid-helpers.js';
+import { updatePart } from './vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const RowDetailsMixin = (superClass) =>
   class RowDetailsMixin extends superClass {
     static get properties() {
@@ -50,6 +47,15 @@ export const RowDetailsMixin = (superClass) =>
         _detailsCells: {
           type: Array,
         },
+
+        /**
+         * Set of opened details item ids
+         * @private
+         */
+        __detailsOpenedKeys: {
+          type: Object,
+          computed: '__computeDetailsOpenedKeys(itemIdPath, detailsOpenedItems)',
+        },
       };
     }
 
@@ -79,10 +85,15 @@ export const RowDetailsMixin = (superClass) =>
 
       if (this._columnTree) {
         // Only update the rows if the column tree has already been initialized
-        iterateChildren(this.$.items, (row) => {
+        this._getRenderedRows().forEach((row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this.__initRow(row, this._columnTree[this._columnTree.length - 1]);
             this.__updateRow(row);
+            return;
+          }
+
+          if (row.hasAttribute('details-opened')) {
+            this.__updateRow(row);
           }
         });
       }
@@ -90,15 +101,8 @@ export const RowDetailsMixin = (superClass) =>
 
     /** @private */
     _detailsOpenedItemsChanged(_detailsOpenedItems, rowDetailsRenderer) {
-      iterateChildren(this.$.items, (row) => {
-        // Re-renders the row to possibly close the previously opened details.
-        if (row.hasAttribute('details-opened')) {
-          this.__updateRow(row);
-          return;
-        }
-
-        // Re-renders the row to open the details when a row details renderer is provided.
-        if (rowDetailsRenderer && this._isDetailsOpened(row._item)) {
+      this._getRenderedRows().forEach((row) => {
+        if (row.hasAttribute('details-opened') !== !!(rowDetailsRenderer && this._isDetailsOpened(row._item))) {
           this.__updateRow(row);
         }
       });
@@ -165,7 +169,7 @@ export const RowDetailsMixin = (superClass) =>
 
     /** @protected */
     _updateDetailsCellHeights() {
-      iterateChildren(this.$.items, (row) => {
+      this._getRenderedRows().forEach((row) => {
         this._updateDetailsCellHeight(row);
       });
     }
@@ -176,7 +180,17 @@ export const RowDetailsMixin = (superClass) =>
      * @protected
      */
     _isDetailsOpened(item) {
-      return this.detailsOpenedItems && this._getItemIndexInArray(item, this.detailsOpenedItems) !== -1;
+      return this.__detailsOpenedKeys && this.__detailsOpenedKeys.has(this.getItemId(item));
+    }
+
+    /** @private */
+    __computeDetailsOpenedKeys(_itemIdPath, detailsOpenedItems) {
+      const items = detailsOpenedItems || [];
+      const keys = new Set();
+      items.forEach((item) => {
+        keys.add(this.getItemId(item));
+      });
+      return keys;
     }
 
     /**

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

@@ -13,9 +13,6 @@ const timeouts = {
   UPDATE_CONTENT_VISIBILITY: 100,
 };
 
-/**
- * @polymerMixin
- */
 export const ScrollMixin = (superClass) =>
   class ScrollMixin extends superClass {
     static get properties() {

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

@@ -15,8 +15,6 @@ import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures
  * Web component-specific selection state updates must be implemented in the
  * `<vaadin-grid-selection-column>` itself, by overriding the protected methods
  * provided by this mixin.
- *
- * @polymerMixin
  */
 export const GridSelectionColumnBaseMixin = (superClass) =>
   class GridSelectionColumnBaseMixin extends superClass {

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

@@ -5,10 +5,6 @@
  */
 import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
 
-/**
- * @polymerMixin
- * @mixes GridSelectionColumnBaseMixin
- */
 export const GridSelectionColumnMixin = (superClass) =>
   class extends GridSelectionColumnBaseMixin(superClass) {
     static get properties() {

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

@@ -37,7 +37,9 @@ export * from './vaadin-grid-selection-column-mixin.js';
  *
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
-declare class GridSelectionColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridSelectionColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
 interface GridSelectionColumn<TItem = GridDefaultItem>
   extends GridSelectionColumnMixinClass<TItem>, GridColumnMixin<TItem, GridColumn<TItem>>, GridColumn<TItem> {

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

@@ -34,7 +34,6 @@ import { GridSelectionColumnMixin } from './vaadin-grid-selection-column-mixin.j
  *
  * @customElement vaadin-grid-selection-column
  * @extends GridColumn
- * @mixes GridSelectionColumnMixin
  */
 class GridSelectionColumn extends GridSelectionColumnMixin(GridColumn) {
   static get is() {

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

@@ -4,9 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-/**
- * @polymerMixin
- */
 export const SelectionMixin = (superClass) =>
   class SelectionMixin extends superClass {
     static get properties() {
@@ -42,7 +39,6 @@ export const SelectionMixin = (superClass) =>
          */
         isItemSelectable: {
           type: Function,
-          notify: (() => true)(), // prevent Polymer analyzer from documenting a changed event
         },
 
         /**
@@ -109,9 +105,26 @@ export const SelectionMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('isItemSelectable')) {
+        /** @internal to not document it in CEM */
+        this.dispatchEvent(new CustomEvent('is-item-selectable-changed'));
+      }
+    }
+
     /** @private */
     __selectedItemsChanged() {
-      this.requestContentUpdate();
+      this._getRenderedRows().forEach((row) => {
+        if (
+          row.hasAttribute('selected') !== this._isSelected(row._item) ||
+          row.hasAttribute('nonselectable') !== !this.__isItemSelectable(row._item)
+        ) {
+          this.__updateRow(row);
+        }
+      });
     }
 
     /** @private */
@@ -124,20 +137,4 @@ export const SelectionMixin = (superClass) =>
 
       return selectedKeys;
     }
-
-    /**
-     * Fired when the `selectedItems` property changes.
-     *
-     * @event selected-items-changed
-     */
-
-    /**
-     * Fired when the user selects or deselects an item through the selection column.
-     *
-     * @event item-toggle
-     * @param {Object} detail
-     * @param {GridItem} detail.item the item that was selected or deselected
-     * @param {boolean} detail.selected true if the item was selected
-     * @param {boolean} detail.shiftKey true if the shift key was pressed
-     */
   };

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

@@ -4,9 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-/**
- * @polymerMixin
- */
 export const GridSortColumnMixin = (superClass) =>
   class extends superClass {
     static get properties() {

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

@@ -24,7 +24,9 @@ export * from './vaadin-grid-sort-column-mixin.js';
  *
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  */
-declare class GridSortColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridSortColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
 interface GridSortColumn<TItem = GridDefaultItem>
   extends GridSortColumnMixinClass, GridColumnMixin<TItem, GridColumn<TItem>>, GridColumn<TItem> {

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

@@ -25,7 +25,6 @@ import { GridSortColumnMixin } from './vaadin-grid-sort-column-mixin.js';
  *
  * @customElement vaadin-grid-sort-column
  * @extends GridColumn
- * @mixes GridSortColumnMixin
  */
 class GridSortColumn extends GridSortColumnMixin(GridColumn) {
   static get is() {

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

@@ -6,9 +6,6 @@
 
 let defaultMultiSortPriority = 'prepend';
 
-/**
- * @polymerMixin
- */
 export const SortMixin = (superClass) =>
   class SortMixin extends superClass {
     static get properties() {

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

@@ -6,8 +6,6 @@
 
 /**
  * A mixin providing common sorter functionality.
- *
- * @polymerMixin
  */
 export const GridSorterMixin = (superClass) =>
   class GridSorterMixinClass extends superClass {

package/src/vaadin-grid-sorter.js

@@ -53,9 +53,6 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  *
  * @customElement vaadin-grid-sorter
  * @extends HTMLElement
- * @mixes GridSorterMixin
- * @mixes ThemableMixin
- * @mixes DirMixin
  */
 class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

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

@@ -34,7 +34,7 @@ export declare class StylingMixinClass<TItem> {
   cellPartNameGenerator: GridCellPartNameGenerator<TItem> | null | undefined;
 
   /**
-   * Runs the `cellPastNameGenerator` for the visible cells.
+   * Runs the `cellPartNameGenerator` 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.

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

@@ -5,9 +5,6 @@
  */
 import { iterateChildren, iterateRowCells, updatePart } from './vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const StylingMixin = (superClass) =>
   class StylingMixin extends superClass {
     static get properties() {

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

@@ -5,9 +5,6 @@
  */
 import { get } from '@vaadin/component-base/src/path-utils.js';
 
-/**
- * @polymerMixin
- */
 export const GridTreeColumnMixin = (superClass) =>
   class extends superClass {
     static get properties() {

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

@@ -20,7 +20,9 @@ import type { GridTreeColumnMixinClass } from './vaadin-grid-tree-column-mixin.j
  *    ...
  * ```
  */
-declare class GridTreeColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridTreeColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
 interface GridTreeColumn<TItem = GridDefaultItem>
   extends GridTreeColumnMixinClass<TItem>, GridColumnMixin<TItem, GridColumn<TItem>>, GridColumn<TItem> {}

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

@@ -22,7 +22,6 @@ import { GridTreeColumnMixin } from './vaadin-grid-tree-column-mixin.js';
  * ```
  * @customElement vaadin-grid-tree-column
  * @extends GridColumn
- * @mixes GridTreeColumnMixin
  */
 class GridTreeColumn extends GridTreeColumnMixin(GridColumn) {
   static get is() {

package/src/vaadin-grid-tree-toggle-mixin.js

@@ -5,9 +5,6 @@
  */
 import { isFocusable } from './vaadin-grid-active-item-mixin.js';
 
-/**
- * @polymerMixin
- */
 export const GridTreeToggleMixin = (superClass) =>
   class extends superClass {
     static get properties() {

package/src/vaadin-grid-tree-toggle.js

@@ -61,9 +61,6 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
  *
  * @customElement vaadin-grid-tree-toggle
  * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DirMixin
- * @mixes GridTreeToggleMixin
  */
 class GridTreeToggle extends GridTreeToggleMixin(
   ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),

package/src/vaadin-grid.d.ts

@@ -251,7 +251,7 @@ export type GridDefaultItem = any;
  *
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
  * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
- * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation.
+ * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation. Use the `context` property to read event details.
  * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
  * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
  * @fires {CustomEvent} data-provider-changed - Fired when the `dataProvider` property changes.

package/src/vaadin-grid.js

@@ -252,7 +252,7 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  *
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
  * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
- * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation.
+ * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation. Use the `context` property to read event details.
  * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
  * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
  * @fires {CustomEvent} data-provider-changed - Fired when the `dataProvider` property changes.
@@ -267,8 +267,6 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  *
  * @customElement vaadin-grid
  * @extends HTMLElement
- * @mixes GridMixin
- * @mixes ThemableMixin
  */
 class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {