@vaadin/multi-select-combo-box 23.1.2 → 23.2.0-alpha3

package/lit.d.ts

@@ -0,0 +1 @@
+export * from './src/lit/renderer-directives.js';

package/lit.js

@@ -0,0 +1 @@
+export * from './src/lit/renderer-directives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -19,6 +19,8 @@
   "main": "vaadin-multi-select-combo-box.js",
   "module": "vaadin-multi-select-combo-box.js",
   "files": [
+    "lit.js",
+    "lit.d.ts",
     "src",
     "theme",
     "vaadin-*.d.ts",
@@ -33,18 +35,19 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "^23.1.2",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/input-container": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/combo-box": "23.2.0-alpha3",
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/field-base": "23.2.0-alpha3",
+    "@vaadin/input-container": "23.2.0-alpha3",
+    "@vaadin/lit-renderer": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+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 type { MultiSelectComboBox } from '../vaadin-multi-select-combo-box.js';
+
+export type MultiSelectComboBoxLitRenderer<TItem> = (
+  item: TItem,
+  model: ComboBoxItemModel<TItem>,
+  comboBox: MultiSelectComboBox<TItem>,
+) => TemplateResult;
+
+export class MultiSelectComboBoxRendererDirective<TItem> extends LitRendererDirective<
+  MultiSelectComboBox,
+  MultiSelectComboBoxLitRenderer<TItem>
+> {
+  /**
+   * Adds the renderer callback to the combo-box.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the renderer callback on the combo-box.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the renderer callback from the combo-box.
+   */
+  removeRenderer(): void;
+}
+
+/**
+ * A Lit directive for rendering the content of the `<vaadin-multi-select-combo-box-item>` elements.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the combo-box
+ * via the `renderer` property. The renderer is called for each combo-box item when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-multi-select-combo-box
+ *   ${multiSelectComboBoxRenderer((item, model, comboBox) => html`...`)}
+ * ></vaadin-multi-select-combo-box>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function multiSelectComboBoxRenderer<TItem>(
+  renderer: MultiSelectComboBoxLitRenderer<TItem>,
+  dependencies?: unknown,
+): DirectiveResult<typeof MultiSelectComboBoxRendererDirective>;

package/src/lit/renderer-directives.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { directive } from 'lit/directive.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+
+export class MultiSelectComboBoxRendererDirective extends LitRendererDirective {
+  /**
+   * Adds the renderer callback to the combo-box.
+   */
+  addRenderer() {
+    this.element.renderer = (root, comboBox, model) => {
+      this.renderRenderer(root, model.item, model, comboBox);
+    };
+  }
+
+  /**
+   * Runs the renderer callback on the combo-box.
+   */
+  runRenderer() {
+    this.element.requestContentUpdate();
+  }
+
+  /**
+   * Removes the renderer callback from the combo-box.
+   */
+  removeRenderer() {
+    this.element.renderer = null;
+  }
+}
+
+/**
+ * A Lit directive for rendering the content of the `<vaadin-multi-select-combo-box-item>` elements.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the combo-box
+ * via the `renderer` property. The renderer is called for each combo-box item when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-multi-select-combo-box
+ *   ${multiSelectComboBoxRenderer((item, model, comboBox) => html`...`)}
+ * ></vaadin-multi-select-combo-box>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const multiSelectComboBoxRenderer = directive(MultiSelectComboBoxRendererDirective);

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

@@ -3,7 +3,9 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-multi-select-combo-box-dropdown.js';
+import './vaadin-multi-select-combo-box-item.js';
+import './vaadin-multi-select-combo-box-overlay.js';
+import './vaadin-multi-select-combo-box-scroller.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ComboBoxDataProviderMixin } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
@@ -34,17 +36,16 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
 
       <slot></slot>
 
-      <vaadin-multi-select-combo-box-dropdown
-        id="dropdown"
-        opened="[[opened]]"
+      <vaadin-multi-select-combo-box-overlay
+        id="overlay"
+        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
+        opened="[[_overlayOpened]]"
+        loading$="[[loading]]"
+        theme$="[[_theme]]"
         position-target="[[_target]]"
-        renderer="[[renderer]]"
-        _focused-index="[[_focusedIndex]]"
-        _item-id-path="[[itemIdPath]]"
-        _item-label-path="[[itemLabelPath]]"
-        loading="[[loading]]"
-        theme="[[theme]]"
-      ></vaadin-multi-select-combo-box-dropdown>
+        no-vertical-overlap
+        restore-focus-node="[[inputElement]]"
+      ></vaadin-multi-select-combo-box-overlay>
     `;
   }
 
@@ -101,10 +102,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     };
   }
 
-  static get observers() {
-    return ['_readonlyItemsChanged(readonly, selectedItems)'];
-  }
-
   /**
    * Reference to the clear button element.
    * @protected
@@ -114,6 +111,15 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     return this.querySelector('[part="clear-button"]');
   }
 
+  /**
+   * Tag name prefix used by scroller and items.
+   * @protected
+   * @return {string}
+   */
+  get _tagNamePrefix() {
+    return 'vaadin-multi-select-combo-box';
+  }
+
   /**
    * Override method inherited from the combo-box
    * to allow opening dropdown when readonly.
@@ -125,14 +131,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     }
   }
 
-  /**
-   * @protected
-   * @override
-   */
-  _getItemElements() {
-    return Array.from(this.$.dropdown._scroller.querySelectorAll('vaadin-multi-select-combo-box-item'));
-  }
-
   /** @protected */
   ready() {
     super.ready();
@@ -141,6 +139,20 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     this._toggleElement = this.querySelector('.toggle-button');
   }
 
+  /**
+   * Override combo-box method to set correct owner for using by item renderers.
+   * This needs to be done before the scroller gets added to the DOM to ensure
+   * Lit directive works in case when combo-box is opened using attribute.
+   *
+   * @protected
+   * @override
+   */
+  _initScroller() {
+    const comboBox = this.getRootNode().host;
+
+    super._initScroller(comboBox);
+  }
+
   /**
    * Override method from `InputMixin`.
    *
@@ -299,19 +311,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     }
   }
 
-  /**
-   * Override method inherited from the combo-box
-   * to render only selected items when read-only,
-   * even if a different set of items is provided.
-   *
-   * @protected
-   * @override
-   */
-  _setOverlayItems(items) {
-    const effectiveItems = this.readonly ? this.selectedItems : items;
-    super._setOverlayItems(effectiveItems);
-  }
-
   /**
    * Override method inherited from the combo-box
    * to not request data provider when read-only.
@@ -328,20 +327,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
 
     return super._shouldLoadPage(page);
   }
-
-  /** @private */
-  _readonlyItemsChanged(readonly, selectedItems) {
-    if (readonly && selectedItems) {
-      this.__savedItems = this._getOverlayItems();
-      this._setOverlayItems(selectedItems);
-    }
-
-    // Restore the original dropdown items
-    if (readonly === false && this.__savedItems) {
-      this._setOverlayItems(this.__savedItems);
-      this.__savedItems = null;
-    }
-  }
 }
 
 customElements.define(MultiSelectComboBoxInternal.is, MultiSelectComboBoxInternal);

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

@@ -3,26 +3,26 @@
  * 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';
 
 export type MultiSelectComboBoxRenderer<TItem> = (
   root: HTMLElement,
@@ -65,6 +65,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 +80,8 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
   'invalid-changed': MultiSelectComboBoxInvalidChangedEvent;
 
   'selected-items-changed': MultiSelectComboBoxSelectedItemsChangedEvent<TItem>;
+
+  validated: MultiSelectComboBoxValidatedEvent;
 }
 
 /**
@@ -131,6 +138,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`
  *
@@ -153,6 +161,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * @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 {
   /**

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`
  *
@@ -131,6 +132,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * @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
@@ -153,7 +155,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
         <vaadin-multi-select-combo-box-internal
           id="comboBox"
-          items="[[items]]"
+          items="[[__effectiveItems]]"
           item-id-path="[[itemIdPath]]"
           item-label-path="[[itemLabelPath]]"
           item-value-path="[[itemValuePath]]"
@@ -166,7 +168,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           last-filter="{{_lastFilter}}"
           loading="{{loading}}"
           size="{{size}}"
-          filtered-items="[[filteredItems]]"
+          filtered-items="[[__effectiveFilteredItems]]"
           selected-items="[[selectedItems]]"
           opened="{{opened}}"
           renderer="[[renderer]]"
@@ -424,6 +426,18 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        */
       filteredItems: Array,
 
+      /** @private */
+      __effectiveItems: {
+        type: Array,
+        computed: '__computeEffectiveItems(items, selectedItems, readonly)',
+      },
+
+      /** @private */
+      __effectiveFilteredItems: {
+        type: Array,
+        computed: '__computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly)',
+      },
+
       /** @protected */
       _hasValue: {
         type: Boolean,
@@ -681,7 +695,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   /** @private */
   _getItemLabel(item) {
-    return item && Object.prototype.hasOwnProperty.call(item, this.itemLabelPath) ? item[this.itemLabelPath] : item;
+    return this.$.comboBox._getItemLabel(item);
   }
 
   /** @private */
@@ -749,7 +763,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 */
@@ -1077,6 +1092,16 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     // and keep the overlay opened when clicking a chip.
     event.preventDefault();
   }
+
+  /** @private */
+  __computeEffectiveItems(items, selectedItems, readonly) {
+    return items && readonly ? selectedItems : items;
+  }
+
+  /** @private */
+  __computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly) {
+    return !items && readonly ? selectedItems : filteredItems;
+  }
 }
 
 customElements.define(MultiSelectComboBox.is, MultiSelectComboBox);

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

@@ -1,47 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-multi-select-combo-box-item.js';
-import './vaadin-multi-select-combo-box-overlay.js';
-import './vaadin-multi-select-combo-box-scroller.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { ComboBoxDropdown } from '@vaadin/combo-box/src/vaadin-combo-box-dropdown.js';
-
-/**
- * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
- *
- * @extends ComboBoxDropdown
- * @private
- */
-class MultiSelectComboBoxDropdown extends ComboBoxDropdown {
-  static get is() {
-    return 'vaadin-multi-select-combo-box-dropdown';
-  }
-
-  static get template() {
-    return html`
-      <vaadin-multi-select-combo-box-overlay
-        id="overlay"
-        hidden$="[[_isOverlayHidden(_items.*, loading)]]"
-        loading$="[[loading]]"
-        opened="{{_overlayOpened}}"
-        theme$="[[theme]]"
-        position-target="[[positionTarget]]"
-        no-vertical-overlap
-      ></vaadin-multi-select-combo-box-overlay>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // Set owner for using by item renderers
-    const comboBox = this.getRootNode().host;
-    this._scroller.comboBox = comboBox.getRootNode().host;
-  }
-}
-
-customElements.define(MultiSelectComboBoxDropdown.is, MultiSelectComboBoxDropdown);