@vaadin/multi-select-combo-box 25.1.2 → 25.2.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.1.2",
+  "version": "25.2.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,23 +37,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.1.2",
-    "@vaadin/combo-box": "~25.1.2",
-    "@vaadin/component-base": "~25.1.2",
-    "@vaadin/field-base": "~25.1.2",
-    "@vaadin/input-container": "~25.1.2",
-    "@vaadin/item": "~25.1.2",
-    "@vaadin/lit-renderer": "~25.1.2",
-    "@vaadin/overlay": "~25.1.2",
-    "@vaadin/vaadin-themable-mixin": "~25.1.2",
+    "@vaadin/a11y-base": "25.2.0-alpha10",
+    "@vaadin/combo-box": "25.2.0-alpha10",
+    "@vaadin/component-base": "25.2.0-alpha10",
+    "@vaadin/field-base": "25.2.0-alpha10",
+    "@vaadin/input-container": "25.2.0-alpha10",
+    "@vaadin/item": "25.2.0-alpha10",
+    "@vaadin/lit-renderer": "25.2.0-alpha10",
+    "@vaadin/overlay": "25.2.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.1.2",
-    "@vaadin/chai-plugins": "~25.1.2",
-    "@vaadin/test-runner-commands": "~25.1.2",
+    "@vaadin/aura": "25.2.0-alpha10",
+    "@vaadin/chai-plugins": "25.2.0-alpha10",
+    "@vaadin/test-runner-commands": "25.2.0-alpha10",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.1.2",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "48e5dc507ac5eb8d34839be06cac652f1635fe1c"
+  "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
 }

package/src/vaadin-multi-select-combo-box-mixin.d.ts

@@ -12,6 +12,7 @@ import type { ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.j
 import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
 import type { ComboBoxDataProviderMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import type { ComboBoxItemsMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
+import type { ComboBoxScrollToIndexMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-scroll-to-index-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
@@ -45,6 +46,7 @@ export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HT
   Constructor<ComboBoxBaseMixinClass> &
   Constructor<ComboBoxDataProviderMixinClass<TItem>> &
   Constructor<ComboBoxItemsMixinClass<TItem>> &
+  Constructor<ComboBoxScrollToIndexMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -78,6 +80,14 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   autoExpandVertically: boolean;
 
+  /**
+   * Set to true to collapse all selected items chips into the overflow
+   * chip when they don't all fit, instead of showing as many as possible.
+   * Has no effect when `autoExpandVertically` is true.
+   * @attr {boolean} collapse-chips
+   */
+  collapseChips: boolean;
+
   /**
    * When true, the user can input a value that is not present in the items list.
    * @attr {boolean} allow-custom-value

package/src/vaadin-multi-select-combo-box-mixin.js

@@ -7,6 +7,7 @@ import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { ComboBoxDataProviderMixin } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxItemsMixin } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
+import { ComboBoxScrollToIndexMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroll-to-index-mixin.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
@@ -27,6 +28,7 @@ const DEFAULT_I18N = {
  * @polymerMixin
  * @mixes ComboBoxDataProviderMixin
  * @mixes ComboBoxItemsMixin
+ * @mixes ComboBoxScrollToIndexMixin
  * @mixes I18nMixin
  * @mixes InputControlMixin
  * @mixes ResizeMixin
@@ -34,7 +36,9 @@ const DEFAULT_I18N = {
 export const MultiSelectComboBoxMixin = (superClass) =>
   class MultiSelectComboBoxMixinClass extends I18nMixin(
     DEFAULT_I18N,
-    ComboBoxDataProviderMixin(ComboBoxItemsMixin(InputControlMixin(ResizeMixin(superClass)))),
+    ComboBoxScrollToIndexMixin(
+      ComboBoxDataProviderMixin(ComboBoxItemsMixin(InputControlMixin(ResizeMixin(superClass)))),
+    ),
   ) {
     static get properties() {
       return {
@@ -63,6 +67,19 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * Set to true to collapse all selected items chips into the overflow
+         * chip when they don't all fit, instead of showing as many as possible.
+         * Has no effect when `autoExpandVertically` is true.
+         * @attr {boolean} collapse-chips
+         */
+        collapseChips: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          sync: true,
+        },
+
         /**
          * A function used to generate CSS class names for dropdown
          * items and selected chips based on the item. The return
@@ -346,6 +363,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       const chipProps = [
         'autoExpandHorizontally',
         'autoExpandVertically',
+        'collapseChips',
         'disabled',
         'readonly',
         'clearButtonVisible',
@@ -483,7 +501,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __openedOrItemsChanged(opened, items, loading, keepOverlayOpened) {
       // Close the overlay if there are no items to display.
       // See https://github.com/vaadin/vaadin-combo-box/pull/964
-      this._overlayOpened = opened && (keepOverlayOpened || loading || !!(items && items.length));
+      this._overlayOpened = opened && (keepOverlayOpened || loading || !!items?.length);
     }
 
     /**
@@ -696,7 +714,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         return;
       }
 
-      if (items && items.length && this._topGroup && this._topGroup.length) {
+      if (items?.length && this._topGroup?.length) {
         // Filter out items included to the top group.
         const filteredItems = items.filter((item) => this._findIndex(item, this._topGroup, this.itemIdPath) === -1);
 
@@ -797,7 +815,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       if (index !== -1) {
         const lastFilter = this._lastFilter;
         // Do not unselect when manually typing and committing an already selected item.
-        if (lastFilter && lastFilter.toLowerCase() === itemLabel.toLowerCase()) {
+        if (lastFilter?.toLowerCase() === itemLabel.toLowerCase()) {
           this.__clearInternalValue();
           return;
         }
@@ -926,7 +944,9 @@ export const MultiSelectComboBoxMixin = (superClass) =>
 
       const inputWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
 
-      if (this.autoExpandHorizontally) {
+      if (this.collapseChips) {
+        this._overflowItems = this.__updateChipsCollapsed(this.selectedItems, inputWidth);
+      } else if (this.autoExpandHorizontally) {
         this._overflowItems = this.__updateChipsHorizontalExpand(this.selectedItems, inputWidth);
       } else {
         this._overflowItems = this.__updateChipsDefault(this.selectedItems, inputWidth);
@@ -934,15 +954,35 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /** @private */
-    __updateChipsHorizontalExpand(items, inputWidth) {
-      // Add all chips to make the field fully expand
+    __renderAllChips(items, inputWidth) {
       const chips = items.map((item) => {
         const chip = this.__createChip(item);
         this.appendChild(chip);
         return chip;
       });
 
-      if (this.__getWrapperWidth() - this.$.chips.clientWidth >= inputWidth) {
+      const allChipsFit = this.__getWrapperWidth() - this.$.chips.clientWidth >= inputWidth;
+      return { chips, allChipsFit };
+    }
+
+    /** @private */
+    __updateChipsCollapsed(items, inputWidth) {
+      const { chips, allChipsFit } = this.__renderAllChips(items, inputWidth);
+
+      if (allChipsFit) {
+        return [];
+      }
+
+      // Not enough space: remove all chips, collapse everything to overflow
+      chips.forEach((chip) => chip.remove());
+      return items.slice();
+    }
+
+    /** @private */
+    __updateChipsHorizontalExpand(items, inputWidth) {
+      const { chips, allChipsFit } = this.__renderAllChips(items, inputWidth);
+
+      if (allChipsFit) {
         return [];
       }
 
@@ -1298,10 +1338,4 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       // and keep the overlay opened when clicking a chip.
       event.preventDefault();
     }
-
-    /**
-     * Fired when the user sets a custom value.
-     * @event custom-value-set
-     * @param {string} detail the custom value
-     */
   };