@vaadin/multi-select-combo-box 24.0.0-alpha12 → 24.0.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -37,18 +37,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "24.0.0-alpha12",
-    "@vaadin/component-base": "24.0.0-alpha12",
-    "@vaadin/field-base": "24.0.0-alpha12",
-    "@vaadin/input-container": "24.0.0-alpha12",
-    "@vaadin/lit-renderer": "24.0.0-alpha12",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha12"
+    "@vaadin/combo-box": "24.0.0-alpha13",
+    "@vaadin/component-base": "24.0.0-alpha13",
+    "@vaadin/field-base": "24.0.0-alpha13",
+    "@vaadin/input-container": "24.0.0-alpha13",
+    "@vaadin/lit-renderer": "24.0.0-alpha13",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha13"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7e29eee4d522fb7b03ac8e7e385e9057d71c79ce"
+  "gitHead": "a423ad309c12b4e4f847737ee9f491f83ea60ff0"
 }

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

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ComboBoxDefaultItem, ComboBoxItemMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import type { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { MultiSelectComboBox } from './vaadin-multi-select-combo-box.js';
+
+/**
+ * An item element used by the `<vaadin-multi-select-combo-box>` dropdown.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
+ *
+ * The following state attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ */
+declare class MultiSelectComboBoxItem extends HTMLElement {}
+
+interface MultiSelectComboBoxItem<TItem = ComboBoxDefaultItem>
+  extends ComboBoxItemMixinClass<TItem, MultiSelectComboBox>,
+    DirMixinClass,
+    ThemableMixinClass {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-multi-select-combo-box-item': MultiSelectComboBoxItem;
+  }
+}
+
+export { MultiSelectComboBoxItem };

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

@@ -3,35 +3,59 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ComboBoxItem } from '@vaadin/combo-box/src/vaadin-combo-box-item.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used for items in `<vaadin-multi-select-combo-box>`.
+ * An item element used by the `<vaadin-multi-select-combo-box>` dropdown.
  *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------|-------------
- * `content` | The element that wraps the item content
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
  *
  * The following state attributes are exposed for styling:
  *
- * Attribute  | Description                   | Part name
- * -----------|-------------------------------|-----------
- * `selected` | Set when the item is selected | :host
- * `focused`  | Set when the item is focused  | :host
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
- * @extends ComboBoxItem
+ * @mixes ComboBoxItemMixin
+ * @mixes ThemableMixin
+ * @mixes DirMixin
  * @private
  */
-class MultiSelectComboBoxItem extends ComboBoxItem {
+export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-item';
   }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
 }
 
 customElements.define(MultiSelectComboBoxItem.is, MultiSelectComboBoxItem);

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ */
+declare class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-multi-select-combo-box-overlay': MultiSelectComboBoxOverlay;
+  }
+}
+
+export { MultiSelectComboBoxOverlay };

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

@@ -3,7 +3,8 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ComboBoxOverlay } from '@vaadin/combo-box/src/vaadin-combo-box-overlay.js';
+import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -15,20 +16,44 @@ registerStyles(
         var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
       );
     }
+
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
   `,
   { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' },
 );
 
+let memoizedTemplate;
+
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
  * @extends ComboBoxOverlay
  * @private
  */
-class MultiSelectComboBoxOverlay extends ComboBoxOverlay {
+class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
   static get is() {
     return 'vaadin-multi-select-combo-box-overlay';
   }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+
+      const overlay = memoizedTemplate.content.querySelector('[part~="overlay"]');
+      overlay.removeAttribute('tabindex');
+
+      const loader = document.createElement('div');
+      loader.setAttribute('part', 'loader');
+
+      overlay.insertBefore(loader, overlay.firstElementChild);
+    }
+
+    return memoizedTemplate;
+  }
 }
 
 customElements.define(MultiSelectComboBoxOverlay.is, MultiSelectComboBoxOverlay);

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ */
+declare class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(HTMLElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-multi-select-combo-box-scroller': MultiSelectComboBoxScroller;
+  }
+}
+
+export { MultiSelectComboBoxScroller };

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

@@ -3,20 +3,52 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
-import { ComboBoxScroller } from '@vaadin/combo-box/src/vaadin-combo-box-scroller.js';
+import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
- * @extends ComboBoxScroller
+ * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
  * @private
  */
-class MultiSelectComboBoxScroller extends ComboBoxScroller {
+export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolymerElement) {
   static get is() {
     return 'vaadin-multi-select-combo-box-scroller';
   }
 
+  static get template() {
+    return html`
+      <style>
+        :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);
+        }
+      </style>
+      <div id="selector">
+        <slot></slot>
+      </div>
+    `;
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -24,30 +56,32 @@ class MultiSelectComboBoxScroller extends ComboBoxScroller {
     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) {
+  /**
+   * @protected
+   * @override
+   */
+  _isItemSelected(item, _selectedItem, itemIdPath) {
     if (item instanceof ComboBoxPlaceholder) {
       return false;
     }
 
-    if (this.comboBox.readonly) {
+    if (this.owner.readonly) {
       return false;
     }
 
-    return this.comboBox._findIndex(item, this.comboBox.selectedItems, itemIdPath) > -1;
+    return this.owner._findIndex(item, this.owner.selectedItems, itemIdPath) > -1;
   }
 
-  /** @private */
-  __updateElement(el, index) {
-    super.__updateElement(el, index);
+  /**
+   * @param {HTMLElement} el
+   * @param {number} index
+   * @protected
+   * @override
+   */
+  _updateElement(el, index) {
+    super._updateElement(el, index);
 
-    el.toggleAttribute('readonly', this.comboBox.readonly);
+    el.toggleAttribute('readonly', this.owner.readonly);
   }
 }
 

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

@@ -7,22 +7,44 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { comboBoxItem } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
+import { comboBoxLoader, comboBoxOverlay } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-overlay-styles.js';
+import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
+import { loader } from '@vaadin/vaadin-lumo-styles/mixins/loader.js';
+import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const multiSelectComboBoxItem = css`
+  @media (any-hover: hover) {
+    :host(:hover[readonly]) {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+`;
+
+registerStyles('vaadin-multi-select-combo-box-item', [item, comboBoxItem, multiSelectComboBoxItem], {
+  moduleId: 'lumo-multi-select-combo-box-item',
+});
+
 registerStyles(
-  'vaadin-multi-select-combo-box-item',
-  css`
-    @media (any-hover: hover) {
-      :host(:hover[readonly]) {
-        background-color: transparent;
-        cursor: default;
+  'vaadin-multi-select-combo-box-overlay',
+  [
+    overlay,
+    menuOverlayCore,
+    comboBoxOverlay,
+    loader,
+    comboBoxLoader,
+    css`
+      :host {
+        --_vaadin-multi-select-combo-box-items-container-border-width: var(--lumo-space-xs);
+        --_vaadin-multi-select-combo-box-items-container-border-style: solid;
       }
-    }
-  `,
-  {
-    moduleId: 'lumo-multi-select-combo-box-item',
-  },
+    `,
+  ],
+  { moduleId: 'lumo-multi-select-combo-box-overlay' },
 );
 
 const multiSelectComboBox = css`

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

@@ -3,9 +3,8 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
-import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-dropdown-styles.js';
 import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
+import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';
 import './vaadin-multi-select-combo-box-styles.js';
 import '../../src/vaadin-multi-select-combo-box.js';

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

@@ -6,22 +6,42 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { comboBoxItem } from '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
+import { comboBoxLoader, comboBoxOverlay } from '@vaadin/combo-box/theme/material/vaadin-combo-box-overlay-styles.js';
+import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
+import { loader } from '@vaadin/vaadin-material-styles/mixins/loader.js';
+import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const multiSelectComboBoxItem = css`
+  @media (any-hover: hover) {
+    :host(:hover[readonly]) {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+`;
+
+registerStyles('vaadin-multi-select-combo-box-item', [item, comboBoxItem, multiSelectComboBoxItem], {
+  moduleId: 'material-multi-select-combo-box-item',
+});
+
 registerStyles(
-  'vaadin-multi-select-combo-box-item',
-  css`
-    @media (any-hover: hover) {
-      :host(:hover[readonly]) {
-        background-color: transparent;
-        cursor: default;
+  'vaadin-multi-select-combo-box-overlay',
+  [
+    menuOverlay,
+    comboBoxOverlay,
+    loader,
+    comboBoxLoader,
+    css`
+      :host {
+        --_vaadin-multi-select-combo-box-items-container-border-width: 8px 0;
+        --_vaadin-multi-select-combo-box-items-container-border-style: solid;
       }
-    }
-  `,
-  {
-    moduleId: 'material-multi-select-combo-box-item',
-  },
+    `,
+  ],
+  { moduleId: 'material-multi-select-combo-box-overlay' },
 );
 
 const multiSelectComboBox = css`

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

@@ -3,9 +3,8 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
-import '@vaadin/combo-box/theme/material/vaadin-combo-box-dropdown-styles.js';
 import '@vaadin/input-container/theme/material/vaadin-input-container.js';
+import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';
 import './vaadin-multi-select-combo-box-styles.js';
 import '../../src/vaadin-multi-select-combo-box.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {