@tamagui/floating 2.7.7 → 3.0.0-beta.637.1

package/dist/esm/interactions/useHover.mjs

@@ -1,320 +1,314 @@
 import * as React from "react";
 import { useEvent } from "@tamagui/use-event";
 import { clearTimeoutIfSet, contains, getDocument, isElement, isMouseLikePointerType } from "./utils.mjs";
+
 const safePolygonIdentifier = "data-floating-ui-safe-polygon";
 function getDelay(value, prop, pointerType) {
-  if (pointerType && !isMouseLikePointerType(pointerType)) {
-    return 0;
-  }
-  if (typeof value === "number") {
-    return value;
-  }
-  return value?.[prop];
+	if (pointerType && !isMouseLikePointerType(pointerType)) {
+		return 0;
+	}
+	if (typeof value === "number") {
+		return value;
+	}
+	return value?.[prop];
 }
 function useHover(context, props = {}) {
-  const {
-    open,
-    onOpenChange,
-    dataRef,
-    events,
-    elements
-  } = context;
-  const {
-    enabled = true,
-    delay = 0,
-    handleClose = null,
-    mouseOnly = false,
-    restMs = 0,
-    move = true
-  } = props;
-  const handleCloseRef = React.useRef(handleClose);
-  handleCloseRef.current = handleClose;
-  const delayRef = React.useRef(delay);
-  delayRef.current = delay;
-  const openRef = React.useRef(open);
-  openRef.current = open;
-  const restMsRef = React.useRef(restMs);
-  restMsRef.current = restMs;
-  const stableOnOpenChange = useEvent(onOpenChange);
-  const pointerTypeRef = React.useRef(void 0);
-  const timeoutRef = React.useRef(-1);
-  const handlerRef = React.useRef(void 0);
-  const restTimeoutRef = React.useRef(-1);
-  const blockMouseMoveRef = React.useRef(true);
-  const performedPointerEventsMutationRef = React.useRef(false);
-  const unbindMouseMoveRef = React.useRef(() => {});
-  const restTimeoutPendingRef = React.useRef(false);
-  const isHoverOpen = useEvent(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes("mouse") && type !== "mousedown";
-  });
-  React.useEffect(() => {
-    if (!enabled) return;
-    if (!events) return;
-    function onOpenChange2({
-      open: open2
-    }) {
-      if (!open2) {
-        clearTimeoutIfSet(timeoutRef);
-        clearTimeoutIfSet(restTimeoutRef);
-        blockMouseMoveRef.current = true;
-        restTimeoutPendingRef.current = false;
-      }
-    }
-    events.on("openchange", onOpenChange2);
-    return () => {
-      events.off("openchange", onOpenChange2);
-    };
-  }, [enabled, events]);
-  const closeWithDelay = useEvent((event, runElseBranch = true, reason = "hover") => {
-    const closeDelay = getDelay(delayRef.current, "close", pointerTypeRef.current);
-    if (closeDelay && !handlerRef.current) {
-      clearTimeoutIfSet(timeoutRef);
-      timeoutRef.current = window.setTimeout(() => stableOnOpenChange(false, event, reason), closeDelay);
-    } else if (runElseBranch) {
-      clearTimeoutIfSet(timeoutRef);
-      stableOnOpenChange(false, event, reason);
-    }
-  });
-  const cleanupMouseMoveHandler = useEvent(() => {
-    unbindMouseMoveRef.current();
-    handlerRef.current = void 0;
-    if (context.handleCloseActiveRef) {
-      context.handleCloseActiveRef.current = false;
-    }
-  });
-  const clearPointerEvents = useEvent(() => {
-    if (performedPointerEventsMutationRef.current) {
-      const body = getDocument(elements.floating).body;
-      body.style.pointerEvents = "";
-      body.removeAttribute(safePolygonIdentifier);
-      performedPointerEventsMutationRef.current = false;
-    }
-  });
-  const isClickLikeOpenEvent = useEvent(() => {
-    return dataRef.current.openEvent ? ["click", "mousedown"].includes(dataRef.current.openEvent.type) : false;
-  });
-  React.useEffect(() => {
-    if (!enabled) return;
-    function onReferenceMouseEnter(event) {
-      clearTimeoutIfSet(timeoutRef);
-      blockMouseMoveRef.current = false;
-      if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMsRef.current > 0 && !getDelay(delayRef.current, "open")) {
-        return;
-      }
-      const openDelay = getDelay(delayRef.current, "open", pointerTypeRef.current);
-      if (openDelay) {
-        timeoutRef.current = window.setTimeout(() => {
-          if (!openRef.current) {
-            stableOnOpenChange(true, event, "hover");
-          }
-        }, openDelay);
-      } else if (!open) {
-        stableOnOpenChange(true, event, "hover");
-      }
-    }
-    function onReferenceMouseLeave(event) {
-      if (isClickLikeOpenEvent()) {
-        clearPointerEvents();
-        return;
-      }
-      if (context.triggerElements?.hasElement(event.relatedTarget)) {
-        return;
-      }
-      unbindMouseMoveRef.current();
-      const doc = getDocument(elements.floating);
-      clearTimeoutIfSet(restTimeoutRef);
-      restTimeoutPendingRef.current = false;
-      if (handleCloseRef.current) {
-        if (!open) {
-          clearTimeoutIfSet(timeoutRef);
-        }
-        const placement = dataRef.current.placement || "bottom";
-        const reference2 = elements.domReference;
-        const floating = elements.floating;
-        if (!reference2 || !floating) return;
-        handlerRef.current = handleCloseRef.current({
-          x: event.clientX,
-          y: event.clientY,
-          placement,
-          elements: {
-            reference: reference2,
-            floating,
-            domReference: reference2
-          },
-          onClose() {
-            if (context.handleCloseActiveRef) {
-              context.handleCloseActiveRef.current = false;
-            }
-            clearPointerEvents();
-            cleanupMouseMoveHandler();
-            if (!isClickLikeOpenEvent()) {
-              closeWithDelay(event, true, "safe-polygon");
-            }
-          }
-        });
-        if (context.handleCloseActiveRef) {
-          context.handleCloseActiveRef.current = true;
-        }
-        const handler = handlerRef.current;
-        doc.addEventListener("mousemove", handler);
-        unbindMouseMoveRef.current = () => {
-          doc.removeEventListener("mousemove", handler);
-        };
-        return;
-      }
-      const shouldClose = pointerTypeRef.current === "touch" ? !contains(elements.floating, event.relatedTarget) : true;
-      if (shouldClose) {
-        closeWithDelay(event);
-      }
-    }
-    function onScrollMouseLeave(event) {
-      if (isClickLikeOpenEvent()) return;
-      if (context.triggerElements?.hasElement(event.relatedTarget)) {
-        return;
-      }
-      const placement = dataRef.current.placement || "bottom";
-      const reference2 = elements.domReference;
-      const floating = elements.floating;
-      if (!reference2 || !floating) return;
-      handleCloseRef.current?.({
-        x: event.clientX,
-        y: event.clientY,
-        placement,
-        elements: {
-          reference: reference2,
-          floating,
-          domReference: reference2
-        },
-        onClose() {
-          clearPointerEvents();
-          cleanupMouseMoveHandler();
-          if (!isClickLikeOpenEvent()) {
-            closeWithDelay(event);
-          }
-        }
-      })(event);
-    }
-    function onFloatingMouseEnter() {
-      clearTimeoutIfSet(timeoutRef);
-    }
-    function onFloatingMouseLeave(event) {
-      if (isClickLikeOpenEvent()) return;
-      if (context.triggerElements?.hasElement(event.relatedTarget)) {
-        return;
-      }
-      closeWithDelay(event, false);
-    }
-    if (isElement(elements.domReference)) {
-      const reference2 = elements.domReference;
-      const floating = elements.floating;
-      if (open) {
-        reference2.addEventListener("mouseleave", onScrollMouseLeave);
-      }
-      if (move) {
-        reference2.addEventListener("mousemove", onReferenceMouseEnter, {
-          once: true
-        });
-      }
-      reference2.addEventListener("mouseenter", onReferenceMouseEnter);
-      reference2.addEventListener("mouseleave", onReferenceMouseLeave);
-      if (floating) {
-        floating.addEventListener("mouseleave", onScrollMouseLeave);
-        floating.addEventListener("mouseenter", onFloatingMouseEnter);
-        floating.addEventListener("mouseleave", onFloatingMouseLeave);
-      }
-      return () => {
-        if (open) {
-          reference2.removeEventListener("mouseleave", onScrollMouseLeave);
-        }
-        if (move) {
-          reference2.removeEventListener("mousemove", onReferenceMouseEnter);
-        }
-        reference2.removeEventListener("mouseenter", onReferenceMouseEnter);
-        reference2.removeEventListener("mouseleave", onReferenceMouseLeave);
-        if (floating) {
-          floating.removeEventListener("mouseleave", onScrollMouseLeave);
-          floating.removeEventListener("mouseenter", onFloatingMouseEnter);
-          floating.removeEventListener("mouseleave", onFloatingMouseLeave);
-        }
-        cleanupMouseMoveHandler();
-      };
-    }
-  }, [elements, enabled, context, mouseOnly, move, open, dataRef]);
-  React.useLayoutEffect(() => {
-    if (!enabled) return;
-    if (open && handleCloseRef.current?.__options?.blockPointerEvents && isHoverOpen()) {
-      performedPointerEventsMutationRef.current = true;
-      const floatingEl = elements.floating;
-      if (isElement(elements.domReference) && floatingEl) {
-        const body = getDocument(elements.floating).body;
-        body.setAttribute(safePolygonIdentifier, "");
-        const ref = elements.domReference;
-        body.style.pointerEvents = "none";
-        ref.style.pointerEvents = "auto";
-        floatingEl.style.pointerEvents = "auto";
-        return () => {
-          body.style.pointerEvents = "";
-          ref.style.pointerEvents = "";
-          floatingEl.style.pointerEvents = "";
-        };
-      }
-    }
-  }, [enabled, open, elements, isHoverOpen]);
-  React.useLayoutEffect(() => {
-    if (!open) {
-      pointerTypeRef.current = void 0;
-      restTimeoutPendingRef.current = false;
-      cleanupMouseMoveHandler();
-      clearPointerEvents();
-    }
-  }, [open]);
-  React.useEffect(() => {
-    return () => {
-      cleanupMouseMoveHandler();
-      clearTimeoutIfSet(timeoutRef);
-      clearTimeoutIfSet(restTimeoutRef);
-      clearPointerEvents();
-    };
-  }, [enabled, elements.domReference]);
-  const reference = React.useMemo(() => {
-    function setPointerRef(event) {
-      pointerTypeRef.current = event.pointerType;
-    }
-    return {
-      onPointerDown: setPointerRef,
-      onPointerEnter: setPointerRef,
-      onMouseMove(event) {
-        const {
-          nativeEvent
-        } = event;
-        function handleMouseMove() {
-          if (!blockMouseMoveRef.current && !openRef.current) {
-            stableOnOpenChange(true, nativeEvent, "hover");
-          }
-        }
-        if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
-          return;
-        }
-        if (open || restMsRef.current === 0) {
-          return;
-        }
-        if (restTimeoutPendingRef.current && event.movementX ** 2 + event.movementY ** 2 < 2) {
-          return;
-        }
-        clearTimeoutIfSet(restTimeoutRef);
-        if (pointerTypeRef.current === "touch") {
-          handleMouseMove();
-        } else {
-          restTimeoutPendingRef.current = true;
-          restTimeoutRef.current = window.setTimeout(handleMouseMove, restMsRef.current);
-        }
-      }
-    };
-  }, [mouseOnly, open]);
-  return React.useMemo(() => enabled ? {
-    reference
-  } : {}, [enabled, reference]);
+	const { open, onOpenChange, dataRef, events, elements } = context;
+	const { enabled = true, delay = 0, handleClose = null, mouseOnly = false, restMs = 0, move = true } = props;
+	const handleCloseRef = React.useRef(handleClose);
+	handleCloseRef.current = handleClose;
+	const delayRef = React.useRef(delay);
+	delayRef.current = delay;
+	const openRef = React.useRef(open);
+	openRef.current = open;
+	const restMsRef = React.useRef(restMs);
+	restMsRef.current = restMs;
+	const stableOnOpenChange = useEvent(onOpenChange);
+	const pointerTypeRef = React.useRef(void 0);
+	const timeoutRef = React.useRef(-1);
+	const handlerRef = React.useRef(void 0);
+	const restTimeoutRef = React.useRef(-1);
+	const blockMouseMoveRef = React.useRef(true);
+	const performedPointerEventsMutationRef = React.useRef(false);
+	const unbindMouseMoveRef = React.useRef(() => {});
+	const restTimeoutPendingRef = React.useRef(false);
+	const isHoverOpen = useEvent(() => {
+		const type = dataRef.current.openEvent?.type;
+		return type?.includes("mouse") && type !== "mousedown";
+	});
+	React.useEffect(() => {
+		if (!enabled) return;
+		if (!events) return;
+		function onOpenChange2({ open: open2 }) {
+			if (!open2) {
+				clearTimeoutIfSet(timeoutRef);
+				clearTimeoutIfSet(restTimeoutRef);
+				blockMouseMoveRef.current = true;
+				restTimeoutPendingRef.current = false;
+			}
+		}
+		events.on("openchange", onOpenChange2);
+		return () => {
+			events.off("openchange", onOpenChange2);
+		};
+	}, [enabled, events]);
+	const closeWithDelay = useEvent((event, runElseBranch = true, reason = "hover") => {
+		const closeDelay = getDelay(delayRef.current, "close", pointerTypeRef.current);
+		if (closeDelay && !handlerRef.current) {
+			clearTimeoutIfSet(timeoutRef);
+			timeoutRef.current = window.setTimeout(() => stableOnOpenChange(false, event, reason), closeDelay);
+		} else if (runElseBranch) {
+			clearTimeoutIfSet(timeoutRef);
+			stableOnOpenChange(false, event, reason);
+		}
+	});
+	const cleanupMouseMoveHandler = useEvent(() => {
+		unbindMouseMoveRef.current();
+		handlerRef.current = void 0;
+		if (context.handleCloseActiveRef) {
+			context.handleCloseActiveRef.current = false;
+		}
+	});
+	const clearPointerEvents = useEvent(() => {
+		if (performedPointerEventsMutationRef.current) {
+			const body = getDocument(elements.floating).body;
+			body.style.pointerEvents = "";
+			body.removeAttribute(safePolygonIdentifier);
+			performedPointerEventsMutationRef.current = false;
+		}
+	});
+	const isClickLikeOpenEvent = useEvent(() => {
+		return dataRef.current.openEvent ? ["click", "mousedown"].includes(dataRef.current.openEvent.type) : false;
+	});
+	React.useEffect(() => {
+		if (!enabled) return;
+		function onReferenceMouseEnter(event) {
+			clearTimeoutIfSet(timeoutRef);
+			blockMouseMoveRef.current = false;
+			if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMsRef.current > 0 && !getDelay(delayRef.current, "open")) {
+				return;
+			}
+			const openDelay = getDelay(delayRef.current, "open", pointerTypeRef.current);
+			if (openDelay) {
+				timeoutRef.current = window.setTimeout(() => {
+					if (!openRef.current) {
+						stableOnOpenChange(true, event, "hover");
+					}
+				}, openDelay);
+			} else if (!open) {
+				stableOnOpenChange(true, event, "hover");
+			}
+		}
+		function onReferenceMouseLeave(event) {
+			if (isClickLikeOpenEvent()) {
+				clearPointerEvents();
+				return;
+			}
+			if (context.triggerElements?.hasElement(event.relatedTarget)) {
+				return;
+			}
+			unbindMouseMoveRef.current();
+			const doc = getDocument(elements.floating);
+			clearTimeoutIfSet(restTimeoutRef);
+			restTimeoutPendingRef.current = false;
+			if (handleCloseRef.current) {
+				if (!open) {
+					clearTimeoutIfSet(timeoutRef);
+				}
+				const placement = dataRef.current.placement || "bottom";
+				const reference2 = elements.domReference;
+				const floating = elements.floating;
+				if (!reference2 || !floating) return;
+				handlerRef.current = handleCloseRef.current({
+					x: event.clientX,
+					y: event.clientY,
+					placement,
+					elements: {
+						reference: reference2,
+						floating,
+						domReference: reference2
+					},
+					onClose() {
+						if (context.handleCloseActiveRef) {
+							context.handleCloseActiveRef.current = false;
+						}
+						clearPointerEvents();
+						cleanupMouseMoveHandler();
+						if (!isClickLikeOpenEvent()) {
+							closeWithDelay(event, true, "safe-polygon");
+						}
+					}
+				});
+				if (context.handleCloseActiveRef) {
+					context.handleCloseActiveRef.current = true;
+				}
+				const handler = handlerRef.current;
+				doc.addEventListener("mousemove", handler);
+				unbindMouseMoveRef.current = () => {
+					doc.removeEventListener("mousemove", handler);
+				};
+				return;
+			}
+			const shouldClose = pointerTypeRef.current === "touch" ? !contains(elements.floating, event.relatedTarget) : true;
+			if (shouldClose) {
+				closeWithDelay(event);
+			}
+		}
+		function onScrollMouseLeave(event) {
+			if (isClickLikeOpenEvent()) return;
+			if (context.triggerElements?.hasElement(event.relatedTarget)) {
+				return;
+			}
+			const placement = dataRef.current.placement || "bottom";
+			const reference2 = elements.domReference;
+			const floating = elements.floating;
+			if (!reference2 || !floating) return;
+			handleCloseRef.current?.({
+				x: event.clientX,
+				y: event.clientY,
+				placement,
+				elements: {
+					reference: reference2,
+					floating,
+					domReference: reference2
+				},
+				onClose() {
+					clearPointerEvents();
+					cleanupMouseMoveHandler();
+					if (!isClickLikeOpenEvent()) {
+						closeWithDelay(event);
+					}
+				}
+			})(event);
+		}
+		function onFloatingMouseEnter() {
+			clearTimeoutIfSet(timeoutRef);
+		}
+		function onFloatingMouseLeave(event) {
+			if (isClickLikeOpenEvent()) return;
+			if (context.triggerElements?.hasElement(event.relatedTarget)) {
+				return;
+			}
+			closeWithDelay(event, false);
+		}
+		if (isElement(elements.domReference)) {
+			const reference2 = elements.domReference;
+			const floating = elements.floating;
+			if (open) {
+				reference2.addEventListener("mouseleave", onScrollMouseLeave);
+			}
+			if (move) {
+				reference2.addEventListener("mousemove", onReferenceMouseEnter, { once: true });
+			}
+			reference2.addEventListener("mouseenter", onReferenceMouseEnter);
+			reference2.addEventListener("mouseleave", onReferenceMouseLeave);
+			if (floating) {
+				floating.addEventListener("mouseleave", onScrollMouseLeave);
+				floating.addEventListener("mouseenter", onFloatingMouseEnter);
+				floating.addEventListener("mouseleave", onFloatingMouseLeave);
+			}
+			return () => {
+				if (open) {
+					reference2.removeEventListener("mouseleave", onScrollMouseLeave);
+				}
+				if (move) {
+					reference2.removeEventListener("mousemove", onReferenceMouseEnter);
+				}
+				reference2.removeEventListener("mouseenter", onReferenceMouseEnter);
+				reference2.removeEventListener("mouseleave", onReferenceMouseLeave);
+				if (floating) {
+					floating.removeEventListener("mouseleave", onScrollMouseLeave);
+					floating.removeEventListener("mouseenter", onFloatingMouseEnter);
+					floating.removeEventListener("mouseleave", onFloatingMouseLeave);
+				}
+				cleanupMouseMoveHandler();
+			};
+		}
+	}, [
+		elements,
+		enabled,
+		context,
+		mouseOnly,
+		move,
+		open,
+		dataRef
+	]);
+	React.useLayoutEffect(() => {
+		if (!enabled) return;
+		if (open && handleCloseRef.current?.__options?.blockPointerEvents && isHoverOpen()) {
+			performedPointerEventsMutationRef.current = true;
+			const floatingEl = elements.floating;
+			if (isElement(elements.domReference) && floatingEl) {
+				const body = getDocument(elements.floating).body;
+				body.setAttribute(safePolygonIdentifier, "");
+				const ref = elements.domReference;
+				body.style.pointerEvents = "none";
+				ref.style.pointerEvents = "auto";
+				floatingEl.style.pointerEvents = "auto";
+				return () => {
+					body.style.pointerEvents = "";
+					ref.style.pointerEvents = "";
+					floatingEl.style.pointerEvents = "";
+				};
+			}
+		}
+	}, [
+		enabled,
+		open,
+		elements,
+		isHoverOpen
+	]);
+	React.useLayoutEffect(() => {
+		if (!open) {
+			pointerTypeRef.current = void 0;
+			restTimeoutPendingRef.current = false;
+			cleanupMouseMoveHandler();
+			clearPointerEvents();
+		}
+	}, [open]);
+	React.useEffect(() => {
+		return () => {
+			cleanupMouseMoveHandler();
+			clearTimeoutIfSet(timeoutRef);
+			clearTimeoutIfSet(restTimeoutRef);
+			clearPointerEvents();
+		};
+	}, [enabled, elements.domReference]);
+	const reference = React.useMemo(() => {
+		function setPointerRef(event) {
+			pointerTypeRef.current = event.pointerType;
+		}
+		return {
+			onPointerDown: setPointerRef,
+			onPointerEnter: setPointerRef,
+			onMouseMove(event) {
+				const { nativeEvent } = event;
+				function handleMouseMove() {
+					if (!blockMouseMoveRef.current && !openRef.current) {
+						stableOnOpenChange(true, nativeEvent, "hover");
+					}
+				}
+				if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
+					return;
+				}
+				if (open || restMsRef.current === 0) {
+					return;
+				}
+				if (restTimeoutPendingRef.current && event.movementX ** 2 + event.movementY ** 2 < 2) {
+					return;
+				}
+				clearTimeoutIfSet(restTimeoutRef);
+				if (pointerTypeRef.current === "touch") {
+					handleMouseMove();
+				} else {
+					restTimeoutPendingRef.current = true;
+					restTimeoutRef.current = window.setTimeout(handleMouseMove, restMsRef.current);
+				}
+			}
+		};
+	}, [mouseOnly, open]);
+	return React.useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
 }
+
 export { getDelay, useHover };
 //# sourceMappingURL=useHover.mjs.map