@vaadin/grid 23.1.0-alpha3 → 23.1.0-beta2

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

@@ -42,7 +42,7 @@ class GridSelectionColumn extends GridColumn {
        */
       width: {
         type: String,
-        value: '58px'
+        value: '58px',
       },
 
       /**
@@ -52,7 +52,7 @@ class GridSelectionColumn extends GridColumn {
        */
       flexGrow: {
         type: Number,
-        value: 0
+        value: 0,
       },
 
       /**
@@ -63,7 +63,7 @@ class GridSelectionColumn extends GridColumn {
       selectAll: {
         type: Boolean,
         value: false,
-        notify: true
+        notify: true,
       },
 
       /**
@@ -73,7 +73,7 @@ class GridSelectionColumn extends GridColumn {
        */
       autoSelect: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /** @private */
@@ -87,14 +87,14 @@ class GridSelectionColumn extends GridColumn {
       __previousActiveItem: Object,
 
       /** @private */
-      __selectAllHidden: Boolean
+      __selectAllHidden: Boolean,
     };
   }
 
   static get observers() {
     return [
       '__onSelectAllChanged(selectAll)',
-      '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, __indeterminate, __selectAllHidden)'
+      '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, __indeterminate, __selectAllHidden)',
     ];
   }
 
@@ -235,7 +235,7 @@ class GridSelectionColumn extends GridColumn {
   }
 
   /**
-   * iOS needs indeterminate + checked at the same time
+   * IOS needs indeterminate + checked at the same time
    * @private
    */
   __isChecked(selectAll, indeterminate) {
@@ -290,7 +290,7 @@ class GridSelectionColumn extends GridColumn {
       page: 0,
       pageSize: Infinity,
       sortOrders: [],
-      filters: this._grid._mapFilters()
+      filters: this._grid._mapFilters(),
     };
     this._grid.dataProvider(params, (items) => callback(items));
   }

package/src/vaadin-grid-selection-mixin.d.ts

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

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

@@ -18,8 +18,8 @@ export const SelectionMixin = (superClass) =>
         selectedItems: {
           type: Object,
           notify: true,
-          value: () => []
-        }
+          value: () => [],
+        },
       };
     }
 

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

@@ -49,13 +49,13 @@ declare class GridSortColumn<TItem = GridDefaultItem> extends GridColumn<TItem>
   addEventListener<K extends keyof GridSortColumnEventMap>(
     type: K,
     listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof GridSortColumnEventMap>(
     type: K,
     listener: (this: GridSortColumn<TItem>, ev: GridSortColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

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

@@ -41,8 +41,8 @@ class GridSortColumn extends GridColumn {
        */
       direction: {
         type: String,
-        notify: true
-      }
+        notify: true,
+      },
     };
   }
 

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

@@ -18,7 +18,7 @@ export const SortMixin = (superClass) =>
          */
         multiSort: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -27,18 +27,14 @@ export const SortMixin = (superClass) =>
          */
         _sorters: {
           type: Array,
-          value: function () {
-            return [];
-          }
+          value: () => [],
         },
 
         /** @private */
         _previousSorters: {
           type: Array,
-          value: function () {
-            return [];
-          }
-        }
+          value: () => [],
+        },
       };
     }
 
@@ -58,7 +54,7 @@ export const SortMixin = (superClass) =>
 
     /** @private */
     __removeSorters(sortersToRemove) {
-      if (sortersToRemove.length == 0) {
+      if (sortersToRemove.length === 0) {
         return;
       }
 
@@ -89,7 +85,7 @@ export const SortMixin = (superClass) =>
         }
         this.__updateSortOrders();
       } else if (sorter.direction) {
-        const otherSorters = this._sorters.filter((s) => s != sorter);
+        const otherSorters = this._sorters.filter((s) => s !== sorter);
         this._sorters = [sorter];
         otherSorters.forEach((sorter) => {
           sorter._order = null;
@@ -122,7 +118,7 @@ export const SortMixin = (superClass) =>
       return this._sorters.map((sorter) => {
         return {
           path: sorter.path,
-          direction: sorter.direction
+          direction: sorter.direction,
         };
       });
     }

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

@@ -76,13 +76,13 @@ declare class GridSorter extends ThemableMixin(DirMixin(HTMLElement)) {
   addEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof GridSorterEventMap>(
     type: K,
     listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-grid-sorter.js

@@ -136,7 +136,7 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
         type: String,
         reflectToAttribute: true,
         notify: true,
-        value: null
+        value: null,
       },
 
       /**
@@ -145,14 +145,14 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
        */
       _order: {
         type: Number,
-        value: null
+        value: null,
       },
 
       /** @private */
       _isConnected: {
         type: Boolean,
-        observer: '__isConnectedChanged'
-      }
+        observer: '__isConnectedChanged',
+      },
     };
   }
 

package/src/vaadin-grid-styles.js

@@ -321,5 +321,5 @@ registerStyles(
       left: auto;
     }
   `,
-  { moduleId: 'vaadin-grid-styles' }
+  { moduleId: 'vaadin-grid-styles' },
 );

package/src/vaadin-grid-styling-mixin.d.ts

@@ -10,7 +10,7 @@ import { GridColumn } from './vaadin-grid-column.js';
 export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
 
 export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<StylingMixinClass<TItem>>;
 
 export declare class StylingMixinClass<TItem> {

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

@@ -29,7 +29,7 @@ export const StylingMixin = (superClass) =>
          *
          * @type {GridCellClassNameGenerator | null | undefined}
          */
-        cellClassNameGenerator: Function
+        cellClassNameGenerator: Function,
       };
     }
 
@@ -49,7 +49,7 @@ export const StylingMixin = (superClass) =>
      */
     generateCellClassNames() {
       Array.from(this.$.items.children)
-        .filter((row) => !row.hidden)
+        .filter((row) => !row.hidden && !row.hasAttribute('loading'))
         .forEach((row) => this._generateCellClassNames(row, this.__getRowModel(row)));
     }
 

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

@@ -38,8 +38,8 @@ class GridTreeColumn extends GridColumn {
        */
       itemHasChildrenPath: {
         type: String,
-        observer: '_itemHasChildrenPathChanged'
-      }
+        observer: '_itemHasChildrenPathChanged',
+      },
     };
   }
 
@@ -89,7 +89,7 @@ class GridTreeColumn extends GridColumn {
   _itemHasChildrenPathChanged(itemHasChildrenPath) {
     if (itemHasChildrenPath) {
       console.warn(
-        `WARNING: Since Vaadin 23, itemHasChildrenPath on <vaadin-grid-tree-column> is deprecated. Please set this property on the <vaadin-grid> instead.`
+        `WARNING: Since Vaadin 23, itemHasChildrenPath on <vaadin-grid-tree-column> is deprecated. Please set this property on the <vaadin-grid> instead.`,
       );
 
       if (this._grid) {

package/src/vaadin-grid-tree-toggle.d.ts

@@ -85,13 +85,13 @@ declare class GridTreeToggle extends ThemableMixin(DirMixin(HTMLElement)) {
   addEventListener<K extends keyof GridTreeToggleEventMap>(
     type: K,
     listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof GridTreeToggleEventMap>(
     type: K,
     listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-grid-tree-toggle.js

@@ -154,7 +154,7 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
       level: {
         type: Number,
         value: 0,
-        observer: '_levelChanged'
+        observer: '_levelChanged',
       },
 
       /**
@@ -164,7 +164,7 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
       leaf: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -175,8 +175,8 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
         type: Boolean,
         value: false,
         reflectToAttribute: true,
-        notify: true
-      }
+        notify: true,
+      },
     };
   }
 

package/src/vaadin-grid.d.ts

@@ -17,13 +17,13 @@ import {
   GridDataProviderParams,
   GridFilterDefinition,
   GridSorterDefinition,
-  GridSorterDirection
+  GridSorterDirection,
 } from './vaadin-grid-data-provider-mixin.js';
 import {
   DragAndDropMixinClass,
   GridDragAndDropFilter,
   GridDropLocation,
-  GridDropMode
+  GridDropMode,
 } from './vaadin-grid-drag-and-drop-mixin.js';
 import { EventContextMixinClass, GridEventContext } from './vaadin-grid-event-context-mixin.js';
 import { GridRowDetailsRenderer, RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
@@ -46,7 +46,7 @@ export {
   GridHeaderFooterRenderer,
   GridRowDetailsRenderer,
   GridSorterDefinition,
-  GridSorterDirection
+  GridSorterDirection,
 };
 
 export type GridDefaultItem = any;
@@ -95,8 +95,8 @@ export type GridExpandedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[]
  */
 export type GridDragStartEvent<TItem> = CustomEvent<{
   draggedItems: TItem[];
-  setDraggedItemsCount: (count: number) => void;
-  setDragData: (type: string, data: string) => void;
+  setDraggedItemsCount(count: number): void;
+  setDragData(type: string, data: string): void;
 }>;
 
 /**
@@ -379,13 +379,13 @@ declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof GridEventMap<TItem>>(
     type: K,
     listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-grid.js

@@ -258,21 +258,21 @@ class Grid extends ElementMixin(
                         FilterMixin(
                           ColumnReorderingMixin(
                             ColumnResizingMixin(
-                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(PolymerElement))))
-                            )
-                          )
-                        )
-                      )
-                    )
-                  )
-                )
-              )
-            )
-          )
-        )
-      )
-    )
-  )
+                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(PolymerElement)))),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    ),
+  ),
 ) {
   static get template() {
     return html`
@@ -304,7 +304,7 @@ class Grid extends ElementMixin(
   static get observers() {
     return [
       '_columnTreeChanged(_columnTree, _columnTree.*)',
-      '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)'
+      '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)',
     ];
   }
 
@@ -313,31 +313,31 @@ class Grid extends ElementMixin(
       /** @private */
       _safari: {
         type: Boolean,
-        value: isSafari
+        value: isSafari,
       },
 
       /** @private */
       _ios: {
         type: Boolean,
-        value: isIOS
+        value: isIOS,
       },
 
       /** @private */
       _firefox: {
         type: Boolean,
-        value: isFirefox
+        value: isFirefox,
       },
 
       /** @private */
       _android: {
         type: Boolean,
-        value: isAndroid
+        value: isAndroid,
       },
 
       /** @private */
       _touchDevice: {
         type: Boolean,
-        value: isTouch
+        value: isTouch,
       },
 
       /**
@@ -351,18 +351,18 @@ class Grid extends ElementMixin(
       allRowsVisible: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /** @private */
       _recalculateColumnWidthOnceLoadingFinished: {
         type: Boolean,
-        value: true
+        value: true,
       },
 
       /** @private */
       isAttached: {
-        value: false
+        value: false,
       },
 
       /**
@@ -373,8 +373,8 @@ class Grid extends ElementMixin(
        */
       __gridElement: {
         type: Boolean,
-        value: true
-      }
+        value: true,
+      },
     };
   }
 
@@ -447,7 +447,7 @@ class Grid extends ElementMixin(
       updateElement: this._updateScrollerItem.bind(this),
       scrollContainer: this.$.items,
       scrollTarget: this.$.table,
-      reorderElements: true
+      reorderElements: true,
     });
 
     new ResizeObserver(() => setTimeout(() => this.__updateFooterPositioning())).observe(this.$.footer);
@@ -473,7 +473,7 @@ class Grid extends ElementMixin(
     if (this.$.items.contains(cell) && cell.localName === 'td') {
       return {
         item: cell.parentElement._item,
-        column: cell._column
+        column: cell._column,
       };
     }
   }
@@ -482,7 +482,9 @@ class Grid extends ElementMixin(
   __focusBodyCell({ item, column }) {
     const row = this._getVisibleRows().find((row) => row._item === item);
     const cell = row && [...row.children].find((cell) => cell._column === column);
-    cell && cell.focus();
+    if (cell) {
+      cell.focus();
+    }
   }
 
   /** @private */
@@ -497,7 +499,9 @@ class Grid extends ElementMixin(
       virtualizer.flush();
 
       // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
-      cellCoordinates && cell.parentElement.hidden && this.__focusBodyCell(cellCoordinates);
+      if (cellCoordinates && cell.parentElement.hidden) {
+        this.__focusBodyCell(cellCoordinates);
+      }
 
       // Make sure the body has a tabbable element
       this._resetKeyboardNavigation();
@@ -554,7 +558,7 @@ class Grid extends ElementMixin(
 
     const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
 
-    // we're processing a regular grid-column and not a grid-column-group
+    // We're processing a regular grid-column and not a grid-column-group
     if (!innerColumn) {
       return columnWidth;
     }
@@ -626,7 +630,7 @@ class Grid extends ElementMixin(
 
     if (this._columnTree) {
       this._columnTree[this._columnTree.length - 1].forEach(
-        (c) => c.isConnected && c.notifyPath && c.notifyPath('_cells.*', c._cells)
+        (c) => c.isConnected && c.notifyPath && c.notifyPath('_cells.*', c._cells),
       );
     }
 
@@ -642,7 +646,7 @@ class Grid extends ElementMixin(
   /** @private */
   _createCell(tagName) {
     const contentId = (this._contentIndex = this._contentIndex + 1 || 0);
-    const slotName = 'vaadin-grid-cell-content-' + contentId;
+    const slotName = `vaadin-grid-cell-content-${contentId}`;
 
     const cellContent = document.createElement('vaadin-grid-cell-content');
     cellContent.setAttribute('slot', slotName);
@@ -669,7 +673,7 @@ class Grid extends ElementMixin(
           // If focus is on element within the cell content — respect it, do not change
           const contentContainsFocusedElement = cellContent.contains(this.getRootNode().activeElement);
           // Only focus if mouse is released on cell content itself
-          const mouseUpWithinCell = cellContent.contains(event.target);
+          const mouseUpWithinCell = event.composedPath().includes(cellContent);
           if (!contentContainsFocusedElement && mouseUpWithinCell) {
             cell.focus();
           }
@@ -850,7 +854,7 @@ class Grid extends ElementMixin(
    */
   _renderColumnTree(columnTree) {
     Array.from(this.$.items.children).forEach((row) =>
-      this._updateRow(row, columnTree[columnTree.length - 1], null, false, true)
+      this._updateRow(row, columnTree[columnTree.length - 1], null, false, true),
     );
 
     while (this.$.header.children.length < columnTree.length) {
@@ -872,11 +876,11 @@ class Grid extends ElementMixin(
     }
 
     Array.from(this.$.header.children).forEach((headerRow, index) =>
-      this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1)
+      this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1),
     );
 
     Array.from(this.$.footer.children).forEach((footerRow, index) =>
-      this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0)
+      this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0),
     );
 
     // Sizer rows
@@ -893,7 +897,8 @@ class Grid extends ElementMixin(
   }
 
   __updateFooterPositioning() {
-    if (this._firefox) {
+    // TODO: fixed in Firefox 99, remove when we can drop Firefox ESR 91 support
+    if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/)[1]) < 99) {
       // Sticky (or translated) footer in a flexbox host doesn't get included in
       // the scroll height calculation on FF. This is a workaround for the issue.
       this.$.items.style.paddingBottom = 0;
@@ -952,8 +957,6 @@ class Grid extends ElementMixin(
 
       requestAnimationFrame(() => {
         this.__scrollToPendingIndex();
-        // This needs to be set programmatically in order to avoid an iOS 10 bug (disappearing grid)
-        this.$.table.style.webkitOverflowScrolling = 'touch';
       });
     }
   }
@@ -970,7 +973,7 @@ class Grid extends ElementMixin(
       level: this._getIndexLevel(row.index),
       expanded: this._isExpanded(row._item),
       selected: this._isSelected(row._item),
-      detailsOpened: !!this.rowDetailsRenderer && this._isDetailsOpened(row._item)
+      detailsOpened: !!this.rowDetailsRenderer && this._isDetailsOpened(row._item),
     };
   }
 
@@ -987,21 +990,23 @@ class Grid extends ElementMixin(
    */
   requestContentUpdate() {
     if (this._columnTree) {
-      // header and footer renderers
+      // Header and footer renderers
       this._columnTree.forEach((level) => {
         level.forEach((column) => {
           column._renderHeaderAndFooter();
         });
       });
 
-      // body and row details renderers
+      // Body and row details renderers
       this.__updateVisibleRows();
     }
   }
 
   /** @protected */
   __updateVisibleRows(start, end) {
-    this.__virtualizer && this.__virtualizer.update(start, end);
+    if (this.__virtualizer) {
+      this.__virtualizer.update(start, end);
+    }
   }
 
   /**
@@ -1015,7 +1020,7 @@ class Grid extends ElementMixin(
    */
   notifyResize() {
     console.warn(
-      `WARNING: Since Vaadin 22, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`
+      `WARNING: Since Vaadin 22, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`,
     );
   }
 }

package/theme/lumo/vaadin-grid-sorter-styles.js

@@ -49,5 +49,5 @@ registerStyles(
       margin-left: 0;
     }
   `,
-  { moduleId: 'lumo-grid-sorter' }
+  { moduleId: 'lumo-grid-sorter' },
 );

package/theme/lumo/vaadin-grid-styles.js

@@ -393,7 +393,7 @@ registerStyles(
       border-right-color: var(--_lumo-grid-border-color);
     }
   `,
-  { moduleId: 'lumo-grid' }
+  { moduleId: 'lumo-grid' },
 );
 
 registerStyles(
@@ -403,5 +403,5 @@ registerStyles(
       font-size: var(--lumo-font-size-m);
     }
   `,
-  { moduleId: 'vaadin-grid-select-all-checkbox-lumo' }
+  { moduleId: 'vaadin-grid-select-all-checkbox-lumo' },
 );