@tamagui/popper 2.7.7 → 3.0.0-beta.1091.1

package/dist/cjs/Popper.native.cjs

@@ -0,0 +1,498 @@
+"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 Popper_exports = {};
+__export(Popper_exports, {
+	Popper: () => Popper,
+	PopperAnchor: () => PopperAnchor,
+	PopperArrow: () => PopperArrow,
+	PopperArrowFrame: () => PopperArrowFrame,
+	PopperContent: () => PopperContent,
+	PopperContentFrame: () => PopperContentFrame,
+	PopperContextFast: () => PopperContextFast,
+	PopperContextSlow: () => PopperContextSlow,
+	PopperPositionContext: () => PopperPositionContext,
+	PopperProvider: () => PopperProvider,
+	PopperProviderFast: () => PopperProviderFast,
+	PopperProviderSlow: () => PopperProviderSlow,
+	setupPopper: () => setupPopper,
+	usePopperContext: () => usePopperContext,
+	usePopperContextSlow: () => usePopperContextSlow
+});
+module.exports = __toCommonJS(Popper_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_dom = require("react-dom");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_floating = require("@tamagui/floating");
+var import_floating2 = require("@tamagui/floating");
+var import_get_token = require("@tamagui/get-token");
+var import_start_transition = require("@tamagui/start-transition");
+var React = __toESM(require("react"), 1);
+var import_useRepositionOnNative = require("./useRepositionOnNative.native.js");
+var PopperContextFast = (0, import_core.createStyledContext)({}, "Popper__");
+var PopperPositionContext = import_core.createStyledContext;
+var { useStyledContext: usePopperContext, Provider: PopperProviderFast } = PopperContextFast;
+var PopperContextSlow = (0, import_core.createStyledContext)({}, "PopperSlow__");
+var { useStyledContext: usePopperContextSlow, Provider: PopperProviderSlow } = PopperContextSlow;
+var PopperProvider = function(param) {
+	var { scope, children, ...context } = param;
+	var fns = React.useRef(context);
+	fns.current = context;
+	var [slowContext] = React.useState(function() {
+		return {
+			refs: context.refs,
+			triggerElements: context.triggerElements,
+			update() {
+				for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) a[_key] = arguments[_key];
+				fns.current.update(...a);
+			},
+			getReferenceProps(p) {
+				var _fns_current_getReferenceProps, _fns_current;
+				return (_fns_current_getReferenceProps = (_fns_current = fns.current).getReferenceProps) === null || _fns_current_getReferenceProps === void 0 ? void 0 : _fns_current_getReferenceProps.call(_fns_current, p);
+			},
+			onHoverReference(e) {
+				var _fns_current_onHoverReference, _fns_current;
+				(_fns_current_onHoverReference = (_fns_current = fns.current).onHoverReference) === null || _fns_current_onHoverReference === void 0 || _fns_current_onHoverReference.call(_fns_current, e);
+			},
+			onLeaveReference() {
+				var _fns_current_onLeaveReference, _fns_current;
+				(_fns_current_onLeaveReference = (_fns_current = fns.current).onLeaveReference) === null || _fns_current_onLeaveReference === void 0 || _fns_current_onLeaveReference.call(_fns_current);
+			}
+		};
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProviderFast, {
+		scope,
+		...context,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProviderSlow, {
+			scope,
+			...slowContext,
+			children
+		})
+	});
+};
+var checkFloating = {
+	name: "checkFloating",
+	fn(data) {
+		return { data: { hasFloating: !!data.rects.floating.width } };
+	}
+};
+var setupOptions = {};
+function setupPopper(options) {
+	Object.assign(setupOptions, options);
+}
+function tamaguiAutoUpdate(reference, floating, update) {
+	update();
+	var rafId = requestAnimationFrame(function() {
+		update();
+		rafId = 0;
+	});
+	var cleanups = [function() {
+		if (rafId) cancelAnimationFrame(rafId);
+	}];
+	if (reference instanceof HTMLElement) cleanups.push((0, import_core.registerLayoutNode)(reference, update));
+	if (typeof ResizeObserver !== "undefined") {
+		var lastWidth = -1;
+		var lastHeight = -1;
+		var ro = new ResizeObserver(function(entries) {
+			var entry = entries[entries.length - 1];
+			if (!entry) return;
+			var { width, height } = entry.contentRect;
+			if (lastWidth === -1) {
+				lastWidth = width;
+				lastHeight = height;
+				return;
+			}
+			if (width !== lastWidth || height !== lastHeight) {
+				lastWidth = width;
+				lastHeight = height;
+				update();
+			}
+		});
+		ro.observe(floating);
+		cleanups.push(function() {
+			return ro.disconnect();
+		});
+	}
+	var ancestors = [...reference instanceof Element ? (0, import_floating2.getOverflowAncestors)(reference) : [], ...(0, import_floating2.getOverflowAncestors)(floating)];
+	var uniqueAncestors = [...new Set(ancestors)];
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = uniqueAncestors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _step.value.addEventListener("scroll", update, { passive: true });
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+	window.addEventListener("resize", update);
+	cleanups.push(function() {
+		var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+		try {
+			for (var _iterator2 = uniqueAncestors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) _step2.value.removeEventListener("scroll", update);
+		} catch (err) {
+			_didIteratorError2 = true;
+			_iteratorError2 = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+			} finally {
+				if (_didIteratorError2) throw _iteratorError2;
+			}
+		}
+		window.removeEventListener("resize", update);
+	});
+	return function() {
+		return cleanups.forEach(function(fn) {
+			return fn();
+		});
+	};
+}
+function Popper(props) {
+	var { children, size, strategy = "absolute", placement = "bottom", stayInFrame, allowFlip, offset, disableRTL, resize, passThrough, open, scope } = props;
+	var [arrowEl, setArrow] = React.useState(null);
+	var [arrowSize, setArrowSize] = React.useState(0);
+	var offsetOptions = offset !== null && offset !== void 0 ? offset : arrowSize;
+	React.useRef({});
+	var isOpen = passThrough ? false : open !== null && open !== void 0 ? open : true;
+	var middlewareRef = React.useRef([]);
+	if (isOpen) middlewareRef.current = [
+		typeof offsetOptions !== "undefined" ? (0, import_floating2.offset)(offsetOptions) : null,
+		allowFlip ? (0, import_floating2.flip)(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
+		stayInFrame ? (0, import_floating2.shift)({
+			padding: 10,
+			mainAxis: true,
+			crossAxis: false,
+			...typeof stayInFrame === "object" ? stayInFrame : null
+		}) : null,
+		arrowEl ? (0, import_floating2.arrow)({ element: arrowEl }) : null,
+		checkFloating,
+		null,
+		null,
+		null
+	].filter(Boolean);
+	var floating = (0, import_floating2.useFloating)({
+		open: isOpen,
+		strategy,
+		placement,
+		sameScrollView: false,
+		whileElementsMounted: !isOpen ? void 0 : tamaguiAutoUpdate,
+		platform: (disableRTL !== null && disableRTL !== void 0 ? disableRTL : setupOptions.disableRTL) ? {
+			...import_floating2.platform,
+			isRTL(element) {
+				return false;
+			}
+		} : import_floating2.platform,
+		middleware: middlewareRef.current
+	});
+	var { middlewareData } = floating;
+	(0, import_useRepositionOnNative.useRepositionOnNative)(floating.update, passThrough);
+	var popperContext = React.useMemo(function() {
+		var _middlewareData_checkFloating;
+		return {
+			size,
+			arrowRef: setArrow,
+			arrowStyle: middlewareData.arrow,
+			onArrowSize: setArrowSize,
+			hasFloating: (_middlewareData_checkFloating = middlewareData.checkFloating) === null || _middlewareData_checkFloating === void 0 ? void 0 : _middlewareData_checkFloating.hasFloating,
+			transformOrigin: middlewareData.transformOrigin,
+			open: !!open,
+			...floating
+		};
+	}, [
+		open,
+		size,
+		floating,
+		JSON.stringify(middlewareData.arrow || null),
+		JSON.stringify(middlewareData.transformOrigin || null)
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProvider, {
+		scope,
+		...popperContext,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_floating.FloatingOverrideContext.Provider, {
+			value: null,
+			children
+		})
+	});
+}
+var PopperAnchor = (0, import_core.createStyledHOC)(import_core.View, function PopperAnchor2(props, forwardedRef) {
+	var { virtualRef, scope, ...rest } = props;
+	var context = usePopperContextSlow(scope);
+	var { getReferenceProps, refs, update } = context;
+	var ref = React.useRef(null);
+	var triggerId = React.useId();
+	React.useEffect(function() {
+		if (!scope || !context.triggerElements || !ref.current) return;
+		if (!(ref.current instanceof Element)) return;
+		var el = ref.current;
+		context.triggerElements.add(triggerId, el);
+		return function() {
+			var _context_triggerElements;
+			(_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 || _context_triggerElements.delete(triggerId);
+		};
+	}, [
+		scope,
+		triggerId,
+		context.triggerElements
+	]);
+	React.useEffect(function() {
+		if (virtualRef) {
+			refs.setReference(virtualRef.current);
+			update();
+		}
+	}, [virtualRef]);
+	var refProps = (getReferenceProps === null || getReferenceProps === void 0 ? void 0 : getReferenceProps({
+		...rest,
+		ref
+	})) || null;
+	var safeSetReference = React.useCallback(function(node) {
+		(0, import_start_transition.startTransition)(function() {
+			refs.setReference(node);
+		});
+	}, [refs]);
+	var shouldHandleInHover = import_constants.isWeb && scope;
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, shouldHandleInHover ? void 0 : safeSetReference);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {
+		...rest,
+		...refProps,
+		ref: composedRefs,
+		...shouldHandleInHover && {
+			onMouseEnter: function(e) {
+				var _e_currentTarget;
+				var el = (_e_currentTarget = e.currentTarget) !== null && _e_currentTarget !== void 0 ? _e_currentTarget : ref.current;
+				if (el instanceof HTMLElement) {
+					var _refProps_onPointerEnter, _context_onHoverReference;
+					(0, import_react_dom.flushSync)(function() {
+						return refs.setReference(el);
+					});
+					update();
+					if (!refProps) return;
+					(_refProps_onPointerEnter = refProps.onPointerEnter) === null || _refProps_onPointerEnter === void 0 || _refProps_onPointerEnter.call(refProps, e);
+					(_context_onHoverReference = context.onHoverReference) === null || _context_onHoverReference === void 0 || _context_onHoverReference.call(context, e.nativeEvent);
+				}
+			},
+			onMouseLeave: function(e) {
+				var _context_onLeaveReference, _refProps_onMouseLeave;
+				(_context_onLeaveReference = context.onLeaveReference) === null || _context_onLeaveReference === void 0 || _context_onLeaveReference.call(context);
+				refProps === null || refProps === void 0 || (_refProps_onMouseLeave = refProps.onMouseLeave) == null || _refProps_onMouseLeave.call(refProps, e);
+			}
+		}
+	});
+});
+var PopperContentFrame = (0, import_core.styled)(import_core.View, { displayName: "PopperContent" });
+var PopperContent = (0, import_core.createRefComponent)(function PopperContent2(props, forwardedRef) {
+	var isAnimatePosControlled = "animatePosition" in props;
+	var { scope, animatePosition, children, passThrough, ...rest } = props;
+	var animatePos = animatePosition;
+	var context = usePopperContext(scope);
+	var { strategy, placement, refs, x, y, getFloatingProps, isPositioned, transformOrigin, update } = context;
+	var updateRef = React.useRef(update);
+	updateRef.current = update;
+	var lastNodeRef = React.useRef(null);
+	var safeSetFloating = React.useCallback(function(node) {
+		var isNewNode = node !== lastNodeRef.current;
+		if (node) {
+			lastNodeRef.current = node;
+			refs.setFloating(node);
+			if (!isNewNode) {
+				var _updateRef_current;
+				(_updateRef_current = updateRef.current) === null || _updateRef_current === void 0 || _updateRef_current.call(updateRef);
+			}
+		}
+	}, [refs.setFloating]);
+	React.useEffect(function() {
+		return function() {
+			var ourNode = lastNodeRef.current;
+			if (ourNode && refs.floating.current === ourNode) refs.setFloating(null);
+			lastNodeRef.current = null;
+		};
+	}, []);
+	var contentRefs = (0, import_compose_refs.useComposedRefs)(safeSetFloating, forwardedRef);
+	var [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		if (needsMeasure && x && y) setNeedsMeasure(false);
+	}, [
+		needsMeasure,
+		animatePos,
+		x,
+		y
+	]);
+	var hasBeenPositioned = React.useRef(false);
+	var lastGoodPosition = React.useRef({
+		x: 0,
+		y: 0
+	});
+	if (x !== 0 || y !== 0) {
+		lastGoodPosition.current = {
+			x,
+			y
+		};
+		if (isPositioned) hasBeenPositioned.current = true;
+	}
+	var brieflyZero = hasBeenPositioned.current && x === 0 && y === 0;
+	var effectiveX = brieflyZero ? lastGoodPosition.current.x : x;
+	var effectiveY = brieflyZero ? lastGoodPosition.current.y : y;
+	var hide = !hasBeenPositioned.current && effectiveX === 0 && effectiveY === 0;
+	var disableAnimationProp = animatePos === "even-when-repositioning" ? needsMeasure : !hasBeenPositioned.current && !isPositioned || needsMeasure;
+	var [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
+	React.useEffect(function() {
+		setDisableAnimation(disableAnimationProp);
+	}, [disableAnimationProp]);
+	var frameProps = {
+		ref: contentRefs,
+		...hide ? {} : {
+			x: effectiveX || 0,
+			y: effectiveY || 0
+		},
+		top: 0,
+		left: 0,
+		position: strategy,
+		opacity: hide ? 0 : 1,
+		...isAnimatePosControlled && {
+			transition: animatePos && !disableAnimation ? rest.transition : "none",
+			animatePresence: false
+		}
+	};
+	var { style, ...floatingProps } = getFloatingProps ? getFloatingProps(frameProps) : frameProps;
+	var transformOriginStyle = import_constants.isWeb && transformOrigin ? { transformOrigin: `${transformOrigin.x} ${transformOrigin.y}` } : void 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.LayoutMeasurementController, {
+		disable: !context.open,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {
+			passThrough,
+			ref: contentRefs,
+			direction: rest.direction,
+			...passThrough ? null : floatingProps,
+			...!passThrough && animatePos && { "data-popper-animate-position": "true" },
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperContentFrame, {
+				passThrough,
+				...!passThrough && {
+					"data-placement": placement,
+					"data-strategy": strategy,
+					...style,
+					...transformOriginStyle,
+					...rest
+				},
+				children
+			}, "popper-content-frame")
+		})
+	});
+});
+var PopperArrowFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "PopperArrow",
+	position: "relative"
+});
+var PopperArrowOuterFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "PopperArrowOuter",
+	position: "absolute",
+	zIndex: 1e6,
+	pointerEvents: "none",
+	overflow: "hidden",
+	alignItems: "center",
+	justifyContent: "center"
+});
+var opposites = {
+	top: "bottom",
+	right: "left",
+	bottom: "top",
+	left: "right"
+};
+var PopperArrow = (0, import_core.createRefComponent)(function PopperArrow2(propsIn, forwardedRef) {
+	var _context_arrowStyle, _context_arrowStyle1;
+	var isAnimatePosControlled = "animatePosition" in propsIn;
+	var { scope, animatePosition, transition, ...rest } = propsIn;
+	var { offset, size: sizeProp, borderWidth = 0, ...arrowProps } = rest;
+	var context = usePopperContext(scope);
+	var _ref;
+	var sizeVal = typeof sizeProp === "number" ? sizeProp : (0, import_core.getVariableValue)((0, import_get_token.getSize)((_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : context.size) !== null && _ref !== void 0 ? _ref : true)) * .52 - 11.5;
+	var size = Math.max(0, +sizeVal);
+	var { placement } = context;
+	var refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
+	var x = ((_context_arrowStyle = context.arrowStyle) === null || _context_arrowStyle === void 0 ? void 0 : _context_arrowStyle.x) || 0;
+	var y = ((_context_arrowStyle1 = context.arrowStyle) === null || _context_arrowStyle1 === void 0 ? void 0 : _context_arrowStyle1.y) || 0;
+	var arrowPositioned = context.arrowStyle != null;
+	var primaryPlacement = placement ? placement.split("-")[0] : "top";
+	var arrowStyle = {
+		x,
+		y,
+		width: size,
+		height: size
+	};
+	var innerArrowStyle = {};
+	var isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+	if (primaryPlacement) {
+		arrowStyle[isVertical ? "width" : "height"] = size * 2;
+		var oppSide = opposites[primaryPlacement];
+		if (oppSide) {
+			arrowStyle[oppSide] = -size;
+			innerArrowStyle[oppSide] = size / 2;
+		}
+		if (oppSide === "top" || oppSide === "bottom") arrowStyle.left = 0;
+		if (oppSide === "left" || oppSide === "right") arrowStyle.top = 0;
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			var _context_onArrowSize;
+			(_context_onArrowSize = context.onArrowSize) === null || _context_onArrowSize === void 0 || _context_onArrowSize.call(context, size);
+		}, [size, context.onArrowSize]);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperArrowOuterFrame, {
+		ref: refs,
+		...arrowStyle,
+		...!arrowPositioned && { opacity: 0 },
+		...isAnimatePosControlled && {
+			transition: animatePosition ? { transform: transition } : "none",
+			animatePresence: false
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperArrowFrame, {
+			width: size,
+			height: size,
+			...arrowProps,
+			...innerArrowStyle,
+			rotate: "45deg",
+			...primaryPlacement === "bottom" && {
+				borderLeftWidth: borderWidth,
+				borderTopWidth: borderWidth
+			},
+			...primaryPlacement === "top" && {
+				borderBottomWidth: borderWidth,
+				borderRightWidth: borderWidth
+			},
+			...primaryPlacement === "right" && {
+				borderLeftWidth: borderWidth,
+				borderBottomWidth: borderWidth
+			},
+			...primaryPlacement === "left" && {
+				borderTopWidth: borderWidth,
+				borderRightWidth: borderWidth
+			}
+		})
+	});
+});