@vaadin/grid 25.1.0-alpha9 → 25.1.0-beta2

package/custom-elements.json

@@ -204,24 +204,6 @@
       "kind": "javascript-module",
       "path": "src/vaadin-grid-active-item-mixin.js",
       "declarations": [
-        {
-          "kind": "function",
-          "name": "isFocusable",
-          "parameters": [
-            {
-              "name": "target",
-              "type": {
-                "text": "!Element"
-              }
-            }
-          ],
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
-          "privacy": "protected"
-        },
         {
           "kind": "mixin",
           "description": "",
@@ -264,14 +246,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "isFocusable",
-          "declaration": {
-            "name": "isFocusable",
-            "module": "src/vaadin-grid-active-item-mixin.js"
-          }
-        },
         {
           "kind": "js",
           "name": "ActiveItemMixin",
@@ -372,7 +346,8 @@
                 "text": "number"
               },
               "description": "Flex grow ratio for the column group as the sum of the ratios of its child columns.",
-              "attribute": "flex-grow"
+              "attribute": "flex-grow",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -537,7 +512,8 @@
                 "text": "string"
               },
               "description": "Width of the column group as the sum of the widths of its child columns.",
-              "attribute": "width"
+              "attribute": "width",
+              "readonly": true
             }
           ],
           "attributes": [
@@ -733,6 +709,7 @@
               },
               "description": "Flex grow ratio for the column group as the sum of the ratios of its child columns.",
               "attribute": "flex-grow",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "GridColumnGroupMixin",
                 "module": "src/vaadin-grid-column-group-mixin.js"
@@ -902,6 +879,7 @@
               },
               "description": "Width of the column group as the sum of the widths of its child columns.",
               "attribute": "width",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "GridColumnGroupMixin",
                 "module": "src/vaadin-grid-column-group-mixin.js"
@@ -2410,7 +2388,8 @@
                 "text": "boolean"
               },
               "description": "`true` while data is being requested from the data provider.",
-              "attribute": "loading"
+              "attribute": "loading",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -3840,16 +3819,7 @@
           "name": "KeyboardNavigationMixin",
           "members": [],
           "events": [],
-          "attributes": [
-            {
-              "name": "interacting",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Indicates whether the grid is currently in interaction mode.\nIn interaction mode the user is currently interacting with a control,\nsuch as an input or a select, within a cell.\nIn interaction mode keyboard navigation between cells is disabled.\nInteraction mode also prevents the focus target cell of that section of\nthe grid from receiving focus, allowing the user to switch focus to\ncontrols in adjacent cells, rather than focussing the outer cell\nitself.",
-              "fieldName": "interacting"
-            }
-          ],
+          "attributes": [],
           "parameters": [
             {
               "name": "superClass"
@@ -4246,6 +4216,7 @@
               },
               "description": "`true` while data is being requested from the data provider.",
               "attribute": "loading",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "DataProviderMixin",
                 "module": "src/vaadin-grid-data-provider-mixin.js"
@@ -4584,22 +4555,6 @@
                 "module": "src/vaadin-grid-drag-and-drop-mixin.js"
               }
             },
-            {
-              "name": "interacting",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Indicates whether the grid is currently in interaction mode.\nIn interaction mode the user is currently interacting with a control,\nsuch as an input or a select, within a cell.\nIn interaction mode keyboard navigation between cells is disabled.\nInteraction mode also prevents the focus target cell of that section of\nthe grid from receiving focus, allowing the user to switch focus to\ncontrols in adjacent cells, rather than focussing the outer cell\nitself.",
-              "fieldName": "interacting",
-              "inheritedFrom": {
-                "name": "KeyboardNavigationMixin",
-                "module": "src/vaadin-grid-keyboard-navigation-mixin.js"
-              }
-            },
-            {
-              "name": "is-attached",
-              "fieldName": "isAttached"
-            },
             {
               "name": "is-item-selectable",
               "type": {
@@ -4731,18 +4686,6 @@
                 "name": "DataProviderMixin",
                 "module": "src/vaadin-grid-data-provider-mixin.js"
               }
-            },
-            {
-              "name": "tabindex",
-              "type": {
-                "text": "number"
-              },
-              "description": "Indicates whether the element can be focused and where it participates in sequential keyboard navigation.",
-              "fieldName": "tabindex",
-              "inheritedFrom": {
-                "name": "TabindexMixin",
-                "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
-              }
             }
           ],
           "mixins": [
@@ -8009,6 +7952,7 @@
               },
               "description": "`true` while data is being requested from the data provider.",
               "attribute": "loading",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "DataProviderMixin",
                 "module": "src/vaadin-grid-data-provider-mixin.js"
@@ -8495,26 +8439,6 @@
                 "module": "src/vaadin-grid-drag-and-drop-mixin.js"
               }
             },
-            {
-              "name": "interacting",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Indicates whether the grid is currently in interaction mode.\nIn interaction mode the user is currently interacting with a control,\nsuch as an input or a select, within a cell.\nIn interaction mode keyboard navigation between cells is disabled.\nInteraction mode also prevents the focus target cell of that section of\nthe grid from receiving focus, allowing the user to switch focus to\ncontrols in adjacent cells, rather than focussing the outer cell\nitself.",
-              "fieldName": "interacting",
-              "inheritedFrom": {
-                "name": "KeyboardNavigationMixin",
-                "module": "src/vaadin-grid-keyboard-navigation-mixin.js"
-              }
-            },
-            {
-              "name": "is-attached",
-              "fieldName": "isAttached",
-              "inheritedFrom": {
-                "name": "GridMixin",
-                "module": "src/vaadin-grid-mixin.js"
-              }
-            },
             {
               "name": "is-item-selectable",
               "type": {
@@ -8646,18 +8570,6 @@
                 "name": "DataProviderMixin",
                 "module": "src/vaadin-grid-data-provider-mixin.js"
               }
-            },
-            {
-              "name": "tabindex",
-              "type": {
-                "text": "number"
-              },
-              "description": "Indicates whether the element can be focused and where it participates in sequential keyboard navigation.",
-              "fieldName": "tabindex",
-              "inheritedFrom": {
-                "name": "TabindexMixin",
-                "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
-              }
             }
           ]
         }

package/package.json

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

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

@@ -39,7 +39,6 @@ export const ColumnBaseMixin = (superClass) =>
         /**
          * When true, the column is frozen. When a column inside of a column group is frozen,
          * all of the sibling columns inside the group will get frozen also.
-         * @type {boolean}
          */
         frozen: {
           type: Boolean,
@@ -55,7 +54,6 @@ export const ColumnBaseMixin = (superClass) =>
          *
          * Column can not be set as `frozen` and `frozenToEnd` at the same time.
          * @attr {boolean} frozen-to-end
-         * @type {boolean}
          */
         frozenToEnd: {
           type: Boolean,
@@ -71,7 +69,6 @@ export const ColumnBaseMixin = (superClass) =>
          * while navigating to help user identify the current row as uniquely as possible.
          *
          * @attr {boolean} row-header
-         * @type {boolean}
          */
         rowHeader: {
           type: Boolean,
@@ -128,7 +125,6 @@ export const ColumnBaseMixin = (superClass) =>
         },
 
         /**
-         * @type {boolean}
          * @protected
          */
         _lastFrozen: {
@@ -138,7 +134,6 @@ export const ColumnBaseMixin = (superClass) =>
         },
 
         /**
-         * @type {boolean}
          * @protected
          */
         _bodyContentHidden: {
@@ -148,7 +143,6 @@ export const ColumnBaseMixin = (superClass) =>
         },
 
         /**
-         * @type {boolean}
          * @protected
          */
         _firstFrozenToEnd: {
@@ -847,7 +841,6 @@ export const GridColumnMixin = (superClass) =>
         /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
          * @attr {number} flex-grow
-         * @type {number}
          */
         flexGrow: {
           type: Number,
@@ -914,7 +907,6 @@ export const GridColumnMixin = (superClass) =>
          *
          * The column width may still grow larger when `flexGrow` is not 0.
          * @attr {boolean} auto-width
-         * @type {boolean}
          */
         autoWidth: {
           type: Boolean,

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

@@ -17,7 +17,6 @@ export const ColumnReorderingMixin = (superClass) =>
         /**
          * Set to true to allow column reordering.
          * @attr {boolean} column-reordering-allowed
-         * @type {boolean}
          */
         columnReorderingAllowed: {
           type: Boolean,
@@ -63,8 +62,24 @@ export const ColumnReorderingMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _cancelReorderForMultiTouch(e) {
+      if (e.touches.length > 1) {
+        clearTimeout(this._startTouchReorderTimeout);
+        if (this._draggedColumn) {
+          this._onTrackEnd();
+        }
+        return true;
+      }
+      return false;
+    }
+
     /** @private */
     _onTouchStart(e) {
+      if (this._cancelReorderForMultiTouch(e)) {
+        return;
+      }
+
       // Touch event, delay activation by 100ms
       this._startTouchReorderTimeout = setTimeout(() => {
         this._onTrackStart({
@@ -78,6 +93,10 @@ export const ColumnReorderingMixin = (superClass) =>
 
     /** @private */
     _onTouchMove(e) {
+      if (this._cancelReorderForMultiTouch(e)) {
+        return;
+      }
+
       if (this._draggedColumn) {
         e.preventDefault();
       }

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

@@ -16,8 +16,23 @@ export const ColumnResizingMixin = (superClass) =>
       const scroller = this.$.scroller;
       addListener(scroller, 'track', this._onHeaderTrack.bind(this));
 
-      // Disallow scrolling while resizing
-      scroller.addEventListener('touchmove', (e) => scroller.hasAttribute('column-resizing') && e.preventDefault());
+      // Cancel resizing on multi-touch (e.g. pinch-zoom)
+      scroller.addEventListener('touchstart', (e) => {
+        if (e.touches.length > 1) {
+          scroller.removeAttribute('column-resizing');
+        }
+      });
+
+      // Disallow scrolling while resizing, but allow multi-touch gestures
+      scroller.addEventListener('touchmove', (e) => {
+        if (e.touches.length > 1) {
+          scroller.removeAttribute('column-resizing');
+          return;
+        }
+        if (scroller.hasAttribute('column-resizing')) {
+          e.preventDefault();
+        }
+      });
 
       // Disable contextmenu on any resize separator.
       scroller.addEventListener('contextmenu', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
@@ -30,6 +45,11 @@ export const ColumnResizingMixin = (superClass) =>
     _onHeaderTrack(e) {
       const handle = e.target;
       if (handle.part.contains('resize-handle')) {
+        // Ignore track events after multi-touch cancelled resizing
+        if (e.detail.state !== 'start' && !this.$.scroller.hasAttribute('column-resizing')) {
+          return;
+        }
+
         const cell = handle.parentElement;
         let column = cell._column;
 

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

@@ -18,7 +18,6 @@ export const DataProviderMixin = (superClass) =>
         /**
          * The number of root-level items in the grid.
          * @attr {number} size
-         * @type {number}
          */
         size: {
           type: Number,
@@ -38,7 +37,6 @@ export const DataProviderMixin = (superClass) =>
         /**
          * Number of items fetched at a time from the dataprovider.
          * @attr {number} page-size
-         * @type {number}
          */
         pageSize: {
           type: Number,

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

@@ -82,7 +82,6 @@ export const KeyboardNavigationMixin = (superClass) =>
          * the grid from receiving focus, allowing the user to switch focus to
          * controls in adjacent cells, rather than focussing the outer cell
          * itself.
-         * @type {boolean}
          * @private
          */
         interacting: {

package/src/vaadin-grid-mixin.js

@@ -8,6 +8,7 @@ import { animationFrame, microTask } from '@vaadin/component-base/src/async.js';
 import { isAndroid, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
+import { setTouchAction } from '@vaadin/component-base/src/gestures.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
@@ -133,7 +134,6 @@ export const GridMixin = (superClass) =>
          * Effectively, this disables the grid's virtual scrolling so that all the rows are rendered in the DOM at once.
          * If the grid has a large number of items, using the feature is discouraged to avoid performance issues.
          * @attr {boolean} all-rows-visible
-         * @type {boolean}
          */
         allRowsVisible: {
           type: Boolean,
@@ -248,6 +248,9 @@ export const GridMixin = (superClass) =>
     ready() {
       super.ready();
 
+      setTouchAction(this, '');
+      setTouchAction(this.$.scroller, '');
+
       this.__virtualizer = new Virtualizer({
         createElements: this._createScrollerRows.bind(this),
         updateElement: this._updateScrollerItem.bind(this),

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { addListener } from '@vaadin/component-base/src/gestures.js';
+import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
 
 /**
  * A mixin that provides basic functionality for the
@@ -42,7 +42,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
          * @attr {number} flex-grow
-         * @type {number}
          */
         flexGrow: {
           type: Number,
@@ -53,7 +52,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * When true, all the items are selected.
          * @attr {boolean} select-all
-         * @type {boolean}
          */
         selectAll: {
           type: Boolean,
@@ -65,7 +63,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * When true, the active item gets automatically selected.
          * @attr {boolean} auto-select
-         * @type {boolean}
          */
         autoSelect: {
           type: Boolean,
@@ -76,7 +73,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * When true, rows can be selected by dragging over the selection column.
          * @attr {boolean} drag-select
-         * @type {boolean}
          */
         dragSelect: {
           type: Boolean,
@@ -118,6 +114,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       this.__onCellMouseDown = this.__onCellMouseDown.bind(this);
       this.__onGridInteraction = this.__onGridInteraction.bind(this);
       this.__onActiveItemChanged = this.__onActiveItemChanged.bind(this);
+      this.__onTouchStart = this.__onTouchStart.bind(this);
       this.__onSelectRowCheckboxChange = this.__onSelectRowCheckboxChange.bind(this);
       this.__onSelectAllCheckboxChange = this.__onSelectAllCheckboxChange.bind(this);
     }
@@ -130,6 +127,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         this._grid.addEventListener('keydown', this.__onGridInteraction, { capture: true });
         this._grid.addEventListener('mousedown', this.__onGridInteraction);
         this._grid.addEventListener('active-item-changed', this.__onActiveItemChanged);
+        this._grid.addEventListener('touchstart', this.__onTouchStart);
       }
     }
 
@@ -141,6 +139,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         this._grid.removeEventListener('keydown', this.__onGridInteraction, { capture: true });
         this._grid.removeEventListener('mousedown', this.__onGridInteraction);
         this._grid.removeEventListener('active-item-changed', this.__onActiveItemChanged);
+        this._grid.removeEventListener('touchstart', this.__onTouchStart);
       }
     }
 
@@ -178,6 +177,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         checkbox.addEventListener('change', this.__onSelectRowCheckboxChange);
         root.appendChild(checkbox);
         addListener(root, 'track', this.__onCellTrack);
+        setTouchAction(root, 'pinch-zoom');
         root.addEventListener('mousedown', this.__onCellMouseDown);
         root.addEventListener('click', this.__onCellClick);
       }
@@ -234,6 +234,10 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       this.__dragCurrentY = event.detail.y;
       this.__dragDy = event.detail.dy;
       if (event.detail.state === 'start') {
+        // Don't start drag-select during multi-touch (e.g. pinch-zoom)
+        if (this.__multiTouchActive) {
+          return;
+        }
         const renderedRows = this._grid._getRenderedRows();
         // Get the row where the drag started
         const dragStartRow = renderedRows.find((row) => row.contains(event.currentTarget.assignedSlot));
@@ -266,6 +270,18 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onTouchStart(e) {
+      if (e.touches.length > 1) {
+        this.__multiTouchActive = true;
+        // Cancel in-progress drag-select on multi-touch (e.g. pinch-zoom)
+        this.__dragStartIndex = undefined;
+        this.__dragStartItem = undefined;
+      } else {
+        this.__multiTouchActive = false;
+      }
+    }
+
     /** @private */
     __onCellClick(e) {
       if (this.__dragStartIndex !== undefined) {

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

@@ -16,7 +16,6 @@ export const SortMixin = (superClass) =>
         /**
          * When `true`, all `<vaadin-grid-sorter>` are applied for sorting.
          * @attr {boolean} multi-sort
-         * @type {boolean}
          */
         multiSort: {
           type: Boolean,
@@ -48,7 +47,6 @@ export const SortMixin = (superClass) =>
          * `multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.
          *
          * @attr {boolean} multi-sort-on-shift-click
-         * @type {boolean}
          */
         multiSortOnShiftClick: {
           type: Boolean,

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

@@ -15,7 +15,6 @@ export const GridTreeToggleMixin = (superClass) =>
         /**
          * Current level of the tree represented with a horizontal offset
          * of the toggle button.
-         * @type {number}
          */
         level: {
           type: Number,
@@ -26,7 +25,6 @@ export const GridTreeToggleMixin = (superClass) =>
 
         /**
          * Hides the toggle icon and disables toggling a tree sublevel.
-         * @type {boolean}
          */
         leaf: {
           type: Boolean,
@@ -36,7 +34,6 @@ export const GridTreeToggleMixin = (superClass) =>
 
         /**
          * Sublevel toggle state.
-         * @type {boolean}
          */
         expanded: {
           type: Boolean,