@vaadin/grid 24.3.2 → 24.4.0-dev.223e39f050

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.3.2",
+  "version": "24.4.0-dev.223e39f050",
   "publishConfig": {
     "access": "public"
   },
@@ -46,24 +46,24 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.3.2",
-    "@vaadin/checkbox": "~24.3.2",
-    "@vaadin/component-base": "~24.3.2",
-    "@vaadin/lit-renderer": "~24.3.2",
-    "@vaadin/text-field": "~24.3.2",
-    "@vaadin/vaadin-lumo-styles": "~24.3.2",
-    "@vaadin/vaadin-material-styles": "~24.3.2",
-    "@vaadin/vaadin-themable-mixin": "~24.3.2"
+    "@vaadin/a11y-base": "24.4.0-dev.223e39f050",
+    "@vaadin/checkbox": "24.4.0-dev.223e39f050",
+    "@vaadin/component-base": "24.4.0-dev.223e39f050",
+    "@vaadin/lit-renderer": "24.4.0-dev.223e39f050",
+    "@vaadin/text-field": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.223e39f050",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.6.0",
-    "lit": "^3.0.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "615ee9dd4611f52db90445b0db13dcbb91ca74d4"
+  "gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
 }

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

@@ -25,7 +25,7 @@ export const ArrayDataProviderMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__dataProviderOrItemsChanged(dataProvider, items, isAttached, _filters, _sorters, items.*)'];
+      return ['__dataProviderOrItemsChanged(dataProvider, items, isAttached, items.*)'];
     }
 
     /** @private */
@@ -37,6 +37,18 @@ export const ArrayDataProviderMixin = (superClass) =>
       this.dataProvider = arrayDataProvider;
     }
 
+    /**
+     * @override
+     * @protected
+     */
+    _onDataProviderPageReceived() {
+      super._onDataProviderPageReceived();
+
+      if (this._arrayDataProvider) {
+        this.size = this._flatSize;
+      }
+    }
+
     /** @private */
     __dataProviderOrItemsChanged(dataProvider, items, isAttached) {
       if (!isAttached) {
@@ -59,7 +71,6 @@ export const ArrayDataProviderMixin = (superClass) =>
         } else if (this._arrayDataProvider.__items === items) {
           // The items array was modified
           this.clearCache();
-          this.size = this._flatSize;
         } else {
           // The items array was replaced
           this.__setArrayDataProvider(items);

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

@@ -19,8 +19,6 @@ export declare function GridSelectionColumnBaseMixin<TItem, T extends Constructo
  * Web component-specific selection state updates must be implemented in the
  * `<vaadin-grid-selection-column>` itself, by overriding the protected methods
  * provided by this mixin.
- *
- * @polymerMixin
  */
 export declare class GridSelectionColumnBaseMixinClass<TItem> {
   /**

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

@@ -7,6 +7,7 @@ import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-bas
 
 /**
  * @polymerMixin
+ * @mixes GridSelectionColumnBaseMixin
  */
 export const GridSelectionColumnMixin = (superClass) =>
   class extends GridSelectionColumnBaseMixin(superClass) {

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

@@ -104,61 +104,45 @@ export const SortMixin = (superClass) =>
         return;
       }
 
-      this._sorters = this._sorters.filter((sorter) => sortersToRemove.indexOf(sorter) < 0);
-      if (this.multiSort) {
-        this.__updateSortOrders();
-      }
+      this._sorters = this._sorters.filter((sorter) => !sortersToRemove.includes(sorter));
       this.__applySorters();
     }
 
     /** @private */
     __updateSortOrders() {
-      this._sorters.forEach((sorter, index) => {
-        sorter._order = this._sorters.length > 1 ? index : null;
+      this._sorters.forEach((sorter) => {
+        sorter._order = null;
       });
-    }
-
-    /** @private */
-    __appendSorter(sorter) {
-      if (!sorter.direction) {
-        this._removeArrayItem(this._sorters, sorter);
-      } else if (!this._sorters.includes(sorter)) {
-        this._sorters.push(sorter);
-      }
 
-      this.__updateSortOrders();
-    }
-
-    /** @private */
-    __prependSorter(sorter) {
-      this._removeArrayItem(this._sorters, sorter);
-      if (sorter.direction) {
-        this._sorters.unshift(sorter);
+      const activeSorters = this._getActiveSorters();
+      if (activeSorters.length > 1) {
+        activeSorters.forEach((sorter, index) => {
+          sorter._order = index;
+        });
       }
-      this.__updateSortOrders();
     }
 
     /** @private */
     __updateSorter(sorter, shiftClick, fromSorterClick) {
-      if (!sorter.direction && this._sorters.indexOf(sorter) === -1) {
+      if (!sorter.direction && !this._sorters.includes(sorter)) {
         return;
       }
 
       sorter._order = null;
 
+      const restSorters = this._sorters.filter((s) => s !== sorter);
       if (
         (this.multiSort && (!this.multiSortOnShiftClick || !fromSorterClick)) ||
         (this.multiSortOnShiftClick && shiftClick)
       ) {
         if (this.multiSortPriority === 'append') {
-          this.__appendSorter(sorter);
+          this._sorters = [...restSorters, sorter];
         } else {
-          this.__prependSorter(sorter);
+          this._sorters = [sorter, ...restSorters];
         }
       } else if (sorter.direction || this.multiSortOnShiftClick) {
-        const otherSorters = this._sorters.filter((s) => s !== sorter);
         this._sorters = sorter.direction ? [sorter] : [];
-        otherSorters.forEach((sorter) => {
+        restSorters.forEach((sorter) => {
           sorter._order = null;
           sorter.direction = null;
         });
@@ -167,6 +151,8 @@ export const SortMixin = (superClass) =>
 
     /** @private */
     __applySorters() {
+      this.__updateSortOrders();
+
       if (
         this.dataProvider &&
         // No need to clear cache if sorters didn't change and grid is attached
@@ -181,24 +167,24 @@ export const SortMixin = (superClass) =>
       this._previousSorters = this._mapSorters();
     }
 
+    /**
+     * @type {GridSorterDefinition[]}
+     * @protected
+     */
+    _getActiveSorters() {
+      return this._sorters.filter((sorter) => sorter.direction && sorter.isConnected);
+    }
+
     /**
      * @return {!Array<!GridSorterDefinition>}
      * @protected
      */
     _mapSorters() {
-      return this._sorters.map((sorter) => {
+      return this._getActiveSorters().map((sorter) => {
         return {
           path: sorter.path,
           direction: sorter.direction,
         };
       });
     }
-
-    /** @private */
-    _removeArrayItem(array, item) {
-      const index = array.indexOf(item);
-      if (index > -1) {
-        array.splice(index, 1);
-      }
-    }
   };

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

@@ -101,12 +101,6 @@ export const GridSorterMixin = (superClass) =>
           value: null,
           sync: true,
         },
-
-        /** @private */
-        _isConnected: {
-          type: Boolean,
-          observer: '__isConnectedChanged',
-        },
       };
     }
 
@@ -123,16 +117,21 @@ export const GridSorterMixin = (superClass) =>
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
-      this._isConnected = true;
+      if (this._grid) {
+        this._grid.__applySorters();
+      } else {
+        this.__dispatchSorterChangedEvenIfPossible();
+      }
     }
 
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      this._isConnected = false;
 
       if (!this.parentNode && this._grid) {
         this._grid.__removeSorters([this]);
+      } else if (this._grid) {
+        this._grid.__applySorters();
       }
     }
 
@@ -141,18 +140,9 @@ export const GridSorterMixin = (superClass) =>
       this.__dispatchSorterChangedEvenIfPossible();
     }
 
-    /** @private */
-    __isConnectedChanged(newValue, oldValue) {
-      if (oldValue === false) {
-        return;
-      }
-
-      this.__dispatchSorterChangedEvenIfPossible();
-    }
-
     /** @private */
     __dispatchSorterChangedEvenIfPossible() {
-      if (this.path === undefined || this.direction === undefined || !this._isConnected) {
+      if (this.path === undefined || this.direction === undefined || !this.isConnected) {
         return;
       }