@vaadin/grid-pro 23.3.0-alpha3 → 23.3.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid-pro",
-  "version": "23.3.0-alpha3",
+  "version": "23.3.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -39,21 +39,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.3.0-alpha3",
-    "@vaadin/component-base": "23.3.0-alpha3",
-    "@vaadin/grid": "23.3.0-alpha3",
-    "@vaadin/item": "23.3.0-alpha3",
-    "@vaadin/list-box": "23.3.0-alpha3",
-    "@vaadin/lit-renderer": "23.3.0-alpha3",
-    "@vaadin/select": "23.3.0-alpha3",
-    "@vaadin/text-field": "23.3.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
+    "@vaadin/checkbox": "23.3.0-alpha5",
+    "@vaadin/component-base": "23.3.0-alpha5",
+    "@vaadin/grid": "23.3.0-alpha5",
+    "@vaadin/item": "23.3.0-alpha5",
+    "@vaadin/list-box": "23.3.0-alpha5",
+    "@vaadin/lit-renderer": "23.3.0-alpha5",
+    "@vaadin/select": "23.3.0-alpha5",
+    "@vaadin/text-field": "23.3.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha5",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.3.0-alpha3",
+    "@vaadin/polymer-legacy-adapter": "23.3.0-alpha5",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
@@ -63,5 +63,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
+  "gitHead": "0b6fdcf444683e97e3efb433d603e1274d5bcd66"
 }

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

@@ -7,6 +7,7 @@ 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 { addValueToAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
 
 /**
@@ -107,6 +108,11 @@ class GridProEditColumn extends GridColumn {
   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;
 
@@ -129,10 +135,8 @@ class GridProEditColumn extends GridColumn {
   /** @private */
   _cellsChanged() {
     this._cells.forEach((cell) => {
-      const part = cell.getAttribute('part');
-      if (part.indexOf('editable-cell') < 0) {
-        cell.setAttribute('part', `${part} editable-cell`);
-      }
+      const target = cell._focusButton || cell;
+      addValueToAttribute(target, 'part', 'editable-cell');
     });
   }
 
@@ -212,6 +216,11 @@ class GridProEditColumn extends GridColumn {
     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);
   }
@@ -227,6 +236,11 @@ class GridProEditColumn extends GridColumn {
 
     this._clearCellContent(cell);
 
+    // Restore previously removed role attribute
+    if (cell._focusButton) {
+      cell._focusButton.setAttribute('role', 'button');
+    }
+
     const row = cell.parentElement;
     this._grid._updateItem(row, row._item);
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "23.3.0-alpha3",
+  "version": "23.3.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -328,7 +328,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/23.3.0-alpha3/#/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/23.3.0-alpha3/#/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/23.3.0-alpha3/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/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/23.3.0-alpha5/#/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/23.3.0-alpha5/#/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/23.3.0-alpha5/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-select).",
           "attributes": [
             {
               "name": "size",
@@ -390,6 +390,15 @@
                 ]
               }
             },
+            {
+              "name": "multi-sort-on-shift-click",
+              "description": "When `true`, Shift-clicking an unsorted column's sorter adds it to the multi-sort.\nShift + Space does the same action via keyboard. This property has precedence over the\n`multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "column-reordering-allowed",
               "description": "Set to true to allow column reordering.",
@@ -605,6 +614,15 @@
                   ]
                 }
               },
+              {
+                "name": "multiSortOnShiftClick",
+                "description": "When `true`, Shift-clicking an unsorted column's sorter adds it to the multi-sort.\nShift + Space does the same action via keyboard. This property has precedence over the\n`multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "columnReorderingAllowed",
                 "description": "Set to true to allow column reordering.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/grid-pro",
-  "version": "23.3.0-alpha3",
+  "version": "23.3.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -149,7 +149,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/23.3.0-alpha3/#/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/23.3.0-alpha3/#/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/23.3.0-alpha3/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/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/23.3.0-alpha5/#/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/23.3.0-alpha5/#/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/23.3.0-alpha5/#/elements/vaadin-text-field).\n- `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-select).",
           "extension": true,
           "attributes": [
             {
@@ -159,6 +159,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?multiSortOnShiftClick",
+              "description": "When `true`, Shift-clicking an unsorted column's sorter adds it to the multi-sort.\nShift + Space does the same action via keyboard. This property has precedence over the\n`multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?columnReorderingAllowed",
               "description": "Set to true to allow column reordering.",