@vaadin/grid 23.0.9 → 23.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.0.9",
+  "version": "23.0.12",
   "publishConfig": {
     "access": "public"
   },
@@ -41,19 +41,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^23.0.9",
-    "@vaadin/component-base": "^23.0.9",
-    "@vaadin/text-field": "^23.0.9",
-    "@vaadin/vaadin-lumo-styles": "^23.0.9",
-    "@vaadin/vaadin-material-styles": "^23.0.9",
-    "@vaadin/vaadin-themable-mixin": "^23.0.9"
+    "@vaadin/checkbox": "^23.0.12",
+    "@vaadin/component-base": "^23.0.12",
+    "@vaadin/text-field": "^23.0.12",
+    "@vaadin/vaadin-lumo-styles": "^23.0.12",
+    "@vaadin/vaadin-material-styles": "^23.0.12",
+    "@vaadin/vaadin-themable-mixin": "^23.0.12"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.0.9",
+    "@vaadin/polymer-legacy-adapter": "^23.0.12",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "4d687bdd48ba78d55f3371a78b70818e4dfca1a3"
+  "gitHead": "717908c222c1e241259e30b4144cd5ba32734819"
 }

package/src/vaadin-grid-a11y-mixin.js

@@ -32,7 +32,7 @@ export const A11yMixin = (superClass) =>
       const bodyColumns = _columnTree[_columnTree.length - 1];
       this.$.table.setAttribute(
         'aria-rowcount',
-        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree)
+        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree),
       );
       this.$.table.setAttribute('aria-colcount', (bodyColumns && bodyColumns.length) || 0);
 
@@ -43,14 +43,14 @@ export const A11yMixin = (superClass) =>
     /** @protected */
     _a11yUpdateHeaderRows() {
       Array.from(this.$.header.children).forEach((headerRow, index) =>
-        headerRow.setAttribute('aria-rowindex', index + 1)
+        headerRow.setAttribute('aria-rowindex', index + 1),
       );
     }
 
     /** @protected */
     _a11yUpdateFooterRows() {
       Array.from(this.$.footer.children).forEach((footerRow, index) =>
-        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1)
+        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1),
       );
     }
 
@@ -137,8 +137,8 @@ export const A11yMixin = (superClass) =>
             'aria-sort',
             {
               asc: 'ascending',
-              desc: 'descending'
-            }[String(sorter.direction)] || 'none'
+              desc: 'descending',
+            }[String(sorter.direction)] || 'none',
           );
         }
       });

package/src/vaadin-grid-active-item-mixin.d.ts

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ActiveItemMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ActiveItemMixinClass<TItem>>;
 
 export declare class ActiveItemMixinClass<TItem> {

package/src/vaadin-grid-active-item-mixin.js

@@ -19,8 +19,8 @@ export const ActiveItemMixin = (superClass) =>
         activeItem: {
           type: Object,
           notify: true,
-          value: null
-        }
+          value: null,
+        },
       };
     }
 
@@ -68,9 +68,9 @@ export const ActiveItemMixin = (superClass) =>
         this.dispatchEvent(
           new CustomEvent('cell-activate', {
             detail: {
-              model: this.__getRowModel(cell.parentElement)
-            }
-          })
+              model: this.__getRowModel(cell.parentElement),
+            },
+          }),
         );
       }
     }
@@ -108,8 +108,8 @@ export const isFocusable = (target) => {
   }
   const focusables = Array.from(
     target.parentNode.querySelectorAll(
-      '[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]'
-    )
+      '[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]',
+    ),
   ).filter((element) => element.getAttribute('part') !== 'cell body-cell');
 
   const isFocusableElement = focusables.indexOf(target) !== -1;

package/src/vaadin-grid-array-data-provider-mixin.d.ts

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ArrayDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ArrayDataProviderMixinClass<TItem>>;
 
 export declare class ArrayDataProviderMixinClass<TItem> {

package/src/vaadin-grid-array-data-provider-mixin.js

@@ -17,7 +17,7 @@ export const ArrayDataProviderMixin = (superClass) =>
          *
          * @type {Array<!GridItem> | undefined}
          */
-        items: Array
+        items: Array,
       };
     }
 
@@ -32,7 +32,7 @@ export const ArrayDataProviderMixin = (superClass) =>
       this.setProperties({
         _arrayDataProvider: arrayDataProvider,
         size: items.length,
-        dataProvider: arrayDataProvider
+        dataProvider: arrayDataProvider,
       });
     }
 
@@ -49,14 +49,14 @@ export const ArrayDataProviderMixin = (superClass) =>
           // A custom data provider was set externally
           this.setProperties({
             _arrayDataProvider: undefined,
-            items: undefined
+            items: undefined,
           });
         } else if (!items) {
           // The items array was unset
           this.setProperties({
             _arrayDataProvider: undefined,
             dataProvider: undefined,
-            size: 0
+            size: 0,
           });
           this.clearCache();
         } else if (this._arrayDataProvider.__items === items) {

package/src/vaadin-grid-column-group.js

@@ -52,7 +52,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       _childColumns: {
         value: function () {
           return this._getChildColumns(this);
-        }
+        },
       },
 
       /**
@@ -61,7 +61,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
        */
       flexGrow: {
         type: Number,
-        readOnly: true
+        readOnly: true,
       },
 
       /**
@@ -69,7 +69,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
        */
       width: {
         type: String,
-        readOnly: true
+        readOnly: true,
       },
 
       /** @private */
@@ -79,7 +79,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       _colSpan: Number,
 
       /** @private */
-      _rootColumns: Array
+      _rootColumns: Array,
     };
   }
 
@@ -90,7 +90,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
       '_groupOrderChanged(_order, _rootColumns)',
       '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
-      '_groupResizableChanged(resizable, _rootColumns)'
+      '_groupResizableChanged(resizable, _rootColumns)',
     ];
   }
 
@@ -209,10 +209,10 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
             .call(
               this._visibleChildColumns,
               (prev, curr) => (prev += ' + ' + (curr.width || '0px').replace('calc', '')),
-              ''
+              '',
             )
             .substring(3) +
-          ')'
+          ')',
       );
     } else {
       this._setWidth('0px');

package/src/vaadin-grid-column-reordering-mixin.d.ts

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ColumnReorderingMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ColumnReorderingMixinClass>;
 
 export declare class ColumnReorderingMixinClass {

package/src/vaadin-grid-column-reordering-mixin.js

@@ -20,14 +20,14 @@ export const ColumnReorderingMixin = (superClass) =>
          */
         columnReorderingAllowed: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /** @private */
         _orderBaseScope: {
           type: Number,
-          value: 10000000
-        }
+          value: 10000000,
+        },
       };
     }
 
@@ -60,8 +60,8 @@ export const ColumnReorderingMixin = (superClass) =>
         this._onTrackStart({
           detail: {
             x: e.touches[0].clientX,
-            y: e.touches[0].clientY
-          }
+            y: e.touches[0].clientY,
+          },
         });
       }, 100);
     }
@@ -184,9 +184,9 @@ export const ColumnReorderingMixin = (superClass) =>
       this.dispatchEvent(
         new CustomEvent('column-reorder', {
           detail: {
-            columns: this._getColumnsInOrder()
-          }
-        })
+            columns: this._getColumnsInOrder(),
+          },
+        }),
       );
     }
 
@@ -261,7 +261,7 @@ export const ColumnReorderingMixin = (superClass) =>
         'padding',
         'border',
         'flex-direction',
-        'overflow'
+        'overflow',
       ].forEach((propertyName) => (ghost.style[propertyName] = style[propertyName]));
       return ghost;
     }
@@ -330,7 +330,7 @@ export const ColumnReorderingMixin = (superClass) =>
      */
     _isSwappableByPosition(targetColumn, clientX) {
       const targetCell = Array.from(this.$.header.querySelectorAll('tr:not([hidden]) [part~="cell"]')).filter((cell) =>
-        targetColumn.contains(cell._column)
+        targetColumn.contains(cell._column),
       )[0];
       const sourceCellRect = this.$.header
         .querySelector('tr:not([hidden]) [reorder-status=dragging]')

package/src/vaadin-grid-column-resizing-mixin.js

@@ -21,13 +21,13 @@ export const ColumnResizingMixin = (superClass) =>
       // Disable contextmenu on any resize separator.
       scroller.addEventListener(
         'contextmenu',
-        (e) => e.target.getAttribute('part') == 'resize-handle' && e.preventDefault()
+        (e) => e.target.getAttribute('part') == 'resize-handle' && e.preventDefault(),
       );
 
       // Disable native cell focus when resizing
       scroller.addEventListener(
         'mousedown',
-        (e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault()
+        (e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault(),
       );
     }
 
@@ -90,8 +90,8 @@ export const ColumnResizingMixin = (superClass) =>
           this.$.scroller.toggleAttribute('column-resizing', false);
           this.dispatchEvent(
             new CustomEvent('column-resize', {
-              detail: { resizedColumn: column }
-            })
+              detail: { resizedColumn: column },
+            }),
           );
         }
 

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

@@ -9,7 +9,7 @@ import { GridDefaultItem, GridItemModel } from './vaadin-grid.js';
 export type GridBodyRenderer<TItem> = (
   root: HTMLElement,
   column: GridColumn<TItem>,
-  model: GridItemModel<TItem>
+  model: GridItemModel<TItem>,
 ) => void;
 
 export type GridColumnTextAlign = 'start' | 'center' | 'end' | null;
@@ -17,7 +17,7 @@ export type GridColumnTextAlign = 'start' | 'center' | 'end' | null;
 export type GridHeaderFooterRenderer<TItem> = (root: HTMLElement, column: GridColumn<TItem>) => void;
 
 export declare function ColumnBaseMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ColumnBaseMixinClass<TItem>>;
 
 export declare class ColumnBaseMixinClass<TItem> {

package/src/vaadin-grid-column.js

@@ -32,7 +32,7 @@ export const ColumnBaseMixin = (superClass) =>
               return parent.resizable || false;
             }
             return false;
-          }
+          },
         },
 
         /**
@@ -42,7 +42,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         frozen: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -50,14 +50,14 @@ export const ColumnBaseMixin = (superClass) =>
          */
         hidden: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
          * Text content to display in the header cell of the column.
          */
         header: {
-          type: String
+          type: String,
         },
 
         /**
@@ -67,7 +67,7 @@ export const ColumnBaseMixin = (superClass) =>
          * @type {GridColumnTextAlign | null | undefined}
          */
         textAlign: {
-          type: String
+          type: String,
         },
 
         /**
@@ -76,7 +76,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         _lastFrozen: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /** @protected */
@@ -110,7 +110,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         __initialized: {
           type: Boolean,
-          value: true
+          value: true,
         },
 
         /**
@@ -133,7 +133,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         _headerRenderer: {
           type: Function,
-          computed: '_computeHeaderRenderer(headerRenderer, header, __initialized)'
+          computed: '_computeHeaderRenderer(headerRenderer, header, __initialized)',
         },
 
         /**
@@ -156,7 +156,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         _footerRenderer: {
           type: Function,
-          computed: '_computeFooterRenderer(footerRenderer, __initialized)'
+          computed: '_computeFooterRenderer(footerRenderer, __initialized)',
         },
 
         /**
@@ -167,8 +167,8 @@ export const ColumnBaseMixin = (superClass) =>
          */
         __gridColumnElement: {
           type: Boolean,
-          value: true
-        }
+          value: true,
+        },
       };
     }
 
@@ -185,7 +185,7 @@ export const ColumnBaseMixin = (superClass) =>
         '_onFooterRendererOrBindingChanged(_footerRenderer, _footerCell)',
         '_resizableChanged(resizable, _headerCell)',
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells.*)',
-        '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)'
+        '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)',
       ];
     }
 
@@ -418,7 +418,7 @@ export const ColumnBaseMixin = (superClass) =>
             if (this._grid && this._grid._renderColumnTree) {
               this._grid._renderColumnTree(this._grid._columnTree);
             }
-          }
+          },
         );
 
         this._grid._updateLastFrozen && this._grid._updateLastFrozen();
@@ -672,7 +672,7 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        */
       width: {
         type: String,
-        value: '100px'
+        value: '100px',
       },
 
       /**
@@ -682,7 +682,7 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        */
       flexGrow: {
         type: Number,
-        value: 1
+        value: 1,
       },
 
       /**
@@ -713,7 +713,7 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        */
       _renderer: {
         type: Function,
-        computed: '_computeRenderer(renderer, __initialized)'
+        computed: '_computeRenderer(renderer, __initialized)',
       },
 
       /**
@@ -721,7 +721,7 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        * The property name is also shown in the column header if an explicit header or renderer isn't defined.
        */
       path: {
-        type: String
+        type: String,
       },
 
       /**
@@ -743,14 +743,14 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        */
       autoWidth: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
        * @type {Array<!HTMLElement>}
        * @protected
        */
-      _cells: Array
+      _cells: Array,
     };
   }
 }

package/src/vaadin-grid-data-provider-mixin.d.ts

@@ -30,7 +30,7 @@ export type GridDataProviderParams<TItem> = {
 
 export type GridDataProvider<TItem> = (
   params: GridDataProviderParams<TItem>,
-  callback: GridDataProviderCallback<TItem>
+  callback: GridDataProviderCallback<TItem>,
 ) => void;
 
 export declare class ItemCache<TItem> {
@@ -57,7 +57,7 @@ export declare class ItemCache<TItem> {
 }
 
 export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DataProviderMixinClass<TItem>>;
 
 export declare class DataProviderMixinClass<TItem> {

package/src/vaadin-grid-data-provider-mixin.js

@@ -42,7 +42,7 @@ export const ItemCache = class ItemCache {
       Object.keys(this.pendingRequests).length ||
         Object.keys(this.itemCaches).filter((index) => {
           return this.itemCaches[index].isLoading();
-        })[0]
+        })[0],
     );
   }
 
@@ -113,7 +113,7 @@ export const DataProviderMixin = (superClass) =>
          */
         size: {
           type: Number,
-          notify: true
+          notify: true,
         },
 
         /**
@@ -124,7 +124,7 @@ export const DataProviderMixin = (superClass) =>
         pageSize: {
           type: Number,
           value: 50,
-          observer: '_pageSizeChanged'
+          observer: '_pageSizeChanged',
         },
 
         /**
@@ -153,7 +153,7 @@ export const DataProviderMixin = (superClass) =>
         dataProvider: {
           type: Object,
           notify: true,
-          observer: '_dataProviderChanged'
+          observer: '_dataProviderChanged',
         },
 
         /**
@@ -163,7 +163,7 @@ export const DataProviderMixin = (superClass) =>
           type: Boolean,
           notify: true,
           readOnly: true,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /**
@@ -175,7 +175,7 @@ export const DataProviderMixin = (superClass) =>
           value: function () {
             const cache = new ItemCache(this);
             return cache;
-          }
+          },
         },
 
         /**
@@ -183,7 +183,7 @@ export const DataProviderMixin = (superClass) =>
          */
         _hasData: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -192,7 +192,7 @@ export const DataProviderMixin = (superClass) =>
          */
         itemHasChildrenPath: {
           type: String,
-          value: 'children'
+          value: 'children',
         },
 
         /**
@@ -201,7 +201,7 @@ export const DataProviderMixin = (superClass) =>
          */
         itemIdPath: {
           type: String,
-          value: null
+          value: null,
         },
 
         /**
@@ -211,7 +211,7 @@ export const DataProviderMixin = (superClass) =>
         expandedItems: {
           type: Object,
           notify: true,
-          value: () => []
+          value: () => [],
         },
 
         /**
@@ -219,13 +219,13 @@ export const DataProviderMixin = (superClass) =>
          */
         __expandedKeys: {
           type: Object,
-          value: () => new Set()
-        }
+          computed: '__computeExpandedKeys(itemIdPath, expandedItems.*)',
+        },
       };
     }
 
     static get observers() {
-      return ['_sizeChanged(size)', '_itemIdPathChanged(itemIdPath)', '_expandedItemsChanged(expandedItems.*)'];
+      return ['_sizeChanged(size)', '_expandedItemsChanged(expandedItems.*)'];
     }
 
     /** @private */
@@ -282,25 +282,20 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     _expandedItemsChanged() {
-      this.__cacheExpandedKeys();
       this._cache.updateSize();
       this._effectiveSize = this._cache.effectiveSize;
       this.__updateVisibleRows();
     }
 
     /** @private */
-    _itemIdPathChanged() {
-      this.__cacheExpandedKeys();
-    }
+    __computeExpandedKeys(itemIdPath, expandedItems) {
+      const expanded = expandedItems.base || [];
+      const expandedKeys = new Set();
+      expanded.forEach((item) => {
+        expandedKeys.add(this.getItemId(item));
+      });
 
-    /** @private */
-    __cacheExpandedKeys() {
-      if (this.expandedItems) {
-        this.__expandedKeys = new Set();
-        this.expandedItems.forEach((item) => {
-          this.__expandedKeys.add(this.getItemId(item));
-        });
-      }
+      return expandedKeys;
     }
 
     /**
@@ -353,7 +348,7 @@ export const DataProviderMixin = (superClass) =>
           pageSize: this.pageSize,
           sortOrders: this._mapSorters(),
           filters: this._mapFilters(),
-          parentItem: cache.parentItem
+          parentItem: cache.parentItem,
         };
 
         this.dataProvider(params, (items, size) => {
@@ -443,7 +438,7 @@ export const DataProviderMixin = (superClass) =>
           'The <vaadin-grid> needs the total number of items' +
             ' in order to display rows. Set the total number of items' +
             ' to the `size` property, or provide the total number of items' +
-            ' in the second argument of the `dataProvider`’s `callback` call.'
+            ' in the second argument of the `dataProvider`’s `callback` call.',
         );
       }
     }
@@ -459,7 +454,7 @@ export const DataProviderMixin = (superClass) =>
       this._debouncerCheckSize = Debouncer.debounce(
         this._debouncerCheckSize,
         timeOut.after(2000),
-        this._checkSize.bind(this)
+        this._checkSize.bind(this),
       );
     }
 

package/src/vaadin-grid-drag-and-drop-mixin.d.ts

@@ -13,7 +13,7 @@ export type GridDropLocation = 'above' | 'on-top' | 'below' | 'empty';
 export type GridDropMode = 'between' | 'on-top' | 'on-top-or-between' | 'on-grid';
 
 export declare function DragAndDropMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DragAndDropMixinClass<TItem>>;
 
 export declare class DragAndDropMixinClass<TItem> {