@vaadin/multi-select-combo-box 24.6.0-alpha9 → 24.6.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.6.0-alpha9",
+  "version": "24.6.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,28 +37,29 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.6.0-alpha9",
-    "@vaadin/combo-box": "24.6.0-alpha9",
-    "@vaadin/component-base": "24.6.0-alpha9",
-    "@vaadin/field-base": "24.6.0-alpha9",
-    "@vaadin/input-container": "24.6.0-alpha9",
-    "@vaadin/item": "24.6.0-alpha9",
-    "@vaadin/lit-renderer": "24.6.0-alpha9",
-    "@vaadin/overlay": "24.6.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha9"
+    "@vaadin/a11y-base": "24.6.0-beta1",
+    "@vaadin/combo-box": "24.6.0-beta1",
+    "@vaadin/component-base": "24.6.0-beta1",
+    "@vaadin/field-base": "24.6.0-beta1",
+    "@vaadin/input-container": "24.6.0-beta1",
+    "@vaadin/item": "24.6.0-beta1",
+    "@vaadin/lit-renderer": "24.6.0-beta1",
+    "@vaadin/overlay": "24.6.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.6.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-beta1",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha9",
+    "@vaadin/chai-plugins": "24.6.0-beta1",
     "@vaadin/testing-helpers": "^1.0.0",
-    "lit": "^3.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e303d77ba20c3089c9998be9a318733d9ec5b53c"
+  "gitHead": "ab28efb0dcf2cd1ef72100e2e8f32232fa49aacc"
 }

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

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-multi-select-combo-box-chip>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class MultiSelectComboBoxChip extends ThemableMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-multi-select-combo-box-chip';
+  }
+
+  static get styles() {
+    return multiSelectComboBoxChip;
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflectToAttribute: true,
+        sync: true,
+      },
+
+      readonly: {
+        type: Boolean,
+        reflectToAttribute: true,
+        sync: true,
+      },
+
+      label: {
+        type: String,
+        sync: true,
+      },
+
+      item: {
+        type: Object,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="label">${this.label}</div>
+      <div part="remove-button" @click="${this._onRemoveClick}"></div>
+    `;
+  }
+
+  /** @private */
+  _onRemoveClick(event) {
+    event.stopPropagation();
+
+    this.dispatchEvent(
+      new CustomEvent('item-removed', {
+        detail: {
+          item: this.item,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}
+
+defineCustomElement(MultiSelectComboBoxChip);

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

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { InputContainer } from '@vaadin/input-container/src/vaadin-lit-input-container.js';
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends InputContainer
+ * @private
+ */
+class MultiSelectComboBoxContainer extends InputContainer {
+  static get is() {
+    return 'vaadin-multi-select-combo-box-container';
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        #wrapper {
+          display: flex;
+          width: 100%;
+          min-width: 0;
+        }
+
+        :host([auto-expand-vertically]) #wrapper {
+          flex-wrap: wrap;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Set to true to not collapse selected items chips into the overflow
+       * chip and instead always expand vertically, causing input field to
+       * wrap into multiple lines when width is limited.
+       * @attr {boolean} auto-expand-vertically
+       */
+      autoExpandVertically: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="wrapper">
+        <slot name="prefix"></slot>
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    `;
+  }
+}
+
+defineCustomElement(MultiSelectComboBoxContainer);

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

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-multi-select-combo-box-item.js';
+import './vaadin-lit-multi-select-combo-box-overlay.js';
+import './vaadin-lit-multi-select-combo-box-scroller.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MultiSelectComboBoxInternalMixin } from './vaadin-multi-select-combo-box-internal-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes MultiSelectComboBoxInternalMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class MultiSelectComboBoxInternal extends MultiSelectComboBoxInternalMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-multi-select-combo-box-internal';
+  }
+
+  static get styles() {
+    return css`
+      :host([opened]) {
+        pointer-events: auto;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot></slot>
+
+      <vaadin-multi-select-combo-box-overlay
+        id="overlay"
+        .opened="${this._overlayOpened}"
+        ?loading="${this.loading}"
+        theme="${ifDefined(this._theme)}"
+        .positionTarget="${this._target}"
+        no-vertical-overlap
+        .restoreFocusNode="${this.inputElement}"
+      ></vaadin-multi-select-combo-box-overlay>
+    `;
+  }
+}
+
+defineCustomElement(MultiSelectComboBoxInternal);

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

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-multi-select-combo-box-item>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-multi-select-combo-box-item';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(MultiSelectComboBoxItem);

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

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const multiSelectComboBoxOverlayStyles = css`
+  #overlay {
+    width: var(
+      --vaadin-multi-select-combo-box-overlay-width,
+      var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
+    );
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ComboBoxOverlayMixin
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-multi-select-combo-box-overlay';
+  }
+
+  static get styles() {
+    return [overlayStyles, multiSelectComboBoxOverlayStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="loader"></div>
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(MultiSelectComboBoxOverlay);

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

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
+import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
+ * @private
+ */
+export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-multi-select-combo-box-scroller';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        min-height: 1px;
+        overflow: auto;
+
+        /* Fixes item background from getting on top of scrollbars on Safari */
+        transform: translate3d(0, 0, 0);
+
+        /* Enable momentum scrolling on iOS */
+        -webkit-overflow-scrolling: touch;
+
+        /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+        box-shadow: 0 0 0 white;
+      }
+
+      #selector {
+        border-width: var(--_vaadin-multi-select-combo-box-items-container-border-width);
+        border-style: var(--_vaadin-multi-select-combo-box-items-container-border-style);
+        border-color: var(--_vaadin-multi-select-combo-box-items-container-border-color, transparent);
+        position: relative;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="selector">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('aria-multiselectable', 'true');
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _isItemSelected(item, _selectedItem, itemIdPath) {
+    if (item instanceof ComboBoxPlaceholder) {
+      return false;
+    }
+
+    if (this.owner.readonly) {
+      return false;
+    }
+
+    return this.owner._findIndex(item, this.owner.selectedItems, itemIdPath) > -1;
+  }
+
+  /**
+   * @param {HTMLElement} el
+   * @param {number} index
+   * @protected
+   * @override
+   */
+  _updateElement(el, index) {
+    super._updateElement(el, index);
+
+    el.toggleAttribute('readonly', this.owner.readonly);
+  }
+}
+
+defineCustomElement(MultiSelectComboBoxScroller);

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

@@ -0,0 +1 @@
+export * from './vaadin-multi-select-combo-box.js';

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

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-multi-select-combo-box-chip.js';
+import './vaadin-lit-multi-select-combo-box-container.js';
+import './vaadin-lit-multi-select-combo-box-internal.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.js';
+import { multiSelectComboBox } from './vaadin-multi-select-combo-box-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-multi-select-combo-box>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class MultiSelectComboBox extends MultiSelectComboBoxMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-multi-select-combo-box';
+  }
+
+  static get styles() {
+    return [inputFieldShared, multiSelectComboBox];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-multi-select-combo-box-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
+        </div>
+
+        <vaadin-multi-select-combo-box-internal
+          id="comboBox"
+          .filteredItems="${this.filteredItems}"
+          .items="${this.items}"
+          .itemIdPath="${this.itemIdPath}"
+          .itemLabelPath="${this.itemLabelPath}"
+          .itemValuePath="${this.itemValuePath}"
+          .disabled="${this.disabled}"
+          .readonly="${this.readonly}"
+          .autoOpenDisabled="${this.autoOpenDisabled}"
+          .allowCustomValue="${this.allowCustomValue}"
+          .overlayClass="${this.overlayClass}"
+          .dataProvider="${this.dataProvider}"
+          .filter="${this.filter}"
+          .lastFilter="${this._lastFilter}"
+          .loading="${this.loading}"
+          .size="${this.size}"
+          .selectedItems="${this.selectedItems}"
+          .selectedItemsOnTop="${this.selectedItemsOnTop}"
+          .itemClassNameGenerator="${this.itemClassNameGenerator}"
+          .topGroup="${this._topGroup}"
+          .opened="${this.opened}"
+          .renderer="${this.renderer}"
+          .keepFilter="${this.keepFilter}"
+          theme="${ifDefined(this._theme)}"
+          @combo-box-item-selected="${this._onComboBoxItemSelected}"
+          @change="${this._onComboBoxChange}"
+          @custom-value-set="${this._onCustomValueSet}"
+          @filtered-items-changed="${this._onFilteredItemsChanged}"
+          @filter-changed="${this._onComboBoxFilterChanged}"
+          @last-filter-changed="${this._onComboBoxLastFilterChanged}"
+          @loading-changed="${this._onComboBoxLoadingChanged}"
+          @opened-changed="${this._onComboBoxOpenedChanged}"
+          @size-changed="${this._onComboBoxSizeChanged}"
+        >
+          <vaadin-multi-select-combo-box-container
+            part="input-field"
+            .autoExpandVertically="${this.autoExpandVertically}"
+            .readonly="${this.readonly}"
+            .disabled="${this.disabled}"
+            .invalid="${this.invalid}"
+            theme="${ifDefined(this._theme)}"
+          >
+            <slot name="overflow" slot="prefix"></slot>
+            <div id="chips" part="chips" slot="prefix">
+              <slot name="chip"></slot>
+            </div>
+            <slot name="input"></slot>
+            <div
+              id="clearButton"
+              part="clear-button"
+              slot="suffix"
+              @touchend="${this._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>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  /** @private */
+  _onComboBoxFilterChanged(event) {
+    this.filter = event.detail.value;
+  }
+
+  /** @private */
+  _onComboBoxLoadingChanged(event) {
+    this.loading = event.detail.value;
+  }
+
+  /** @private */
+  _onComboBoxLastFilterChanged(event) {
+    this._lastFilter = event.detail.value;
+  }
+
+  /** @private */
+  _onComboBoxOpenedChanged(event) {
+    this.opened = event.detail.value;
+  }
+
+  /** @private */
+  _onComboBoxSizeChanged(event) {
+    this.size = event.detail.value;
+  }
+}
+
+defineCustomElement(MultiSelectComboBox);
+
+export { MultiSelectComboBox };

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

@@ -5,7 +5,12 @@
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.js';
+
+registerStyles('vaadin-multi-select-combo-box-chip', multiSelectComboBoxChip, {
+  moduleId: 'vaadin-multi-select-combo-box-chip',
+});
 
 /**
  * An element used by `<vaadin-multi-select-combo-box>` to display selected items.
@@ -54,32 +59,6 @@ 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;
-        }
-
-        [part='label'] {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        :host([hidden]),
-        :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
-          display: none !important;
-        }
-
-        @media (forced-colors: active) {
-          :host {
-            outline: 1px solid;
-            outline-offset: -1px;
-          }
-        }
-      </style>
       <div part="label">[[label]]</div>
       <div part="remove-button" on-click="_onRemoveClick"></div>
     `;