@vaadin/multi-select-combo-box 23.1.0-alpha2 → 23.1.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,18 +33,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.1.0-alpha2",
-    "@vaadin/component-base": "23.1.0-alpha2",
-    "@vaadin/field-base": "23.1.0-alpha2",
-    "@vaadin/input-container": "23.1.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2"
+    "@vaadin/combo-box": "23.1.0-alpha3",
+    "@vaadin/component-base": "23.1.0-alpha3",
+    "@vaadin/field-base": "23.1.0-alpha3",
+    "@vaadin/input-container": "23.1.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.0"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

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

@@ -42,6 +42,25 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
 
   static get template() {
     return html`
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          align-self: center;
+          white-space: nowrap;
+          box-sizing: border-box;
+          min-width: 0;
+        }
+
+        [part='label'] {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        :host([part~='overflow']) [part='remove-button'] {
+          display: none !important;
+        }
+      </style>
       <div part="label">[[label]]</div>
       <div part="remove-button" role="button" on-click="_onRemoveClick"></div>
     `;

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

@@ -9,9 +9,10 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-multi-select-combo-box-container',
   css`
-    [part='wrapper'] {
+    .wrapper {
       display: flex;
       width: 100%;
+      min-width: 0;
     }
   `,
   {
@@ -39,7 +40,7 @@ class MultiSelectComboBoxContainer extends InputContainer {
       const slots = content.querySelectorAll('slot');
 
       const wrapper = document.createElement('div');
-      wrapper.setAttribute('part', 'wrapper');
+      wrapper.setAttribute('class', 'wrapper');
       content.insertBefore(wrapper, slots[2]);
 
       wrapper.appendChild(slots[0]);

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

@@ -81,24 +81,17 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     this._toggleElement = this.querySelector('.toggle-button');
   }
 
-  /** @protected */
-  _isClearButton(event) {
-    return (
-      super._isClearButton(event) ||
-      (event.type === 'input' && !event.isTrusted) || // fake input event dispatched by clear button
-      event.composedPath()[0].getAttribute('part') === 'clear-button'
-    );
-  }
-
   /**
-   * @param {!Event} event
+   * Override method from `InputMixin`.
+   *
    * @protected
+   * @override
    */
-  _onChange(event) {
-    super._onChange(event);
+  clear() {
+    super.clear();
 
-    if (this._isClearButton(event)) {
-      this._clear();
+    if (this.inputElement) {
+      this.inputElement.value = '';
     }
   }
 

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

@@ -9,6 +9,7 @@ import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js
 import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
@@ -85,6 +86,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `error-message`        | The error message element
  * `helper-text`          | The helper text element wrapper
  * `required-indicator`   | The `required` state indicator element
+ * `overflow`             | The chip shown when component width is not enough to fit all chips
+ * `overflow-one`         | Set on the overflow chip when only one chip does not fit
+ * `overflow-two`         | Set on the overflow chip when two chips do not fit
  * `toggle-button`        | The toggle button
  *
  * The following state attributes are available for styling:
@@ -102,6 +106,15 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `opened`               | Set when the dropdown is open
  * `readonly`             | Set to a readonly element
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom property                                      | Description                | Default
+ * -----------------------------------------------------|----------------------------|--------
+ * `--vaadin-field-default-width`                       | Default width of the field | `12em`
+ * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
+ * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `60px`
+ * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
+ *
  * ### Internal components
  *
  * In addition to `<vaadin-multi-select-combo-box>` itself, the following internal
@@ -241,6 +254,7 @@ interface MultiSelectComboBox
     DisabledMixinClass,
     DelegateStateMixinClass,
     DelegateFocusMixinClass,
+    ResizeMixinClass,
     ThemableMixinClass,
     ElementMixinClass,
     ControllerMixinClass {}

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

@@ -8,6 +8,7 @@ import './vaadin-multi-select-combo-box-container.js';
 import './vaadin-multi-select-combo-box-internal.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -16,6 +17,11 @@ import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shar
 import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const multiSelectComboBox = css`
+  :host {
+    --chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 4em);
+    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
+  }
+
   [hidden] {
     display: none !important;
   }
@@ -24,17 +30,14 @@ const multiSelectComboBox = css`
     color: transparent !important;
   }
 
-  :host([has-value]) [class$='container'] {
-    width: auto;
-  }
-
   ::slotted(input) {
     box-sizing: border-box;
-    flex: 1 0 4em;
+    flex: 1 0 var(--input-min-width);
   }
 
-  [part~='chip'] {
+  [part='chip'] {
     flex: 0 1 auto;
+    min-width: var(--chip-min-width);
   }
 
   :host([readonly]) [part~='chip'] {
@@ -73,6 +76,9 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * `error-message`        | The error message element
  * `helper-text`          | The helper text element wrapper
  * `required-indicator`   | The `required` state indicator element
+ * `overflow`             | The chip shown when component width is not enough to fit all chips
+ * `overflow-one`         | Set on the overflow chip when only one chip does not fit
+ * `overflow-two`         | Set on the overflow chip when two chips do not fit
  * `toggle-button`        | The toggle button
  *
  * The following state attributes are available for styling:
@@ -90,6 +96,15 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * `opened`               | Set when the dropdown is open
  * `readonly`             | Set to a readonly element
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom property                                      | Description                | Default
+ * -----------------------------------------------------|----------------------------|--------
+ * `--vaadin-field-default-width`                       | Default width of the field | `12em`
+ * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
+ * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `60px`
+ * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
+ *
  * ### Internal components
  *
  * In addition to `<vaadin-multi-select-combo-box>` itself, the following internal
@@ -114,8 +129,9 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes InputControlMixin
+ * @mixes ResizeMixin
  */
-class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-multi-select-combo-box';
   }
@@ -155,6 +171,15 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
             invalid="[[invalid]]"
             theme$="[[theme]]"
           >
+            <vaadin-multi-select-combo-box-chip
+              slot="prefix"
+              part$="[[_getOverflowPart(_overflowItems.length)]]"
+              disabled="[[disabled]]"
+              label="[[_getOverflowLabel(_overflowItems.length)]]"
+              title$="[[_getOverflowTitle(_overflowItems)]]"
+              hidden$="[[_isOverflowHidden(_overflowItems.length)]]"
+              on-mousedown="_preventBlur"
+            ></vaadin-multi-select-combo-box-chip>
             <slot name="input"></slot>
             <div id="clearButton" part="clear-button" slot="suffix"></div>
             <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix"></div>
@@ -180,6 +205,17 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
        */
       autoOpenDisabled: Boolean,
 
+      /**
+       * Set to true to display the clear icon which clears the input.
+       * @attr {boolean} clear-button-visible
+       */
+      clearButtonVisible: {
+        type: Boolean,
+        reflectToAttribute: true,
+        observer: '_clearButtonVisibleChanged',
+        value: false
+      },
+
       /**
        * A full set of items to filter the visible options from.
        * The items can be of either `String` or `Object` type.
@@ -302,6 +338,12 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
       _hasValue: {
         type: Boolean,
         value: false
+      },
+
+      /** @private */
+      _overflowItems: {
+        type: Array,
+        value: () => []
       }
     };
   }
@@ -403,6 +445,26 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     super._toggleHasValue(this._hasValue);
   }
 
+  /**
+   * Implement callback from `ResizeMixin` to update chips.
+   * @protected
+   * @override
+   */
+  _onResize() {
+    this.__updateChips();
+  }
+
+  /**
+   * Setting clear button visible reduces total space available
+   * for rendering chips, and making it hidden increases it.
+   * @private
+   */
+  _clearButtonVisibleChanged(visible, oldVisible) {
+    if (visible || oldVisible) {
+      this.__updateChips();
+    }
+  }
+
   /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
     if (Math.floor(pageSize) !== pageSize || pageSize <= 0) {
@@ -436,6 +498,34 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     return item && Object.prototype.hasOwnProperty.call(item, itemLabelPath) ? item[itemLabelPath] : item;
   }
 
+  /** @private */
+  _getOverflowLabel(length) {
+    return length;
+  }
+
+  /** @private */
+  _getOverflowPart(length) {
+    let part = `chip overflow`;
+
+    if (length === 1) {
+      part += ' overflow-one';
+    } else if (length === 2) {
+      part += ' overflow-two';
+    }
+
+    return part;
+  }
+
+  /** @private */
+  _getOverflowTitle(items) {
+    return items.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+  }
+
+  /** @private */
+  _isOverflowHidden(length) {
+    return length === 0;
+  }
+
   /** @private */
   _findIndex(item, selectedItems, itemIdPath) {
     if (itemIdPath && item) {
@@ -452,6 +542,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
 
   /** @private */
   __clearFilter() {
+    this.filter = '';
     this.$.comboBox.clear();
   }
 
@@ -501,31 +592,83 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     chip.setAttribute('slot', 'prefix');
 
     chip.item = item;
-    chip.label = this._getItemLabel(item, this.itemLabelPath);
     chip.toggleAttribute('disabled', this.disabled);
 
+    const label = this._getItemLabel(item, this.itemLabelPath);
+    chip.label = label;
+    chip.setAttribute('title', label);
+
     chip.addEventListener('item-removed', (e) => this._onItemRemoved(e));
     chip.addEventListener('mousedown', (e) => this._preventBlur(e));
 
     return chip;
   }
 
+  /** @private */
+  __getMinWidth(chip) {
+    chip.style.visibility = 'hidden';
+    chip.style.display = 'block';
+    chip.style.minWidth = 'var(--chip-min-width)';
+
+    const result = parseInt(getComputedStyle(chip).minWidth);
+
+    chip.style.minWidth = '';
+    chip.style.display = '';
+    chip.style.visibility = '';
+
+    return result;
+  }
+
   /** @private */
   __updateChips() {
     if (!this._inputField) {
       return;
     }
 
-    this._chips.forEach((chip) => {
+    // Clear all chips except the overflow
+    const chips = Array.from(this._chips).reverse();
+    const overflow = chips.pop();
+
+    chips.forEach((chip) => {
       chip.remove();
     });
 
     const items = [...this.selectedItems];
 
+    let refNode = overflow.nextElementSibling;
+
+    // Use overflow chip to measure min-width
+    const chipMinWidth = this.__getMinWidth(overflow);
+    const inputMinWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
+    const containerStyle = getComputedStyle(this._inputField);
+
+    // Detect available width for chips
+    let totalWidth =
+      parseInt(containerStyle.width) -
+      parseInt(containerStyle.paddingLeft) -
+      parseInt(containerStyle.paddingRight) -
+      this.$.toggleButton.clientWidth -
+      inputMinWidth;
+
+    if (this.clearButtonVisible) {
+      totalWidth -= this.$.clearButton.clientWidth;
+    }
+
     for (let i = items.length - 1; i >= 0; i--) {
-      const chip = this.__createChip(items[i]);
-      this._inputField.insertBefore(chip, this._inputField.firstElementChild);
+      // Ensure there is enough space for another chip
+      if (totalWidth < chipMinWidth) {
+        break;
+      }
+
+      const item = items.pop();
+      const chip = this.__createChip(item);
+      this._inputField.insertBefore(chip, refNode);
+
+      refNode = chip;
+      totalWidth -= chipMinWidth;
     }
+
+    this._overflowItems = items;
   }
 
   /**

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

@@ -13,27 +13,63 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 const chip = css`
   :host {
-    display: inline-flex;
-    align-items: center;
-    align-self: center;
-    font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-xxs);
     line-height: 1;
-    padding: 0.3125em 0 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
+    padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
+    color: var(--lumo-body-text-color);
     border-radius: var(--lumo-border-radius-s);
-    border-radius: var(--lumo-border-radius);
     background-color: var(--lumo-contrast-20pct);
     cursor: var(--lumo-clickable-cursor);
-    white-space: nowrap;
-    box-sizing: border-box;
-    min-width: 0;
+  }
+
+  :host(:not([part~='overflow'])) {
+    padding-inline-end: 0;
+  }
+
+  :host([part~='overflow']) {
+    position: relative;
+    min-width: var(--lumo-size-xxs);
+    margin-inline-start: var(--lumo-space-s);
+  }
+
+  :host([part~='overflow'])::before,
+  :host([part~='overflow'])::after {
+    position: absolute;
+    content: '';
+    width: 3px;
+    height: calc(1.875em - 1px);
+    border-left: 2px solid;
+    border-radius: 4px 0 0 4px;
+    border-color: var(--lumo-contrast-30pct);
+  }
+
+  :host([part~='overflow'])::before {
+    left: -4px;
+  }
+
+  :host([part~='overflow'])::after {
+    left: -8px;
+  }
+
+  :host([part~='overflow-two']) {
+    margin-inline-start: calc(var(--lumo-space-s) / 2);
+  }
+
+  :host([part~='overflow-two'])::after {
+    display: none;
+  }
+
+  :host([part~='overflow-one']) {
+    margin-inline-start: 0;
+  }
+
+  :host([part~='overflow-one'])::before,
+  :host([part~='overflow-one'])::after {
+    display: none;
   }
 
   [part='label'] {
-    color: var(--lumo-body-text-color);
     font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
     line-height: 1.25;
   }
 
@@ -43,8 +79,8 @@ const chip = css`
     justify-content: center;
     margin-top: -0.3125em;
     margin-bottom: -0.3125em;
-    width: var(--lumo-icon-size-s);
-    height: var(--lumo-icon-size-s);
+    width: 1.25em;
+    height: 1.25em;
     font-size: 1.5em;
   }
 

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

@@ -11,20 +11,57 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 const chip = css`
   :host {
-    display: flex;
-    align-items: center;
-    align-self: center;
-    box-sizing: border-box;
     height: 1.25rem;
     margin-inline-end: 0.25rem;
     padding-inline-start: 0.5rem;
     border-radius: 4px;
     background-color: hsla(214, 53%, 23%, 0.1);
     cursor: default;
-    white-space: nowrap;
     font-family: var(--material-font-family);
   }
 
+  :host([part~='overflow']) {
+    position: relative;
+    margin-inline-start: 0.5rem;
+    padding-inline-end: 0.5rem;
+  }
+
+  :host([part~='overflow'])::before,
+  :host([part~='overflow'])::after {
+    position: absolute;
+    content: '';
+    width: 3px;
+    height: 20px;
+    border-left: 2px solid;
+    border-radius: 4px 0 0 4px;
+    border-color: hsla(214, 53%, 23%, 0.1);
+  }
+
+  :host([part~='overflow'])::before {
+    left: -4px;
+  }
+
+  :host([part~='overflow'])::after {
+    left: -8px;
+  }
+
+  :host([part~='overflow-two']) {
+    margin-inline-start: 0.25rem;
+  }
+
+  :host([part~='overflow-two'])::after {
+    display: none;
+  }
+
+  :host([part~='overflow-one']) {
+    margin-inline-start: 0;
+  }
+
+  :host([part~='overflow-one'])::before,
+  :host([part~='overflow-one'])::after {
+    display: none;
+  }
+
   [part='label'] {
     font-size: var(--material-caption-font-size);
     line-height: 1;