@vaadin/combo-box 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -22,9 +22,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -38,26 +35,26 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/field-base": "25.0.0-alpha8",
-    "@vaadin/input-container": "25.0.0-alpha8",
-    "@vaadin/item": "25.0.0-alpha8",
-    "@vaadin/lit-renderer": "25.0.0-alpha8",
-    "@vaadin/overlay": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/field-base": "25.0.0-beta1",
+    "@vaadin/input-container": "25.0.0-beta1",
+    "@vaadin/item": "25.0.0-beta1",
+    "@vaadin/lit-renderer": "25.0.0-beta1",
+    "@vaadin/overlay": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

package/src/styles/vaadin-combo-box-base-styles.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2015 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const comboBoxStyles = css`
@@ -11,7 +11,7 @@ export const comboBoxStyles = css`
     pointer-events: auto;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-chevron-down);
   }
 `;

package/src/styles/vaadin-combo-box-overlay-base-styles.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2015 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
-import { loaderStyles } from '@vaadin/component-base/src/loader-styles.js';
+import { loaderStyles } from '@vaadin/component-base/src/styles/loader-styles.js';
 
 export const comboBoxOverlayStyles = [
   loaderStyles,

package/src/vaadin-combo-box-base-mixin.d.ts

@@ -7,7 +7,6 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 
@@ -18,7 +17,6 @@ export declare function ComboBoxBaseMixin<T extends Constructor<HTMLElement>>(
   Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<OverlayClassMixinClass> &
   Constructor<ValidateMixinClass> &
   T;
 

package/src/vaadin-combo-box-base-mixin.js

@@ -8,7 +8,6 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { isElementFocused, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
@@ -19,13 +18,10 @@ import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
  * @mixes FocusMixin
  * @mixes InputMixin
  * @mixes KeyboardMixin
- * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} superClass
  */
 export const ComboBoxBaseMixin = (superClass) =>
-  class ComboBoxMixinBaseClass extends OverlayClassMixin(
-    KeyboardMixin(InputMixin(DisabledMixin(FocusMixin(superClass)))),
-  ) {
+  class ComboBoxMixinBaseClass extends KeyboardMixin(InputMixin(DisabledMixin(FocusMixin(superClass)))) {
     static get properties() {
       return {
         /**
@@ -184,15 +180,6 @@ export const ComboBoxBaseMixin = (superClass) =>
         this.clearElement.addEventListener('mousedown', this._boundOnClearButtonMouseDown);
       }
 
-      const bringToFrontListener = () => {
-        requestAnimationFrame(() => {
-          this._overlayElement.bringToFront();
-        });
-      };
-
-      this.addEventListener('mousedown', bringToFrontListener);
-      this.addEventListener('touchstart', bringToFrontListener);
-
       this.addController(new VirtualKeyboardController(this));
     }
 
@@ -241,14 +228,13 @@ export const ComboBoxBaseMixin = (superClass) =>
 
     /**
      * Create and initialize the scroller element.
-     * Override to provide custom host reference.
      *
-     * @protected
+     * @private
      */
-    _initScroller(host) {
+    _initScroller() {
       const scroller = document.createElement(`${this._tagNamePrefix}-scroller`);
 
-      scroller.owner = host || this;
+      scroller.owner = this;
       scroller.getItemLabel = this._getItemLabel.bind(this);
       scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
@@ -259,21 +245,14 @@ export const ComboBoxBaseMixin = (superClass) =>
 
     /**
      * Render the scroller element to the overlay.
-     * Override to provide custom logic (e.g. setting "slot").
      *
-     * @protected
+     * @private
      */
     _renderScroller(scroller) {
-      const overlay = this.$.overlay;
-
-      overlay.renderer = (root) => {
-        if (!root.innerHTML) {
-          root.appendChild(scroller);
-        }
-      };
-
-      // Ensure the scroller is rendered
-      overlay.requestContentUpdate();
+      scroller.setAttribute('slot', 'overlay');
+      // Prevent focusing scroller on input Tab
+      scroller.setAttribute('tabindex', '-1');
+      this.appendChild(scroller);
     }
 
     /**

package/src/vaadin-combo-box-data-provider-mixin.js

@@ -58,11 +58,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     }
 
     static get observers() {
-      return [
-        '_dataProviderFilterChanged(filter)',
-        '_warnDataProviderValue(dataProvider, value)',
-        '_ensureFirstPage(opened)',
-      ];
+      return ['_dataProviderFilterChanged(filter)', '_ensureFirstPage(opened)'];
     }
 
     constructor() {
@@ -283,20 +279,4 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         throw new Error('Using `items` and `dataProvider` together is not supported');
       }
     }
-
-    /** @private */
-    _warnDataProviderValue(dataProvider, value) {
-      if (dataProvider && value !== '' && (this.selectedItem === undefined || this.selectedItem === null)) {
-        const valueIndex = this.__getItemIndexByValue(this.filteredItems, value);
-        if (valueIndex < 0 || !this._getItemLabel(this.filteredItems[valueIndex])) {
-          console.warn(
-            'Warning: unable to determine the label for the provided `value`. ' +
-              'Nothing to display in the text field. This usually happens when ' +
-              'setting an initial `value` before any items are returned from ' +
-              'the `dataProvider` callback. Consider setting `selectedItem` ' +
-              'instead of `value`',
-          );
-        }
-      }
-    }
   };

package/src/vaadin-combo-box-item-mixin.js

@@ -92,7 +92,7 @@ export const ComboBoxItemMixin = (superClass) =>
 
     /** @protected */
     _getHostDir() {
-      return this._owner && this._owner.getAttribute('dir');
+      return this._owner && this._owner.$.overlay.getAttribute('dir');
     }
 
     /**

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

@@ -7,7 +7,7 @@ import { html, LitElement } from 'lit';
 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 { itemStyles } from '@vaadin/item/src/styles/vaadin-item-core-styles.js';
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-base-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';

package/src/vaadin-combo-box-items-mixin.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ComboBoxBaseMixinClass } from './vaadin-combo-box-base-mixin.js';
+
+export declare function ComboBoxItemsMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxBaseMixinClass> & Constructor<ComboBoxItemsMixinClass<TItem>> & T;
+
+export declare class ComboBoxItemsMixinClass<TItem> {
+  /**
+   * A full set of items to filter the visible options from.
+   * The items can be of either `String` or `Object` type.
+   */
+  items: TItem[] | undefined;
+
+  /**
+   * A subset of items, filtered based on the user input. Filtered items
+   * can be assigned directly to omit the internal filtering functionality.
+   * The items can be of either `String` or `Object` type.
+   */
+  filteredItems: TItem[] | undefined;
+
+  /**
+   * Filtering string the user has typed into the input field.
+   */
+  filter: string;
+
+  /**
+   * A function that is used to generate the label for dropdown
+   * items based on the item. Receives one argument:
+   * - `item` The item to generate the label for.
+   */
+  itemLabelGenerator: ((item: TItem) => string) | undefined;
+
+  /**
+   * Path for label of the item. If `items` is an array of objects, the
+   * `itemLabelPath` is used to fetch the displayed string label for each
+   * item.
+   *
+   * The item label is also used for matching items when processing user
+   * input, i.e., for filtering and selecting items.
+   * @attr {string} item-label-path
+   */
+  itemLabelPath: string;
+
+  /**
+   * Path for the value of the item. If `items` is an array of objects, the
+   * `itemValuePath:` is used to fetch the string value for the selected
+   * item.
+   *
+   * The item value is used in the `value` property of the combo box,
+   * to provide the form value.
+   * @attr {string} item-value-path
+   */
+  itemValuePath: string;
+}

package/src/vaadin-combo-box-items-mixin.js

@@ -0,0 +1,292 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { get } from '@vaadin/component-base/src/path-utils.js';
+import { ComboBoxBaseMixin } from './vaadin-combo-box-base-mixin.js';
+import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
+
+/**
+ * Checks if the value is supported as an item value in this control.
+ *
+ * @param {unknown} value
+ * @return {boolean}
+ */
+function isValidValue(value) {
+  return value !== undefined && value !== null;
+}
+
+/**
+ * Returns the index of the first item that satisfies the provided testing function
+ * ignoring placeholder items.
+ *
+ * @param {Array<ComboBoxItem | string>} items
+ * @param {Function} callback
+ * @return {number}
+ */
+function findItemIndex(items, callback) {
+  return items.findIndex((item) => {
+    if (item instanceof ComboBoxPlaceholder) {
+      return false;
+    }
+
+    return callback(item);
+  });
+}
+
+/**
+ * @polymerMixin
+ * @mixes ComboBoxBaseMixin
+ */
+export const ComboBoxItemsMixin = (superClass) =>
+  class ComboBoxItemsMixinClass extends ComboBoxBaseMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * A full set of items to filter the visible options from.
+         * The items can be of either `String` or `Object` type.
+         * @type {!Array<!ComboBoxItem | string> | undefined}
+         */
+        items: {
+          type: Array,
+          sync: true,
+          observer: '_itemsChanged',
+        },
+
+        /**
+         * A subset of items, filtered based on the user input. Filtered items
+         * can be assigned directly to omit the internal filtering functionality.
+         * The items can be of either `String` or `Object` type.
+         * @type {!Array<!ComboBoxItem | string> | undefined}
+         */
+        filteredItems: {
+          type: Array,
+          observer: '_filteredItemsChanged',
+          sync: true,
+        },
+
+        /**
+         * Filtering string the user has typed into the input field.
+         * @type {string}
+         */
+        filter: {
+          type: String,
+          value: '',
+          notify: true,
+          sync: true,
+        },
+
+        /**
+         * A function that is used to generate the label for dropdown
+         * items based on the item. Receives one argument:
+         * - `item` The item to generate the label for.
+         */
+        itemLabelGenerator: {
+          type: Object,
+        },
+
+        /**
+         * Path for label of the item. If `items` is an array of objects, the
+         * `itemLabelPath` is used to fetch the displayed string label for each
+         * item.
+         *
+         * The item label is also used for matching items when processing user
+         * input, i.e., for filtering and selecting items.
+         * @attr {string} item-label-path
+         * @type {string}
+         */
+        itemLabelPath: {
+          type: String,
+          value: 'label',
+          observer: '_itemLabelPathChanged',
+          sync: true,
+        },
+
+        /**
+         * Path for the value of the item. If `items` is an array of objects, the
+         * `itemValuePath:` is used to fetch the string value for the selected
+         * item.
+         *
+         * The item value is used in the `value` property of the combo box,
+         * to provide the form value.
+         * @attr {string} item-value-path
+         * @type {string}
+         */
+        itemValuePath: {
+          type: String,
+          value: 'value',
+          sync: true,
+        },
+      };
+    }
+
+    /**
+     * @param {Object} props
+     * @protected
+     */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('filter')) {
+        this._filterChanged(this.filter);
+      }
+
+      if (props.has('itemLabelGenerator')) {
+        this.requestContentUpdate();
+      }
+    }
+
+    /**
+     * Override an event listener from `ComboBoxBaseMixin` to handle
+     * batched setting of both `opened` and `filter` properties.
+     * @param {!Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      const filter = this._inputElementValue;
+
+      // When opening dropdown on user input, both `opened` and `filter` properties are set.
+      // Perform a batched property update instead of relying on sync property observers.
+      // This is necessary to avoid an extra data-provider request for loading first page.
+      const props = {};
+
+      if (this.filter === filter) {
+        // Filter and input value might get out of sync, while keyboard navigating for example.
+        // Afterwards, input value might be changed to the same value as used in filtering.
+        // In situation like these, we need to make sure all the filter changes handlers are run.
+        this._filterChanged(this.filter);
+      } else {
+        props.filter = filter;
+      }
+
+      if (!this.opened && !this._isClearButton(event) && !this.autoOpenDisabled) {
+        props.opened = true;
+      }
+
+      this.setProperties(props);
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to handle item label path.
+     * @protected
+     * @override
+     */
+    _getItemLabel(item) {
+      if (typeof this.itemLabelGenerator === 'function' && item) {
+        return this.itemLabelGenerator(item) || '';
+      }
+
+      let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
+      if (label === undefined || label === null) {
+        label = item ? item.toString() : '';
+      }
+      return label;
+    }
+
+    /** @protected */
+    _getItemValue(item) {
+      let value = item && this.itemValuePath ? get(this.itemValuePath, item) : undefined;
+      if (value === undefined) {
+        value = item ? item.toString() : '';
+      }
+      return value;
+    }
+
+    /** @private */
+    _itemLabelPathChanged(itemLabelPath) {
+      if (typeof itemLabelPath !== 'string') {
+        console.error('You should set itemLabelPath to a valid string');
+      }
+    }
+
+    /** @private */
+    _filterChanged(filter) {
+      // Scroll to the top of the list whenever the filter changes.
+      this._scrollIntoView(0);
+
+      this._focusedIndex = -1;
+
+      if (this.items) {
+        this.filteredItems = this._filterItems(this.items, filter);
+      } else {
+        // With certain use cases (e. g., external filtering), `items` are
+        // undefined. Filtering is unnecessary per se, but the filteredItems
+        // observer should still be invoked to update focused item.
+        this._filteredItemsChanged(this.filteredItems);
+      }
+    }
+
+    /** @private */
+    _itemsChanged(items, oldItems) {
+      this._ensureItemsOrDataProvider(() => {
+        this.items = oldItems;
+      });
+
+      if (items) {
+        this.filteredItems = items.slice(0);
+      } else if (oldItems) {
+        // Only clear filteredItems if the component had items previously but got cleared
+        this.filteredItems = null;
+      }
+    }
+
+    /** @private */
+    _filteredItemsChanged(filteredItems) {
+      this._setDropdownItems(filteredItems);
+    }
+
+    /**
+     * Provide items to be rendered in the dropdown.
+     * Override to provide actual implementation.
+     * @protected
+     */
+    _setDropdownItems() {
+      // To be implemented
+    }
+
+    /** @private */
+    _filterItems(arr, filter) {
+      if (!arr) {
+        return arr;
+      }
+
+      const filteredItems = arr.filter((item) => {
+        filter = filter ? filter.toString().toLowerCase() : '';
+        // Check if item contains input value.
+        return this._getItemLabel(item).toString().toLowerCase().indexOf(filter) > -1;
+      });
+
+      return filteredItems;
+    }
+
+    /**
+     * Returns the first item that matches the provided value.
+     * @protected
+     */
+    __getItemIndexByValue(items, value) {
+      if (!items || !isValidValue(value)) {
+        return -1;
+      }
+
+      return findItemIndex(items, (item) => {
+        return this._getItemValue(item) === value;
+      });
+    }
+
+    /**
+     * Returns the first item that matches the provided label.
+     * Labels are matched against each other case insensitively.
+     * @protected
+     */
+    __getItemIndexByLabel(items, label) {
+      if (!items || !label) {
+        return -1;
+      }
+
+      return findItemIndex(items, (item) => {
+        return this._getItemLabel(item).toString().toLowerCase() === label.toString().toLowerCase();
+      });
+    }
+  };

package/src/vaadin-combo-box-mixin.d.ts

@@ -7,7 +7,6 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ComboBox } from './vaadin-combo-box.js';
@@ -26,7 +25,6 @@ export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>
   Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<OverlayClassMixinClass> &
   Constructor<ValidateMixinClass> &
   T;
 
@@ -44,12 +42,6 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   renderer: ComboBoxRenderer<TItem> | null | undefined;
 
-  /**
-   * A full set of items to filter the visible options from.
-   * The items can be of either `String` or `Object` type.
-   */
-  items: TItem[] | undefined;
-
   /**
    * A function used to generate CSS class names for dropdown
    * items based on the item. The return value should be the
@@ -67,13 +59,6 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   allowCustomValue: boolean;
 
-  /**
-   * A subset of items, filtered based on the user input. Filtered items
-   * can be assigned directly to omit the internal filtering functionality.
-   * The items can be of either `String` or `Object` type.
-   */
-  filteredItems: TItem[] | undefined;
-
   /**
    * The `String` value for the selected item of the combo box.
    *
@@ -89,38 +74,11 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   loading: boolean;
 
-  /**
-   * Filtering string the user has typed into the input field.
-   */
-  filter: string;
-
   /**
    * The selected item from the `items` array.
    */
   selectedItem: TItem | null | undefined;
 
-  /**
-   * Path for label of the item. If `items` is an array of objects, the
-   * `itemLabelPath` is used to fetch the displayed string label for each
-   * item.
-   *
-   * The item label is also used for matching items when processing user
-   * input, i.e., for filtering and selecting items.
-   * @attr {string} item-label-path
-   */
-  itemLabelPath: string;
-
-  /**
-   * Path for the value of the item. If `items` is an array of objects, the
-   * `itemValuePath:` is used to fetch the string value for the selected
-   * item.
-   *
-   * The item value is used in the `value` property of the combo box,
-   * to provide the form value.
-   * @attr {string} item-value-path
-   */
-  itemValuePath: string;
-
   /**
    * Path for the id of the item. If `items` is an array of objects,
    * the `itemIdPath` is used to compare and identify the same item