@govtechsg/sgds-web-component 3.4.0-rc.2 → 3.4.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.4.0-rc.2",
+  "version": "3.4.0-rc.3",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/ComboBox/sgds-combo-box.cjs.js

@@ -16,6 +16,7 @@ var sgdsBadge = require('../Badge/sgds-badge.cjs.js');
 var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var comboBoxItem = require('./combo-box-item.cjs.js');
 var comboBox = require('./combo-box.cjs.js');
+var repeat_js = require('lit/directives/repeat.js');
 
 /**
  * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
@@ -85,6 +86,29 @@ class SgdsComboBox extends selectElement.SelectElement {
         if (!this._isTouched && this.value === "")
             return;
         this.invalid = !this._mixinReportValidity();
+        // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems
+        const selectedItemVal = this.selectedItems.map(val => val.value).join(";");
+        if (selectedItemVal !== this.value) {
+            this._updateValueAndDisplayValue();
+        }
+    }
+    _handleMenuListChange() {
+        this._updateValueAndDisplayValue();
+        this._renderedMenu = this.menuList;
+    }
+    _updateValueAndDisplayValue() {
+        var _a, _b;
+        const valueArray = this.value.split(";");
+        const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));
+        this.selectedItems = [...initialSelectedItem];
+        // When the new filtered items don't match value we update it
+        const updatedValue = initialSelectedItem.map(item => item.value).join(";");
+        if (updatedValue !== this.value) {
+            this.value = updatedValue;
+        }
+        if (!this.multiSelect) {
+            this.displayValue = (_b = (_a = initialSelectedItem[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "";
+        }
     }
     // Called each time the user types in the <sgds-input>, we set .value and show the menu
     async _handleInputChange(e) {
@@ -207,29 +231,39 @@ class SgdsComboBox extends selectElement.SelectElement {
     }
     _renderMenu() {
         const emptyMenu = lit.html ` <div class="empty-menu">No options</div> `;
-        const menu = this._renderedMenu.map(item => {
-            let isActive = false;
-            if (this.multiSelect) {
-                const selectedItemValueArray = this.selectedItems.map(i => i.value);
-                isActive = selectedItemValueArray.includes(item.value);
-            }
-            else {
-                isActive = item.value === this.value;
-            }
-            return lit.html `
-        <sgds-combo-box-item
-          ?active=${isActive}
-          ?checkbox=${this.multiSelect}
-          value=${item.value}
-          @sgds-select=${this._handleItemSelected}
-          @sgds-unselect=${this._handleItemUnselect}
-        >
-          ${item.label}
-        </sgds-combo-box-item>
-      `;
-        });
-        return this._renderedMenu.length === 0 ? emptyMenu : menu;
+        const menu = this._renderedMenu.length === 0
+            ? emptyMenu
+            : repeat_js.repeat(this._renderedMenu, item => item.value, item => {
+                let isActive = false;
+                if (this.multiSelect) {
+                    const selectedItemValueArray = this.selectedItems.map(i => i.value);
+                    isActive = selectedItemValueArray.includes(item.value);
+                }
+                else {
+                    isActive = item.value === this.value;
+                }
+                return lit.html `
+                <sgds-combo-box-item
+                  ?active=${isActive}
+                  ?checkbox=${this.multiSelect}
+                  value=${item.value}
+                  @sgds-select=${this._handleItemSelected}
+                  @sgds-unselect=${this._handleItemUnselect}
+                >
+                  ${item.label}
+                </sgds-combo-box-item>
+              `;
+            });
+        return menu;
     }
+    /**
+     * Used `repeat` helper from Lit to render instead of .map:
+     * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.
+     *
+     * To compare this to lit-html's default handling for lists, consider reversing a large list of names:
+     * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values
+     * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.
+     */
     _renderInput() {
         const wantFeedbackStyle = this.hasFeedback;
         return lit.html `
@@ -245,7 +279,7 @@ class SgdsComboBox extends selectElement.SelectElement {
         <div class="combobox-input-container">
           ${this.multiSelect
             ? lit.html `
-                ${this.selectedItems.map(item => lit.html `<sgds-badge
+                ${repeat_js.repeat(this.selectedItems, item => item.value, item => lit.html `<sgds-badge
                       outlined
                       variant="neutral"
                       show
@@ -328,6 +362,9 @@ tslib.__decorate([
 tslib.__decorate([
     watch.watch("value", { waitUntilFirstUpdate: true })
 ], SgdsComboBox.prototype, "_handleValueChange", null);
+tslib.__decorate([
+    watch.watch("menuList", { waitUntilFirstUpdate: true })
+], SgdsComboBox.prototype, "_handleMenuListChange", null);
 
 exports.SgdsComboBox = SgdsComboBox;
 exports["default"] = SgdsComboBox;

package/react/components/ComboBox/sgds-combo-box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** If true, renders badge that fills width of combobox */\n  @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxItemData) {\n    e.preventDefault();\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n    const menu = this._renderedMenu.map(item => {\n      let isActive = false;\n      if (this.multiSelect) {\n        const selectedItemValueArray = this.selectedItems.map(i => i.value);\n        isActive = selectedItemValueArray.includes(item.value);\n      } else {\n        isActive = item.value === this.value;\n      }\n      return html`\n        <sgds-combo-box-item\n          ?active=${isActive}\n          ?checkbox=${this.multiSelect}\n          value=${item.value}\n          @sgds-select=${this._handleItemSelected}\n          @sgds-unselect=${this._handleItemUnselect}\n        >\n          ${item.label}\n        </sgds-combo-box-item>\n      `;\n    });\n    return this._renderedMenu.length === 0 ? emptyMenu : menu;\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${this.selectedItems.map(\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      ?fullwidth=${this.badgeFullWidth}\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            @focus=${this._handleFocus}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["SelectElement","html","ref","classMap","nothing","ifDefined","live","comboBoxStyle","ComboBoxItem","SgdsIcon","SgdsBadge","__decorate","property","state","queryAsync","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-combo-box.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** If true, renders badge that fills width of combobox */\n  @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n\n    // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n    const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n    if (selectedItemVal !== this.value) {\n      this._updateValueAndDisplayValue();\n    }\n  }\n\n  @watch(\"menuList\", { waitUntilFirstUpdate: true })\n  _handleMenuListChange() {\n    this._updateValueAndDisplayValue();\n    this._renderedMenu = this.menuList;\n  }\n\n  private _updateValueAndDisplayValue() {\n    const valueArray = this.value.split(\";\");\n    const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n    this.selectedItems = [...initialSelectedItem];\n\n    // When the new filtered items don't match value we update it\n    const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n    if (updatedValue !== this.value) {\n      this.value = updatedValue;\n    }\n\n    if (!this.multiSelect) {\n      this.displayValue = initialSelectedItem[0]?.label ?? \"\";\n    }\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxItemData) {\n    e.preventDefault();\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n\n    const menu =\n      this._renderedMenu.length === 0\n        ? emptyMenu\n        : repeat(\n            this._renderedMenu,\n            item => item.value,\n            item => {\n              let isActive = false;\n              if (this.multiSelect) {\n                const selectedItemValueArray = this.selectedItems.map(i => i.value);\n                isActive = selectedItemValueArray.includes(item.value);\n              } else {\n                isActive = item.value === this.value;\n              }\n\n              return html`\n                <sgds-combo-box-item\n                  ?active=${isActive}\n                  ?checkbox=${this.multiSelect}\n                  value=${item.value}\n                  @sgds-select=${this._handleItemSelected}\n                  @sgds-unselect=${this._handleItemUnselect}\n                >\n                  ${item.label}\n                </sgds-combo-box-item>\n              `;\n            }\n          );\n\n    return menu;\n  }\n\n  /**\n   * Used `repeat` helper from Lit to render instead of .map:\n   * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n   *\n   * To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n   * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n   * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n   */\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${repeat(\n                  this.selectedItems,\n                  item => item.value,\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      ?fullwidth=${this.badgeFullWidth}\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            @focus=${this._handleFocus}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["SelectElement","html","repeat","ref","classMap","nothing","ifDefined","live","comboBoxStyle","ComboBoxItem","SgdsIcon","SgdsBadge","__decorate","property","state","queryAsync","watch"],"mappings":"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"}

package/react/components/ComboBox/sgds-combo-box.js

@@ -12,6 +12,7 @@ import { SgdsBadge } from '../Badge/sgds-badge.js';
 import { SgdsIcon } from '../Icon/sgds-icon.js';
 import { ComboBoxItem } from './combo-box-item.js';
 import css_248z from './combo-box.js';
+import { repeat } from 'lit/directives/repeat.js';
 
 /**
  * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
@@ -81,6 +82,29 @@ class SgdsComboBox extends SelectElement {
         if (!this._isTouched && this.value === "")
             return;
         this.invalid = !this._mixinReportValidity();
+        // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems
+        const selectedItemVal = this.selectedItems.map(val => val.value).join(";");
+        if (selectedItemVal !== this.value) {
+            this._updateValueAndDisplayValue();
+        }
+    }
+    _handleMenuListChange() {
+        this._updateValueAndDisplayValue();
+        this._renderedMenu = this.menuList;
+    }
+    _updateValueAndDisplayValue() {
+        var _a, _b;
+        const valueArray = this.value.split(";");
+        const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));
+        this.selectedItems = [...initialSelectedItem];
+        // When the new filtered items don't match value we update it
+        const updatedValue = initialSelectedItem.map(item => item.value).join(";");
+        if (updatedValue !== this.value) {
+            this.value = updatedValue;
+        }
+        if (!this.multiSelect) {
+            this.displayValue = (_b = (_a = initialSelectedItem[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "";
+        }
     }
     // Called each time the user types in the <sgds-input>, we set .value and show the menu
     async _handleInputChange(e) {
@@ -203,29 +227,39 @@ class SgdsComboBox extends SelectElement {
     }
     _renderMenu() {
         const emptyMenu = html ` <div class="empty-menu">No options</div> `;
-        const menu = this._renderedMenu.map(item => {
-            let isActive = false;
-            if (this.multiSelect) {
-                const selectedItemValueArray = this.selectedItems.map(i => i.value);
-                isActive = selectedItemValueArray.includes(item.value);
-            }
-            else {
-                isActive = item.value === this.value;
-            }
-            return html `
-        <sgds-combo-box-item
-          ?active=${isActive}
-          ?checkbox=${this.multiSelect}
-          value=${item.value}
-          @sgds-select=${this._handleItemSelected}
-          @sgds-unselect=${this._handleItemUnselect}
-        >
-          ${item.label}
-        </sgds-combo-box-item>
-      `;
-        });
-        return this._renderedMenu.length === 0 ? emptyMenu : menu;
+        const menu = this._renderedMenu.length === 0
+            ? emptyMenu
+            : repeat(this._renderedMenu, item => item.value, item => {
+                let isActive = false;
+                if (this.multiSelect) {
+                    const selectedItemValueArray = this.selectedItems.map(i => i.value);
+                    isActive = selectedItemValueArray.includes(item.value);
+                }
+                else {
+                    isActive = item.value === this.value;
+                }
+                return html `
+                <sgds-combo-box-item
+                  ?active=${isActive}
+                  ?checkbox=${this.multiSelect}
+                  value=${item.value}
+                  @sgds-select=${this._handleItemSelected}
+                  @sgds-unselect=${this._handleItemUnselect}
+                >
+                  ${item.label}
+                </sgds-combo-box-item>
+              `;
+            });
+        return menu;
     }
+    /**
+     * Used `repeat` helper from Lit to render instead of .map:
+     * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.
+     *
+     * To compare this to lit-html's default handling for lists, consider reversing a large list of names:
+     * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values
+     * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.
+     */
     _renderInput() {
         const wantFeedbackStyle = this.hasFeedback;
         return html `
@@ -241,7 +275,7 @@ class SgdsComboBox extends SelectElement {
         <div class="combobox-input-container">
           ${this.multiSelect
             ? html `
-                ${this.selectedItems.map(item => html `<sgds-badge
+                ${repeat(this.selectedItems, item => item.value, item => html `<sgds-badge
                       outlined
                       variant="neutral"
                       show
@@ -324,6 +358,9 @@ __decorate([
 __decorate([
     watch("value", { waitUntilFirstUpdate: true })
 ], SgdsComboBox.prototype, "_handleValueChange", null);
+__decorate([
+    watch("menuList", { waitUntilFirstUpdate: true })
+], SgdsComboBox.prototype, "_handleMenuListChange", null);
 
 export { SgdsComboBox, SgdsComboBox as default };
 //# sourceMappingURL=sgds-combo-box.js.map

package/react/components/ComboBox/sgds-combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** If true, renders badge that fills width of combobox */\n  @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxItemData) {\n    e.preventDefault();\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n    const menu = this._renderedMenu.map(item => {\n      let isActive = false;\n      if (this.multiSelect) {\n        const selectedItemValueArray = this.selectedItems.map(i => i.value);\n        isActive = selectedItemValueArray.includes(item.value);\n      } else {\n        isActive = item.value === this.value;\n      }\n      return html`\n        <sgds-combo-box-item\n          ?active=${isActive}\n          ?checkbox=${this.multiSelect}\n          value=${item.value}\n          @sgds-select=${this._handleItemSelected}\n          @sgds-unselect=${this._handleItemUnselect}\n        >\n          ${item.label}\n        </sgds-combo-box-item>\n      `;\n    });\n    return this._renderedMenu.length === 0 ? emptyMenu : menu;\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${this.selectedItems.map(\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      ?fullwidth=${this.badgeFullWidth}\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            @focus=${this._handleFocus}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["comboBoxStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-combo-box.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** If true, renders badge that fills width of combobox */\n  @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n\n    // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n    const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n    if (selectedItemVal !== this.value) {\n      this._updateValueAndDisplayValue();\n    }\n  }\n\n  @watch(\"menuList\", { waitUntilFirstUpdate: true })\n  _handleMenuListChange() {\n    this._updateValueAndDisplayValue();\n    this._renderedMenu = this.menuList;\n  }\n\n  private _updateValueAndDisplayValue() {\n    const valueArray = this.value.split(\";\");\n    const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n    this.selectedItems = [...initialSelectedItem];\n\n    // When the new filtered items don't match value we update it\n    const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n    if (updatedValue !== this.value) {\n      this.value = updatedValue;\n    }\n\n    if (!this.multiSelect) {\n      this.displayValue = initialSelectedItem[0]?.label ?? \"\";\n    }\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxItemData) {\n    e.preventDefault();\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n\n    const menu =\n      this._renderedMenu.length === 0\n        ? emptyMenu\n        : repeat(\n            this._renderedMenu,\n            item => item.value,\n            item => {\n              let isActive = false;\n              if (this.multiSelect) {\n                const selectedItemValueArray = this.selectedItems.map(i => i.value);\n                isActive = selectedItemValueArray.includes(item.value);\n              } else {\n                isActive = item.value === this.value;\n              }\n\n              return html`\n                <sgds-combo-box-item\n                  ?active=${isActive}\n                  ?checkbox=${this.multiSelect}\n                  value=${item.value}\n                  @sgds-select=${this._handleItemSelected}\n                  @sgds-unselect=${this._handleItemUnselect}\n                >\n                  ${item.label}\n                </sgds-combo-box-item>\n              `;\n            }\n          );\n\n    return menu;\n  }\n\n  /**\n   * Used `repeat` helper from Lit to render instead of .map:\n   * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n   *\n   * To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n   * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n   * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n   */\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${repeat(\n                  this.selectedItems,\n                  item => item.value,\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      ?fullwidth=${this.badgeFullWidth}\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            @focus=${this._handleFocus}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["comboBoxStyle"],"mappings":"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"}