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

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/combo-box",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "files": [
     "src",
     "theme",
+    "lit.js",
+    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -34,23 +36,24 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/field-base": "23.1.0-alpha3",
-    "@vaadin/input-container": "23.1.0-alpha3",
-    "@vaadin/item": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/field-base": "23.1.0-beta2",
+    "@vaadin/input-container": "23.1.0-beta2",
+    "@vaadin/item": "23.1.0-beta2",
+    "@vaadin/lit-renderer": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-overlay": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "23.1.0-alpha3",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
+    "@vaadin/dialog": "23.1.0-beta2",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.1.0-alpha3",
+    "@vaadin/text-field": "23.1.0-beta2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

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

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { ComboBox, ComboBoxItemModel } from '../vaadin-combo-box.js';
+
+export type ComboBoxLitRenderer<TItem> = (
+  item: TItem,
+  model: ComboBoxItemModel<TItem>,
+  comboBox: ComboBox<TItem>,
+) => TemplateResult;
+
+export class ComboBoxRendererDirective<TItem> extends LitRendererDirective<ComboBox, ComboBoxLitRenderer<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-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-combo-box
+ *   ${comboBoxRenderer((item, model, comboBox) => html`...`)}
+ * ></vaadin-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 comboBoxRenderer<TItem>(
+  renderer: ComboBoxLitRenderer<TItem>,
+  dependencies?: unknown,
+): DirectiveResult<typeof ComboBoxRendererDirective>;

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 ComboBoxRendererDirective 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-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-combo-box
+ *   ${comboBoxRenderer((item, model, comboBox) => html`...`)}
+ * ></vaadin-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 comboBoxRenderer = directive(ComboBoxRendererDirective);

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

@@ -15,11 +15,11 @@ export interface ComboBoxDataProviderParams {
 
 export type ComboBoxDataProvider<TItem> = (
   params: ComboBoxDataProviderParams,
-  callback: ComboBoxDataProviderCallback<TItem>
+  callback: ComboBoxDataProviderCallback<TItem>,
 ) => void;
 
 export declare function ComboBoxDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ComboBoxDataProviderMixinClass<TItem>>;
 
 export declare class ComboBoxDataProviderMixinClass<TItem> {

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

@@ -20,7 +20,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         pageSize: {
           type: Number,
           value: 50,
-          observer: '_pageSizeChanged'
+          observer: '_pageSizeChanged',
         },
 
         /**
@@ -29,7 +29,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
          */
         size: {
           type: Number,
-          observer: '_sizeChanged'
+          observer: '_sizeChanged',
         },
 
         /**
@@ -48,20 +48,20 @@ export const ComboBoxDataProviderMixin = (superClass) =>
          */
         dataProvider: {
           type: Object,
-          observer: '_dataProviderChanged'
+          observer: '_dataProviderChanged',
         },
 
         /** @private */
         _pendingRequests: {
           value: () => {
             return {};
-          }
+          },
         },
 
         /** @private */
         __placeHolder: {
-          value: new ComboBoxPlaceholder()
-        }
+          value: new ComboBoxPlaceholder(),
+        },
       };
     }
 
@@ -70,7 +70,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         '_dataProviderFilterChanged(filter, dataProvider)',
         '_dataProviderClearFilter(dataProvider, opened, value)',
         '_warnDataProviderValue(dataProvider, value)',
-        '_ensureFirstPage(opened)'
+        '_ensureFirstPage(opened)',
       ];
     }
 
@@ -164,14 +164,14 @@ export const ComboBoxDataProviderMixin = (superClass) =>
 
     /** @private */
     _loadPage(page) {
-      // make sure same page isn't requested multiple times.
+      // Make sure same page isn't requested multiple times.
       if (!this._pendingRequests[page] && this.dataProvider) {
         this.loading = true;
 
         const params = {
           page,
           pageSize: this.pageSize,
-          filter: this.filter
+          filter: this.filter,
         };
 
         const callback = (items, size) => {
@@ -282,7 +282,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
               '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`'
+              'instead of `value`',
           );
         }
       }

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

@@ -48,7 +48,7 @@ export class ComboBoxDropdown extends PolymerElement {
        */
       positionTarget: {
         type: Object,
-        observer: '_positionTargetChanged'
+        observer: '_positionTargetChanged',
       },
 
       /**
@@ -62,7 +62,7 @@ export class ComboBoxDropdown extends PolymerElement {
       loading: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -71,31 +71,31 @@ export class ComboBoxDropdown extends PolymerElement {
       theme: String,
 
       _selectedItem: {
-        type: Object
+        type: Object,
       },
 
       _items: {
-        type: Array
+        type: Array,
       },
 
       _focusedIndex: {
         type: Number,
-        value: -1
+        value: -1,
       },
 
       focusedItem: {
         type: String,
-        computed: '_getFocusedItem(_focusedIndex)'
+        computed: '_getFocusedItem(_focusedIndex)',
       },
 
       _itemLabelPath: {
         type: String,
-        value: 'label'
+        value: 'label',
       },
 
       _itemValuePath: {
         type: String,
-        value: 'value'
+        value: 'value',
       },
 
       _scroller: Object,
@@ -104,15 +104,15 @@ export class ComboBoxDropdown extends PolymerElement {
 
       _overlayOpened: {
         type: Boolean,
-        observer: '_openedChanged'
-      }
+        observer: '_openedChanged',
+      },
     };
   }
 
   static get observers() {
     return [
       '_openedOrItemsChanged(opened, _items, loading)',
-      '__updateScroller(_scroller, _items, opened, loading, _selectedItem, _itemIdPath, _focusedIndex, renderer, theme)'
+      '__updateScroller(_scroller, _items, opened, loading, _selectedItem, _itemIdPath, _focusedIndex, renderer, theme)',
     ];
   }
 
@@ -174,8 +174,8 @@ export class ComboBoxDropdown extends PolymerElement {
   _fireTouchAction(sourceEvent) {
     this.dispatchEvent(
       new CustomEvent('vaadin-overlay-touch-action', {
-        detail: { sourceEvent: sourceEvent }
-      })
+        detail: { sourceEvent },
+      }),
     );
   }
 
@@ -265,7 +265,7 @@ export class ComboBoxDropdown extends PolymerElement {
         itemIdPath,
         focusedIndex,
         renderer,
-        theme
+        theme,
       });
     }
   }
@@ -275,7 +275,7 @@ export class ComboBoxDropdown extends PolymerElement {
   }
 
   _positionTargetChanged(target) {
-    // we must update the overlay width when the positionTarget is set (or changes)
+    // We must update the overlay width when the positionTarget is set (or changes)
     if (target) {
       this._setOverlayWidth();
     }
@@ -285,7 +285,7 @@ export class ComboBoxDropdown extends PolymerElement {
     if (!this.positionTarget) {
       return;
     }
-    const inputWidth = this.positionTarget.clientWidth + 'px';
+    const inputWidth = `${this.positionTarget.clientWidth}px`;
     const propPrefix = `${this.__hostTagName}-overlay`;
     const customWidth = getComputedStyle(this).getPropertyValue(`--${propPrefix}-width`);
 

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

@@ -79,7 +79,7 @@ export class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
       selected: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -88,7 +88,7 @@ export class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
       focused: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -99,7 +99,7 @@ export class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
       /**
        * Saved instance of a custom renderer function.
        */
-      _oldRenderer: Function
+      _oldRenderer: Function,
     };
   }
 
@@ -133,7 +133,7 @@ export class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
       index: this.index,
       item: this.item,
       focused: this.focused,
-      selected: this.selected
+      selected: this.selected,
     };
 
     this.renderer(this, this._comboBox, model);

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

@@ -13,7 +13,7 @@ import { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
   ComboBoxDataProviderCallback,
-  ComboBoxDataProviderParams
+  ComboBoxDataProviderParams,
 } from './vaadin-combo-box-data-provider-mixin.js';
 export { ComboBoxDefaultItem, ComboBoxItemModel, ComboBoxRenderer } from './vaadin-combo-box-mixin.js';
 
@@ -126,13 +126,13 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

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

@@ -101,8 +101,8 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
        */
       attrForValue: {
         type: String,
-        value: 'value'
-      }
+        value: 'value',
+      },
     };
   }
 
@@ -151,7 +151,7 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
   _isClearButton(event) {
     return (
       super._isClearButton(event) ||
-      (event.type === 'input' && !event.isTrusted) || // fake input event dispatched by clear button
+      (event.type === 'input' && !event.isTrusted) || // Fake input event dispatched by clear button
       event.composedPath()[0].getAttribute('part') === 'clear-button'
     );
   }

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

@@ -19,11 +19,11 @@ export interface ComboBoxItemModel<TItem> {
 export type ComboBoxRenderer<TItem> = (
   root: HTMLElement,
   comboBox: ComboBox<TItem>,
-  model: ComboBoxItemModel<TItem>
+  model: ComboBoxItemModel<TItem>,
 ) => void;
 
 export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T &
   Constructor<ComboBoxMixinClass<TItem>> &
   Constructor<DisabledMixinClass> &

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

@@ -29,7 +29,7 @@ export const ComboBoxMixin = (subclass) =>
           notify: true,
           value: false,
           reflectToAttribute: true,
-          observer: '_openedChanged'
+          observer: '_openedChanged',
         },
 
         /**
@@ -37,7 +37,7 @@ export const ComboBoxMixin = (subclass) =>
          * @attr {boolean} auto-open-disabled
          */
         autoOpenDisabled: {
-          type: Boolean
+          type: Boolean,
         },
 
         /**
@@ -47,7 +47,7 @@ export const ComboBoxMixin = (subclass) =>
         readonly: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /**
@@ -71,7 +71,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         items: {
           type: Array,
-          observer: '_itemsChanged'
+          observer: '_itemsChanged',
         },
 
         /**
@@ -84,7 +84,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         allowCustomValue: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -94,7 +94,7 @@ export const ComboBoxMixin = (subclass) =>
          * @type {!Array<!ComboBoxItem | string> | undefined}
          */
         filteredItems: {
-          type: Array
+          type: Array,
         },
 
         /**
@@ -111,7 +111,7 @@ export const ComboBoxMixin = (subclass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
-          observer: '_loadingChanged'
+          observer: '_loadingChanged',
         },
 
         /**
@@ -121,7 +121,7 @@ export const ComboBoxMixin = (subclass) =>
         _focusedIndex: {
           type: Number,
           observer: '_focusedIndexChanged',
-          value: -1
+          value: -1,
         },
 
         /**
@@ -131,7 +131,7 @@ export const ComboBoxMixin = (subclass) =>
         filter: {
           type: String,
           value: '',
-          notify: true
+          notify: true,
         },
 
         /**
@@ -140,7 +140,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         selectedItem: {
           type: Object,
-          notify: true
+          notify: true,
         },
 
         /**
@@ -156,7 +156,7 @@ export const ComboBoxMixin = (subclass) =>
         itemLabelPath: {
           type: String,
           value: 'label',
-          observer: '_itemLabelPathChanged'
+          observer: '_itemLabelPathChanged',
         },
 
         /**
@@ -171,7 +171,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         itemValuePath: {
           type: String,
-          value: 'value'
+          value: 'value',
         },
 
         /**
@@ -189,14 +189,14 @@ export const ComboBoxMixin = (subclass) =>
          */
         _toggleElement: {
           type: Object,
-          observer: '_toggleElementChanged'
+          observer: '_toggleElementChanged',
         },
 
         /** @private */
         _closeOnBlurIsPrevented: Boolean,
 
         /** @private */
-        __restoreFocusOnClose: Boolean
+        __restoreFocusOnClose: Boolean,
       };
     }
 
@@ -205,7 +205,7 @@ export const ComboBoxMixin = (subclass) =>
         '_filterChanged(filter, itemValuePath, itemLabelPath)',
         '_itemsOrPathsChanged(items.*, itemValuePath, itemLabelPath)',
         '_filteredItemsChanged(filteredItems.*, itemValuePath, itemLabelPath)',
-        '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)'
+        '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
       ];
     }
 
@@ -469,14 +469,14 @@ export const ComboBoxMixin = (subclass) =>
         this._onArrowDown();
         this._closeOnBlurIsPrevented = false;
 
-        // prevent caret from moving
+        // Prevent caret from moving
         e.preventDefault();
       } else if (e.key === 'ArrowUp') {
         this._closeOnBlurIsPrevented = true;
         this._onArrowUp();
         this._closeOnBlurIsPrevented = false;
 
-        // prevent caret from moving
+        // Prevent caret from moving
         e.preventDefault();
       } else if (e.key === 'Enter') {
         this._onEnter(e);
@@ -576,7 +576,7 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _onEnter(e) {
-      // do not commit value when custom values are disallowed and input value is not a valid option
+      // Do not commit value when custom values are disallowed and input value is not a valid option
       // also stop propagation of the event, otherwise the user could submit a form while the input
       // still contains an invalid value
       if (!this.allowCustomValue && this._inputElementValue !== '' && this._focusedIndex < 0) {
@@ -587,7 +587,7 @@ export const ComboBoxMixin = (subclass) =>
         return;
       }
 
-      // stop propagation of the enter event only if the dropdown is opened, this
+      // Stop propagation of the enter event only if the dropdown is opened, this
       // "consumes" the enter event for the action of closing the dropdown
       if (this.opened) {
         // Do not submit the surrounding form.
@@ -704,7 +704,7 @@ export const ComboBoxMixin = (subclass) =>
         if (this.selectedItem !== focusedItem) {
           this.selectedItem = focusedItem;
         }
-        // make sure input field is updated in case value doesn't change (i.e. FOO -> foo)
+        // Make sure input field is updated in case value doesn't change (i.e. FOO -> foo)
         this._inputElementValue = this._getItemLabel(this.selectedItem);
       } else if (this._inputElementValue === '' || this._inputElementValue === undefined) {
         this.selectedItem = null;
@@ -723,7 +723,7 @@ export const ComboBoxMixin = (subclass) =>
 
         if (
           this.allowCustomValue &&
-          // to prevent a repetitive input value being saved after pressing ESC and Tab.
+          // To prevent a repetitive input value being saved after pressing ESC and Tab.
           !itemMatchingByLabel
         ) {
           const customValue = this._inputElementValue;
@@ -737,7 +737,7 @@ export const ComboBoxMixin = (subclass) =>
             detail: customValue,
             composed: true,
             cancelable: true,
-            bubbles: true
+            bubbles: true,
           });
           this.dispatchEvent(e);
           if (!e.defaultPrevented) {
@@ -971,10 +971,11 @@ export const ComboBoxMixin = (subclass) =>
           this._selectItemForValue(this.value);
         }
 
-        if (this._inputElementValue === undefined || this._inputElementValue === this.value) {
+        const inputValue = this._inputElementValue;
+        if (inputValue === undefined || inputValue === this._getItemLabel(this.selectedItem)) {
           // When the input element value is the same as the current value or not defined,
           // set the focused index to the item that matches the value.
-          this._focusedIndex = this._indexOfValue(this.value, this.filteredItems);
+          this._focusedIndex = this.$.dropdown.indexOfLabel(this._getItemLabel(this.selectedItem));
         } else {
           // When the user filled in something that is different from the current value = filtering is enabled,
           // set the focused index to the item that matches the filter query.
@@ -1056,7 +1057,7 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _overlaySelectedItemChanged(e) {
-      // stop this private event from leaking outside.
+      // Stop this private event from leaking outside.
       e.stopPropagation();
 
       if (e.detail.item instanceof ComboBoxPlaceholder) {

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

@@ -20,7 +20,7 @@ registerStyles(
       height: 100%;
     }
   `,
-  { moduleId: 'vaadin-combo-box-overlay-styles' }
+  { moduleId: 'vaadin-combo-box-overlay-styles' },
 );
 
 let memoizedTemplate;

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

@@ -56,7 +56,7 @@ export class ComboBoxScroller extends PolymerElement {
        */
       items: {
         type: Array,
-        observer: '__itemsChanged'
+        observer: '__itemsChanged',
       },
 
       /**
@@ -65,7 +65,7 @@ export class ComboBoxScroller extends PolymerElement {
        */
       focusedIndex: {
         type: Number,
-        observer: '__focusedIndexChanged'
+        observer: '__focusedIndexChanged',
       },
 
       /**
@@ -73,7 +73,7 @@ export class ComboBoxScroller extends PolymerElement {
        */
       loading: {
         type: Boolean,
-        observer: '__loadingChanged'
+        observer: '__loadingChanged',
       },
 
       /**
@@ -82,35 +82,35 @@ export class ComboBoxScroller extends PolymerElement {
        */
       opened: {
         type: Boolean,
-        observer: '__openedChanged'
+        observer: '__openedChanged',
       },
 
       /**
        * The selected item from the `items` array.
        */
       selectedItem: {
-        type: Object
+        type: Object,
       },
 
       /**
        * Path for the id of the item, used to detect whether the item is selected.
        */
       itemIdPath: {
-        type: String
+        type: String,
       },
 
       /**
        * Reference to the combo-box, used by the item elements.
        */
       comboBox: {
-        type: Object
+        type: Object,
       },
 
       /**
        * Function used to set a label for every combo-box item.
        */
       getItemLabel: {
-        type: Object
+        type: Object,
       },
 
       /**
@@ -118,15 +118,15 @@ export class ComboBoxScroller extends PolymerElement {
        */
       renderer: {
         type: Object,
-        observer: '__rendererChanged'
+        observer: '__rendererChanged',
       },
 
       /**
        * Used to propagate the `theme` attribute from the host element.
        */
       theme: {
-        type: String
-      }
+        type: String,
+      },
     };
   }
 
@@ -159,7 +159,7 @@ export class ComboBoxScroller extends PolymerElement {
       updateElement: this.__updateElement.bind(this),
       elementsContainer: this,
       scrollTarget: this,
-      scrollContainer: this.$.selector
+      scrollContainer: this.$.selector,
     });
   }
 
@@ -193,7 +193,7 @@ export class ComboBoxScroller extends PolymerElement {
 
     // Sometimes the item is partly below the bottom edge, detect and adjust.
     const lastPhysicalItem = [...this.children].find(
-      (el) => !el.hidden && el.index === this.__virtualizer.lastVisibleIndex
+      (el) => !el.hidden && el.index === this.__virtualizer.lastVisibleIndex,
     );
     if (!lastPhysicalItem || index !== lastPhysicalItem.index) {
       return;
@@ -218,7 +218,7 @@ export class ComboBoxScroller extends PolymerElement {
 
   /** @private */
   __isItemFocused(focusedIndex, itemIndex) {
-    return focusedIndex == itemIndex;
+    return focusedIndex === itemIndex;
   }
 
   /** @private */
@@ -294,7 +294,7 @@ export class ComboBoxScroller extends PolymerElement {
       label: this.getItemLabel(item),
       selected: this.__isItemSelected(item, this.selectedItem, this.itemIdPath),
       renderer: this.renderer,
-      focused: this.__isItemFocused(focusedIndex, index)
+      focused: this.__isItemFocused(focusedIndex, index),
     });
 
     el.id = `${this.__hostTagName}-item-${index}`;
@@ -355,7 +355,7 @@ export class ComboBoxScroller extends PolymerElement {
   __requestItemByIndex(item, index) {
     if (item instanceof ComboBoxPlaceholder && index !== undefined) {
       this.dispatchEvent(
-        new CustomEvent('index-requested', { detail: { index, currentScrollerPos: this._oldScrollerPosition } })
+        new CustomEvent('index-requested', { detail: { index, currentScrollerPos: this._oldScrollerPosition } }),
       );
     }
 

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

@@ -24,7 +24,7 @@ import { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
 export {
   ComboBoxDataProvider,
   ComboBoxDataProviderCallback,
-  ComboBoxDataProviderParams
+  ComboBoxDataProviderParams,
 } from './vaadin-combo-box-data-provider-mixin.js';
 export { ComboBoxDefaultItem, ComboBoxItemModel, ComboBoxRenderer } from './vaadin-combo-box-mixin.js';
 
@@ -212,13 +212,13 @@ declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: ComboBox<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: ComboBox<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-combo-box.js

@@ -154,7 +154,7 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * @mixes ComboBoxMixin
  */
 class ComboBox extends ComboBoxDataProviderMixin(
-  ComboBoxMixin(PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))))
+  ComboBoxMixin(PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement))))),
 ) {
   static get is() {
     return 'vaadin-combo-box';
@@ -218,8 +218,8 @@ class ComboBox extends ComboBoxDataProviderMixin(
        * @protected
        */
       _positionTarget: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
@@ -242,7 +242,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
         this._setFocusElement(input);
         this.stateTarget = input;
         this.ariaTarget = input;
-      })
+      }),
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');

package/theme/lumo/vaadin-combo-box-dropdown-styles.js

@@ -89,5 +89,5 @@ const comboBoxOverlay = css`
 `;
 
 registerStyles('vaadin-combo-box-overlay', [overlay, menuOverlayCore, comboBoxOverlay], {
-  moduleId: 'lumo-combo-box-overlay'
+  moduleId: 'lumo-combo-box-overlay',
 });

package/theme/lumo/vaadin-combo-box-item-styles.js

@@ -19,5 +19,5 @@ const comboBoxItem = css`
 `;
 
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
-  moduleId: 'lumo-combo-box-item'
+  moduleId: 'lumo-combo-box-item',
 });

package/theme/material/vaadin-combo-box-dropdown-styles.js

@@ -117,5 +117,5 @@ const comboBoxOverlay = css`
 `;
 
 registerStyles('vaadin-combo-box-overlay', [menuOverlay, comboBoxOverlay], {
-  moduleId: 'material-combo-box-overlay'
+  moduleId: 'material-combo-box-overlay',
 });

package/theme/material/vaadin-combo-box-item-styles.js

@@ -14,5 +14,5 @@ const comboBoxItem = css`
 `;
 
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
-  moduleId: 'material-combo-box-item'
+  moduleId: 'material-combo-box-item',
 });