@vaadin/grid-pro 24.4.0-dev.4b20a0c55.3 → 24.4.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "24.4.0-dev.4b20a0c55.3",
+  "version": "24.4.0-rc1",
   "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-dev.4b20a0c55.3",
-    "@vaadin/component-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/grid": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/select": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/text-field": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/checkbox": "24.4.0-rc1",
+    "@vaadin/component-base": "24.4.0-rc1",
+    "@vaadin/grid": "24.4.0-rc1",
+    "@vaadin/lit-renderer": "24.4.0-rc1",
+    "@vaadin/select": "24.4.0-rc1",
+    "@vaadin/text-field": "24.4.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

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/theme/lumo/vaadin-grid-pro-edit-checkbox.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import '../../src/vaadin-grid-pro-edit-checkbox.js';

package/theme/lumo/vaadin-grid-pro-edit-column.d.ts

@@ -0,0 +1,4 @@
+import './vaadin-grid-pro-edit-checkbox.js';
+import './vaadin-grid-pro-edit-select.js';
+import './vaadin-grid-pro-edit-text-field.js';
+import '../../src/vaadin-grid-pro-edit-column.js';

package/theme/lumo/vaadin-grid-pro-edit-select-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-grid-pro-edit-select.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/select/theme/lumo/vaadin-select.js';
+import './vaadin-grid-pro-edit-select-styles.js';
+import '../../src/vaadin-grid-pro-edit-select.js';

package/theme/lumo/vaadin-grid-pro-edit-text-field-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/lumo/vaadin-grid-pro-edit-text-field.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+import './vaadin-grid-pro-edit-text-field-styles.js';
+import '../../src/vaadin-grid-pro-edit-text-field.js';

package/theme/lumo/vaadin-grid-pro-editor-styles.d.ts

@@ -0,0 +1,5 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+declare const gridProEditor: import("lit").CSSResult;
+export { gridProEditor };

package/theme/lumo/vaadin-grid-pro-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/style.js';

package/theme/lumo/vaadin-grid-pro.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/grid/theme/lumo/vaadin-grid-styles.js';
+import './vaadin-grid-pro-styles.js';
+import '../../src/vaadin-grid-pro.js';

package/theme/lumo/vaadin-lit-grid-pro-edit-checkbox.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
+import '../../src/vaadin-lit-grid-pro-edit-checkbox.js';

package/theme/lumo/vaadin-lit-grid-pro-edit-column.d.ts

@@ -0,0 +1,4 @@
+import './vaadin-lit-grid-pro-edit-checkbox.js';
+import './vaadin-lit-grid-pro-edit-select.js';
+import './vaadin-lit-grid-pro-edit-text-field.js';
+import '../../src/vaadin-lit-grid-pro-edit-column.js';

package/theme/lumo/vaadin-lit-grid-pro-edit-select.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/select/theme/lumo/vaadin-select-styles.js';
+import './vaadin-grid-pro-edit-select-styles.js';
+import '../../src/vaadin-lit-grid-pro-edit-select.js';

package/theme/lumo/vaadin-lit-grid-pro-edit-text-field.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
+import './vaadin-grid-pro-edit-text-field-styles.js';
+import '../../src/vaadin-lit-grid-pro-edit-text-field.js';

package/theme/lumo/vaadin-lit-grid-pro.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/grid/theme/lumo/vaadin-grid-styles.js';
+import './vaadin-grid-pro-styles.js';
+import '../../src/vaadin-lit-grid-pro.js';

package/theme/material/vaadin-grid-pro-edit-checkbox.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/material/vaadin-checkbox.js';
+import '../../src/vaadin-grid-pro-edit-checkbox.js';

package/theme/material/vaadin-grid-pro-edit-column.d.ts

@@ -0,0 +1,4 @@
+import './vaadin-grid-pro-edit-checkbox.js';
+import './vaadin-grid-pro-edit-select.js';
+import './vaadin-grid-pro-edit-text-field.js';
+import '../../src/vaadin-grid-pro-edit-column.js';

package/theme/material/vaadin-grid-pro-edit-select-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-grid-pro-edit-select.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/select/theme/material/vaadin-select.js';
+import './vaadin-grid-pro-edit-select-styles.js';
+import '../../src/vaadin-grid-pro-edit-select.js';

package/theme/material/vaadin-grid-pro-edit-text-field-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-grid-pro-edit-text-field.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+import './vaadin-grid-pro-edit-text-field-styles.js';
+import '../../src/vaadin-grid-pro-edit-text-field.js';

package/theme/material/vaadin-grid-pro-editor-styles.d.ts

@@ -0,0 +1,2 @@
+declare const gridProEditor: import("lit").CSSResult;
+export { gridProEditor };

package/theme/material/vaadin-grid-pro-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/grid/theme/material/vaadin-grid-styles.js';

package/theme/material/vaadin-grid-pro.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/grid/theme/material/vaadin-grid-styles.js';
+import './vaadin-grid-pro-styles.js';
+import '../../src/vaadin-grid-pro.js';

package/theme/material/vaadin-lit-grid-pro-edit-checkbox.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/material/vaadin-checkbox-styles.js';
+import '../../src/vaadin-lit-grid-pro-edit-checkbox.js';

package/theme/material/vaadin-lit-grid-pro-edit-column.d.ts

@@ -0,0 +1,4 @@
+import './vaadin-lit-grid-pro-edit-checkbox.js';
+import './vaadin-lit-grid-pro-edit-select.js';
+import './vaadin-lit-grid-pro-edit-text-field.js';
+import '../../src/vaadin-lit-grid-pro-edit-column.js';

package/theme/material/vaadin-lit-grid-pro-edit-select.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/select/theme/material/vaadin-select-styles.js';
+import './vaadin-grid-pro-edit-select-styles.js';
+import '../../src/vaadin-lit-grid-pro-edit-select.js';

package/theme/material/vaadin-lit-grid-pro-edit-text-field.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
+import './vaadin-grid-pro-edit-text-field-styles.js';
+import '../../src/vaadin-lit-grid-pro-edit-text-field.js';

package/theme/material/vaadin-lit-grid-pro.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/grid/theme/material/vaadin-grid-styles.js';
+import './vaadin-grid-pro-styles.js';
+import '../../src/vaadin-lit-grid-pro.js';