@schukai/monster 4.129.5 → 4.129.6

package/package.json

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

package/source/components/datatable/columnbar.mjs

@@ -21,11 +21,14 @@ import {
 import { findTargetElementFromEvent } from "../../dom/events.mjs";
 import { clone } from "../../util/clone.mjs";
 import { ColumnBarStyleSheet } from "./stylesheet/column-bar.mjs";
-import { createPopper } from "@popperjs/core";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { hasObjectLink } from "../../dom/attributes.mjs";
 import { customElementUpdaterLinkSymbol } from "../../dom/constants.mjs";
 import { getGlobalObject } from "../../types/global.mjs";
+import {
+	createFloatingPopper,
+	popperInstanceSymbol,
+} from "../form/util/popper.mjs";
 
 export { ColumnBar };
 
@@ -53,12 +56,6 @@ const settingsLayerElementSymbol = Symbol("settingsLayerElement");
  */
 const dotsContainerElementSymbol = Symbol("dotsContainerElement");
 
-/**
- * @private
- * @type {symbol}
- */
-const popperInstanceSymbol = Symbol("popperInstance");
-
 /**
  * @private
  * @type {symbol}
@@ -226,7 +223,11 @@ class ColumnBar extends CustomElement {
 		}
 
 		if (typeof this[dotsFrameRequestSymbol] === "number") {
-			cancelAnimationFrame(this[dotsFrameRequestSymbol]);
+			const cancelFrame =
+				typeof globalThis.cancelAnimationFrame === "function"
+					? globalThis.cancelAnimationFrame.bind(globalThis)
+					: globalThis.clearTimeout.bind(globalThis);
+			cancelFrame(this[dotsFrameRequestSymbol]);
 			this[dotsFrameRequestSymbol] = null;
 		}
 
@@ -241,6 +242,8 @@ class ColumnBar extends CustomElement {
 			);
 			this[closeEventHandlerSymbol] = null;
 		}
+
+		this[popperInstanceSymbol]?.destroy();
 	}
 
 	/**
@@ -350,7 +353,7 @@ function initControlReferences() {
 function initEventHandler() {
 	const self = this;
 
-	self[popperInstanceSymbol] = createPopper(
+	self[popperInstanceSymbol] = createFloatingPopper(
 		self[settingsButtonElementSymbol],
 		self[settingsLayerElementSymbol],
 		{

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

@@ -19,10 +19,10 @@ import {
 	computePosition,
 	offset,
 	flip,
+	hide,
 	size,
 	shift,
 } from "@floating-ui/dom";
-import { hide } from "@popperjs/core";
 import { isArray, isFunction, isObject, isString } from "../../../types/is.mjs";
 import { Processing } from "../../../util/processing.mjs";
 

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

@@ -12,11 +12,33 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
+import {
+	arrow,
+	autoPlacement,
+	autoUpdate,
+	computePosition,
+	flip,
+	hide,
+	offset,
+	shift,
+	size,
+} from "@floating-ui/dom";
 import { extend } from "../../../data/extend.mjs";
-import { isArray } from "../../../types/is.mjs";
+import {
+	isArray,
+	isElement,
+	isFunction,
+	isNumber,
+	isObject,
+	isString,
+} from "../../../types/is.mjs";
 import { validateBoolean } from "../../../types/validate.mjs";
 
-export { setEventListenersModifiers, popperInstanceSymbol };
+export {
+	createFloatingPopper,
+	setEventListenersModifiers,
+	popperInstanceSymbol,
+};
 
 /**
  * @private
@@ -24,6 +46,65 @@ export { setEventListenersModifiers, popperInstanceSymbol };
  */
 const popperInstanceSymbol = Symbol("popperInstance");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const optionsSymbol = Symbol("options");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const referenceElementSymbol = Symbol("referenceElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperElementSymbol = Symbol("popperElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const autoUpdateCleanupSymbol = Symbol("autoUpdateCleanup");
+
+/**
+ * @private
+ * @param {HTMLElement} referenceElement
+ * @param {HTMLElement} popperElement
+ * @param {object} options
+ * @return {{destroy: Function, setOptions: Function, update: Function}}
+ */
+function createFloatingPopper(referenceElement, popperElement, options = {}) {
+	const instance = {
+		[referenceElementSymbol]: referenceElement,
+		[popperElementSymbol]: popperElement,
+		[optionsSymbol]: normalizeOptions(options),
+		[autoUpdateCleanupSymbol]: null,
+		destroy() {
+			stopAutoUpdate(instance);
+		},
+		setOptions(nextOptions) {
+			const normalizedOptions = isFunction(nextOptions)
+				? nextOptions(instance[optionsSymbol])
+				: nextOptions;
+
+			instance[optionsSymbol] = normalizeOptions(normalizedOptions);
+			syncAutoUpdate(instance);
+			return instance.update();
+		},
+		update() {
+			return updatePosition(instance);
+		},
+	};
+
+	syncAutoUpdate(instance);
+
+	return instance;
+}
+
 /**
  * @private
  * @this {CustomElement}
@@ -31,25 +112,252 @@ const popperInstanceSymbol = Symbol("popperInstance");
  */
 function setEventListenersModifiers(mode) {
 	const options = extend({}, this.getOption("popper"));
-	const modifiers = options?.["modifiers"];
+	const modifiers = options?.modifiers;
 
 	if (!isArray(modifiers)) {
-		options["modifiers"] = [];
+		options.modifiers = [];
 	}
 
-	if (
-		options["modifiers"].filter((entry) => {
-			if (entry?.["name"] === "eventListeners") {
-				// performance https://popper.js.org/docs/v2/tutorial/#performance
-				entry["enabled"] = validateBoolean(mode);
-			}
-		}).length === 0
-	) {
-		options["modifiers"].push({
+	const existingModifier = options.modifiers.find((entry) => {
+		return entry?.name === "eventListeners";
+	});
+
+	if (existingModifier) {
+		existingModifier.enabled = validateBoolean(mode);
+	} else {
+		options.modifiers.push({
 			name: "eventListeners",
 			enabled: validateBoolean(mode),
 		});
 	}
 
-	this[popperInstanceSymbol].setOptions(options);
+	return this[popperInstanceSymbol].setOptions(options);
+}
+
+/**
+ * @private
+ * @param {object} instance
+ * @return {Promise<void>}
+ */
+function updatePosition(instance) {
+	const referenceElement = instance[referenceElementSymbol];
+	const popperElement = instance[popperElementSymbol];
+	const options = instance[optionsSymbol];
+
+	if (!isElement(referenceElement) || !isElement(popperElement)) {
+		return Promise.resolve();
+	}
+
+	return computePosition(referenceElement, popperElement, {
+		placement: options.placement,
+		strategy: options.strategy,
+		middleware: options.middleware,
+	}).then(({ x, y, strategy }) => {
+		Object.assign(popperElement.style, {
+			position: strategy,
+			left: `${roundByDPR(x)}px`,
+			top: `${roundByDPR(y)}px`,
+			transform: "",
+		});
+	});
+}
+
+/**
+ * @private
+ * @param {object} instance
+ * @return {void}
+ */
+function syncAutoUpdate(instance) {
+	stopAutoUpdate(instance);
+
+	if (instance[optionsSymbol].eventListeners !== true) {
+		return;
+	}
+
+	instance[autoUpdateCleanupSymbol] = autoUpdate(
+		instance[referenceElementSymbol],
+		instance[popperElementSymbol],
+		() => {
+			void instance.update();
+		},
+	);
+}
+
+/**
+ * @private
+ * @param {object} instance
+ * @return {void}
+ */
+function stopAutoUpdate(instance) {
+	const cleanup = instance[autoUpdateCleanupSymbol];
+	if (typeof cleanup === "function") {
+		cleanup();
+	}
+	instance[autoUpdateCleanupSymbol] = null;
+}
+
+/**
+ * @private
+ * @param {object} options
+ * @return {object}
+ */
+function normalizeOptions(options) {
+	const config = extend(
+		{
+			placement: "bottom",
+			strategy: "absolute",
+			modifiers: [],
+		},
+		options || {},
+	);
+
+	config.eventListeners = normalizeEventListeners(config.modifiers);
+	config.middleware = normalizeMiddleware(config);
+
+	if (config.placement === "auto") {
+		config.placement = "bottom";
+		config.middleware.unshift(
+			autoPlacement({
+				crossAxis: true,
+				autoAlignment: true,
+			}),
+		);
+	}
+
+	return config;
+}
+
+/**
+ * @private
+ * @param {object[]} modifiers
+ * @return {boolean}
+ */
+function normalizeEventListeners(modifiers) {
+	if (!isArray(modifiers)) {
+		return true;
+	}
+
+	let result = true;
+
+	for (const entry of modifiers) {
+		if (entry?.name === "eventListeners") {
+			result = validateBoolean(entry.enabled);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @private
+ * @param {object} config
+ * @return {Array}
+ */
+function normalizeMiddleware(config) {
+	const result = [];
+	const middleware = [];
+
+	if (isArray(config?.middleware)) {
+		middleware.push(...config.middleware);
+	}
+
+	if (isArray(config?.modifiers)) {
+		middleware.push(...config.modifiers);
+	}
+
+	for (const entry of middleware) {
+		if (isFunction(entry)) {
+			result.push(entry);
+			continue;
+		}
+
+		if (isObject(entry) && isFunction(entry?.fn)) {
+			result.push(entry);
+			continue;
+		}
+
+		if (isObject(entry) && !isString(entry?.name)) {
+			result.push(entry);
+			continue;
+		}
+
+		if (!isObject(entry) || !isString(entry?.name)) {
+			continue;
+		}
+
+		const normalizedEntry = normalizeModifier(entry);
+		if (normalizedEntry) {
+			result.push(normalizedEntry);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @private
+ * @param {{name: string, options?: object, enabled?: boolean}} modifier
+ * @return {object|null}
+ */
+function normalizeModifier(modifier) {
+	if (modifier.enabled === false) {
+		return null;
+	}
+
+	switch (modifier.name) {
+		case "arrow":
+			if (!isElement(modifier?.options?.element)) {
+				return null;
+			}
+			return arrow(modifier.options);
+		case "autoPlacement":
+			return autoPlacement(modifier.options);
+		case "eventListeners":
+			return null;
+		case "flip":
+			return flip(modifier.options);
+		case "hide":
+			return hide(modifier.options);
+		case "offset":
+			return offset(normalizeOffset(modifier.options?.offset));
+		case "preventOverflow":
+			return shift(modifier.options);
+		case "shift":
+			return shift(modifier.options);
+		case "size":
+			return size(modifier.options);
+		default:
+			return null;
+	}
+}
+
+/**
+ * @private
+ * @param {number|Array<number>} rawOffset
+ * @return {number|object}
+ */
+function normalizeOffset(rawOffset) {
+	if (isArray(rawOffset)) {
+		const [skidding = 0, distance = 0] = rawOffset;
+		return {
+			mainAxis: distance,
+			crossAxis: skidding,
+		};
+	}
+
+	if (isNumber(rawOffset)) {
+		return rawOffset;
+	}
+
+	return 0;
+}
+
+/**
+ * @private
+ * @param {number} value
+ * @return {number}
+ */
+function roundByDPR(value) {
+	const dpr = window.devicePixelRatio || 1;
+	return Math.round(value * dpr) / dpr;
 }

package/source/components/layout/tabs.mjs

@@ -13,7 +13,6 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { createPopper } from "@popperjs/core";
 import { extend } from "../../data/extend.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import {
@@ -56,6 +55,7 @@ import { TabsStyleSheet } from "./stylesheet/tabs.mjs";
 import { loadAndAssignContent } from "../form/util/fetch.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import {
+	createFloatingPopper,
 	popperInstanceSymbol,
 	setEventListenersModifiers,
 } from "../form/util/popper.mjs";
@@ -189,9 +189,9 @@ class Tabs extends CustomElement {
 	 * @property {String} fetch.mode=same-origin
 	 * @property {String} fetch.credentials=same-origin
 	 * @property {Object} fetch.headers={"accept":"text/html"}}
-	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-	 * @property {string} popper.placement=bottom PopperJS placement
-	 * @property {Object[]} modifiers={name:offset} PopperJS placement
+	 * @property {Object} popper Popper configuration
+	 * @property {string} popper.placement=bottom Popper placement
+	 * @property {Object[]} popper.modifiers={name:offset} Placement middleware configuration
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -473,6 +473,8 @@ class Tabs extends CustomElement {
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			document.removeEventListener(type, this[closeEventHandler]);
 		}
+
+		this[popperInstanceSymbol]?.destroy();
 	}
 }
 
@@ -668,14 +670,13 @@ function attachTabChangeObserver() {
 /**
  * @private
  * @return {Select}
- * @external "external:createPopper"
  */
 function initPopper() {
 	const self = this;
 
 	const options = extend({}, self.getOption("popper"));
 
-	self[popperInstanceSymbol] = createPopper(
+	self[popperInstanceSymbol] = createFloatingPopper(
 		self[switchElementSymbol],
 		self[popperElementSymbol],
 		options,

package/source/components/layout/vertical-tabs.mjs

@@ -13,7 +13,6 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { createPopper } from "@popperjs/core";
 import { extend } from "../../data/extend.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import {
@@ -57,6 +56,7 @@ import { VerticalTabsStyleSheet } from "./stylesheet/vertical-tabs.mjs";
 import { loadAndAssignContent } from "../form/util/fetch.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import {
+	createFloatingPopper,
 	popperInstanceSymbol,
 	setEventListenersModifiers,
 } from "../form/util/popper.mjs";
@@ -190,9 +190,9 @@ class VerticalTabs extends CustomElement {
 	 * @property {String} fetch.mode=same-origin
 	 * @property {String} fetch.credentials=same-origin
 	 * @property {Object} fetch.headers={"accept":"text/html"}}
-	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-	 * @property {string} popper.placement=bottom PopperJS placement
-	 * @property {Object[]} modifiers={name:offset} PopperJS placement
+	 * @property {Object} popper Popper configuration
+	 * @property {string} popper.placement=right-start Popper placement
+	 * @property {Object[]} popper.modifiers={name:offset} Placement middleware configuration
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -474,6 +474,8 @@ class VerticalTabs extends CustomElement {
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			document.removeEventListener(type, this[closeEventHandler]);
 		}
+
+		this[popperInstanceSymbol]?.destroy();
 	}
 }
 
@@ -669,14 +671,13 @@ function attachTabChangeObserver() {
 /**
  * @private
  * @return {Select}
- * @external "external:createPopper"
  */
 function initPopper() {
 	const self = this;
 
 	const options = extend({}, self.getOption("popper"));
 
-	self[popperInstanceSymbol] = createPopper(
+	self[popperInstanceSymbol] = createFloatingPopper(
 		self[switchElementSymbol],
 		self[popperElementSymbol],
 		options,

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

@@ -8,6 +8,8 @@ chai.use(chaiDom);
 let Login;
 
 describe("Login", function () {
+	this.timeout(10000);
+
 	before(function (done) {
 		initJSDOM().then(() => {
 			import("element-internals-polyfill")
@@ -32,21 +34,14 @@ describe("Login", function () {
 		expect(document.createElement("monster-login")).is.instanceof(Login);
 	});
 
-	it("should respect the native hidden attribute on the host", function (done) {
+	it("should respect the native hidden attribute on the host", function () {
 		const login = document.createElement("monster-login");
 		login.setAttribute("hidden", "");
 		document.getElementById("mocks").appendChild(login);
 
-		setTimeout(() => {
-			try {
-				expect(login.hidden).to.be.true;
-				expect(login.visible).to.be.false;
-				expect(login.isVisible).to.be.false;
-				done();
-			} catch (error) {
-				done(error);
-			}
-		}, 100);
+		expect(login.hidden).to.be.true;
+		expect(login.visible).to.be.false;
+		expect(login.isVisible).to.be.false;
 	});
 
 	it("should hide and show the host with the public visibility API", function (done) {

package/test/util/jsdom.mjs

@@ -47,6 +47,7 @@ function initJSDOM(options) {
                     'CSSStyleSheet',
                     'customElements',
                     'CustomEvent',
+                    'cancelAnimationFrame',
                     'document',
                     'DOMException',
                     'DOMImplementation',