@vaadin/multi-select-combo-box 23.2.0-dev.53560527d → 23.2.0

package/README.md

@@ -1,7 +1,5 @@
 # @vaadin/multi-select-combo-box
 
-> ⚠️ Work in progress, please do not use this component yet.
-
 A web component that wraps `<vaadin-combo-box>` and allows selecting multiple items.
 
 ```html
@@ -29,7 +27,7 @@ import '@vaadin/multi-select-combo-box';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/multi-select-combo-box/vaadin-multi-select-combo-box.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -52,7 +50,7 @@ import '@vaadin/multi-select-combo-box/src/vaadin-multi-select-combo-box.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.2.0-dev.53560527d",
+  "version": "23.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -24,7 +24,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -35,19 +37,23 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.2.0-dev.53560527d",
-    "@vaadin/component-base": "23.2.0-dev.53560527d",
-    "@vaadin/field-base": "23.2.0-dev.53560527d",
-    "@vaadin/input-container": "23.2.0-dev.53560527d",
-    "@vaadin/lit-renderer": "23.2.0-dev.53560527d",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.53560527d",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.53560527d",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.53560527d"
+    "@vaadin/combo-box": "^23.2.0",
+    "@vaadin/component-base": "^23.2.0",
+    "@vaadin/field-base": "^23.2.0",
+    "@vaadin/input-container": "^23.2.0",
+    "@vaadin/lit-renderer": "^23.2.0",
+    "@vaadin/vaadin-lumo-styles": "^23.2.0",
+    "@vaadin/vaadin-material-styles": "^23.2.0",
+    "@vaadin/vaadin-themable-mixin": "^23.2.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6c5c18369b09e22e76365d8a8a5e4bbb220f969b"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
 }

package/src/lit/renderer-directives.d.ts

@@ -3,11 +3,11 @@
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { TemplateResult } from 'lit';
-import { DirectiveResult } from 'lit/directive.js';
-import { ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import type { TemplateResult } from 'lit';
+import type { DirectiveResult } from 'lit/directive.js';
+import type { ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
-import { MultiSelectComboBox } from '../vaadin-multi-select-combo-box.js';
+import type { MultiSelectComboBox } from '../vaadin-multi-select-combo-box.js';
 
 export type MultiSelectComboBoxLitRenderer<TItem> = (
   item: TItem,

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

@@ -18,7 +18,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `label`          | Element containing the label
  * `remove-button`  | Remove button
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @extends HTMLElement
  * @private

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

@@ -38,7 +38,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
 
       <vaadin-multi-select-combo-box-overlay
         id="overlay"
-        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
         opened="[[_overlayOpened]]"
         loading$="[[loading]]"
         theme$="[[_theme]]"
@@ -87,6 +86,15 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
         value: () => [],
       },
 
+      /**
+       * Last input value entered by the user before value is updated.
+       * Used to store `filter` property value before clearing it.
+       */
+      lastFilter: {
+        type: String,
+        notify: true,
+      },
+
       _target: {
         type: Object,
       },
@@ -195,6 +203,18 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     super._closeOrCommit();
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  _commitValue() {
+    // Store filter value for checking if user input is matching
+    // an item which is already selected, to not un-select it.
+    this.lastFilter = this.filter;
+
+    super._commitValue();
+  }
+
   /**
    * Override method inherited from the combo-box
    * to not update focused item when readonly.

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

@@ -23,7 +23,7 @@ import { ComboBoxItem } from '@vaadin/combo-box/src/vaadin-combo-box-item.js';
  * `selected` | Set when the item is selected | :host
  * `focused`  | Set when the item is focused  | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @extends ComboBoxItem
  * @private

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

@@ -3,26 +3,27 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import {
+import type {
   ComboBoxDataProvider,
   ComboBoxDefaultItem,
   ComboBoxItemModel,
 } from '@vaadin/combo-box/src/vaadin-combo-box.js';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-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';
-import { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
-import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
-import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
-import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
-import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
-import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 export type MultiSelectComboBoxRenderer<TItem> = (
   root: HTMLElement,
@@ -65,6 +66,11 @@ export type MultiSelectComboBoxInvalidChangedEvent = CustomEvent<{ value: boolea
  */
 export type MultiSelectComboBoxSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type MultiSelectComboBoxValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap {
   change: MultiSelectComboBoxChangeEvent<TItem>;
 
@@ -75,6 +81,8 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
   'invalid-changed': MultiSelectComboBoxInvalidChangedEvent;
 
   'selected-items-changed': MultiSelectComboBoxSelectedItemsChangedEvent<TItem>;
+
+  validated: MultiSelectComboBoxValidatedEvent;
 }
 
 /**
@@ -131,6 +139,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * Custom property                                      | Description                | Default
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
+ * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
@@ -146,13 +155,14 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * Note: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is
  * propagated to these components.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   /**
@@ -294,6 +304,11 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   clearCache(): void;
 
+  /**
+   * Clears the selected items.
+   */
+  clear(): void;
+
   /**
    * Requests an update for the content of items.
    * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
@@ -305,13 +320,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
   addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 
@@ -319,7 +334,7 @@ interface MultiSelectComboBox
   extends ValidateMixinClass,
     LabelMixinClass,
     KeyboardMixinClass,
-    InputMixinClass,
+    Omit<InputMixinClass, 'value'>,
     InputControlMixinClass,
     InputConstraintsMixinClass,
     FocusMixinClass,
@@ -329,6 +344,7 @@ interface MultiSelectComboBox
     DelegateFocusMixinClass,
     ResizeMixinClass,
     ThemableMixinClass,
+    ThemePropertyMixinClass,
     ElementMixinClass,
     ControllerMixinClass {}
 

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

@@ -109,6 +109,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * Custom property                                      | Description                | Default
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
+ * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
@@ -124,13 +125,14 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * Note: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is
  * propagated to these components.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -163,6 +165,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           allow-custom-value="[[allowCustomValue]]"
           data-provider="[[dataProvider]]"
           filter="{{filter}}"
+          last-filter="{{_lastFilter}}"
           loading="{{loading}}"
           size="{{size}}"
           filtered-items="[[__effectiveFilteredItems]]"
@@ -195,7 +198,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
             ></vaadin-multi-select-combo-box-chip>
             <div id="chips" part="chips" slot="prefix"></div>
             <slot name="input"></slot>
-            <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+            <div
+              id="clearButton"
+              part="clear-button"
+              slot="suffix"
+              on-touchend="_onClearButtonTouchend"
+              aria-hidden="true"
+            ></div>
             <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
           </vaadin-multi-select-combo-box-container>
         </vaadin-multi-select-combo-box-internal>
@@ -423,6 +432,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        */
       filteredItems: Array,
 
+      /** @private */
+      value: {
+        type: String,
+      },
+
       /** @private */
       __effectiveItems: {
         type: Array,
@@ -435,12 +449,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         computed: '__computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly)',
       },
 
-      /** @protected */
-      _hasValue: {
-        type: Boolean,
-        value: false,
-      },
-
       /** @private */
       _overflowItems: {
         type: Array,
@@ -453,6 +461,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         value: -1,
         observer: '_focusedChipIndexChanged',
       },
+
+      /** @private */
+      _lastFilter: {
+        type: String,
+      },
     };
   }
 
@@ -502,6 +515,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     return this.required && !this.readonly ? this._hasValue : true;
   }
 
+  /**
+   * Clears the selected items.
+   */
+  clear() {
+    this.__updateSelection([]);
+
+    announce(this.i18n.cleared);
+  }
+
   /**
    * Clears the cached pages and reloads data from data provider when needed.
    */
@@ -561,21 +583,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       this._focusedChipIndex = -1;
       this.validate();
     }
-
-    // Propagate focused attribute to internal combo box
-    if (this.$ && this.$.comboBox) {
-      this.$.comboBox.toggleAttribute('focused', focused);
-    }
-  }
-
-  /**
-   * Override method inherited from `InputMixin`
-   * to keep attribute after clearing the input.
-   * @protected
-   * @override
-   */
-  _toggleHasValue() {
-    super._toggleHasValue(this._hasValue);
   }
 
   /**
@@ -664,9 +671,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   /** @private */
   _selectedItemsChanged(selectedItems) {
-    this._hasValue = Boolean(selectedItems && selectedItems.length);
-
-    this._toggleHasValue();
+    this._toggleHasValue(this._hasValue);
 
     // Use placeholder for announcing items
     if (this._hasValue) {
@@ -755,7 +760,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     const itemsCopy = [...this.selectedItems];
     itemsCopy.splice(itemsCopy.indexOf(item), 1);
     this.__updateSelection(itemsCopy);
-    this.__announceItem(item, false, itemsCopy.length);
+    const itemLabel = this._getItemLabel(item);
+    this.__announceItem(itemLabel, false, itemsCopy.length);
   }
 
   /** @private */
@@ -768,8 +774,9 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     let isSelected = false;
 
     if (index !== -1) {
+      const lastFilter = this._lastFilter;
       // Do not unselect when manually typing and committing an already selected item.
-      if (this.filter.toLowerCase() === itemLabel.toLowerCase()) {
+      if (lastFilter && lastFilter.toLowerCase() === itemLabel.toLowerCase()) {
         this.__clearFilter();
         return;
       }
@@ -877,6 +884,14 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this._overflowItems = items;
   }
 
+  /** @private */
+  _onClearButtonTouchend(event) {
+    // Cancel the following click and focus events
+    event.preventDefault();
+
+    this.clear();
+  }
+
   /**
    * Override method inherited from `InputControlMixin` and clear items.
    * @protected
@@ -885,9 +900,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   _onClearButtonClick(event) {
     event.stopPropagation();
 
-    this.__updateSelection([]);
-
-    announce(this.i18n.cleared);
+    this.clear();
   }
 
   /**
@@ -1092,6 +1105,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   __computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly) {
     return !items && readonly ? selectedItems : filteredItems;
   }
+
+  /**
+   * Override a method from `InputMixin` to
+   * compute the presence of value based on `selectedItems`.
+   *
+   * @protected
+   * @override
+   */
+  get _hasValue() {
+    return this.selectedItems && this.selectedItems.length > 0;
+  }
 }
 
 customElements.define(MultiSelectComboBox.is, MultiSelectComboBox);