@vaadin/multi-select-combo-box 24.4.6 → 24.5.0-alpha10

package/README.md

@@ -54,7 +54,7 @@ import '@vaadin/multi-select-combo-box/src/vaadin-multi-select-combo-box.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -38,27 +38,27 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.4.6",
-    "@vaadin/combo-box": "~24.4.6",
-    "@vaadin/component-base": "~24.4.6",
-    "@vaadin/field-base": "~24.4.6",
-    "@vaadin/input-container": "~24.4.6",
-    "@vaadin/item": "~24.4.6",
-    "@vaadin/lit-renderer": "~24.4.6",
-    "@vaadin/overlay": "~24.4.6",
-    "@vaadin/vaadin-lumo-styles": "~24.4.6",
-    "@vaadin/vaadin-material-styles": "~24.4.6",
-    "@vaadin/vaadin-themable-mixin": "~24.4.6"
+    "@vaadin/a11y-base": "24.5.0-alpha10",
+    "@vaadin/combo-box": "24.5.0-alpha10",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/field-base": "24.5.0-alpha10",
+    "@vaadin/input-container": "24.5.0-alpha10",
+    "@vaadin/item": "24.5.0-alpha10",
+    "@vaadin/lit-renderer": "24.5.0-alpha10",
+    "@vaadin/overlay": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
     "lit": "^3.0.0",
-    "sinon": "^13.0.2"
+    "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "46d3cdb72eb99d544c7bb86c3de95043b9e5857f"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

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

@@ -231,6 +231,14 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   items: TItem[] | undefined;
 
+  /**
+   * A function used to generate CSS class names for dropdown
+   * items and selected chips based on the item. The return
+   * value should be the generated class name as a string, or
+   * multiple class names separated by whitespace characters.
+   */
+  itemClassNameGenerator: (item: TItem) => string;
+
   /**
    * The item property used for a visual representation of the item.
    * @attr {string} item-label-path

package/src/vaadin-multi-select-combo-box.js

@@ -180,6 +180,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           filtered-items="[[filteredItems]]"
           selected-items="[[selectedItems]]"
           selected-items-on-top="[[selectedItemsOnTop]]"
+          item-class-name-generator="[[itemClassNameGenerator]]"
           top-group="[[_topGroup]]"
           opened="{{opened}}"
           renderer="[[renderer]]"
@@ -279,6 +280,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Array,
       },
 
+      /**
+       * A function used to generate CSS class names for dropdown
+       * items and selected chips based on the item. The return
+       * value should be the generated class name as a string, or
+       * multiple class names separated by whitespace characters.
+       */
+      itemClassNameGenerator: {
+        type: Object,
+        observer: '__itemClassNameGeneratorChanged',
+      },
+
       /**
        * The item property used for a visual representation of the item.
        * @attr {string} item-label-path
@@ -760,6 +772,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
   }
 
+  /** @private */
+  __itemClassNameGeneratorChanged(generator, oldGenerator) {
+    if (generator || oldGenerator) {
+      this.__updateChips();
+    }
+  }
+
   /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
     if (Math.floor(pageSize) !== pageSize || pageSize <= 0) {
@@ -936,6 +955,10 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     chip.label = label;
     chip.setAttribute('title', label);
 
+    if (typeof this.itemClassNameGenerator === 'function') {
+      chip.className = this.itemClassNameGenerator(item);
+    }
+
     chip.addEventListener('item-removed', (e) => this._onItemRemoved(e));
     chip.addEventListener('mousedown', (e) => this._preventBlur(e));
 

package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js

@@ -23,6 +23,10 @@ const chip = css`
     -moz-osx-font-smoothing: grayscale;
   }
 
+  :host([disabled]) {
+    background-color: var(--lumo-contrast-10pct);
+  }
+
   :host([focused]) [part='remove-button'] {
     color: inherit;
   }

package/theme/lumo/vaadin-multi-select-combo-box-styles.js

@@ -72,8 +72,8 @@ const multiSelectComboBox = css`
   }
 
   /* Override input-container styles */
-  ::slotted([slot='chip']),
-  ::slotted([slot='overflow']) {
+  [part='input-field'] ::slotted([slot='chip']),
+  [part='input-field'] ::slotted([slot='overflow']) {
     min-height: auto;
     padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
     color: var(--lumo-body-text-color);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -596,6 +596,17 @@
                   ]
                 }
               },
+              {
+                "name": "itemClassNameGenerator",
+                "description": "A function used to generate CSS class names for dropdown\nitems and selected chips based on the item. The return\nvalue should be the generated class name as a string, or\nmultiple class names separated by whitespace characters.",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "itemLabelPath",
                 "description": "The item property used for a visual representation of the item.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -194,6 +194,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".itemClassNameGenerator",
+              "description": "A function used to generate CSS class names for dropdown\nitems and selected chips based on the item. The return\nvalue should be the generated class name as a string, or\nmultiple class names separated by whitespace characters.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".itemLabelPath",
               "description": "The item property used for a visual representation of the item.",