@tamagui/portal 1.43.2 → 1.43.3

package/dist/cjs/Portal.js

@@ -37,28 +37,31 @@ var import_core = require("@tamagui/core");
 var import_stacks = require("@tamagui/stacks");
 var React = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-const Portal = ({ host = ((_a) => (_a = globalThis.document) == null ? void 0 : _a.body)(), ...props }) => {
-  const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_stacks.YStack,
-    {
-      contain: "strict",
-      fullscreen: true,
-      position: import_core.isWeb ? "fixed" : "absolute",
-      maxWidth: import_core.isWeb ? "100vw" : "100%",
-      maxHeight: import_core.isWeb ? "100vh" : "100%",
-      pointerEvents: "none",
-      ...props
+const Portal = React.memo(
+  ({ host = ((_a) => (_a = globalThis.document) == null ? void 0 : _a.body)(), ...props }) => {
+    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stacks.YStack,
+      {
+        contain: "strict",
+        fullscreen: true,
+        position: import_core.isWeb ? "fixed" : "absolute",
+        maxWidth: import_core.isWeb ? "100vw" : "100%",
+        maxHeight: import_core.isWeb ? "100vh" : "100%",
+        pointerEvents: "none",
+        ...props
+      }
+    );
+    const [hostElement, setHostElement] = React.useState(null);
+    const id = React.useId();
+    (0, import_core.useIsomorphicLayoutEffect)(() => {
+      setHostElement(host);
+    }, [host]);
+    if (hostElement && props.children) {
+      return (0, import_react_dom.createPortal)(contents, hostElement);
     }
-  );
-  const [hostElement, setHostElement] = React.useState(null);
-  (0, import_core.useIsomorphicLayoutEffect)(() => {
-    setHostElement(host);
-  }, [host]);
-  if (hostElement && props.children) {
-    return (0, import_react_dom.createPortal)(contents, hostElement);
+    return null;
   }
-  return null;
-};
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Portal

package/dist/cjs/Portal.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Portal.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYI;AAXJ,0BAAO;AAEP,kBAAiD;AACjD,oBAAuB;AACvB,YAAuB;AACvB,uBAA6B;AAItB,MAAM,SAAS,CAAC,EAAE,QAAO,yBAAW,aAAX,mBAAqB,SAAM,GAAG,MAAM,MAAmB;AACrF,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAU;AAAA,MAEV,UAAU,oBAAQ,UAAU;AAAA,MAC5B,UAAU,oBAAQ,UAAU;AAAA,MAC5B,WAAW,oBAAQ,UAAU;AAAA,MAC7B,eAAc;AAAA,MACb,GAAG;AAAA;AAAA,EACN;AAGF,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAc,IAAI;AAE9D,6CAA0B,MAAM;AAC9B,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,eAAe,MAAM,UAAU;AACjC,eAAO,+BAAa,UAAU,WAAW;AAAA,EAC3C;AAGA,SAAO;AACT;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM;AAZN,0BAAO;AAEP,kBAAiD;AACjD,oBAAuB;AACvB,YAAuB;AACvB,uBAA6B;AAItB,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,QAAO,yBAAW,aAAX,mBAAqB,SAAM,GAAG,MAAM,MAAmB;AAC/D,UAAM,WACJ;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAU;AAAA,QAEV,UAAU,oBAAQ,UAAU;AAAA,QAC5B,UAAU,oBAAQ,UAAU;AAAA,QAC5B,WAAW,oBAAQ,UAAU;AAAA,QAC7B,eAAc;AAAA,QACb,GAAG;AAAA;AAAA,IACN;AAGF,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAc,IAAI;AAE9D,UAAM,KAAK,MAAM,MAAM;AACvB,+CAA0B,MAAM;AAC9B,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,IAAI,CAAC;AAET,QAAI,eAAe,MAAM,UAAU;AACjC,iBAAO,+BAAa,UAAU,WAAW;AAAA,IAC3C;AAGA,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/esm/Portal.js

@@ -4,28 +4,31 @@ import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { createPortal } from "react-dom";
-const Portal = ({ host = ((_a) => (_a = globalThis.document) == null ? void 0 : _a.body)(), ...props }) => {
-  const contents = /* @__PURE__ */ jsx(
-    YStack,
-    {
-      contain: "strict",
-      fullscreen: true,
-      position: isWeb ? "fixed" : "absolute",
-      maxWidth: isWeb ? "100vw" : "100%",
-      maxHeight: isWeb ? "100vh" : "100%",
-      pointerEvents: "none",
-      ...props
+const Portal = React.memo(
+  ({ host = ((_a) => (_a = globalThis.document) == null ? void 0 : _a.body)(), ...props }) => {
+    const contents = /* @__PURE__ */ jsx(
+      YStack,
+      {
+        contain: "strict",
+        fullscreen: true,
+        position: isWeb ? "fixed" : "absolute",
+        maxWidth: isWeb ? "100vw" : "100%",
+        maxHeight: isWeb ? "100vh" : "100%",
+        pointerEvents: "none",
+        ...props
+      }
+    );
+    const [hostElement, setHostElement] = React.useState(null);
+    const id = React.useId();
+    useIsomorphicLayoutEffect(() => {
+      setHostElement(host);
+    }, [host]);
+    if (hostElement && props.children) {
+      return createPortal(contents, hostElement);
     }
-  );
-  const [hostElement, setHostElement] = React.useState(null);
-  useIsomorphicLayoutEffect(() => {
-    setHostElement(host);
-  }, [host]);
-  if (hostElement && props.children) {
-    return createPortal(contents, hostElement);
+    return null;
   }
-  return null;
-};
+);
 export {
   Portal
 };

package/dist/esm/Portal.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Portal.tsx"],
-  "mappings": "AAYI;AAXJ,OAAO;AAEP,SAAS,OAAO,iCAAiC;AACjD,SAAS,cAAc;AACvB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAItB,MAAM,SAAS,CAAC,EAAE,QAAO,yBAAW,aAAX,mBAAqB,SAAM,GAAG,MAAM,MAAmB;AACrF,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAU;AAAA,MAEV,UAAU,QAAQ,UAAU;AAAA,MAC5B,UAAU,QAAQ,UAAU;AAAA,MAC5B,WAAW,QAAQ,UAAU;AAAA,MAC7B,eAAc;AAAA,MACb,GAAG;AAAA;AAAA,EACN;AAGF,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAc,IAAI;AAE9D,4BAA0B,MAAM;AAC9B,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,eAAe,MAAM,UAAU;AACjC,WAAO,aAAa,UAAU,WAAW;AAAA,EAC3C;AAGA,SAAO;AACT;",
+  "mappings": "AAaM;AAZN,OAAO;AAEP,SAAS,OAAO,iCAAiC;AACjD,SAAS,cAAc;AACvB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAItB,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,QAAO,yBAAW,aAAX,mBAAqB,SAAM,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;AAGF,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAc,IAAI;AAE9D,UAAM,KAAK,MAAM,MAAM;AACvB,8BAA0B,MAAM;AAC9B,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,IAAI,CAAC;AAET,QAAI,eAAe,MAAM,UAAU;AACjC,aAAO,aAAa,UAAU,WAAW;AAAA,IAC3C;AAGA,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/portal",
-  "version": "1.43.2",
+  "version": "1.43.3",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -27,16 +27,16 @@
     }
   },
   "dependencies": {
-    "@tamagui/core": "1.43.2",
-    "@tamagui/stacks": "1.43.2",
-    "@tamagui/use-event": "1.43.2"
+    "@tamagui/core": "1.43.3",
+    "@tamagui/stacks": "1.43.3",
+    "@tamagui/use-event": "1.43.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.43.2",
+    "@tamagui/build": "1.43.3",
     "react": "^18.2.0",
     "react-native": "^0.72.1"
   },

package/src/Portal.tsx

@@ -8,30 +8,33 @@ import { createPortal } from 'react-dom'
 
 import { PortalProps } from './PortalProps'
 
-export const Portal = ({ host = globalThis.document?.body, ...props }: PortalProps) => {
-  const contents = (
-    <YStack
-      contain="strict"
-      fullscreen
-      // @ts-expect-error ok on web
-      position={isWeb ? 'fixed' : 'absolute'}
-      maxWidth={isWeb ? '100vw' : '100%'}
-      maxHeight={isWeb ? '100vh' : '100%'}
-      pointerEvents="none"
-      {...props}
-    />
-  )
+export const Portal = React.memo(
+  ({ host = globalThis.document?.body, ...props }: PortalProps) => {
+    const contents = (
+      <YStack
+        contain="strict"
+        fullscreen
+        // @ts-expect-error ok on web
+        position={isWeb ? 'fixed' : 'absolute'}
+        maxWidth={isWeb ? '100vw' : '100%'}
+        maxHeight={isWeb ? '100vh' : '100%'}
+        pointerEvents="none"
+        {...props}
+      />
+    )
 
-  const [hostElement, setHostElement] = React.useState<any>(null)
+    const [hostElement, setHostElement] = React.useState<any>(null)
 
-  useIsomorphicLayoutEffect(() => {
-    setHostElement(host)
-  }, [host])
+    const id = React.useId()
+    useIsomorphicLayoutEffect(() => {
+      setHostElement(host)
+    }, [host])
 
-  if (hostElement && props.children) {
-    return createPortal(contents, hostElement)
-  }
+    if (hostElement && props.children) {
+      return createPortal(contents, hostElement)
+    }
 
-  // ssr return null
-  return null
-}
+    // ssr return null
+    return null
+  }
+)

package/types/Portal.d.ts

@@ -1,5 +1,5 @@
 import '@tamagui/polyfill-dev';
 import * as React from 'react';
 import { PortalProps } from './PortalProps';
-export declare const Portal: ({ host, ...props }: PortalProps) => React.ReactPortal | null;
+export declare const Portal: React.MemoExoticComponent<({ host, ...props }: PortalProps) => React.ReactPortal | null>;
 //# sourceMappingURL=Portal.d.ts.map

package/types/Portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,MAAM,uBAAoD,WAAW,6BA0BjF,CAAA"}
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,MAAM,iDACgC,WAAW,8BA4B7D,CAAA"}