@vaadin/grid-pro 24.5.0-beta1 → 24.5.0-rc2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "24.5.0-beta1",
+  "version": "24.5.0-rc2",
   "publishConfig": {
     "access": "public"
   },
@@ -39,19 +39,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "24.5.0-beta1",
-    "@vaadin/component-base": "24.5.0-beta1",
-    "@vaadin/grid": "24.5.0-beta1",
-    "@vaadin/lit-renderer": "24.5.0-beta1",
-    "@vaadin/select": "24.5.0-beta1",
-    "@vaadin/text-field": "24.5.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.5.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-beta1",
+    "@vaadin/checkbox": "24.5.0-rc2",
+    "@vaadin/component-base": "24.5.0-rc2",
+    "@vaadin/grid": "24.5.0-rc2",
+    "@vaadin/lit-renderer": "24.5.0-rc2",
+    "@vaadin/select": "24.5.0-rc2",
+    "@vaadin/text-field": "24.5.0-rc2",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-rc2",
+    "@vaadin/vaadin-material-styles": "24.5.0-rc2",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-rc2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.5.0-beta1",
+    "@vaadin/chai-plugins": "24.5.0-rc2",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da4b57724d7089e3766d59d01068159322adb2b8"
+  "gitHead": "be5bf40aec33761c6defdb5b3093c7b6dd5d97fd"
 }

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

@@ -281,8 +281,6 @@ export const GridProEditColumnMixin = (superClass) =>
       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;
@@ -300,8 +298,6 @@ export const GridProEditColumnMixin = (superClass) =>
      * @protected
      */
     _stopCellEdit(cell, model) {
-      document.body.removeEventListener('focusin', this._grid.__boundGlobalFocusIn);
-
       this._removeEditor(cell, model);
     }
   };

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

@@ -65,8 +65,6 @@ export const InlineEditingMixin = (superClass) =>
       this.__boundItemPropertyChanged = this._onItemPropertyChanged.bind(this);
       this.__boundEditorFocusOut = this._onEditorFocusOut.bind(this);
       this.__boundEditorFocusIn = this._onEditorFocusIn.bind(this);
-      this.__boundCancelCellSwitch = this._setCancelCellSwitch.bind(this);
-      this.__boundGlobalFocusIn = this._onGlobalFocusIn.bind(this);
 
       this._addEditColumnListener('mousedown', (e) => {
         // Prevent grid from resetting navigating state
@@ -305,32 +303,36 @@ export const InlineEditingMixin = (superClass) =>
     }
 
     /** @private */
-    _onEditorFocusOut() {
+    _onEditorFocusOut(event) {
+      if (this.__shouldIgnoreFocusOut(event)) {
+        return;
+      }
+
       // Schedule stop on editor component focusout
       this._debouncerStopEdit = Debouncer.debounce(this._debouncerStopEdit, animationFrame, this._stopEdit.bind(this));
     }
 
     /** @private */
-    _onEditorFocusIn() {
-      this._cancelStopEdit();
-    }
-
-    /** @private */
-    _onGlobalFocusIn(e) {
+    __shouldIgnoreFocusOut(event) {
       const edited = this.__edited;
       if (edited) {
-        // Detect focus moving to e.g. vaadin-select-overlay
-        const overlay = Array.from(e.composedPath()).filter(
-          (node) => node.nodeType === Node.ELEMENT_NODE && /^vaadin-(?!dialog).*-overlay$/iu.test(node.localName),
-        )[0];
-
-        if (overlay) {
-          overlay.addEventListener('vaadin-overlay-outside-click', this.__boundEditorFocusOut);
-          this._cancelStopEdit();
+        const { cell, column } = this.__edited;
+        const editor = column._getEditorComponent(cell);
+
+        const path = event.composedPath();
+        const nodes = path.slice(0, path.indexOf(editor) + 1).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+        // Detect focus moving to e.g. vaadin-select-overlay or vaadin-date-picker-overlay
+        if (nodes.some((el) => typeof el._shouldRemoveFocus === 'function' && !el._shouldRemoveFocus(event))) {
+          return true;
         }
       }
     }
 
+    /** @private */
+    _onEditorFocusIn() {
+      this._cancelStopEdit();
+    }
+
     /** @private */
     _startEdit(cell, column) {
       const isCellEditable = this._isCellEditable(cell);
@@ -412,20 +414,12 @@ export const InlineEditingMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    _setCancelCellSwitch() {
-      this.__cancelCellSwitch = true;
-      window.requestAnimationFrame(() => {
-        this.__cancelCellSwitch = false;
-      });
-    }
-
     /**
      * @param {!KeyboardEvent} e
      * @protected
      */
-    _switchEditCell(e) {
-      if (this.__cancelCellSwitch || (e.defaultPrevented && e.keyCode === 9)) {
+    async _switchEditCell(e) {
+      if (e.defaultPrevented && e.keyCode === 9) {
         return;
       }
 
@@ -434,11 +428,35 @@ export const InlineEditingMixin = (superClass) =>
       const editableColumns = this._getEditColumns();
       const { cell, column, model } = this.__edited;
 
-      this._stopEdit();
-      e.preventDefault();
       // Prevent vaadin-grid handler from being called
       e.stopImmediatePropagation();
 
+      const editor = column._getEditorComponent(cell);
+
+      // Do not prevent Tab to allow native input blur and wait for it,
+      // unless the keydown event is from the edit cell select overlay.
+      if (e.key === 'Tab' && editor && editor.contains(e.target)) {
+        const ignore = await new Promise((resolve) => {
+          editor.addEventListener(
+            'focusout',
+            (event) => {
+              resolve(this.__shouldIgnoreFocusOut(event));
+            },
+            { once: true },
+          );
+        });
+
+        // Ignore focusout event after which focus stays in the field,
+        // e.g. Tab between date and time pickers in date-time-picker.
+        if (ignore) {
+          return;
+        }
+      } else {
+        e.preventDefault();
+      }
+
+      this._stopEdit();
+
       // Try to find the next editable cell
       let nextIndex = model.index;
       let nextColumn = column;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "24.5.0-beta1",
+  "version": "24.5.0-rc2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -401,7 +401,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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-rc2/#/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.5.0-rc2/#/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.5.0-rc2/#/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.5.0-rc2/#/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.5.0-beta1",
+  "version": "24.5.0-rc2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -177,7 +177,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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-rc2/#/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.5.0-rc2/#/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.5.0-rc2/#/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.5.0-rc2/#/elements/vaadin-select).",
           "extension": true,
           "attributes": [
             {