@tamagui/floating 2.7.7 → 3.0.0-beta.1097.1

package/dist/cjs/interactions/useHover.native.cjs

@@ -0,0 +1,356 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useHover_exports = {};
+__export(useHover_exports, {
+	getDelay: () => getDelay,
+	useHover: () => useHover
+});
+module.exports = __toCommonJS(useHover_exports);
+var React = __toESM(require("react"), 1);
+var import_use_event = require("@tamagui/use-event");
+var import_utils = require("./utils.native.js");
+var safePolygonIdentifier = "data-floating-ui-safe-polygon";
+function getDelay(value, prop, pointerType) {
+	if (pointerType && !(0, import_utils.isMouseLikePointerType)(pointerType)) {
+		return 0;
+	}
+	if (typeof value === "number") {
+		return value;
+	}
+	return value === null || value === void 0 ? void 0 : value[prop];
+}
+function useHover(context) {
+	var props = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+	var { open, onOpenChange, dataRef, events, elements } = context;
+	var { enabled = true, delay = 0, handleClose = null, mouseOnly = false, restMs = 0, move = true } = props;
+	var handleCloseRef = React.useRef(handleClose);
+	handleCloseRef.current = handleClose;
+	var delayRef = React.useRef(delay);
+	delayRef.current = delay;
+	var openRef = React.useRef(open);
+	openRef.current = open;
+	var restMsRef = React.useRef(restMs);
+	restMsRef.current = restMs;
+	var stableOnOpenChange = (0, import_use_event.useEvent)(onOpenChange);
+	var pointerTypeRef = React.useRef(void 0);
+	var timeoutRef = React.useRef(-1);
+	var handlerRef = React.useRef(void 0);
+	var restTimeoutRef = React.useRef(-1);
+	var blockMouseMoveRef = React.useRef(true);
+	var performedPointerEventsMutationRef = React.useRef(false);
+	var unbindMouseMoveRef = React.useRef(function() {});
+	var restTimeoutPendingRef = React.useRef(false);
+	var isHoverOpen = (0, import_use_event.useEvent)(function() {
+		var _dataRef_current_openEvent;
+		var type = (_dataRef_current_openEvent = dataRef.current.openEvent) === null || _dataRef_current_openEvent === void 0 ? void 0 : _dataRef_current_openEvent.type;
+		return (type === null || type === void 0 ? void 0 : type.includes("mouse")) && type !== "mousedown";
+	});
+	React.useEffect(function() {
+		if (!enabled) return;
+		if (!events) return;
+		function onOpenChange2(param) {
+			var { open: open2 } = param;
+			if (!open2) {
+				(0, import_utils.clearTimeoutIfSet)(timeoutRef);
+				(0, import_utils.clearTimeoutIfSet)(restTimeoutRef);
+				blockMouseMoveRef.current = true;
+				restTimeoutPendingRef.current = false;
+			}
+		}
+		events.on("openchange", onOpenChange2);
+		return function() {
+			events.off("openchange", onOpenChange2);
+		};
+	}, [enabled, events]);
+	var closeWithDelay = (0, import_use_event.useEvent)(function(event) {
+		var runElseBranch = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true, reason = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "hover";
+		var closeDelay = getDelay(delayRef.current, "close", pointerTypeRef.current);
+		if (closeDelay && !handlerRef.current) {
+			(0, import_utils.clearTimeoutIfSet)(timeoutRef);
+			timeoutRef.current = window.setTimeout(function() {
+				return stableOnOpenChange(false, event, reason);
+			}, closeDelay);
+		} else if (runElseBranch) {
+			(0, import_utils.clearTimeoutIfSet)(timeoutRef);
+			stableOnOpenChange(false, event, reason);
+		}
+	});
+	var cleanupMouseMoveHandler = (0, import_use_event.useEvent)(function() {
+		unbindMouseMoveRef.current();
+		handlerRef.current = void 0;
+		if (context.handleCloseActiveRef) {
+			context.handleCloseActiveRef.current = false;
+		}
+	});
+	var clearPointerEvents = (0, import_use_event.useEvent)(function() {
+		if (performedPointerEventsMutationRef.current) {
+			var body = (0, import_utils.getDocument)(elements.floating).body;
+			body.style.pointerEvents = "";
+			body.removeAttribute(safePolygonIdentifier);
+			performedPointerEventsMutationRef.current = false;
+		}
+	});
+	var isClickLikeOpenEvent = (0, import_use_event.useEvent)(function() {
+		return dataRef.current.openEvent ? ["click", "mousedown"].includes(dataRef.current.openEvent.type) : false;
+	});
+	React.useEffect(function() {
+		if (!enabled) return;
+		function onReferenceMouseEnter(event) {
+			(0, import_utils.clearTimeoutIfSet)(timeoutRef);
+			blockMouseMoveRef.current = false;
+			if (mouseOnly && !(0, import_utils.isMouseLikePointerType)(pointerTypeRef.current) || restMsRef.current > 0 && !getDelay(delayRef.current, "open")) {
+				return;
+			}
+			var openDelay = getDelay(delayRef.current, "open", pointerTypeRef.current);
+			if (openDelay) {
+				timeoutRef.current = window.setTimeout(function() {
+					if (!openRef.current) {
+						stableOnOpenChange(true, event, "hover");
+					}
+				}, openDelay);
+			} else if (!open) {
+				stableOnOpenChange(true, event, "hover");
+			}
+		}
+		function onReferenceMouseLeave(event) {
+			var _context_triggerElements;
+			if (isClickLikeOpenEvent()) {
+				clearPointerEvents();
+				return;
+			}
+			if ((_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 ? void 0 : _context_triggerElements.hasElement(event.relatedTarget)) {
+				return;
+			}
+			unbindMouseMoveRef.current();
+			var doc = (0, import_utils.getDocument)(elements.floating);
+			(0, import_utils.clearTimeoutIfSet)(restTimeoutRef);
+			restTimeoutPendingRef.current = false;
+			if (handleCloseRef.current) {
+				if (!open) {
+					(0, import_utils.clearTimeoutIfSet)(timeoutRef);
+				}
+				var placement = dataRef.current.placement || "bottom";
+				var reference3 = elements.domReference;
+				var floating2 = elements.floating;
+				if (!reference3 || !floating2) return;
+				handlerRef.current = handleCloseRef.current({
+					x: event.clientX,
+					y: event.clientY,
+					placement,
+					elements: {
+						reference: reference3,
+						floating: floating2,
+						domReference: reference3
+					},
+					onClose() {
+						if (context.handleCloseActiveRef) {
+							context.handleCloseActiveRef.current = false;
+						}
+						clearPointerEvents();
+						cleanupMouseMoveHandler();
+						if (!isClickLikeOpenEvent()) {
+							closeWithDelay(event, true, "safe-polygon");
+						}
+					}
+				});
+				if (context.handleCloseActiveRef) {
+					context.handleCloseActiveRef.current = true;
+				}
+				var handler = handlerRef.current;
+				doc.addEventListener("mousemove", handler);
+				unbindMouseMoveRef.current = function() {
+					doc.removeEventListener("mousemove", handler);
+				};
+				return;
+			}
+			var shouldClose = pointerTypeRef.current === "touch" ? !(0, import_utils.contains)(elements.floating, event.relatedTarget) : true;
+			if (shouldClose) {
+				closeWithDelay(event);
+			}
+		}
+		function onScrollMouseLeave(event) {
+			var _context_triggerElements, _handleCloseRef_current;
+			if (isClickLikeOpenEvent()) return;
+			if ((_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 ? void 0 : _context_triggerElements.hasElement(event.relatedTarget)) {
+				return;
+			}
+			var placement = dataRef.current.placement || "bottom";
+			var reference3 = elements.domReference;
+			var floating2 = elements.floating;
+			if (!reference3 || !floating2) return;
+			(_handleCloseRef_current = handleCloseRef.current) === null || _handleCloseRef_current === void 0 ? void 0 : _handleCloseRef_current.call(handleCloseRef, {
+				x: event.clientX,
+				y: event.clientY,
+				placement,
+				elements: {
+					reference: reference3,
+					floating: floating2,
+					domReference: reference3
+				},
+				onClose() {
+					clearPointerEvents();
+					cleanupMouseMoveHandler();
+					if (!isClickLikeOpenEvent()) {
+						closeWithDelay(event);
+					}
+				}
+			})(event);
+		}
+		function onFloatingMouseEnter() {
+			(0, import_utils.clearTimeoutIfSet)(timeoutRef);
+		}
+		function onFloatingMouseLeave(event) {
+			var _context_triggerElements;
+			if (isClickLikeOpenEvent()) return;
+			if ((_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 ? void 0 : _context_triggerElements.hasElement(event.relatedTarget)) {
+				return;
+			}
+			closeWithDelay(event, false);
+		}
+		if ((0, import_utils.isElement)(elements.domReference)) {
+			var reference2 = elements.domReference;
+			var 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 function() {
+				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(function() {
+		var _handleCloseRef_current___options, _handleCloseRef_current;
+		if (!enabled) return;
+		if (open && ((_handleCloseRef_current = handleCloseRef.current) === null || _handleCloseRef_current === void 0 ? void 0 : (_handleCloseRef_current___options = _handleCloseRef_current.__options) === null || _handleCloseRef_current___options === void 0 ? void 0 : _handleCloseRef_current___options.blockPointerEvents) && isHoverOpen()) {
+			performedPointerEventsMutationRef.current = true;
+			var floatingEl = elements.floating;
+			if ((0, import_utils.isElement)(elements.domReference) && floatingEl) {
+				var body = (0, import_utils.getDocument)(elements.floating).body;
+				body.setAttribute(safePolygonIdentifier, "");
+				var ref = elements.domReference;
+				body.style.pointerEvents = "none";
+				ref.style.pointerEvents = "auto";
+				floatingEl.style.pointerEvents = "auto";
+				return function() {
+					body.style.pointerEvents = "";
+					ref.style.pointerEvents = "";
+					floatingEl.style.pointerEvents = "";
+				};
+			}
+		}
+	}, [
+		enabled,
+		open,
+		elements,
+		isHoverOpen
+	]);
+	React.useLayoutEffect(function() {
+		if (!open) {
+			pointerTypeRef.current = void 0;
+			restTimeoutPendingRef.current = false;
+			cleanupMouseMoveHandler();
+			clearPointerEvents();
+		}
+	}, [open]);
+	React.useEffect(function() {
+		return function() {
+			cleanupMouseMoveHandler();
+			(0, import_utils.clearTimeoutIfSet)(timeoutRef);
+			(0, import_utils.clearTimeoutIfSet)(restTimeoutRef);
+			clearPointerEvents();
+		};
+	}, [enabled, elements.domReference]);
+	var reference = React.useMemo(function() {
+		function setPointerRef(event) {
+			pointerTypeRef.current = event.pointerType;
+		}
+		return {
+			onPointerDown: setPointerRef,
+			onPointerEnter: setPointerRef,
+			onMouseMove(event) {
+				var { nativeEvent } = event;
+				function handleMouseMove() {
+					if (!blockMouseMoveRef.current && !openRef.current) {
+						stableOnOpenChange(true, nativeEvent, "hover");
+					}
+				}
+				if (mouseOnly && !(0, import_utils.isMouseLikePointerType)(pointerTypeRef.current)) {
+					return;
+				}
+				if (open || restMsRef.current === 0) {
+					return;
+				}
+				if (restTimeoutPendingRef.current && Math.pow(event.movementX, 2) + Math.pow(event.movementY, 2) < 2) {
+					return;
+				}
+				(0, import_utils.clearTimeoutIfSet)(restTimeoutRef);
+				if (pointerTypeRef.current === "touch") {
+					handleMouseMove();
+				} else {
+					restTimeoutPendingRef.current = true;
+					restTimeoutRef.current = window.setTimeout(handleMouseMove, restMsRef.current);
+				}
+			}
+		};
+	}, [mouseOnly, open]);
+	return React.useMemo(function() {
+		return enabled ? { reference } : {};
+	}, [enabled, reference]);
+}