@vaadin/grid-pro 24.3.0-alpha8 → 24.3.0-beta1

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,28 @@
+/**
+ * @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.
+ */
+class GridProEditCheckbox extends Checkbox {
+  static get is() {
+    return 'vaadin-grid-pro-edit-checkbox';
+  }
+}
+
+defineCustomElement(GridProEditCheckbox);

package/src/vaadin-lit-grid-pro-edit-column.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 './vaadin-lit-grid-pro-edit-checkbox.js';
+import './vaadin-lit-grid-pro-edit-select.js';
+import './vaadin-lit-grid-pro-edit-text-field.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridColumn } from '@vaadin/grid/src/vaadin-lit-grid-column.js';
+import { GridProEditColumnMixin } from './vaadin-grid-pro-edit-column-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-column>` 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.
+ */
+class GridProEditColumn extends GridProEditColumnMixin(GridColumn) {
+  static get is() {
+    return 'vaadin-grid-pro-edit-column';
+  }
+}
+
+defineCustomElement(GridProEditColumn);
+
+export { GridProEditColumn };

package/src/vaadin-lit-grid-pro-edit-select.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 { 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.
+ */
+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,33 @@
+/**
+ * @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.
+ */
+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);