@nectary/components 5.31.2 → 5.31.4

package/bundle.js

@@ -1418,7 +1418,7 @@ class RichTextareaChip extends NectaryElement {
   };
 }
 defineCustomElement("sinch-rich-textarea-chip", RichTextareaChip);
-const regLinebreak = /(?:<br>\n|<br>|\n)/;
+const regLinebreak = /(?:<br>\n|<br>| {2,}\n|\n)/;
 const regParagraph = /\n{2,}/;
 const regEm3Star = new RegExp("(?<!\\\\)\\*\\*\\*(?<em3>.+?)(?<!\\\\)\\*\\*\\*");
 const regEm2Star = new RegExp("(?<!\\\\)\\*\\*(?<em2>.+?)(?<!\\\\)\\*\\*");
@@ -4059,6 +4059,7 @@ class Tooltip extends NectaryElement {
       this.#schedulePlacement();
     });
     this.#resizeObserver.observe(this.#$content);
+    window.addEventListener("resize", this.#onWindowResize, options);
     updateAttribute(this.#$pop, "orientation", getPopOrientation$1(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     updateBooleanAttribute(this.#$pop, "disable-focus-restore", true);
@@ -4524,6 +4525,14 @@ class Tooltip extends NectaryElement {
     this.#$pop.style.removeProperty("--sinch-pop-offset-x");
     this.#$pop.style.removeProperty("--sinch-pop-offset-y");
   }
+  #onWindowResize = () => {
+    if (!this.#isOpen()) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      this.#schedulePlacement();
+    });
+  };
   #schedulePlacement(resetZeroDimensionRetries = true) {
     if (!this.#isOpen() || this.#placementScheduled) {
       return;
@@ -11357,7 +11366,6 @@ const MD_EM1_STAR_TOKEN = "*";
 const MD_EM3_UNDERSCORE_TOKEN = "___";
 const MD_EM2_UNDERSCORE_TOKEN = "__";
 const MD_EM1_UNDERSCORE_TOKEN = "_";
-const MD_LINEBREAK_TOKEN = "  \n";
 const MD_CODETAG_TOKEN = "`";
 const MD_ULISTITEM_TOKEN = "*";
 const MD_OLISTITEM_TOKEN = "1.";
@@ -11484,11 +11492,7 @@ const serializeRoot = ($root, range) => {
   };
   const flushParagraphChunks = () => {
     if (paragraphChunks.length > 0) {
-      chunks.push(
-        paragraphChunks.reduce((a, b) => {
-          return b.length > 0 ? a.concat(MD_LINEBREAK_TOKEN, b) : a.concat("<br>");
-        })
-      );
+      chunks.push(...paragraphChunks);
       paragraphChunks.length = 0;
     }
   };
@@ -12971,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 {
@@ -13072,6 +13075,7 @@ class SelectMenu extends NectaryElement {
       "value",
       "rows",
       "multiple",
+      "searchable",
       "search-value",
       "search-placeholder",
       "search-autocomplete"
@@ -13089,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;
@@ -13098,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": {
@@ -13144,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");
@@ -13230,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) => {
@@ -13278,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.2",
+  "version": "5.31.4",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/rich-textarea/utils.js

@@ -1571,7 +1571,6 @@ const MD_EM1_STAR_TOKEN = "*";
 const MD_EM3_UNDERSCORE_TOKEN = "___";
 const MD_EM2_UNDERSCORE_TOKEN = "__";
 const MD_EM1_UNDERSCORE_TOKEN = "_";
-const MD_LINEBREAK_TOKEN = "  \n";
 const MD_CODETAG_TOKEN = "`";
 const MD_ULISTITEM_TOKEN = "*";
 const MD_OLISTITEM_TOKEN = "1.";
@@ -1698,11 +1697,7 @@ const serializeRoot = ($root, range) => {
   };
   const flushParagraphChunks = () => {
     if (paragraphChunks.length > 0) {
-      chunks.push(
-        paragraphChunks.reduce((a, b) => {
-          return b.length > 0 ? a.concat(MD_LINEBREAK_TOKEN, b) : a.concat("<br>");
-        })
-      );
+      chunks.push(...paragraphChunks);
       paragraphChunks.length = 0;
     }
   };

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;

package/tooltip/index.js

@@ -83,6 +83,7 @@ class Tooltip extends NectaryElement {
       this.#schedulePlacement();
     });
     this.#resizeObserver.observe(this.#$content);
+    window.addEventListener("resize", this.#onWindowResize, options);
     updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     updateBooleanAttribute(this.#$pop, "disable-focus-restore", true);
@@ -548,6 +549,14 @@ class Tooltip extends NectaryElement {
     this.#$pop.style.removeProperty("--sinch-pop-offset-x");
     this.#$pop.style.removeProperty("--sinch-pop-offset-y");
   }
+  #onWindowResize = () => {
+    if (!this.#isOpen()) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      this.#schedulePlacement();
+    });
+  };
   #schedulePlacement(resetZeroDimensionRetries = true) {
     if (!this.#isOpen() || this.#placementScheduled) {
       return;

package/utils/markdown.js

@@ -1,4 +1,4 @@
-const regLinebreak = /(?:<br>\n|<br>|\n)/;
+const regLinebreak = /(?:<br>\n|<br>| {2,}\n|\n)/;
 const regParagraph = /\n{2,}/;
 const regEm3Star = new RegExp("(?<!\\\\)\\*\\*\\*(?<em3>.+?)(?<!\\\\)\\*\\*\\*");
 const regEm2Star = new RegExp("(?<!\\\\)\\*\\*(?<em2>.+?)(?<!\\\\)\\*\\*");