@vaadin/grid-pro 24.3.0-alpha1 → 24.3.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -39,22 +39,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "24.3.0-alpha1",
-    "@vaadin/component-base": "24.3.0-alpha1",
-    "@vaadin/grid": "24.3.0-alpha1",
-    "@vaadin/item": "24.3.0-alpha1",
-    "@vaadin/list-box": "24.3.0-alpha1",
-    "@vaadin/lit-renderer": "24.3.0-alpha1",
-    "@vaadin/select": "24.3.0-alpha1",
-    "@vaadin/text-field": "24.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
+    "@vaadin/checkbox": "24.3.0-alpha11",
+    "@vaadin/component-base": "24.3.0-alpha11",
+    "@vaadin/grid": "24.3.0-alpha11",
+    "@vaadin/lit-renderer": "24.3.0-alpha11",
+    "@vaadin/select": "24.3.0-alpha11",
+    "@vaadin/text-field": "24.3.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha11"
   },
   "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 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
+  "gitHead": "123cf569a1b6ef6f4ef5fe8e60cb8d988699b98c"
 }

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 {