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

package/package.json

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

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

@@ -30,13 +30,23 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
 
   static get properties() {
     return {
+      disabled: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
+      readonly: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       label: {
-        type: String
+        type: String,
       },
 
       item: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
@@ -49,7 +59,6 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
           align-self: center;
           white-space: nowrap;
           box-sizing: border-box;
-          min-width: 0;
         }
 
         [part='label'] {
@@ -57,7 +66,7 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
           text-overflow: ellipsis;
         }
 
-        :host([part~='overflow']) [part='remove-button'] {
+        :host(:is([readonly], [disabled], [part~='overflow'])) [part='remove-button'] {
           display: none !important;
         }
       </style>
@@ -73,11 +82,11 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
     this.dispatchEvent(
       new CustomEvent('item-removed', {
         detail: {
-          item: this.item
+          item: this.item,
         },
         bubbles: true,
-        composed: true
-      })
+        composed: true,
+      }),
     );
   }
 }

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

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

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

@@ -51,8 +51,8 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   static get properties() {
     return {
       _target: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
@@ -65,6 +65,17 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     return this.querySelector('[part="clear-button"]');
   }
 
+  /**
+   * Override method inherited from the combo-box
+   * to allow opening dropdown when readonly.
+   * @override
+   */
+  open() {
+    if (!this.disabled && !(this.readonly && this._getOverlayItems().length === 0)) {
+      this.opened = true;
+    }
+  }
+
   /**
    * @protected
    * @override
@@ -113,6 +124,11 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   _closeOrCommit() {
+    if (this.readonly) {
+      this.close();
+      return;
+    }
+
     if (this.__enterPressed) {
       this.__enterPressed = null;
 
@@ -127,6 +143,73 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     super._closeOrCommit();
   }
 
+  /**
+   * Override method inherited from the combo-box
+   * to not update focused item when readonly.
+   * @protected
+   * @override
+   */
+  _onArrowDown() {
+    if (!this.readonly) {
+      super._onArrowDown();
+    } else if (!this.opened) {
+      this.open();
+    }
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to not update focused item when readonly.
+   * @protected
+   * @override
+   */
+  _onArrowUp() {
+    if (!this.readonly) {
+      super._onArrowUp();
+    } else if (!this.opened) {
+      this.open();
+    }
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to close dropdown on blur when readonly.
+   * @param {FocusEvent} event
+   * @protected
+   * @override
+   */
+  _onFocusout(event) {
+    // Disable combo-box logic that updates selectedItem
+    // based on the overlay focused index on input blur
+    this._ignoreCommitValue = true;
+
+    super._onFocusout(event);
+
+    if (this.readonly && !this._closeOnBlurIsPrevented) {
+      this.close();
+    }
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to not commit an already selected item again
+   * on blur, which would result in un-selecting.
+   * @protected
+   * @override
+   */
+  _detectAndDispatchChange() {
+    if (this._ignoreCommitValue) {
+      this._ignoreCommitValue = false;
+
+      // Reset internal combo-box state
+      this.selectedItem = null;
+      this._inputElementValue = '';
+      return;
+    }
+
+    super._detectAndDispatchChange();
+  }
+
   /**
    * @param {CustomEvent} event
    * @protected
@@ -135,6 +218,11 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   _overlaySelectedItemChanged(event) {
     event.stopPropagation();
 
+    // Do not un-select on click when readonly
+    if (this.readonly) {
+      return;
+    }
+
     if (event.detail.item instanceof ComboBoxPlaceholder) {
       return;
     }
@@ -143,9 +231,9 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
       this.dispatchEvent(
         new CustomEvent('combo-box-item-selected', {
           detail: {
-            item: event.detail.item
-          }
-        })
+            item: event.detail.item,
+          },
+        }),
       );
     }
   }

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

@@ -16,7 +16,7 @@ registerStyles(
       );
     }
   `,
-  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' }
+  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' },
 );
 
 /**

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

@@ -17,15 +17,39 @@ class MultiSelectComboBoxScroller extends ComboBoxScroller {
     return 'vaadin-multi-select-combo-box-scroller';
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('aria-multiselectable', 'true');
+  }
+
+  /** @private */
+  __getAriaSelected(_focusedIndex, itemIndex) {
+    const item = this.items[itemIndex];
+    return this.__isItemSelected(item, null, this.itemIdPath).toString();
+  }
+
   /** @private */
   __isItemSelected(item, _selectedItem, itemIdPath) {
     if (item instanceof ComboBoxPlaceholder) {
       return false;
     }
 
+    if (this.comboBox.readonly) {
+      return false;
+    }
+
     const host = this.comboBox.getRootNode().host;
     return host._findIndex(item, host.selectedItems, itemIdPath) > -1;
   }
+
+  /** @private */
+  __updateElement(el, index) {
+    super.__updateElement(el, index);
+
+    el.toggleAttribute('readonly', this.comboBox.readonly);
+  }
 }
 
 customElements.define(MultiSelectComboBoxScroller.is, MultiSelectComboBoxScroller);

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

@@ -20,6 +20,14 @@ 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';
 
+export interface MultiSelectComboBoxI18n {
+  cleared: string;
+  focused: string;
+  selected: string;
+  deselected: string;
+  total: string;
+}
+
 /**
  * Fired when the user commits a value change.
  */
@@ -30,7 +38,7 @@ export type MultiSelectComboBoxChangeEvent<TItem> = Event & {
 /**
  * Fired when the user sets a custom value.
  */
-export type MultiSelectComboBoxCustomValuesSetEvent = CustomEvent<string>;
+export type MultiSelectComboBoxCustomValueSetEvent = CustomEvent<string>;
 
 /**
  * Fired when the `filter` property changes.
@@ -50,7 +58,7 @@ export type MultiSelectComboBoxSelectedItemsChangedEvent<TItem> = CustomEvent<{
 export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap {
   change: MultiSelectComboBoxChangeEvent<TItem>;
 
-  'custom-values-set': MultiSelectComboBoxCustomValuesSetEvent;
+  'custom-value-set': MultiSelectComboBoxCustomValueSetEvent;
 
   'filter-changed': MultiSelectComboBoxFilterChangedEvent;
 
@@ -79,6 +87,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  *
  * Part name              | Description
  * -----------------------|----------------
+ * `chips`                | The element that wraps chips for selected items
  * `chip`                 | Chip shown for every selected item
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
@@ -112,7 +121,6 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * -----------------------------------------------------|----------------------------|--------
  * `--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
@@ -130,7 +138,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} custom-values-set - Fired when the user sets a custom value.
+ * @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.
@@ -138,9 +146,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
 declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   /**
    * When true, the user can input a value that is not present in the items list.
-   * @attr {boolean} allow-custom-values
+   * @attr {boolean} allow-custom-value
    */
-  allowCustomValues: boolean;
+  allowCustomValue: boolean;
 
   /**
    * Set true to prevent the overlay from opening automatically.
@@ -199,6 +207,30 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   itemValuePath: string;
 
+  /**
+   * The object used to localize this component.
+   * To change the default localization, replace the entire
+   * _i18n_ object or just the property you want to modify.
+   *
+   * The object has the following JSON structure and default values:
+   * ```
+   * {
+   *   // Screen reader announcement on clear button click.
+   *   cleared: 'Selection cleared',
+   *   // Screen reader announcement when a chip is focused.
+   *   focused: ' focused. Press Backspace to remove',
+   *   // Screen reader announcement when item is selected.
+   *   selected: 'added to selection',
+   *   // Screen reader announcement when item is deselected.
+   *   deselected: 'removed from selection',
+   *   // Screen reader announcement of the selected items count.
+   *   // {count} is replaced with the actual count of items.
+   *   total: '{count} items selected',
+   * }
+   * ```
+   */
+  i18n: MultiSelectComboBoxI18n;
+
   /**
    * True if the dropdown is open, false otherwise.
    */
@@ -210,6 +242,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   pageSize: number;
 
+  /**
+   * A hint to the user of what can be entered in the control.
+   * The placeholder will be only displayed in the case when
+   * there is no item selected.
+   */
+  placeholder: string;
+
   /**
    * Custom function for rendering the content of every item.
    * Receives three arguments:
@@ -232,13 +271,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?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }