@nectary/components 4.12.0 → 4.12.1

package/select-menu/index.js

@@ -1,21 +1,15 @@
-import "../input/index.js";
-import "../icon/index.js";
-import "../text/index.js";
-import { isSelectMenuOption } from "../select-menu-option/utils.js";
-import { subscribeContext } from "../utils/context.js";
-import { unpackCsv, getFirstCsvValue, updateCsv } from "../utils/csv.js";
-import { getBooleanAttribute, updateAttribute, attrValueToPixels, updateExplicitBooleanAttribute, isAttrTrue, getAttribute, updateIntegerAttribute, getIntegerAttribute, updateBooleanAttribute, hasClass, setClass } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { debounceTimeout } from "../utils/debounce.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { isTargetEqual } from "../utils/event-target.js";
-import { setFormValue, CSVToFormData } from "../utils/form.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #listbox {\n    overflow-y: auto;\n    max-height: var(--sinch-comp-select-menu-font-max-height);\n  }\n\n  #search {\n    display: none;\n    margin: 10px;\n  }\n\n  #search.active {\n    display: block;\n  }\n\n  #search-clear:not(.active) {\n    display: none;\n  }\n\n  #not-found {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 30px;\n    margin-bottom: 10px;\n    pointer-events: none;\n    user-select: none;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-menu-font-not-found-text);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-menu-color-default-not-found-text-initial\n      );\n  }\n\n  #not-found:not(.active) {\n    display: none;\n  }\n\n  ::slotted(.hidden) {\n    display: none;\n  }\n\n  ::slotted(sinch-title) {\n    padding: 8px 16px;\n\n    --sinch-global-color-text: var(--sinch-comp-select-menu-color-default-title-initial);\n  }\n</style>\n\n<sinch-input id="search" size="s" placeholder="Search">\n  <sinch-icon icons-version="2" name="magnifying-glass"\n    id="icon-search"\n    slot="icon"\n  ></sinch-icon>\n  <sinch-button id="search-clear" slot="right">\n    <sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon>\n  </sinch-button>\n</sinch-input>\n<div id="not-found">\n  <sinch-text type="m">No results</sinch-text>\n</div>\n<div id="listbox" role="presentation">\n  <slot></slot>\n</div>\n';
+import '../input';
+import '../icon';
+import '../text';
+import { isSelectMenuOption } from '../select-menu-option/utils';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, hasClass, isTargetEqual } from '../utils';
+import { CSVToFormData, setFormValue } from '../utils/form';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto;max-height:var(--sinch-comp-select-menu-font-max-height)}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
-const template = document.createElement("template");
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class SelectMenu extends NectaryElement {
+export class SelectMenu extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #$search;
@@ -31,11 +25,11 @@ class SelectMenu extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#internals = this.attachInternals();
-    this.#$optionSlot = shadowRoot.querySelector("slot");
-    this.#$listbox = shadowRoot.querySelector("#listbox");
-    this.#$search = shadowRoot.querySelector("#search");
-    this.#$searchClear = shadowRoot.querySelector("#search-clear");
-    this.#$notFound = shadowRoot.querySelector("#not-found");
+    this.#$optionSlot = shadowRoot.querySelector('slot');
+    this.#$listbox = shadowRoot.querySelector('#listbox');
+    this.#$search = shadowRoot.querySelector('#search');
+    this.#$searchClear = shadowRoot.querySelector('#search-clear');
+    this.#$notFound = shadowRoot.querySelector('#not-found');
     this.#searchDebounce = debounceTimeout(200)(this.#updateSearchValue);
   }
   connectedCallback() {
@@ -43,46 +37,20 @@ class SelectMenu extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute("role", "listbox");
-    this.#internals.role = "listbox";
+    this.setAttribute('role', 'listbox');
+    this.#internals.role = 'listbox';
     this.tabIndex = 0;
-    this.addEventListener("keydown", this.#onListboxKeyDown, options);
-    this.addEventListener("focus", this.#onFocus, options);
-    this.addEventListener("blur", this.#onListboxBlur, options);
-    this.#$listbox.addEventListener("click", this.#onListboxClick, options);
-    this.#$search.addEventListener(
-      "-change",
-      this.#onSearchChange,
-      options
-    );
-    this.#$searchClear.addEventListener(
-      "-click",
-      this.#onSearchClearClick,
-      options
-    );
-    this.#$optionSlot.addEventListener(
-      "slotchange",
-      this.#onOptionSlotChange,
-      options
-    );
-    this.addEventListener(
-      "-search-change",
-      this.#onSearchChangeReactHandler,
-      options
-    );
-    this.addEventListener("-change", this.#onChangeReactHandler, options);
-    subscribeContext(
-      this,
-      "keydown",
-      this.#onContextKeyDown,
-      this.#controller.signal
-    );
-    subscribeContext(
-      this,
-      "visibility",
-      this.#onContextVisibility,
-      this.#controller.signal
-    );
+    this.addEventListener('keydown', this.#onListboxKeyDown, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onListboxBlur, options);
+    this.#$listbox.addEventListener('click', this.#onListboxClick, options);
+    this.#$search.addEventListener('-change', this.#onSearchChange, options);
+    this.#$searchClear.addEventListener('-click', this.#onSearchClearClick, options);
+    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, options);
+    this.addEventListener('-search-change', this.#onSearchChangeReactHandler, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, this.#controller.signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, this.#controller.signal);
     this.#onOptionSlotChange();
   }
   disconnectedCallback() {
@@ -94,126 +62,121 @@ class SelectMenu extends NectaryElement {
     setFormValue(this.#internals, CSVToFormData(this.name, this.value));
   }
   formResetCallback() {
-    this.value = "";
-    setFormValue(this.#internals, "");
+    this.value = '';
+    setFormValue(this.#internals, '');
   }
   formStateRestoreCallback(state) {
-    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, "data-form-state-restore") === false) {
+    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, 'data-form-state-restore') === false) {
       return;
     }
     if (state !== null) {
-      const value = typeof state === "string" ? state : state.get(this.name);
-      this.value = value?.toString() ?? "";
-      setFormValue(this.#internals, CSVToFormData(this.name, value?.toString() ?? ""));
+      const value = typeof state === 'string' ? state : state.get(this.name);
+      this.value = value?.toString() ?? '';
+      setFormValue(this.#internals, CSVToFormData(this.name, value?.toString() ?? ''));
     }
   }
   static get observedAttributes() {
-    return [
-      "value",
-      "rows",
-      "multiple",
-      "search-value",
-      "search-placeholder",
-      "search-autocomplete"
-    ];
+    return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder', 'search-autocomplete'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "multiple": {
-        this.#onValueChange(this.value);
-        updateExplicitBooleanAttribute(
-          this,
-          "aria-multiselectable",
-          isAttrTrue(newVal)
-        );
-        this.#internals.ariaMultiSelectable = isAttrTrue(newVal).toString();
-        break;
-      }
-      case "search-autocomplete": {
-        updateAttribute(this.#$search, "autocomplete", newVal);
-        break;
-      }
-      case "value": {
-        this.#onValueChange(newVal ?? "");
-        break;
-      }
-      case "rows": {
-        const numberOfItems = this.#$optionSlot.assignedElements().length;
-        const maxNumberOfRows = parseInt(newVal ?? "0", 10);
-        this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
-          min: 2,
-          itemSizeMultiplier: ITEM_HEIGHT,
-          addExtraSpace: numberOfItems > maxNumberOfRows
-        });
-        break;
-      }
-      case "search-placeholder": {
-        updateAttribute(this.#$search, "placeholder", newVal);
-        break;
-      }
-      case "search-value": {
-        updateAttribute(this.#$search, "value", newVal);
-        this.#userManagedSearch = true;
-        this.#updateSearchList(newVal !== null ? newVal : "");
-        break;
-      }
+      case 'multiple':
+        {
+          this.#onValueChange(this.value);
+          updateExplicitBooleanAttribute(this, 'aria-multiselectable', isAttrTrue(newVal));
+          this.#internals.ariaMultiSelectable = isAttrTrue(newVal).toString();
+          break;
+        }
+      case 'search-autocomplete':
+        {
+          updateAttribute(this.#$search, 'autocomplete', newVal);
+          break;
+        }
+      case 'value':
+        {
+          this.#onValueChange(newVal ?? '');
+          break;
+        }
+      case 'rows':
+        {
+          const numberOfItems = this.#$optionSlot.assignedElements().length;
+          const maxNumberOfRows = parseInt(newVal ?? '0', 10);
+          this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
+            min: 2,
+            itemSizeMultiplier: ITEM_HEIGHT,
+            addExtraSpace: numberOfItems > maxNumberOfRows
+          });
+          break;
+        }
+      case 'search-placeholder':
+        {
+          updateAttribute(this.#$search, 'placeholder', newVal);
+          break;
+        }
+      case 'search-value':
+        {
+          updateAttribute(this.#$search, 'value', newVal);
+          this.#userManagedSearch = true;
+          this.#updateSearchList(newVal !== null ? newVal : '');
+          break;
+        }
     }
   }
   set name(value) {
-    updateAttribute(this, "name", value);
+    updateAttribute(this, 'name', value);
   }
   get name() {
-    return getAttribute(this, "name", "");
+    return getAttribute(this, 'name', '');
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set rows(value) {
-    updateIntegerAttribute(this, "rows", value);
+    updateIntegerAttribute(this, 'rows', value);
   }
   get rows() {
-    return getIntegerAttribute(this, "rows", null);
+    return getIntegerAttribute(this, 'rows', null);
   }
   set multiple(isMultiple) {
-    updateBooleanAttribute(this, "multiple", isMultiple);
+    updateBooleanAttribute(this, 'multiple', isMultiple);
   }
   get multiple() {
-    return getBooleanAttribute(this, "multiple");
+    return getBooleanAttribute(this, 'multiple');
   }
   set searchable(isSearchable) {
-    updateBooleanAttribute(this, "searchable", isSearchable);
+    updateBooleanAttribute(this, 'searchable', isSearchable);
   }
   get searchable() {
-    const searchableAttribute = this.getAttribute("searchable");
+    const searchableAttribute = this.getAttribute('searchable');
     return searchableAttribute === null ? searchableAttribute : isAttrTrue(searchableAttribute);
   }
-  set "search-autocomplete"(autocomplete) {
-    updateAttribute(this.#$search, "autocomplete", autocomplete);
+  set 'search-autocomplete'(autocomplete) {
+    updateAttribute(this.#$search, 'autocomplete', autocomplete);
   }
-  get "search-autocomplete"() {
-    return getAttribute(this.#$search, "autocomplete", "");
+  get 'search-autocomplete'() {
+    return getAttribute(this.#$search, 'autocomplete', '');
   }
-  set "search-placeholder"(placeholder) {
-    updateAttribute(this.#$search, "placeholder", placeholder);
+  set 'search-placeholder'(placeholder) {
+    updateAttribute(this.#$search, 'placeholder', placeholder);
   }
-  get "search-placeholder"() {
-    return getAttribute(this.#$search, "placeholder", "");
+  get 'search-placeholder'() {
+    return getAttribute(this.#$search, 'placeholder', '');
   }
-  set "search-value"(value) {
-    updateAttribute(this, "search-value", value);
+  set 'search-value'(value) {
+    updateAttribute(this, 'search-value', value);
     this.#userManagedSearch = true;
   }
-  get "search-value"() {
-    return getAttribute(this, "search-value", "");
+  get 'search-value'() {
+    return getAttribute(this, 'search-value', '');
   }
   get focusable() {
     return true;
   }
   #onFocus = () => {
-    const isSearchActive = hasClass(this.#$search, "active");
+    const isSearchActive = hasClass(this.#$search, 'active');
     if (isSearchActive) {
       this.#$search.focus();
     }
@@ -221,39 +184,39 @@ class SelectMenu extends NectaryElement {
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
-  #onListboxClick = (e) => {
+  #onListboxClick = e => {
     const $elem = e.target;
     if ($elem == null || !($elem instanceof Element) || !isSelectMenuOption($elem)) {
       return;
     }
     this.focus();
-    if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, "disabled")) {
+    if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, 'disabled')) {
       this.#selectOption($elem);
       this.#dispatchChangeEvent($elem);
     }
   };
-  #onSearchChange = (e) => {
+  #onSearchChange = e => {
     if (!this.#userManagedSearch) {
       this.#$search.value = e.detail;
       this.#searchDebounce.fn();
     } else {
       this.#updateSearchValue(e.detail);
     }
-    setClass(this.#$searchClear, "active", e.detail.length > 0);
+    setClass(this.#$searchClear, 'active', e.detail.length > 0);
   };
   #onSearchClearClick = () => {
     if (!this.#userManagedSearch) {
-      this.#$search.value = "";
+      this.#$search.value = '';
       this.#searchDebounce.fn();
     } else {
-      this.#updateSearchValue("");
+      this.#updateSearchValue('');
     }
     this.#$search.focus();
-    setClass(this.#$searchClear, "active", false);
+    setClass(this.#$searchClear, 'active', false);
   };
-  #updateSearchValue = (newValue) => {
-    const searchValue = newValue === void 0 ? this.#$search.value.toLowerCase() : newValue;
-    const searchChangedEvent = new CustomEvent("-search-change", {
+  #updateSearchValue = newValue => {
+    const searchValue = newValue === undefined ? this.#$search.value.toLowerCase() : newValue;
+    const searchChangedEvent = new CustomEvent('-search-change', {
       detail: searchValue,
       cancelable: true
     });
@@ -262,21 +225,21 @@ class SelectMenu extends NectaryElement {
       this.#updateSearchList(searchValue);
     }
   };
-  #updateSearchList = (searchValue) => {
+  #updateSearchList = searchValue => {
     const $options = this.#getOptionElements();
     let someFound = false;
     for (const $opt of $options) {
       const isHidden = searchValue.length > 0 && !$opt.matchesSearch(searchValue);
       someFound ||= !isHidden;
-      setClass($opt, "hidden", isHidden);
+      setClass($opt, 'hidden', isHidden);
     }
-    setClass(this.#$notFound, "active", !someFound);
+    setClass(this.#$notFound, 'active', !someFound);
     this.#selectOption(null);
   };
-  #onContextKeyDown = (e) => {
+  #onContextKeyDown = e => {
     this.#handleKeydown(e.detail);
   };
-  #onContextVisibility = (e) => {
+  #onContextVisibility = e => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
       this.#onFocus();
@@ -284,30 +247,33 @@ class SelectMenu extends NectaryElement {
       this.#selectOption(null);
     }
   };
-  #onListboxKeyDown = (e) => {
+  #onListboxKeyDown = e => {
     this.#handleKeydown(e);
   };
   #handleKeydown(e) {
     switch (e.code) {
-      case "Space":
-      case "Enter": {
-        const $option = this.#findSelectedOption();
-        if ($option !== null) {
+      case 'Space':
+      case 'Enter':
+        {
+          const $option = this.#findSelectedOption();
+          if ($option !== null) {
+            e.preventDefault();
+            this.#dispatchChangeEvent($option);
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#selectOption(this.#getPrevOption());
+          break;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          this.#selectOption(this.#getNextOption());
+          break;
         }
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        this.#selectOption(this.#getPrevOption());
-        break;
-      }
-      case "ArrowDown": {
-        e.preventDefault();
-        this.#selectOption(this.#getNextOption());
-        break;
-      }
     }
   }
   #onOptionSlotChange = () => {
@@ -316,37 +282,37 @@ class SelectMenu extends NectaryElement {
     const isEnoughOptions = options.length >= NUM_ITEMS_SEARCH;
     const isSearchActive = isEnoughOptions && searchable !== false || Boolean(searchable);
     if (!isSearchActive) {
-      updateAttribute(this.#$search, "value", null);
+      updateAttribute(this.#$search, 'value', null);
     }
-    setClass(this.#$search, "active", isSearchActive);
+    setClass(this.#$search, 'active', isSearchActive);
     this.#onValueChange(this.value);
   };
   #onValueChange(csv) {
     if (this.multiple) {
       const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && values.includes(getAttribute($option, "value", ""));
-        updateBooleanAttribute($option, "data-checked", isChecked);
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
+        updateBooleanAttribute($option, 'data-checked', isChecked);
       }
       const formData = new FormData();
-      values.forEach((value) => {
+      values.forEach(value => {
         formData.append(this.name, value);
       });
       setFormValue(this.#internals, formData);
     } else {
       const value = getFirstCsvValue(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
-        updateBooleanAttribute($option, "data-checked", isChecked);
+        const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+        updateBooleanAttribute($option, 'data-checked', isChecked);
       }
-      setFormValue(this.#internals, value ?? "");
+      setFormValue(this.#internals, value ?? '');
     }
   }
   #getFirstOption() {
     const $options = this.#getOptionElements();
     for (let i = 0; i < $options.length; i++) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, "disabled") && !el.classList.contains("hidden")) {
+      if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
         return el;
       }
     }
@@ -356,7 +322,7 @@ class SelectMenu extends NectaryElement {
     const $options = this.#getOptionElements();
     for (let i = $options.length - 1; i >= 0; i--) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, "disabled") && !el.classList.contains("hidden")) {
+      if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
         return el;
       }
     }
@@ -368,7 +334,7 @@ class SelectMenu extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(i + index) % $options.length];
-        if (!getBooleanAttribute(el, "disabled") && !el.classList.contains("hidden")) {
+        if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
           return el;
         }
       }
@@ -381,7 +347,7 @@ class SelectMenu extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(index - i + $options.length) % $options.length];
-        if (!getBooleanAttribute(el, "disabled") && !el.classList.contains("hidden")) {
+        if (!getBooleanAttribute(el, 'disabled') && !el.classList.contains('hidden')) {
           return el;
         }
       }
@@ -389,12 +355,14 @@ class SelectMenu extends NectaryElement {
     return this.#getLastOption();
   }
   #selectOption($option) {
-    const hasRows = this.hasAttribute("rows");
+    const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-      updateBooleanAttribute($op, "data-selected", isSelected);
-      if (isSelected && Boolean(hasRows)) {
-        $op.scrollIntoView?.({ block: "nearest" });
+      updateBooleanAttribute($op, 'data-selected', isSelected);
+      if (isSelected && hasRows) {
+        $op.scrollIntoView?.({
+          block: 'nearest'
+        });
       }
     }
   }
@@ -406,7 +374,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-      if (!getBooleanAttribute(el, "disabled") && getBooleanAttribute(el, "data-selected")) {
+      if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
         return i;
       }
     }
@@ -415,7 +383,7 @@ class SelectMenu extends NectaryElement {
   #findSelectedOption() {
     const elements = this.#getOptionElements();
     for (const el of elements) {
-      if (!getBooleanAttribute(el, "disabled") && getBooleanAttribute(el, "data-selected")) {
+      if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
         return el;
       }
     }
@@ -425,7 +393,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
     for (const $el of elements) {
-      if (!getBooleanAttribute($el, "disabled") && getAttribute($el, "value") === value) {
+      if (!getBooleanAttribute($el, 'disabled') && getAttribute($el, 'value') === value) {
         return $el;
       }
     }
@@ -436,21 +404,16 @@ class SelectMenu extends NectaryElement {
       return;
     }
     const value = $opt.value;
-    const result = this.multiple ? updateCsv(
-      this.value,
-      value,
-      !getBooleanAttribute($opt, "data-checked")
-    ) : value;
-    this.dispatchEvent(new CustomEvent("-change", { detail: result }));
-  }
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+    const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($opt, 'data-checked')) : value;
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: result
+    }));
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
-  #onSearchChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-search-change")?.(e);
+  #onSearchChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-search-change')?.(e);
   };
 }
-defineCustomElement("sinch-select-menu", SelectMenu);
-export {
-  SelectMenu
-};
+defineCustomElement('sinch-select-menu', SelectMenu);

package/select-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchSelectMenuProps = {
     /** Identification for uncontrolled form submissions */
     name?: string;
@@ -36,23 +36,3 @@ export type TSinchSelectMenu = {
 };
 export type TSinchSelectMenuElement = NectaryComponentVanillaByType<TSinchSelectMenu>;
 export type TSinchSelectMenuReact = NectaryComponentReactByType<TSinchSelectMenu>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-select-menu': TSinchSelectMenu;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-select-menu': NectaryComponentVanilla<'sinch-select-menu'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-select-menu': NectaryComponentReact<'sinch-select-menu'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-select-menu': NectaryComponentReact<'sinch-select-menu'>;
-        }
-    }
-}

package/select-menu/types.js

@@ -1 +1 @@
-
+export {};

package/select-menu-option/index.d.ts

@@ -1,7 +1,8 @@
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchSelectMenuOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class SelectMenuOption extends NectaryElement {
     #private;
     constructor();
@@ -16,3 +17,23 @@ export declare class SelectMenuOption extends NectaryElement {
     get disabled(): boolean;
     matchesSearch(searchValue: string): boolean;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-select-menu-option': TSinchSelectMenuOption;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-select-menu-option': NectaryComponentVanilla<'sinch-select-menu-option'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-menu-option': NectaryComponentReact<'sinch-select-menu-option'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-select-menu-option': NectaryComponentReact<'sinch-select-menu-option'>;
+        }
+    }
+}