@vaadin/vaadin-combo-box - npm Package Compare versions

Comparing version 21.0.0-alpha1 to 21.0.0-alpha10

package.json

 {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "21.0.0-alpha1",
+  "version": "21.0.0-alpha10",
   "description": "Web Component for displaying a list of items with filtering",
@@ -31,10 +31,10 @@ "main": "vaadin-combo-box.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-control-state-mixin": "^21.0.0-alpha1",
-    "@vaadin/vaadin-element-mixin": "^21.0.0-alpha1",
-    "@vaadin/vaadin-item": "^21.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "^21.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "^21.0.0-alpha1",
-    "@vaadin/vaadin-overlay": "^21.0.0-alpha1",
-    "@vaadin/vaadin-text-field": "^21.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha1"
+    "@vaadin/vaadin-control-state-mixin": "^21.0.0-alpha10",
+    "@vaadin/vaadin-element-mixin": "^21.0.0-alpha10",
+    "@vaadin/vaadin-item": "^21.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "^21.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "^21.0.0-alpha10",
+    "@vaadin/vaadin-overlay": "^21.0.0-alpha10",
+    "@vaadin/vaadin-text-field": "^21.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha10"
   },
@@ -46,4 +46,4 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-dialog": "^21.0.0-alpha1",
-    "@vaadin/vaadin-template-renderer": "^21.0.0-alpha1",
+    "@vaadin/vaadin-dialog": "^21.0.0-alpha10",
+    "@vaadin/vaadin-template-renderer": "^21.0.0-alpha10",
     "sinon": "^9.2.0"
@@ -54,3 +54,3 @@ },
   },
-  "gitHead": "8542c7dadc4c86e454a48613f0f2d027dcb5aa86"
+  "gitHead": "9e75b3416edc041e35720c29a842423a1da66e60"
 }

src/interfaces.d.ts

@@ -1,13 +0,17 @@
-import { ComboBoxElement } from '../src/vaadin-combo-box.js';
+import { ComboBoxElement } from './vaadin-combo-box';
 
-export type ComboBoxItem = unknown;
+export type ComboBoxDefaultItem = any;
 
-export interface ComboBoxItemModel {
+export interface ComboBoxItemModel<TItem> {
   index: number;
-  item: ComboBoxItem | string;
+  item: TItem;
 }
 
-export type ComboBoxRenderer = (root: HTMLElement, comboBox: ComboBoxElement, model: ComboBoxItemModel) => void;
+export type ComboBoxRenderer<TItem> = (
+  root: HTMLElement,
+  comboBox: ComboBoxElement<TItem>,
+  model: ComboBoxItemModel<TItem>
+) => void;
 
-export type ComboBoxDataProviderCallback = (items: Array<ComboBoxItem | string>, size: number) => void;
+export type ComboBoxDataProviderCallback<TItem> = (items: Array<TItem>, size: number) => void;
 
@@ -20,3 +24,6 @@ export interface ComboBoxDataProviderParams {
 
-export type ComboBoxDataProvider = (params: ComboBoxDataProviderParams, callback: ComboBoxDataProviderCallback) => void;
+export type ComboBoxDataProvider<TItem> = (
+  params: ComboBoxDataProviderParams,
+  callback: ComboBoxDataProviderCallback<TItem>
+) => void;
 
@@ -51,5 +58,5 @@ /**
  */
-export type ComboBoxSelectedItemChangedEvent<T> = CustomEvent<{ value: T }>;
+export type ComboBoxSelectedItemChangedEvent<TItem> = CustomEvent<{ value: TItem }>;
 
-export interface ComboBoxElementEventMap {
+export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
   'custom-value-set': ComboBoxCustomValueSetEvent;
@@ -65,5 +72,3 @@
 
-  'selected-item-changed': ComboBoxSelectedItemChangedEvent<any>;
+  'selected-item-changed': ComboBoxSelectedItemChangedEvent<TItem>;
 }
-
-export interface ComboBoxEventMap extends HTMLElementEventMap, ComboBoxElementEventMap {}

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

 import { ComboBoxDataProvider } from './interfaces';
 
-declare function ComboBoxDataProviderMixin<T extends new (...args: any[]) => {}>(
+declare function ComboBoxDataProviderMixin<TItem, T extends new (...args: any[]) => {}>(
   base: T
-): T & ComboBoxDataProviderMixinConstructor;
+): T & ComboBoxDataProviderMixinConstructor<TItem>;
 
-interface ComboBoxDataProviderMixinConstructor {
-  new (...args: any[]): ComboBoxDataProviderMixin;
+interface ComboBoxDataProviderMixinConstructor<TItem> {
+  new (...args: any[]): ComboBoxDataProviderMixin<TItem>;
 }
 
-interface ComboBoxDataProviderMixin {
+interface ComboBoxDataProviderMixin<TItem> {
   /**
@@ -36,3 +36,3 @@ * Number of items fetched at a time from the dataprovider.
    */
-  dataProvider: ComboBoxDataProvider | null | undefined;
+  dataProvider: ComboBoxDataProvider<TItem> | null | undefined;
 
@@ -39,0 +39,0 @@ /**

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

@@ -1,8 +0,8 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin';
 
-import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
+import { ComboBoxMixin } from './vaadin-combo-box-mixin';
 
-import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
+import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin';
 
-import { ComboBoxEventMap } from './interfaces';
+import { ComboBoxDefaultItem, ComboBoxEventMap } from './interfaces';
 
@@ -60,3 +60,3 @@ /**
  */
-declare class ComboBoxLightElement extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixin(HTMLElement))) {
+declare class ComboBoxLightElement<TItem = ComboBoxDefaultItem> extends HTMLElement {
   readonly _propertyForValue: string;
@@ -77,11 +77,11 @@
 
-  addEventListener<K extends keyof ComboBoxEventMap>(
+  addEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
-    listener: (this: ComboBoxLightElement, ev: ComboBoxEventMap[K]) => void,
+    listener: (this: ComboBoxLightElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
     options?: boolean | AddEventListenerOptions
   ): void;
 
-  removeEventListener<K extends keyof ComboBoxEventMap>(
+  removeEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
-    listener: (this: ComboBoxLightElement, ev: ComboBoxEventMap[K]) => void,
+    listener: (this: ComboBoxLightElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
     options?: boolean | EventListenerOptions
@@ -91,2 +91,7 @@ ): void;
 
+interface ComboBoxLightElement<TItem = ComboBoxDefaultItem>
+  extends ComboBoxDataProviderMixin<TItem>,
+    ComboBoxMixin<TItem>,
+    ThemableMixin {}
+
 declare global {
@@ -93,0 +98,0 @@ interface HTMLElementTagNameMap {

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

@@ -1,10 +0,12 @@
-import { ComboBoxItem, ComboBoxRenderer } from './interfaces';
+import { ComboBoxRenderer } from './interfaces';
 
-declare function ComboBoxMixin<T extends new (...args: any[]) => {}>(base: T): T & ComboBoxMixinConstructor;
+declare function ComboBoxMixin<TItem, T extends new (...args: any[]) => {}>(
+  base: T
+): T & ComboBoxMixinConstructor<TItem>;
 
-interface ComboBoxMixinConstructor {
-  new (...args: any[]): ComboBoxMixin;
+interface ComboBoxMixinConstructor<TItem> {
+  new (...args: any[]): ComboBoxMixin<TItem>;
 }
 
-interface ComboBoxMixin {
+interface ComboBoxMixin<TItem> {
   readonly _propertyForValue: string;
@@ -44,3 +46,3 @@
    */
-  renderer: ComboBoxRenderer | null | undefined;
+  renderer: ComboBoxRenderer<TItem> | null | undefined;
 
@@ -51,3 +53,3 @@ /**
    */
-  items: Array<ComboBoxItem | string> | undefined;
+  items: Array<TItem> | undefined;
 
@@ -68,3 +70,3 @@ /**
    */
-  filteredItems: Array<ComboBoxItem | string> | undefined;
+  filteredItems: Array<TItem> | undefined;
 
@@ -96,3 +98,3 @@ /**
    */
-  selectedItem: ComboBoxItem | string | null | undefined;
+  selectedItem: TItem | null | undefined;
 
@@ -99,0 +101,0 @@ /**

src/vaadin-combo-box-mixin.js

@@ -10,2 +10,3 @@ /**
 import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
@@ -304,5 +305,3 @@
 
-      if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-        window.Vaadin.templateRendererCallback(this);
-      }
+      processTemplates(this);
     }
@@ -640,5 +639,8 @@
       } else {
+        const toLowerCase = (item) => item && item.toLowerCase && item.toLowerCase();
         const itemsMatchedByLabel =
           (this.filteredItems &&
-            this.filteredItems.filter((item) => this._getItemLabel(item) === this._inputElementValue)) ||
+            this.filteredItems.filter(
+              (item) => toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue)
+            )) ||
           [];
@@ -662,3 +664,3 @@ if (
           }
-        } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length == 1) {
+        } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length > 0) {
           this.value = this._getItemValue(itemsMatchedByLabel[0]);
@@ -665,0 +667,0 @@ } else {

src/vaadin-combo-box.d.ts

 import { TextFieldElement } from '@vaadin/vaadin-text-field/vaadin-text-field';
 
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
+import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin';
 
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin';
 
-import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
+import { ComboBoxMixin } from './vaadin-combo-box-mixin';
 
-import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
+import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin';
 
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin';
 
-import { ComboBoxEventMap } from './interfaces';
+import { ComboBoxDefaultItem, ComboBoxEventMap } from './interfaces';
 
@@ -159,5 +159,3 @@ /**
  */
-declare class ComboBoxElement extends ElementMixin(
-  ControlStateMixin(ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixin(HTMLElement))))
-) {
+declare class ComboBoxElement<TItem = ComboBoxDefaultItem> extends HTMLElement {
   /**
@@ -226,11 +224,11 @@ * Focusable element used by vaadin-control-state-mixin
 
-  addEventListener<K extends keyof ComboBoxEventMap>(
+  addEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
-    listener: (this: ComboBoxElement, ev: ComboBoxEventMap[K]) => void,
+    listener: (this: ComboBoxElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
     options?: boolean | AddEventListenerOptions
   ): void;
 
-  removeEventListener<K extends keyof ComboBoxEventMap>(
+  removeEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
-    listener: (this: ComboBoxElement, ev: ComboBoxEventMap[K]) => void,
+    listener: (this: ComboBoxElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
     options?: boolean | EventListenerOptions
@@ -240,2 +238,9 @@ ): void;
 
+interface ComboBoxElement<TItem = ComboBoxDefaultItem>
+  extends ElementMixin,
+    ControlStateMixin,
+    ComboBoxDataProviderMixin<TItem>,
+    ComboBoxMixin<TItem>,
+    ThemableMixin {}
+
 declare global {
@@ -242,0 +247,0 @@ interface HTMLElementTagNameMap {

src/vaadin-combo-box.js

@@ -246,3 +246,3 @@ /**
   static get version() {
-    return '21.0.0-alpha1';
+    return '21.0.0-alpha10';
   }
@@ -249,0 +249,0 @@

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

@@ -14,6 +14,6 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
       -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-      padding-left: calc(var(--lumo-border-radius) / 4);
-      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      padding-left: calc(var(--lumo-border-radius-m) / 4);
+      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
       transition: background-color 100ms;
-      border-radius: var(--lumo-border-radius);
+      border-radius: var(--lumo-border-radius-m);
       overflow: hidden;
@@ -43,4 +43,4 @@ --_lumo-item-selected-icon-display: block;
     :host([dir='rtl']) {
-      padding-right: calc(var(--lumo-border-radius) / 4);
-      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      padding-right: calc(var(--lumo-border-radius-m) / 4);
+      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
     }
@@ -47,0 +47,0 @@ `,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138326

increased by0.35%

Lines of code

3522

increased by0.51%

Dependency changes

• Updated@vaadin/vaadin-control-state-mixin@^21.0.0-alpha10

• Updated@vaadin/vaadin-element-mixin@^21.0.0-alpha10

• Updated@vaadin/vaadin-item@^21.0.0-alpha10

• Updated@vaadin/vaadin-lumo-styles@^21.0.0-alpha10

• Updated@vaadin/vaadin-material-styles@^21.0.0-alpha10

• Updated@vaadin/vaadin-overlay@^21.0.0-alpha10

• Updated@vaadin/vaadin-text-field@^21.0.0-alpha10

• Updated@vaadin/vaadin-themable-mixin@^21.0.0-alpha10