@cleartrip/ct-design-portal 4.0.0 → 5.1.0

package/README.md

@@ -0,0 +1,72 @@
+# Portal
+
+A component that renders its children in a different DOM node.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-portal
+# or
+pnpm add @cleartrip/ct-design-portal
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { Portal } from '@cleartrip/ct-design-portal';
+
+function Example() {
+  return (
+    <Portal>
+      {/* Basic usage */}
+    </Portal>
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | — | ✅ Yes | The content to be rendered inside the portal. |
+| `id` | `string` | — | ✅ Yes | Unique identifier for the portal instance. On native, this is used by the |
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { Portal } from 'yagami/core/components';
++ import { Portal } from '@cleartrip/ct-design-portal';
+```

package/dist/Host.d.ts

@@ -0,0 +1,3 @@
+declare const Host: () => import("react/jsx-runtime").JSX.Element | null;
+export default Host;
+//# sourceMappingURL=Host.d.ts.map

package/dist/Host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Host.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/Host.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,IAAI,sDAYT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/Portal.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { PortalProps } from './type';
-declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<any>>;
+import React from 'react';
+import { IPortalProps } from './type';
+declare const Portal: React.FC<IPortalProps>;
 export default Portal;
 //# sourceMappingURL=Portal.d.ts.map

package/dist/Portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGrC,QAAA,MAAM,MAAM,yEAqCV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAelC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Portal.native.d.ts

@@ -0,0 +1,4 @@
+import { IPortalProps } from './type';
+declare const Portal: ({ children, id }: IPortalProps) => null;
+export default Portal;
+//# sourceMappingURL=Portal.native.d.ts.map

package/dist/Portal.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.native.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/Portal.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,QAAA,MAAM,MAAM,GAAI,kBAAkB,YAAY,SAW7C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/PortalProvider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { IPortalContextProps } from './type';
+declare const PortalProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PortalProvider;
+export declare const usePortalContext: () => IPortalContextProps;
+//# sourceMappingURL=PortalProvider.d.ts.map

package/dist/PortalProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalProvider.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/PortalProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,SAAS,EAAqC,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,mBAAmB,EAAgB,MAAM,QAAQ,CAAC;AAI3D,QAAA,MAAM,cAAc,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAoB5D,CAAC;AAEF,eAAe,cAAc,CAAC;AAE9B,eAAO,MAAM,gBAAgB,2BAI5B,CAAC"}

package/dist/ct-design-portal.browser.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("react-dom"),n=require("@cleartrip/ct-design-use-isomorphic-effect");function u(e){return e&&e.__esModule?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=c(r),i=c(t),f=u(n),a=o.forwardRef((function(r,t){var n=r.children,u=r.container,c=r.disablePortal,a=o.useState(null),l=a[0],d=a[1];return f.default((function(){c||d(u||document.body)}),[u,c]),f.default((function(){if(l&&!c)return"function"==typeof t?t(l):t&&(t.current=l),function(){"function"==typeof t?t(l):t&&(t.current=null)}}),[t,l,c]),c?e.jsx(o.Fragment,{children:n}):i.createPortal(n,document.body)}));exports.Portal=a;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom");const n=t.createContext(null),o=()=>{const e=t.useContext(n);if(!e)throw new Error("Context out of scope");return e};exports.Portal=({children:n})=>{const o=t.useRef(!1);if(t.useEffect(()=>(o.current=!0,()=>{o.current=!1}),[]),!o.current)return e.jsx(e.Fragment,{children:n});const c=(null===document||void 0===document?void 0:document.getElementById("__next"))||document.body;return r.createPortal(n,c)},exports.PortalHost=()=>{const{componentList:r}=o()||{};return r&&0!==r.length?e.jsx(e.Fragment,{children:r.map(({id:r,children:n},o)=>e.jsx(t.Fragment,{children:n},`${r}-${o}`))}):null},exports.PortalProvider=({children:r})=>{const[o,c]=t.useState([]),l=t.useCallback(({children:e,id:t})=>{c(r=>[...r,{id:t,children:e}])},[]),u=t.useCallback(e=>{c(t=>t.filter(t=>t.id!==e))},[]),s=t.useCallback(()=>{c([])},[]);return e.jsx(n.Provider,{value:{componentList:o,addComponent:l,removeComponent:u,clearAll:s},children:r})},exports.usePortalContext=o;
 //# sourceMappingURL=ct-design-portal.browser.cjs.js.map

package/dist/ct-design-portal.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-portal.browser.cjs.js","sources":["../packages/components/Portal/src/Portal.tsx"],"sourcesContent":[null],"names":["Portal","React","forwardRef","_a","ref","children","container","disablePortal","_b","useState","mountNode","setMountNode","useIsomorphicEffect","document","body","current","_jsx","Fragment","ReactDOM","createPortal"],"mappings":"6fAKMA,EAASC,EAAMC,YAA6B,SAACC,EAAwCC,GAAtC,IAAAC,aAAUC,EAASH,EAAAG,UAAEC,EAAaJ,EAAAI,cAC/EC,EAA4BP,EAAMQ,SAAyB,MAA1DC,EAASF,EAAA,GAAEG,OA8BlB,OA1BAC,EAAAA,SAAoB,WACbL,GACHI,EAAaL,GAAaO,SAASC,KAEvC,GAAG,CAACR,EAAWC,IAEfK,EAAAA,SAAoB,WAClB,GAAIF,IAAcH,EAMhB,MALmB,mBAARH,EACTA,EAAIM,GACKN,IACTA,EAAIW,QAAUL,GAET,WACc,mBAARN,EACTA,EAAIM,GACKN,IACTA,EAAIW,QAAU,KAElB,CAEH,GAAE,CAACX,EAAKM,EAAWH,IAKhBA,EACKS,EAAAA,IAACf,EAAMgB,SAAU,CAAAZ,SAAAA,IAEnBa,EAASC,aAAad,EAAUQ,SAASC,KAGlD"}
+{"version":3,"file":"ct-design-portal.browser.cjs.js","sources":["../packages/components/Portal/src/Portal.tsx","../packages/components/Portal/src/PortalProvider.tsx","../packages/components/Portal/src/Host.tsx"],"sourcesContent":[null,null,null],"names":["PortalContext","createContext","usePortalContext","portals","useContext","Error","children","isMounted","useRef","useEffect","current","_jsx","jsx","_Fragment","Fragment","targetElement","document","getElementById","body","createPortal","componentList","length","map","id","index","setComponentList","useState","addComponent","useCallback","prevComponents","removeComponent","filter","componentsList","clearAll","Provider","value"],"mappings":"0FAMA,MCFMA,EAAgBC,EAAAA,cAA0C,MA0BnDC,EAAmB,KAC9B,MAAMC,EAAUC,aAAWJ,GAC3B,IAAKG,EAAS,MAAM,IAAIE,MAAM,wBAC9B,OAAOF,kBD3B8B,EAAGG,eACxC,MAAMC,EAAYC,UAAgB,GASlC,GAPAC,EAAAA,UAAU,KACRF,EAAUG,SAAU,EACb,KACLH,EAAUG,SAAU,IAErB,KAEEH,EAAUG,QAAS,OAAOC,EAAAC,IAAAC,EAAAC,SAAA,CAAAR,SAAGA,IAElC,MAAMS,GAAwB,OAARC,eAAA,IAAAA,cAAA,EAAAA,SAAUC,eAAe,YAAaD,SAASE,KAErE,OAAOC,EAAYA,aAACb,EAAUS,uBEfnB,KACX,MAAMK,cAAEA,GAAkBlB,KAAsB,CAAA,EAEhD,OAAKkB,GAA0C,IAAzBA,EAAcC,OAGlCV,MAAAE,EAAAA,SAAA,CAAAP,SACGc,EAAcE,IAAI,EAAGC,KAAIjB,YAA0BkB,IAClDb,EAAAA,IAACG,EAAQA,SAAyB,CAAAR,SAAAA,GAAnB,GAAGiB,KAAMC,QAL2B,6BDFpC,EAAGlB,eACxB,MAAOc,EAAeK,GAAoBC,EAAQA,SAAiB,IAE7DC,EAAeC,EAAWA,YAAC,EAAGtB,WAAUiB,SAC5CE,EAAkBI,GAAmB,IAAIA,EAAgB,CAAEN,KAAIjB,eAC9D,IAEGwB,EAAkBF,cAAaL,IACnCE,EAAkBI,GAAmBA,EAAeE,OAAQC,GAAmBA,EAAeT,KAAOA,KACpG,IAEGU,EAAWL,EAAAA,YAAY,KAC3BH,EAAiB,KAChB,IAEH,OACEd,MAACX,EAAckC,SAAS,CAAAC,MAAO,CAAEf,gBAAeO,eAAcG,kBAAiBG,YAC5E3B,SAAAA"}

package/dist/ct-design-portal.browser.esm.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import*as t from"react";import*as e from"react-dom";import o from"@cleartrip/ct-design-use-isomorphic-effect";var n=t.forwardRef((function(n,c){var i=n.children,f=n.container,u=n.disablePortal,a=t.useState(null),m=a[0],d=a[1];return o((function(){u||d(f||document.body)}),[f,u]),o((function(){if(m&&!u)return"function"==typeof c?c(m):c&&(c.current=m),function(){"function"==typeof c?c(m):c&&(c.current=null)}}),[c,m,u]),u?r(t.Fragment,{children:i}):e.createPortal(i,document.body)}));export{n as Portal};
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import{useRef as n,useEffect as t,createContext as o,useState as c,useCallback as d,useContext as i,Fragment as l}from"react";import{createPortal as m}from"react-dom";const u=({children:o})=>{const c=n(!1);if(t(()=>(c.current=!0,()=>{c.current=!1}),[]),!c.current)return r(e,{children:o});const d=(null===document||void 0===document?void 0:document.getElementById("__next"))||document.body;return m(o,d)},s=o(null),a=({children:e})=>{const[n,t]=c([]),o=d(({children:r,id:e})=>{t(n=>[...n,{id:e,children:r}])},[]),i=d(r=>{t(e=>e.filter(e=>e.id!==r))},[]),l=d(()=>{t([])},[]);return r(s.Provider,{value:{componentList:n,addComponent:o,removeComponent:i,clearAll:l},children:e})},h=()=>{const r=i(s);if(!r)throw new Error("Context out of scope");return r},p=()=>{const{componentList:n}=h()||{};return n&&0!==n.length?r(e,{children:n.map(({id:e,children:n},t)=>r(l,{children:n},`${e}-${t}`))}):null};export{u as Portal,p as PortalHost,a as PortalProvider,h as usePortalContext};
 //# sourceMappingURL=ct-design-portal.browser.esm.js.map

package/dist/ct-design-portal.browser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-portal.browser.esm.js","sources":["../packages/components/Portal/src/Portal.tsx"],"sourcesContent":[null],"names":["Portal","React","forwardRef","_a","ref","children","container","disablePortal","_b","useState","mountNode","setMountNode","useIsomorphicEffect","document","body","current","_jsx","Fragment","ReactDOM","createPortal"],"mappings":"sJAKM,IAAAA,EAASC,EAAMC,YAA6B,SAACC,EAAwCC,GAAtC,IAAAC,aAAUC,EAASH,EAAAG,UAAEC,EAAaJ,EAAAI,cAC/EC,EAA4BP,EAAMQ,SAAyB,MAA1DC,EAASF,EAAA,GAAEG,OA8BlB,OA1BAC,GAAoB,WACbL,GACHI,EAAaL,GAAaO,SAASC,KAEvC,GAAG,CAACR,EAAWC,IAEfK,GAAoB,WAClB,GAAIF,IAAcH,EAMhB,MALmB,mBAARH,EACTA,EAAIM,GACKN,IACTA,EAAIW,QAAUL,GAET,WACc,mBAARN,EACTA,EAAIM,GACKN,IACTA,EAAIW,QAAU,KAElB,CAEH,GAAE,CAACX,EAAKM,EAAWH,IAKhBA,EACKS,EAACf,EAAMgB,SAAU,CAAAZ,SAAAA,IAEnBa,EAASC,aAAad,EAAUQ,SAASC,KAGlD"}
+{"version":3,"file":"ct-design-portal.browser.esm.js","sources":["../packages/components/Portal/src/Portal.tsx","../packages/components/Portal/src/PortalProvider.tsx","../packages/components/Portal/src/Host.tsx"],"sourcesContent":[null,null,null],"names":["Portal","children","isMounted","useRef","useEffect","current","_jsx","_Fragment","targetElement","document","getElementById","body","createPortal","PortalContext","createContext","PortalProvider","componentList","setComponentList","useState","addComponent","useCallback","id","prevComponents","removeComponent","filter","componentsList","clearAll","Provider","value","usePortalContext","portals","useContext","Error","Host","length","map","index","Fragment"],"mappings":"6NAMA,MAAMA,EAAiC,EAAGC,eACxC,MAAMC,EAAYC,GAAgB,GASlC,GAPAC,EAAU,KACRF,EAAUG,SAAU,EACb,KACLH,EAAUG,SAAU,IAErB,KAEEH,EAAUG,QAAS,OAAOC,EAAAC,EAAA,CAAAN,SAAGA,IAElC,MAAMO,GAAwB,OAARC,eAAA,IAAAA,cAAA,EAAAA,SAAUC,eAAe,YAAaD,SAASE,KAErE,OAAOC,EAAaX,EAAUO,IChB1BK,EAAgBC,EAA0C,MAE1DC,EAAiB,EAAGd,eACxB,MAAOe,EAAeC,GAAoBC,EAAyB,IAE7DC,EAAeC,EAAY,EAAGnB,WAAUoB,SAC5CJ,EAAkBK,GAAmB,IAAIA,EAAgB,CAAED,KAAIpB,eAC9D,IAEGsB,EAAkBH,EAAaC,IACnCJ,EAAkBK,GAAmBA,EAAeE,OAAQC,GAAmBA,EAAeJ,KAAOA,KACpG,IAEGK,EAAWN,EAAY,KAC3BH,EAAiB,KAChB,IAEH,OACEX,EAACO,EAAcc,SAAS,CAAAC,MAAO,CAAEZ,gBAAeG,eAAcI,kBAAiBG,YAC5EzB,SAAAA,KAOM4B,EAAmB,KAC9B,MAAMC,EAAUC,EAAWlB,GAC3B,IAAKiB,EAAS,MAAM,IAAIE,MAAM,wBAC9B,OAAOF,GC5BHG,EAAO,KACX,MAAMjB,cAAEA,GAAkBa,KAAsB,CAAA,EAEhD,OAAKb,GAA0C,IAAzBA,EAAckB,OAGlC5B,EAAAC,EAAA,CAAAN,SACGe,EAAcmB,IAAI,EAAGd,KAAIpB,YAA0BmC,IAClD9B,EAAC+B,EAAiC,CAAApC,SAAAA,GAAnB,GAAGoB,KAAMe,QAL2B"}

package/dist/ct-design-portal.cjs.js

@@ -1,65 +1,53 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ReactDOM = require('react-dom');
-var useIsomorphicEffect = require('@cleartrip/ct-design-use-isomorphic-effect');
+var react = require('react');
+var reactDom = require('react-dom');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+const Portal = ({ children }) => {
+    const isMounted = react.useRef(false);
+    react.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    if (!isMounted.current)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    const targetElement = (document === null || document === void 0 ? void 0 : document.getElementById('__next')) || document.body;
+    return reactDom.createPortal(children, targetElement);
+};
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
+const PortalContext = react.createContext(null);
+const PortalProvider = ({ children }) => {
+    const [componentList, setComponentList] = react.useState([]);
+    const addComponent = react.useCallback(({ children, id }) => {
+        setComponentList((prevComponents) => [...prevComponents, { id, children }]);
+    }, []);
+    const removeComponent = react.useCallback((id) => {
+        setComponentList((prevComponents) => prevComponents.filter((componentsList) => componentsList.id !== id));
+    }, []);
+    const clearAll = react.useCallback(() => {
+        setComponentList([]);
+    }, []);
+    return (jsxRuntime.jsx(PortalContext.Provider, { value: { componentList, addComponent, removeComponent, clearAll }, children: children }));
+};
+const usePortalContext = () => {
+    const portals = react.useContext(PortalContext);
+    if (!portals)
+        throw new Error(`Context out of scope`);
+    return portals;
+};
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var useIsomorphicEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicEffect);
-
-var Portal = React__namespace.forwardRef(function (_a, ref) {
-    var children = _a.children, container = _a.container, disablePortal = _a.disablePortal;
-    var _b = React__namespace.useState(null), mountNode = _b[0], setMountNode = _b[1];
-    useIsomorphicEffect__default.default(function () {
-        if (!disablePortal) {
-            setMountNode(container || document.body);
-        }
-    }, [container, disablePortal]);
-    useIsomorphicEffect__default.default(function () {
-        if (mountNode && !disablePortal) {
-            if (typeof ref === 'function') {
-                ref(mountNode);
-            }
-            else if (ref) {
-                ref.current = mountNode;
-            }
-            return function () {
-                if (typeof ref === 'function') {
-                    ref(mountNode);
-                }
-                else if (ref) {
-                    ref.current = null;
-                }
-            };
-        }
-    }, [ref, mountNode, disablePortal]);
-    if (disablePortal) {
-        return jsxRuntime.jsx(React__namespace.Fragment, { children: children });
-    }
-    return ReactDOM__namespace.createPortal(children, document.body);
-});
+const Host = () => {
+    const { componentList } = usePortalContext() || {};
+    if (!componentList || componentList.length === 0)
+        return null;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: componentList.map(({ id, children }, index) => (jsxRuntime.jsx(react.Fragment, { children: children }, `${id}-${index}`))) }));
+};
 
 exports.Portal = Portal;
+exports.PortalHost = Host;
+exports.PortalProvider = PortalProvider;
+exports.usePortalContext = usePortalContext;
 //# sourceMappingURL=ct-design-portal.cjs.js.map

package/dist/ct-design-portal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-portal.cjs.js","sources":["../packages/components/Portal/src/Portal.tsx"],"sourcesContent":[null],"names":["React","useIsomorphicEffect","_jsx","ReactDOM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKM,IAAA,MAAM,GAAGA,gBAAK,CAAC,UAAU,CAAmB,UAAC,EAAsC,EAAE,GAAG,EAAA;AAAzC,IAAA,IAAA,QAAQ,cAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,CAAA;AAC/E,IAAA,IAAA,EAA4B,GAAAA,gBAAK,CAAC,QAAQ,CAAiB,IAAI,CAAC,EAA/D,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAAwC,CAAC;AAIvE,IAAAC,oCAAmB,CAAC,YAAA;QAClB,IAAI,CAAC,aAAa,EAAE;AAClB,YAAA,YAAY,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1C,SAAA;AACH,KAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;AAE/B,IAAAA,oCAAmB,CAAC,YAAA;AAClB,QAAA,IAAI,SAAS,IAAI,CAAC,aAAa,EAAE;AAC/B,YAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;gBAC7B,GAAG,CAAC,SAAS,CAAC,CAAC;AAChB,aAAA;AAAM,iBAAA,IAAI,GAAG,EAAE;AACd,gBAAA,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;AACzB,aAAA;YACD,OAAO,YAAA;AACL,gBAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,SAAS,CAAC,CAAC;AAChB,iBAAA;AAAM,qBAAA,IAAI,GAAG,EAAE;AACd,oBAAA,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AACpB,iBAAA;AACH,aAAC,CAAC;AACH,SAAA;KACF,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;AAKpC,IAAA,IAAI,aAAa,EAAE;AACjB,QAAA,OAAOC,eAACF,gBAAK,CAAC,QAAQ,EAAE,EAAA,QAAA,EAAA,QAAQ,GAAkB,CAAC;AACpD,KAAA;IACD,OAAOG,mBAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAGxD,CAAC;;;;"}
+{"version":3,"file":"ct-design-portal.cjs.js","sources":["../packages/components/Portal/src/Portal.tsx","../packages/components/Portal/src/PortalProvider.tsx","../packages/components/Portal/src/Host.tsx"],"sourcesContent":[null,null,null],"names":["useRef","useEffect","_jsx","_Fragment","createPortal","createContext","useState","useCallback","useContext","Fragment"],"mappings":";;;;;;AAMA,MAAM,MAAM,GAA2B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACtD,IAAA,MAAM,SAAS,GAAGA,YAAM,CAAU,KAAK,CAAC,CAAC;IAEzCC,eAAS,CAAC,MAAK;AACb,QAAA,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;AACzB,QAAA,OAAO,MAAK;AACV,YAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;AAC5B,SAAC,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,SAAS,CAAC,OAAO;QAAE,OAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,CAAC;AAE/C,IAAA,MAAM,aAAa,GAAG,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,CAAE,cAAc,CAAC,QAAQ,CAAC,KAAI,QAAQ,CAAC,IAAI,CAAC;AAE1E,IAAA,OAAOC,qBAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAC/C;;ACjBA,MAAM,aAAa,GAAGC,mBAAa,CAA6B,IAAI,CAAC,CAAC;AAEtE,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAA2B,KAAI;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAiB,EAAE,CAAC,CAAC;IAEvE,MAAM,YAAY,GAAGC,iBAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAgB,KAAI;AAClE,QAAA,gBAAgB,CAAC,CAAC,cAAc,KAAK,CAAC,GAAG,cAAc,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;KAC7E,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,eAAe,GAAGA,iBAAW,CAAC,CAAC,EAAU,KAAI;QACjD,gBAAgB,CAAC,CAAC,cAAc,KAAK,cAAc,CAAC,MAAM,CAAC,CAAC,cAAc,KAAK,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;KAC3G,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,QAAQ,GAAGA,iBAAW,CAAC,MAAK;QAChC,gBAAgB,CAAC,EAAE,CAAC,CAAC;KACtB,EAAE,EAAE,CAAC,CAAC;IAEP,QACEL,eAAC,aAAa,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,EACtF,QAAA,EAAA,QAAQ,EACc,CAAA,EACzB;AACJ,EAAE;AAIK,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,OAAO,GAAGM,gBAAU,CAAC,aAAa,CAAC,CAAC;AAC1C,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,CAAA,oBAAA,CAAsB,CAAC,CAAC;AACtD,IAAA,OAAO,OAAO,CAAC;AACjB;;AC7BM,MAAA,IAAI,GAAG,MAAK;IAChB,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,EAAE,IAAI,EAAE,CAAC;AAEnD,IAAA,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI,CAAC;AAE9D,IAAA,QACEN,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EACG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAgB,EAAE,KAAa,MAC/DD,cAAC,CAAAO,cAAQ,EAAyB,EAAA,QAAA,EAAA,QAAQ,IAA3B,CAAG,EAAA,EAAE,CAAI,CAAA,EAAA,KAAK,EAAE,CAAuB,CACvD,CAAC,EAAA,CACD,EACH;AACJ;;;;;;;"}

package/dist/ct-design-portal.esm.js

@@ -1,39 +1,48 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect, createContext, useState, useCallback, useContext, Fragment as Fragment$1 } from 'react';
+import { createPortal } from 'react-dom';
 
-var Portal = React.forwardRef(function (_a, ref) {
-    var children = _a.children, container = _a.container, disablePortal = _a.disablePortal;
-    var _b = React.useState(null), mountNode = _b[0], setMountNode = _b[1];
-    useIsomorphicEffect(function () {
-        if (!disablePortal) {
-            setMountNode(container || document.body);
-        }
-    }, [container, disablePortal]);
-    useIsomorphicEffect(function () {
-        if (mountNode && !disablePortal) {
-            if (typeof ref === 'function') {
-                ref(mountNode);
-            }
-            else if (ref) {
-                ref.current = mountNode;
-            }
-            return function () {
-                if (typeof ref === 'function') {
-                    ref(mountNode);
-                }
-                else if (ref) {
-                    ref.current = null;
-                }
-            };
-        }
-    }, [ref, mountNode, disablePortal]);
-    if (disablePortal) {
-        return jsx(React.Fragment, { children: children });
-    }
-    return ReactDOM.createPortal(children, document.body);
-});
+const Portal = ({ children }) => {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    if (!isMounted.current)
+        return jsx(Fragment, { children: children });
+    const targetElement = (document === null || document === void 0 ? void 0 : document.getElementById('__next')) || document.body;
+    return createPortal(children, targetElement);
+};
 
-export { Portal };
+const PortalContext = createContext(null);
+const PortalProvider = ({ children }) => {
+    const [componentList, setComponentList] = useState([]);
+    const addComponent = useCallback(({ children, id }) => {
+        setComponentList((prevComponents) => [...prevComponents, { id, children }]);
+    }, []);
+    const removeComponent = useCallback((id) => {
+        setComponentList((prevComponents) => prevComponents.filter((componentsList) => componentsList.id !== id));
+    }, []);
+    const clearAll = useCallback(() => {
+        setComponentList([]);
+    }, []);
+    return (jsx(PortalContext.Provider, { value: { componentList, addComponent, removeComponent, clearAll }, children: children }));
+};
+const usePortalContext = () => {
+    const portals = useContext(PortalContext);
+    if (!portals)
+        throw new Error(`Context out of scope`);
+    return portals;
+};
+
+const Host = () => {
+    const { componentList } = usePortalContext() || {};
+    if (!componentList || componentList.length === 0)
+        return null;
+    return (jsx(Fragment, { children: componentList.map(({ id, children }, index) => (jsx(Fragment$1, { children: children }, `${id}-${index}`))) }));
+};
+
+export { Portal, Host as PortalHost, PortalProvider, usePortalContext };
 //# sourceMappingURL=ct-design-portal.esm.js.map

package/dist/ct-design-portal.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-portal.esm.js","sources":["../packages/components/Portal/src/Portal.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAKM,IAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAAmB,UAAC,EAAsC,EAAE,GAAG,EAAA;AAAzC,IAAA,IAAA,QAAQ,cAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,CAAA;AAC/E,IAAA,IAAA,EAA4B,GAAA,KAAK,CAAC,QAAQ,CAAiB,IAAI,CAAC,EAA/D,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAAwC,CAAC;AAIvE,IAAA,mBAAmB,CAAC,YAAA;QAClB,IAAI,CAAC,aAAa,EAAE;AAClB,YAAA,YAAY,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1C,SAAA;AACH,KAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;AAE/B,IAAA,mBAAmB,CAAC,YAAA;AAClB,QAAA,IAAI,SAAS,IAAI,CAAC,aAAa,EAAE;AAC/B,YAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;gBAC7B,GAAG,CAAC,SAAS,CAAC,CAAC;AAChB,aAAA;AAAM,iBAAA,IAAI,GAAG,EAAE;AACd,gBAAA,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;AACzB,aAAA;YACD,OAAO,YAAA;AACL,gBAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,SAAS,CAAC,CAAC;AAChB,iBAAA;AAAM,qBAAA,IAAI,GAAG,EAAE;AACd,oBAAA,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AACpB,iBAAA;AACH,aAAC,CAAC;AACH,SAAA;KACF,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;AAKpC,IAAA,IAAI,aAAa,EAAE;AACjB,QAAA,OAAOA,IAAC,KAAK,CAAC,QAAQ,EAAE,EAAA,QAAA,EAAA,QAAQ,GAAkB,CAAC;AACpD,KAAA;IACD,OAAO,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAGxD,CAAC;;;;"}
+{"version":3,"file":"ct-design-portal.esm.js","sources":["../packages/components/Portal/src/Portal.tsx","../packages/components/Portal/src/PortalProvider.tsx","../packages/components/Portal/src/Host.tsx"],"sourcesContent":[null,null,null],"names":["_jsx","_Fragment","Fragment"],"mappings":";;;;AAMA,MAAM,MAAM,GAA2B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACtD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAEzC,SAAS,CAAC,MAAK;AACb,QAAA,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;AACzB,QAAA,OAAO,MAAK;AACV,YAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;AAC5B,SAAC,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,SAAS,CAAC,OAAO;QAAE,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,CAAC;AAE/C,IAAA,MAAM,aAAa,GAAG,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,CAAE,cAAc,CAAC,QAAQ,CAAC,KAAI,QAAQ,CAAC,IAAI,CAAC;AAE1E,IAAA,OAAO,YAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAC/C;;ACjBA,MAAM,aAAa,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEtE,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAA2B,KAAI;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAEvE,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAgB,KAAI;AAClE,QAAA,gBAAgB,CAAC,CAAC,cAAc,KAAK,CAAC,GAAG,cAAc,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;KAC7E,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,EAAU,KAAI;QACjD,gBAAgB,CAAC,CAAC,cAAc,KAAK,cAAc,CAAC,MAAM,CAAC,CAAC,cAAc,KAAK,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;KAC3G,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;QAChC,gBAAgB,CAAC,EAAE,CAAC,CAAC;KACtB,EAAE,EAAE,CAAC,CAAC;IAEP,QACED,IAAC,aAAa,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,EACtF,QAAA,EAAA,QAAQ,EACc,CAAA,EACzB;AACJ,EAAE;AAIK,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AAC1C,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,CAAA,oBAAA,CAAsB,CAAC,CAAC;AACtD,IAAA,OAAO,OAAO,CAAC;AACjB;;AC7BM,MAAA,IAAI,GAAG,MAAK;IAChB,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,EAAE,IAAI,EAAE,CAAC;AAEnD,IAAA,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI,CAAC;AAE9D,IAAA,QACEA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAgB,EAAE,KAAa,MAC/DD,GAAC,CAAAE,UAAQ,EAAyB,EAAA,QAAA,EAAA,QAAQ,IAA3B,CAAG,EAAA,EAAE,CAAI,CAAA,EAAA,KAAK,EAAE,CAAuB,CACvD,CAAC,EAAA,CACD,EACH;AACJ;;;;"}

package/dist/ct-design-portal.umd.js

@@ -1,66 +1,55 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('react-dom'), require('@cleartrip/ct-design-use-isomorphic-effect')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'react-dom', '@cleartrip/ct-design-use-isomorphic-effect'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemPortal = {}, global.jsxRuntime, global.React, global.ReactDOM, global.useIsomorphicEffect));
-})(this, (function (exports, jsxRuntime, React, ReactDOM, useIsomorphicEffect) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('react-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'react-dom'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemPortal = {}, global.jsxRuntime, global.React, global.reactDom));
+})(this, (function (exports, jsxRuntime, react, reactDom) { 'use strict';
 
-    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+    const Portal = ({ children }) => {
+        const isMounted = react.useRef(false);
+        react.useEffect(() => {
+            isMounted.current = true;
+            return () => {
+                isMounted.current = false;
+            };
+        }, []);
+        if (!isMounted.current)
+            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+        const targetElement = (document === null || document === void 0 ? void 0 : document.getElementById('__next')) || document.body;
+        return reactDom.createPortal(children, targetElement);
+    };
 
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n.default = e;
-        return Object.freeze(n);
-    }
+    const PortalContext = react.createContext(null);
+    const PortalProvider = ({ children }) => {
+        const [componentList, setComponentList] = react.useState([]);
+        const addComponent = react.useCallback(({ children, id }) => {
+            setComponentList((prevComponents) => [...prevComponents, { id, children }]);
+        }, []);
+        const removeComponent = react.useCallback((id) => {
+            setComponentList((prevComponents) => prevComponents.filter((componentsList) => componentsList.id !== id));
+        }, []);
+        const clearAll = react.useCallback(() => {
+            setComponentList([]);
+        }, []);
+        return (jsxRuntime.jsx(PortalContext.Provider, { value: { componentList, addComponent, removeComponent, clearAll }, children: children }));
+    };
+    const usePortalContext = () => {
+        const portals = react.useContext(PortalContext);
+        if (!portals)
+            throw new Error(`Context out of scope`);
+        return portals;
+    };
 
-    var React__namespace = /*#__PURE__*/_interopNamespace(React);
-    var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-    var useIsomorphicEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicEffect);
-
-    var Portal = React__namespace.forwardRef(function (_a, ref) {
-        var children = _a.children, container = _a.container, disablePortal = _a.disablePortal;
-        var _b = React__namespace.useState(null), mountNode = _b[0], setMountNode = _b[1];
-        useIsomorphicEffect__default.default(function () {
-            if (!disablePortal) {
-                setMountNode(container || document.body);
-            }
-        }, [container, disablePortal]);
-        useIsomorphicEffect__default.default(function () {
-            if (mountNode && !disablePortal) {
-                if (typeof ref === 'function') {
-                    ref(mountNode);
-                }
-                else if (ref) {
-                    ref.current = mountNode;
-                }
-                return function () {
-                    if (typeof ref === 'function') {
-                        ref(mountNode);
-                    }
-                    else if (ref) {
-                        ref.current = null;
-                    }
-                };
-            }
-        }, [ref, mountNode, disablePortal]);
-        if (disablePortal) {
-            return jsxRuntime.jsx(React__namespace.Fragment, { children: children });
-        }
-        return ReactDOM__namespace.createPortal(children, document.body);
-    });
+    const Host = () => {
+        const { componentList } = usePortalContext() || {};
+        if (!componentList || componentList.length === 0)
+            return null;
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: componentList.map(({ id, children }, index) => (jsxRuntime.jsx(react.Fragment, { children: children }, `${id}-${index}`))) }));
+    };
 
     exports.Portal = Portal;
+    exports.PortalHost = Host;
+    exports.PortalProvider = PortalProvider;
+    exports.usePortalContext = usePortalContext;
 
 }));
 //# sourceMappingURL=ct-design-portal.umd.js.map

package/dist/ct-design-portal.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-portal.umd.js","sources":["../packages/components/Portal/src/Portal.tsx"],"sourcesContent":[null],"names":["React","useIsomorphicEffect","_jsx","ReactDOM"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKM,QAAA,MAAM,GAAGA,gBAAK,CAAC,UAAU,CAAmB,UAAC,EAAsC,EAAE,GAAG,EAAA;IAAzC,IAAA,IAAA,QAAQ,cAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,CAAA;IAC/E,IAAA,IAAA,EAA4B,GAAAA,gBAAK,CAAC,QAAQ,CAAiB,IAAI,CAAC,EAA/D,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAAwC,CAAC;IAIvE,IAAAC,oCAAmB,CAAC,YAAA;YAClB,IAAI,CAAC,aAAa,EAAE;IAClB,YAAA,YAAY,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC1C,SAAA;IACH,KAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,IAAAA,oCAAmB,CAAC,YAAA;IAClB,QAAA,IAAI,SAAS,IAAI,CAAC,aAAa,EAAE;IAC/B,YAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,SAAS,CAAC,CAAC;IAChB,aAAA;IAAM,iBAAA,IAAI,GAAG,EAAE;IACd,gBAAA,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;IACzB,aAAA;gBACD,OAAO,YAAA;IACL,gBAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;wBAC7B,GAAG,CAAC,SAAS,CAAC,CAAC;IAChB,iBAAA;IAAM,qBAAA,IAAI,GAAG,EAAE;IACd,oBAAA,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,iBAAA;IACH,aAAC,CAAC;IACH,SAAA;SACF,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAKpC,IAAA,IAAI,aAAa,EAAE;IACjB,QAAA,OAAOC,eAACF,gBAAK,CAAC,QAAQ,EAAE,EAAA,QAAA,EAAA,QAAQ,GAAkB,CAAC;IACpD,KAAA;QACD,OAAOG,mBAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAGxD,CAAC;;;;;;;;"}
+{"version":3,"file":"ct-design-portal.umd.js","sources":["../packages/components/Portal/src/Portal.tsx","../packages/components/Portal/src/PortalProvider.tsx","../packages/components/Portal/src/Host.tsx"],"sourcesContent":[null,null,null],"names":["useRef","useEffect","_jsx","_Fragment","createPortal","createContext","useState","useCallback","useContext","Fragment"],"mappings":";;;;;;AAMA,UAAM,MAAM,GAA2B,CAAC,EAAE,QAAQ,EAAE,KAAI;IACtD,IAAA,MAAM,SAAS,GAAGA,YAAM,CAAU,KAAK,CAAC,CAAC;QAEzCC,eAAS,CAAC,MAAK;IACb,QAAA,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;IACzB,QAAA,OAAO,MAAK;IACV,YAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAC5B,SAAC,CAAC;SACH,EAAE,EAAE,CAAC,CAAC;QAEP,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,CAAC;IAE/C,IAAA,MAAM,aAAa,GAAG,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,CAAE,cAAc,CAAC,QAAQ,CAAC,KAAI,QAAQ,CAAC,IAAI,CAAC;IAE1E,IAAA,OAAOC,qBAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IAC/C;;ICjBA,MAAM,aAAa,GAAGC,mBAAa,CAA6B,IAAI,CAAC,CAAC;AAEtE,UAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAA2B,KAAI;QAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAiB,EAAE,CAAC,CAAC;QAEvE,MAAM,YAAY,GAAGC,iBAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAgB,KAAI;IAClE,QAAA,gBAAgB,CAAC,CAAC,cAAc,KAAK,CAAC,GAAG,cAAc,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;SAC7E,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,MAAM,eAAe,GAAGA,iBAAW,CAAC,CAAC,EAAU,KAAI;YACjD,gBAAgB,CAAC,CAAC,cAAc,KAAK,cAAc,CAAC,MAAM,CAAC,CAAC,cAAc,KAAK,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;SAC3G,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,MAAM,QAAQ,GAAGA,iBAAW,CAAC,MAAK;YAChC,gBAAgB,CAAC,EAAE,CAAC,CAAC;SACtB,EAAE,EAAE,CAAC,CAAC;QAEP,QACEL,eAAC,aAAa,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,EACtF,QAAA,EAAA,QAAQ,EACc,CAAA,EACzB;IACJ,EAAE;AAIK,UAAM,gBAAgB,GAAG,MAAK;IACnC,IAAA,MAAM,OAAO,GAAGM,gBAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAA,IAAI,CAAC,OAAO;IAAE,QAAA,MAAM,IAAI,KAAK,CAAC,CAAA,oBAAA,CAAsB,CAAC,CAAC;IACtD,IAAA,OAAO,OAAO,CAAC;IACjB;;AC7BM,UAAA,IAAI,GAAG,MAAK;QAChB,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,EAAE,IAAI,EAAE,CAAC;IAEnD,IAAA,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC;IAAE,QAAA,OAAO,IAAI,CAAC;IAE9D,IAAA,QACEN,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EACG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAgB,EAAE,KAAa,MAC/DD,cAAC,CAAAO,cAAQ,EAAyB,EAAA,QAAA,EAAA,QAAQ,IAA3B,CAAG,EAAA,EAAE,CAAI,CAAA,EAAA,KAAK,EAAE,CAAuB,CACvD,CAAC,EAAA,CACD,EACH;IACJ;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Portal } from './Portal';
-export * from './type';
+export { default as PortalProvider, usePortalContext } from './PortalProvider';
+export { default as PortalHost } from './Host';
+export type * from './type';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC/C,mBAAmB,QAAQ,CAAC"}

package/dist/index.native.d.ts

@@ -0,0 +1,5 @@
+export { default as Portal } from './Portal.native';
+export { default as PortalProvider, usePortalContext } from './PortalProvider';
+export { default as PortalHost } from './Host';
+export type * from './type';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC/C,mBAAmB,QAAQ,CAAC"}

package/dist/type.d.ts

@@ -1,7 +1,12 @@
-import * as React from 'react';
-export interface PortalProps {
-    children?: React.ReactNode;
-    container?: Element;
-    disablePortal?: boolean;
+import { ReactNode } from 'react';
+export interface IPortalProps {
+    children: ReactNode;
+    id: string;
+}
+export interface IPortalContextProps {
+    componentList: IPortalProps[];
+    addComponent: ({ children, id }: IPortalProps) => void;
+    removeComponent: (id: string) => void;
+    clearAll: () => void;
 }
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAI1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAI3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Portal/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAI3B,QAAQ,EAAE,SAAS,CAAC;IAKpB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAIlC,aAAa,EAAE,YAAY,EAAE,CAAC;IAI9B,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IAIvD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAItC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/package.json

@@ -1,27 +1,37 @@
 {
   "name": "@cleartrip/ct-design-portal",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "description": "Portal Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-portal.cjs.js",
+  "main": "./dist/ct-design-portal.cjs.js",
   "jsnext:main": "dist/ct-design-portal.esm.js",
   "module": "dist/ct-design-portal.esm.js",
+  "react-native": "src/index.native.ts",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-portal.esm.js",
+      "default": "./dist/ct-design-portal.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-portal.esm.js": "./dist/ct-design-portal.browser.esm.js",
     "./dist/ct-design-portal.cjs.js": "./dist/ct-design-portal.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-use-isomorphic-effect": "4.0.0"
+    "@cleartrip/ct-design-theme": "5.1.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -32,6 +42,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Host.tsx

@@ -0,0 +1,20 @@
+import React, { Fragment } from 'react';
+
+import { usePortalContext } from './PortalProvider';
+import { IPortalProps } from './type';
+
+const Host = () => {
+  const { componentList } = usePortalContext() || {};
+
+  if (!componentList || componentList.length === 0) return null;
+
+  return (
+    <>
+      {componentList.map(({ id, children }: IPortalProps, index: number) => (
+        <Fragment key={`${id}-${index}`}>{children}</Fragment>
+      ))}
+    </>
+  );
+};
+
+export default Host;

package/src/Portal.native.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+import { usePortalContext } from './PortalProvider';
+import { IPortalProps } from './type';
+
+const Portal = ({ children, id }: IPortalProps) => {
+  const { addComponent, removeComponent } = usePortalContext() || {};
+
+  useEffect(() => {
+    addComponent?.({ children, id });
+    return () => {
+      removeComponent?.(id);
+    };
+  }, [addComponent, children, id, removeComponent]);
+
+  return null;
+};
+
+export default Portal;

package/src/Portal.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from 'react';
+
+import { createPortal } from 'react-dom';
+
+import { IPortalProps } from './type';
+
+const Portal: React.FC<IPortalProps> = ({ children }) => {
+  const isMounted = useRef<boolean>(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  if (!isMounted.current) return <>{children}</>;
+
+  const targetElement = document?.getElementById('__next') || document.body;
+
+  return createPortal(children, targetElement);
+};
+
+export default Portal;

package/src/PortalProvider.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, ReactNode, useCallback, useContext, useState } from 'react';
+
+import { IPortalContextProps, IPortalProps } from './type';
+
+const PortalContext = createContext<IPortalContextProps | null>(null);
+
+const PortalProvider = ({ children }: { children: ReactNode }) => {
+  const [componentList, setComponentList] = useState<IPortalProps[]>([]);
+
+  const addComponent = useCallback(({ children, id }: IPortalProps) => {
+    setComponentList((prevComponents) => [...prevComponents, { id, children }]);
+  }, []);
+
+  const removeComponent = useCallback((id: string) => {
+    setComponentList((prevComponents) => prevComponents.filter((componentsList) => componentsList.id !== id));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setComponentList([]);
+  }, []);
+
+  return (
+    <PortalContext.Provider value={{ componentList, addComponent, removeComponent, clearAll }}>
+      {children}
+    </PortalContext.Provider>
+  );
+};
+
+export default PortalProvider;
+
+export const usePortalContext = () => {
+  const portals = useContext(PortalContext);
+  if (!portals) throw new Error(`Context out of scope`);
+  return portals;
+};

package/src/index.native.ts

@@ -0,0 +1,4 @@
+export { default as Portal } from './Portal.native';
+export { default as PortalProvider, usePortalContext } from './PortalProvider';
+export { default as PortalHost } from './Host';
+export type * from './type';

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as Portal } from './Portal';
+export { default as PortalProvider, usePortalContext } from './PortalProvider';
+export { default as PortalHost } from './Host';
+export type * from './type';

package/src/type.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+export interface IPortalProps {
+  /**
+   * The content to be rendered inside the portal.
+   */
+  children: ReactNode;
+  /**
+   * Unique identifier for the portal instance. On native, this is used by the
+   * PortalProvider to register/unregister the portal from the Host.
+   */
+  id: string;
+}
+
+export interface IPortalContextProps {
+  /**
+   * List of currently mounted portal entries.
+   */
+  componentList: IPortalProps[];
+  /**
+   * Register a portal entry with the host.
+   */
+  addComponent: ({ children, id }: IPortalProps) => void;
+  /**
+   * Remove a portal entry by its id.
+   */
+  removeComponent: (id: string) => void;
+  /**
+   * Remove every registered portal entry.
+   */
+  clearAll: () => void;
+}