@vaadin/combo-box 23.1.0-beta1 → 23.1.0-beta4

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-beta1",
+  "version": "23.1.0-beta4",
   "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-beta1",
-    "@vaadin/field-base": "23.1.0-beta1",
-    "@vaadin/input-container": "23.1.0-beta1",
-    "@vaadin/item": "23.1.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-beta1",
-    "@vaadin/vaadin-material-styles": "23.1.0-beta1",
-    "@vaadin/vaadin-overlay": "23.1.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-beta1"
+    "@vaadin/component-base": "23.1.0-beta4",
+    "@vaadin/field-base": "23.1.0-beta4",
+    "@vaadin/input-container": "23.1.0-beta4",
+    "@vaadin/item": "23.1.0-beta4",
+    "@vaadin/lit-renderer": "23.1.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta4",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta4",
+    "@vaadin/vaadin-overlay": "23.1.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "23.1.0-beta1",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-beta1",
+    "@vaadin/dialog": "23.1.0-beta4",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.1.0-beta1",
+    "@vaadin/text-field": "23.1.0-beta4",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
+  "gitHead": "06e283473964ecb3085aacf3eddb5333d052a045"
 }

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.js

@@ -164,7 +164,7 @@ 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;
 

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

@@ -174,7 +174,7 @@ export class ComboBoxDropdown extends PolymerElement {
   _fireTouchAction(sourceEvent) {
     this.dispatchEvent(
       new CustomEvent('vaadin-overlay-touch-action', {
-        detail: { sourceEvent: sourceEvent },
+        detail: { sourceEvent },
       }),
     );
   }
@@ -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();
     }

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

@@ -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.js

@@ -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;
@@ -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-scroller.js

@@ -259,7 +259,9 @@ export class ComboBoxScroller extends PolymerElement {
       this.requestContentUpdate();
     }
 
-    if (index >= 0) {
+    // Do not jump back to the previously focused item while loading
+    // when requesting next page from the data provider on scroll.
+    if (index >= 0 && !this.loading) {
       this.scrollIntoView(index);
     }
   }