@vaadin/grid 23.1.0-alpha3 → 23.1.0-beta2

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

@@ -50,9 +50,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
     return {
       /** @private */
       _childColumns: {
-        value: function () {
+        value() {
           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,22 +79,19 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       _colSpan: Number,
 
       /** @private */
-      _rootColumns: Array
+      _rootColumns: Array,
     };
   }
 
   static get observers() {
     return [
-      '_updateVisibleChildColumns(_childColumns)',
-      '_childColumnsChanged(_childColumns)',
       '_groupFrozenChanged(frozen, _rootColumns)',
       '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
-      '_groupHiddenChanged(hidden, _rootColumns)',
-      '_visibleChildColumnsChanged(_visibleChildColumns)',
+      '_groupHiddenChanged(hidden)',
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
       '_groupOrderChanged(_order, _rootColumns)',
       '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
-      '_groupResizableChanged(resizable, _rootColumns)'
+      '_groupResizableChanged(resizable, _rootColumns)',
     ];
   }
 
@@ -108,7 +105,9 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._observer && this._observer.disconnect();
+    if (this._observer) {
+      this._observer.disconnect();
+    }
   }
 
   /**
@@ -118,9 +117,12 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
    */
   _columnPropChanged(path, value) {
     if (path === 'hidden') {
-      this._preventHiddenCascade = true;
+      // Prevent synchronization of the hidden state to child columns.
+      // If the group is currently auto-hidden, and one column is made visible,
+      // we don't want the other columns to become visible as well.
+      this._preventHiddenSynchronization = true;
       this._updateVisibleChildColumns(this._childColumns);
-      this._preventHiddenCascade = false;
+      this._preventHiddenSynchronization = false;
     }
 
     if (/flexGrow|width|hidden|_childColumns/.test(path)) {
@@ -203,14 +205,8 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   /** @private */
   _updateVisibleChildColumns(childColumns) {
     this._visibleChildColumns = Array.prototype.filter.call(childColumns, (col) => !col.hidden);
-  }
-
-  /** @private */
-  _childColumnsChanged(childColumns) {
-    if (!this._autoHidden && this.hidden) {
-      Array.prototype.forEach.call(childColumns, (column) => (column.hidden = true));
-      this._updateVisibleChildColumns(childColumns);
-    }
+    this._colSpan = this._visibleChildColumns.length;
+    this._updateAutoHidden();
   }
 
   /** @protected */
@@ -219,18 +215,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');
     }
@@ -263,26 +252,31 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   }
 
   /** @private */
-  _groupHiddenChanged(hidden, rootColumns) {
-    if (rootColumns && !this._preventHiddenCascade) {
-      this._ignoreVisibleChildColumns = true;
-      rootColumns.forEach((column) => (column.hidden = hidden));
-      this._ignoreVisibleChildColumns = false;
+  _groupHiddenChanged(hidden) {
+    // When initializing the hidden property, only sync hidden state to columns
+    // if group is actually hidden. Otherwise, we could override a hidden column
+    // to be visible.
+    // We always want to run this though if the property is actually changed.
+    if (hidden || this.__groupHiddenInitialized) {
+      this._synchronizeHidden();
     }
+    this.__groupHiddenInitialized = true;
+  }
 
-    this._columnPropChanged('hidden');
+  /** @private */
+  _updateAutoHidden() {
+    const wasAutoHidden = this._autoHidden;
+    this._autoHidden = (this._visibleChildColumns || []).length === 0;
+    // Only modify hidden state if group was auto-hidden, or becomes auto-hidden
+    if (wasAutoHidden || this._autoHidden) {
+      this.hidden = this._autoHidden;
+    }
   }
 
   /** @private */
-  _visibleChildColumnsChanged(visibleChildColumns) {
-    this._colSpan = visibleChildColumns.length;
-
-    if (!this._ignoreVisibleChildColumns) {
-      if (visibleChildColumns.length === 0) {
-        this._autoHidden = this.hidden = true;
-      } else if (this.hidden && this._autoHidden) {
-        this._autoHidden = this.hidden = false;
-      }
+  _synchronizeHidden() {
+    if (this._childColumns && !this._preventHiddenSynchronization) {
+      this._childColumns.forEach((column) => (column.hidden = this.hidden));
     }
   }
 
@@ -290,11 +284,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);
+      }
     }
   }
 
@@ -314,14 +312,20 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
         info.addedNodes.filter(this._isColumnElement).length > 0 ||
         info.removedNodes.filter(this._isColumnElement).length > 0
       ) {
-        this._preventHiddenCascade = true;
+        // Prevent synchronization of the hidden state to child columns.
+        // If the group is currently auto-hidden, and a visible column is added,
+        // we don't want the other columns to become visible as well.
+        this._preventHiddenSynchronization = true;
         this._rootColumns = this._getChildColumns(this);
         this._childColumns = this._rootColumns;
-        this._preventHiddenCascade = false;
+        this._updateVisibleChildColumns(this._childColumns);
+        this._preventHiddenSynchronization = false;
 
         // 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;
     }
@@ -318,8 +318,8 @@ export const ColumnReorderingMixin = (superClass) =>
         const differentColumns = column1 !== column2;
         const sameParent = column1.parentElement === column2.parentElement;
         const sameFrozen =
-          (column1.frozen && column2.frozen) || // both columns are frozen
-          (column1.frozenToEnd && column2.frozenToEnd) || // both columns are frozen to end
+          (column1.frozen && column2.frozen) || // Both columns are frozen
+          (column1.frozenToEnd && column2.frozenToEnd) || // Both columns are frozen to end
           (!column1.frozen && !column1.frozenToEnd && !column2.frozen && !column2.frozenToEnd);
         return differentColumns && sameParent && sameFrozen;
       }
@@ -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

@@ -22,7 +22,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         resizable: {
           type: Boolean,
-          value: function () {
+          value() {
             if (this.localName === 'vaadin-grid-column-group') {
               return;
             }
@@ -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> {