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

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

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