@nectary/components 5.31.3 → 5.31.4

package/bundle.js

@@ -12975,7 +12975,6 @@ defineCustomElement("sinch-select-menu-option", SelectMenuOption);
 const isSelectMenuOption = (el) => el.localName === "sinch-select-menu-option";
 const templateHTML$h = '<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$h = document.createElement("template");
 template$h.innerHTML = templateHTML$h;
 class SelectMenu extends NectaryElement {
@@ -13076,6 +13075,7 @@ class SelectMenu extends NectaryElement {
       "value",
       "rows",
       "multiple",
+      "searchable",
       "search-value",
       "search-placeholder",
       "search-autocomplete"
@@ -13093,6 +13093,10 @@ class SelectMenu extends NectaryElement {
         this.#internals.ariaMultiSelectable = isAttrTrue(newVal).toString();
         break;
       }
+      case "searchable": {
+        this.#onOptionSlotChange();
+        break;
+      }
       case "search-autocomplete": {
         updateAttribute(this.#$search, "autocomplete", newVal);
         break;
@@ -13102,13 +13106,7 @@ class SelectMenu extends NectaryElement {
         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
-        });
+        this.#updateListboxMaxHeight();
         break;
       }
       case "search-placeholder": {
@@ -13148,7 +13146,13 @@ class SelectMenu extends NectaryElement {
     return getBooleanAttribute(this, "multiple");
   }
   set searchable(isSearchable) {
-    updateBooleanAttribute(this, "searchable", isSearchable);
+    if (isSearchable === false) {
+      this.setAttribute("searchable", "false");
+    } else if (isSearchable === true) {
+      updateBooleanAttribute(this, "searchable", true);
+    } else {
+      this.removeAttribute("searchable");
+    }
   }
   get searchable() {
     const searchableAttribute = this.getAttribute("searchable");
@@ -13234,7 +13238,7 @@ class SelectMenu extends NectaryElement {
       someFound ||= !isHidden;
       setClass($opt, "hidden", isHidden);
     }
-    setClass(this.#$notFound, "active", !someFound);
+    setClass(this.#$notFound, "active", searchValue.length > 0 && !someFound);
     this.#selectOption(null);
   };
   #onContextKeyDown = (e) => {
@@ -13282,16 +13286,27 @@ class SelectMenu extends NectaryElement {
     }
   };
   #onOptionSlotChange = () => {
+    if (this.hasAttribute("rows")) {
+      this.#updateListboxMaxHeight();
+    }
     const searchable = this.searchable;
-    const options = this.#getOptionElements();
-    const isEnoughOptions = options.length >= NUM_ITEMS_SEARCH;
-    const isSearchActive = isEnoughOptions && searchable !== false || Boolean(searchable);
+    const isSearchActive = searchable !== false;
     if (!isSearchActive) {
       updateAttribute(this.#$search, "value", null);
     }
     setClass(this.#$search, "active", isSearchActive);
     this.#onValueChange(this.value);
   };
+  #updateListboxMaxHeight = () => {
+    const rowsAttr = this.getAttribute("rows");
+    const numberOfItems = this.#$optionSlot.assignedElements().length;
+    const maxNumberOfRows = parseInt(rowsAttr ?? "0", 10);
+    this.#$listbox.style.maxHeight = attrValueToPixels(rowsAttr, {
+      min: 2,
+      itemSizeMultiplier: ITEM_HEIGHT,
+      addExtraSpace: numberOfItems > maxNumberOfRows
+    });
+  };
   #onValueChange(csv) {
     if (this.multiple) {
       const values = unpackCsv(csv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.31.3",
+  "version": "5.31.4",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/select-menu/index.d.ts

@@ -22,8 +22,8 @@ export declare class SelectMenu extends NectaryElement {
     get rows(): number | null;
     set multiple(isMultiple: boolean);
     get multiple(): boolean;
-    set searchable(isSearchable: boolean | null);
-    get searchable(): boolean | null;
+    set searchable(isSearchable: boolean | null | undefined);
+    get searchable(): boolean | null | undefined;
     set 'search-autocomplete'(autocomplete: string);
     get 'search-autocomplete'(): string;
     set 'search-placeholder'(placeholder: string);

package/select-menu/index.js

@@ -4,7 +4,7 @@ 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 { getBooleanAttribute, updateAttribute, updateExplicitBooleanAttribute, isAttrTrue, getAttribute, updateIntegerAttribute, getIntegerAttribute, updateBooleanAttribute, hasClass, setClass, attrValueToPixels } 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";
@@ -12,7 +12,6 @@ import { isTargetEqual } from "../utils/event-target.js";
 import { setFormValue, CSVToFormData } from "../utils/form.js";
 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");
 template.innerHTML = templateHTML;
 class SelectMenu extends NectaryElement {
@@ -113,6 +112,7 @@ class SelectMenu extends NectaryElement {
       "value",
       "rows",
       "multiple",
+      "searchable",
       "search-value",
       "search-placeholder",
       "search-autocomplete"
@@ -130,6 +130,10 @@ class SelectMenu extends NectaryElement {
         this.#internals.ariaMultiSelectable = isAttrTrue(newVal).toString();
         break;
       }
+      case "searchable": {
+        this.#onOptionSlotChange();
+        break;
+      }
       case "search-autocomplete": {
         updateAttribute(this.#$search, "autocomplete", newVal);
         break;
@@ -139,13 +143,7 @@ class SelectMenu extends NectaryElement {
         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
-        });
+        this.#updateListboxMaxHeight();
         break;
       }
       case "search-placeholder": {
@@ -185,7 +183,13 @@ class SelectMenu extends NectaryElement {
     return getBooleanAttribute(this, "multiple");
   }
   set searchable(isSearchable) {
-    updateBooleanAttribute(this, "searchable", isSearchable);
+    if (isSearchable === false) {
+      this.setAttribute("searchable", "false");
+    } else if (isSearchable === true) {
+      updateBooleanAttribute(this, "searchable", true);
+    } else {
+      this.removeAttribute("searchable");
+    }
   }
   get searchable() {
     const searchableAttribute = this.getAttribute("searchable");
@@ -271,7 +275,7 @@ class SelectMenu extends NectaryElement {
       someFound ||= !isHidden;
       setClass($opt, "hidden", isHidden);
     }
-    setClass(this.#$notFound, "active", !someFound);
+    setClass(this.#$notFound, "active", searchValue.length > 0 && !someFound);
     this.#selectOption(null);
   };
   #onContextKeyDown = (e) => {
@@ -319,16 +323,27 @@ class SelectMenu extends NectaryElement {
     }
   };
   #onOptionSlotChange = () => {
+    if (this.hasAttribute("rows")) {
+      this.#updateListboxMaxHeight();
+    }
     const searchable = this.searchable;
-    const options = this.#getOptionElements();
-    const isEnoughOptions = options.length >= NUM_ITEMS_SEARCH;
-    const isSearchActive = isEnoughOptions && searchable !== false || Boolean(searchable);
+    const isSearchActive = searchable !== false;
     if (!isSearchActive) {
       updateAttribute(this.#$search, "value", null);
     }
     setClass(this.#$search, "active", isSearchActive);
     this.#onValueChange(this.value);
   };
+  #updateListboxMaxHeight = () => {
+    const rowsAttr = this.getAttribute("rows");
+    const numberOfItems = this.#$optionSlot.assignedElements().length;
+    const maxNumberOfRows = parseInt(rowsAttr ?? "0", 10);
+    this.#$listbox.style.maxHeight = attrValueToPixels(rowsAttr, {
+      min: 2,
+      itemSizeMultiplier: ITEM_HEIGHT,
+      addExtraSpace: numberOfItems > maxNumberOfRows
+    });
+  };
   #onValueChange(csv) {
     if (this.multiple) {
       const values = unpackCsv(csv);

package/select-menu/types.d.ts

@@ -8,7 +8,7 @@ export type TSinchSelectMenuProps = {
     rows?: number;
     /** Allows multiple selection */
     multiple?: boolean;
-    /** Enforce the search bar appearing, by default it appears above a certain number of options  */
+    /** Show the search bar, shown by default unless explicitly set to false */
     searchable?: boolean | null;
     /** Value for the search input */
     'search-value'?: string;