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

package/custom-elements.json

@@ -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-alpha10",
   "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-alpha10",
+    "@vaadin/checkbox": "25.2.0-alpha10",
+    "@vaadin/component-base": "25.2.0-alpha10",
+    "@vaadin/grid": "25.2.0-alpha10",
+    "@vaadin/lit-renderer": "25.2.0-alpha10",
+    "@vaadin/select": "25.2.0-alpha10",
+    "@vaadin/text-field": "25.2.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
     "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-alpha10",
+    "@vaadin/chai-plugins": "25.2.0-alpha10",
+    "@vaadin/test-runner-commands": "25.2.0-alpha10",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
     "sinon": "^21.0.2"
   },
   "cvdlName": "vaadin-grid-pro",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
+  "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
 }

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

@@ -60,7 +60,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-select-mixin.js

@@ -96,13 +96,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-inline-editing-mixin.js

@@ -28,7 +28,6 @@ export const InlineEditingMixin = (superClass) =>
          */
         enterNextRow: {
           type: Boolean,
-          notify: true, // FIXME(yuriy-fix): needed by Flow counterpart
         },
 
         /**
@@ -41,7 +40,6 @@ export const InlineEditingMixin = (superClass) =>
          */
         singleCellEdit: {
           type: Boolean,
-          notify: true, // FIXME(yuriy-fix): needed by Flow counterpart
         },
 
         /**
@@ -230,7 +228,7 @@ export const InlineEditingMixin = (superClass) =>
             return;
           }
 
-          if (edited && edited.cell === cell) {
+          if (edited?.cell === cell) {
             return;
           }
 
@@ -257,7 +255,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 +301,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 +323,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 +368,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 +461,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 +518,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 +550,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 +586,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

@@ -43,7 +43,7 @@ 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.
  *