@vaadin/multi-select-combo-box 25.2.0-alpha8 → 25.2.0-beta1

package/package.json

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2026 Vaadin Ltd.
+ * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ComboBoxDefaultItem, ComboBoxItemMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';

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

@@ -35,9 +35,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement vaadin-multi-select-combo-box-item
- * @mixes ComboBoxItemMixin
- * @mixes ThemableMixin
- * @mixes DirMixin
  * @private
  */
 export class MultiSelectComboBoxItem extends ComboBoxItemMixin(

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';
@@ -23,18 +24,11 @@ const DEFAULT_I18N = {
   total: '{count} items selected',
 };
 
-/**
- * @polymerMixin
- * @mixes ComboBoxDataProviderMixin
- * @mixes ComboBoxItemsMixin
- * @mixes I18nMixin
- * @mixes InputControlMixin
- * @mixes ResizeMixin
- */
 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 +57,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
@@ -218,6 +225,10 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       ];
     }
 
+    static get defaultI18n() {
+      return DEFAULT_I18N;
+    }
+
     /**
      * The object used to localize this component. To change the default
      * localization, replace this with an object that provides all properties, or
@@ -346,6 +357,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       const chipProps = [
         'autoExpandHorizontally',
         'autoExpandVertically',
+        'collapseChips',
         'disabled',
         'readonly',
         'clearButtonVisible',
@@ -483,7 +495,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 +708,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 +809,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 +938,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 +948,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 +1332,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
-     */
   };

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

@@ -19,10 +19,6 @@ import { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-c
  *
  * @customElement vaadin-multi-select-combo-box-overlay
  * @extends HTMLElement
- * @mixes ComboBoxOverlayMixin
- * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
  * @private
  */
 class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(

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

@@ -15,7 +15,6 @@ import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-
  *
  * @customElement vaadin-multi-select-combo-box-scroller
  * @extends HTMLElement
- * @mixes ComboBoxScrollerMixin
  * @private
  */
 export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {

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

@@ -98,9 +98,6 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  *
  * @customElement vaadin-multi-select-combo-box
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes MultiSelectComboBoxMixin
  */
 class MultiSelectComboBox extends MultiSelectComboBoxMixin(
   ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),