@vaadin/grid 23.1.0-alpha1 → 23.1.0-alpha4

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,
         },
 
         /**
@@ -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 [];
-          }
-        }
+          },
+        },
       };
     }
 
@@ -58,7 +58,7 @@ export const SortMixin = (superClass) =>
 
     /** @private */
     __removeSorters(sortersToRemove) {
-      if (sortersToRemove.length == 0) {
+      if (sortersToRemove.length === 0) {
         return;
       }
 
@@ -89,7 +89,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 +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

@@ -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,
       };
     }
 

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,36 +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
-      },
-
-      /** @protected */
-      tabindex: {
-        value: undefined
+        value: isTouch,
       },
 
       /**
@@ -356,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,
       },
 
       /**
@@ -378,8 +373,8 @@ class Grid extends ElementMixin(
        */
       __gridElement: {
         type: Boolean,
-        value: true
-      }
+        value: true,
+      },
     };
   }
 
@@ -452,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,29 +468,12 @@ class Grid extends ElementMixin(
     }
   }
 
-  /**
-   * Override an observer from `DisabledMixin` to not
-   * set `tabindex` on the grid when it is re-enabled.
-   *
-   * @param {boolean} disabled
-   * @param {boolean} oldDisabled
-   * @protected
-   * @override
-   */
-  _disabledChanged(disabled, oldDisabled) {
-    super._disabledChanged(disabled, oldDisabled);
-
-    if (oldDisabled) {
-      this.removeAttribute('tabindex');
-    }
-  }
-
   /** @private */
   __getBodyCellCoordinates(cell) {
     if (this.$.items.contains(cell) && cell.localName === 'td') {
       return {
         item: cell.parentElement._item,
-        column: cell._column
+        column: cell._column,
       };
     }
   }
@@ -504,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 */
@@ -519,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();
@@ -648,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),
       );
     }
 
@@ -664,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);
@@ -691,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();
           }
@@ -872,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) {
@@ -894,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
@@ -974,8 +956,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';
       });
     }
   }
@@ -992,7 +972,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),
     };
   }
 
@@ -1023,7 +1003,9 @@ class Grid extends ElementMixin(
 
   /** @protected */
   __updateVisibleRows(start, end) {
-    this.__virtualizer && this.__virtualizer.update(start, end);
+    if (this.__virtualizer) {
+      this.__virtualizer.update(start, end);
+    }
   }
 
   /**
@@ -1037,7 +1019,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' },
 );

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

@@ -267,5 +267,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' },
 );