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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.8.0-alpha8",
+  "version": "24.8.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -39,22 +39,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha8",
-    "@vaadin/combo-box": "24.8.0-alpha8",
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/field-base": "24.8.0-alpha8",
-    "@vaadin/input-container": "24.8.0-alpha8",
-    "@vaadin/item": "24.8.0-alpha8",
-    "@vaadin/lit-renderer": "24.8.0-alpha8",
-    "@vaadin/overlay": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
+    "@vaadin/a11y-base": "24.8.0-beta1",
+    "@vaadin/combo-box": "24.8.0-beta1",
+    "@vaadin/component-base": "24.8.0-beta1",
+    "@vaadin/field-base": "24.8.0-beta1",
+    "@vaadin/input-container": "24.8.0-beta1",
+    "@vaadin/item": "24.8.0-beta1",
+    "@vaadin/lit-renderer": "24.8.0-beta1",
+    "@vaadin/overlay": "24.8.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@vaadin/chai-plugins": "24.8.0-beta1",
+    "@vaadin/test-runner-commands": "24.8.0-beta1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -62,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "57ce3a90de99e49049312b0ba4041d3e7542e9d8"
 }

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

@@ -10,13 +10,22 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.js';
 
 /**
- * LitElement based version of `<vaadin-multi-select-combo-box-chip>` web component.
+ * An element used by `<vaadin-multi-select-combo-box>` to display selected items.
  *
- * ## Disclaimer
+ * ### Styling
  *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|-------------
+ * `label`          | Element containing the label
+ * `remove-button`  | Remove button
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @private
  */
 class MultiSelectComboBoxChip extends ThemableMixin(PolylitMixin(LitElement)) {
   static get is() {

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

@@ -11,13 +11,31 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * LitElement based version of `<vaadin-multi-select-combo-box-item>` web component.
+ * An item element used by the `<vaadin-multi-select-combo-box>` dropdown.
  *
- * ## Disclaimer
+ * ### Styling
  *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
+ *
+ * The following state attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @customElement
+ * @mixes ComboBoxItemMixin
+ * @mixes ThemableMixin
+ * @mixes DirMixin
+ * @private
  */
 export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
   static get is() {

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

@@ -758,11 +758,26 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __updateTopGroup(selectedItemsOnTop, selectedItems, opened) {
       if (!selectedItemsOnTop) {
         this._topGroup = [];
-      } else if (!opened) {
+      } else if (!opened || this.__needToSyncTopGroup()) {
         this._topGroup = [...selectedItems];
       }
     }
 
+    /** @private */
+    __needToSyncTopGroup() {
+      // Only sync for object items
+      if (!this.itemIdPath) {
+        return false;
+      }
+      return (
+        this._topGroup &&
+        this._topGroup.some((item) => {
+          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems, this.itemIdPath)];
+          return selectedItem && item !== selectedItem;
+        })
+      );
+    }
+
     /** @private */
     __createChip(item) {
       const chip = document.createElement('vaadin-multi-select-combo-box-chip');
@@ -877,14 +892,17 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         this.insertBefore(chip, refNode);
 
         // 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`;
-          } else {
-            chip.remove();
-            break;
+        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;
+            }
           }
+
+          chip.style.maxWidth = `${remainingWidth}px`;
         }
 
         items.pop();

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

@@ -7,6 +7,7 @@ import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export const multiSelectComboBox = css`
   :host {
+    max-width: 100%;
     --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
     --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.8.0-alpha8",
+  "version": "24.8.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

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

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

@@ -1 +0,0 @@
-export * from './vaadin-multi-select-combo-box.js';