@vaadin/grid-pro 23.1.0-alpha2 → 23.1.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,26 +35,26 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.1.0-alpha2",
-    "@vaadin/component-base": "23.1.0-alpha2",
-    "@vaadin/grid": "23.1.0-alpha2",
-    "@vaadin/item": "23.1.0-alpha2",
-    "@vaadin/list-box": "23.1.0-alpha2",
-    "@vaadin/select": "23.1.0-alpha2",
-    "@vaadin/text-field": "23.1.0-alpha2",
+    "@vaadin/checkbox": "23.1.0-beta1",
+    "@vaadin/component-base": "23.1.0-beta1",
+    "@vaadin/grid": "23.1.0-beta1",
+    "@vaadin/item": "23.1.0-beta1",
+    "@vaadin/list-box": "23.1.0-beta1",
+    "@vaadin/select": "23.1.0-beta1",
+    "@vaadin/text-field": "23.1.0-beta1",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2"
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/date-picker": "23.1.0-alpha2",
-    "@vaadin/dialog": "23.1.0-alpha2",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha2",
+    "@vaadin/date-picker": "23.1.0-beta1",
+    "@vaadin/dialog": "23.1.0-beta1",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta1",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
-    "sinon": "^9.2.1"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
 }

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.

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,
+        },
       };
     }
 
@@ -80,19 +80,31 @@ export const InlineEditingMixin = (superClass) =>
       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;
         }
       });
@@ -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 */
@@ -296,7 +308,7 @@ export const InlineEditingMixin = (superClass) =>
       if (edited) {
         // 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) {
@@ -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: value,
                 },
                 bubbles: true,
                 cancelable: true,
-                composed: true
-              })
+                composed: true,
+              }),
             );
           }
         }

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

@@ -78,13 +78,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/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' },
 );