@vaadin/multi-select-combo-box 25.1.0-beta1 → 25.1.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.1.0-beta1",
+  "version": "25.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -37,29 +37,29 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-beta1",
-    "@vaadin/combo-box": "25.1.0-beta1",
-    "@vaadin/component-base": "25.1.0-beta1",
-    "@vaadin/field-base": "25.1.0-beta1",
-    "@vaadin/input-container": "25.1.0-beta1",
-    "@vaadin/item": "25.1.0-beta1",
-    "@vaadin/lit-renderer": "25.1.0-beta1",
-    "@vaadin/overlay": "25.1.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-beta1",
+    "@vaadin/a11y-base": "25.1.0-beta3",
+    "@vaadin/combo-box": "25.1.0-beta3",
+    "@vaadin/component-base": "25.1.0-beta3",
+    "@vaadin/field-base": "25.1.0-beta3",
+    "@vaadin/input-container": "25.1.0-beta3",
+    "@vaadin/item": "25.1.0-beta3",
+    "@vaadin/lit-renderer": "25.1.0-beta3",
+    "@vaadin/overlay": "25.1.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.1.0-beta1",
-    "@vaadin/chai-plugins": "25.1.0-beta1",
-    "@vaadin/test-runner-commands": "25.1.0-beta1",
+    "@vaadin/aura": "25.1.0-beta3",
+    "@vaadin/chai-plugins": "25.1.0-beta3",
+    "@vaadin/test-runner-commands": "25.1.0-beta3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-beta1",
-    "sinon": "^21.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
+    "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
+  "gitHead": "4251850231a42298fda23b83928da588831cdb5d"
 }

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

@@ -239,7 +239,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
      *   total: '{count} items selected',
      * }
      * ```
-     * @return {!MultiSelectComboBoxI18n}
+     * @type {!MultiSelectComboBoxI18n}
      */
     get i18n() {
       return super.i18n;
@@ -872,6 +872,11 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       return chip;
     }
 
+    /** @private */
+    __getWrapperWidth() {
+      return this._inputField.$.wrapper.clientWidth;
+    }
+
     /** @private */
     __getOverflowWidth() {
       const chip = this._overflow;
@@ -905,82 +910,94 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         chip.remove();
       });
 
-      const items = [...this.selectedItems];
+      if (this.selectedItems.length === 0) {
+        this._overflowItems = [];
+        return;
+      }
+
+      // When auto expanding vertically, create all chips without overflow
+      if (this.autoExpandVertically) {
+        this.selectedItems.forEach((item) => {
+          this.appendChild(this.__createChip(item));
+        });
+        this._overflowItems = [];
+        return;
+      }
 
-      // Detect available remaining width for chips
-      const totalWidth = this._inputField.$.wrapper.clientWidth;
       const inputWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
 
-      let remainingWidth = totalWidth - inputWidth;
+      if (this.autoExpandHorizontally) {
+        this._overflowItems = this.__updateChipsHorizontalExpand(this.selectedItems, inputWidth);
+      } else {
+        this._overflowItems = this.__updateChipsDefault(this.selectedItems, inputWidth);
+      }
+    }
 
-      if (items.length > 1) {
-        remainingWidth -= this.__getOverflowWidth();
+    /** @private */
+    __updateChipsHorizontalExpand(items, inputWidth) {
+      // Add all chips to make the field fully expand
+      const chips = items.map((item) => {
+        const chip = this.__createChip(item);
+        this.appendChild(chip);
+        return chip;
+      });
+
+      if (this.__getWrapperWidth() - this.$.chips.clientWidth >= inputWidth) {
+        return [];
       }
 
-      const chipMinWidth = parseInt(getComputedStyle(this).getPropertyValue('--_chip-min-width'));
+      // Remove chips from the end until there is enough width for the input element to fit,
+      // keeping at least one chip visible
+      const overflowWidth = this.__getOverflowWidth();
+      let visibleCount = chips.length;
 
-      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);
+      while (visibleCount > 1) {
+        visibleCount -= 1;
+        chips[visibleCount].remove();
+
+        if (this.__getWrapperWidth() - this.$.chips.clientWidth >= inputWidth + overflowWidth) {
+          break;
         }
+      }
 
-        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 (visibleCount === 1) {
+        const chipMinWidth = parseInt(getComputedStyle(this).getPropertyValue('--_chip-min-width'));
+        const remainingWidth = this.__getWrapperWidth() - inputWidth - overflowWidth;
+        chips[0].style.maxWidth = `${Math.max(chipMinWidth, remainingWidth)}px`;
+      }
 
-          if (chips.length === 1) {
-            chips[0].style.maxWidth = `${Math.max(chipMinWidth, remainingWidth)}px`;
-          }
-        }
+      return items.slice(visibleCount);
+    }
 
-        this._overflowItems = overflowItems;
-        return;
+    /** @private */
+    __updateChipsDefault(items, inputWidth) {
+      let remainingWidth = this.__getWrapperWidth() - inputWidth;
+
+      if (items.length > 1) {
+        remainingWidth -= this.__getOverflowWidth();
       }
 
-      // Add chips until remaining width is exceeded
+      const chipMinWidth = parseInt(getComputedStyle(this).getPropertyValue('--_chip-min-width'));
+
+      // Add chips from the end 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);
 
-        // When auto expanding vertically, no need to measure remaining width
-        if (!this.autoExpandVertically) {
-          if (this.$.chips.clientWidth > remainingWidth) {
-            // If there is no more space for chips, or if there is at least one
-            // chip already shown, collapse all remaining chips to the overflow
-            if (remainingWidth < chipMinWidth || refNode !== null) {
-              chip.remove();
-              break;
-            }
+        if (this.$.chips.clientWidth > remainingWidth) {
+          // If there is no more space for chips, or if there is at least one
+          // chip already shown, collapse all remaining chips to the overflow
+          if (remainingWidth < chipMinWidth || refNode !== null) {
+            chip.remove();
+            return items.slice(0, i + 1);
           }
-
-          chip.style.maxWidth = `${remainingWidth}px`;
         }
 
-        items.pop();
+        chip.style.maxWidth = `${remainingWidth}px`;
         refNode = chip;
       }
 
-      this._overflowItems = items;
+      return [];
     }
 
     /** @private */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.1.0-beta1",
+  "version": "25.1.0-beta3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -147,7 +147,9 @@
               "description": "Filtering string the user has typed into the input field.",
               "value": {
                 "type": [
-                  "string"
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -162,6 +164,17 @@
                 ]
               }
             },
+            {
+              "name": "i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "value": {
+                "type": [
+                  "Object",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "invalid",
               "description": "Set to true when the field is invalid.",
@@ -189,7 +202,9 @@
               "description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
               "value": {
                 "type": [
-                  "string"
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -198,7 +213,9 @@
               "description": "Path for the value of the item. If `items` is an array of objects, the\n`itemValuePath:` is used to fetch the string value for the selected\nitem.\n\nThe item value is used in the `value` property of the combo box,\nto provide the form value.",
               "value": {
                 "type": [
-                  "string"
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -262,7 +279,9 @@
               "description": "True if the dropdown is open, false otherwise.",
               "value": {
                 "type": [
-                  "boolean"
+                  "boolean",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -271,7 +290,9 @@
               "description": "Number of items fetched at a time from the dataprovider.",
               "value": {
                 "type": [
-                  "number"
+                  "number",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -325,6 +346,7 @@
               "value": {
                 "type": [
                   "number",
+                  "null",
                   "undefined"
                 ]
               }
@@ -512,7 +534,9 @@
                 "description": "Filtering string the user has typed into the input field.",
                 "value": {
                   "type": [
-                    "string"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
@@ -543,7 +567,7 @@
                 "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
                 "value": {
                   "type": [
-                    "MultiSelectComboBoxI18n"
+                    "?"
                   ]
                 }
               },
@@ -596,7 +620,9 @@
                 "description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
                 "value": {
                   "type": [
-                    "string"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
@@ -616,7 +642,9 @@
                 "description": "Path for the value of the item. If `items` is an array of objects, the\n`itemValuePath:` is used to fetch the string value for the selected\nitem.\n\nThe item value is used in the `value` property of the combo box,\nto provide the form value.",
                 "value": {
                   "type": [
-                    "string"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
@@ -680,7 +708,9 @@
                 "description": "True if the dropdown is open, false otherwise.",
                 "value": {
                   "type": [
-                    "boolean"
+                    "boolean",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
@@ -689,7 +719,9 @@
                 "description": "Number of items fetched at a time from the dataprovider.",
                 "value": {
                   "type": [
-                    "number"
+                    "number",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
@@ -765,6 +797,7 @@
                 "value": {
                   "type": [
                     "number",
+                    "null",
                     "undefined"
                   ]
                 }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.1.0-beta1",
+  "version": "25.1.0-beta3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {