carbon-react/lib/components/portal/portal.js

A library of reusable React components for easily building user interfaces.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),n=require("styled-components"),o=require("../../__internal__/utils/helpers/guid/index.js"),s=require("../../style/themes/apply-base-theme.js"),a=require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js"),l=require("./portal.style.js"),d=require("./__internal__/portal.context.js");function i(e){return e&&e.__esModule?e:{default:e}}var u=i(r);const c=i(n).default.div.attrs(s.default).withConfig({displayName:"portal__Container",componentId:"sc-b50999fc-0"})(["",""],(({theme:e})=>n.css(["{position:relative;z-index:",";}"],e.zIndex.aboveAll))),p=({children:r,className:n,id:s,onReposition:i,inertOptOut:p})=>{const[m,f]=t.useState(null),v=t.useMemo((()=>o.default()),[]),{renderInRoot:x}=t.useContext(d.default);t.useEffect((()=>(i&&(i(),window.addEventListener("resize",i)),()=>{i&&window.removeEventListener("resize",i)})),[i]),t.useEffect((()=>()=>{null==m||m.remove()}),[]);const _=p?e.jsx(c,{children:r}):r;return e.jsx(l.default,{"data-role":"data-portal-entrance","data-portal-entrance":v,children:u.default.createPortal(e.jsx(a.default,{children:_}),(()=>{const e="carbon-portal";let t=m;if(!t&&void 0!==s&&document.getElementById(s))t=document.getElementById(s),f(t);else if(!t||0===document.getElementsByClassName(e).length){t=document.createElement("div"),t.classList.add(e),t.setAttribute("data-portal-exit",v),t.setAttribute("data-role","carbon-portal-exit"),void 0!==s&&t.setAttribute("id",s),p&&t.setAttribute("data-not-inert","true"),f(t);let r=document.body;const n=document.getElementById("root");n&&x&&(r=n),r.appendChild(t)}return n&&(t=(e=>(null==n||n.split(" ").forEach((t=>{null==e||e.classList.add(t)})),e))(t)),t})())})};exports.Portal=p,exports.default=p;