docs: document MultiSelectComboBox collapse chips API

articles/components/multi-select-combo-box/index.adoc

@@ -248,6 +248,37 @@ include::{root}/frontend/demo/component/multi-select-combo-box/react/multi-selec
 endif::[]
 --
 
+[role="since:com.vaadin:vaadin@V25.2"]
+== Collapse Chips
+
+By default, the component shows as many chips for selected items as fit, collapsing the remainder into the overflow chip. The component can be configured to instead collapse all chips into the overflow chip whenever they don't all fit. This can be useful when partial chip lists take up too much space or are visually confusing.
+
+[.example,themes="lumo,aura"]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/multi-select-combo-box/multi-select-combo-box-collapse-chips.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxCollapseChips.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-collapse-chips.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
 == Item Class Names
 
 See <<../combo-box#item-class-names, Combo Box, Item Class Names>>. In addition to items in the overlay, custom class names also apply to chips representing selected items.

frontend/demo/component/multi-select-combo-box/multi-select-combo-box-collapse-chips.ts

@@ -0,0 +1,55 @@
+import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/checkbox';
+import '@vaadin/multi-select-combo-box';
+import '@vaadin/vertical-layout';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import type { CheckboxChangeEvent } from '@vaadin/checkbox';
+import { getCountries } from 'Frontend/demo/domain/DataService';
+import { applyTheme } from 'Frontend/demo/theme';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
+
+@customElement('multi-select-combo-box-collapse-chips')
+export class Example extends LitElement {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    applyTheme(root);
+    return root;
+  }
+
+  @state()
+  private items: Country[] = [];
+
+  @state()
+  private collapseChips = true;
+
+  protected override async firstUpdated() {
+    this.items = await getCountries();
+  }
+
+  protected override render() {
+    return html`
+      <vaadin-vertical-layout theme="spacing">
+        <!-- tag::snippet[] -->
+        <vaadin-multi-select-combo-box
+          label="Countries"
+          item-label-path="name"
+          item-id-path="id"
+          item-value-path="id"
+          .items="${this.items}"
+          .selectedItems="${this.items.slice(0, 3)}"
+          style="width: 250px"
+          ?collapse-chips="${this.collapseChips}"
+        ></vaadin-multi-select-combo-box>
+        <!-- end::snippet[] -->
+        <vaadin-checkbox
+          label="Toggle collapse chips"
+          .checked="${this.collapseChips}"
+          @change="${(e: CheckboxChangeEvent) => {
+            this.collapseChips = e.target.checked;
+          }}"
+        ></vaadin-checkbox>
+      </vaadin-vertical-layout>
+    `;
+  }
+}

frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-collapse-chips.tsx

@@ -0,0 +1,49 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import React, { useEffect } from 'react';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
+import { Checkbox } from '@vaadin/react-components/Checkbox.js';
+import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { getCountries } from 'Frontend/demo/domain/DataService';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
+
+function Example() {
+  useSignals(); // hidden-source-line
+  const items = useSignal<Country[]>([]);
+  const collapseChips = useSignal(true);
+
+  useEffect(() => {
+    getCountries().then((countries) => {
+      items.value = countries;
+    });
+  }, []);
+
+  const selectedItems = useComputed(() => items.value.slice(0, 3));
+
+  return (
+    <VerticalLayout theme="spacing">
+      {/* tag::snippet[] */}
+      <MultiSelectComboBox
+        label="Countries"
+        itemLabelPath="name"
+        itemIdPath="id"
+        itemValuePath="id"
+        items={items.value}
+        collapseChips={collapseChips.value}
+        selectedItems={selectedItems.value}
+        style={{ width: '250px' }}
+      />
+      {/* end::snippet[] */}
+      <Checkbox
+        label="Toggle collapse chips"
+        checked={collapseChips.value}
+        onChange={(e) => {
+          collapseChips.value = e.target.checked;
+        }}
+      />
+    </VerticalLayout>
+  );
+}
+
+export default reactExample(Example); // hidden-source-line

src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxCollapseChips.java

@@ -0,0 +1,39 @@
+package com.vaadin.demo.component.multiselectcombobox;
+
+import com.vaadin.demo.DemoExporter; // hidden-source-line
+import com.vaadin.demo.domain.Country;
+import com.vaadin.demo.domain.DataService;
+import com.vaadin.flow.component.checkbox.Checkbox;
+import com.vaadin.flow.component.combobox.MultiSelectComboBox;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.Route;
+
+import java.util.List;
+
+@Route("multi-select-combo-box-collapse-chips")
+public class MultiSelectComboBoxCollapseChips extends VerticalLayout {
+
+    public MultiSelectComboBoxCollapseChips() {
+        MultiSelectComboBox<Country> comboBox = new MultiSelectComboBox<>(
+                "Countries");
+        List<Country> countries = DataService.getCountries();
+        comboBox.setItems(countries);
+        comboBox.setItemLabelGenerator(Country::getName);
+        comboBox.select(countries.subList(0, 3));
+        comboBox.setWidth("250px");
+        // tag::snippet[]
+        comboBox.setCollapseChips(true);
+
+        Checkbox toggle = new Checkbox("Toggle collapse chips", true);
+        toggle.addValueChangeListener(
+                e -> comboBox.setCollapseChips(e.getValue()));
+        // end::snippet[]
+
+        setPadding(false);
+        add(comboBox, toggle);
+    }
+
+    public static class Exporter extends // hidden-source-line
+            DemoExporter<MultiSelectComboBoxCollapseChips> { // hidden-source-line
+    } // hidden-source-line
+}