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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.3.0-alpha8",
+  "version": "24.3.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-alpha8",
-    "@vaadin/combo-box": "24.3.0-alpha8",
-    "@vaadin/component-base": "24.3.0-alpha8",
-    "@vaadin/field-base": "24.3.0-alpha8",
-    "@vaadin/input-container": "24.3.0-alpha8",
-    "@vaadin/item": "24.3.0-alpha8",
-    "@vaadin/lit-renderer": "24.3.0-alpha8",
-    "@vaadin/overlay": "24.3.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha8"
+    "@vaadin/a11y-base": "24.3.0-beta1",
+    "@vaadin/combo-box": "24.3.0-beta1",
+    "@vaadin/component-base": "24.3.0-beta1",
+    "@vaadin/field-base": "24.3.0-beta1",
+    "@vaadin/input-container": "24.3.0-beta1",
+    "@vaadin/item": "24.3.0-beta1",
+    "@vaadin/lit-renderer": "24.3.0-beta1",
+    "@vaadin/overlay": "24.3.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.3.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "03b2f1c55aadb86b15ad96c7e7dcb059e5fc0604"
+  "gitHead": "a197041861e1bbf8d3e966d893648f5dd462b036"
 }

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

@@ -15,7 +15,7 @@ registerStyles(
       width: 100%;
     }
 
-    :host([all-chips-visible]) #wrapper {
+    :host([auto-expand-vertically]) #wrapper {
       flex-wrap: wrap;
     }
   `,
@@ -57,11 +57,12 @@ class MultiSelectComboBoxContainer extends InputContainer {
   static get properties() {
     return {
       /**
-       * Set true to not collapse selected items chips into the overflow
-       * chip and instead always show them, causing input field to grow.
-       * @attr {boolean} all-chips-visible
+       * Set to true to not collapse selected items chips into the overflow
+       * chip and instead always expand vertically, causing input field to
+       * wrap into multiple lines when width is limited.
+       * @attr {boolean} auto-expand-vertically
        */
-      allChipsVisible: {
+      autoExpandVertically: {
         type: Boolean,
         reflectToAttribute: true,
       },

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

@@ -60,15 +60,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
         notify: true,
       },
 
-      /**
-       * Set to true to group selected items at the top of the overlay.
-       * @attr {boolean} group-selected-items
-       */
-      groupSelectedItems: {
-        type: Boolean,
-        value: false,
-      },
-
       /**
        * When set to `true`, "loading" attribute is set
        * on the host and the overlay element.
@@ -97,6 +88,15 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
         value: () => [],
       },
 
+      /**
+       * Set to true to group selected items at the top of the overlay.
+       * @attr {boolean} selected-items-on-top
+       */
+      selectedItemsOnTop: {
+        type: Boolean,
+        value: false,
+      },
+
       /**
        * Last input value entered by the user before value is updated.
        * Used to store `filter` property value before clearing it.
@@ -165,25 +165,27 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   _setDropdownItems(items) {
-    if (this.readonly || !this.groupSelectedItems) {
-      this._dropdownItems = items;
+    if (this.readonly) {
+      this._dropdownItems = this.selectedItems;
       return;
     }
 
-    if (this.topGroup) {
-      const filteredTopItems = [];
-      const filteredItems = [];
+    if (this.filter || !this.selectedItemsOnTop) {
+      this._dropdownItems = items;
+      return;
+    }
 
-      (items || []).forEach((item) => {
-        if (this.topGroup.some((selectedItem) => this._getItemValue(item) === this._getItemValue(selectedItem))) {
-          filteredTopItems.push(item);
-        } else {
-          filteredItems.push(item);
-        }
-      });
+    if (items && items.length && this.topGroup && this.topGroup.length) {
+      // Filter out items included to the top group.
+      const filteredItems = items.filter(
+        (item) => this._comboBox._findIndex(item, this.topGroup, this.itemIdPath) === -1,
+      );
 
-      this._dropdownItems = [...filteredTopItems, ...filteredItems];
+      this._dropdownItems = this.topGroup.concat(filteredItems);
+      return;
     }
+
+    this._dropdownItems = items;
   }
 
   /** @private */
@@ -204,6 +206,8 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   _initScroller() {
     const comboBox = this.getRootNode().host;
 
+    this._comboBox = comboBox;
+
     super._initScroller(comboBox);
   }
 

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

@@ -172,13 +172,20 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
+  /**
+   * Set to true to auto expand horizontally, causing input field to
+   * grow until max width is reached.
+   * @attr {boolean} auto-expand-horizontally
+   */
+  autoExpandHorizontally: boolean;
+
   /**
    * Set to true to not collapse selected items chips into the overflow
-   * chip and instead always show them all, causing input field to grow
-   * and wrap into multiple lines when width is limited.
-   * @attr {boolean} all-chips-visible
+   * chip and instead always expand vertically, causing input field to
+   * wrap into multiple lines when width is limited.
+   * @attr {boolean} auto-expand-vertically
    */
-  allChipsVisible: boolean;
+  autoExpandVertically: boolean;
 
   /**
    * When true, the user can input a value that is not present in the items list.
@@ -218,12 +225,6 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   filter: string;
 
-  /**
-   * Set to true to group selected items at the top of the overlay.
-   * @attr {boolean} group-selected-items
-   */
-  groupSelectedItems: boolean;
-
   /**
    * A full set of items to filter the visible options from.
    * The items can be of either `String` or `Object` type.
@@ -322,6 +323,12 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   selectedItems: TItem[];
 
+  /**
+   * Set to true to group selected items at the top of the overlay.
+   * @attr {boolean} selected-items-on-top
+   */
+  selectedItemsOnTop: boolean;
+
   /**
    * Total number of items.
    */

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

@@ -47,12 +47,12 @@ const multiSelectComboBox = css`
     padding: 0;
   }
 
-  :host([all-chips-visible]) #chips {
+  :host([auto-expand-vertically]) #chips {
     display: contents;
   }
 
-  :host([all-chips-visible]) [class$='container'] {
-    width: fit-content;
+  :host([auto-expand-horizontally]) [class$='container'] {
+    width: auto;
   }
 `;
 
@@ -175,7 +175,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           size="{{size}}"
           filtered-items="[[__effectiveFilteredItems]]"
           selected-items="[[selectedItems]]"
-          group-selected-items="[[groupSelectedItems]]"
+          selected-items-on-top="[[selectedItemsOnTop]]"
           top-group="[[_topGroup]]"
           opened="{{opened}}"
           renderer="[[renderer]]"
@@ -187,7 +187,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         >
           <vaadin-multi-select-combo-box-container
             part="input-field"
-            all-chips-visible="[[allChipsVisible]]"
+            auto-expand-vertically="[[autoExpandVertically]]"
             readonly="[[readonly]]"
             disabled="[[disabled]]"
             invalid="[[invalid]]"
@@ -224,17 +224,29 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   static get properties() {
     return {
+      /**
+       * Set to true to auto expand horizontally, causing input field to
+       * grow until max width is reached.
+       * @attr {boolean} auto-expand-horizontally
+       */
+      autoExpandHorizontally: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_autoExpandHorizontallyChanged',
+      },
+
       /**
        * Set to true to not collapse selected items chips into the overflow
-       * chip and instead always show them all, causing input field to grow
-       * and wrap into multiple lines when width is limited.
-       * @attr {boolean} all-chips-visible
+       * chip and instead always expand vertically, causing input field to
+       * wrap into multiple lines when width is limited.
+       * @attr {boolean} auto-expand-vertically
        */
-      allChipsVisible: {
+      autoExpandVertically: {
         type: Boolean,
         value: false,
         reflectToAttribute: true,
-        observer: '_allChipsVisibleChanged',
+        observer: '_autoExpandVerticallyChanged',
       },
 
       /**
@@ -254,15 +266,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         value: false,
       },
 
-      /**
-       * Set to true to group selected items at the top of the overlay.
-       * @attr {boolean} group-selected-items
-       */
-      groupSelectedItems: {
-        type: Boolean,
-        value: false,
-      },
-
       /**
        * A full set of items to filter the visible options from.
        * The items can be of either `String` or `Object` type.
@@ -465,6 +468,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        */
       filteredItems: Array,
 
+      /**
+       * Set to true to group selected items at the top of the overlay.
+       * @attr {boolean} selected-items-on-top
+       */
+      selectedItemsOnTop: {
+        type: Boolean,
+        value: false,
+      },
+
       /** @private */
       value: {
         type: String,
@@ -511,7 +523,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     return [
       '_selectedItemsChanged(selectedItems, selectedItems.*)',
       '__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)',
-      '__updateTopGroup(groupSelectedItems, selectedItems, opened)',
+      '__updateTopGroup(selectedItemsOnTop, selectedItems, opened)',
     ];
   }
 
@@ -699,8 +711,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   /** @private */
-  _allChipsVisibleChanged(visible, oldVisible) {
-    if (visible || oldVisible) {
+  _autoExpandHorizontallyChanged(autoExpand, oldAutoExpand) {
+    if (autoExpand || oldAutoExpand) {
+      this.__updateChips();
+    }
+  }
+
+  /** @private */
+  _autoExpandVerticallyChanged(autoExpand, oldAutoExpand) {
+    if (autoExpand || oldAutoExpand) {
       this.__updateChips();
     }
   }
@@ -783,6 +802,10 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
     // Update selected for dropdown items
     this.requestContentUpdate();
+
+    if (this.opened) {
+      this.$.comboBox.$.overlay._updateOverlayWidth();
+    }
   }
 
   /** @private */
@@ -872,8 +895,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   /** @private */
-  __updateTopGroup(groupSelectedItems, selectedItems, opened) {
-    if (!groupSelectedItems) {
+  __updateTopGroup(selectedItemsOnTop, selectedItems, opened) {
+    if (!selectedItemsOnTop) {
       this._topGroup = [];
     } else if (!opened) {
       this._topGroup = [...selectedItems];
@@ -946,13 +969,51 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
     const chipMinWidth = parseInt(getComputedStyle(this).getPropertyValue('--_chip-min-width'));
 
+    if (this.autoExpandHorizontally) {
+      const chips = [];
+
+      // First, add all chips to make the field fully expand
+      for (let i = items.length - 1, refNode = null; i >= 0; i--) {
+        const chip = this.__createChip(items[i]);
+        this.insertBefore(chip, refNode);
+        refNode = chip;
+        chips.unshift(chip);
+      }
+
+      const overflowItems = [];
+      const availableWidth = this._inputField.$.wrapper.clientWidth - this.$.chips.clientWidth;
+
+      // When auto expanding vertically, no need to measure width
+      if (!this.autoExpandVertically && availableWidth < inputWidth) {
+        // Always show at least last item as a chip
+        while (chips.length > 1) {
+          const lastChip = chips.pop();
+          lastChip.remove();
+          overflowItems.unshift(items.pop());
+
+          // Remove chips until there is enough width for the input element to fit
+          const neededWidth = overflowItems.length > 0 ? inputWidth + this.__getOverflowWidth() : inputWidth;
+          if (this._inputField.$.wrapper.clientWidth - this.$.chips.clientWidth >= neededWidth) {
+            break;
+          }
+        }
+
+        if (chips.length === 1) {
+          chips[0].style.maxWidth = `${Math.max(chipMinWidth, remainingWidth)}px`;
+        }
+      }
+
+      this._overflowItems = overflowItems;
+      return;
+    }
+
     // Add chips until remaining width is exceeded
     for (let i = items.length - 1, refNode = null; i >= 0; i--) {
       const chip = this.__createChip(items[i]);
       this.insertBefore(chip, refNode);
 
-      // If all the chips are visible, no need to measure remaining width
-      if (!this.allChipsVisible && this.$.chips.clientWidth > remainingWidth) {
+      // When auto expanding vertically, no need to measure remaining width
+      if (!this.autoExpandVertically && this.$.chips.clientWidth > remainingWidth) {
         // Always show at least last selected item as a chip
         if (refNode === null) {
           chip.style.maxWidth = `${Math.max(chipMinWidth, remainingWidth)}px`;

package/theme/lumo/vaadin-multi-select-combo-box-styles.js

@@ -51,7 +51,7 @@ registerStyles(
 registerStyles(
   'vaadin-multi-select-combo-box-container',
   css`
-    :host([all-chips-visible]) {
+    :host([auto-expand-vertically]) {
       padding-block: var(--lumo-space-xs);
     }
   `,
@@ -67,6 +67,10 @@ const multiSelectComboBox = css`
     caret-color: var(--lumo-body-text-color) !important;
   }
 
+  [part='label'] {
+    flex-shrink: 0;
+  }
+
   /* Override input-container styles */
   ::slotted([slot='chip']),
   ::slotted([slot='overflow']) {
@@ -77,7 +81,7 @@ const multiSelectComboBox = css`
     mask-image: none;
   }
 
-  :host([all-chips-visible]) ::slotted([slot='chip']) {
+  :host([auto-expand-vertically]) ::slotted([slot='chip']) {
     margin-block: calc(var(--lumo-space-xs) / 2);
   }
 
@@ -85,7 +89,7 @@ const multiSelectComboBox = css`
     padding-inline-end: 0;
   }
 
-  :host([all-chips-visible]) ::slotted([slot='input']) {
+  :host([auto-expand-vertically]) ::slotted([slot='input']) {
     min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs));
   }
 

package/theme/material/vaadin-multi-select-combo-box-styles.js

@@ -56,7 +56,7 @@ const multiSelectComboBox = css`
     padding: 0 0.5rem;
   }
 
-  :host([all-chips-visible]) ::slotted([slot='chip']) {
+  :host([auto-expand-vertically]) ::slotted([slot='chip']) {
     margin-top: 0.25rem;
     align-self: flex-start;
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.3.0-alpha8",
+  "version": "24.3.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -198,8 +198,8 @@
               }
             },
             {
-              "name": "all-chips-visible",
-              "description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always show them all, causing input field to grow\nand wrap into multiple lines when width is limited.",
+              "name": "auto-expand-horizontally",
+              "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
               "value": {
                 "type": [
                   "boolean",
@@ -209,8 +209,8 @@
               }
             },
             {
-              "name": "auto-open-disabled",
-              "description": "Set true to prevent the overlay from opening automatically.",
+              "name": "auto-expand-vertically",
+              "description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always expand vertically, causing input field to\nwrap into multiple lines when width is limited.",
               "value": {
                 "type": [
                   "boolean",
@@ -220,8 +220,8 @@
               }
             },
             {
-              "name": "group-selected-items",
-              "description": "Set to true to group selected items at the top of the overlay.",
+              "name": "auto-open-disabled",
+              "description": "Set true to prevent the overlay from opening automatically.",
               "value": {
                 "type": [
                   "boolean",
@@ -340,6 +340,17 @@
                 ]
               }
             },
+            {
+              "name": "selected-items-on-top",
+              "description": "Set to true to group selected items at the top of the overlay.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -531,8 +542,8 @@
                 }
               },
               {
-                "name": "allChipsVisible",
-                "description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always show them all, causing input field to grow\nand wrap into multiple lines when width is limited.",
+                "name": "autoExpandHorizontally",
+                "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
                 "value": {
                   "type": [
                     "boolean",
@@ -542,8 +553,8 @@
                 }
               },
               {
-                "name": "autoOpenDisabled",
-                "description": "Set true to prevent the overlay from opening automatically.",
+                "name": "autoExpandVertically",
+                "description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always expand vertically, causing input field to\nwrap into multiple lines when width is limited.",
                 "value": {
                   "type": [
                     "boolean",
@@ -553,8 +564,8 @@
                 }
               },
               {
-                "name": "groupSelectedItems",
-                "description": "Set to true to group selected items at the top of the overlay.",
+                "name": "autoOpenDisabled",
+                "description": "Set true to prevent the overlay from opening automatically.",
                 "value": {
                   "type": [
                     "boolean",
@@ -736,6 +747,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "selectedItemsOnTop",
+                "description": "Set to true to group selected items at the top of the overlay.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.3.0-alpha8",
+  "version": "24.3.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -69,22 +69,22 @@
               }
             },
             {
-              "name": "?allChipsVisible",
-              "description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always show them all, causing input field to grow\nand wrap into multiple lines when width is limited.",
+              "name": "?autoExpandHorizontally",
+              "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?autoOpenDisabled",
-              "description": "Set true to prevent the overlay from opening automatically.",
+              "name": "?autoExpandVertically",
+              "description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always expand vertically, causing input field to\nwrap into multiple lines when width is limited.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?groupSelectedItems",
-              "description": "Set to true to group selected items at the top of the overlay.",
+              "name": "?autoOpenDisabled",
+              "description": "Set true to prevent the overlay from opening automatically.",
               "value": {
                 "kind": "expression"
               }
@@ -110,6 +110,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?selectedItemsOnTop",
+              "description": "Set to true to group selected items at the top of the overlay.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".label",
               "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",