solid-baseui 0.1.0-alpha.0

package/dist/lib/server/safePolygon-CAm5RJGv.js

@@ -0,0 +1,474 @@
+import { M as triggerHover } from "./internals/reasons.js";
+import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.js";
+import { a as isElement, c as isHTMLElement, n as contains, p as ownerDocument, r as getEventTarget } from "./dom-Crg_2R-j.js";
+import { o as getNodeChildren } from "./FloatingTree-z1JPD1dR.js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
+//#region src/internals/overlay/createHoverInteraction.ts
+function delayValue(delay, type) {
+	if (typeof delay === "number") return delay;
+	return delay?.[type] ?? 0;
+}
+function wasHoverOpened(event) {
+	return Boolean(event && [
+		"mouseenter",
+		"mousemove",
+		"mouseleave"
+	].includes(event.type));
+}
+var pointerBlockers = /* @__PURE__ */ new WeakMap();
+function blockPointerEvents(scope, reference, floating) {
+	let blocker = pointerBlockers.get(scope);
+	if (!blocker) {
+		blocker = {
+			count: 0,
+			previousScope: scope.style.pointerEvents,
+			elements: /* @__PURE__ */ new Map()
+		};
+		pointerBlockers.set(scope, blocker);
+		scope.style.pointerEvents = "none";
+	}
+	blocker.count += 1;
+	const enabledElements = [isHTMLElement(reference) ? reference : null, floating].filter((element) => element != null);
+	for (const element of enabledElements) {
+		const entry = blocker.elements.get(element);
+		if (entry) entry.count += 1;
+		else {
+			blocker.elements.set(element, {
+				count: 1,
+				previous: element.style.pointerEvents
+			});
+			element.style.pointerEvents = "auto";
+		}
+	}
+	let active = true;
+	const cleanup = () => {
+		if (!active) return;
+		active = false;
+		for (const element of enabledElements) {
+			const entry = blocker.elements.get(element);
+			if (!entry) continue;
+			entry.count -= 1;
+			if (entry.count === 0) {
+				element.style.pointerEvents = entry.previous;
+				blocker.elements.delete(element);
+			}
+		}
+		blocker.count -= 1;
+		if (blocker.count === 0) {
+			scope.style.pointerEvents = blocker.previousScope;
+			pointerBlockers.delete(scope);
+		}
+	};
+	return cleanup;
+}
+function createHoverInteraction(options) {
+	let openTimer;
+	let closeTimer;
+	let restTimer;
+	let polygonHandler;
+	let polygonDocument;
+	let restorePointerEvents;
+	let restoreOpenPointerEvents;
+	let pointerType = "";
+	const clearPolygon = () => {
+		polygonHandler?.cancel();
+		if (polygonHandler && polygonDocument) polygonDocument.removeEventListener("mousemove", polygonHandler);
+		polygonHandler = void 0;
+		polygonDocument = void 0;
+		restorePointerEvents?.();
+		restorePointerEvents = void 0;
+	};
+	const clearOpenTimers = () => {
+		clearTimeout(openTimer);
+		clearTimeout(restTimer);
+	};
+	const clearClose = () => {
+		clearTimeout(closeTimer);
+		clearPolygon();
+	};
+	onCleanup(() => {
+		clearOpenTimers();
+		clearClose();
+		restoreOpenPointerEvents?.();
+	});
+	const enabled = () => options.enabled?.() ?? true;
+	const floatingEnabled = () => options.floatingEnabled?.() ?? enabled();
+	const open = () => options.context.track().open;
+	const canHover = () => !(options.mouseOnly?.() ?? false) || pointerType === "" || pointerType === "mouse" || pointerType === "pen";
+	createEffect(() => ({
+		enabled: enabled(),
+		floatingEnabled: floatingEnabled()
+	}), (state) => {
+		if (!state.enabled && !state.floatingEnabled) {
+			clearOpenTimers();
+			clearClose();
+		}
+	});
+	const openPopup = (event, trigger, immediate = false) => {
+		if (!enabled() || !canHover() || trigger.hasAttribute("data-trigger-disabled") || options.shouldOpen?.(event, trigger) === false) return;
+		clearClose();
+		const switching = open() && options.context.state.domReferenceElement !== trigger;
+		const reopening = options.context.state.transitionStatus === "ending";
+		const openDelay = immediate || switching || reopening ? 0 : delayValue(options.delay?.(), "open");
+		clearTimeout(openTimer);
+		const commitOpen = () => {
+			if (!enabled() || !canHover() || options.shouldOpen?.(event, trigger) === false || !switching && options.context.state.open && options.context.state.domReferenceElement !== trigger) return;
+			options.context.setOpen(true, createChangeEventDetails(triggerHover, event, trigger));
+		};
+		if (openDelay === 0) commitOpen();
+		else openTimer = setTimeout(commitOpen, openDelay);
+	};
+	createEffect(() => ({
+		open: open(),
+		openEvent: options.context.context.data.openEvent,
+		reference: options.reference(),
+		floating: options.floating(),
+		factory: options.handleClose?.(),
+		enabled: enabled() || floatingEnabled(),
+		scope: options.blockPointerEventsScope?.()
+	}), (state) => {
+		restoreOpenPointerEvents?.();
+		restoreOpenPointerEvents = void 0;
+		if (!state.open || !state.enabled || !wasHoverOpened(state.openEvent) || !state.reference || !state.floating || !state.factory?.options.blockPointerEvents) return;
+		restoreOpenPointerEvents = blockPointerEvents(state.scope ?? ownerDocument(state.reference).body, state.reference, state.floating);
+		return () => {
+			restoreOpenPointerEvents?.();
+			restoreOpenPointerEvents = void 0;
+		};
+	});
+	const closePopup = (event, trigger = options.context.state.domReferenceElement) => {
+		clearOpenTimers();
+		if (!open() || !wasHoverOpened(options.context.context.data.openEvent)) return;
+		const closeDelay = delayValue(options.delay?.(), "close");
+		clearTimeout(closeTimer);
+		closeTimer = setTimeout(() => {
+			if (trigger && options.context.state.domReferenceElement !== trigger) return;
+			options.context.setOpen(false, createChangeEventDetails(triggerHover, event));
+		}, closeDelay);
+	};
+	const startPolygon = (event, trigger) => {
+		const factory = options.handleClose?.();
+		const floating = options.floating();
+		if (!factory || !floating) {
+			closePopup(event);
+			return;
+		}
+		clearPolygon();
+		polygonHandler = factory({
+			x: event.clientX,
+			y: event.clientY,
+			placement: options.placement?.() ?? options.context.context.data.placement ?? "bottom",
+			elements: {
+				domReference: trigger,
+				floating
+			},
+			onClose: () => {
+				if (options.context.state.domReferenceElement === trigger) closePopup(event, trigger);
+			},
+			nodeId: options.context.context.nodeId,
+			tree: options.tree?.()
+		});
+		polygonDocument = ownerDocument(trigger);
+		if (factory.options.blockPointerEvents) restorePointerEvents = blockPointerEvents(options.blockPointerEventsScope?.() ?? polygonDocument.body, trigger, floating);
+		polygonHandler(event);
+		polygonDocument.addEventListener("mousemove", polygonHandler);
+	};
+	createEffect(() => ({
+		reference: options.reference(),
+		enabled: enabled()
+	}), (state) => {
+		if (!state.reference || !state.enabled) return;
+		const onEnter = (event) => {
+			if ((options.restOnly?.() ?? false) && (options.restMs?.() ?? 0) > 0) {
+				if (enabled() && canHover() && !state.reference.hasAttribute("data-trigger-disabled")) clearClose();
+				return;
+			}
+			openPopup(event, state.reference);
+		};
+		const onPointerEnter = (event) => {
+			pointerType = event.pointerType || "";
+		};
+		const onMove = (event) => {
+			const restMs = options.restMs?.() ?? 0;
+			if (!restMs || open()) return;
+			clearTimeout(restTimer);
+			restTimer = setTimeout(() => openPopup(event, state.reference, true), restMs);
+		};
+		const onLeave = (event) => {
+			const relatedTarget = event.relatedTarget;
+			const triggers = options.context.context.triggerElements;
+			if (contains(options.floating(), relatedTarget) || relatedTarget && (triggers.hasElement(relatedTarget) && !relatedTarget.hasAttribute("data-trigger-disabled") || triggers.hasMatchingElement((trigger) => !trigger.hasAttribute("data-trigger-disabled") && contains(trigger, relatedTarget)))) {
+				clearTimeout(closeTimer);
+				return;
+			}
+			startPolygon(event, state.reference);
+		};
+		const onOut = (event) => {
+			if ((options.guardStaleOpen?.() ?? false) && !contains(state.reference, event.relatedTarget)) clearOpenTimers();
+		};
+		state.reference.addEventListener("mouseenter", onEnter);
+		state.reference.addEventListener("pointerenter", onPointerEnter);
+		state.reference.addEventListener("mousemove", onMove);
+		state.reference.addEventListener("mouseleave", onLeave);
+		state.reference.addEventListener("mouseout", onOut);
+		return () => {
+			state.reference?.removeEventListener("mouseenter", onEnter);
+			state.reference?.removeEventListener("pointerenter", onPointerEnter);
+			state.reference?.removeEventListener("mousemove", onMove);
+			state.reference?.removeEventListener("mouseleave", onLeave);
+			state.reference?.removeEventListener("mouseout", onOut);
+		};
+	});
+	createEffect(() => ({
+		floating: options.floating(),
+		enabled: floatingEnabled()
+	}), (state) => {
+		if (!state.floating || !state.enabled) return;
+		const onEnter = () => clearClose();
+		const onLeave = (event) => {
+			const target = getEventTarget(event);
+			if (contains(options.reference(), target) || contains(options.reference(), event.relatedTarget)) return;
+			const reference = options.reference();
+			if (reference) startPolygon(event, reference);
+			else closePopup(event);
+		};
+		state.floating.addEventListener("mouseenter", onEnter);
+		state.floating.addEventListener("mouseleave", onLeave);
+		return () => {
+			state.floating?.removeEventListener("mouseenter", onEnter);
+			state.floating?.removeEventListener("mouseleave", onLeave);
+		};
+	});
+	const unsubscribe = options.context.context.events.on("openchange", (details) => {
+		clearOpenTimers();
+		if (!details.open) {
+			clearPolygon();
+			restoreOpenPointerEvents?.();
+			restoreOpenPointerEvents = void 0;
+		}
+	});
+	onCleanup(unsubscribe);
+	return { cancelPendingOpen: clearOpenTimers };
+}
+//#endregion
+//#region src/internals/overlay/createInitialPositioning.ts
+/** Keeps coordinate transitions disabled through the first positioned paint of each open. */
+function createInitialPositioning(open, positioned) {
+	const [initial, setInitial] = createSignal(true, { ownedWrite: true });
+	createEffect(() => ({
+		open: open(),
+		positioned: positioned(),
+		initial: initial()
+	}), (state) => {
+		if (!state.open) {
+			setInitial(true);
+			return;
+		}
+		if (!state.positioned || !state.initial) return;
+		const frame = requestAnimationFrame(() => setInitial(false));
+		return () => cancelAnimationFrame(frame);
+	});
+	return initial;
+}
+//#endregion
+//#region src/internals/overlay/safePolygon.ts
+var SPEED_THRESHOLD_SQUARED = .1 * .1;
+var BUFFER = .5;
+function edgeIntersects(x, y, firstX, firstY, secondX, secondY) {
+	return firstY >= y !== secondY >= y && x <= (secondX - firstX) * (y - firstY) / (secondY - firstY) + firstX;
+}
+function insideQuadrilateral(x, y, points) {
+	let inside = false;
+	for (let index = 0; index < 4; index += 1) {
+		const next = (index + 1) % 4;
+		if (edgeIntersects(x, y, points[index * 2], points[index * 2 + 1], points[next * 2], points[next * 2 + 1])) inside = !inside;
+	}
+	return inside;
+}
+function insideRect(x, y, rect) {
+	return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+function insideAxisRect(x, y, firstX, firstY, secondX, secondY) {
+	return x >= Math.min(firstX, secondX) && x <= Math.max(firstX, secondX) && y >= Math.min(firstY, secondY) && y <= Math.max(firstY, secondY);
+}
+function safePolygon(options = {}) {
+	const factory = ((context) => {
+		const side = context.placement?.split("-")[0];
+		let landed = false;
+		let lastX = null;
+		let lastY = null;
+		let lastTime = typeof performance === "undefined" ? 0 : performance.now();
+		let intentTimer;
+		let canceled = false;
+		let waitingForChildClose = false;
+		const hasOpenChild = () => Boolean(context.tree && getNodeChildren(context.tree.nodes, context.nodeId).length > 0);
+		const close = () => {
+			clearTimeout(intentTimer);
+			if (canceled) return;
+			if (hasOpenChild()) {
+				waitingForChildClose = true;
+				return;
+			}
+			canceled = true;
+			unsubscribeChildChanges?.();
+			context.onClose();
+		};
+		const unsubscribeChildChanges = context.tree?.events.on("openchange", () => {
+			if (waitingForChildClose && !hasOpenChild()) {
+				waitingForChildClose = false;
+				close();
+			}
+		});
+		const movingSlowly = (x, y) => {
+			const time = performance.now();
+			const elapsed = time - lastTime;
+			if (lastX === null || lastY === null || elapsed === 0) {
+				lastX = x;
+				lastY = y;
+				lastTime = time;
+				return false;
+			}
+			const deltaX = x - lastX;
+			const deltaY = y - lastY;
+			lastX = x;
+			lastY = y;
+			lastTime = time;
+			return deltaX * deltaX + deltaY * deltaY < elapsed * elapsed * SPEED_THRESHOLD_SQUARED;
+		};
+		const handler = ((event) => {
+			if (canceled) return;
+			clearTimeout(intentTimer);
+			const reference = context.elements.domReference;
+			const floating = context.elements.floating;
+			if (!reference || !floating || !side || context.x === null || context.y === null) return;
+			const target = getEventTarget(event);
+			const leave = event.type === "mouseleave";
+			const overFloating = contains(floating, target);
+			const overReference = contains(reference, target);
+			if (overFloating) {
+				landed = true;
+				if (!leave) return;
+			}
+			if (overReference) {
+				landed = false;
+				if (!leave) {
+					landed = true;
+					return;
+				}
+			}
+			if (leave && isElement(event.relatedTarget) && contains(floating, event.relatedTarget)) return;
+			if (hasOpenChild()) {
+				waitingForChildClose = true;
+				return;
+			}
+			const referenceRect = reference.getBoundingClientRect();
+			const floatingRect = floating.getBoundingClientRect();
+			const leaveFromRight = context.x > floatingRect.right - floatingRect.width / 2;
+			const leaveFromBottom = context.y > floatingRect.bottom - floatingRect.height / 2;
+			const floatingWider = floatingRect.width > referenceRect.width;
+			const floatingTaller = floatingRect.height > referenceRect.height;
+			const left = (floatingWider ? referenceRect : floatingRect).left;
+			const right = (floatingWider ? referenceRect : floatingRect).right;
+			const top = (floatingTaller ? referenceRect : floatingRect).top;
+			const bottom = (floatingTaller ? referenceRect : floatingRect).bottom;
+			if (side === "top" && context.y >= referenceRect.bottom - 1 || side === "bottom" && context.y <= referenceRect.top + 1 || side === "left" && context.x >= referenceRect.right - 1 || side === "right" && context.x <= referenceRect.left + 1) {
+				close();
+				return;
+			}
+			let inTrough = false;
+			if (side === "top") inTrough = insideAxisRect(event.clientX, event.clientY, left, referenceRect.top + 1, right, floatingRect.bottom - 1);
+			else if (side === "bottom") inTrough = insideAxisRect(event.clientX, event.clientY, left, floatingRect.top + 1, right, referenceRect.bottom - 1);
+			else if (side === "left") inTrough = insideAxisRect(event.clientX, event.clientY, floatingRect.right - 1, bottom, referenceRect.left + 1, top);
+			else inTrough = insideAxisRect(event.clientX, event.clientY, referenceRect.right - 1, bottom, floatingRect.left + 1, top);
+			if (inTrough) return;
+			if (landed && !insideRect(event.clientX, event.clientY, referenceRect)) {
+				close();
+				return;
+			}
+			if (!leave && movingSlowly(event.clientX, event.clientY)) {
+				close();
+				return;
+			}
+			let inPolygon = false;
+			if (side === "top" || side === "bottom") {
+				const xOffset = floatingWider ? BUFFER / 2 : BUFFER * 4;
+				const firstX = floatingWider ? context.x + xOffset : leaveFromRight ? context.x + xOffset : context.x - xOffset;
+				const secondX = floatingWider ? context.x - xOffset : leaveFromRight ? context.x + xOffset : context.x - xOffset;
+				if (side === "top") {
+					const commonLeftY = leaveFromRight ? floatingRect.bottom - BUFFER : floatingWider ? floatingRect.bottom - BUFFER : floatingRect.top;
+					const commonRightY = leaveFromRight ? floatingWider ? floatingRect.bottom - BUFFER : floatingRect.top : floatingRect.bottom - BUFFER;
+					inPolygon = insideQuadrilateral(event.clientX, event.clientY, [
+						firstX,
+						context.y + BUFFER + 1,
+						secondX,
+						context.y + BUFFER + 1,
+						floatingRect.left,
+						commonLeftY,
+						floatingRect.right,
+						commonRightY
+					]);
+				} else {
+					const commonLeftY = leaveFromRight ? floatingRect.top + BUFFER : floatingWider ? floatingRect.top + BUFFER : floatingRect.bottom;
+					const commonRightY = leaveFromRight ? floatingWider ? floatingRect.top + BUFFER : floatingRect.bottom : floatingRect.top + BUFFER;
+					inPolygon = insideQuadrilateral(event.clientX, event.clientY, [
+						firstX,
+						context.y - BUFFER,
+						secondX,
+						context.y - BUFFER,
+						floatingRect.left,
+						commonLeftY,
+						floatingRect.right,
+						commonRightY
+					]);
+				}
+			} else {
+				const yOffset = floatingTaller ? BUFFER / 2 : BUFFER * 4;
+				const firstY = floatingTaller ? context.y + yOffset : leaveFromBottom ? context.y + yOffset : context.y - yOffset;
+				const secondY = floatingTaller ? context.y - yOffset : leaveFromBottom ? context.y + yOffset : context.y - yOffset;
+				if (side === "left") {
+					const commonTopX = leaveFromBottom ? floatingRect.right - BUFFER : floatingTaller ? floatingRect.right - BUFFER : floatingRect.left;
+					const commonBottomX = leaveFromBottom ? floatingTaller ? floatingRect.right - BUFFER : floatingRect.left : floatingRect.right - BUFFER;
+					inPolygon = insideQuadrilateral(event.clientX, event.clientY, [
+						commonTopX,
+						floatingRect.top,
+						commonBottomX,
+						floatingRect.bottom,
+						context.x + BUFFER + 1,
+						firstY,
+						context.x + BUFFER + 1,
+						secondY
+					]);
+				} else {
+					const commonTopX = leaveFromBottom ? floatingRect.left + BUFFER : floatingTaller ? floatingRect.left + BUFFER : floatingRect.right;
+					const commonBottomX = leaveFromBottom ? floatingTaller ? floatingRect.left + BUFFER : floatingRect.right : floatingRect.left + BUFFER;
+					inPolygon = insideQuadrilateral(event.clientX, event.clientY, [
+						context.x - BUFFER,
+						firstY,
+						context.x - BUFFER,
+						secondY,
+						commonTopX,
+						floatingRect.top,
+						commonBottomX,
+						floatingRect.bottom
+					]);
+				}
+			}
+			if (!inPolygon) close();
+			else if (!landed) intentTimer = setTimeout(close, 40);
+		});
+		handler.cancel = () => {
+			if (canceled) return;
+			canceled = true;
+			clearTimeout(intentTimer);
+			unsubscribeChildChanges?.();
+		};
+		return handler;
+	});
+	factory.options = {
+		...options,
+		blockPointerEvents: options.blockPointerEvents ?? false
+	};
+	return factory;
+}
+//#endregion
+export { createInitialPositioning as n, createHoverInteraction as r, safePolygon as t };