@duetds/components 8.5.5 → 8.6.0

package/lib/collection/components/duet-combobox/duet-combobox.js

@@ -5,8 +5,9 @@ import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
-import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowUpKey, isBackspaceKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
 export class DuetCombobox {
@@ -21,24 +22,63 @@ export class DuetCombobox {
                 // this.listElement.style.width = `${currentWidth + 1}px`
             }
         }, 100));
-        this.handleInputKeyDownEvent = (e) => {
+        this.onInputChange = async (e) => {
+            const newValue = e.detail.value;
+            this.inputValue = newValue;
+        };
+        this.onInputClick = () => {
+            var _a, _b;
+            if (this.openListOnClick) {
+                this.listOpen = !this.listOpen;
+            }
+            else {
+                this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
+            }
+            if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
+                this.listOpen = false;
+            }
+        };
+        this.onInputTyping = async (e) => {
+            var _a;
+            const newValue = e.detail.value;
+            if (!this.force && !this.multiple && this.selectedItems.size > 0 && newValue !== this.getSelectedItemLabel()) {
+                this.selectedItems.clear();
+            }
+            this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        };
+        this.onKeyDown = (e) => {
             //if selection is made, close the list and update internal and external values
+            const listItems = this.returnFilteredOrNonFiltered();
             // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
             // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
             this.input.accessibleActiveDescendant = undefined;
             if (isEnterKey(e)) {
                 e.preventDefault();
-                this.selectActiveItem();
-                this.updateInputText(false);
+                if (this.listOpen && this.activeItem !== undefined && listItems[this.activeItem]) {
+                    if (this.multiple) {
+                        this.addSelectedItem(listItems[this.activeItem].id, true);
+                    }
+                    else {
+                        this.updateSelectedItem(listItems[this.activeItem].id, true);
+                    }
+                }
+                this.activeItem = undefined;
                 this.listOpen = false;
                 return;
             }
-            //tabbing out or escaping, restore initial state
             if (isEscapeKey(e) || isTabKey(e)) {
                 this.updateInputText(true);
+                this.activeItem = undefined;
                 this.listOpen = false;
                 return;
             }
+            if (isBackspaceKey(e) && this.inputValue === "") {
+                if (this.multiple && this.selectedItems.size > 0) {
+                    const lastItem = Array.from(this.selectedItems).pop();
+                    this.removeSelectedItem(lastItem, true);
+                }
+                return;
+            }
             //handle arrow up/down navigation
             let nextActiveItem = this.activeItem;
             if (isArrowUpKey(e)) {
@@ -51,7 +91,6 @@ export class DuetCombobox {
                 this.listOpen = true;
             }
             if (isArrowDownKey(e) || isArrowUpKey(e)) {
-                const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
                 if (nextActiveItem < 0 || !nextActiveItem) {
                     nextActiveItem = 0;
                 }
@@ -64,13 +103,10 @@ export class DuetCombobox {
                 this.activeItem = nextActiveItem;
                 this.scrollToActive();
             }
-            this.announceActive();
             return;
         };
         this.processedItems = null;
-        this.inputWidth = 0;
         this.inputValue = "";
-        this.selectionMsg = "";
         this.listOpen = false;
         this.selectedItems = new Set();
         this.activeItem = undefined;
@@ -92,8 +128,11 @@ export class DuetCombobox {
             },
         };
         this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
+        this.label = "";
+        this.caption = "";
         this.theme = "";
         this.force = false;
+        this.multiple = false;
         this.items = undefined;
         this.formatter = (item) => item && item.name ? item.name : "";
         this.value = undefined;
@@ -109,7 +148,7 @@ export class DuetCombobox {
         const path = e.composedPath();
         const isClickOutside = path.every(el => el !== this.element);
         if (isClickOutside) {
-            this.updateInputText(true, true);
+            this.updateInputText(true);
             this.listOpen = false;
         }
     }
@@ -120,17 +159,67 @@ export class DuetCombobox {
     async formatItem(item) {
         return this.formatter(item);
     }
-    async processItems() {
-        this.items = this.processedItems = parsePossibleJSON(this.items);
-        await this.updateInputText();
+    processItems() {
+        const ids = [];
+        this.processedItems = parsePossibleJSON(this.items);
+        if (!Array.isArray(this.processedItems)) {
+            console.error("DuetCombobox: Items should be an array");
+            return;
+        }
+        if (this.processedItems.length !== new Set([...this.processedItems]).size) {
+            console.warn("DuetCombobox: Duplicate item values found in the list");
+        }
+        this.processedItems = this.processedItems.map((item, index) => {
+            if (typeof item === "string") {
+                item = { name: item, value: item };
+            }
+            if (item.id !== undefined) {
+                item.id = String(item.id);
+            }
+            else {
+                item.id = `${JSON.stringify(item.value)}-${item.name}`;
+            }
+            if (ids.includes(item.id)) {
+                console.warn("DuetCombobox: Duplicate item id found in the list, postfixed with index");
+                item.id = `${item.id}-${index}`;
+            }
+            ids.push(item.id);
+            return item;
+        });
+        // remove any item selections that are no longer in the items list
+        const selectionsMissing = Array.from(this.selectedItems).filter(id => !this.processedItems.find(item => item.id === id));
+        if (selectionsMissing.length) {
+            if (this.multiple) {
+                selectionsMissing.forEach(id => this.removeSelectedItem(id));
+            }
+            else {
+                this.updateSelectedItem(selectionsMissing[0], true);
+            }
+        }
     }
-    async processValue() {
-        if (this.value) {
-            const selectedItem = this.items.find(item => item.value === this.value);
-            this.updateSelectedItems(selectedItem.id);
+    processValue() {
+        // empty string may be valid item value
+        if (this.value !== "" && !this.value) {
+            this.selectedItems.clear();
+            return;
+        }
+        const values = Array.isArray(this.value) ? this.value : [this.value];
+        const ids = this.processedItems.filter(item => values.includes(item.value)).map(item => item.id);
+        // if value corresponds to the selectedItems, do nothing
+        if (ids.length === this.selectedItems.size && ids.every(id => this.selectedItems.has(id))) {
+            return;
+        }
+        if (this.multiple) {
+            this.selectedItems.clear();
+            this.input.clearChips();
+            ids.forEach(id => this.addSelectedItem(id));
+        }
+        else {
+            const selectedItem = this.processedItems.find(item => item.value === this.value);
+            this.updateSelectedItem(selectedItem.id);
         }
     }
-    async processListOpenChange() {
+    processListOpenChange() {
         if (this.openListOnClick) {
             this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
         }
@@ -146,66 +235,54 @@ export class DuetCombobox {
         if (Build.isServer) {
             return;
         }
-        this.items = this.processedItems = parsePossibleJSON(this.items);
-        this.input = this.element.querySelector("duet-input");
-        this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
-        this.input.addEventListener("click", () => {
-            if (!this.openListOnClick) {
-                this.inputValue.length >= this.minCharacters ? (this.listOpen = true) : (this.listOpen = false);
-            }
-            else {
-                this.listOpen = !this.listOpen;
-            }
-        });
-        this.element.addEventListener("keydown", this.handleInputKeyDownEvent);
-        connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
+        if (this.items) {
+            this.processItems();
+        }
+        const slottedElements = getElementsFromDefaultSlot(this.element);
+        if (slottedElements.length) {
+            this.input = slottedElements[0];
+        }
+        else {
+            this.input = document.createElement("duet-input");
+            this.input.label = this.label;
+            this.input.caption = this.caption;
+            this.input.expand = true;
+            this.element.prepend(this.input);
+        }
+        this.input.chips = this.multiple;
+        this.input.addEventListener("duetChange", this.onInputChange);
+        this.input.addEventListener("duetInput", this.onInputTyping);
+        this.input.addEventListener("click", this.onInputClick);
         //add correct aria attributes to the input element
         this.input.role = "combobox";
         this.input.accessibleExpanded = this.listOpen ? "true" : "false";
         this.input.accessibleAutocomplete = "list";
         this.input.accessibleControls = this.listBoxId;
+        this.element.addEventListener("keydown", this.onKeyDown);
+        connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
         this.processListOpenChange();
     }
     disconnectedCallback() {
         if (Build.isServer) {
             return;
         }
-        this.input.removeEventListener("duetChange", this.updateInputValue.bind(this));
-        this.input.removeEventListener("click", () => this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false));
-        this.element.removeEventListener("keydown", this.handleInputKeyDownEvent);
-        this.listElement.removeEventListener("click", e => {
-            e.stopPropagation();
-        });
+        this.input.removeEventListener("duetChange", this.onInputChange);
+        this.input.removeEventListener("click", this.onInputClick);
+        this.element.removeEventListener("keydown", this.onKeyDown);
         this.resizeObserver.disconnect();
         disconnectLanguageChangeObserver(this);
     }
     componentDidLoad() {
         // observe resize events to dynamically adjust size of dropdown area
         this.resizeObserver.observe(this.input);
-        this.listElement.addEventListener("click", e => {
-            e.stopPropagation();
-        });
         this.processValue();
     }
-    /**
-     * Updates the input text based on the selected/clicked items.
-     * @param event - event
-     *'param item: DuetComboboxItem - the item that was selected
-     */
-    onListClick(e, item) {
-        e.preventDefault();
-        // update selected item with id
-        this.updateSelectedItems(item.id, true);
-        this.listOpen = false;
-        return this.listOpen;
-    }
     /**
      * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
-     * TODO: this should be disabled in multiple mode
      */
     shouldListBeFiltered() {
-        if (this.selectedItems.size && this.input.value === this.inputValue) {
-            const item = this.items.filter(item => this.selectedItems.has(item.id));
+        if (!this.multiple && this.selectedItems.size && this.input.value === this.inputValue) {
+            const item = this.processedItems.find(item => this.selectedItems.has(item.id));
             return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
         }
         return true;
@@ -220,91 +297,135 @@ export class DuetCombobox {
                 : this.sortFilteredItems(this.processedItems)
             : [];
     }
+    emitChangeEvent(id) {
+        const item = this.processedItems.find(item => item.id === id);
+        this.duetChange.emit({
+            item,
+            value: this.value,
+            component: "duet-combobox",
+        });
+    }
     /**
-     * Updates the selected items based on the item id.
-     * @param id
-     * @private
+     * Updates the value after selected items have changed for multiple selection.
      */
-    async updateSelectedItems(id, emitEvent) {
-        // for a multiple scenario wrap this in an if/else and just don't clear here
-        this.selectedItems.clear();
-        if (this.selectedItems) {
-            if (this.selectedItems.has(id)) {
-                this.selectedItems.delete(id);
-            }
-            else {
-                this.selectedItems.add(id);
-            }
+    updateMultipleValue() {
+        this.value = this.processedItems.filter(item => this.selectedItems.has(item.id)).map(item => item.value);
+        this.input.value = "";
+        this.updateChips();
+    }
+    /**
+     * Add item with id to the selectedItems set. Used only when multiple is true.
+     */
+    addSelectedItem(id, emitEvent) {
+        if (this.selectedItems.has(id)) {
+            return;
         }
+        this.selectedItems.add(id);
+        this.updateMultipleValue();
         if (emitEvent) {
-            const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
-            this.duetChange.emit({
-                value: item[0].value,
-                item: item[0],
-                component: "duet-combobox",
-            });
+            this.emitChangeEvent(id);
         }
-        await this.updateInputText();
     }
     /**
-     * Updates the input text based on the selected/clicked items.
-     * @param bool -override to clear if invoked by "click outside"
+     * Remove item with id from the selectedItems set. Used only when multiple is true.
      */
-    async updateInputText(isBlurred = false, isClickOutside = false) {
-        const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
-        //if items changed and given id no longer exists
-        if (item.length === 0 && this.selectedItems.size > 0) {
-            this.selectedItems.clear();
-            this.input.value = "";
+    removeSelectedItem(id, emitEvent) {
+        if (!this.selectedItems.has(id)) {
+            return;
+        }
+        this.selectedItems.delete(id);
+        this.updateMultipleValue();
+        if (emitEvent) {
+            this.emitChangeEvent(id);
+        }
+    }
+    /**
+     * Updates the selected item based on the item id. Used only when multiple is false.
+     */
+    async updateSelectedItem(id, emitEvent) {
+        if (this.selectedItems.has(id)) {
+            this.selectedItems.delete(id);
             this.value = undefined;
-            this.activeItem = undefined;
         }
-        if (!isClickOutside && this.selectedItems.size === 1) {
-            this.input.value = ""; // set value to empty so that cursor position follows accordingly
-            this.input.value = await this.formatItem(item[0]);
-            this.input.scrollLeft = this.input.scrollWidth;
-            this.activeItem = undefined;
-            this.value = item[0].value;
+        else {
+            this.selectedItems.clear();
+            this.selectedItems.add(id);
+            this.value = this.processedItems.find(item => item.id === id).value;
         }
-        if (isBlurred) {
-            if (this.selectedItems.size === 0) {
-                this.activeItem = undefined;
-                if (this.force) {
-                    this.inputValue = "";
-                    this.input.value = "";
-                }
+        if (emitEvent) {
+            this.emitChangeEvent(id);
+        }
+        await this.updateInputText();
+    }
+    /**
+     * Add or remove chips of the input based on the selectedItems Set.
+     */
+    async updateChips() {
+        const ids = Array.from(this.selectedItems);
+        const chips = await this.input.getChips();
+        ids.forEach(async (id) => {
+            const item = this.processedItems.find(i => i.id === id);
+            const text = await this.formatItem(item);
+            const chipExists = await this.input.hasChip({ value: `${id}`, text });
+            if (!chipExists) {
+                const chip = document.createElement("duet-chip");
+                chip.variation = "input";
+                chip.value = `${id}`;
+                chip.textContent = text;
+                chip.addEventListener("duetRemove", evt => {
+                    const id = evt.detail.value;
+                    this.removeSelectedItem(id, true);
+                });
+                this.input.addChip(chip);
             }
-            else if (this.force) {
-                const selectedValueIndex = [...this.selectedItems][0];
-                const selectedValueLabel = await this.formatItem(this.items[selectedValueIndex]);
-                this.inputValue = selectedValueLabel;
-                this.input.value = selectedValueLabel;
+        });
+        chips.forEach(chip => {
+            if (!ids.includes(chip.value)) {
+                chip.remove();
             }
-        }
-        this.listOpen = false;
+        });
     }
-    updateInputValue(e) {
-        var _a;
-        this.inputValue = e.detail.value;
-        this.listOpen = String(this.inputValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    async getSelectedItemLabel() {
+        const item = this.processedItems.find(item => this.selectedItems.has(item.id));
+        const label = item ? await this.formatItem(item) : "";
+        return label;
     }
-    selectActiveItem() {
-        if (this.activeItem === undefined) {
+    /**
+     * Updates the input text when the combobox loses focus or when a selection is made.
+     */
+    async updateInputText(isBlurred = false) {
+        if (isBlurred && this.multiple) {
+            this.input.value = "";
             return;
         }
-        const filteredItem = this.returnFilteredOrNonFiltered();
-        const item = filteredItem[this.activeItem];
-        this.updateSelectedItems(item.id, true);
+        if (isBlurred && this.force) {
+            if (this.selectedItems.size === 0) {
+                this.input.value = "";
+            }
+            else {
+                this.input.value = await this.getSelectedItemLabel();
+            }
+        }
+        if (!isBlurred && this.selectedItems.size > 0) {
+            this.input.value = ""; // set value to empty so that cursor position follows accordingly
+            this.input.value = await this.getSelectedItemLabel();
+            this.input.scrollLeft = this.input.scrollWidth;
+        }
     }
-    announceActive(items) {
-        if (!items) {
-            items = this.returnFilteredOrNonFiltered();
+    // Event handlers
+    onListClick(e, item) {
+        e.preventDefault();
+        e.stopPropagation();
+        // update selected item with id
+        if (this.multiple) {
+            this.addSelectedItem(item.id, true);
         }
-        if (this.activeItem === undefined || this.activeItem === -1) {
-            return;
+        else {
+            this.updateSelectedItem(item.id, true);
         }
-        const item = items[this.activeItem];
-        this.selectionMsg = structuredClone(this.formatLabel(item, items.length, this.items.length));
+        this.activeItem = undefined;
+        this.listOpen = false;
+        return this.listOpen;
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
@@ -332,16 +453,27 @@ export class DuetCombobox {
      */
     getFilteredItems() {
         // filter items based on user inputs
-        const filteredItems = this.processedItems.filter(item => {
-            var _a, _b, _c, _d;
+        const filteredItems = this.processedItems
+            .filter(item => {
+            var _a, _b, _c, _d, _e;
             // filter by name and value
             // if value contains inputvalue
             return ((_a = String(item.value)) === null || _a === void 0 ? void 0 : _a.toLowerCase()[this.filterType]((_b = this.inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase())) ||
                 (
                 // if name contains input value
                 (_c = String(item.name)) === null || _c === void 0 ? void 0 : _c.toLowerCase()[this.filterType]((_d = this.inputValue) === null || _d === void 0 ? void 0 : _d.toLowerCase())) ||
+                // if name contains input value
+                this.formatter(item).toLowerCase()[this.filterType]((_e = this.inputValue) === null || _e === void 0 ? void 0 : _e.toLowerCase()) ||
                 // if the item is selected
                 this.selectedItems.has(item.id);
+        })
+            // if multiple, filter out the selected items
+            .filter(item => {
+            let include = true;
+            if (this.multiple && this.selectedItems.has(item.id)) {
+                include = false;
+            }
+            return include;
         });
         return this.sortFilteredItems(filteredItems);
     }
@@ -378,9 +510,10 @@ export class DuetCombobox {
             }, ref: el => (this.listContainer = el) }, h("ul", { class: {
                 "duet-combobox-listbox-open": this.listOpen,
                 "duet-combobox-listbox": true,
-            }, role: "listbox", ref: el => (this.listElement = el), id: this.listBoxId }, selectElements.map((item, index) => {
-            return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, selectElements.length, this.items.length) }));
-        })))));
+            }, role: "listbox", ref: el => (this.listElement = el), id: this.listBoxId }, this.listOpen &&
+            selectElements.map((item, index) => {
+                return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, selectElements.length, this.processedItems.length) }));
+            })))));
     }
     static get is() { return "duet-combobox"; }
     static get encapsulation() { return "scoped"; }
@@ -413,11 +546,8 @@ export class DuetCombobox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
-                        }],
-                    "text": "Placeholder defaults"
+                    "tags": [],
+                    "text": "Defaults for the accessible labels for the select items"
                 },
                 "attribute": "accessible-label-defaults",
                 "reflect": false,
@@ -439,14 +569,47 @@ export class DuetCombobox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "{\nheading: \"Valitse:\",\nitem: \"{0}, ({1}/{2})\",\nitemFiltered: \"{0}, ({1}/{2} - {3} suodatettu\"\n}"
-                        }],
-                    "text": "Hint text to display before the user types into the date picker input."
+                    "tags": [],
+                    "text": "Accessible labels for the select items"
                 },
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelDefaults,\n    getLanguage()\n  )"
             },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the input if input is not provided as a slotted element."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption for the input if input is not provided as a slotted element."
+                },
+                "attribute": "caption",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "theme": {
                 "type": "string",
                 "mutable": true,
@@ -489,6 +652,24 @@ export class DuetCombobox {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple selections. Selections are displayed as DuetChips."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "items": {
                 "type": "any",
                 "mutable": true,
@@ -501,7 +682,7 @@ export class DuetCombobox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Array of item objects."
+                    "text": "Array of item objects. Each item should have properties name, value and optionally id. If id is not provided, it will be generated.\nAlternatively, an array of strings can be provided, in which case the strings will be used for name, value and id."
                 },
                 "attribute": "items",
                 "reflect": false
@@ -538,15 +719,15 @@ export class DuetCombobox {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Value of selected item/s"
+                    "text": "Value of selected item/s. If multiple is true, value is an array of selected items, else it's a string."
                 },
                 "attribute": "value",
                 "reflect": true
@@ -610,9 +791,7 @@ export class DuetCombobox {
     static get states() {
         return {
             "processedItems": {},
-            "inputWidth": {},
             "inputValue": {},
-            "selectionMsg": {},
             "listOpen": {},
             "selectedItems": {},
             "activeItem": {}
@@ -649,7 +828,7 @@ export class DuetCombobox {
                     "signature": "(item: DuetComboboxItem) => Promise<string>",
                     "parameters": [{
                             "name": "item",
-                            "type": "{ id?: number; value: any; name: string; html?: string; tags?: string[]; }",
+                            "type": "{ id?: string; value: any; name: string; html?: string; tags?: string[]; }",
                             "docs": ": DuetComboboxItem"
                         }],
                     "references": {