@vaadin/multi-select-combo-box 24.3.0-alpha5 → 24.3.0-alpha6

package/package.json

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

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

@@ -14,6 +14,10 @@ registerStyles(
       display: flex;
       width: 100%;
     }
+
+    :host([all-chips-visible]) #wrapper {
+      flex-wrap: wrap;
+    }
   `,
   {
     moduleId: 'vaadin-multi-select-combo-box-container-styles',
@@ -49,6 +53,20 @@ class MultiSelectComboBoxContainer extends InputContainer {
     }
     return memoizedTemplate;
   }
+
+  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
+       */
+      allChipsVisible: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
 }
 
 defineCustomElement(MultiSelectComboBoxContainer);

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

@@ -60,6 +60,15 @@ 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 +106,14 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
         notify: true,
       },
 
+      /**
+       * A subset of items to be shown at the top of the overlay.
+       */
+      topGroup: {
+        type: Array,
+        observer: '_topGroupChanged',
+      },
+
       _target: {
         type: Object,
       },
@@ -140,6 +157,42 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     this._toggleElement = this.querySelector('.toggle-button');
   }
 
+  /**
+   * Override combo-box method to group selected
+   * items at the top of the overlay.
+   *
+   * @protected
+   * @override
+   */
+  _setDropdownItems(items) {
+    if (this.readonly || !this.groupSelectedItems) {
+      this._dropdownItems = items;
+      return;
+    }
+
+    if (this.topGroup) {
+      const filteredTopItems = [];
+      const filteredItems = [];
+
+      (items || []).forEach((item) => {
+        if (this.topGroup.some((selectedItem) => this._getItemValue(item) === this._getItemValue(selectedItem))) {
+          filteredTopItems.push(item);
+        } else {
+          filteredItems.push(item);
+        }
+      });
+
+      this._dropdownItems = [...filteredTopItems, ...filteredItems];
+    }
+  }
+
+  /** @private */
+  _topGroupChanged(topGroup) {
+    if (topGroup) {
+      this._setDropdownItems(this.filteredItems);
+    }
+  }
+
   /**
    * Override combo-box method to set correct owner for using by item renderers.
    * This needs to be done before the scroller gets added to the DOM to ensure
@@ -172,9 +225,9 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
         this.close();
       } else {
         // Keep selected item focused after committing on Enter.
-        const focusedItem = this.filteredItems[this._focusedIndex];
+        const focusedItem = this._dropdownItems[this._focusedIndex];
         this._commitValue();
-        this._focusedIndex = this.filteredItems.indexOf(focusedItem);
+        this._focusedIndex = this._dropdownItems.indexOf(focusedItem);
       }
 
       return;

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

@@ -171,6 +171,14 @@ 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 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
+   */
+  allChipsVisible: boolean;
+
   /**
    * When true, the user can input a value that is not present in the items list.
    * @attr {boolean} allow-custom-value
@@ -209,6 +217,12 @@ 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.

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

@@ -45,6 +45,14 @@ const multiSelectComboBox = css`
     flex-basis: 0;
     padding: 0;
   }
+
+  :host([all-chips-visible]) #chips {
+    display: contents;
+  }
+
+  :host([all-chips-visible]) [class$='container'] {
+    width: fit-content;
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
@@ -165,6 +173,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           size="{{size}}"
           filtered-items="[[__effectiveFilteredItems]]"
           selected-items="[[selectedItems]]"
+          group-selected-items="[[groupSelectedItems]]"
+          top-group="[[_topGroup]]"
           opened="{{opened}}"
           renderer="[[renderer]]"
           theme$="[[_theme]]"
@@ -175,6 +185,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         >
           <vaadin-multi-select-combo-box-container
             part="input-field"
+            all-chips-visible="[[allChipsVisible]]"
             readonly="[[readonly]]"
             disabled="[[disabled]]"
             invalid="[[invalid]]"
@@ -211,6 +222,19 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   static get properties() {
     return {
+      /**
+       * 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
+       */
+      allChipsVisible: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_allChipsVisibleChanged',
+      },
+
       /**
        * Set true to prevent the overlay from opening automatically.
        * @attr {boolean} auto-open-disabled
@@ -228,6 +252,15 @@ 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.
@@ -464,6 +497,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       _lastFilter: {
         type: String,
       },
+
+      /** @private */
+      _topGroup: {
+        type: Array,
+      },
     };
   }
 
@@ -471,6 +509,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     return [
       '_selectedItemsChanged(selectedItems, selectedItems.*)',
       '__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)',
+      '__updateTopGroup(groupSelectedItems, selectedItems, opened)',
     ];
   }
 
@@ -657,6 +696,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._delegateAttribute(name, value);
   }
 
+  /** @private */
+  _allChipsVisibleChanged(visible, oldVisible) {
+    if (visible || oldVisible) {
+      this.__updateChips();
+    }
+  }
+
   /**
    * Setting clear button visible reduces total space available
    * for rendering chips, and making it hidden increases it.
@@ -823,6 +869,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
   }
 
+  /** @private */
+  __updateTopGroup(groupSelectedItems, selectedItems, opened) {
+    if (!groupSelectedItems) {
+      this._topGroup = [];
+    } else if (!opened) {
+      this._topGroup = [...selectedItems];
+    }
+  }
+
   /** @private */
   __createChip(item) {
     const chip = document.createElement('vaadin-multi-select-combo-box-chip');
@@ -892,7 +947,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       const chip = this.__createChip(items[i]);
       this.insertBefore(chip, refNode);
 
-      if (this.$.chips.clientWidth > remainingWidth) {
+      // If all the chips are visible, no need to measure remaining width
+      if (!this.allChipsVisible && this.$.chips.clientWidth > remainingWidth) {
         chip.remove();
         break;
       }

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

@@ -48,6 +48,16 @@ registerStyles(
   { moduleId: 'lumo-multi-select-combo-box-overlay' },
 );
 
+registerStyles(
+  'vaadin-multi-select-combo-box-container',
+  css`
+    :host([all-chips-visible]) {
+      padding-block: var(--lumo-space-xs);
+    }
+  `,
+  { moduleId: 'lumo-multi-select-combo-box-container' },
+);
+
 const multiSelectComboBox = css`
   :host([has-value]) {
     padding-inline-start: 0;
@@ -67,17 +77,25 @@ const multiSelectComboBox = css`
     mask-image: none;
   }
 
+  :host([all-chips-visible]) ::slotted([slot='chip']) {
+    margin-block: calc(var(--lumo-space-xs) / 2);
+  }
+
   ::slotted([slot='chip']:not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
 
+  :host([all-chips-visible]) ::slotted([slot='input']) {
+    min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs));
+  }
+
   ::slotted([slot='chip']:not(:last-of-type)),
   ::slotted([slot='overflow']:not(:last-of-type)) {
     margin-inline-end: var(--lumo-space-xs);
   }
 
   ::slotted([slot='chip'][focused]) {
-    background-color: var(--lumo-primary-color);
+    background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
     color: var(--lumo-primary-contrast-color);
   }
 

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

@@ -56,6 +56,11 @@ const multiSelectComboBox = css`
     padding: 0 0.5rem;
   }
 
+  :host([all-chips-visible]) ::slotted([slot='chip']) {
+    margin-top: 0.25rem;
+    align-self: flex-start;
+  }
+
   ::slotted([slot='chip']:not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }

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-alpha5",
+  "version": "24.3.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -197,6 +197,17 @@
                 ]
               }
             },
+            {
+              "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.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "auto-open-disabled",
               "description": "Set true to prevent the overlay from opening automatically.",
@@ -208,6 +219,17 @@
                 ]
               }
             },
+            {
+              "name": "group-selected-items",
+              "description": "Set to true to group selected items at the top of the overlay.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "item-label-path",
               "description": "The item property used for a visual representation of the item.",
@@ -508,6 +530,17 @@
                   ]
                 }
               },
+              {
+                "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.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "autoOpenDisabled",
                 "description": "Set true to prevent the overlay from opening automatically.",
@@ -519,6 +552,17 @@
                   ]
                 }
               },
+              {
+                "name": "groupSelectedItems",
+                "description": "Set to true to group selected items at the top of the overlay.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "items",
                 "description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",

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-alpha5",
+  "version": "24.3.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -68,6 +68,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "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.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?autoOpenDisabled",
               "description": "Set true to prevent the overlay from opening automatically.",
@@ -75,6 +82,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?groupSelectedItems",
+              "description": "Set to true to group selected items at the top of the overlay.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?loading",
               "description": "True when loading items from the data provider, false otherwise.",