@vaadin/multi-select-combo-box 25.2.0-alpha9 → 25.2.0-beta2

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

@@ -78,6 +78,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

@@ -5,6 +5,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 { ComboBoxFocusIndexMixin } from '@vaadin/combo-box/src/vaadin-combo-box-focus-index-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 { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
@@ -23,18 +24,9 @@ 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)))),
+    ComboBoxFocusIndexMixin(ComboBoxDataProviderMixin(ComboBoxItemsMixin(InputControlMixin(ResizeMixin(superClass))))),
   ) {
     static get properties() {
       return {
@@ -63,6 +55,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 +223,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 +355,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       const chipProps = [
         'autoExpandHorizontally',
         'autoExpandVertically',
+        'collapseChips',
         'disabled',
         'readonly',
         'clearButtonVisible',
@@ -483,7 +493,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 +706,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);
 
@@ -717,6 +727,18 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       // when the user types in a filter query.
       const focusedItem = oldItems ? oldItems[this._focusedIndex] : null;
 
+      // When both the previously-focused entry and the new entry at the
+      // same index are placeholders (e.g. the Flow connector mid-scroll
+      // re-pushing `__setDropdownItems`), preserve `_focusedIndex` until
+      // a follow-up call lands a real item at that position.
+      if (
+        oldItems &&
+        oldItems[this._focusedIndex] instanceof ComboBoxPlaceholder &&
+        newItems[this._focusedIndex] instanceof ComboBoxPlaceholder
+      ) {
+        return;
+      }
+
       // Try to first set focus on the item that had been focused before `newItems` were updated
       // if it is still present in the `newItems` array. Otherwise, set the focused index
       // depending on the selected item or the filter query.
@@ -797,7 +819,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 +948,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 +958,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 +1342,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)))),