@vaadin/grid 25.2.0-alpha8 → 25.2.0-beta1

package/custom-elements.json

@@ -3231,14 +3231,6 @@
               "attribute": "value"
             }
           ],
-          "events": [
-            {
-              "name": "filter-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
             {
               "name": "path",
@@ -3350,16 +3342,6 @@
             }
           ],
           "events": [
-            {
-              "name": "filter-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "GridFilterElementMixin",
-                "module": "src/vaadin-grid-filter-element-mixin.js"
-              }
-            },
             {
               "type": {
                 "text": "CustomEvent"
@@ -4016,6 +3998,20 @@
                 "module": "src/vaadin-grid-row-details-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "dragFilter",
@@ -4519,6 +4515,18 @@
                 "module": "src/vaadin-grid-data-provider-mixin.js"
               }
             },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "name": "drag-filter",
               "type": {
@@ -7764,6 +7772,20 @@
                 "module": "src/vaadin-grid-row-details-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "dragFilter",
@@ -8213,7 +8235,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when a cell is focused with click or keyboard navigation.",
+              "description": "Fired when a cell is focused with click or keyboard navigation. Use the `context` property to read event details.",
               "name": "cell-focus"
             },
             {
@@ -8415,6 +8437,18 @@
                 "module": "src/vaadin-grid-data-provider-mixin.js"
               }
             },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
             {
               "name": "drag-filter",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -45,20 +45,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha8",
-    "@vaadin/checkbox": "25.2.0-alpha8",
-    "@vaadin/component-base": "25.2.0-alpha8",
-    "@vaadin/lit-renderer": "25.2.0-alpha8",
-    "@vaadin/text-field": "25.2.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha8",
+    "@vaadin/a11y-base": "25.2.0-beta1",
+    "@vaadin/checkbox": "25.2.0-beta1",
+    "@vaadin/component-base": "25.2.0-beta1",
+    "@vaadin/lit-renderer": "25.2.0-beta1",
+    "@vaadin/text-field": "25.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha8",
-    "@vaadin/chai-plugins": "25.2.0-alpha8",
-    "@vaadin/test-runner-commands": "25.2.0-alpha8",
+    "@vaadin/aura": "25.2.0-beta1",
+    "@vaadin/chai-plugins": "25.2.0-beta1",
+    "@vaadin/test-runner-commands": "25.2.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -66,5 +66,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

package/src/styles/vaadin-grid-filter-base-styles.js

@@ -11,6 +11,10 @@ export const gridFilterStyles = css`
     max-width: 100%;
   }
 
+  :host([hidden]) {
+    display: none !important;
+  }
+
   ::slotted(*) {
     width: 100%;
     box-sizing: border-box;

package/src/styles/vaadin-grid-sorter-base-styles.js

@@ -18,6 +18,10 @@ export const gridSorterStyles = css`
     -webkit-tap-highlight-color: transparent;
   }
 
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part='content'] {
     flex: 1 1 auto;
     overflow: hidden;

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

@@ -60,6 +60,10 @@ export const gridTreeToggleStyles = css`
     rotate: -90deg;
   }
 
+  :host(:not([expanded]):dir(rtl)) [part='toggle']::before {
+    rotate: 90deg;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     [part='toggle']::before {
       transition: var(--_non-focused-row-none, rotate 120ms);

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

@@ -5,9 +5,6 @@
  */
 import { findTreeToggleCell, iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const A11yMixin = (superClass) =>
   class A11yMixin extends superClass {
     static get properties() {
@@ -54,7 +51,7 @@ export const A11yMixin = (superClass) =>
 
       // If no header and footer rows while the empty state is active, count as one column
       // Otherwise, use the number of body columns, if present
-      const columnsCount = emptyState ? 1 : (rowsCount && bodyColumns && bodyColumns.length) || 0;
+      const columnsCount = emptyState ? 1 : (rowsCount && bodyColumns?.length) || 0;
       this.$.table.setAttribute('aria-colcount', columnsCount);
 
       this.__a11yUpdateHeaderRows();
@@ -164,7 +161,7 @@ export const A11yMixin = (superClass) =>
         while (cellContent && cellContent.localName !== 'vaadin-grid-cell-content') {
           cellContent = cellContent.parentNode;
         }
-        if (cellContent && cellContent.assignedSlot) {
+        if (cellContent?.assignedSlot) {
           const cell = cellContent.assignedSlot.parentNode;
           cell.setAttribute(
             'aria-sort',

package/src/vaadin-grid-active-item-mixin.js

@@ -20,9 +20,6 @@ export const isFocusable = (target) => {
   );
 };
 
-/**
- * @polymerMixin
- */
 export const ActiveItemMixin = (superClass) =>
   class ActiveItemMixin extends superClass {
     static get properties() {
@@ -116,16 +113,4 @@ export const ActiveItemMixin = (superClass) =>
     _isFocusable(target) {
       return isFocusable(target);
     }
-
-    /**
-     * Fired when the `activeItem` property changes.
-     *
-     * @event active-item-changed
-     */
-
-    /**
-     * Fired when the cell is activated with click or keyboard.
-     *
-     * @event cell-activate
-     */
   };

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

@@ -5,9 +5,6 @@
  */
 import { createArrayDataProvider } from './array-data-provider.js';
 
-/**
- * @polymerMixin
- */
 export const ArrayDataProviderMixin = (superClass) =>
   class ArrayDataProviderMixin extends superClass {
     static get properties() {

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

@@ -7,8 +7,6 @@ import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 
 /**
  * A mixin providing grid column auto-width functionality.
- *
- * @polymerMixin
  */
 export const ColumnAutoWidthMixin = (superClass) =>
   class extends superClass {
@@ -145,8 +143,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
         }
       });
 
-      this.__hasHadRenderedRowsForColumnWidthCalculation =
-        this.__hasHadRenderedRowsForColumnWidthCalculation || this._getRenderedRows().length > 0;
+      this.__hasHadRenderedRowsForColumnWidthCalculation ||= this._getRenderedRows().length > 0;
 
       this.__intrinsicWidthCache = new Map();
       // Cache the viewport rows to avoid unnecessary reflows while measuring the column widths

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

@@ -10,9 +10,6 @@ import { ColumnObserver, updateColumnOrders } from './vaadin-grid-helpers.js';
 
 /**
  * A mixin providing common vaadin-grid-column-group functionality.
- *
- * @polymerMixin
- * @mixes ColumnBaseMixin
  */
 export const GridColumnGroupMixin = (superClass) =>
   class extends ColumnBaseMixin(superClass) {

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

@@ -36,7 +36,9 @@ export * from './vaadin-grid-column-group-mixin.js';
  * column2.renderer = (root, column, model) => { ... };
  * ```
  */
-declare class GridColumnGroup extends HTMLElement {}
+declare class GridColumnGroup extends HTMLElement {
+  hidden: boolean;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 interface GridColumnGroup<TItem = GridDefaultItem> extends GridColumnGroupMixin<TItem, GridColumnGroup<TItem>> {}

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

@@ -40,7 +40,6 @@ export * from './vaadin-grid-column-group-mixin.js';
  *
  * @customElement vaadin-grid-column-group
  * @extends HTMLElement
- * @mixes GridColumnGroupMixin
  */
 class GridColumnGroup extends GridColumnGroupMixin(PolylitMixin(LitElement)) {
   static get is() {

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

@@ -9,9 +9,6 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
 import { updateCellState, updatePart } from './vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const ColumnBaseMixin = (superClass) =>
   class ColumnBaseMixin extends superClass {
     static get properties() {
@@ -29,7 +26,7 @@ export const ColumnBaseMixin = (superClass) =>
             }
 
             const parent = this.parentNode;
-            if (parent && parent.localName === 'vaadin-grid-column-group') {
+            if (parent?.localName === 'vaadin-grid-column-group') {
               return parent.resizable || false;
             }
             return false;
@@ -563,7 +560,7 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @protected */
     _runRenderer(renderer, cell, model) {
-      const isVisibleBodyCell = model && model.item && !cell.parentElement.hidden;
+      const isVisibleBodyCell = model?.item && !cell.parentElement.hidden;
       const shouldRender = isVisibleBodyCell || renderer === this._headerRenderer || renderer === this._footerRenderer;
       if (!shouldRender) {
         return;
@@ -806,11 +803,6 @@ export const ColumnBaseMixin = (superClass) =>
     }
   };
 
-/**
- * @polymerMixin
- * @mixes ColumnBaseMixin
- * @mixes DirMixin
- */
 export const GridColumnMixin = (superClass) =>
   class extends ColumnBaseMixin(DirMixin(superClass)) {
     static get properties() {

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

@@ -7,9 +7,6 @@ import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { getBodyRowCells, iterateChildren, updateColumnOrders } from './vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const ColumnReorderingMixin = (superClass) =>
   class ColumnReorderingMixin extends superClass {
     static get properties() {
@@ -147,8 +144,8 @@ export const ColumnReorderingMixin = (superClass) =>
       }
 
       // Cancel reordering if there are draggable nodes on the event path following this element
-      const path = e.composedPath && e.composedPath();
-      if (path && path.slice(0, Math.max(0, path.indexOf(this))).some((node) => node.draggable)) {
+      const path = e.composedPath?.();
+      if (path?.slice(0, Math.max(0, path.indexOf(this))).some((node) => node.draggable)) {
         return;
       }
 
@@ -271,7 +268,7 @@ export const ColumnReorderingMixin = (superClass) =>
         }
         // Check if element is the cell of a focus button mode column
         const { parentElement } = element;
-        if (parentElement && parentElement._focusButton === element) {
+        if (parentElement?._focusButton === element) {
           return parentElement;
         }
       }
@@ -337,6 +334,36 @@ export const ColumnReorderingMixin = (superClass) =>
       updateColumnOrders(columnTree[0], this._orderBaseScope, 0);
     }
 
+    /**
+     * Resets the visual column order so that cells in every row reflect the
+     * current DOM order of `<vaadin-grid-column>` elements.
+     *
+     * Intended to be called by Vaadin Flow's `GridColumnOrderHelper` (via
+     * `executeJs`) to realign cell order with the column DOM order after an
+     * earlier drag reorder, even when the column DOM order itself has not
+     * changed (in which case the `_columnTree` observer does not fire and
+     * `_renderColumnTree` does not re-render the rows).
+     *
+     * @private
+     */
+    _resetColumnOrder() {
+      if (this._columnTree === undefined) {
+        return;
+      }
+
+      // Each `_columnTree[level]` array is already in DOM order. If every
+      // level's `_order` values are monotonically non-decreasing along that
+      // array, cells are already in sync with DOM order and no work is needed.
+      const alreadyInDomOrder = this._columnTree.every((level) =>
+        level.every((column, i) => i === 0 || column._order >= level[i - 1]._order),
+      );
+      if (alreadyInDomOrder) {
+        return;
+      }
+
+      this._columnTree = this._getColumnTree();
+    }
+
     /**
      * @param {!GridColumn} column
      * @param {string} status
@@ -451,12 +478,4 @@ export const ColumnReorderingMixin = (superClass) =>
         return targetCell._column;
       }
     }
-
-    /**
-     * Fired when the columns in the grid are reordered.
-     *
-     * @event column-reorder
-     * @param {Object} detail
-     * @param {Object} detail.columns the columns in the new order
-     */
   };

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

@@ -5,9 +5,6 @@
  */
 import { addListener } from '@vaadin/component-base/src/gestures.js';
 
-/**
- * @polymerMixin
- */
 export const ColumnResizingMixin = (superClass) =>
   class ColumnResizingMixin extends superClass {
     /** @protected */
@@ -126,12 +123,4 @@ export const ColumnResizingMixin = (superClass) =>
         this._resizeHandler();
       }
     }
-
-    /**
-     * Fired when a column in the grid is resized by the user.
-     *
-     * @event column-resize
-     * @param {Object} detail
-     * @param {Object} detail.resizedColumn the column that was resized
-     */
   };

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

@@ -22,9 +22,12 @@ export type GridHeaderFooterRenderer<TItem = GridDefaultItem> = GridMixinHeaderF
  * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for instructions on how
  * to configure the `<vaadin-grid-column>`.
  */
-declare class GridColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
-interface GridColumn<TItem = GridDefaultItem> extends GridColumnMixin<TItem, GridColumn<TItem>>, HTMLElement {}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface GridColumn<TItem = GridDefaultItem> extends GridColumnMixin<TItem, GridColumn<TItem>> {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-grid-column.js

@@ -17,7 +17,6 @@ import { GridColumnMixin } from './vaadin-grid-column-mixin.js';
  *
  * @customElement vaadin-grid-column
  * @extends HTMLElement
- * @mixes GridColumnMixin
  */
 class GridColumn extends GridColumnMixin(PolylitMixin(LitElement)) {
   static get is() {

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

@@ -8,9 +8,6 @@ import { DataProviderController } from '@vaadin/component-base/src/data-provider
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
 
-/**
- * @polymerMixin
- */
 export const DataProviderMixin = (superClass) =>
   class DataProviderMixin extends superClass {
     static get properties() {
@@ -438,16 +435,4 @@ export const DataProviderMixin = (superClass) =>
         this.scrollToIndex(...indexes);
       }
     }
-
-    /**
-     * Fired when the `expandedItems` property changes.
-     *
-     * @event expanded-items-changed
-     */
-
-    /**
-     * Fired when the `loading` property changes.
-     *
-     * @event loading-changed
-     */
   };

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -26,9 +26,6 @@ const DropLocation = {
   EMPTY: 'empty',
 };
 
-/**
- * @polymerMixin
- */
 export const DragAndDropMixin = (superClass) =>
   class DragAndDropMixin extends superClass {
     static get properties() {
@@ -286,7 +283,7 @@ export const DragAndDropMixin = (superClass) =>
           }
         }
 
-        if (row && row.hasAttribute('drop-disabled')) {
+        if (row?.hasAttribute('drop-disabled')) {
           this._dropLocation = undefined;
           return;
         }
@@ -497,44 +494,4 @@ export const DragAndDropMixin = (superClass) =>
         'drop-disabled': !!dropDisabled,
       });
     }
-
-    /**
-     * Fired when starting to drag grid rows.
-     *
-     * @event grid-dragstart
-     * @param {Object} originalEvent The native dragstart event
-     * @param {Object} detail
-     * @param {Object} detail.draggedItems the items in the visible viewport that are dragged
-     * @param {Function} detail.setDraggedItemsCount Overrides the default number shown in the drag image on multi row drag.
-     * Parameter is of type number.
-     * @param {Function} detail.setDragData Sets dataTransfer data for the drag operation.
-     * Note that "text" is the only data type supported by all the browsers the grid currently supports (including IE11).
-     * The function takes two parameters:
-     * - type:string The type of the data
-     * - data:string The data
-     */
-
-    /**
-     * Fired when the dragging of the rows ends.
-     *
-     * @event grid-dragend
-     * @param {Object} originalEvent The native dragend event
-     */
-
-    /**
-     * Fired when a drop occurs on top of the grid.
-     *
-     * @event grid-drop
-     * @param {Object} originalEvent The native drop event
-     * @param {Object} detail
-     * @param {Object} detail.dropTargetItem The item of the grid row on which the drop occurred.
-     * @param {string} detail.dropLocation The position at which the drop event took place relative to a row.
-     * Depending on the dropMode value, the drop location can be one of the following
-     * - `on-top`: when the drop occurred on top of the row
-     * - `above`: when the drop occurred above the row
-     * - `below`: when the drop occurred below the row
-     * - `empty`: when the drop occurred over the grid, not relative to any specific row
-     * @param {string} detail.dragData An array of items with the payload as a string representation as the
-     * `data` property and the type of the data as `type` property.
-     */
   };

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -26,9 +26,6 @@ function arrayEquals(arr1, arr2) {
   return true;
 }
 
-/**
- * @polymerMixin
- */
 export const DynamicColumnsMixin = (superClass) =>
   class DynamicColumnsMixin extends superClass {
     static get properties() {
@@ -112,7 +109,7 @@ export const DynamicColumnsMixin = (superClass) =>
       this._observer = new ColumnObserver(this, (_addedColumns, removedColumns) => {
         const allRemovedCells = removedColumns.flatMap((c) => c._allCells);
         const filterNotConnected = (element) =>
-          allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
+          allRemovedCells.filter((cell) => cell?._content.contains(element)).length;
 
         this.__removeSorters(this._sorters.filter(filterNotConnected));
         this.__removeFilters(this._filters.filter(filterNotConnected));

package/src/vaadin-grid-event-context-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 EventContextMixin = (superClass) =>
   class EventContextMixin extends superClass {
     /**

package/src/vaadin-grid-filter-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 GridFilterColumnMixin = (superClass) =>
   class extends superClass {
     static get properties() {

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

@@ -22,7 +22,9 @@ export * from './vaadin-grid-filter-column-mixin.js';
  *    ...
  * ```
  */
-declare class GridFilterColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridFilterColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
 interface GridFilterColumn<TItem = GridDefaultItem>
   extends GridFilterColumnMixinClass, GridColumnMixin<TItem, GridColumn<TItem>>, GridColumn<TItem> {}

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

@@ -23,7 +23,6 @@ import { GridFilterColumnMixin } from './vaadin-grid-filter-column-mixin.js';
  *
  * @customElement vaadin-grid-filter-column
  * @extends GridColumn
- * @mixes GridFilterColumnMixin
  */
 class GridFilterColumn extends GridFilterColumnMixin(GridColumn) {
   static get is() {

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