@vaadin/combo-box 25.0.0-alpha2 → 25.0.0-alpha21

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

@@ -22,18 +22,6 @@ export const ComboBoxOverlayMixin = (superClass) =>
       this.requiredVerticalSpace = 200;
     }
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      const comboBox = this._comboBox;
-
-      const hostDir = comboBox && comboBox.getAttribute('dir');
-      if (hostDir) {
-        this.setAttribute('dir', hostDir);
-      }
-    }
-
     /**
      * Override method inherited from `Overlay`
      * to not close on position target click.
@@ -63,16 +51,7 @@ export const ComboBoxOverlayMixin = (superClass) =>
 
     /** @protected */
     _updateOverlayWidth() {
-      const propPrefix = this.localName;
-      this.style.setProperty(`--_${propPrefix}-default-width`, `${this.positionTarget.offsetWidth}px`);
-
-      const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
-
-      if (customWidth === '') {
-        this.style.removeProperty(`--${propPrefix}-width`);
-      } else {
-        this.style.setProperty(`--${propPrefix}-width`, customWidth);
-      }
+      this.style.setProperty(`--_${this.localName}-default-width`, `${this.positionTarget.offsetWidth}px`);
     }
 
     /** @private */

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

@@ -7,10 +7,11 @@ 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 { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-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 { comboBoxOverlayStyles } from './styles/vaadin-combo-box-overlay-core-styles.js';
+import { comboBoxOverlayStyles } from './styles/vaadin-combo-box-overlay-base-styles.js';
 import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
 
 /**
@@ -25,7 +26,7 @@ import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
  * @private
  */
 export class ComboBoxOverlay extends ComboBoxOverlayMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-combo-box-overlay';
@@ -38,7 +39,6 @@ export class ComboBoxOverlay extends ComboBoxOverlayMixin(
   /** @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>

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

@@ -45,8 +45,7 @@ export declare class ComboBoxScrollerMixinClass<TItem, TOwner> {
   owner: TOwner;
 
   /**
-   * Set true to prevent the overlay from opening automatically.
-   * @attr {boolean} auto-open-disabled
+   * Function used to render the content of every combo-box item.
    */
   renderer: ComboBoxItemRenderer<TItem, TOwner> | null | undefined;
 

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

@@ -234,6 +234,11 @@ export const ComboBoxScrollerMixin = (superClass) =>
         scrollTarget: this,
         scrollContainer: this.$.selector,
         reorderElements: true,
+        // Combo-box items have a CSS-defined minimum height, so the virtualizer's
+        // height placeholder logic can be disabled. This helps save reflows which
+        // might otherwise be triggered by this logic because it reads the row height
+        // right after updating the rows' content.
+        __disableHeightPlaceholder: true,
       });
     }
 

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

@@ -6,7 +6,7 @@
 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 { comboBoxScrollerStyles } from './styles/vaadin-combo-box-scroller-core-styles.js';
+import { comboBoxScrollerStyles } from './styles/vaadin-combo-box-scroller-base-styles.js';
 import { ComboBoxScrollerMixin } from './vaadin-combo-box-scroller-mixin.js';
 
 /**

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

@@ -9,7 +9,6 @@ import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
@@ -20,7 +19,9 @@ import type { PatternMixinClass } from '@vaadin/field-base/src/pattern-mixin.js'
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import type { ComboBoxBaseMixinClass } from './vaadin-combo-box-base-mixin.js';
 import type { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxItemsMixinClass } from './vaadin-combo-box-items-mixin.js';
 import type { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 import type { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
 
@@ -174,33 +175,45 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  *
- * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
+ * The following shadow DOM parts are available for styling:
  *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `toggle-button`      | The toggle button
+ * `overlay`            | The overlay container
+ * `content`            | The overlay content
+ * `loader`             | The loading indicator shown while loading items
  *
- * Part name       | Description
- * ----------------|----------------
- * `toggle-button` | The toggle button
+ * The following state attributes are available for styling:
  *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
- *
- * Attribute | Description | Part name
- * ----------|-------------|------------
- * `opened`  | Set when the combo box dropdown is open | :host
- * `loading` | Set when new items are expected | :host
+ * Attribute            | Description
+ * ---------------------|---------------------------------
+ * `disabled`           | Set when the element is disabled
+ * `has-value`          | Set when the element has a value
+ * `has-label`          | Set when the element has a label
+ * `has-helper`         | Set when the element has helper text or slot
+ * `has-error-message`  | Set when the element has an error message
+ * `has-tooltip`        | Set when the element has a slotted tooltip
+ * `invalid`            | Set when the element is invalid
+ * `focused`            | Set when the element is focused
+ * `focus-ring`         | Set when the element is keyboard focused
+ * `readonly`           | Set when the element is readonly
+ * `opened`             | Set when the overlay is opened
+ * `loading`            | Set when loading items from the data provider
  *
  * ### Internal components
  *
  * In addition to `<vaadin-combo-box>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
- * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
- *
- * Note: the `theme` attribute value set on `<vaadin-combo-box>` is
- * propagated to the internal components listed above.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -229,12 +242,13 @@ declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
 
 interface ComboBox<TItem = ComboBoxDefaultItem>
   extends ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxItemsMixinClass<TItem>,
     ComboBoxMixinClass<TItem>,
+    ComboBoxBaseMixinClass,
     ValidateMixinClass,
     PatternMixinClass,
     LabelMixinClass,
     KeyboardMixinClass,
-    OverlayClassMixinClass,
     InputMixinClass,
     ClearButtonMixinClass,
     InputControlMixinClass,

package/src/vaadin-combo-box.js

@@ -18,8 +18,9 @@ import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-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 { comboBoxStyles } from './styles/vaadin-combo-box-core-styles.js';
+import { comboBoxStyles } from './styles/vaadin-combo-box-base-styles.js';
 import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
 
@@ -106,33 +107,45 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  *
- * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
+ * The following shadow DOM parts are available for styling:
  *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `toggle-button`      | The toggle button
+ * `overlay`            | The overlay container
+ * `content`            | The overlay content
+ * `loader`             | The loading indicator shown while loading items
  *
- * Part name       | Description
- * ----------------|----------------
- * `toggle-button` | The toggle button
+ * The following state attributes are available for styling:
  *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
- *
- * Attribute | Description | Part name
- * ----------|-------------|------------
- * `opened`  | Set when the combo box dropdown is open | :host
- * `loading` | Set when new items are expected | :host
+ * Attribute            | Description
+ * ---------------------|---------------------------------
+ * `disabled`           | Set when the element is disabled
+ * `has-value`          | Set when the element has a value
+ * `has-label`          | Set when the element has a label
+ * `has-helper`         | Set when the element has helper text or slot
+ * `has-error-message`  | Set when the element has an error message
+ * `has-tooltip`        | Set when the element has a slotted tooltip
+ * `invalid`            | Set when the element is invalid
+ * `focused`            | Set when the element is focused
+ * `focus-ring`         | Set when the element is keyboard focused
+ * `readonly`           | Set when the element is readonly
+ * `opened`             | Set when the overlay is opened
+ * `loading`            | Set when loading items from the data provider
  *
  * ### Internal components
  *
  * In addition to `<vaadin-combo-box>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
- * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
- *
- * Note: the `theme` attribute value set on `<vaadin-combo-box>` is
- * propagated to the internal components listed above.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -155,7 +168,9 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  * @mixes ComboBoxMixin
  */
 class ComboBox extends ComboBoxDataProviderMixin(
-  ComboBoxMixin(PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))))),
+  ComboBoxMixin(
+    PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
+  ),
 ) {
   static get is() {
     return 'vaadin-combo-box';
@@ -203,8 +218,8 @@ class ComboBox extends ComboBoxDataProviderMixin(
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+          <div id="clearButton" part="field-button clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="field-button toggle-button" slot="suffix" aria-hidden="true"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -218,12 +233,17 @@ class ComboBox extends ComboBoxDataProviderMixin(
 
       <vaadin-combo-box-overlay
         id="overlay"
+        exportparts="overlay, content, loader"
+        .owner="${this}"
+        .dir="${this.dir}"
         .opened="${this._overlayOpened}"
         ?loading="${this.loading}"
         theme="${ifDefined(this._theme)}"
         .positionTarget="${this._positionTarget}"
         no-vertical-overlap
-      ></vaadin-combo-box-overlay>
+      >
+        <slot name="overlay"></slot>
+      </vaadin-combo-box-overlay>
 
       <slot name="tooltip"></slot>
     `;
@@ -253,6 +273,15 @@ class ComboBox extends ComboBoxDataProviderMixin(
     this._toggleElement = this.$.toggleButton;
   }
 
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('dataProvider') || props.has('value')) {
+      this._warnDataProviderValue(this.dataProvider, this.value);
+    }
+  }
+
   /**
    * Override the method from `InputControlMixin`
    * to stop event propagation to prevent `ComboBoxMixin`
@@ -279,6 +308,22 @@ class ComboBox extends ComboBoxDataProviderMixin(
       super._onHostClick(event);
     }
   }
+
+  /** @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`',
+        );
+      }
+    }
+  }
 }
 
 defineCustomElement(ComboBox);

package/vaadin-combo-box.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-combo-box.js';
+import './src/vaadin-combo-box.js';
 export * from './src/vaadin-combo-box.js';