@vaadin/grid 23.1.0-alpha1 → 23.1.0-alpha4

package/package.json

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

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,10 +108,10 @@ 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;
+  const isFocusableElement = focusables.includes(target);
   return !target.disabled && isFocusableElement;
 };

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,
     };
   }
 
@@ -94,7 +94,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
       '_groupOrderChanged(_order, _rootColumns)',
       '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
-      '_groupResizableChanged(resizable, _rootColumns)'
+      '_groupResizableChanged(resizable, _rootColumns)',
     ];
   }
 
@@ -108,7 +108,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._observer && this._observer.disconnect();
+    if (this._observer) {
+      this._observer.disconnect();
+    }
   }
 
   /**
@@ -219,18 +221,11 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       return;
     }
 
-    if (this._visibleChildColumns.length) {
-      this._setWidth(
-        'calc(' +
-          Array.prototype.reduce
-            .call(
-              this._visibleChildColumns,
-              (prev, curr) => (prev += ' + ' + (curr.width || '0px').replace('calc', '')),
-              ''
-            )
-            .substring(3) +
-          ')'
-      );
+    if (this._visibleChildColumns.length > 0) {
+      const width = this._visibleChildColumns
+        .reduce((prev, curr) => (prev += ` + ${(curr.width || '0px').replace('calc', '')}`), '')
+        .substring(3);
+      this._setWidth(`calc(${width})`);
     } else {
       this._setWidth('0px');
     }
@@ -290,11 +285,15 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   _colSpanChanged(colSpan, headerCell, footerCell) {
     if (headerCell) {
       headerCell.setAttribute('colspan', colSpan);
-      this._grid && this._grid._a11yUpdateCellColspan(headerCell, colSpan);
+      if (this._grid) {
+        this._grid._a11yUpdateCellColspan(headerCell, colSpan);
+      }
     }
     if (footerCell) {
       footerCell.setAttribute('colspan', colSpan);
-      this._grid && this._grid._a11yUpdateCellColspan(footerCell, colSpan);
+      if (this._grid) {
+        this._grid._a11yUpdateCellColspan(footerCell, colSpan);
+      }
     }
   }
 
@@ -321,7 +320,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
 
         // Update the column tree with microtask timing to avoid shady style scope issues
         microTask.run(() => {
-          this._grid && this._grid._updateColumnTree && this._grid._updateColumnTree();
+          if (this._grid && this._grid._updateColumnTree) {
+            this._grid._updateColumnTree();
+          }
         });
       }
     });

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;
     }
@@ -333,7 +333,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(),
       );
     }
 
@@ -42,14 +42,10 @@ export const ColumnResizingMixin = (superClass) =>
 
         // Get the target column to resize
         while (column.localName === 'vaadin-grid-column-group') {
-          column = Array.prototype.slice
-            .call(column._childColumns, 0)
-            .sort(function (a, b) {
-              return a._order - b._order;
-            })
-            .filter(function (column) {
-              return !column.hidden;
-            })
+          column = column._childColumns
+            .slice(0)
+            .sort((a, b) => a._order - b._order)
+            .filter((column) => !column.hidden)
             .pop();
         }
 
@@ -80,17 +76,15 @@ export const ColumnResizingMixin = (superClass) =>
             maxWidth = cellWidth + (this.__isRTL ? cellRect.left - eventX : eventX - cellRect.right);
           }
 
-          column.width = Math.max(minWidth, maxWidth) + 'px';
+          column.width = `${Math.max(minWidth, maxWidth)}px`;
           column.flexGrow = 0;
         }
         // Fix width and flex-grow for all preceding columns
         columnRowCells
-          .sort(function (a, b) {
-            return a._column._order - b._column._order;
-          })
-          .forEach(function (cell, index, array) {
+          .sort((a, b) => a._column._order - b._column._order)
+          .forEach((cell, index, array) => {
             if (index < array.indexOf(targetCell)) {
-              cell._column.width = cell.offsetWidth + 'px';
+              cell._column.width = `${cell.offsetWidth}px`;
               cell._column.flexGrow = 0;
             }
           });
@@ -111,8 +105,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,
         },
 
         /**
@@ -57,7 +57,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         frozenToEnd: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -65,14 +65,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,
         },
 
         /**
@@ -82,7 +82,7 @@ export const ColumnBaseMixin = (superClass) =>
          * @type {GridColumnTextAlign | null | undefined}
          */
         textAlign: {
-          type: String
+          type: String,
         },
 
         /**
@@ -91,7 +91,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         _lastFrozen: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -100,7 +100,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         _firstFrozenToEnd: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /** @protected */
@@ -134,7 +134,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         __initialized: {
           type: Boolean,
-          value: true
+          value: true,
         },
 
         /**
@@ -157,7 +157,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         _headerRenderer: {
           type: Function,
-          computed: '_computeHeaderRenderer(headerRenderer, header, __initialized)'
+          computed: '_computeHeaderRenderer(headerRenderer, header, __initialized)',
         },
 
         /**
@@ -180,7 +180,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         _footerRenderer: {
           type: Function,
-          computed: '_computeFooterRenderer(footerRenderer, __initialized)'
+          computed: '_computeFooterRenderer(footerRenderer, __initialized)',
         },
 
         /**
@@ -191,8 +191,8 @@ export const ColumnBaseMixin = (superClass) =>
          */
         __gridColumnElement: {
           type: Boolean,
-          value: true
-        }
+          value: true,
+        },
       };
     }
 
@@ -211,7 +211,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.*)',
       ];
     }
 
@@ -267,7 +267,7 @@ export const ColumnBaseMixin = (superClass) =>
      * @protected
      */
     _findHostGrid() {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      // eslint-disable-next-line @typescript-eslint/no-this-alias, consistent-this
       let el = this;
       // Custom elements extending grid must have a specific localName
       while (el && !/^vaadin.*grid(-pro)?$/.test(el.localName)) {
@@ -337,7 +337,9 @@ export const ColumnBaseMixin = (superClass) =>
 
       this._allCells.forEach((cell) => cell.toggleAttribute('frozen', frozen));
 
-      this._grid && this._grid._frozenCellsChanged && this._grid._frozenCellsChanged();
+      if (this._grid && this._grid._frozenCellsChanged) {
+        this._grid._frozenCellsChanged();
+      }
     }
 
     /** @private */
@@ -354,7 +356,9 @@ export const ColumnBaseMixin = (superClass) =>
         cell.toggleAttribute('frozen-to-end', frozenToEnd);
       });
 
-      this._grid && this._grid._frozenCellsChanged && this._grid._frozenCellsChanged();
+      if (this._grid && this._grid._frozenCellsChanged) {
+        this._grid._frozenCellsChanged();
+      }
     }
 
     /** @private */
@@ -477,11 +481,16 @@ export const ColumnBaseMixin = (superClass) =>
             if (this._grid && this._grid._renderColumnTree) {
               this._grid._renderColumnTree(this._grid._columnTree);
             }
-          }
+          },
         );
 
-        this._grid._updateFrozenColumn && this._grid._updateFrozenColumn();
-        this._grid._resetKeyboardNavigation && this._grid._resetKeyboardNavigation();
+        if (this._grid._updateFrozenColumn) {
+          this._grid._updateFrozenColumn();
+        }
+
+        if (this._grid._resetKeyboardNavigation) {
+          this._grid._resetKeyboardNavigation();
+        }
       }
       this._previousHidden = hidden;
     }
@@ -609,7 +618,9 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     __setTextContent(node, textContent) {
-      node.textContent !== textContent && (node.textContent = textContent);
+      if (node.textContent !== textContent) {
+        node.textContent = textContent;
+      }
     }
 
     /**
@@ -731,7 +742,7 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        */
       width: {
         type: String,
-        value: '100px'
+        value: '100px',
       },
 
       /**
@@ -741,7 +752,7 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        */
       flexGrow: {
         type: Number,
-        value: 1
+        value: 1,
       },
 
       /**
@@ -772,7 +783,7 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
        */
       _renderer: {
         type: Function,
-        computed: '_computeRenderer(renderer, __initialized)'
+        computed: '_computeRenderer(renderer, __initialized)',
       },
 
       /**
@@ -780,7 +791,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,
       },
 
       /**
@@ -802,14 +813,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> {