@vaadin/grid 23.0.7 → 23.0.10

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

@@ -18,7 +18,7 @@ export const SortMixin = (superClass) =>
          */
         multiSort: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -29,7 +29,7 @@ export const SortMixin = (superClass) =>
           type: Array,
           value: function () {
             return [];
-          }
+          },
         },
 
         /** @private */
@@ -37,8 +37,8 @@ export const SortMixin = (superClass) =>
           type: Array,
           value: function () {
             return [];
-          }
-        }
+          },
+        },
       };
     }
 
@@ -122,7 +122,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

@@ -297,5 +297,5 @@ registerStyles(
       right: 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;
@@ -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,
       };
     }
   }
@@ -626,7 +626,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),
       );
     }
 
@@ -850,7 +850,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 +872,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 +893,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;
@@ -967,7 +968,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),
     };
   }
 
@@ -1012,7 +1013,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

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

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

@@ -108,5 +108,5 @@ registerStyles(
       content: var(--lumo-icons-angle-left);
     }
   `,
-  { moduleId: 'lumo-grid-tree-toggle' }
+  { moduleId: 'lumo-grid-tree-toggle' },
 );

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

@@ -68,5 +68,5 @@ registerStyles(
       right: auto;
     }
   `,
-  { moduleId: 'material-grid-sorter' }
+  { moduleId: 'material-grid-sorter' },
 );

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

@@ -258,5 +258,5 @@ registerStyles(
       right: var(--_grid-drag-start-x);
     }
   `,
-  { moduleId: 'material-grid' }
+  { moduleId: 'material-grid' },
 );

package/theme/material/vaadin-grid-tree-toggle-styles.js

@@ -38,5 +38,5 @@ registerStyles(
       transform: rotate(90deg);
     }
   `,
-  { moduleId: 'material-grid-tree-toggle' }
+  { moduleId: 'material-grid-tree-toggle' },
 );