@vaadin/multi-select-combo-box 25.1.0-beta2 → 25.1.0-beta4

package/custom-elements.json

@@ -246,10 +246,12 @@
             {
               "kind": "field",
               "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\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```",
+              "privacy": "public",
               "type": {
                 "text": "Object"
               },
+              "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```",
+              "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -669,6 +671,11 @@
             },
             {
               "name": "i18n",
+              "type": {
+                "text": "Object"
+              },
+              "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.",
+              "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -1039,10 +1046,12 @@
             {
               "kind": "field",
               "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\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```",
+              "privacy": "public",
               "type": {
                 "text": "Object"
               },
+              "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```",
+              "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"
@@ -1479,6 +1488,11 @@
             },
             {
               "name": "i18n",
+              "type": {
+                "text": "Object"
+              },
+              "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.",
+              "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
                 "package": "@vaadin/component-base/src/i18n-mixin.js"

package/package.json

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

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

@@ -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-beta2",
+  "version": "25.1.0-beta4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -164,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.",

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-beta2",
+  "version": "25.1.0-beta4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {