@vaadin/grid-pro 24.2.3 → 24.3.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "24.2.3",
+  "version": "24.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -27,7 +27,9 @@
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
-    "web-types.lit.json"
+    "web-types.lit.json",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js"
   ],
   "keywords": [
     "Vaadin",
@@ -39,22 +41,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "~24.2.3",
-    "@vaadin/component-base": "~24.2.3",
-    "@vaadin/grid": "~24.2.3",
-    "@vaadin/item": "~24.2.3",
-    "@vaadin/list-box": "~24.2.3",
-    "@vaadin/lit-renderer": "~24.2.3",
-    "@vaadin/select": "~24.2.3",
-    "@vaadin/text-field": "~24.2.3",
-    "@vaadin/vaadin-lumo-styles": "~24.2.3",
-    "@vaadin/vaadin-material-styles": "~24.2.3",
-    "@vaadin/vaadin-themable-mixin": "~24.2.3"
+    "@vaadin/checkbox": "24.3.0-alpha10",
+    "@vaadin/component-base": "24.3.0-alpha10",
+    "@vaadin/grid": "24.3.0-alpha10",
+    "@vaadin/lit-renderer": "24.3.0-alpha10",
+    "@vaadin/select": "24.3.0-alpha10",
+    "@vaadin/text-field": "24.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.5.0",
-    "lit": "^2.0.0",
+    "@vaadin/testing-helpers": "^0.6.0",
+    "lit": "^3.0.0",
     "sinon": "^13.0.2"
   },
   "cvdlName": "vaadin-grid-pro",
@@ -62,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "72e557e765e72559e9c6a525e257d185ad186dc5"
+  "gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
 }

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { GridBodyRenderer, GridItemModel } from '@vaadin/grid/src/vaadin-grid.js';
+
+export type GridProEditorType = 'checkbox' | 'custom' | 'select' | 'text';
+
+export declare class GridProEditColumnMixinClass<TItem> {
+  /**
+   * JS Path of the property in the item used for the editable content.
+   */
+  path: string | null | undefined;
+
+  /**
+   * Custom function for rendering the cell content in edit mode.
+   * Receives three arguments:
+   *
+   * - `root` The cell content DOM element. Append your editor component to it.
+   * - `column` The `<vaadin-grid-pro-edit-column>` element.
+   * - `model` The object with the properties related with
+   *   the rendered item, 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.
+   *   - `model.detailsOpened` Details opened state.
+   */
+  editModeRenderer: GridBodyRenderer<TItem> | null | undefined;
+
+  /**
+   * The list of options which should be passed to cell editor component.
+   * Used with the `select` editor type, to provide a list of items.
+   */
+  editorOptions: string[];
+
+  /**
+   * Type of the cell editor component to be rendered. Allowed values:
+   * - `text` (default) - renders a text field
+   * - `checkbox` - renders a checkbox
+   * - `select` - renders a select with a list of items passed as `editorOptions`
+   *
+   * Editor type is set to `custom` when `editModeRenderer` is set.
+   * @attr {text|checkbox|select|custom} editor-type
+   */
+  editorType: GridProEditorType;
+
+  /**
+   * Path of the property used for the value of the editor component.
+   * @attr {string} editor-value-path
+   */
+  editorValuePath: string;
+
+  protected _getEditorComponent(cell: HTMLElement): HTMLElement | null;
+
+  protected _getEditorValue(editor: HTMLElement): unknown | null;
+
+  protected _startCellEdit(cell: HTMLElement, model: GridItemModel<TItem>): void;
+
+  protected _stopCellEdit(cell: HTMLElement, model: GridItemModel<TItem>): void;
+}

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

@@ -0,0 +1,284 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * 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';
+
+/**
+ * @polymerMixin
+ */
+export const GridProEditColumnMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Custom function for rendering the cell content in edit mode.
+         * Receives three arguments:
+         *
+         * - `root` The cell content DOM element. Append your editor component to it.
+         * - `column` The `<vaadin-grid-pro-edit-column>` element.
+         * - `model` The object with the properties related with
+         *   the rendered item, 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.
+         *   - `model.detailsOpened` Details opened state.
+         * @type {!GridBodyRenderer | null | undefined}
+         */
+        editModeRenderer: {
+          type: Function,
+          sync: true,
+        },
+
+        /**
+         * The list of options which should be passed to cell editor component.
+         * Used with the `select` editor type, to provide a list of items.
+         * @type {!Array<string>}
+         */
+        editorOptions: {
+          type: Array,
+          value: () => [],
+        },
+
+        /**
+         * Type of the cell editor component to be rendered. Allowed values:
+         * - `text` (default) - renders a text field
+         * - `checkbox` - renders a checkbox
+         * - `select` - renders a select with a list of items passed as `editorOptions`
+         *
+         * Editor type is set to `custom` when `editModeRenderer` is set.
+         * @attr {text|checkbox|select|custom} editor-type
+         * @type {!GridProEditorType}
+         */
+        editorType: {
+          type: String,
+          notify: true, // FIXME(web-padawan): needed by Flow counterpart
+          value: 'text',
+        },
+
+        /**
+         * Path of the property used for the value of the editor component.
+         * @attr {string} editor-value-path
+         * @type {string}
+         */
+        editorValuePath: {
+          type: String,
+          value: 'value',
+        },
+
+        /**
+         * JS Path of the property in the item used for the editable content.
+         */
+        path: {
+          type: String,
+          observer: '_pathChanged',
+          sync: true,
+        },
+
+        /** @private */
+        _oldRenderer: Function,
+      };
+    }
+
+    static get observers() {
+      return ['_editModeRendererChanged(editModeRenderer, __initialized)', '_cellsChanged(_cells)'];
+    }
+
+    constructor() {
+      super();
+
+      // Enable focus button mode for Mac OS to ensure focused
+      // editable cell stays in sync with the VoiceOver cursor
+      // https://github.com/vaadin/web-components/issues/3820
+      this._focusButtonMode = navigator.platform.includes('Mac');
+
+      this.__editModeRenderer = function (root, column) {
+        const cell = root.assignedSlot.parentNode;
+
+        const tagName = column._getEditorTagName(cell);
+        if (!root.firstElementChild || root.firstElementChild.localName.toLowerCase() !== tagName) {
+          root.innerHTML = `
+          <${tagName}></${tagName}>
+        `;
+        }
+      };
+    }
+
+    /** @private */
+    _pathChanged(path) {
+      if (!path || path.length === 0) {
+        throw new Error('You should specify the path for the edit column');
+      }
+    }
+
+    /** @private */
+    _cellsChanged() {
+      this._cells.forEach((cell) => {
+        const target = cell._focusButton || cell;
+        addValueToAttribute(target, 'part', 'editable-cell');
+      });
+    }
+
+    /** @private */
+    _editModeRendererChanged(renderer) {
+      if (renderer) {
+        this.editorType = 'custom';
+      } else if (this._oldRenderer) {
+        this.editorType = 'text';
+      }
+
+      this._oldRenderer = renderer;
+    }
+
+    /**
+     * @param {!HTMLElement} cell
+     * @return {string}
+     * @protected
+     */
+    _getEditorTagName(cell) {
+      return this.editorType === 'custom' ? this._getEditorComponent(cell).localName : this._getTagNameByType();
+    }
+
+    /**
+     * @param {!HTMLElement} cell
+     * @return {HTMLElement | null}
+     * @protected
+     */
+    _getEditorComponent(cell) {
+      return this.editorType === 'custom'
+        ? cell._content.firstElementChild
+        : cell._content.querySelector(this._getEditorTagName(cell));
+    }
+
+    /** @private */
+    _getTagNameByType() {
+      let type;
+      switch (this.editorType) {
+        case 'checkbox':
+          type = 'checkbox';
+          break;
+        case 'select':
+          type = 'select';
+          break;
+        case 'text':
+        default:
+          type = 'text-field';
+          break;
+      }
+      return this.constructor.is.replace('column', type);
+    }
+
+    /** @private */
+    _focusEditor(editor) {
+      editor.focus();
+      if (this.editorType === 'checkbox') {
+        editor.setAttribute('focus-ring', '');
+      } else if (editor instanceof HTMLInputElement) {
+        editor.select();
+      } else if (editor.focusElement && editor.focusElement instanceof HTMLInputElement) {
+        editor.focusElement.select();
+      }
+    }
+
+    /**
+     * @param {!HTMLElement} editor
+     * @return {unknown}
+     * @protected
+     */
+    _getEditorValue(editor) {
+      const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
+      return get(path, editor);
+    }
+
+    /** @private */
+    _renderEditor(cell, model) {
+      cell.__savedRenderer = this._renderer || cell._renderer;
+      cell._renderer = this.editModeRenderer || this.__editModeRenderer;
+
+      // Remove role to avoid announcing button while editing
+      if (cell._focusButton) {
+        cell._focusButton.removeAttribute('role');
+      }
+
+      this._clearCellContent(cell);
+      this._runRenderer(cell._renderer, cell, model);
+    }
+
+    /** @private */
+    _removeEditor(cell, _model) {
+      if (!cell.__savedRenderer) {
+        return;
+      }
+
+      cell._renderer = cell.__savedRenderer;
+      cell.__savedRenderer = undefined;
+
+      this._clearCellContent(cell);
+
+      // Restore previously removed role attribute
+      if (cell._focusButton) {
+        cell._focusButton.setAttribute('role', 'button');
+      }
+
+      this.__renderCellsContent(cell._renderer, [cell]);
+    }
+
+    /** @private */
+    _setEditorOptions(editor) {
+      if (this.editorOptions && this.editorOptions.length) {
+        editor.options = this.editorOptions;
+      }
+    }
+
+    /** @private */
+    _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;
+      set(path, value, editor);
+      if (editor.notifyPath) {
+        editor.notifyPath(path, value);
+      }
+    }
+
+    /**
+     * @param {!HTMLElement} cell
+     * @param {!GridItemModel} model
+     * @protected
+     */
+    _startCellEdit(cell, model) {
+      this._renderEditor(cell, model);
+
+      const editor = this._getEditorComponent(cell);
+      editor.addEventListener('focusout', this._grid.__boundEditorFocusOut);
+      editor.addEventListener('focusin', this._grid.__boundEditorFocusIn);
+      editor.addEventListener('internal-tab', this._grid.__boundCancelCellSwitch);
+      document.body.addEventListener('focusin', this._grid.__boundGlobalFocusIn);
+      this._setEditorOptions(editor);
+      this._setEditorValue(editor, get(this.path, model.item));
+      editor._grid = this._grid;
+
+      this._focusEditor(editor);
+      requestAnimationFrame(() => this._focusEditor(editor));
+    }
+
+    /**
+     * @param {!HTMLElement} cell
+     * @param {!GridItemModel} model
+     * @protected
+     */
+    _stopCellEdit(cell, model) {
+      document.body.removeEventListener('focusin', this._grid.__boundGlobalFocusIn);
+
+      this._removeEditor(cell, model);
+    }
+  };

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

@@ -8,10 +8,11 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import type { GridBodyRenderer, GridDefaultItem, GridItemModel } from '@vaadin/grid/src/vaadin-grid.js';
-import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
+import type { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import type { GridColumn, GridColumnMixin } from '@vaadin/grid/src/vaadin-grid-column.js';
+import type { GridProEditColumnMixinClass } from './vaadin-grid-pro-edit-column-mixin.js';
 
-export type GridProEditorType = 'checkbox' | 'custom' | 'select' | 'text';
+export * from './vaadin-grid-pro-edit-column-mixin.js';
 
 /**
  * `<vaadin-grid-pro-edit-column>` is a helper element for the `<vaadin-grid-pro>`
@@ -28,60 +29,12 @@ export type GridProEditorType = 'checkbox' | 'custom' | 'select' | 'text';
  *    ...
  * ```
  */
-declare class GridProEditColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
-  /**
-   * JS Path of the property in the item used for the editable content.
-   */
-  path: string | null | undefined;
+declare class GridProEditColumn<TItem = GridDefaultItem> extends HTMLElement {}
 
-  /**
-   * Custom function for rendering the cell content in edit mode.
-   * Receives three arguments:
-   *
-   * - `root` The cell content DOM element. Append your editor component to it.
-   * - `column` The `<vaadin-grid-pro-edit-column>` element.
-   * - `model` The object with the properties related with
-   *   the rendered item, 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.
-   *   - `model.detailsOpened` Details opened state.
-   */
-  editModeRenderer: GridBodyRenderer<TItem> | null | undefined;
-
-  /**
-   * The list of options which should be passed to cell editor component.
-   * Used with the `select` editor type, to provide a list of items.
-   */
-  editorOptions: string[];
-
-  /**
-   * Type of the cell editor component to be rendered. Allowed values:
-   * - `text` (default) - renders a text field
-   * - `checkbox` - renders a checkbox
-   * - `select` - renders a select with a list of items passed as `editorOptions`
-   *
-   * Editor type is set to `custom` when `editModeRenderer` is set.
-   * @attr {text|checkbox|select|custom} editor-type
-   */
-  editorType: GridProEditorType;
-
-  /**
-   * Path of the property used for the value of the editor component.
-   * @attr {string} editor-value-path
-   */
-  editorValuePath: string;
-
-  protected _getEditorComponent(cell: HTMLElement): HTMLElement | null;
-
-  protected _getEditorValue(editor: HTMLElement): unknown | null;
-
-  protected _startCellEdit(cell: HTMLElement, model: GridItemModel<TItem>): void;
-
-  protected _stopCellEdit(cell: HTMLElement, model: GridItemModel<TItem>): void;
-}
+interface GridProEditColumn<TItem = GridDefaultItem>
+  extends GridProEditColumnMixinClass<TItem>,
+    GridColumnMixin<TItem, GridColumn<TItem>>,
+    GridColumn<TItem> {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -11,10 +11,9 @@
 import './vaadin-grid-pro-edit-checkbox.js';
 import './vaadin-grid-pro-edit-select.js';
 import './vaadin-grid-pro-edit-text-field.js';
-import { get, set } from '@polymer/polymer/lib/utils/path.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { addValueToAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
+import { GridProEditColumnMixin } from './vaadin-grid-pro-edit-column-mixin.js';
 
 /**
  * `<vaadin-grid-pro-edit-column>` is a helper element for the `<vaadin-grid-pro>`
@@ -33,271 +32,12 @@ import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
  *
  * @customElement
  * @extends GridColumn
+ * @mixes GridProEditColumnMixin
  */
-class GridProEditColumn extends GridColumn {
+class GridProEditColumn extends GridProEditColumnMixin(GridColumn) {
   static get is() {
     return 'vaadin-grid-pro-edit-column';
   }
-
-  static get properties() {
-    return {
-      /**
-       * Custom function for rendering the cell content in edit mode.
-       * Receives three arguments:
-       *
-       * - `root` The cell content DOM element. Append your editor component to it.
-       * - `column` The `<vaadin-grid-pro-edit-column>` element.
-       * - `model` The object with the properties related with
-       *   the rendered item, 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.
-       *   - `model.detailsOpened` Details opened state.
-       * @type {!GridBodyRenderer | null | undefined}
-       */
-      editModeRenderer: Function,
-
-      /**
-       * The list of options which should be passed to cell editor component.
-       * Used with the `select` editor type, to provide a list of items.
-       * @type {!Array<string>}
-       */
-      editorOptions: {
-        type: Array,
-        value: () => [],
-      },
-
-      /**
-       * Type of the cell editor component to be rendered. Allowed values:
-       * - `text` (default) - renders a text field
-       * - `checkbox` - renders a checkbox
-       * - `select` - renders a select with a list of items passed as `editorOptions`
-       *
-       * Editor type is set to `custom` when `editModeRenderer` is set.
-       * @attr {text|checkbox|select|custom} editor-type
-       * @type {!GridProEditorType}
-       */
-      editorType: {
-        type: String,
-        notify: true, // FIXME(web-padawan): needed by Flow counterpart
-        value: 'text',
-      },
-
-      /**
-       * Path of the property used for the value of the editor component.
-       * @attr {string} editor-value-path
-       * @type {string}
-       */
-      editorValuePath: {
-        type: String,
-        value: 'value',
-      },
-
-      /**
-       * JS Path of the property in the item used for the editable content.
-       */
-      path: {
-        type: String,
-        observer: '_pathChanged',
-      },
-
-      /** @private */
-      _oldRenderer: Function,
-    };
-  }
-
-  static get observers() {
-    return ['_editModeRendererChanged(editModeRenderer, __initialized)', '_cellsChanged(_cells.*)'];
-  }
-
-  constructor() {
-    super();
-
-    // Enable focus button mode for Mac OS to ensure focused
-    // editable cell stays in sync with the VoiceOver cursor
-    // https://github.com/vaadin/web-components/issues/3820
-    this._focusButtonMode = navigator.platform.includes('Mac');
-
-    this.__editModeRenderer = function (root, column) {
-      const cell = root.assignedSlot.parentNode;
-
-      const tagName = column._getEditorTagName(cell);
-      if (!root.firstElementChild || root.firstElementChild.localName.toLowerCase() !== tagName) {
-        root.innerHTML = `
-          <${tagName}></${tagName}>
-        `;
-      }
-    };
-  }
-
-  /** @private */
-  _pathChanged(path) {
-    if (!path || path.length === 0) {
-      throw new Error('You should specify the path for the edit column');
-    }
-  }
-
-  /** @private */
-  _cellsChanged() {
-    this._cells.forEach((cell) => {
-      const target = cell._focusButton || cell;
-      addValueToAttribute(target, 'part', 'editable-cell');
-    });
-  }
-
-  /** @private */
-  _editModeRendererChanged(renderer) {
-    if (renderer) {
-      this.editorType = 'custom';
-    } else if (this._oldRenderer) {
-      this.editorType = 'text';
-    }
-
-    this._oldRenderer = renderer;
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @return {string}
-   * @protected
-   */
-  _getEditorTagName(cell) {
-    return this.editorType === 'custom' ? this._getEditorComponent(cell).localName : this._getTagNameByType();
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @return {HTMLElement | null}
-   * @protected
-   */
-  _getEditorComponent(cell) {
-    return this.editorType === 'custom'
-      ? cell._content.firstElementChild
-      : cell._content.querySelector(this._getEditorTagName(cell));
-  }
-
-  /** @private */
-  _getTagNameByType() {
-    let type;
-    switch (this.editorType) {
-      case 'checkbox':
-        type = 'checkbox';
-        break;
-      case 'select':
-        type = 'select';
-        break;
-      case 'text':
-      default:
-        type = 'text-field';
-        break;
-    }
-    return this.constructor.is.replace('column', type);
-  }
-
-  /** @private */
-  _focusEditor(editor) {
-    editor.focus();
-    if (this.editorType === 'checkbox') {
-      editor.setAttribute('focus-ring', '');
-    } else if (editor instanceof HTMLInputElement) {
-      editor.select();
-    } else if (editor.focusElement && editor.focusElement instanceof HTMLInputElement) {
-      editor.focusElement.select();
-    }
-  }
-
-  /**
-   * @param {!HTMLElement} editor
-   * @return {unknown}
-   * @protected
-   */
-  _getEditorValue(editor) {
-    const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
-    return get(editor, path);
-  }
-
-  /** @private */
-  _renderEditor(cell, model) {
-    cell.__savedRenderer = this._renderer || cell._renderer;
-    cell._renderer = this.editModeRenderer || this.__editModeRenderer;
-
-    // Remove role to avoid announcing button while editing
-    if (cell._focusButton) {
-      cell._focusButton.removeAttribute('role');
-    }
-
-    this._clearCellContent(cell);
-    this._runRenderer(cell._renderer, cell, model);
-  }
-
-  /** @private */
-  _removeEditor(cell, _model) {
-    if (!cell.__savedRenderer) {
-      return;
-    }
-
-    cell._renderer = cell.__savedRenderer;
-    cell.__savedRenderer = undefined;
-
-    this._clearCellContent(cell);
-
-    // Restore previously removed role attribute
-    if (cell._focusButton) {
-      cell._focusButton.setAttribute('role', 'button');
-    }
-
-    this.__renderCellsContent(cell._renderer, [cell]);
-  }
-
-  /** @private */
-  _setEditorOptions(editor) {
-    if (this.editorOptions && this.editorOptions.length) {
-      editor.options = this.editorOptions;
-    }
-  }
-
-  /** @private */
-  _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;
-    set(editor, path, value);
-    if (editor.notifyPath) {
-      editor.notifyPath(path, value);
-    }
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @param {!GridItemModel} model
-   * @protected
-   */
-  _startCellEdit(cell, model) {
-    this._renderEditor(cell, model);
-
-    const editor = this._getEditorComponent(cell);
-    editor.addEventListener('focusout', this._grid.__boundEditorFocusOut);
-    editor.addEventListener('focusin', this._grid.__boundEditorFocusIn);
-    editor.addEventListener('internal-tab', this._grid.__boundCancelCellSwitch);
-    document.body.addEventListener('focusin', this._grid.__boundGlobalFocusIn);
-    this._setEditorOptions(editor);
-    this._setEditorValue(editor, get(model.item, this.path));
-    editor._grid = this._grid;
-    this._focusEditor(editor);
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @param {!GridItemModel} model
-   * @protected
-   */
-  _stopCellEdit(cell, model) {
-    document.body.removeEventListener('focusin', this._grid.__boundGlobalFocusIn);
-
-    this._removeEditor(cell, model);
-  }
 }
 
 defineCustomElement(GridProEditColumn);

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

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+
+/**
+ * @polymerMixin
+ */
+export const GridProEditSelectMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        options: {
+          type: Array,
+          value: () => [],
+        },
+
+        _grid: {
+          type: Object,
+        },
+
+        _initialized: {
+          type: Boolean,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_optionsChanged(options)'];
+    }
+
+    ready() {
+      super.ready();
+
+      this.setAttribute('theme', 'grid-pro-editor');
+    }
+
+    _onKeyDown(e) {
+      super._onKeyDown(e);
+
+      if (this.options.length === 0 && /^(ArrowDown|Down|ArrowUp|Up|Enter|SpaceBar| )$/u.test(e.key)) {
+        console.warn('Missing "editorOptions" for <vaadin-grid-pro-edit-column> select editor!');
+      }
+      // Event handled in select, stop here
+      if (e.defaultPrevented) {
+        e.stopPropagation();
+      }
+    }
+
+    /**
+     * Override list-box event listener inherited from `Select`:
+     * - Enter: set flag for moving to next row on value change,
+     * - Tab: switch to next cell when "singleCellEdit" is false.
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDownInside(event) {
+      if (event.keyCode === 13) {
+        this._enterKeydown = event;
+      }
+
+      if (event.keyCode === 9) {
+        if (!this._grid.singleCellEdit) {
+          this._grid._switchEditCell(event);
+        }
+      }
+
+      // Call `super` to close overlay on Tab.
+      super._onKeyDownInside(event);
+    }
+
+    _valueChanged(value, oldValue) {
+      super._valueChanged(value, oldValue);
+
+      // Select is first created without a value
+      if (value === '' && oldValue === undefined) {
+        return;
+      }
+      if (this._initialized) {
+        const enter = this._enterKeydown;
+        if (enter && this._grid.enterNextRow) {
+          this._grid._switchEditCell(enter);
+        } else if (this._grid.singleCellEdit) {
+          this._grid._stopEdit(false, true);
+        } else {
+          this.focus();
+        }
+      }
+    }
+
+    _optionsChanged(options) {
+      if (options && options.length) {
+        this.items = options.map((option) => ({
+          label: option,
+          value: option,
+        }));
+
+        this._overlayElement ||= this.shadowRoot.querySelector('vaadin-select-overlay');
+        this._overlayElement.addEventListener('vaadin-overlay-outside-click', () => {
+          this._grid._stopEdit();
+        });
+
+        // FIXME(web-padawan): _updateValueSlot() in `vaadin-select` resets opened to false
+        // see https://github.com/vaadin/vaadin-list-mixin/issues/49
+        setTimeout(() => {
+          this.opened = true;
+          // Any value change after first open will stop edit
+          this._initialized = true;
+        });
+      }
+    }
+  };

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

@@ -8,134 +8,22 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import '@vaadin/item/src/vaadin-item.js';
-import '@vaadin/list-box/src/vaadin-list-box.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { Select } from '@vaadin/select/src/vaadin-select.js';
+import { GridProEditSelectMixin } from './vaadin-grid-pro-edit-select-mixin.js';
 
 /**
  * An element used internally by `<vaadin-grid-pro>`. Not intended to be used separately.
  *
  * @customElement
  * @extends Select
+ * @mixes GridProEditSelectMixin
  * @private
  */
-class GridProEditSelect extends Select {
+class GridProEditSelect extends GridProEditSelectMixin(Select) {
   static get is() {
     return 'vaadin-grid-pro-edit-select';
   }
-
-  static get properties() {
-    return {
-      options: {
-        type: Array,
-        value: () => [],
-      },
-
-      _grid: {
-        type: Object,
-      },
-
-      _initialized: {
-        type: Boolean,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_optionsChanged(options)'];
-  }
-
-  ready() {
-    super.ready();
-
-    this.setAttribute('theme', 'grid-pro-editor');
-  }
-
-  _onKeyDown(e) {
-    super._onKeyDown(e);
-
-    if (this.options.length === 0 && /^(ArrowDown|Down|ArrowUp|Up|Enter|SpaceBar| )$/u.test(e.key)) {
-      console.warn('Missing "editorOptions" for <vaadin-grid-pro-edit-column> select editor!');
-    }
-    // Event handled in select, stop here
-    if (e.defaultPrevented) {
-      e.stopPropagation();
-    }
-  }
-
-  /**
-   * Override list-box event listener inherited from `Select`:
-   * - Enter: set flag for moving to next row on value change,
-   * - Tab: switch to next cell when "singleCellEdit" is false.
-   * @param {!KeyboardEvent} event
-   * @protected
-   * @override
-   */
-  _onKeyDownInside(event) {
-    if (event.keyCode === 13) {
-      this._enterKeydown = event;
-    }
-
-    if (event.keyCode === 9) {
-      if (!this._grid.singleCellEdit) {
-        this._grid._switchEditCell(event);
-      }
-    }
-
-    // Call `super` to close overlay on Tab.
-    super._onKeyDownInside(event);
-  }
-
-  _valueChanged(value, oldValue) {
-    super._valueChanged(value, oldValue);
-
-    // Select is first created without a value
-    if (value === '' && oldValue === undefined) {
-      return;
-    }
-    if (this._initialized) {
-      const enter = this._enterKeydown;
-      if (enter && this._grid.enterNextRow) {
-        this._grid._switchEditCell(enter);
-      } else if (this._grid.singleCellEdit) {
-        this._grid._stopEdit(false, true);
-      } else {
-        this.focus();
-      }
-    }
-  }
-
-  _optionsChanged(options) {
-    if (options && options.length) {
-      this.renderer = (root) => {
-        if (root.firstChild) {
-          return;
-        }
-        const listBox = document.createElement('vaadin-list-box');
-        listBox.selected = options.indexOf(this.value);
-        options.forEach((option) => {
-          const item = document.createElement('vaadin-item');
-          item.textContent = option;
-          listBox.appendChild(item);
-        });
-
-        root.appendChild(listBox);
-      };
-
-      this._overlayElement.addEventListener('vaadin-overlay-outside-click', () => {
-        this._grid._stopEdit();
-      });
-
-      // FIXME(web-padawan): _updateValueSlot() in `vaadin-select` resets opened to false
-      // see https://github.com/vaadin/vaadin-list-mixin/issues/49
-      setTimeout(() => {
-        this.opened = true;
-        // Any value change after first open will stop edit
-        this._initialized = true;
-      });
-    }
-  }
 }
 
 defineCustomElement(GridProEditSelect);

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

@@ -10,6 +10,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';
 
 /**
  * @polymerMixin
@@ -194,8 +195,8 @@ export const InlineEditingMixin = (superClass) =>
 
     /** @private */
     _applyEdit({ path, value, index, item }) {
-      this.set(path, value, item);
-      this.notifyPath(`items.${index}.${path}`, value);
+      set(path, value, item);
+      this.requestContentUpdate();
     }
 
     /** @private */
@@ -365,7 +366,7 @@ export const InlineEditingMixin = (superClass) =>
         const editor = column._getEditorComponent(cell);
         if (editor) {
           const value = column._getEditorValue(editor);
-          if (value !== this.get(column.path, model.item)) {
+          if (value !== get(column.path, model.item)) {
             // In some cases, where the value comes from the editor's change
             // event (eg. custom editor in vaadin-grid-pro-flow), the event is
             // not dispatched in FF/Safari/Edge. That's due the change event

package/src/vaadin-lit-grid-pro-edit-checkbox.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { Checkbox } from '@vaadin/checkbox/src/vaadin-lit-checkbox.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-checkbox>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridProEditCheckbox extends Checkbox {
+  static get is() {
+    return 'vaadin-grid-pro-edit-checkbox';
+  }
+}
+
+defineCustomElement(GridProEditCheckbox);

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

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { Select } from '@vaadin/select/src/vaadin-lit-select.js';
+import { GridProEditSelectMixin } from './vaadin-grid-pro-edit-select-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-select>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridProEditSelect extends GridProEditSelectMixin(Select) {
+  static get is() {
+    return 'vaadin-grid-pro-edit-select';
+  }
+}
+
+defineCustomElement(GridProEditSelect);

package/src/vaadin-lit-grid-pro-edit-text-field.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { TextField } from '@vaadin/text-field/src/vaadin-lit-text-field.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-text-field>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridProEditText extends TextField {
+  static get is() {
+    return 'vaadin-grid-pro-edit-text-field';
+  }
+
+  ready() {
+    super.ready();
+    this.setAttribute('theme', 'grid-pro-editor');
+  }
+}
+
+defineCustomElement(GridProEditText);

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

@@ -1,5 +1,3 @@
-import '@vaadin/item/theme/lumo/vaadin-item.js';
-import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
 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-editor-styles.js

@@ -12,7 +12,7 @@ const gridProEditor = css`
     font-size: inherit;
     --lumo-text-field-size: 27px;
     /* outline similar to what grid uses */
-    box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
   :host([theme~='grid-pro-editor']) [part='input-field'] {

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

@@ -10,7 +10,7 @@ registerStyles(
       position: absolute;
       inset: 0;
       pointer-events: none;
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
     }
 
     [part~='editable-cell'],

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

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

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

@@ -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/material/vaadin-grid-pro-edit-select.js

@@ -1,5 +1,3 @@
-import '@vaadin/item/theme/material/vaadin-item.js';
-import '@vaadin/list-box/theme/material/vaadin-list-box.js';
 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-lit-grid-pro-edit-checkbox.js

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

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

@@ -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/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "24.2.3",
+  "version": "24.3.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -81,6 +81,28 @@
                 ]
               }
             },
+            {
+              "name": "header-part-name",
+              "description": "Custom part name for the header cell.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "footer-part-name",
+              "description": "Custom part name for the footer cell.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "width",
               "description": "Width of the cells for this column.",
@@ -224,6 +246,28 @@
                   ]
                 }
               },
+              {
+                "name": "headerPartName",
+                "description": "Custom part name for the header cell.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "footerPartName",
+                "description": "Custom part name for the footer cell.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "headerRenderer",
                 "description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
@@ -346,7 +390,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.2.3/#/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.2.3/#/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.2.3/#/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.2.3/#/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.3.0-alpha10/#/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.3.0-alpha10/#/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.3.0-alpha10/#/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.3.0-alpha10/#/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.2.3",
+  "version": "24.3.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -75,6 +75,20 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".headerPartName",
+              "description": "Custom part name for the header cell.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".footerPartName",
+              "description": "Custom part name for the footer cell.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".headerRenderer",
               "description": "Custom function for rendering the header content.\nReceives two arguments:\n\n- `root` The header cell content DOM element. Append your content to it.\n- `column` The `<vaadin-grid-column>` element.",
@@ -156,7 +170,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.2.3/#/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.2.3/#/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.2.3/#/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.2.3/#/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.3.0-alpha10/#/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.3.0-alpha10/#/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.3.0-alpha10/#/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.3.0-alpha10/#/elements/vaadin-select).",
           "extension": true,
           "attributes": [
             {