@schukai/monster 4.129.1 → 4.129.3

package/source/components/layout/popper.mjs

@@ -31,8 +31,12 @@ import {
 	getDocument,
 } from "../../dom/util.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { STYLE_DISPLAY_MODE_BLOCK } from "../form/constants.mjs";
-import { positionPopper } from "../form/util/floating-ui.mjs";
+import {
+	closePositionedPopper,
+	isPositionedPopperOpen,
+	openPositionedPopper,
+	positionPopper,
+} from "../form/util/floating-ui.mjs";
 import { PopperStyleSheet } from "./stylesheet/popper.mjs";
 import { isArray } from "../../types/is.mjs";
 
@@ -165,6 +169,7 @@ class Popper extends CustomElement {
 			content: "<slot></slot>",
 			popper: {
 				placement: "top",
+				engine: "native",
 				middleware: ["autoPlacement", "shift", "offset:15", "arrow"],
 				contentOverflow: "both",
 			},
@@ -294,7 +299,7 @@ class Popper extends CustomElement {
 	 * @return {Popper} The popper instance
 	 */
 	toggleDialog() {
-		if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		if (isPositionedPopperOpen(this[popperElementSymbol])) {
 			this.hideDialog();
 		} else {
 			this.showDialog();
@@ -310,16 +315,20 @@ class Popper extends CustomElement {
  */
 function initEventHandler() {
 	this[closeEventHandler] = (event) => {
-		const path = event.composedPath();
-
-		for (const [, element] of Object.entries(path)) {
-			if (element === this) {
-				return;
-			}
+		if (
+			isEventInsidePopperOwner(
+				this,
+				event,
+				this[controlElementSymbol],
+				this[buttonElementSymbol],
+				this[popperElementSymbol],
+			)
+		) {
+			return;
 		}
 
 		if (
-			this[popperElementSymbol].style.display === "none" &&
+			!isPositionedPopperOpen(this[popperElementSymbol]) &&
 			!containsAttributeToken(this[controlElementSymbol], "class", "open")
 		) {
 			return;
@@ -351,6 +360,45 @@ function initEventHandler() {
 	return this;
 }
 
+function isEventInsidePopperOwner(
+	owner,
+	event,
+	controlElement,
+	buttonElement,
+	popperElement,
+) {
+	const path = event.composedPath?.() || [];
+
+	for (const element of path) {
+		if (
+			element === owner ||
+			element === controlElement ||
+			element === buttonElement ||
+			element === popperElement
+		) {
+			return true;
+		}
+	}
+
+	const target = path[0] || event.target;
+	if (!(target instanceof Node)) {
+		return false;
+	}
+
+	if (owner instanceof HTMLElement && owner.contains(target)) {
+		return true;
+	}
+
+	if (
+		owner?.shadowRoot instanceof ShadowRoot &&
+		owner.shadowRoot.contains(target)
+	) {
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * Sets up event handlers for specific interaction mode
  * @private
@@ -475,7 +523,7 @@ function hide() {
 	});
 
 	if (popperElement instanceof HTMLElement) {
-		popperElement.style.display = "none";
+		closePositionedPopper(popperElement);
 	}
 
 	if (controlElement instanceof HTMLElement) {
@@ -512,7 +560,7 @@ function show() {
 		return;
 	}
 
-	if (popperElement.style.display === STYLE_DISPLAY_MODE_BLOCK) {
+	if (isPositionedPopperOpen(popperElement)) {
 		return;
 	}
 
@@ -523,7 +571,11 @@ function show() {
 	applyContentOverflowMode.call(self);
 
 	popperElement.style.visibility = "hidden";
-	popperElement.style.display = STYLE_DISPLAY_MODE_BLOCK;
+	openPositionedPopper(
+		self[controlElementSymbol],
+		popperElement,
+		self.getOption("popper", {}),
+	);
 
 	addAttributeToken(controlElement, "class", "open");
 	registerWithHost.call(self);
@@ -549,7 +601,7 @@ function updatePopper() {
 		return;
 	}
 
-	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
 		return;
 	}
 
@@ -635,7 +687,8 @@ function initControlReferences() {
 	this[arrowElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=arrow]`,
 	);
-	this[contentElementSymbol] = this.shadowRoot.querySelector(`[part="content"]`);
+	this[contentElementSymbol] =
+		this.shadowRoot.querySelector(`[part="content"]`);
 	return this;
 }
 

package/source/components/layout/stylesheet/popper.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {PopperStyleSheet}
+export { PopperStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {PopperStyleSheet}
 const PopperStyleSheet = new CSSStyleSheet();
 
 try {
-  PopperStyleSheet.insertRule(`
+	PopperStyleSheet.insertRule(
+		`
 @layer popper { 
 [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{display:flex;position:relative} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/source/components/style/floating-ui.css

@@ -1,2 +1,58 @@
 /** generated from floating-ui.pcss **/
-div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}
+div[data-monster-role="popper"] {
+	align-content: center;
+	background: var(--monster-bg-color-primary-1);
+	border-color: var(--monster-bg-color-primary-4);
+	border-radius: var(--monster-border-radius);
+	border-style: var(--monster-border-style);
+	border-width: var(--monster-border-width);
+	box-shadow: var(--monster-box-shadow-1);
+	box-sizing: border-box;
+	color: var(--monster-color-primary-1);
+	display: none;
+	justify-content: space-between;
+	left: 0;
+	max-height: var(--monster-popper-max-height, calc(100vh - 2rem));
+	max-width: var(--monster-popper-max-width, calc(100vw - 2rem));
+	padding: 1.1em;
+	position: absolute;
+	top: 0;
+	width: -moz-max-content;
+	width: max-content;
+	z-index: var(--monster-z-index-modal);
+}
+div[data-monster-role="popper"] > [part="content"] {
+	max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
+	max-width: 100%;
+	overflow: auto;
+}
+div[data-monster-role="popper"]
+	> [part="content"][data-monster-overflow-mode="horizontal"] {
+	clip-path: inset(
+		calc(var(--monster-popper-content-block-overflow, 100vh) * -1) 0
+			calc(var(--monster-popper-content-block-overflow, 100vh) * -1) 0
+	);
+	overflow: visible;
+}
+div[data-monster-role="popper"] div[data-monster-role="arrow"] {
+	background: var(--monster-bg-color-primary-1);
+	height: calc(
+		max(
+			var(--monster-popper-witharrrow-distance),
+			-1 *
+			var(--monster-popper-witharrrow-distance)
+		) *
+		2
+	);
+	pointer-events: none;
+	position: absolute;
+	width: calc(
+		max(
+			var(--monster-popper-witharrrow-distance),
+			-1 *
+			var(--monster-popper-witharrrow-distance)
+		) *
+		2
+	);
+	z-index: -1;
+}

package/source/components/stylesheet/floating-ui.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 
-export {FloatingUiStyleSheet}
+export { FloatingUiStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {FloatingUiStyleSheet}
 const FloatingUiStyleSheet = new CSSStyleSheet();
 
 try {
-  FloatingUiStyleSheet.insertRule(`
+	FloatingUiStyleSheet.insertRule(
+		`
 @layer floatingui { 
 div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }