@tamagui/portal 1.101.1 → 1.101.2

package/dist/cjs/Portal.js

@@ -25,24 +25,24 @@ __export(Portal_exports, {
   Portal: () => Portal
 });
 module.exports = __toCommonJS(Portal_exports);
-var import_polyfill_dev = require("@tamagui/polyfill-dev"), import_constants = require("@tamagui/constants"), import_stacks = require("@tamagui/stacks"), React = __toESM(require("react")), import_react_dom = require("react-dom"), import_jsx_runtime = require("react/jsx-runtime");
+var import_polyfill_dev = require("@tamagui/polyfill-dev"), import_constants = require("@tamagui/constants"), import_stacks = require("@tamagui/stacks"), React = __toESM(require("react")), import_react_dom = require("react-dom"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_jsx_runtime = require("react/jsx-runtime");
 const Portal = React.memo(
   ({ host = globalThis.document?.body, ...props }) => {
-    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    if (import_constants.isServer)
+      return null;
+    const didFinishSSR = (0, import_use_did_finish_ssr.useDidFinishSSR)(), contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_stacks.YStack,
       {
         contain: "strict",
         fullscreen: !0,
-        position: import_constants.isWeb ? "fixed" : "absolute",
-        maxWidth: import_constants.isWeb ? "100vw" : "100%",
-        maxHeight: import_constants.isWeb ? "100vh" : "100%",
+        position: "fixed",
+        maxWidth: "100vw",
+        maxHeight: "100vh",
         pointerEvents: "none",
         ...props
       }
-    ), [hostElement, setHostElement] = React.useState(null);
-    return React.useEffect(() => {
-      setHostElement(host);
-    }, [host]), hostElement && props.children ? (0, import_react_dom.createPortal)(contents, hostElement) : null;
+    );
+    return (0, import_react_dom.createPortal)(didFinishSSR ? contents : null, host);
   }
 );
 //# sourceMappingURL=Portal.js.map

package/dist/cjs/Portal.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Portal.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAO,kCAEP,mBAAsB,+BACtB,gBAAuB,4BACvB,QAAuB,2BACvB,mBAA6B,sBAOvB;AAHC,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,WAAW,UAAU,MAAM,GAAG,MAAM,MAAmB;AAC/D,UAAM,WACJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAU;AAAA,QAEV,UAAU,yBAAQ,UAAU;AAAA,QAC5B,UAAU,yBAAQ,UAAU;AAAA,QAC5B,WAAW,yBAAQ,UAAU;AAAA,QAC7B,eAAc;AAAA,QACb,GAAG;AAAA;AAAA,IACN,GAGI,CAAC,aAAa,cAAc,IAAI,MAAM,SAAc,IAAI;AAQ9D,WANA,MAAM,UAAU,MAAM;AAEpB,qBAAe,IAAI;AAAA,IAErB,GAAG,CAAC,IAAI,CAAC,GAEL,eAAe,MAAM,eAChB,+BAAa,UAAU,WAAW,IAIpC;AAAA,EACT;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAO,kCAEP,mBAAyB,+BACzB,gBAAuB,4BACvB,QAAuB,2BACvB,mBAA6B,sBAE7B,4BAAgC,wCAc1B;AATC,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,WAAW,UAAU,MAAM,GAAG,MAAM,MAAmB;AAC/D,QAAI;AACF,aAAO;AAGT,UAAM,mBAAe,2CAAgB,GAE/B,WACJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAU;AAAA,QAEV,UAAS;AAAA,QACT,UAAS;AAAA,QACT,WAAU;AAAA,QACV,eAAc;AAAA,QACb,GAAG;AAAA;AAAA,IACN;AAGF,eAAO,+BAAa,eAAe,WAAW,MAAM,IAAI;AAAA,EAC1D;AACF;",
   "names": []
 }

package/dist/esm/Portal.js

@@ -1,26 +1,27 @@
 import "@tamagui/polyfill-dev";
-import { isWeb } from "@tamagui/constants";
+import { isServer } from "@tamagui/constants";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { createPortal } from "react-dom";
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
 import { jsx } from "react/jsx-runtime";
 const Portal = React.memo(
   ({ host = globalThis.document?.body, ...props }) => {
-    const contents = /* @__PURE__ */ jsx(
+    if (isServer)
+      return null;
+    const didFinishSSR = useDidFinishSSR(), contents = /* @__PURE__ */ jsx(
       YStack,
       {
         contain: "strict",
         fullscreen: !0,
-        position: isWeb ? "fixed" : "absolute",
-        maxWidth: isWeb ? "100vw" : "100%",
-        maxHeight: isWeb ? "100vh" : "100%",
+        position: "fixed",
+        maxWidth: "100vw",
+        maxHeight: "100vh",
         pointerEvents: "none",
         ...props
       }
-    ), [hostElement, setHostElement] = React.useState(null);
-    return React.useEffect(() => {
-      setHostElement(host);
-    }, [host]), hostElement && props.children ? createPortal(contents, hostElement) : null;
+    );
+    return createPortal(didFinishSSR ? contents : null, host);
   }
 );
 export {

package/dist/esm/Portal.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Portal.tsx"],
-  "mappings": "AAAA,OAAO;AAEP,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAOvB;AAHC,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,WAAW,UAAU,MAAM,GAAG,MAAM,MAAmB;AAC/D,UAAM,WACJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAU;AAAA,QAEV,UAAU,QAAQ,UAAU;AAAA,QAC5B,UAAU,QAAQ,UAAU;AAAA,QAC5B,WAAW,QAAQ,UAAU;AAAA,QAC7B,eAAc;AAAA,QACb,GAAG;AAAA;AAAA,IACN,GAGI,CAAC,aAAa,cAAc,IAAI,MAAM,SAAc,IAAI;AAQ9D,WANA,MAAM,UAAU,MAAM;AAEpB,qBAAe,IAAI;AAAA,IAErB,GAAG,CAAC,IAAI,CAAC,GAEL,eAAe,MAAM,WAChB,aAAa,UAAU,WAAW,IAIpC;AAAA,EACT;AACF;",
+  "mappings": "AAAA,OAAO;AAEP,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAE7B,SAAS,uBAAuB;AAc1B;AATC,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,WAAW,UAAU,MAAM,GAAG,MAAM,MAAmB;AAC/D,QAAI;AACF,aAAO;AAGT,UAAM,eAAe,gBAAgB,GAE/B,WACJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAU;AAAA,QAEV,UAAS;AAAA,QACT,UAAS;AAAA,QACT,WAAU;AAAA,QACV,eAAc;AAAA,QACb,GAAG;AAAA;AAAA,IACN;AAGF,WAAO,aAAa,eAAe,WAAW,MAAM,IAAI;AAAA,EAC1D;AACF;",
   "names": []
 }

package/dist/esm/Portal.mjs

@@ -1,25 +1,25 @@
 import "@tamagui/polyfill-dev";
-import { isWeb } from "@tamagui/constants";
+import { isServer } from "@tamagui/constants";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { createPortal } from "react-dom";
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
 import { jsx } from "react/jsx-runtime";
 const Portal = React.memo(({
   host = globalThis.document?.body,
   ...props
 }) => {
-  const contents = /* @__PURE__ */jsx(YStack, {
+  if (isServer) return null;
+  const didFinishSSR = useDidFinishSSR(),
+    contents = /* @__PURE__ */jsx(YStack, {
       contain: "strict",
       fullscreen: !0,
-      position: isWeb ? "fixed" : "absolute",
-      maxWidth: isWeb ? "100vw" : "100%",
-      maxHeight: isWeb ? "100vh" : "100%",
+      position: "fixed",
+      maxWidth: "100vw",
+      maxHeight: "100vh",
       pointerEvents: "none",
       ...props
-    }),
-    [hostElement, setHostElement] = React.useState(null);
-  return React.useEffect(() => {
-    setHostElement(host);
-  }, [host]), hostElement && props.children ? createPortal(contents, hostElement) : null;
+    });
+  return createPortal(didFinishSSR ? contents : null, host);
 });
 export { Portal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/portal",
-  "version": "1.101.1",
+  "version": "1.101.2",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -28,17 +28,17 @@
     }
   },
   "dependencies": {
-    "@tamagui/constants": "1.101.1",
-    "@tamagui/core": "1.101.1",
-    "@tamagui/stacks": "1.101.1",
-    "@tamagui/use-did-finish-ssr": "1.101.1",
-    "@tamagui/use-event": "1.101.1"
+    "@tamagui/constants": "1.101.2",
+    "@tamagui/core": "1.101.2",
+    "@tamagui/stacks": "1.101.2",
+    "@tamagui/use-did-finish-ssr": "1.101.2",
+    "@tamagui/use-event": "1.101.2"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.101.1",
+    "@tamagui/build": "1.101.2",
     "react": "^18.2.0",
     "react-native": "0.74.1"
   },

package/src/Portal.tsx

@@ -1,40 +1,36 @@
 import '@tamagui/polyfill-dev'
 
-import { isWeb } from '@tamagui/constants'
+import { isServer } from '@tamagui/constants'
 import { YStack } from '@tamagui/stacks'
 import * as React from 'react'
 import { createPortal } from 'react-dom'
 
+import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
 import type { PortalProps } from './PortalProps'
 
+// web only version
+
 export const Portal = React.memo(
   ({ host = globalThis.document?.body, ...props }: PortalProps) => {
+    if (isServer) {
+      return null
+    }
+
+    const didFinishSSR = useDidFinishSSR()
+
     const contents = (
       <YStack
         contain="strict"
         fullscreen
         // @ts-expect-error ok on web
-        position={isWeb ? 'fixed' : 'absolute'}
-        maxWidth={isWeb ? '100vw' : '100%'}
-        maxHeight={isWeb ? '100vh' : '100%'}
+        position="fixed"
+        maxWidth="100vw"
+        maxHeight="100vh"
         pointerEvents="none"
         {...props}
       />
     )
 
-    const [hostElement, setHostElement] = React.useState<any>(null)
-
-    React.useEffect(() => {
-      // React.startTransition(() => {
-      setHostElement(host)
-      // })
-    }, [host])
-
-    if (hostElement && props.children) {
-      return createPortal(contents, hostElement) as any
-    }
-
-    // ssr return null
-    return null
+    return createPortal(didFinishSSR ? contents : null, host) as any
   }
 )

package/types/Portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,eAAO,MAAM,MAAM,iDACgC,WAAW,SA6B7D,CAAA"}
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIhD,eAAO,MAAM,MAAM,iDACgC,WAAW,SAsB7D,CAAA"}