@radix-ui/react-portal 1.1.0-rc.1 → 1.1.0-rc.2

package/dist/index.d.mts

@@ -7,7 +7,7 @@ interface PortalProps extends PrimitiveDivProps {
     /**
      * An optional container where the portaled content should be appended.
      */
-    container?: HTMLElement | null;
+    container?: Element | null;
 }
 declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
 declare const Root: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ interface PortalProps extends PrimitiveDivProps {
     /**
      * An optional container where the portaled content should be appended.
      */
-    container?: HTMLElement | null;
+    container?: Element | null;
 }
 declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
 declare const Root: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
@@ -33,10 +34,14 @@
   var React = __toESM(__require("react"));
   var import_react_dom = __toESM(__require("react-dom"));
   var import_react_primitive = __require("@radix-ui/react-primitive");
+  var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
   var import_jsx_runtime = __require("react/jsx-runtime");
   var PORTAL_NAME = "Portal";
   var Portal = React.forwardRef((props, forwardedRef) => {
-    const { container = globalThis?.document?.body, ...portalProps } = props;
+    const { container: containerProp, ...portalProps } = props;
+    const [mounted, setMounted] = React.useState(false);
+    (0, import_react_use_layout_effect.useLayoutEffect)(() => setMounted(true), []);
+    const container = containerProp || mounted && globalThis?.document?.body;
     return container ? import_react_dom.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
   });
   Portal.displayName = PORTAL_NAME;

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/Portal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PortalProps extends PrimitiveDivProps {\n  /**\n   * An optional container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n  const { container = globalThis?.document?.body, ...portalProps } = props;\n  return container\n    ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)\n    : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n  Portal,\n  //\n  Root,\n};\nexport type { PortalProps };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,cAAuB;AACvB,yBAAqB;AACrB,+BAA0B;AAsBE;AAd5B,MAAM,cAAc;AAWpB,MAAM,SAAe,iBAAuC,CAAC,OAAO,iBAAiB;AACnF,UAAM,EAAE,YAAY,YAAY,UAAU,MAAM,GAAG,YAAY,IAAI;AACnE,WAAO,YACH,iBAAAA,QAAS,aAAa,4CAAC,iCAAU,KAAV,EAAe,GAAG,aAAa,KAAK,cAAc,GAAI,SAAS,IACtF;AAAA,EACN,CAAC;AAED,SAAO,cAAc;AAIrB,MAAM,OAAO;",
+  "sourcesContent": ["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PortalProps extends PrimitiveDivProps {\n  /**\n   * An optional container where the portaled content should be appended.\n   */\n  container?: Element | null;\n}\n\nconst Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n  const { container: containerProp, ...portalProps } = props;\n  const [mounted, setMounted] = React.useState(false);\n  useLayoutEffect(() => setMounted(true), []);\n  const container = containerProp || (mounted && globalThis?.document?.body);\n  return container\n    ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)\n    : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n  Portal,\n  //\n  Root,\n};\nexport type { PortalProps };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,cAAuB;AACvB,yBAAqB;AACrB,+BAA0B;AAC1B,uCAAgC;AAyBJ;AAjB5B,MAAM,cAAc;AAWpB,MAAM,SAAe,iBAAuC,CAAC,OAAO,iBAAiB;AACnF,UAAM,EAAE,WAAW,eAAe,GAAG,YAAY,IAAI;AACrD,UAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,wDAAgB,MAAM,WAAW,IAAI,GAAG,CAAC,CAAC;AAC1C,UAAM,YAAY,iBAAkB,WAAW,YAAY,UAAU;AACrE,WAAO,YACH,iBAAAA,QAAS,aAAa,4CAAC,iCAAU,KAAV,EAAe,GAAG,aAAa,KAAK,cAAc,GAAI,SAAS,IACtF;AAAA,EACN,CAAC;AAED,SAAO,cAAc;AAIrB,MAAM,OAAO;",
   "names": ["ReactDOM"]
 }

package/dist/index.mjs

@@ -1,11 +1,17 @@
+"use client";
+
 // packages/react/portal/src/Portal.tsx
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { Primitive } from "@radix-ui/react-primitive";
+import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
 import { jsx } from "react/jsx-runtime";
 var PORTAL_NAME = "Portal";
 var Portal = React.forwardRef((props, forwardedRef) => {
-  const { container = globalThis?.document?.body, ...portalProps } = props;
+  const { container: containerProp, ...portalProps } = props;
+  const [mounted, setMounted] = React.useState(false);
+  useLayoutEffect(() => setMounted(true), []);
+  const container = containerProp || mounted && globalThis?.document?.body;
   return container ? ReactDOM.createPortal(/* @__PURE__ */ jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;

package/dist/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/Portal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PortalProps extends PrimitiveDivProps {\n  /**\n   * An optional container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n  const { container = globalThis?.document?.body, ...portalProps } = props;\n  return container\n    ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)\n    : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n  Portal,\n  //\n  Root,\n};\nexport type { PortalProps };\n"],
-  "mappings": ";AAAA,YAAY,WAAW;AACvB,OAAO,cAAc;AACrB,SAAS,iBAAiB;AAsBE;AAd5B,IAAM,cAAc;AAWpB,IAAM,SAAe,iBAAuC,CAAC,OAAO,iBAAiB;AACnF,QAAM,EAAE,YAAY,YAAY,UAAU,MAAM,GAAG,YAAY,IAAI;AACnE,SAAO,YACH,SAAS,aAAa,oBAAC,UAAU,KAAV,EAAe,GAAG,aAAa,KAAK,cAAc,GAAI,SAAS,IACtF;AACN,CAAC;AAED,OAAO,cAAc;AAIrB,IAAM,OAAO;",
+  "sourcesContent": ["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PortalProps extends PrimitiveDivProps {\n  /**\n   * An optional container where the portaled content should be appended.\n   */\n  container?: Element | null;\n}\n\nconst Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n  const { container: containerProp, ...portalProps } = props;\n  const [mounted, setMounted] = React.useState(false);\n  useLayoutEffect(() => setMounted(true), []);\n  const container = containerProp || (mounted && globalThis?.document?.body);\n  return container\n    ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)\n    : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n  Portal,\n  //\n  Root,\n};\nexport type { PortalProps };\n"],
+  "mappings": ";;;AAAA,YAAY,WAAW;AACvB,OAAO,cAAc;AACrB,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAyBJ;AAjB5B,IAAM,cAAc;AAWpB,IAAM,SAAe,iBAAuC,CAAC,OAAO,iBAAiB;AACnF,QAAM,EAAE,WAAW,eAAe,GAAG,YAAY,IAAI;AACrD,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,kBAAgB,MAAM,WAAW,IAAI,GAAG,CAAC,CAAC;AAC1C,QAAM,YAAY,iBAAkB,WAAW,YAAY,UAAU;AACrE,SAAO,YACH,SAAS,aAAa,oBAAC,UAAU,KAAV,EAAe,GAAG,aAAa,KAAK,cAAc,GAAI,SAAS,IACtF;AACN,CAAC;AAED,OAAO,cAAc;AAIrB,IAAM,OAAO;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ui/react-portal",
-  "version": "1.1.0-rc.1",
+  "version": "1.1.0-rc.2",
   "license": "MIT",
   "exports": {
     ".": {
@@ -28,7 +28,7 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@radix-ui/react-primitive": "1.1.0-rc.1"
+    "@radix-ui/react-primitive": "1.1.0-rc.2"
   },
   "peerDependencies": {
     "@types/react": "*",