@vaadin/grid-pro 24.4.0-alpha9 → 24.4.0-beta2

package/README.md

@@ -7,7 +7,6 @@ An extension of the `vaadin-grid` component that provides inline editing with fu
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/grid-pro)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/grid-pro)](https://www.npmjs.com/package/@vaadin/grid-pro)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-grid-pro>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -39,15 +39,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "24.4.0-alpha9",
-    "@vaadin/component-base": "24.4.0-alpha9",
-    "@vaadin/grid": "24.4.0-alpha9",
-    "@vaadin/lit-renderer": "24.4.0-alpha9",
-    "@vaadin/select": "24.4.0-alpha9",
-    "@vaadin/text-field": "24.4.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9",
+    "@vaadin/checkbox": "24.4.0-beta2",
+    "@vaadin/component-base": "24.4.0-beta2",
+    "@vaadin/grid": "24.4.0-beta2",
+    "@vaadin/lit-renderer": "24.4.0-beta2",
+    "@vaadin/select": "24.4.0-beta2",
+    "@vaadin/text-field": "24.4.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.4.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
+  "gitHead": "886ab2e7ccb8353ac3b7a42ebb96dfe2d1211556"
 }

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

@@ -58,6 +58,24 @@ export declare class GridProEditColumnMixinClass<TItem> {
    */
   editorValuePath: string;
 
+  /**
+   * A function to check whether a specific cell of this column can be
+   * edited. This allows to disable editing of individual rows or cells,
+   * based on the item.
+   *
+   * Receives a `model` object containing the item for an individual row,
+   * and should return a boolean indicating whether the column's cell in
+   * that row is editable.
+   *
+   * The `model` object contains:
+   * - `model.index` The index of the item.
+   * - `model.item` The item.
+   * - `model.expanded` Sublevel toggle state.
+   * - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+   * - `model.selected` Selected state.
+   */
+  isCellEditable: (model: GridItemModel<TItem>) => boolean;
+
   protected _getEditorComponent(cell: HTMLElement): HTMLElement | null;
 
   protected _getEditorValue(editor: HTMLElement): unknown | null;

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

@@ -8,7 +8,6 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { addValueToAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { get, set } from '@vaadin/component-base/src/path-utils.js';
 
 /**
@@ -84,13 +83,36 @@ export const GridProEditColumnMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * A function to check whether a specific cell of this column can be
+         * edited. This allows to disable editing of individual rows or cells,
+         * based on the item.
+         *
+         * Receives a `model` object containing the item for an individual row,
+         * and should return a boolean indicating whether the column's cell in
+         * that row is editable.
+         *
+         * The `model` object contains:
+         * - `model.index` The index of the item.
+         * - `model.item` The item.
+         * - `model.expanded` Sublevel toggle state.
+         * - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
+         * - `model.selected` Selected state.
+         *
+         * @type {(model: GridItemModel) => boolean}
+         */
+        isCellEditable: {
+          type: Function,
+          observer: '_isCellEditableChanged',
+        },
+
         /** @private */
         _oldRenderer: Function,
       };
     }
 
     static get observers() {
-      return ['_editModeRendererChanged(editModeRenderer, __initialized)', '_cellsChanged(_cells)'];
+      return ['_editModeRendererChanged(editModeRenderer, __initialized)'];
     }
 
     constructor() {
@@ -121,11 +143,9 @@ export const GridProEditColumnMixin = (superClass) =>
     }
 
     /** @private */
-    _cellsChanged() {
-      this._cells.forEach((cell) => {
-        const target = cell._focusButton || cell;
-        addValueToAttribute(target, 'part', 'editable-cell');
-      });
+    _isCellEditableChanged(newValue, oldValue) {
+      // Re-render grid to update editable-cell part names
+      this._grid.requestContentUpdate();
     }
 
     /** @private */
@@ -267,8 +287,11 @@ export const GridProEditColumnMixin = (superClass) =>
       this._setEditorValue(editor, get(this.path, model.item));
       editor._grid = this._grid;
 
-      this._focusEditor(editor);
-      requestAnimationFrame(() => this._focusEditor(editor));
+      if (editor.updateComplete) {
+        editor.updateComplete.then(() => this._focusEditor(editor));
+      } else {
+        this._focusEditor(editor);
+      }
     }
 
     /**

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

@@ -11,6 +11,7 @@
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 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
@@ -218,6 +219,10 @@ export const InlineEditingMixin = (superClass) =>
             return;
           }
 
+          if (!this._isCellEditable(cell)) {
+            return;
+          }
+
           callback(e);
         }
       });
@@ -325,8 +330,10 @@ export const InlineEditingMixin = (superClass) =>
 
     /** @private */
     _startEdit(cell, column) {
+      const isCellEditable = this._isCellEditable(cell);
+
       // TODO: remove `_editingDisabled` after Flow counterpart is updated.
-      if (this.disabled || this._editingDisabled) {
+      if (this.disabled || this._editingDisabled || !isCellEditable) {
         return;
       }
       // Cancel debouncer enqueued on focusout
@@ -421,59 +428,67 @@ export const InlineEditingMixin = (superClass) =>
 
       this._cancelStopEdit();
 
-      const cols = this._getEditColumns();
-
+      const editableColumns = this._getEditColumns();
       const { cell, column, model } = this.__edited;
-      const colIndex = cols.indexOf(column);
-      const { index } = model;
 
-      let nextCol = null;
-      let nextIdx = index;
-
-      // Enter key
-      if (e.keyCode === 13) {
-        nextCol = column;
-
-        // Move up / down
-        if (this.enterNextRow) {
-          nextIdx = e.shiftKey ? index - 1 : index + 1;
-        }
+      this._stopEdit();
+      e.preventDefault();
+      // Prevent vaadin-grid handler from being called
+      e.stopImmediatePropagation();
+
+      // Try to find the next editable cell
+      let nextIndex = model.index;
+      let nextColumn = column;
+      let nextCell = cell;
+      let directionX = 0;
+      let directionY = 0;
+
+      // Enter key: move up / down
+      if (e.keyCode === 13 && this.enterNextRow) {
+        directionY = e.shiftKey ? -1 : 1;
       }
 
       // Tab: move right / left
       if (e.keyCode === 9) {
-        if (e.shiftKey) {
-          if (cols[colIndex - 1]) {
-            nextCol = cols[colIndex - 1];
-          } else if (index > 0) {
-            nextIdx = index - 1;
-            nextCol = cols[cols.length - 1];
+        directionX = e.shiftKey ? -1 : 1;
+      }
+
+      if (directionX || directionY) {
+        while (nextCell) {
+          if (directionX) {
+            // Move horizontally
+            nextColumn = editableColumns[editableColumns.indexOf(nextColumn) + directionX];
+            if (!nextColumn) {
+              // Wrap to the next or previous row
+              nextIndex += directionX;
+              nextColumn = editableColumns[directionX > 0 ? 0 : editableColumns.length - 1];
+            }
+          }
+          // Move vertically
+          if (directionY) {
+            nextIndex += directionY;
+          }
+          // 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);
+          if (nextCell && this._isCellEditable(nextCell)) {
+            break;
           }
-        } else if (cols[colIndex + 1]) {
-          nextCol = cols[colIndex + 1];
-        } else {
-          nextIdx = index + 1;
-          nextCol = cols[0];
         }
       }
 
-      const nextRow = nextIdx === index ? cell.parentNode : this._getRowByIndex(nextIdx) || null;
-
-      this._stopEdit();
-
-      if (nextRow && nextCol) {
-        const nextCell = Array.from(nextRow.children).find((cell) => cell._column === nextCol);
-        e.preventDefault();
-
-        // Prevent vaadin-grid handler from being called
-        e.stopImmediatePropagation();
+      // Focus current cell as fallback
+      if (!nextCell) {
+        nextCell = cell;
+        nextIndex = model.index;
+      }
 
-        if (!this.singleCellEdit && nextCell !== cell) {
-          this._startEdit(nextCell, nextCol);
-        } else {
-          this._ensureScrolledToIndex(nextIdx);
-          nextCell.focus();
-        }
+      if (!this.singleCellEdit && nextCell !== cell) {
+        this._startEdit(nextCell, nextColumn);
+      } else {
+        this._ensureScrolledToIndex(nextIndex);
+        nextCell.focus();
       }
     }
 
@@ -492,6 +507,46 @@ export const InlineEditingMixin = (superClass) =>
       super._updateItem(row, item);
     }
 
+    /**
+     * Override method from `StylingMixin` to apply `editable-cell` part to the
+     * cells of edit columns.
+     *
+     * @override
+     */
+    _generateCellPartNames(row, model) {
+      super._generateCellPartNames(row, model);
+
+      iterateRowCells(row, (cell) => {
+        const isEditable = this._isCellEditable(cell);
+        const target = cell._focusButton || cell;
+        updatePart(target, isEditable, 'editable-cell');
+      });
+    }
+
+    /** @private */
+    _isCellEditable(cell) {
+      const column = cell._column;
+      // Not editable if the column is not an edit column
+      if (!this._isEditColumn(column)) {
+        return false;
+      }
+      // Cell is editable by default if isCellEditable is not configured
+      if (!column.isCellEditable) {
+        return true;
+      }
+      // Otherwise, check isCellEditable function
+      const model = this.__getRowModel(cell.parentElement);
+      const isEditable = column.isCellEditable(model);
+
+      // Cancel editing if the cell is currently edited one and becomes no longer editable
+      // TODO: should be moved to `_updateItem` when Grid connector is updated to use it.
+      if (this.__edited && this.__edited.cell === cell && !isEditable) {
+        this._stopEdit(true, true);
+      }
+
+      return isEditable;
+    }
+
     /**
      * Fired before exiting the cell edit mode, if the value has been changed.
      * If the default is prevented, value change would not be applied.

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -378,6 +378,17 @@
                     "string"
                   ]
                 }
+              },
+              {
+                "name": "isCellEditable",
+                "description": "A function to check whether a specific cell of this column can be\nedited. This allows to disable editing of individual rows or cells,\nbased on the item.\n\nReceives a `model` object containing the item for an individual row,\nand should return a boolean indicating whether the column's cell in\nthat row is editable.\n\nThe `model` object contains:\n- `model.index` The index of the item.\n- `model.item` The item.\n- `model.expanded` Sublevel toggle state.\n- `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n- `model.selected` Selected state.",
+                "value": {
+                  "type": [
+                    "Function",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [
@@ -390,7 +401,7 @@
         },
         {
           "name": "vaadin-grid-pro",
-          "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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-grid) documentation for details.\n\n```\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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-grid) documentation for details.\n\n```\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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-select).",
           "attributes": [
             {
               "name": "size",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -159,6 +159,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".isCellEditable",
+              "description": "A function to check whether a specific cell of this column can be\nedited. This allows to disable editing of individual rows or cells,\nbased on the item.\n\nReceives a `model` object containing the item for an individual row,\nand should return a boolean indicating whether the column's cell in\nthat row is editable.\n\nThe `model` object contains:\n- `model.index` The index of the item.\n- `model.item` The item.\n- `model.expanded` Sublevel toggle state.\n- `model.level` Level of the tree represented with a horizontal offset of the toggle button.\n- `model.selected` Selected state.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@editor-type-changed",
               "description": "Fired when the `editorType` property changes.",
@@ -170,7 +177,7 @@
         },
         {
           "name": "vaadin-grid-pro",
-          "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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-grid) documentation for details.\n\n```\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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-grid) documentation for details.\n\n```\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>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-checkbox).\n- `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-select).",
           "extension": true,
           "attributes": [
             {