@vaadin/grid-pro 23.1.0-alpha4 → 23.1.0-beta3

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-alpha4",
+  "version": "23.1.0-beta3",
   "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-alpha4",
-    "@vaadin/component-base": "23.1.0-alpha4",
-    "@vaadin/grid": "23.1.0-alpha4",
-    "@vaadin/item": "23.1.0-alpha4",
-    "@vaadin/list-box": "23.1.0-alpha4",
-    "@vaadin/select": "23.1.0-alpha4",
-    "@vaadin/text-field": "23.1.0-alpha4",
+    "@vaadin/checkbox": "23.1.0-beta3",
+    "@vaadin/component-base": "23.1.0-beta3",
+    "@vaadin/grid": "23.1.0-beta3",
+    "@vaadin/item": "23.1.0-beta3",
+    "@vaadin/list-box": "23.1.0-beta3",
+    "@vaadin/lit-renderer": "23.1.0-beta3",
+    "@vaadin/select": "23.1.0-beta3",
+    "@vaadin/text-field": "23.1.0-beta3",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/date-picker": "23.1.0-alpha4",
-    "@vaadin/dialog": "23.1.0-alpha4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha4",
+    "@vaadin/date-picker": "23.1.0-beta3",
+    "@vaadin/dialog": "23.1.0-beta3",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta3",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
+  "gitHead": "c787ceb8a312f88631c6d429ff320d5f89b1b838"
 }

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-select.js

@@ -84,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;
     }
@@ -125,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.js

@@ -63,20 +63,20 @@ 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:
@@ -129,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;
@@ -245,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();
@@ -293,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));
     }
 
@@ -306,7 +306,7 @@ 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),
         )[0];
@@ -324,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);
@@ -375,7 +375,7 @@ export const InlineEditingMixin = (superClass) =>
                   index: model.index,
                   item: model.item,
                   path: column.path,
-                  value: value,
+                  value,
                 },
                 bubbles: true,
                 cancelable: true,
@@ -423,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]) {
@@ -458,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> {

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-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 */

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

@@ -16,8 +16,7 @@ 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' },