@schukai/monster 4.48.1 → 4.48.3

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.48.3] - 2025-12-02
+
+### Bug Fixes
+
+- **select:** prevent NaN labels
+
+
+
+## [4.48.2] - 2025-12-02
+
+### Bug Fixes
+
+- **select:** own lookup cache
+
+
+
 ## [4.48.1] - 2025-11-28
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.48.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.48.3"}

package/source/components/form/select.mjs

@@ -272,6 +272,18 @@ const currentPageSymbol = Symbol("currentPage");
  */
 const remoteFilterFirstOpendSymbol = Symbol("remoteFilterFirstOpend");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const lookupCacheSymbol = Symbol("lookupCache");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const lookupInProgressSymbol = Symbol("lookupInProgress");
+
 /**
  * @private
  * @type {number}
@@ -346,6 +358,8 @@ class Select extends CustomControl {
   constructor() {
     super();
     this[currentPageSymbol] = 1;
+    this[lookupCacheSymbol] = new Map();
+    this[lookupInProgressSymbol] = new Map();
     initOptionObserver.call(this);
   }
 
@@ -613,6 +627,10 @@ class Select extends CustomControl {
     try {
       hide.call(this);
 
+      // Clear the lookup cache
+      this[lookupCacheSymbol].clear();
+      this[lookupInProgressSymbol].clear();
+
       setSelection
         .call(this, null)
         .then(() => {
@@ -1845,6 +1863,11 @@ function parseSlotsToOptions() {
  * @return {*}
  */
 function buildSelectionLabel(value) {
+  // First, check the lookup cache.
+  if (this[lookupCacheSymbol].has(value)) {
+    return this[lookupCacheSymbol].get(value);
+  }
+
   const options = this.getOption("options");
 
   for (let i = 0; i < options.length; i++) {
@@ -1879,6 +1902,74 @@ function buildSelectionLabel(value) {
   return undefined;
 }
 
+/**
+ * @private
+ * @param {string} value The value to look up.
+ * @returns {Promise<void>}
+ */
+async function lookupValueAndCache(value) {
+  const lookupUrl = this.getOption("lookup.url");
+  // A more robust check for invalid values. 0 and "" are valid.
+  if (!lookupUrl || value === null || value === undefined || Number.isNaN(value)) {
+    return;
+  }
+
+  // Avoid duplicate lookups for the same value.
+  if (this[lookupInProgressSymbol].has(value)) {
+    return;
+  }
+
+  try {
+    this[lookupInProgressSymbol].set(value, true);
+
+    const markerOpen = this.getOption("filter.marker.open", "{");
+    const markerClose = this.getOption("filter.marker.close", "}");
+    const url = lookupUrl.replace(`${markerOpen}filter${markerClose}`, value);
+
+    const data = await fetchData.call(this, url);
+
+    const mappingOptions = this.getOption("mapping", {});
+    const map = buildMap(
+      data,
+      mappingOptions.selector,
+      mappingOptions.labelTemplate,
+      mappingOptions.valueTemplate,
+      mappingOptions.filter,
+    );
+
+    let found = false;
+    for (const [itemValue, itemLabel] of map.entries()) {
+      // If the label template results in NaN, log an error and skip caching.
+      if (itemLabel === "NaN") {
+        addErrorAttribute(
+          this,
+          new Error(
+            `Lookup for value '${itemValue}' resulted in a 'NaN' label. Check 'mapping.labelTemplate' and API response.`,
+          ),
+        );
+        continue;
+      }
+
+      // The lookup might return more than the requested value, so we cache all of them.
+      if (!this[lookupCacheSymbol].has(itemValue)) {
+        this[lookupCacheSymbol].set(itemValue, itemLabel);
+        if (`${itemValue}` === `${value}`) {
+          found = true;
+        }
+      }
+    }
+
+    // If the specific value was found, trigger a re-render of the selection.
+    if (found) {
+      await setSelection.call(this, this.getOption("selection"));
+    }
+  } catch (e) {
+    addErrorAttribute(this, e);
+  } finally {
+    this[lookupInProgressSymbol].delete(value);
+  }
+}
+
 /**
  * @private
  * @param {*} value
@@ -1892,6 +1983,15 @@ function getSelectionLabel(value) {
     if (isString(label)) return label;
   }
 
+  // If the label was not found, and we have a lookup URL, trigger a lookup for valid values.
+  const isValueValidForLookup =
+    value !== null && value !== undefined && !Number.isNaN(value);
+  if (this.getOption("lookup.url") && isValueValidForLookup) {
+    lookupValueAndCache.call(this, value).catch((e) => {
+      addErrorAttribute(this, e);
+    });
+  }
+
   if (isString(value) || isInteger(value)) {
     return `${value}`;
   }