@schukai/monster 4.136.8 → 4.136.11

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.8"}
+{"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.11"}

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;
@@ -994,7 +1014,7 @@ function processAndApplyPaginationData(data) {
 	const mappingCurrentPage = this.getOption("mapping.currentPage");
 	const mappingObjectsPerPage = this.getOption("mapping.objectsPerPage");
 
-	if (!mappingTotal || !mappingCurrentPage || !mappingObjectsPerPage) {
+	if (!mappingTotal) {
 		this.setOption("total", null);
 		resetPaginationState.call(this);
 		return;
@@ -1003,8 +1023,6 @@ function processAndApplyPaginationData(data) {
 	try {
 		const pathfinder = new Pathfinder(data);
 		const total = pathfinder.getVia(mappingTotal);
-		const currentPage = pathfinder.getVia(mappingCurrentPage);
-		const objectsPerPage = pathfinder.getVia(mappingObjectsPerPage);
 
 		if (!isInteger(total)) {
 			addErrorAttribute(this, "total is not an integer");
@@ -1015,8 +1033,16 @@ function processAndApplyPaginationData(data) {
 
 		this.setOption("total", total);
 
+		if (!mappingCurrentPage || !mappingObjectsPerPage) {
+			resetPaginationState.call(this, false);
+			return;
+		}
+
+		const currentPage = pathfinder.getVia(mappingCurrentPage);
+		const objectsPerPage = pathfinder.getVia(mappingObjectsPerPage);
+
 		if (total === 0) {
-			resetPaginationState.call(this);
+			resetPaginationState.call(this, false);
 			return;
 		}
 
@@ -1887,6 +1913,14 @@ function fetchIt(url, controlOptions) {
 		this[fetchRequestVersionSymbol] += 1;
 		const requestVersion = this[fetchRequestVersionSymbol];
 
+		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
+			let classes = new TokenList(this.getOption("classes.noOptions"));
+			classes.add("d-none");
+			this.setOption("classes.noOptions", classes.toString());
+			this.setOption("messages.emptyOptions", "");
+			this.setOption("messages.total", "");
+		}
+
 		new Processing(10, () => {
 			fetchData
 				.call(this, url)
@@ -2692,7 +2726,17 @@ function setTotalText() {
 		return;
 	}
 
+	if (this[isLoadingSymbol] === true) {
+		this.setOption("messages.total", "");
+		return;
+	}
+
 	const count = this.getOption("options").length;
+	if (count === 0) {
+		this.setOption("messages.total", "");
+		return;
+	}
+
 	const total = Number.parseInt(this.getOption("total"));
 	if (Number.isNaN(total)) {
 		this.setOption("messages.total", "");
@@ -3887,8 +3931,12 @@ function areOptionsAvailableAndInitInternal() {
 		setStatusOrRemoveBadges.call(this, "empty");
 		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
 			if (this[isLoadingSymbol] !== true) {
-				this.setOption("total", null);
-				resetPaginationState.call(this);
+				if (isInteger(this.getOption("total"))) {
+					resetPaginationState.call(this, false);
+				} else {
+					this.setOption("total", null);
+					resetPaginationState.call(this);
+				}
 			}
 		}
 
@@ -4113,6 +4161,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");
@@ -4123,7 +4174,7 @@ function isValueIsEmpty(value) {
 		equivalents = [equivalents];
 	}
 
-	return equivalents.indexOf(value) !== -1;
+	return equivalents.includes(value);
 }
 
 /**
@@ -4415,8 +4466,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);
@@ -4429,6 +4482,8 @@ function show() {
 					addErrorAttribute(self, e);
 				});
 			}, 0);
+		} else {
+			initTotal.call(self);
 		}
 		calcAndSetOptionsDimension.call(this);
 		focusFilter.call(this);
@@ -4500,6 +4555,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");
 
@@ -4508,8 +4575,9 @@ function initTotal() {
 	}
 
 	const fetchOptions = this.getOption("fetch", {});
+	this.setOption("messages.total", "");
 
-	getGlobal()
+	const remoteInfoRequest = getGlobal()
 		.fetch(url, fetchOptions)
 		.then((response) => {
 			if (!response.ok) {
@@ -4533,7 +4601,14 @@ function initTotal() {
 		})
 		.catch((e) => {
 			addErrorAttribute(this, e);
+		})
+		.finally(() => {
+			if (this[remoteInfoRequestSymbol] === remoteInfoRequest) {
+				this[remoteInfoRequestSymbol] = null;
+			}
 		});
+
+	this[remoteInfoRequestSymbol] = remoteInfoRequest;
 }
 
 function updatePagination(total, currentPage, objectsPerPage) {
@@ -4546,7 +4621,7 @@ function updatePagination(total, currentPage, objectsPerPage) {
 	});
 }
 
-function resetPaginationState() {
+function resetPaginationState(clearTotalMessage = true) {
 	const paginationElement = this[paginationElementSymbol];
 	if (!paginationElement) {
 		return;
@@ -4556,7 +4631,9 @@ function resetPaginationState() {
 	paginationElement.setOption("pages", null);
 	paginationElement.setOption("currentPage", null);
 	paginationElement.setOption("objectsPerPage", null);
-	this.setOption("messages.total", "");
+	if (clearTotalMessage === true) {
+		this.setOption("messages.total", "");
+	}
 }
 
 function clearOptionsOnError() {

package/test/cases/components/form/select.mjs

@@ -790,6 +790,233 @@ describe('Select', function () {
             }, 150);
         });
 
+        it('should not eagerly fetch remote info when showRemoteInfo is disabled', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+            const previousFetch = global['fetch'];
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 3,
+                        page: 2,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            select.setOption('remoteInfo.url', 'https://example.com/remote-info');
+            select.setOption('features.showRemoteInfo', false);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    expect(requests).to.deep.equal([]);
+                } catch (e) {
+                    global['fetch'] = previousFetch;
+                    return done(e);
+                }
+
+                select.fetch('https://example.com/items?filter=*&page=2')
+                    .then(() => {
+                        try {
+                            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+
+                            expect(requests).to.deep.equal([
+                                'https://example.com/items?filter=*&page=2'
+                            ]);
+                            expect(select.getOption('total')).to.equal(3);
+                            expect(pagination.getOption('currentPage')).to.equal(2);
+                            expect(pagination.getOption('pages')).to.equal(3);
+                            expect(pagination.getOption('objectsPerPage')).to.equal(1);
+                        } catch (e) {
+                            return done(e);
+                        } finally {
+                            global['fetch'] = previousFetch;
+                        }
+
+                        done();
+                    })
+                    .catch((e) => {
+                        global['fetch'] = previousFetch;
+                        done(e);
+                    });
+            }, 150);
+        });
+
+        it('should defer remote info fetching until the dropdown is opened', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+            const remoteInfoUrl = 'https://example.com/remote-info';
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+
+                return createJsonResponse({
+                    pagination: {
+                        total: 5
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('remoteInfo.url', remoteInfoUrl);
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'}
+            ]);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            expect(requests).to.deep.equal([]);
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+
+            container.click();
+            await waitForCondition(() => requests.includes(remoteInfoUrl));
+            expect(requests.filter((url) => url === remoteInfoUrl)).to.have.length(1);
+        });
+
+        it('should keep total-only remote totals for loaded options', async function () {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            await select.fetch('https://example.com/items?filter=alpha&page=1');
+
+            expect(select.getOption('total')).to.equal(1);
+            expect(select.getOption('messages.total')).to.contain('No additional entries are available');
+        });
+
+        it('should avoid duplicate remote-info badges for empty remote filter results', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name=\"popper-filter\"]') instanceof HTMLInputElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            filterInput.value = 'alpha';
+
+            container.click();
+
+            await waitForCondition(() => {
+                return select.getOption('total') === 0;
+            });
+
+            expect(select.getOption('total')).to.equal(0);
+            expect(select.getOption('messages.total')).to.equal('');
+            expect(select.getOption('messages.emptyOptions')).to.contain('Please consider modifying the filter');
+        });
+
+        it('should keep empty equivalent matching type-safe for numeric zero', function (done) {
+            this.timeout(2000);
+
+            let mocks = document.getElementById('mocks');
+            const stringEquivalentSelect = document.createElement('monster-select');
+            stringEquivalentSelect.setOption('empty.equivalents', ['0']);
+            mocks.appendChild(stringEquivalentSelect);
+
+            const numericEquivalentSelect = document.createElement('monster-select');
+            numericEquivalentSelect.setOption('empty.equivalents', [0]);
+            mocks.appendChild(numericEquivalentSelect);
+
+            setTimeout(() => {
+                stringEquivalentSelect.value = 0;
+                numericEquivalentSelect.value = 0;
+
+                setTimeout(() => {
+                    try {
+                        expect(stringEquivalentSelect.value).to.equal('0');
+                        expect(stringEquivalentSelect.getOption('selection')).to.deep.equal([
+                            {
+                                label: '0',
+                                value: 0,
+                                class: 'monster-badge-primary',
+                                unresolved: false
+                            }
+                        ]);
+
+                        expect(numericEquivalentSelect.value).to.equal('');
+                        expect(numericEquivalentSelect.getOption('selection')).to.deep.equal([]);
+                    } catch (e) {
+                        return done(e);
+                    }
+
+                    done();
+                }, 50);
+            }, 50);
+        });
+
         it('should not refetch after selecting an already loaded remote option', function (done) {
             this.timeout(3000);