@vaadin/grid - npm Package Compare versions

Comparing version 23.1.0-beta1 to 23.1.0-beta2

package.json

 {
   "name": "@vaadin/grid",
-  "version": "23.1.0-beta1",
+  "version": "23.1.0-beta2",
   "publishConfig": {
@@ -26,2 +26,4 @@ "access": "public"
     "theme",
+    "lit.js",
+    "lit.d.ts",
     "vaadin-*.d.ts",
@@ -45,12 +47,13 @@ "vaadin-*.js"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.1.0-beta1",
-    "@vaadin/component-base": "23.1.0-beta1",
-    "@vaadin/text-field": "23.1.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-beta1",
-    "@vaadin/vaadin-material-styles": "23.1.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-beta1"
+    "@vaadin/checkbox": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/lit-renderer": "23.1.0-beta2",
+    "@vaadin/text-field": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-beta1",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
@@ -60,3 +63,3 @@ "lit": "^2.0.0",
   },
-  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

src/array-data-provider.js

@@ -28,3 +28,3 @@ /**
 
-    // skip simple paths
+    // Skip simple paths
     if (!path || path.indexOf('.') === -1) {
@@ -34,3 +34,3 @@ continue;
 
-    const parentProperty = path.replace(/\.[^.]*$/, ''); // a.b.c -> a.b
+    const parentProperty = path.replace(/\.[^.]*$/, ''); // A.b.c -> a.b
     if (get(parentProperty, items[0]) === undefined) {
@@ -37,0 +37,0 @@ console.warn(`Path "${path}" used for ${action} does not exist in all of the items, ${action} is disabled.`);

src/vaadin-grid-column-group.js

@@ -53,3 +53,3 @@ /**
       _childColumns: {
-        value: function () {
+        value() {
           return this._getChildColumns(this);
@@ -89,8 +89,5 @@ },
     return [
-      '_updateVisibleChildColumns(_childColumns)',
-      '_childColumnsChanged(_childColumns)',
       '_groupFrozenChanged(frozen, _rootColumns)',
       '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
-      '_groupHiddenChanged(hidden, _rootColumns)',
-      '_visibleChildColumnsChanged(_visibleChildColumns)',
+      '_groupHiddenChanged(hidden)',
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
@@ -125,5 +122,8 @@ '_groupOrderChanged(_order, _rootColumns)',
     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;
     }
@@ -211,12 +211,6 @@
     this._visibleChildColumns = Array.prototype.filter.call(childColumns, (col) => !col.hidden);
+    this._colSpan = this._visibleChildColumns.length;
+    this._updateAutoHidden();
   }
 
-  /** @private */
-  _childColumnsChanged(childColumns) {
-    if (!this._autoHidden && this.hidden) {
-      Array.prototype.forEach.call(childColumns, (column) => (column.hidden = true));
-      this._updateVisibleChildColumns(childColumns);
-    }
-  }
-
   /** @protected */
@@ -265,22 +259,27 @@ _updateFlexAndWidth() {
   /** @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));
     }
@@ -321,6 +320,10 @@ }
       ) {
-        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;
 
@@ -327,0 +330,0 @@ // Update the column tree with microtask timing to avoid shady style scope issues

src/vaadin-grid-column-reordering-mixin.js

@@ -321,4 +321,4 @@ /**
         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);
@@ -325,0 +325,0 @@ return differentColumns && sameParent && sameFrozen;

src/vaadin-grid-column.js

@@ -25,3 +25,3 @@ /**
           type: Boolean,
-          value: function () {
+          value() {
             if (this.localName === 'vaadin-grid-column-group') {
@@ -28,0 +28,0 @@ return;

src/vaadin-grid-data-provider-mixin.js

@@ -175,3 +175,3 @@ /**
           type: Object,
-          value: function () {
+          value() {
             const cache = new ItemCache(this);
@@ -348,3 +348,3 @@ return cache;
     _loadPage(page, cache) {
-      // make sure same page isn't requested multiple times.
+      // Make sure same page isn't requested multiple times.
       if (!cache.pendingRequests[page] && this.dataProvider) {
@@ -471,3 +471,3 @@ this._setLoading(true);
       if (!this._hasData) {
-        // load data before adding rows to make sure they have content when
+        // Load data before adding rows to make sure they have content when
         // rendered for the first time.
@@ -474,0 +474,0 @@ this._loadPage(0, this._cache);

src/vaadin-grid-dynamic-columns-mixin.js

@@ -19,3 +19,3 @@ /**
     if (arr1[i] instanceof Array && arr2[i] instanceof Array) {
-      // recurse into the nested arrays
+      // Recurse into the nested arrays
       if (!arrayEquals(arr1[i], arr2[i])) {
@@ -22,0 +22,0 @@ return false;

src/vaadin-grid-filter-mixin.js

@@ -17,5 +17,3 @@ /**
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
@@ -22,0 +20,0 @@ };

src/vaadin-grid-helpers.js

@@ -15,3 +15,3 @@ /**
   columns.forEach((column) => {
-    // avoid multiples of 10 because they introduce and extra zero and
+    // Avoid multiples of 10 because they introduce and extra zero and
     // causes the underlying calculations for child order goes wrong
@@ -18,0 +18,0 @@ if (c % 10 === 0) {

src/vaadin-grid-keyboard-navigation-mixin.js

@@ -620,2 +620,7 @@ /**
 
+      // Can be undefined if grid has tabindex
+      if (!focusTarget) {
+        return;
+      }
+
       // Prevent focus-trap logic from intercepting the event.
@@ -738,5 +743,3 @@ e.stopPropagation();
           const context = this.getEventContext(e);
-          cell.dispatchEvent(
-            new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context: context } }),
-          );
+          cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
         }
@@ -743,0 +746,0 @@ }

src/vaadin-grid-row-details-mixin.js

@@ -20,5 +20,3 @@ /**
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
@@ -25,0 +23,0 @@

src/vaadin-grid-scroll-mixin.js

@@ -66,5 +66,2 @@ /**
 
-      // Preserve accessor to the legacy scrolling functionality
-      this.$.outerscroller = document.createElement('div');
-
       this.scrollTarget = this.$.table;
@@ -71,0 +68,0 @@

src/vaadin-grid-selection-column.js

@@ -238,3 +238,3 @@ /**
   /**
-   * iOS needs indeterminate + checked at the same time
+   * IOS needs indeterminate + checked at the same time
    * @private
@@ -241,0 +241,0 @@ */

src/vaadin-grid-sort-mixin.js

@@ -30,5 +30,3 @@ /**
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
@@ -39,5 +37,3 @@
           type: Array,
-          value: function () {
-            return [];
-          },
+          value: () => [],
         },
@@ -44,0 +40,0 @@ };

src/vaadin-grid-styling-mixin.js

@@ -52,3 +52,3 @@ /**
       Array.from(this.$.items.children)
-        .filter((row) => !row.hidden)
+        .filter((row) => !row.hidden && !row.hasAttribute('loading'))
         .forEach((row) => this._generateCellClassNames(row, this.__getRowModel(row)));
@@ -55,0 +55,0 @@ }

src/vaadin-grid.d.ts

@@ -98,4 +98,4 @@ /**
   draggedItems: TItem[];
-  setDraggedItemsCount: (count: number) => void;
-  setDragData: (type: string, data: string) => void;
+  setDraggedItemsCount(count: number): void;
+  setDragData(type: string, data: string): void;
 }>;
@@ -102,0 +102,0 @@

src/vaadin-grid.js

@@ -561,3 +561,3 @@ /**
 
-    // 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) {
@@ -901,3 +901,4 @@ return columnWidth;
   __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
@@ -994,3 +995,3 @@ // the scroll height calculation on FF. This is a workaround for the issue.
     if (this._columnTree) {
-      // header and footer renderers
+      // Header and footer renderers
       this._columnTree.forEach((level) => {
@@ -1002,3 +1003,3 @@ level.forEach((column) => {
 
-      // body and row details renderers
+      // Body and row details renderers
       this.__updateVisibleRows();
@@ -1005,0 +1006,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

355334

increased by5.08%

Number of package files

109

increased by5.83%

Lines of code

9589

increased by4.36%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@vaadin/lit-renderer@23.1.0-beta2

• + Added@vaadin/checkbox@23.1.0-beta2(transitive)

• + Added@vaadin/component-base@23.1.0-beta2(transitive)

• + Added@vaadin/field-base@23.1.0-beta2(transitive)

• + Added@vaadin/icon@23.1.0-beta2(transitive)

• + Added@vaadin/input-container@23.1.0-beta2(transitive)

• + Added@vaadin/lit-renderer@23.1.0-beta2(transitive)

• + Added@vaadin/text-field@23.1.0-beta2(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.1.0-beta2(transitive)

• + Added@vaadin/vaadin-material-styles@23.1.0-beta2(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.1.0-beta2(transitive)

• - Removed@vaadin/checkbox@23.1.0-beta1(transitive)

• - Removed@vaadin/component-base@23.1.0-beta1(transitive)

• - Removed@vaadin/field-base@23.1.0-beta1(transitive)

• - Removed@vaadin/icon@23.1.0-beta1(transitive)

• - Removed@vaadin/input-container@23.1.0-beta1(transitive)

• - Removed@vaadin/text-field@23.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-material-styles@23.1.0-beta1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.1.0-beta1(transitive)

• Updated@vaadin/checkbox@23.1.0-beta2

• Updated@vaadin/component-base@23.1.0-beta2

• Updated@vaadin/text-field@23.1.0-beta2

• Updated@vaadin/vaadin-lumo-styles@23.1.0-beta2

• Updated@vaadin/vaadin-material-styles@23.1.0-beta2

• Updated@vaadin/vaadin-themable-mixin@23.1.0-beta2