@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/popover.jsx

@@ -1,8 +1,45 @@
-import { i as mergeProps$1 } from "./env.jsx";
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/calculatePosition.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/useOverlayPosition.ts
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/overlays/usePopover.ts
+import { t as mergeProps } from "./mergeProps.jsx";
+import { d as isFocusWithin, n as getActiveElement, s as getPropagationTargets, t as addEvent } from "./dom.jsx";
 import { i as useLocale } from "./locale.jsx";
 import { r as createPreventScroll, t as createOverlay } from "./createOverlay.jsx";
 import { n as keepVisible, t as ariaHideOutside } from "./ariaHideOutside.jsx";
-import { createEffect, createSignal, onCleanup } from "solid-js";
+import { createEffect, createSignal, createTrackedEffect } from "solid-js";
 //#region src/popover/calculatePosition.ts
 const AXIS = {
 	top: "top",
@@ -49,8 +86,8 @@ function getContainerDimensions(containerNode, visualViewport) {
 		scroll.top = documentElement.scrollTop || containerNode.scrollTop;
 		scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
 		if (visualViewport) {
-			top = visualViewport.offsetTop;
-			left = visualViewport.offsetLeft;
+			top = Math.max(0, visualViewport.pageTop - (scroll.top ?? 0));
+			left = Math.max(0, visualViewport.pageLeft - (scroll.left ?? 0));
 		}
 	} else {
 		({width, height, top, left} = getElementOffset(containerNode, false));
@@ -299,6 +336,26 @@ function translateRTL(position, direction) {
 	if (direction === "rtl") return position.replace("start", "right").replace("end", "left");
 	return position.replace("start", "left").replace("end", "right");
 }
+function overlayPositionStyle(current) {
+	if (!current) return {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		"z-index": 1e5,
+		"max-height": "100vh"
+	};
+	const style = {
+		position: "absolute",
+		"z-index": 1e5,
+		"max-height": current.maxHeight != null ? `${current.maxHeight}px` : "100vh"
+	};
+	const pos = current.position;
+	for (const key of Object.keys(pos)) {
+		const value = pos[key];
+		if (value != null) style[key] = `${value}px`;
+	}
+	return style;
+}
 /**
 * Handles positioning overlays like popovers and menus relative to a trigger
 * element, and updating the position when the window resizes.
@@ -324,7 +381,7 @@ function createOverlayPosition(props) {
 	const arrowBoundaryOffset = () => props.arrowBoundaryOffset ?? 0;
 	const [position, setPosition] = createSignal(null);
 	let lastScale = visualViewport?.scale;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (isOpen()) lastScale = visualViewport?.scale;
 	});
 	const updatePosition = () => {
@@ -335,6 +392,19 @@ function createOverlayPosition(props) {
 		if (visualViewport?.scale !== lastScale) return;
 		const scrollNode = scrollRef();
 		const arrowNode = arrowRef();
+		let anchor = null;
+		if (scrollNode && isFocusWithin(scrollNode)) {
+			const anchorRect = getActiveElement()?.getBoundingClientRect();
+			const scrollRect = scrollNode.getBoundingClientRect();
+			anchor = {
+				type: "top",
+				offset: (anchorRect?.top ?? 0) - scrollRect.top
+			};
+			if (anchor.offset > scrollRect.height / 2) {
+				anchor.type = "bottom";
+				anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom;
+			}
+		}
 		const overlay = overlayNode;
 		if (!maxHeight() && overlayNode) {
 			overlay.style.top = "0px";
@@ -366,13 +436,21 @@ function createOverlayPosition(props) {
 			overlay.style.setProperty(key, pos[key] + "px");
 		});
 		overlay.style.maxHeight = result.maxHeight != null ? result.maxHeight + "px" : "";
+		const activeElement = getActiveElement();
+		if (anchor && activeElement && scrollNode) {
+			const restoredRect = activeElement.getBoundingClientRect();
+			const scrollRect = scrollNode.getBoundingClientRect();
+			const newOffset = restoredRect[anchor.type] - scrollRect[anchor.type];
+			scrollNode.scrollTop += newOffset - anchor.offset;
+		}
 		setPosition(result);
 	};
 	createEffect(() => {
+		const open = isOpen();
+		const overlay = overlayRef();
+		const target = targetRef();
 		shouldUpdatePosition();
 		placement();
-		overlayRef();
-		targetRef();
 		arrowRef();
 		scrollRef();
 		containerPadding();
@@ -380,39 +458,58 @@ function createOverlayPosition(props) {
 		boundaryElement();
 		offset();
 		crossOffset();
-		isOpen();
+		direction();
 		maxHeight();
 		arrowBoundaryOffset();
 		arrowSize();
+		return [
+			open,
+			overlay,
+			target
+		];
+	}, () => {
 		updatePosition();
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isOpen()) return;
 		const handleResize = () => updatePosition();
 		window.addEventListener("resize", handleResize, false);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			window.removeEventListener("resize", handleResize, false);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const overlayNode = overlayRef();
 		if (!overlayNode || !isOpen()) return;
 		const resizeObserver = new ResizeObserver(() => updatePosition());
 		resizeObserver.observe(overlayNode);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			resizeObserver.disconnect();
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const targetNode = targetRef();
 		if (!targetNode || !isOpen()) return;
 		const resizeObserver = new ResizeObserver(() => updatePosition());
 		resizeObserver.observe(targetNode);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			resizeObserver.disconnect();
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isOpen()) return;
 		let timeout;
 		let isResizing = false;
@@ -429,13 +526,19 @@ function createOverlayPosition(props) {
 		};
 		visualViewport?.addEventListener("resize", onResize);
 		visualViewport?.addEventListener("scroll", onScroll);
-		onCleanup(() => {
+		const cleanupScroll = addEvent(getPropagationTargets(window), "scroll", onScroll);
+		_s2Cleanups.push(() => {
 			visualViewport?.removeEventListener("resize", onResize);
 			visualViewport?.removeEventListener("scroll", onScroll);
+			cleanupScroll();
 			clearTimeout(timeout);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const targetNode = targetRef();
 		const closeHandler = onClose();
 		if (!targetNode || !isOpen() || !closeHandler) return;
@@ -445,20 +548,16 @@ function createOverlayPosition(props) {
 			if (target !== document.body && target !== document.documentElement && target.contains(targetNode)) closeHandler();
 		};
 		document.addEventListener("scroll", handleScroll, true);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			document.removeEventListener("scroll", handleScroll, true);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	return {
 		overlayProps: { get style() {
-			const current = position();
-			return {
-				position: current ? "absolute" : "fixed",
-				top: !current ? 0 : void 0,
-				left: !current ? 0 : void 0,
-				"z-index": 1e5,
-				"max-height": current?.maxHeight ?? "100vh"
-			};
+			return overlayPositionStyle(position());
 		} },
 		placement: () => position()?.placement ?? null,
 		triggerAnchorPoint: () => position()?.triggerAnchorPoint ?? null,
@@ -494,7 +593,7 @@ function createPopover(props, state) {
 	const groupRef = () => props.groupRef?.() ?? null;
 	const isNonModal = () => props.isNonModal ?? false;
 	const isKeyboardDismissDisabled = () => props.isKeyboardDismissDisabled ?? false;
-	const shouldCloseOnInteractOutside = props.shouldCloseOnInteractOutside;
+	const shouldCloseOnInteractOutside = () => props.shouldCloseOnInteractOutside;
 	const isSubmenu = () => props.trigger === "SubmenuTrigger";
 	const { overlayProps, underlayProps } = createOverlay({
 		get isOpen() {
@@ -502,7 +601,7 @@ function createPopover(props, state) {
 		},
 		onClose: state.close,
 		get shouldCloseOnBlur() {
-			return !isSubmenu();
+			return !isSubmenu() && props.trigger !== "PreviewTrigger";
 		},
 		get isDismissable() {
 			return !isNonModal() || isSubmenu();
@@ -510,12 +609,48 @@ function createPopover(props, state) {
 		get isKeyboardDismissDisabled() {
 			return isKeyboardDismissDisabled();
 		},
-		get shouldCloseOnInteractOutside() {
-			return shouldCloseOnInteractOutside;
+		shouldCloseOnInteractOutside: (element) => {
+			const filter = shouldCloseOnInteractOutside();
+			return filter ? filter(element) : true;
 		}
 	}, () => groupRef() ?? popoverRef());
 	const { overlayProps: positionProps, arrowProps, placement, triggerAnchorPoint } = createOverlayPosition({
-		...props,
+		get placement() {
+			return props.placement;
+		},
+		get containerPadding() {
+			return props.containerPadding;
+		},
+		get offset() {
+			return props.offset;
+		},
+		get crossOffset() {
+			return props.crossOffset;
+		},
+		get shouldFlip() {
+			return props.shouldFlip;
+		},
+		get maxHeight() {
+			return props.maxHeight;
+		},
+		get boundaryElement() {
+			return props.boundaryElement;
+		},
+		get arrowSize() {
+			return props.arrowSize;
+		},
+		get arrowBoundaryOffset() {
+			return props.arrowBoundaryOffset;
+		},
+		get shouldUpdatePosition() {
+			return props.shouldUpdatePosition;
+		},
+		get arrowRef() {
+			return props.arrowRef;
+		},
+		get scrollRef() {
+			return props.scrollRef;
+		},
 		targetRef: triggerRef,
 		overlayRef: popoverRef,
 		get isOpen() {
@@ -523,24 +658,27 @@ function createPopover(props, state) {
 		},
 		get onClose() {
 			return isNonModal() && !isSubmenu() ? state.close : null;
+		},
+		get getTargetRect() {
+			if (props.getTargetRect) return props.getTargetRect;
+			return state.point?.() ? () => {
+				const currentPoint = state.point?.();
+				return currentPoint ? new DOMRect(currentPoint.x, currentPoint.y, 0, 0) : null;
+			} : void 0;
 		}
 	});
 	createPreventScroll({ get isDisabled() {
 		return isNonModal() || !state.isOpen();
 	} });
 	createEffect(() => {
-		if (state.isOpen() && popoverRef()) {
-			const element = groupRef() ?? popoverRef();
-			if (!element) return;
-			let cleanup;
-			if (isNonModal()) cleanup = keepVisible(element);
-			else cleanup = ariaHideOutside([element], { shouldUseInert: true });
-			onCleanup(() => {
-				cleanup?.();
-			});
-		}
+		if (!state.isOpen()) return null;
+		return groupRef() ?? popoverRef() ?? null;
+	}, (element) => {
+		if (!element) return;
+		const cleanup = isNonModal() ? keepVisible(element) : ariaHideOutside([element], { shouldUseInert: true });
+		return () => cleanup?.();
 	});
-	const merged = mergeProps$1(overlayProps, positionProps);
+	const merged = mergeProps(overlayProps, positionProps);
 	return {
 		popoverProps: new Proxy(merged, {
 			get(target, key) {