@tamagui/toast 3.0.0-beta.924.1 → 3.0.0

package/dist/jsx/ToastComposable.native.cjs

@@ -50,10 +50,6 @@ var import_useAnimatedDragGesture = require("./useAnimatedDragGesture.native.js"
 var import_useToastAnimations = require("./useToastAnimations.native.js");
 var import_useReducedMotion = require("./useReducedMotion.native.js");
 var import_ToastItemFrame = require("./ToastItemFrame.native.js");
-function _type_of(obj) {
-	"@swc/helpers - typeof";
-	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
 var VISIBLE_TOASTS_AMOUNT = 4;
 var VIEWPORT_OFFSET = 16;
 var TOAST_GAP = 14;
@@ -92,7 +88,7 @@ function resolveSwipeDirection(direction, position) {
 	return "horizontal";
 }
 var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _ref) {
-	var { children, toasterId, position = "bottom-right", duration = TOAST_LIFETIME, gap = TOAST_GAP, visibleToasts = VISIBLE_TOASTS_AMOUNT, swipeDirection: swipeDirectionProp = "auto", swipeThreshold = 50, toastHeight = FIXED_TOAST_HEIGHT, closeButton = false, expand = false, theme: themeProp, reducedMotion: reducedMotionProp, native = false, burntOptions, notificationOptions, icons } = props;
+	var { children, toasterId, position = "bottom-right", duration = TOAST_LIFETIME, gap = TOAST_GAP, visibleToasts = VISIBLE_TOASTS_AMOUNT, swipeDirection: swipeDirectionProp = "auto", swipeThreshold = 50, toastHeight = FIXED_TOAST_HEIGHT, closeButton = false, expand = false, reducedMotion: reducedMotionProp, native = false, burntOptions, notificationOptions, icons } = props;
 	var reducedMotion = (0, import_useReducedMotion.useReducedMotion)(reducedMotionProp);
 	var [toasts, setToasts] = React.useState([]);
 	var [heights, setHeights] = React.useState({});
@@ -188,7 +184,8 @@ var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _
 						...toasts2.slice(0, idx),
 						{
 							...toasts2[idx],
-							...toast
+							...toast,
+							delete: false
 						},
 						...toasts2.slice(idx + 1)
 					];
@@ -226,8 +223,6 @@ var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _
 		});
 	}, []);
 	var swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
-	var currentTheme = (0, import_core2.useThemeName)();
-	var resolvedTheme = themeProp === "system" || !themeProp ? (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.includes("dark")) ? "dark" : "light" : themeProp;
 	var contextValue = {
 		toasts,
 		heights,
@@ -256,10 +251,7 @@ var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastContext.Provider, {
 		...contextValue,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.Theme, {
-			name: resolvedTheme,
-			children
-		})
+		children
 	});
 });
 var ToastViewportFrame = (0, import_core2.styled)(import_core2.View, {
@@ -280,46 +272,38 @@ var ToastViewport = (0, import_core.createStyledHOC)(ToastViewportFrame, functio
 	var deferredCollapseRef = React.useRef(null);
 	var mouseInsideRef = React.useRef(false);
 	var [yPosition, xPosition] = ctx.position.split("-");
-	var { insets: safeInsets } = (0, import_core2.useConfiguration)();
-	var offsetStyles = React.useMemo(function() {
-		var styles = {};
-		var defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
-		var offsetObj = (typeof offset === "undefined" ? "undefined" : _type_of(offset)) === "object" ? offset : {
-			top: defaultOffset,
-			right: defaultOffset,
-			bottom: defaultOffset,
-			left: defaultOffset
-		};
-		var _safeInsets_top;
-		var safeTop = (_safeInsets_top = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.top) !== null && _safeInsets_top !== void 0 ? _safeInsets_top : 0;
-		var _safeInsets_bottom;
-		var safeBottom = (_safeInsets_bottom = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.bottom) !== null && _safeInsets_bottom !== void 0 ? _safeInsets_bottom : 0;
-		var _offsetObj_top;
-		var topOffset = safeTop > 0 ? safeTop : (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset;
-		var _offsetObj_bottom;
-		var bottomOffset = safeBottom > 0 ? safeBottom : (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset;
-		if (yPosition === "top") styles.top = topOffset;
-		else styles.bottom = bottomOffset;
-		if (import_constants.isWeb) {
-			var _offsetObj_left, _offsetObj_right;
-			if (xPosition === "left") styles.left = (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset;
-			else if (xPosition === "right") styles.right = (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset;
-			else {
-				styles.left = "50%";
-				styles.transform = "translateX(-50%)";
-			}
-		} else {
-			var _offsetObj_left1;
-			styles.left = (_offsetObj_left1 = offsetObj.left) !== null && _offsetObj_left1 !== void 0 ? _offsetObj_left1 : defaultOffset;
-			var _offsetObj_right1;
-			styles.right = (_offsetObj_right1 = offsetObj.right) !== null && _offsetObj_right1 !== void 0 ? _offsetObj_right1 : defaultOffset;
-		}
-		return styles;
-	}, [
-		offset,
-		yPosition,
-		xPosition
-	]);
+	var defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
+	var offsetObj = typeof offset === "object" ? offset : {
+		top: defaultOffset,
+		right: defaultOffset,
+		bottom: defaultOffset,
+		left: defaultOffset
+	};
+	var _offsetObj_top, _offsetObj_bottom;
+	var edgeProps = yPosition === "top" ? {
+		top: "safe",
+		marginTop: (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset
+	} : {
+		bottom: "safe",
+		marginBottom: (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset
+	};
+	var _offsetObj_left, _offsetObj_right, _offsetObj_left1, _offsetObj_right1;
+	var sideProps = import_constants.isWeb ? xPosition === "left" ? {
+		left: "safe",
+		marginLeft: (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset
+	} : xPosition === "right" ? {
+		right: "safe",
+		marginRight: (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset
+	} : null : {
+		left: "safe",
+		marginLeft: (_offsetObj_left1 = offsetObj.left) !== null && _offsetObj_left1 !== void 0 ? _offsetObj_left1 : defaultOffset,
+		right: "safe",
+		marginRight: (_offsetObj_right1 = offsetObj.right) !== null && _offsetObj_right1 !== void 0 ? _offsetObj_right1 : defaultOffset
+	};
+	var centerStyle = import_constants.isWeb && xPosition === "center" ? {
+		left: "50%",
+		transform: "translateX(-50%)"
+	} : null;
 	React.useEffect(function() {
 		if (!import_constants.isWeb) return;
 		var handleKeyDown = function(event) {
@@ -344,7 +328,9 @@ var ToastViewport = (0, import_core.createStyledHOC)(ToastViewportFrame, functio
 		"aria-label": `${label} ${hotkeyLabel}`,
 		tabIndex: -1,
 		"aria-live": "polite",
-		style: offsetStyles,
+		...edgeProps,
+		...sideProps,
+		...centerStyle ? { style: centerStyle } : null,
 		"data-y-position": yPosition,
 		"data-x-position": xPosition,
 		...import_constants.isWeb ? {
@@ -637,15 +623,20 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		setMounted(true);
 	}, []);
 	React.useEffect(function() {
-		if (toast.delete) {
-			setRemoved(true);
-			if (isExpandedRef.current) {
-				setOffsetBeforeRemove(expandedOffsetRef.current);
-			}
-			setTimeout(function() {
-				return ctx.removeToast(toast);
-			}, TIME_BEFORE_UNMOUNT);
+		if (!toast.delete) {
+			setRemoved(false);
+			return;
+		}
+		setRemoved(true);
+		if (isExpandedRef.current) {
+			setOffsetBeforeRemove(expandedOffsetRef.current);
 		}
+		var timer = setTimeout(function() {
+			return ctx.removeToast(toast);
+		}, TIME_BEFORE_UNMOUNT);
+		return function() {
+			return clearTimeout(timer);
+		};
 	}, [
 		toast.delete,
 		toast,
@@ -693,9 +684,8 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		}
 	});
 	var handleLayout = React.useCallback(function(event) {
-		if (!import_constants.isWeb) return;
 		if (removed) return;
-		if (!ctx.expanded && index !== 0) return;
+		if ((!import_constants.isWeb || !ctx.expanded) && index !== 0) return;
 		var { height } = event.nativeEvent.layout;
 		ctx.setToastHeight(toast.id, height);
 	}, [
@@ -706,7 +696,6 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		removed
 	]);
 	React.useEffect(function() {
-		if (!import_constants.isWeb) return;
 		return function() {
 			ctx.removeToastHeight(toast.id);
 		};
@@ -736,29 +725,27 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		};
 	}, [toast, handleClose]);
 	var frontToastHeight = -1;
-	if (import_constants.isWeb) {
-		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = ctx.toasts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var t = _step.value;
+			var h = ctx.heights[t.id];
+			if (h != null && h > 0) {
+				frontToastHeight = h;
+				break;
+			}
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
 		try {
-			for (var _iterator = ctx.toasts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-				var t = _step.value;
-				var h = ctx.heights[t.id];
-				if (h != null && h > 0) {
-					frontToastHeight = h;
-					break;
-				}
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
 			}
-		} catch (err) {
-			_didIteratorError = true;
-			_iteratorError = err;
 		} finally {
-			try {
-				if (!_iteratorNormalCompletion && _iterator.return != null) {
-					_iterator.return();
-				}
-			} finally {
-				if (_didIteratorError) {
-					throw _iteratorError;
-				}
+			if (_didIteratorError) {
+				throw _iteratorError;
 			}
 		}
 	}
@@ -767,7 +754,8 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 	var stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
 	var computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
 	var computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
-	var computedHeight = import_constants.isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
+	var collapsedHeight = !isFront && frontToastHeight > 0 ? frontToastHeight : void 0;
+	var computedHeight = ctx.expanded ? import_constants.isWeb ? ctx.heights[toast.id] || void 0 : void 0 : collapsedHeight;
 	var computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
 	var gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
 	var dataAttributes = {
@@ -784,10 +772,12 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastPositionWrapper, {
 		ref,
 		testID: rest.testID,
-		"aria-label": rest["aria-label"],
 		...dataAttributes,
-		transition: isDragging || ctx.reducedMotion ? void 0 : removed ? "200ms" : "400ms",
-		y: ctx.reducedMotion ? stackY : `${stackY} enter:${isTop ? -80 : 80}px exit:${swipeOut ? (_swipeExitYRef_current = swipeExitYRef.current) !== null && _swipeExitYRef_current !== void 0 ? _swipeExitYRef_current : stackY : stackY}px`,
+		transition: isDragging || ctx.reducedMotion ? void 0 : {
+			duration: removed ? 200 : 400,
+			properties: import_constants.isWeb ? "transform, opacity, height" : "transform, opacity"
+		},
+		y: ctx.reducedMotion ? stackY : `${stackY}px enter:${isTop ? -80 : 80}px exit:${swipeOut ? (_swipeExitYRef_current = swipeExitYRef.current) !== null && _swipeExitYRef_current !== void 0 ? _swipeExitYRef_current : stackY : stackY}px`,
 		scale: stackScale,
 		opacity: `${computedOpacity} enter:0 exit:0`,
 		zIndex: computedZIndex,
@@ -796,12 +786,7 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		pointerEvents: computedPointerEvents,
 		top: isTop ? 0 : void 0,
 		bottom: isTop ? void 0 : 0,
-		...import_constants.isWeb && !isFront && { style: { transformOrigin: isTop ? "top center" : "bottom center" } },
-		animateOnly: import_constants.isWeb ? [
-			"transform",
-			"opacity",
-			"height"
-		] : ["transform", "opacity"],
+		...!isFront && { style: { transformOrigin: isTop ? "top center" : "bottom center" } },
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragWrapper, {
 			animatedStyle,
 			gestureHandlers,
@@ -828,6 +813,7 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 						handleClose();
 					}
 				} },
+				...!import_constants.isWeb && computedHeight != null && { flex: 1 },
 				...rest,
 				children: [ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.View, {
 					position: "absolute",

package/dist/jsx/ToastComposable.native.js

@@ -50,10 +50,6 @@ var import_useAnimatedDragGesture = require("./useAnimatedDragGesture.native.js"
 var import_useToastAnimations = require("./useToastAnimations.native.js");
 var import_useReducedMotion = require("./useReducedMotion.native.js");
 var import_ToastItemFrame = require("./ToastItemFrame.native.js");
-function _type_of(obj) {
-	"@swc/helpers - typeof";
-	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
 var VISIBLE_TOASTS_AMOUNT = 4;
 var VIEWPORT_OFFSET = 16;
 var TOAST_GAP = 14;
@@ -92,7 +88,7 @@ function resolveSwipeDirection(direction, position) {
 	return "horizontal";
 }
 var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _ref) {
-	var { children, toasterId, position = "bottom-right", duration = TOAST_LIFETIME, gap = TOAST_GAP, visibleToasts = VISIBLE_TOASTS_AMOUNT, swipeDirection: swipeDirectionProp = "auto", swipeThreshold = 50, toastHeight = FIXED_TOAST_HEIGHT, closeButton = false, expand = false, theme: themeProp, reducedMotion: reducedMotionProp, native = false, burntOptions, notificationOptions, icons } = props;
+	var { children, toasterId, position = "bottom-right", duration = TOAST_LIFETIME, gap = TOAST_GAP, visibleToasts = VISIBLE_TOASTS_AMOUNT, swipeDirection: swipeDirectionProp = "auto", swipeThreshold = 50, toastHeight = FIXED_TOAST_HEIGHT, closeButton = false, expand = false, reducedMotion: reducedMotionProp, native = false, burntOptions, notificationOptions, icons } = props;
 	var reducedMotion = (0, import_useReducedMotion.useReducedMotion)(reducedMotionProp);
 	var [toasts, setToasts] = React.useState([]);
 	var [heights, setHeights] = React.useState({});
@@ -188,7 +184,8 @@ var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _
 						...toasts2.slice(0, idx),
 						{
 							...toasts2[idx],
-							...toast
+							...toast,
+							delete: false
 						},
 						...toasts2.slice(idx + 1)
 					];
@@ -226,8 +223,6 @@ var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _
 		});
 	}, []);
 	var swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
-	var currentTheme = (0, import_core2.useThemeName)();
-	var resolvedTheme = themeProp === "system" || !themeProp ? (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.includes("dark")) ? "dark" : "light" : themeProp;
 	var contextValue = {
 		toasts,
 		heights,
@@ -256,10 +251,7 @@ var ToastRoot = (0, import_core.createRefComponent)(function ToastRoot2(props, _
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastContext.Provider, {
 		...contextValue,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.Theme, {
-			name: resolvedTheme,
-			children
-		})
+		children
 	});
 });
 var ToastViewportFrame = (0, import_core2.styled)(import_core2.View, {
@@ -280,46 +272,38 @@ var ToastViewport = (0, import_core.createStyledHOC)(ToastViewportFrame, functio
 	var deferredCollapseRef = React.useRef(null);
 	var mouseInsideRef = React.useRef(false);
 	var [yPosition, xPosition] = ctx.position.split("-");
-	var { insets: safeInsets } = (0, import_core2.useConfiguration)();
-	var offsetStyles = React.useMemo(function() {
-		var styles = {};
-		var defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
-		var offsetObj = (typeof offset === "undefined" ? "undefined" : _type_of(offset)) === "object" ? offset : {
-			top: defaultOffset,
-			right: defaultOffset,
-			bottom: defaultOffset,
-			left: defaultOffset
-		};
-		var _safeInsets_top;
-		var safeTop = (_safeInsets_top = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.top) !== null && _safeInsets_top !== void 0 ? _safeInsets_top : 0;
-		var _safeInsets_bottom;
-		var safeBottom = (_safeInsets_bottom = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.bottom) !== null && _safeInsets_bottom !== void 0 ? _safeInsets_bottom : 0;
-		var _offsetObj_top;
-		var topOffset = safeTop > 0 ? safeTop : (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset;
-		var _offsetObj_bottom;
-		var bottomOffset = safeBottom > 0 ? safeBottom : (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset;
-		if (yPosition === "top") styles.top = topOffset;
-		else styles.bottom = bottomOffset;
-		if (import_constants.isWeb) {
-			var _offsetObj_left, _offsetObj_right;
-			if (xPosition === "left") styles.left = (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset;
-			else if (xPosition === "right") styles.right = (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset;
-			else {
-				styles.left = "50%";
-				styles.transform = "translateX(-50%)";
-			}
-		} else {
-			var _offsetObj_left1;
-			styles.left = (_offsetObj_left1 = offsetObj.left) !== null && _offsetObj_left1 !== void 0 ? _offsetObj_left1 : defaultOffset;
-			var _offsetObj_right1;
-			styles.right = (_offsetObj_right1 = offsetObj.right) !== null && _offsetObj_right1 !== void 0 ? _offsetObj_right1 : defaultOffset;
-		}
-		return styles;
-	}, [
-		offset,
-		yPosition,
-		xPosition
-	]);
+	var defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
+	var offsetObj = typeof offset === "object" ? offset : {
+		top: defaultOffset,
+		right: defaultOffset,
+		bottom: defaultOffset,
+		left: defaultOffset
+	};
+	var _offsetObj_top, _offsetObj_bottom;
+	var edgeProps = yPosition === "top" ? {
+		top: "safe",
+		marginTop: (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset
+	} : {
+		bottom: "safe",
+		marginBottom: (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset
+	};
+	var _offsetObj_left, _offsetObj_right, _offsetObj_left1, _offsetObj_right1;
+	var sideProps = import_constants.isWeb ? xPosition === "left" ? {
+		left: "safe",
+		marginLeft: (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset
+	} : xPosition === "right" ? {
+		right: "safe",
+		marginRight: (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset
+	} : null : {
+		left: "safe",
+		marginLeft: (_offsetObj_left1 = offsetObj.left) !== null && _offsetObj_left1 !== void 0 ? _offsetObj_left1 : defaultOffset,
+		right: "safe",
+		marginRight: (_offsetObj_right1 = offsetObj.right) !== null && _offsetObj_right1 !== void 0 ? _offsetObj_right1 : defaultOffset
+	};
+	var centerStyle = import_constants.isWeb && xPosition === "center" ? {
+		left: "50%",
+		transform: "translateX(-50%)"
+	} : null;
 	React.useEffect(function() {
 		if (!import_constants.isWeb) return;
 		var handleKeyDown = function(event) {
@@ -344,7 +328,9 @@ var ToastViewport = (0, import_core.createStyledHOC)(ToastViewportFrame, functio
 		"aria-label": `${label} ${hotkeyLabel}`,
 		tabIndex: -1,
 		"aria-live": "polite",
-		style: offsetStyles,
+		...edgeProps,
+		...sideProps,
+		...centerStyle ? { style: centerStyle } : null,
 		"data-y-position": yPosition,
 		"data-x-position": xPosition,
 		...import_constants.isWeb ? {
@@ -637,15 +623,20 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		setMounted(true);
 	}, []);
 	React.useEffect(function() {
-		if (toast.delete) {
-			setRemoved(true);
-			if (isExpandedRef.current) {
-				setOffsetBeforeRemove(expandedOffsetRef.current);
-			}
-			setTimeout(function() {
-				return ctx.removeToast(toast);
-			}, TIME_BEFORE_UNMOUNT);
+		if (!toast.delete) {
+			setRemoved(false);
+			return;
+		}
+		setRemoved(true);
+		if (isExpandedRef.current) {
+			setOffsetBeforeRemove(expandedOffsetRef.current);
 		}
+		var timer = setTimeout(function() {
+			return ctx.removeToast(toast);
+		}, TIME_BEFORE_UNMOUNT);
+		return function() {
+			return clearTimeout(timer);
+		};
 	}, [
 		toast.delete,
 		toast,
@@ -693,9 +684,8 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		}
 	});
 	var handleLayout = React.useCallback(function(event) {
-		if (!import_constants.isWeb) return;
 		if (removed) return;
-		if (!ctx.expanded && index !== 0) return;
+		if ((!import_constants.isWeb || !ctx.expanded) && index !== 0) return;
 		var { height } = event.nativeEvent.layout;
 		ctx.setToastHeight(toast.id, height);
 	}, [
@@ -706,7 +696,6 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		removed
 	]);
 	React.useEffect(function() {
-		if (!import_constants.isWeb) return;
 		return function() {
 			ctx.removeToastHeight(toast.id);
 		};
@@ -736,29 +725,27 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		};
 	}, [toast, handleClose]);
 	var frontToastHeight = -1;
-	if (import_constants.isWeb) {
-		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = ctx.toasts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var t = _step.value;
+			var h = ctx.heights[t.id];
+			if (h != null && h > 0) {
+				frontToastHeight = h;
+				break;
+			}
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
 		try {
-			for (var _iterator = ctx.toasts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-				var t = _step.value;
-				var h = ctx.heights[t.id];
-				if (h != null && h > 0) {
-					frontToastHeight = h;
-					break;
-				}
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
 			}
-		} catch (err) {
-			_didIteratorError = true;
-			_iteratorError = err;
 		} finally {
-			try {
-				if (!_iteratorNormalCompletion && _iterator.return != null) {
-					_iterator.return();
-				}
-			} finally {
-				if (_didIteratorError) {
-					throw _iteratorError;
-				}
+			if (_didIteratorError) {
+				throw _iteratorError;
 			}
 		}
 	}
@@ -767,7 +754,8 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 	var stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
 	var computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
 	var computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
-	var computedHeight = import_constants.isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
+	var collapsedHeight = !isFront && frontToastHeight > 0 ? frontToastHeight : void 0;
+	var computedHeight = ctx.expanded ? import_constants.isWeb ? ctx.heights[toast.id] || void 0 : void 0 : collapsedHeight;
 	var computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
 	var gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
 	var dataAttributes = {
@@ -784,10 +772,12 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastPositionWrapper, {
 		ref,
 		testID: rest.testID,
-		"aria-label": rest["aria-label"],
 		...dataAttributes,
-		transition: isDragging || ctx.reducedMotion ? void 0 : removed ? "200ms" : "400ms",
-		y: ctx.reducedMotion ? stackY : `${stackY} enter:${isTop ? -80 : 80}px exit:${swipeOut ? (_swipeExitYRef_current = swipeExitYRef.current) !== null && _swipeExitYRef_current !== void 0 ? _swipeExitYRef_current : stackY : stackY}px`,
+		transition: isDragging || ctx.reducedMotion ? void 0 : {
+			duration: removed ? 200 : 400,
+			properties: import_constants.isWeb ? "transform, opacity, height" : "transform, opacity"
+		},
+		y: ctx.reducedMotion ? stackY : `${stackY}px enter:${isTop ? -80 : 80}px exit:${swipeOut ? (_swipeExitYRef_current = swipeExitYRef.current) !== null && _swipeExitYRef_current !== void 0 ? _swipeExitYRef_current : stackY : stackY}px`,
 		scale: stackScale,
 		opacity: `${computedOpacity} enter:0 exit:0`,
 		zIndex: computedZIndex,
@@ -796,12 +786,7 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 		pointerEvents: computedPointerEvents,
 		top: isTop ? 0 : void 0,
 		bottom: isTop ? void 0 : 0,
-		...import_constants.isWeb && !isFront && { style: { transformOrigin: isTop ? "top center" : "bottom center" } },
-		animateOnly: import_constants.isWeb ? [
-			"transform",
-			"opacity",
-			"height"
-		] : ["transform", "opacity"],
+		...!isFront && { style: { transformOrigin: isTop ? "top center" : "bottom center" } },
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragWrapper, {
 			animatedStyle,
 			gestureHandlers,
@@ -828,6 +813,7 @@ var ToastItemInner = (0, import_core.createStyledHOC)(import_ToastItemFrame.Toas
 						handleClose();
 					}
 				} },
+				...!import_constants.isWeb && computedHeight != null && { flex: 1 },
 				...rest,
 				children: [ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.View, {
 					position: "absolute",