react-native-system-ui 0.0.1 → 0.0.3

package/dist/es/components/popup/Popup.js

@@ -1,15 +1,18 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { Animated, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Dimensions, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from '../safe-area-view';
 import { addPopStateListener, nativeDriverEnabled } from '../../platform';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
 import { isRenderable, isText } from '../../utils/validate';
 import { Cross } from 'react-native-system-icon';
 import Portal from '../portal/Portal';
 import { useOverlayStack } from '../overlay';
-import { useAriaOverlay } from '../../hooks';
+import { useAriaOverlay, usePresenceAnimation } from '../../hooks';
 import { usePopupTokens } from './tokens';
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const EASING_IN_CUBIC = Easing.bezier(0.55, 0.055, 0.675, 0.19);
+const EASING_OUT_CIRC = Easing.bezier(0.075, 0.82, 0.165, 1.0);
 const placementConfig = {
   top: {
     container: {
@@ -48,9 +51,7 @@ const placementConfig = {
   }
 };
 const buildRadius = (round, placement, radius) => {
-  if (!round) return {
-    borderRadius: 0
-  };
+  if (!round) return;
   switch (placement) {
     case 'top':
       return {
@@ -89,22 +90,21 @@ const renderHeaderNode = (node, options) => {
     style: options.wrapperStyle
   }, node);
 };
-const renderWithSafeArea = (children, opts) => {
+const renderWithSafeArea = (children, opts, onSafeAreaTopLayout) => {
   if (opts.safeArea) {
-    return /*#__PURE__*/React.createElement(SafeAreaView, {
-      style: styles.safeAreaView
-    }, children);
+    return /*#__PURE__*/React.createElement(SafeAreaView, null, children);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: styles.safeInsetTop
-  }) : null, children, opts.safeAreaInsetBottom ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: styles.safeInsetBottom
-  }) : null);
+    edge: "top",
+    onLayout: onSafeAreaTopLayout,
+    pointerEvents: "none"
+  }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+    edge: "bottom",
+    pointerEvents: "none"
+  }));
 };
 const hiddenContentStyle = {
   opacity: 0,
-  // @ts-ignore
-  boxShadow: 'none',
   shadowOpacity: 0,
   shadowRadius: 0,
   elevation: 0
@@ -153,9 +153,7 @@ export const Popup = props => {
   const shouldTranslate = placement !== 'center';
   const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
   const tokens = usePopupTokens(tokensOverride);
-
-  // Dynamic styles derived from tokens
-  const dynamicStyles = React.useMemo(() => {
+  const dynamicStyles = useMemo(() => {
     const shadow = createPlatformShadow({
       color: tokens.shadow.color,
       opacity: tokens.shadow.opacity,
@@ -163,77 +161,78 @@ export const Popup = props => {
       offsetY: tokens.shadow.offsetY,
       elevation: tokens.shadow.elevation
     });
+    const popup = {
+      backgroundColor: tokens.colors.background,
+      padding: tokens.spacing.padding,
+      ...shadow
+    };
+    const title = {
+      color: tokens.colors.title,
+      fontSize: tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight,
+      marginHorizontal: tokens.spacing.descriptionHorizontal,
+      textAlign: 'center'
+    };
+    const titleWrapper = {
+      marginTop: tokens.spacing.titleTop,
+      marginBottom: tokens.spacing.titleBottom,
+      marginHorizontal: tokens.spacing.descriptionHorizontal,
+      alignItems: 'center'
+    };
+    const description = {
+      color: tokens.colors.description,
+      fontSize: tokens.typography.descriptionSize,
+      lineHeight: tokens.typography.descriptionLineHeight
+    };
+    const descriptionWrapper = {
+      marginHorizontal: tokens.spacing.descriptionHorizontal,
+      marginBottom: tokens.spacing.descriptionBottom
+    };
+    const closeIconBase = {
+      minWidth: tokens.spacing.closeIconSize,
+      minHeight: tokens.spacing.closeIconSize,
+      padding: 6
+    };
+    const closeIconDefault = {
+      width: tokens.spacing.closeIconSize,
+      height: tokens.spacing.closeIconSize
+    };
+    const popupSide = {
+      width: tokens.layout.sideWidth,
+      maxWidth: tokens.layout.maxWidth
+    };
+    const popupCenter = {
+      minWidth: tokens.layout.minWidth,
+      maxWidth: tokens.layout.centerMaxWidth
+    };
     return {
-      popup: {
-        backgroundColor: tokens.colors.background,
-        padding: tokens.spacing.padding,
-        ...shadow
-      },
-      title: {
-        color: tokens.colors.title,
-        fontSize: tokens.typography.titleSize,
-        fontWeight: tokens.typography.titleWeight
-      },
-      titleWrapper: {
-        marginTop: tokens.spacing.titleTop,
-        marginBottom: tokens.spacing.titleBottom
-      },
-      description: {
-        color: tokens.colors.description,
-        fontSize: tokens.typography.descriptionSize,
-        lineHeight: tokens.typography.descriptionLineHeight
-      },
-      descriptionWrapper: {
-        marginHorizontal: tokens.spacing.descriptionHorizontal,
-        marginBottom: tokens.spacing.descriptionBottom
-      },
-      closeIconBase: {
-        minWidth: tokens.spacing.closeIconSize,
-        minHeight: tokens.spacing.closeIconSize,
-        padding: 6 // keep fixed or add token if needed, usually fixed for hitSlop area
-      },
-      closeIconDefault: {
-        width: tokens.spacing.closeIconSize,
-        height: tokens.spacing.closeIconSize
-      },
-      popupSide: {
-        width: tokens.layout.sideWidth,
-        maxWidth: tokens.layout.maxWidth
-      },
-      popupCenter: {
-        minWidth: tokens.layout.minWidth,
-        maxWidth: tokens.layout.centerMaxWidth
-      }
+      popup,
+      title,
+      titleWrapper,
+      description,
+      descriptionWrapper,
+      closeIconBase,
+      closeIconDefault,
+      popupSide,
+      popupCenter
     };
   }, [tokens]);
-  const [mounted, setMounted] = React.useState(visible);
-  const [interactionVisible, setInteractionVisible] = React.useState(visible);
-  const [contentDistance, setContentDistance] = React.useState(0);
-  const progress = React.useRef(new Animated.Value(0)).current;
-  const animatingRef = React.useRef(false);
-  const animationRef = React.useRef(null);
-  const distanceRef = React.useRef(0);
-  const pendingDistanceRef = React.useRef(null);
-  const pendingShowRef = React.useRef(false);
-  const openFallbackTimerRef = React.useRef(null);
-  const prevVisible = React.useRef(visible);
+  const [mounted, setMounted] = useState(visible);
+  const [interactionVisible, setInteractionVisible] = useState(visible);
+  const isOpen = visible || interactionVisible;
+  const canCloseOnOverlay = shouldCloseOnOverlay && (onClose || beforeClose);
+  const progress = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
+  const animationSeqRef = useRef(0);
+  const prevVisible = useRef(visible);
+  const closingRef = useRef(false);
   const isVertical = placement === 'top' || placement === 'bottom';
   const isHorizontal = placement === 'left' || placement === 'right';
   const direction = placement === 'top' || placement === 'left' ? -1 : 1;
-  const clearOpenFallbackTimer = React.useCallback(() => {
-    if (openFallbackTimerRef.current) {
-      clearTimeout(openFallbackTimerRef.current);
-      openFallbackTimerRef.current = null;
-    }
-  }, []);
-  const runAnimation = React.useCallback(show => {
-    animatingRef.current = true;
-    if (show) {
-      setMounted(true);
-      setInteractionVisible(true);
-    }
-    // 对齐 react-vant：进入使用 ease-out，退出使用 ease-in（近似 CSS cubic-bezier 0.25,0.1,0.25,1 / 0.42,0,1,1）
-    const easing = show ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic);
+  const runAnimation = useCallback(show => {
+    animationSeqRef.current += 1;
+    const currentSeq = animationSeqRef.current;
+    const easing = show ? EASING_OUT_CIRC : EASING_IN_CUBIC;
     animationRef.current?.stop();
     const animation = Animated.timing(progress, {
       toValue: show ? 1 : 0,
@@ -245,14 +244,7 @@ export const Popup = props => {
     animation.start(({
       finished
     }) => {
-      if (!finished) return;
-      animatingRef.current = false;
-      const pendingDistance = pendingDistanceRef.current;
-      if (pendingDistance != null) {
-        pendingDistanceRef.current = null;
-        distanceRef.current = pendingDistance;
-        setContentDistance(pendingDistance);
-      }
+      if (!finished || currentSeq !== animationSeqRef.current) return;
       if (show) {
         onOpened?.();
       } else {
@@ -264,51 +256,41 @@ export const Popup = props => {
       }
     });
   }, [destroyOnClose, duration, onClosed, onOpened, progress]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (visible) {
       setMounted(true);
       setInteractionVisible(true);
-      clearOpenFallbackTimer();
-      const needWaitForLayout = shouldTranslate && distanceRef.current === 0;
-      if (needWaitForLayout) {
-        pendingShowRef.current = true;
-        openFallbackTimerRef.current = setTimeout(() => {
-          if (pendingShowRef.current && visible) {
-            pendingShowRef.current = false;
-            runAnimation(true);
-          }
-        }, 50);
-        return;
-      }
-      pendingShowRef.current = false;
       runAnimation(true);
     } else {
-      pendingShowRef.current = false;
-      clearOpenFallbackTimer();
       if (!prevVisible.current) return;
       runAnimation(false);
     }
-  }, [clearOpenFallbackTimer, runAnimation, shouldTranslate, visible]);
-  React.useEffect(() => {
+  }, [runAnimation, visible]);
+  useEffect(() => {
     if (visible && !prevVisible.current) {
       onOpen?.();
     }
     prevVisible.current = visible;
   }, [onOpen, visible]);
-  React.useEffect(() => () => {
+  useEffect(() => () => {
     animationRef.current?.stop();
-    clearOpenFallbackTimer();
-  }, [clearOpenFallbackTimer]);
-  const requestClose = React.useCallback(async reason => {
-    if (beforeClose) {
-      const result = await beforeClose(reason);
-      if (result === false) {
-        return;
+  }, []);
+  const requestClose = useCallback(async reason => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    try {
+      if (beforeClose) {
+        const result = await beforeClose(reason);
+        if (result === false) {
+          return;
+        }
       }
+      onClose?.();
+    } finally {
+      closingRef.current = false;
     }
-    onClose?.();
   }, [beforeClose, onClose]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!closeOnPopstate) {
       return;
     }
@@ -318,7 +300,7 @@ export const Popup = props => {
     };
     return addPopStateListener(handler);
   }, [closeOnPopstate, requestClose, visible]);
-  const handleStackClose = React.useCallback(() => {
+  const handleStackClose = useCallback(() => {
     requestClose('close');
   }, [requestClose]);
   const {
@@ -347,80 +329,88 @@ export const Popup = props => {
     onLayout: overlayOnLayout,
     ...overlayRestProps
   } = overlayProps;
-  const contentInteractionProps = React.useMemo(() => {
-    if (!stopPropagation) {
-      return overlayRestProps;
-    }
-    return {
-      ...overlayRestProps,
-      onStartShouldSetResponder: () => true
-    };
-  }, [overlayRestProps, stopPropagation]);
+  const stopPropagationResponder = useCallback(() => true, []);
+  const contentInteractionProps = stopPropagation ? {
+    ...overlayRestProps,
+    onStartShouldSetResponder: stopPropagationResponder
+  } : overlayRestProps;
   const config = placementConfig[placement];
-  const distance = distanceRef.current || contentDistance;
-  const translateStyle = shouldTranslate ? {
-    transform: [config.axis === 'y' ? {
+  const radiusStyle = useMemo(() => buildRadius(round, placement, tokens.radius.round), [placement, round, tokens.radius.round]);
+  const {
+    animated: overlayOpacity
+  } = usePresenceAnimation(visible, {
+    duration
+  });
+  const translateDistance = useMemo(() => {
+    if (placement === 'left' || placement === 'right') {
+      return Dimensions.get('window').width;
+    }
+    if (placement === 'top' || placement === 'bottom') {
+      return Dimensions.get('window').height;
+    }
+    return 0;
+  }, [placement]);
+  const translateTransform = useMemo(() => {
+    if (!shouldTranslate) return null;
+    const outputRange = [translateDistance * direction, 0];
+    return config.axis === 'y' ? {
       translateY: progress.interpolate({
         inputRange: [0, 1],
-        outputRange: [distance * direction, 0]
+        outputRange
       })
     } : {
       translateX: progress.interpolate({
         inputRange: [0, 1],
-        outputRange: [distance * direction, 0]
+        outputRange
       })
-    }]
-  } : {
-    transform: []
-  };
-  const overlayOpacity = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1]
-  });
-  const animatedContentStyle = React.useMemo(() => {
-    const transform = contentAnimationStyle?.transform;
-    const baseTransform = Array.isArray(translateStyle.transform) ? translateStyle.transform : [];
-    const mergedTransform = transform && Array.isArray(transform) ? [...baseTransform, ...transform] : baseTransform;
-    return {
-      ...translateStyle,
+    };
+  }, [config.axis, direction, progress, shouldTranslate, translateDistance]);
+  const baseTransform = useMemo(() => translateTransform ? [translateTransform] : [], [translateTransform]);
+  const animatedContentStyle = useMemo(() => {
+    const extraTransform = contentAnimationStyle?.transform;
+    const transform = Array.isArray(extraTransform) ? [...baseTransform, ...extraTransform] : baseTransform;
+    const baseStyle = {
       ...contentAnimationStyle,
-      transform: mergedTransform,
-      opacity: progress
+      transform
     };
-  }, [translateStyle, progress, contentAnimationStyle]);
-  const handleContentLayout = React.useCallback(event => {
-    overlayOnLayout?.(event);
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    const nextDistance = isVertical ? height : width;
-    if (animatingRef.current) {
-      pendingDistanceRef.current = nextDistance;
-      return;
+    if (placement === 'center') {
+      return {
+        ...baseStyle,
+        opacity: progress
+      };
     }
-    distanceRef.current = nextDistance;
-    setContentDistance(prev => Math.abs(prev - nextDistance) < 0.5 ? prev : nextDistance);
-    if (pendingShowRef.current && visible) {
-      pendingShowRef.current = false;
-      clearOpenFallbackTimer();
-      runAnimation(true);
+    if (contentAnimationStyle?.opacity == null) {
+      return {
+        ...baseStyle,
+        opacity: 1
+      };
     }
-  }, [clearOpenFallbackTimer, isVertical, overlayOnLayout, runAnimation, visible]);
+    return baseStyle;
+  }, [baseTransform, contentAnimationStyle, placement, progress]);
+  const handleContentLayout = useCallback(event => {
+    overlayOnLayout?.(event);
+  }, [overlayOnLayout]);
+  const [safeAreaTopHeight, setSafeAreaTopHeight] = useState(0);
+  const handleSafeAreaTopLayout = useCallback(event => {
+    setSafeAreaTopHeight(event.nativeEvent.layout.height);
+  }, []);
   const shouldRender = mounted || visible;
   if (!shouldRender) return null;
-  const hidden = !visible && !interactionVisible;
+  const hidden = !isOpen;
   const hasCustomCloseIcon = closeIcon != null;
   const hasHeader = isRenderable(title) || isRenderable(description);
+  const headerPadding = tokens.spacing.closeIconRight + tokens.spacing.closeIconSize;
   const headerPaddingStyle = closeable && closeIconPosition.startsWith('top-') ? closeIconPosition.endsWith('right') ? {
-    paddingRight: 44
+    paddingRight: headerPadding
   } : {
-    paddingLeft: 44
+    paddingLeft: headerPadding
   } : undefined;
-  const closeIconVerticalStyle = closeIconPosition.includes('bottom') ? {
-    bottom: tokens.spacing.closeIconTop
+  const closeIconTopValue = closeIconPosition.includes('top') ? tokens.spacing.closeIconTop + safeAreaTopHeight : undefined;
+  const closeIconBottomValue = closeIconPosition.includes('bottom') ? tokens.spacing.closeIconTop : undefined;
+  const closeIconVerticalStyle = closeIconBottomValue !== undefined ? {
+    bottom: closeIconBottomValue
   } : {
-    top: tokens.spacing.closeIconTop
+    top: closeIconTopValue
   };
   const closeIconHorizontalStyle = closeIconPosition.endsWith('left') ? {
     left: tokens.spacing.closeIconRight
@@ -431,18 +421,13 @@ export const Popup = props => {
     style: [styles.header, headerPaddingStyle]
   }, renderHeaderNode(title, {
     textStyle: [styles.title, dynamicStyles.title],
-    wrapperStyle: [styles.titleWrapper, dynamicStyles.titleWrapper]
+    wrapperStyle: dynamicStyles.titleWrapper
   }), renderHeaderNode(description, {
     textStyle: [styles.description, dynamicStyles.description],
-    wrapperStyle: [styles.descriptionWrapper, dynamicStyles.descriptionWrapper]
+    wrapperStyle: dynamicStyles.descriptionWrapper
   })) : null;
   const contentBody = hasHeader ? /*#__PURE__*/React.createElement(React.Fragment, null, headerNode, children) : children;
-  const content = /*#__PURE__*/React.createElement(Animated.View, _extends({
-    ref: overlayRef
-  }, contentInteractionProps, {
-    onLayout: handleContentLayout,
-    style: [dynamicStyles.popup, placement === 'center' ? dynamicStyles.popupCenter : null, isVertical ? styles.popupVertical : null, isHorizontal ? dynamicStyles.popupSide : null, buildRadius(round, placement, tokens.radius.round), animatedContentStyle, style, hidden ? hiddenContentStyle : null]
-  }, rest), closeable ? /*#__PURE__*/React.createElement(Pressable, {
+  const closeIconNode = closeable ? /*#__PURE__*/React.createElement(Pressable, {
     style: [styles.closeIconBase, dynamicStyles.closeIconBase, closeIconVerticalStyle, closeIconHorizontalStyle, !hasCustomCloseIcon ? dynamicStyles.closeIconDefault : null],
     hitSlop: 8,
     onPress: () => requestClose('close-icon')
@@ -450,31 +435,37 @@ export const Popup = props => {
     size: 22,
     fill: tokens.colors.closeIcon,
     color: tokens.colors.closeIcon
-  })) : null, renderWithSafeArea(contentBody, {
+  })) : null;
+  const content = /*#__PURE__*/React.createElement(Animated.View, _extends({
+    ref: overlayRef
+  }, contentInteractionProps, {
+    onLayout: handleContentLayout,
+    style: [dynamicStyles.popup, placement === 'center' ? dynamicStyles.popupCenter : null, isVertical ? styles.popupVertical : null, isHorizontal ? dynamicStyles.popupSide : null, radiusStyle, animatedContentStyle, style, hidden ? hiddenContentStyle : null]
+  }, rest), closeIconNode, renderWithSafeArea(contentBody, {
     safeArea,
     safeAreaInsetTop,
     safeAreaInsetBottom
-  }));
+  }, safeAreaInsetTop ? handleSafeAreaTopLayout : undefined));
   const resolvedZIndex = stackZIndex ?? zIndex;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
     style: [styles.portalRoot, resolvedZIndex ? {
       zIndex: resolvedZIndex
-    } : null],
+    } : undefined],
     pointerEvents: "box-none"
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.container, config.container],
-    pointerEvents: visible || interactionVisible ? 'auto' : 'none',
+    pointerEvents: isOpen ? 'auto' : 'none',
     accessibilityViewIsModal: visible,
     accessibilityLiveRegion: "polite",
     onAccessibilityEscape: () => requestClose('close')
-  }, overlay && (visible || interactionVisible) ? /*#__PURE__*/React.createElement(AnimatedPressable, _extends({
+  }, overlay && isOpen ? /*#__PURE__*/React.createElement(AnimatedPressable, _extends({
     testID: overlayTestID,
     style: [styles.overlay, {
       backgroundColor: tokens.colors.overlay,
       opacity: overlayOpacity
     }, overlayStyle],
-    pointerEvents: visible || interactionVisible ? 'auto' : 'none'
-  }, shouldCloseOnOverlay && (onClose || beforeClose) ? {
+    pointerEvents: isOpen ? 'auto' : 'none'
+  }, canCloseOnOverlay ? {
     accessibilityRole: 'button',
     accessibilityLabel: overlayAccessibilityLabel,
     accessibilityHint: '双击即可关闭弹层'
@@ -487,12 +478,12 @@ export const Popup = props => {
         requestClose('overlay');
       }
     }
-  })) : null, !overlay && lockScroll && (visible || interactionVisible) ? /*#__PURE__*/React.createElement(View, {
+  })) : null, !overlay && lockScroll && isOpen ? /*#__PURE__*/React.createElement(View, {
     style: styles.lockLayer,
     pointerEvents: "auto",
     onStartShouldSetResponder: () => true,
     onMoveShouldSetResponder: () => true
-  }) : null, visible || mounted ? content : null)));
+  }) : null, content)));
 };
 const styles = StyleSheet.create({
   portalRoot: {
@@ -509,22 +500,10 @@ const styles = StyleSheet.create({
   header: {
     width: '100%'
   },
-  titleWrapper: {
-    // Moved to dynamicStyles
-    marginHorizontal: 12,
-    alignItems: 'center'
-  },
   title: {
-    // Moved to dynamicStyles
-    marginHorizontal: 12,
-    textAlign: 'center',
     includeFontPadding: false
   },
-  descriptionWrapper: {
-    // Moved to dynamicStyles
-  },
   description: {
-    // Moved to dynamicStyles
     includeFontPadding: false
   },
   popupVertical: {
@@ -532,21 +511,12 @@ const styles = StyleSheet.create({
   },
   closeIconBase: {
     position: 'absolute',
-    zIndex: 1,
+    zIndex: 999,
     alignItems: 'center',
     justifyContent: 'center'
   },
   lockLayer: {
     ...StyleSheet.absoluteFillObject
-  },
-  safeAreaView: {
-    width: '100%'
-  },
-  safeInsetTop: {
-    width: '100%'
-  },
-  safeInsetBottom: {
-    width: '100%'
   }
 });
 Popup.displayName = 'Popup';

package/dist/es/components/portal/Portal.js

@@ -1,23 +1,18 @@
-import React from 'react';
+import { useContext, useLayoutEffect, useRef } from 'react';
 import { PortalContext } from './PortalContext';
 import { PortalHost, ensureGlobalPortalHost, portalManager as globalManager, portalStore } from './PortalHost';
-const usePortalManager = () => React.useContext(PortalContext) ?? globalManager;
+const usePortalManager = () => useContext(PortalContext) ?? globalManager;
 const PortalComponent = ({
   children
 }) => {
   const manager = usePortalManager();
-  if (manager === globalManager && typeof document === 'undefined') {
-    void ensureGlobalPortalHost();
-  }
-  const keyRef = React.useRef(null);
-  const skipNextUpdateRef = React.useRef(false);
-  React.useLayoutEffect(() => {
-    if (manager === globalManager && typeof document !== 'undefined') {
+  const keyRef = useRef(null);
+  useLayoutEffect(() => {
+    if (manager === globalManager) {
       void ensureGlobalPortalHost();
     }
     const key = manager.mount(children ?? null);
     keyRef.current = key;
-    skipNextUpdateRef.current = true;
     return () => {
       if (keyRef.current !== null) {
         manager.unmount(keyRef.current);
@@ -25,11 +20,7 @@ const PortalComponent = ({
       }
     };
   }, [manager]);
-  React.useLayoutEffect(() => {
-    if (skipNextUpdateRef.current) {
-      skipNextUpdateRef.current = false;
-      return;
-    }
+  useLayoutEffect(() => {
     if (keyRef.current === null) return;
     manager.update(keyRef.current, children ?? null);
   }, [children, manager]);