@nectary/components 4.11.1 → 4.12.0

package/select-menu/index.js

@@ -1,15 +1,21 @@
-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>';
+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';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
-const template = document.createElement('template');
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class SelectMenu extends NectaryElement {
+class SelectMenu extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #$search;
@@ -25,11 +31,11 @@ export 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() {
@@ -37,20 +43,46 @@ export 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() {
@@ -62,121 +94,126 @@ export 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();
     }
@@ -184,39 +221,39 @@ export 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 === undefined ? this.#$search.value.toLowerCase() : newValue;
-    const searchChangedEvent = new CustomEvent('-search-change', {
+  #updateSearchValue = (newValue) => {
+    const searchValue = newValue === void 0 ? this.#$search.value.toLowerCase() : newValue;
+    const searchChangedEvent = new CustomEvent("-search-change", {
       detail: searchValue,
       cancelable: true
     });
@@ -225,21 +262,21 @@ export 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();
@@ -247,33 +284,30 @@ export 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) {
-            e.preventDefault();
-            this.#dispatchChangeEvent($option);
-          }
-          break;
-        }
-      case 'ArrowUp':
-        {
-          e.preventDefault();
-          this.#selectOption(this.#getPrevOption());
-          break;
-        }
-      case 'ArrowDown':
-        {
+      case "Space":
+      case "Enter": {
+        const $option = this.#findSelectedOption();
+        if ($option !== null) {
           e.preventDefault();
-          this.#selectOption(this.#getNextOption());
-          break;
+          this.#dispatchChangeEvent($option);
         }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        this.#selectOption(this.#getPrevOption());
+        break;
+      }
+      case "ArrowDown": {
+        e.preventDefault();
+        this.#selectOption(this.#getNextOption());
+        break;
+      }
     }
   }
   #onOptionSlotChange = () => {
@@ -282,37 +316,37 @@ export 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;
       }
     }
@@ -322,7 +356,7 @@ export 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;
       }
     }
@@ -334,7 +368,7 @@ export 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;
         }
       }
@@ -347,7 +381,7 @@ export 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;
         }
       }
@@ -355,14 +389,12 @@ export 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 && hasRows) {
-        $op.scrollIntoView?.({
-          block: 'nearest'
-        });
+      updateBooleanAttribute($op, "data-selected", isSelected);
+      if (isSelected && Boolean(hasRows)) {
+        $op.scrollIntoView?.({ block: "nearest" });
       }
     }
   }
@@ -374,7 +406,7 @@ export 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;
       }
     }
@@ -383,7 +415,7 @@ export 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;
       }
     }
@@ -393,7 +425,7 @@ export 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;
       }
     }
@@ -404,16 +436,21 @@ export 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);
+defineCustomElement("sinch-select-menu", SelectMenu);
+export {
+  SelectMenu
+};

package/select-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchSelectMenuProps = {
     /** Identification for uncontrolled form submissions */
     name?: string;
@@ -36,3 +36,23 @@ 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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/select-menu-option/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-select-menu-option");