@schukai/monster 4.136.7 → 4.136.10

package/CHANGELOG.md

@@ -18,6 +18,8 @@
 - **message-state-button:** distinguish overlay, prose, and wide message layouts for smart popper sizing and overflow ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
 - **popper:** support kebab-case camelCase option attributes such as `data-monster-option-popper-content-overflow` ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
 - **popper/select:** let nested `monster-select` poppers escape parent popper content wrappers without shrinking normal parent content sizing ([#416](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/work_items/416))
+- **select:** skip hidden remote info requests when `showRemoteInfo` is disabled ([#418](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/work_items/418))
+- **select:** defer remote info loading until the dropdown opens and reuse pagination totals from remote option fetches when available ([#418](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/work_items/418))
 
 ### Changes
 

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.136.7"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.136.10"}

package/source/components/form/select.mjs

@@ -306,6 +306,7 @@ const lookupCacheSymbol = Symbol("lookupCache");
 const lookupInProgressSymbol = Symbol("lookupInProgress");
 const unresolvedSelectionValuesSymbol = Symbol("unresolvedSelectionValues");
 const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
+const remoteInfoRequestSymbol = Symbol("remoteInfoRequest");
 
 /**
  * @private
@@ -458,6 +459,28 @@ class Select extends CustomControl {
 	/**
 	 * Defines the default configuration options for the monster-control.
 	 * These options can be overridden via the HTML attribute `data-monster-options`.
+	 * Use JSON in `data-monster-options` when option values must keep their JSON
+	 * types, for example:
+	 *
+	 * ```html
+	 * <monster-select
+	 *   data-monster-options='{"empty":{"equivalents":[null,"",0]}}'>
+	 * </monster-select>
+	 * ```
+	 *
+	 * When the value comes from an updater object, bind it through
+	 * `data-monster-properties`. The bound object value keeps its JavaScript type,
+	 * so an array such as `[null, "", 0]` keeps the numeric `0` as a number:
+	 *
+	 * ```html
+	 * <monster-select
+	 *   data-monster-properties="option:empty.equivalents path:emptyEquivalents">
+	 * </monster-select>
+	 * ```
+	 *
+	 * Do not use `data-monster-option-empty-equivalents` for typed primitive
+	 * values; array option attributes are split as strings and cannot express a
+	 * numeric `0`.
 	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
 	 *
 	 * @property {string[]} toggleEventType - Array of DOM event names (e.g., ["click", "touch"]) that toggle the dropdown.
@@ -528,7 +551,7 @@ class Select extends CustomControl {
 	 * @property {Object} empty - Handling of empty or undefined values.
 	 * @property {string} empty.defaultValueRadio - Default value for `type="radio"` when no selection exists.
 	 * @property {Array} empty.defaultValueCheckbox - Default value (empty array) for `type="checkbox"`.
-	 * @property {Array} empty.equivalents - Values that are considered "empty" (e.g., `undefined`, `null`, `""`) and are normalized to the default value.
+	 * @property {Array} empty.equivalents - Values that are considered "empty" (e.g., `undefined`, `null`, `""`, `NaN`) and are normalized to the default value. Matching is type-safe: a configured string `"0"` only matches the string `"0"`; configure numeric `0` explicitly, via `data-monster-options` JSON, `data-monster-properties`, or `setOption()`, when the number `0` should be treated as empty.
 	 * @property {Object} formatter - Functions for formatting display values.
 	 * @property {Function} formatter.selection - Callback `(value, option) => string` to format the display text of selected values.
 	 * @property {Object} classes - CSS classes for various elements.
@@ -698,7 +721,6 @@ class Select extends CustomControl {
 					checkOptionState.call(this);
 					calcAndSetOptionsDimension.call(this);
 					updatePopper.call(this);
-					initTotal.call(this);
 				})
 				.catch((e) => {
 					addErrorAttribute(this, e);
@@ -721,8 +743,6 @@ class Select extends CustomControl {
 		let lazyLoadFlag = self.getOption("features.lazyLoad", false);
 		const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
 
-		initTotal.call(self);
-
 		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
 			self.setOption("features.lazyLoad", false);
 			lazyLoadFlag = false;
@@ -2238,22 +2258,56 @@ function parseSlotsToOptions() {
 function buildSelectionLabel(value) {
 	const strict = this.getOption("features.useStrictValueComparison") === true;
 	const map = this[optionsMapSymbol];
-	const key = strict ? value : String(value);
+	const key = strict ? value : getSelectionStateKey.call(this, value);
 
 	if (map && map.has(key)) {
 		if (clearUnresolvedSelectionValue.call(this, value)) {
-			this[lookupCacheSymbol].delete(value);
+			this[lookupCacheSymbol].delete(getSelectionCacheKey.call(this, value));
 		}
 		return map.get(key);
 	}
 
-	if (this[lookupCacheSymbol].has(value)) {
-		return this[lookupCacheSymbol].get(value);
+	const cacheKey = getSelectionCacheKey.call(this, value);
+	if (this[lookupCacheSymbol].has(cacheKey)) {
+		return this[lookupCacheSymbol].get(cacheKey);
 	}
 
 	return undefined;
 }
 
+/**
+ * @private
+ * @param {*} value
+ * @returns {string}
+ */
+function getSelectionValueLabel(value) {
+	if (isValueIsEmpty.call(this, value)) {
+		return "";
+	}
+
+	if (isPrimitive(value)) {
+		return String(value);
+	}
+
+	if (isObject(value)) {
+		for (const key of ["value", "id", "key"]) {
+			const candidate = value?.[key];
+			if (!isValueIsEmpty.call(this, candidate) && isPrimitive(candidate)) {
+				return String(candidate);
+			}
+		}
+
+		try {
+			const json = JSON.stringify(value);
+			if (isString(json)) {
+				return json;
+			}
+		} catch (e) {}
+	}
+
+	return String(value);
+}
+
 /**
  * @private
  * @param {*} value
@@ -2262,7 +2316,33 @@ function buildSelectionLabel(value) {
 function getSelectionStateKey(value) {
 	return this.getOption("features.useStrictValueComparison") === true
 		? value
-		: String(value);
+		: getSelectionValueLabel.call(this, value);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {*}
+ */
+function getSelectionCacheKey(value) {
+	return getSelectionStateKey.call(this, value);
+}
+
+/**
+ * @private
+ * @param {*} current
+ * @param {*} expected
+ * @returns {boolean}
+ */
+function areLookupValuesEqual(current, expected) {
+	if (this.getOption("features.useStrictValueComparison") === true) {
+		return current === expected;
+	}
+
+	return (
+		getSelectionValueLabel.call(this, current) ===
+		getSelectionValueLabel.call(this, expected)
+	);
 }
 
 /**
@@ -2357,6 +2437,8 @@ function buildSelectionItem(value, preferredLabel) {
  */
 async function lookupValueAndCache(value) {
 	const lookupUrl = this.getOption("lookup.url");
+	const lookupValue = getSelectionValueLabel.call(this, value);
+	const cacheKey = getSelectionCacheKey.call(this, value);
 	// A more robust check for invalid values. 0 and "" are valid.
 	if (
 		!lookupUrl ||
@@ -2381,7 +2463,10 @@ async function lookupValueAndCache(value) {
 
 		const markerOpen = this.getOption("filter.marker.open", "{");
 		const markerClose = this.getOption("filter.marker.close", "}");
-		const url = lookupUrl.replace(`${markerOpen}filter${markerClose}`, value);
+		const url = lookupUrl.replace(
+			`${markerOpen}filter${markerClose}`,
+			lookupValue,
+		);
 
 		const data = await fetchData.call(this, url);
 
@@ -2407,8 +2492,9 @@ async function lookupValueAndCache(value) {
 			}
 
 			// The lookup might return more than the requested value, so we cache all of them.
-			if (this[lookupCacheSymbol].get(itemValue) !== itemLabel) {
-				this[lookupCacheSymbol].set(itemValue, itemLabel);
+			const itemCacheKey = getSelectionCacheKey.call(this, itemValue);
+			if (this[lookupCacheSymbol].get(itemCacheKey) !== itemLabel) {
+				this[lookupCacheSymbol].set(itemCacheKey, itemLabel);
 				refreshSelection = true;
 			}
 
@@ -2416,13 +2502,13 @@ async function lookupValueAndCache(value) {
 				refreshSelection = true;
 			}
 
-			if (`${itemValue}` === `${value}`) {
+			if (areLookupValuesEqual.call(this, itemValue, value)) {
 				found = true;
 			}
 		}
 
-		if (!found && !this[lookupCacheSymbol].has(value)) {
-			this[lookupCacheSymbol].set(value, `${value}`);
+		if (!found && !this[lookupCacheSymbol].has(cacheKey)) {
+			this[lookupCacheSymbol].set(cacheKey, lookupValue);
 			refreshSelection = true;
 		}
 
@@ -2433,8 +2519,8 @@ async function lookupValueAndCache(value) {
 		hasError = true;
 		addErrorAttribute(this, e);
 
-		if (!this[lookupCacheSymbol].has(value)) {
-			this[lookupCacheSymbol].set(value, `${value}`);
+		if (!this[lookupCacheSymbol].has(cacheKey)) {
+			this[lookupCacheSymbol].set(cacheKey, lookupValue);
 			refreshSelection = true;
 		}
 
@@ -2482,11 +2568,7 @@ function getSelectionLabel(value) {
 		});
 	}
 
-	if (isString(value) || isInteger(value)) {
-		return `${value}`;
-	}
-
-	return this.getOption("labels.cannot-be-loaded", value);
+	return getSelectionValueLabel.call(this, value);
 }
 
 /**
@@ -2556,17 +2638,15 @@ function initOptionObserver() {
 				if (isArray(options)) {
 					for (const o of options) {
 						if (isPrimitive(o)) {
-							const key = strict ? o : String(o);
+							const key = getSelectionStateKey.call(self, o);
 							if (!map.has(key)) {
 								map.set(key, o);
 							}
 						} else if (isObject(o)) {
 							const v = o?.value;
 							const l = o?.label;
-							// If strict is true, use value as is (could be number, symbol, etc.)
-							// If strict is false, use String(value) to allow loose matching
 							if (v !== undefined) {
-								const key = strict ? v : String(v);
+								const key = getSelectionStateKey.call(self, v);
 								if (!map.has(key)) {
 									map.set(key, l);
 								}
@@ -4053,6 +4133,9 @@ function convertSelectionToValue(selection) {
  * @private
  * @param value
  * @returns {boolean}
+ *
+ * Empty-equivalent matching is intentionally type-safe. Consumers that want
+ * numeric `0` to count as empty must configure `0`, not `"0"`.
  */
 function isValueIsEmpty(value) {
 	let equivalents = this.getOption("empty.equivalents");
@@ -4063,7 +4146,7 @@ function isValueIsEmpty(value) {
 		equivalents = [equivalents];
 	}
 
-	return equivalents.indexOf(value) !== -1;
+	return equivalents.includes(value);
 }
 
 /**
@@ -4355,8 +4438,10 @@ function show() {
 		const shouldLoadRemoteOptions =
 			getFilterMode.call(self) === FILTER_MODE_REMOTE &&
 			getOptionElements.call(self).length === 0;
+		const shouldLoadDefaultOptions =
+			shouldUseDefaultOptionsUrl.call(self, getCurrentFilterValue.call(self));
 
-		if (shouldUseDefaultOptionsUrl.call(self, getCurrentFilterValue.call(self))) {
+		if (shouldLoadDefaultOptions) {
 			setTimeout(() => {
 				loadDefaultOptionsFromUrl.call(self).catch((e) => {
 					addErrorAttribute(self, e);
@@ -4369,6 +4454,8 @@ function show() {
 					addErrorAttribute(self, e);
 				});
 			}, 0);
+		} else {
+			initTotal.call(self);
 		}
 		calcAndSetOptionsDimension.call(this);
 		focusFilter.call(this);
@@ -4440,6 +4527,18 @@ function initTotal() {
 		return;
 	}
 
+	if (this.getOption("features.showRemoteInfo") !== true) {
+		return;
+	}
+
+	if (isInteger(this.getOption("total"))) {
+		return;
+	}
+
+	if (this[remoteInfoRequestSymbol]) {
+		return;
+	}
+
 	const url = this.getOption("remoteInfo.url");
 	const mappingTotal = this.getOption("mapping.total");
 
@@ -4449,7 +4548,7 @@ function initTotal() {
 
 	const fetchOptions = this.getOption("fetch", {});
 
-	getGlobal()
+	const remoteInfoRequest = getGlobal()
 		.fetch(url, fetchOptions)
 		.then((response) => {
 			if (!response.ok) {
@@ -4473,7 +4572,14 @@ function initTotal() {
 		})
 		.catch((e) => {
 			addErrorAttribute(this, e);
+		})
+		.finally(() => {
+			if (this[remoteInfoRequestSymbol] === remoteInfoRequest) {
+				this[remoteInfoRequestSymbol] = null;
+			}
 		});
+
+	this[remoteInfoRequestSymbol] = remoteInfoRequest;
 }
 
 function updatePagination(total, currentPage, objectsPerPage) {

package/source/components/form/util/floating-ui.mjs

@@ -219,15 +219,13 @@ function buildFloatingMiddleware(
 		const kv = line.split(":");
 		const fn = kv.shift();
 
-			switch (fn) {
-				case "flip":
-					result[key] = flip(detectOverflowOptions);
-					break;
-				case "shift":
-					result[key] = shift(
-						normalizeShiftOptions(kv, detectOverflowOptions),
-					);
-					break;
+		switch (fn) {
+			case "flip":
+				result[key] = flip(detectOverflowOptions);
+				break;
+			case "shift":
+				result[key] = shift(normalizeShiftOptions(kv, detectOverflowOptions));
+				break;
 			case "autoPlacement":
 				let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
 
@@ -922,7 +920,10 @@ function startAutoUpdate(controlElement, popperElement, callback) {
 	stopAutoUpdate(popperElement);
 	autoUpdateCleanupMap.set(
 		popperElement,
-		autoUpdate(controlElement, popperElement, callback),
+		autoUpdate(controlElement, popperElement, callback, {
+			elementResize: typeof ResizeObserver === "function",
+			layoutShift: false,
+		}),
 	);
 }
 
@@ -939,6 +940,10 @@ function stopAutoUpdate(popperElement) {
 function startFloatingResizeObserver(controlElement, popperElement, config) {
 	stopFloatingResizeObserver(popperElement);
 
+	if (typeof ResizeObserver !== "function") {
+		return;
+	}
+
 	const observer = new ResizeObserver(() => {
 		scheduleSettlingPass(controlElement, popperElement, config);
 	});
@@ -949,7 +954,10 @@ function startFloatingResizeObserver(controlElement, popperElement, config) {
 
 function stopFloatingResizeObserver(popperElement) {
 	const observer = floatingResizeObserverMap.get(popperElement);
-	if (observer instanceof ResizeObserver) {
+	if (
+		typeof ResizeObserver === "function" &&
+		observer instanceof ResizeObserver
+	) {
 		observer.disconnect();
 	}
 	floatingResizeObserverMap.delete(popperElement);

package/source/components/form/util/popper.mjs

@@ -180,6 +180,10 @@ function syncAutoUpdate(instance) {
 		() => {
 			void instance.update();
 		},
+		{
+			elementResize: typeof ResizeObserver === "function",
+			layoutShift: false,
+		},
 	);
 }
 

package/source/components/navigation/site-navigation.mjs

@@ -44,6 +44,13 @@ const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
 const hideHamburgerMenuSymbol = Symbol("hideHamburgerMenu");
 const hamburgerCloseButtonSymbol = Symbol("hamburgerCloseButton");
 
+function getAutoUpdateOptions() {
+	return {
+		elementResize: typeof ResizeObserver === "function",
+		layoutShift: false,
+	};
+}
+
 /**
  * A responsive site navigation that automatically moves menu items into a hamburger menu
  * when there isn't enough available space.
@@ -215,39 +222,48 @@ function initEventHandler() {
 
 		hamburgerNav.scrollIntoView({ block: "start", behavior: "smooth" });
 
-		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
-			if (window.innerWidth > 768) {
-				const strategy = getBestPositionStrategy(this);
-
-				computePosition(hamburgerButton, hamburgerNav, {
-					placement: "bottom-end",
-					strategy: strategy,
-					middleware: [
-						offset(8),
-						flip(),
-						shift({ padding: 8 }),
-						size({
-							apply: ({ availableHeight, elements }) => {
-								Object.assign(elements.floating.style, {
-									maxHeight: `${availableHeight}px`,
-									overflowY: "auto",
-								});
-							},
-							padding: 8,
-						}),
-					],
-				}).then(({ x, y, strategy }) => {
+		cleanup = autoUpdate(
+			hamburgerButton,
+			hamburgerNav,
+			() => {
+				if (window.innerWidth > 768) {
+					const strategy = getBestPositionStrategy(this);
+
+					computePosition(hamburgerButton, hamburgerNav, {
+						placement: "bottom-end",
+						strategy: strategy,
+						middleware: [
+							offset(8),
+							flip(),
+							shift({ padding: 8 }),
+							size({
+								apply: ({ availableHeight, elements }) => {
+									Object.assign(elements.floating.style, {
+										maxHeight: `${availableHeight}px`,
+										overflowY: "auto",
+									});
+								},
+								padding: 8,
+							}),
+						],
+					}).then(({ x, y, strategy }) => {
+						Object.assign(hamburgerNav.style, {
+							position: strategy,
+							left: `${x}px`,
+							top: `${y}px`,
+						});
+					});
+				} else {
+					// Mobile view (fullscreen overlay), position is handled by CSS
 					Object.assign(hamburgerNav.style, {
-						position: strategy,
-						left: `${x}px`,
-						top: `${y}px`,
+						position: "",
+						left: "",
+						top: "",
 					});
-				});
-			} else {
-				// Mobile view (fullscreen overlay), position is handled by CSS
-				Object.assign(hamburgerNav.style, { position: "", left: "", top: "" });
-			}
-		});
+				}
+			},
+			getAutoUpdateOptions(),
+		);
 		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
 	};
 
@@ -395,35 +411,40 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
 			level,
 		});
 		if (!cleanup) {
-			cleanup = autoUpdate(parentLi, submenu, () => {
-				const middleware = [offset(8), flip(), shift({ padding: 8 })];
-				const containsSubmenus = submenu.querySelector(
-					"ul, div[part='mega-menu']",
-				);
-				if (!containsSubmenus) {
-					middleware.push(
-						size({
-							apply: ({ availableHeight, elements }) => {
-								Object.assign(elements.floating.style, {
-									maxHeight: `${availableHeight}px`,
-									overflowY: "auto",
-								});
-							},
-							padding: 8,
-						}),
+			cleanup = autoUpdate(
+				parentLi,
+				submenu,
+				() => {
+					const middleware = [offset(8), flip(), shift({ padding: 8 })];
+					const containsSubmenus = submenu.querySelector(
+						"ul, div[part='mega-menu']",
 					);
-				}
-				computePosition(parentLi, submenu, {
-					placement: level === 1 ? "bottom-start" : "right-start",
-					middleware: middleware,
-				}).then(({ x, y, strategy }) => {
-					Object.assign(submenu.style, {
-						position: strategy,
-						left: `${x}px`,
-						top: `${y}px`,
+					if (!containsSubmenus) {
+						middleware.push(
+							size({
+								apply: ({ availableHeight, elements }) => {
+									Object.assign(elements.floating.style, {
+										maxHeight: `${availableHeight}px`,
+										overflowY: "auto",
+									});
+								},
+								padding: 8,
+							}),
+						);
+					}
+					computePosition(parentLi, submenu, {
+						placement: level === 1 ? "bottom-start" : "right-start",
+						middleware: middleware,
+					}).then(({ x, y, strategy }) => {
+						Object.assign(submenu.style, {
+							position: strategy,
+							left: `${x}px`,
+							top: `${y}px`,
+						});
 					});
-				});
-			});
+				},
+				getAutoUpdateOptions(),
+			);
 		}
 	};
 

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.128.3");
+	monsterVersion = new Version("4.136.7");
 
 	return monsterVersion;
 }