@vaadin/grid-pro 25.2.0-alpha1 → 25.2.0-alpha11

package/custom-elements.json

@@ -890,7 +890,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "\n`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).",
+          "description": "`<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.\nIt extends `<vaadin-grid>` and adds extra features on top of the basic ones.\n\nSee [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.\n\n```html\n<vaadin-grid-pro></vaadin-grid-pro>\n```\n\n### Internal components\n\nIn addition to `<vaadin-grid-pro>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).",
           "name": "GridPro",
           "members": [
             {
@@ -1066,6 +1066,20 @@
                 "package": "@vaadin/grid/src/vaadin-grid.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",
@@ -1532,11 +1546,6 @@
                 "name": "Grid",
                 "package": "@vaadin/grid/src/vaadin-grid.js"
               }
-            },
-            {
-              "kind": "field",
-              "name": "slotStyles",
-              "readonly": true
             }
           ],
           "events": [
@@ -1577,7 +1586,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",
               "inheritedFrom": {
                 "name": "Grid",
@@ -1666,7 +1675,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired before exiting the cell edit mode, if the value has been changed.",
+              "description": "Fired before exiting cell edit mode if the value has been changed. If the default is prevented, the value change is not applied.",
               "inheritedFrom": {
                 "name": "InlineEditingMixin",
                 "module": "src/vaadin-grid-pro-inline-editing-mixin.js"
@@ -1818,6 +1827,18 @@
                 "package": "@vaadin/grid/src/vaadin-grid.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-pro",
-  "version": "25.2.0-alpha1",
+  "version": "25.2.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -37,22 +37,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha1",
-    "@vaadin/checkbox": "25.2.0-alpha1",
-    "@vaadin/component-base": "25.2.0-alpha1",
-    "@vaadin/grid": "25.2.0-alpha1",
-    "@vaadin/lit-renderer": "25.2.0-alpha1",
-    "@vaadin/select": "25.2.0-alpha1",
-    "@vaadin/text-field": "25.2.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha1",
+    "@vaadin/a11y-base": "25.2.0-alpha11",
+    "@vaadin/checkbox": "25.2.0-alpha11",
+    "@vaadin/component-base": "25.2.0-alpha11",
+    "@vaadin/grid": "25.2.0-alpha11",
+    "@vaadin/lit-renderer": "25.2.0-alpha11",
+    "@vaadin/select": "25.2.0-alpha11",
+    "@vaadin/text-field": "25.2.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha1",
-    "@vaadin/chai-plugins": "25.2.0-alpha1",
-    "@vaadin/test-runner-commands": "25.2.0-alpha1",
+    "@vaadin/aura": "25.2.0-alpha11",
+    "@vaadin/chai-plugins": "25.2.0-alpha11",
+    "@vaadin/test-runner-commands": "25.2.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha11",
     "sinon": "^21.0.2"
   },
   "cvdlName": "vaadin-grid-pro",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
+  "gitHead": "fdc37e932709f95491a027aeb2090911cb7528c6"
 }

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

@@ -4,16 +4,12 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 import { get, set } from '@vaadin/component-base/src/path-utils.js';
 
-/**
- * @polymerMixin
- */
 export const GridProEditColumnMixin = (superClass) =>
   class extends superClass {
     static get properties() {
@@ -60,7 +56,6 @@ export const GridProEditColumnMixin = (superClass) =>
          */
         editorType: {
           type: String,
-          notify: true, // FIXME(web-padawan): needed by Flow counterpart
           value: 'text',
         },
 

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

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

package/src/vaadin-grid-pro-edit-column.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -32,7 +31,6 @@ import { GridProEditColumnMixin } from './vaadin-grid-pro-edit-column-mixin.js';
  *
  * @customElement vaadin-grid-pro-edit-column
  * @extends GridColumn
- * @mixes GridProEditColumnMixin
  */
 class GridProEditColumn extends GridProEditColumnMixin(GridColumn) {
   static get is() {

package/src/vaadin-grid-pro-edit-select-mixin.js

@@ -4,14 +4,10 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
 
-/**
- * @polymerMixin
- */
 export const GridProEditSelectMixin = (superClass) =>
   class extends superClass {
     static get properties() {
@@ -96,13 +92,13 @@ export const GridProEditSelectMixin = (superClass) =>
     }
 
     _optionsChanged(options) {
-      if (options && options.length) {
+      if (options?.length) {
         this.items = options.map((option) => ({
           label: option,
           value: option,
         }));
 
-        this._overlayElement = this._overlayElement || this.shadowRoot.querySelector('vaadin-select-overlay');
+        this._overlayElement ||= this.shadowRoot.querySelector('vaadin-select-overlay');
         this._overlayElement.addEventListener('vaadin-overlay-outside-click', () => {
           this._grid._stopEdit();
         });

package/src/vaadin-grid-pro-edit-select.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -17,7 +16,6 @@ import { GridProEditSelectMixin } from './vaadin-grid-pro-edit-select-mixin.js';
  *
  * @customElement vaadin-grid-pro-edit-select
  * @extends Select
- * @mixes GridProEditSelectMixin
  * @private
  */
 class GridProEditSelect extends GridProEditSelectMixin(Select) {

package/src/vaadin-grid-pro-inline-editing-mixin.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -13,9 +12,6 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { get, set } from '@vaadin/component-base/src/path-utils.js';
 import { iterateRowCells, updatePart } from '@vaadin/grid/src/vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const InlineEditingMixin = (superClass) =>
   class InlineEditingMixin extends superClass {
     static get properties() {
@@ -28,7 +24,6 @@ export const InlineEditingMixin = (superClass) =>
          */
         enterNextRow: {
           type: Boolean,
-          notify: true, // FIXME(yuriy-fix): needed by Flow counterpart
         },
 
         /**
@@ -41,7 +36,6 @@ export const InlineEditingMixin = (superClass) =>
          */
         singleCellEdit: {
           type: Boolean,
-          notify: true, // FIXME(yuriy-fix): needed by Flow counterpart
         },
 
         /**
@@ -230,7 +224,7 @@ export const InlineEditingMixin = (superClass) =>
             return;
           }
 
-          if (edited && edited.cell === cell) {
+          if (edited?.cell === cell) {
             return;
           }
 
@@ -257,7 +251,7 @@ export const InlineEditingMixin = (superClass) =>
 
     /** @private */
     _isEditColumn(column) {
-      return column && column.localName.toLowerCase() === 'vaadin-grid-pro-edit-column';
+      return column?.localName.toLowerCase() === 'vaadin-grid-pro-edit-column';
     }
 
     /** @private */
@@ -303,7 +297,7 @@ export const InlineEditingMixin = (superClass) =>
           return;
         }
 
-        if (edited && edited.cell === cell && column._getEditorComponent(cell).contains(e.target)) {
+        if (edited?.cell === cell && column._getEditorComponent(cell).contains(e.target)) {
           return;
         }
 
@@ -325,6 +319,19 @@ export const InlineEditingMixin = (superClass) =>
       this._debouncerStopEdit = Debouncer.debounce(this._debouncerStopEdit, animationFrame, this._stopEdit.bind(this));
     }
 
+    /**
+     * Override method from ScrollMixin to stop editing if the edited cell
+     * is scrolled out of the view and removed from the DOM.
+     * @private
+     */
+    __updateColumnsBodyContentHidden() {
+      super.__updateColumnsBodyContentHidden();
+
+      if (this.__edited && !this.__edited.cell.isConnected) {
+        this._stopEdit(true, false);
+      }
+    }
+
     /** @private */
     __shouldIgnoreFocusOut(event) {
       const edited = this.__edited;
@@ -357,9 +364,11 @@ export const InlineEditingMixin = (superClass) =>
       // Cancel debouncer enqueued on focusout
       this._cancelStopEdit();
 
-      this._scrollHorizontallyToCell(cell);
+      // Scroll column into view synchronously, which also triggers lazy column
+      // rendering to ensure cells for that column are in the DOM.
+      this.scrollToColumn(column);
 
-      const model = this.__getRowModel(cell.parentElement);
+      const model = this.__getRowModel(cell.__parentRow);
       this.__edited = { cell, column, model };
       column._startCellEdit(cell, model);
 
@@ -448,7 +457,7 @@ export const InlineEditingMixin = (superClass) =>
 
       // Do not prevent Tab to allow native input blur and wait for it,
       // unless the keydown event is from the edit cell select overlay.
-      if (e.key === 'Tab' && editor && editor.contains(e.target)) {
+      if (e.key === 'Tab' && editor?.contains(e.target)) {
         const ignore = await new Promise((resolve) => {
           editor.addEventListener(
             'focusout',
@@ -505,7 +514,7 @@ export const InlineEditingMixin = (superClass) =>
           // Stop looking if the next cell is editable
           const nextRow = this._getRowByIndex(nextIndex);
           // eslint-disable-next-line @typescript-eslint/no-loop-func
-          nextCell = nextRow && Array.from(nextRow.children).find((cell) => cell._column === nextColumn);
+          nextCell = nextRow && Array.from(nextRow.__cells).find((cell) => cell._column === nextColumn);
           if (nextCell && this._isCellEditable(nextCell)) {
             break;
           }
@@ -537,7 +546,7 @@ export const InlineEditingMixin = (superClass) =>
         if (!this._isCellEditable(cell)) {
           // Cell is no longer editable, cancel edit
           this._stopEdit(true, true);
-        } else if (cell.parentNode === row && item && this.getItemId(model.item) !== this.getItemId(item)) {
+        } else if (cell.__parentRow === row && item && this.getItemId(model.item) !== this.getItemId(item)) {
           // Edited item identity has changed, stop edit
           this._stopEdit();
         }
@@ -573,29 +582,7 @@ export const InlineEditingMixin = (superClass) =>
         return true;
       }
       // Otherwise, check isCellEditable function
-      const model = this.__getRowModel(cell.parentElement);
+      const model = this.__getRowModel(cell.__parentRow);
       return column.isCellEditable(model);
     }
-
-    /**
-     * Fired before exiting the cell edit mode, if the value has been changed.
-     * If the default is prevented, value change would not be applied.
-     *
-     * @event item-property-changed
-     * @param {Object} detail
-     * @param {Object} detail.index the row index of the edited cell
-     * @param {Object} detail.item the grid item rendered to the row of the edited cell
-     * @param {Object} detail.path the column path of the edited cell
-     * @param {Object} detail.value the new value of the edited cell
-     */
-
-    /**
-     * Fired when the user starts editing a grid cell.
-     *
-     * @event cell-edit-started
-     * @param {Object} detail
-     * @param {Object} detail.index the row index of the edited cell
-     * @param {Object} detail.item the grid item rendered to the row of the edited cell
-     * @param {Object} detail.path the column path of the edited cell
-     */
   };

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

@@ -69,7 +69,7 @@ export interface GridProEventMap<TItem>
  * @fires {CustomEvent} grid-dragstart - Fired when starting to drag grid rows.
  * @fires {CustomEvent} grid-dragend - Fired when the dragging of the rows ends.
  * @fires {CustomEvent} grid-drop - Fired when a drop occurs on top of the grid.
- * @fires {CustomEvent} item-property-changed - Fired before exiting the cell edit mode, if the value has been changed.
+ * @fires {CustomEvent} item-property-changed - Fired before exiting cell edit mode if the value has been changed. If the default is prevented, the value change is not applied.
  * @fires {CustomEvent} loading-changed - Fired when the `loading` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
  */

package/src/vaadin-grid-pro.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -15,7 +14,6 @@ import { gridProStyles } from './styles/vaadin-grid-pro-base-styles.js';
 import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
 
 /**
- *
  * `<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.
  * It extends `<vaadin-grid>` and adds extra features on top of the basic ones.
  *
@@ -43,13 +41,12 @@ import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
  * @fires {CustomEvent} grid-dragstart - Fired when starting to drag grid rows.
  * @fires {CustomEvent} grid-dragend - Fired when the dragging of the rows ends.
  * @fires {CustomEvent} grid-drop - Fired when a drop occurs on top of the grid.
- * @fires {CustomEvent} item-property-changed - Fired before exiting the cell edit mode, if the value has been changed.
+ * @fires {CustomEvent} item-property-changed - Fired before exiting cell edit mode if the value has been changed. If the default is prevented, the value change is not applied.
  * @fires {CustomEvent} loading-changed - Fired when the `loading` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
  *
  * @customElement vaadin-grid-pro
  * @extends Grid
- * @mixes InlineEditingMixin
  */
 class GridPro extends SlotStylesMixin(InlineEditingMixin(Grid)) {
   static get is() {