@vaadin/grid-pro 23.1.0-alpha3 → 23.1.0-beta2

package/lit.d.ts

@@ -0,0 +1 @@
+export * from './src/lit/column-renderer-directives.js';

package/lit.js

@@ -0,0 +1 @@
+export * from './src/lit/column-renderer-directives.js';

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
   "description": "vaadin-grid-pro",
   "license": "https://raw.githubusercontent.com/vaadin/web-components/master/packages/grid-pro/LICENSE",
+  "cvdlName": "vaadin-grid-pro",
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/web-components.git",
@@ -22,6 +23,8 @@
   "files": [
     "src",
     "theme",
+    "lit.js",
+    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -35,26 +38,27 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/grid": "23.1.0-alpha3",
-    "@vaadin/item": "23.1.0-alpha3",
-    "@vaadin/list-box": "23.1.0-alpha3",
-    "@vaadin/select": "23.1.0-alpha3",
-    "@vaadin/text-field": "23.1.0-alpha3",
+    "@vaadin/checkbox": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/grid": "23.1.0-beta2",
+    "@vaadin/item": "23.1.0-beta2",
+    "@vaadin/list-box": "23.1.0-beta2",
+    "@vaadin/lit-renderer": "23.1.0-beta2",
+    "@vaadin/select": "23.1.0-beta2",
+    "@vaadin/text-field": "23.1.0-beta2",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/date-picker": "23.1.0-alpha3",
-    "@vaadin/dialog": "23.1.0-alpha3",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
+    "@vaadin/date-picker": "23.1.0-beta2",
+    "@vaadin/dialog": "23.1.0-beta2",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/lit/column-renderer-directives.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
+ * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
+ */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive';
+import { GridItemModel } from '@vaadin/grid';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { GridProEditColumn } from '../vaadin-grid-pro-edit-column.js';
+
+export type GridProColumnEditModeLitRenderer<TItem> = (
+  item: TItem,
+  model: GridItemModel<TItem>,
+  column: GridProEditColumn,
+) => TemplateResult;
+
+export declare class GridProColumnEditModeRendererDirective<TItem> extends LitRendererDirective<
+  GridProEditColumn,
+  GridProColumnEditModeLitRenderer<TItem>
+> {
+  /**
+   * Adds the renderer callback to the grid edit column.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the renderer callback on the grid edit column.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the renderer callback from the grid edit column.
+   */
+  removeRenderer(): void;
+}
+
+/**
+ * A Lit directive for rendering the content of column's body cells when they are in edit mode.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid edit column
+ * via the `editModeRenderer` property. The renderer is called when a column's body cell switches to edit mode
+ * and whenever a single dependency or an array of dependencies changes as long as edit mode is on.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-pro-edit-column
+ *   ${columnEditModeRenderer((item, model, column) => html`...`)}
+ * ></vaadin-grid-pro-edit-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function columnEditModeRenderer<TItem>(
+  renderer: GridProColumnEditModeLitRenderer<TItem>,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridProColumnEditModeRendererDirective>;

package/src/lit/column-renderer-directives.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
+ * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
+ */
+import { directive } from 'lit/directive.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { CONTENT_UPDATE_DEBOUNCER } from '@vaadin/grid/src/lit/renderer-directives.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+
+export class GridProColumnEditModeRendererDirective extends LitRendererDirective {
+  /**
+   * Adds the renderer callback to the grid edit column.
+   */
+  addRenderer() {
+    this.element.editModeRenderer = (root, column, model) => {
+      this.renderRenderer(root, model.item, model, column);
+    };
+  }
+
+  /**
+   * Runs the renderer callback on the grid edit column.
+   */
+  runRenderer() {
+    const grid = this.element._grid;
+
+    grid[CONTENT_UPDATE_DEBOUNCER] = Debouncer.debounce(grid[CONTENT_UPDATE_DEBOUNCER], microTask, () => {
+      grid.requestContentUpdate();
+    });
+  }
+
+  /**
+   * Removes the renderer callback from the grid edit column.
+   */
+  removeRenderer() {
+    this.element.editModeRenderer = null;
+  }
+}
+
+/**
+ * A Lit directive for rendering the content of column's body cells when they are in edit mode.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid edit column
+ * via the `editModeRenderer` property. The renderer is called when a column's body cell switches to edit mode
+ * and whenever a single dependency or an array of dependencies changes as long as edit mode is on.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-pro-edit-column
+ *   ${columnEditModeRenderer((item, model, column) => html`...`)}
+ * ></vaadin-grid-pro-edit-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const columnEditModeRenderer = directive(GridProColumnEditModeRendererDirective);

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

@@ -59,7 +59,7 @@ class GridProEditColumn extends GridColumn {
        */
       editorOptions: {
         type: Array,
-        value: () => []
+        value: () => [],
       },
 
       /**
@@ -75,7 +75,7 @@ class GridProEditColumn extends GridColumn {
       editorType: {
         type: String,
         notify: true, // FIXME(web-padawan): needed by Flow counterpart
-        value: 'text'
+        value: 'text',
       },
 
       /**
@@ -85,7 +85,7 @@ class GridProEditColumn extends GridColumn {
        */
       editorValuePath: {
         type: String,
-        value: 'value'
+        value: 'value',
       },
 
       /**
@@ -93,11 +93,11 @@ class GridProEditColumn extends GridColumn {
        */
       path: {
         type: String,
-        observer: '_pathChanged'
+        observer: '_pathChanged',
       },
 
       /** @private */
-      _oldRenderer: Function
+      _oldRenderer: Function,
     };
   }
 
@@ -122,7 +122,7 @@ class GridProEditColumn extends GridColumn {
 
   /** @private */
   _pathChanged(path) {
-    if (!path || path.length == 0) {
+    if (!path || path.length === 0) {
       throw new Error('You should specify the path for the edit column');
     }
   }
@@ -132,7 +132,7 @@ class GridProEditColumn extends GridColumn {
     this._cells.forEach((cell) => {
       const part = cell.getAttribute('part');
       if (part.indexOf('editable-cell') < 0) {
-        cell.setAttribute('part', part + ' editable-cell');
+        cell.setAttribute('part', `${part} editable-cell`);
       }
     });
   }
@@ -243,9 +243,11 @@ class GridProEditColumn extends GridColumn {
   _setEditorValue(editor, value) {
     const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
     // FIXME(yuriy): Required for the flow counterpart as it is passing the string value to webcomponent
-    value = this.editorType === 'checkbox' && typeof value === 'string' ? value == 'true' : value;
+    value = this.editorType === 'checkbox' && typeof value === 'string' ? value === 'true' : value;
     set(editor, path, value);
-    editor.notifyPath && editor.notifyPath(path, value);
+    if (editor.notifyPath) {
+      editor.notifyPath(path, value);
+    }
   }
 
   /**

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

@@ -23,16 +23,16 @@ class GridProEditSelect extends Select {
     return {
       options: {
         type: Array,
-        value: () => []
+        value: () => [],
       },
 
       _grid: {
-        type: Object
+        type: Object,
       },
 
       _initialized: {
-        type: Boolean
-      }
+        type: Boolean,
+      },
     };
   }
 
@@ -72,7 +72,9 @@ class GridProEditSelect extends Select {
     }
 
     if (event.keyCode === 9) {
-      !this._grid.singleCellEdit && this._grid._switchEditCell(event);
+      if (!this._grid.singleCellEdit) {
+        this._grid._switchEditCell(event);
+      }
     }
 
     // Call `super` to close overlay on Tab.
@@ -82,7 +84,7 @@ class GridProEditSelect extends Select {
   _valueChanged(value, oldValue) {
     super._valueChanged(value, oldValue);
 
-    // select is first created without a value
+    // Select is first created without a value
     if (value === '' && oldValue === undefined) {
       return;
     }
@@ -123,7 +125,7 @@ class GridProEditSelect extends Select {
       // see https://github.com/vaadin/vaadin-list-mixin/issues/49
       setTimeout(() => {
         this.opened = true;
-        // any value change after first open will stop edit
+        // Any value change after first open will stop edit
         this._initialized = true;
       });
     }

package/src/vaadin-grid-pro-inline-editing-mixin.d.ts

@@ -7,7 +7,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function InlineEditingMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<InlineEditingMixinClass>;
 
 export declare class InlineEditingMixinClass {

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

@@ -22,7 +22,7 @@ export const InlineEditingMixin = (superClass) =>
          */
         enterNextRow: {
           type: Boolean,
-          notify: true // FIXME(yuriy-fix): needed by Flow counterpart
+          notify: true, // FIXME(yuriy-fix): needed by Flow counterpart
         },
 
         /**
@@ -35,7 +35,7 @@ export const InlineEditingMixin = (superClass) =>
          */
         singleCellEdit: {
           type: Boolean,
-          notify: true // FIXME(yuriy-fix): needed by Flow counterpart
+          notify: true, // FIXME(yuriy-fix): needed by Flow counterpart
         },
 
         /**
@@ -44,13 +44,13 @@ export const InlineEditingMixin = (superClass) =>
          * @attr {boolean} edit-on-click
          */
         editOnClick: {
-          type: Boolean
+          type: Boolean,
         },
 
         /** @private */
         _editingDisabled: {
-          type: Boolean
-        }
+          type: Boolean,
+        },
       };
     }
 
@@ -63,36 +63,48 @@ export const InlineEditingMixin = (superClass) =>
       this.__boundGlobalFocusIn = this._onGlobalFocusIn.bind(this);
 
       this._addEditColumnListener('mousedown', (e) => {
-        // prevent grid from resetting navigating state
+        // Prevent grid from resetting navigating state
         e.stopImmediatePropagation();
         this.toggleAttribute('navigating', true);
       });
 
       this._addEditColumnListener('focusout', (e) => {
-        // prevent grid from resetting navigating state
+        // Prevent grid from resetting navigating state
         e.stopImmediatePropagation();
       });
     }
 
     /** @protected */
     ready() {
-      // add listener before `vaadin-grid` interaction mode listener
+      // Add listener before `vaadin-grid` interaction mode listener
       this.addEventListener('keydown', (e) => {
         switch (e.keyCode) {
           case 27:
-            this.__edited && this._stopEdit(true);
+            if (this.__edited) {
+              this._stopEdit(true);
+            }
             break;
           case 9:
-            this.__edited && this._switchEditCell(e);
+            if (this.__edited) {
+              this._switchEditCell(e);
+            }
             break;
           case 13:
-            this.__edited ? this._switchEditCell(e) : this._enterEditFromEvent(e);
+            if (this.__edited) {
+              this._switchEditCell(e);
+            } else {
+              this._enterEditFromEvent(e);
+            }
             break;
           case 32:
-            !this.__edited && this._enterEditFromEvent(e);
+            if (!this.__edited) {
+              this._enterEditFromEvent(e);
+            }
             break;
           default:
-            e.key && e.key.length === 1 && this._enterEditFromEvent(e, 'text');
+            if (e.key && e.key.length === 1) {
+              this._enterEditFromEvent(e, 'text');
+            }
             break;
         }
       });
@@ -117,7 +129,7 @@ export const InlineEditingMixin = (superClass) =>
         }
       });
 
-      // dblclick does not work on iOS Safari
+      // Dblclick does not work on iOS Safari
       if (this._ios) {
         let firstClickTime;
         let waitingSecondClick = false;
@@ -179,7 +191,7 @@ export const InlineEditingMixin = (superClass) =>
     /** @private */
     _applyEdit({ path, value, index, item }) {
       this.set(path, value, item);
-      this.notifyPath('items.' + index + '.' + path, value);
+      this.notifyPath(`items.${index}.${path}`, value);
     }
 
     /** @private */
@@ -233,7 +245,7 @@ export const InlineEditingMixin = (superClass) =>
 
     /** @private */
     _cancelStopEdit() {
-      // stop edit on outside click will always trigger notify resize.
+      // Stop edit on outside click will always trigger notify resize.
       // when tabbing within same row it might not be needed, so cancel
       if (this._debouncerStopEdit) {
         this._debouncerStopEdit.cancel();
@@ -281,7 +293,7 @@ export const InlineEditingMixin = (superClass) =>
 
     /** @private */
     _onEditorFocusOut() {
-      // schedule stop on editor component focusout
+      // Schedule stop on editor component focusout
       this._debouncerStopEdit = Debouncer.debounce(this._debouncerStopEdit, animationFrame, this._stopEdit.bind(this));
     }
 
@@ -294,9 +306,9 @@ export const InlineEditingMixin = (superClass) =>
     _onGlobalFocusIn(e) {
       const edited = this.__edited;
       if (edited) {
-        // detect focus moving to e.g. vaadin-select-overlay
+        // Detect focus moving to e.g. vaadin-select-overlay
         const overlay = Array.from(e.composedPath()).filter(
-          (node) => node.nodeType === Node.ELEMENT_NODE && /^vaadin-(?!dialog).*-overlay$/i.test(node.localName)
+          (node) => node.nodeType === Node.ELEMENT_NODE && /^vaadin-(?!dialog).*-overlay$/i.test(node.localName),
         )[0];
 
         if (overlay) {
@@ -312,7 +324,7 @@ export const InlineEditingMixin = (superClass) =>
       if (this.disabled || this._editingDisabled) {
         return;
       }
-      // cancel debouncer enqueued on focusout
+      // Cancel debouncer enqueued on focusout
       this._cancelStopEdit();
 
       this._scrollHorizontallyToCell(cell);
@@ -326,10 +338,10 @@ export const InlineEditingMixin = (superClass) =>
           detail: {
             index: model.index,
             item: model.item,
-            path: column.path
+            path: column.path,
           },
-          composed: true
-        })
+          composed: true,
+        }),
       );
       this.addEventListener('item-property-changed', this.__boundItemPropertyChanged);
     }
@@ -363,12 +375,12 @@ export const InlineEditingMixin = (superClass) =>
                   index: model.index,
                   item: model.item,
                   path: column.path,
-                  value: value
+                  value,
                 },
                 bubbles: true,
                 cancelable: true,
-                composed: true
-              })
+                composed: true,
+              }),
             );
           }
         }
@@ -411,17 +423,17 @@ export const InlineEditingMixin = (superClass) =>
       let nextCol = null;
       let nextIdx = index;
 
-      // enter key
+      // Enter key
       if (e.keyCode === 13) {
         nextCol = column;
 
-        // move up / down
+        // Move up / down
         if (this.enterNextRow) {
           nextIdx = e.shiftKey ? index - 1 : index + 1;
         }
       }
 
-      // tab: move right / left
+      // Tab: move right / left
       if (e.keyCode === 9) {
         if (e.shiftKey) {
           if (cols[colIndex - 1]) {
@@ -446,7 +458,7 @@ export const InlineEditingMixin = (superClass) =>
         const nextCell = Array.from(nextRow.children).filter((cell) => cell._column === nextCol)[0];
         e.preventDefault();
 
-        // prevent vaadin-grid handler from being called
+        // Prevent vaadin-grid handler from being called
         e.stopImmediatePropagation();
 
         if (!this.singleCellEdit && nextCell !== cell) {

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

@@ -12,23 +12,19 @@ export { GridProEditorType } from './vaadin-grid-pro-edit-column.js';
  * Fired when the user starts editing a grid cell.
  */
 export type GridProCellEditStartedEvent<TItem> = CustomEvent<{
-  value: {
-    index: number;
-    item: TItem;
-    path: string;
-  };
+  index: number;
+  item: TItem;
+  path: string;
 }>;
 
 /**
  * Fired before exiting the cell edit mode, if the value has been changed.
  */
 export type GridProItemPropertyChangedEvent<TItem> = CustomEvent<{
-  value: {
-    index: number;
-    item: TItem;
-    path: string;
-    value: string | boolean;
-  };
+  index: number;
+  item: TItem;
+  path: string;
+  value: string | boolean;
 }>;
 
 export interface GridProCustomEventMap<TItem> {
@@ -78,13 +74,13 @@ declare class GridPro<TItem = GridDefaultItem> extends Grid<TItem> {
   addEventListener<K extends keyof GridProEventMap<TItem>>(
     type: K,
     listener: (this: GridPro<TItem>, ev: GridProEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof GridProEventMap<TItem>>(
     type: K,
     listener: (this: GridPro<TItem>, ev: GridProEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-grid-pro.js

@@ -49,6 +49,10 @@ class GridPro extends InlineEditingMixin(Grid) {
     return 'vaadin-grid-pro';
   }
 
+  static get cvdlName() {
+    return 'vaadin-grid-pro';
+  }
+
   /**
    * @protected
    */

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

@@ -20,5 +20,5 @@ const gridProEditSelect = css`
 `;
 
 registerStyles('vaadin-grid-pro-edit-select', [gridProEditor, gridProEditSelect], {
-  moduleId: 'lumo-grid-pro-edit-select'
+  moduleId: 'lumo-grid-pro-edit-select',
 });

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

@@ -2,5 +2,5 @@ import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mi
 import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
 
 registerStyles('vaadin-grid-pro-edit-text-field', gridProEditor, {
-  moduleId: 'lumo-grid-pro-edit-text-field'
+  moduleId: 'lumo-grid-pro-edit-text-field',
 });

package/theme/lumo/vaadin-grid-pro-styles.js

@@ -23,20 +23,18 @@ registerStyles(
 
     [part~='editable-cell']:hover,
     [part~='editable-cell']:focus {
-      background-color: var(--lumo-contrast-5pct);
-      background-clip: padding-box;
+      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     }
 
     /* Indicate editable cells */
 
     :host([theme~='highlight-editable-cells']) [part~='editable-cell'] {
-      background-color: var(--lumo-contrast-5pct);
-      background-clip: border-box;
+      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     }
 
     :host([theme~='highlight-editable-cells']) [part~='editable-cell']:hover,
     :host([theme~='highlight-editable-cells']) [part~='editable-cell']:focus {
-      background-color: var(--lumo-contrast-10pct);
+      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
     }
 
     /* Indicate read-only cells */
@@ -51,5 +49,5 @@ registerStyles(
       );
     }
   `,
-  { moduleId: 'lumo-grid-pro' }
+  { moduleId: 'lumo-grid-pro' },
 );

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

@@ -13,5 +13,5 @@ const gridProEditSelect = css`
 `;
 
 registerStyles('vaadin-grid-pro-edit-select', [gridProEditor, gridProEditSelect], {
-  moduleId: 'material-grid-pro-edit-select'
+  moduleId: 'material-grid-pro-edit-select',
 });

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

@@ -2,5 +2,5 @@ import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mi
 import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
 
 registerStyles('vaadin-grid-pro-edit-text-field', gridProEditor, {
-  moduleId: 'material-grid-pro-edit-text-field'
+  moduleId: 'material-grid-pro-edit-text-field',
 });

package/theme/material/vaadin-grid-pro-styles.js

@@ -16,9 +16,8 @@ registerStyles(
 
     [part~='row'] > [part~='editable-cell']:hover,
     [part~='row'] > [part~='editable-cell']:focus {
-      background-color: var(--material-grid-pro-editable-cell-hover-background-color, rgba(0, 0, 0, 0.04));
-      background-clip: padding-box;
+      background: var(--material-background-color) linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
     }
   `,
-  { moduleId: 'material-grid-pro' }
+  { moduleId: 'material-grid-pro' },
 );