@lifesg/react-design-system 1.0.0-alpha.7 → 1.0.0-alpha.8

package/modal/index.js

@@ -36,7 +36,7 @@ import{jsx as C,jsxs as e}from"react/jsx-runtime";import t,{useState as n,useRef
             `,C.$disableTransition&&(e+=d`
                 transition: none;
             `),e}}
-`,c=({show:e=!1,rootId:l,onOverlayClick:d,children:c,backgroundOpacity:H,backgroundBlur:V=!0,disableTransition:v=!1,enableOverlayClick:h=!1,zIndex:p,id:f})=>{const[M,Z]=n(null),[y,g]=n(),m=o(),b=o(null),F=c&&t.cloneElement(c,{ref:b}),w=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";r((()=>{if(e){const C=k();if(R(C),!C){const C=setTimeout((()=>{x("add")}),200);return()=>clearTimeout(C)}}else if(!m.current){const C=setTimeout((()=>{x("add")}),200);return()=>clearTimeout(C)}}),[e]),r((()=>{Z(_());const C=k();return R(C),C||B(),()=>{x("remove")}}),[]);const R=C=>{m.current=C,g(C)},_=()=>document&&l?document.getElementById(l):document?document.body:null,k=()=>document.body.classList.contains(s),B=()=>{if(!document.getElementById(u)){const C=document.createElement("style");C.id=u;const e=document.documentElement.clientWidth,t=window.innerWidth-e;C.innerHTML=`\n\t\t\t\t.${s} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${t}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${s}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(C)}},x=C=>{const e=document.body.classList.contains(s);"add"!==C||e?"remove"===C&&e&&document.body.classList.remove(s):document.body.classList.add(s)},$=C=>{C.preventDefault();const e=b.current?.firstChild;e&&e.contains(C.target)||d&&h&&d()};return M?i.createPortal(C(L,{id:w,"data-testid":w,$show:e,zIndex:p,$stacked:y,children:c&&C(a,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:H||(y?.5:.8),$backgroundBlur:V,$disableTransition:v,$enableOverlayClick:h,onClick:$,children:F})}),M):null},u="lifesg-ds-overlay-stylesheet",s="lifesg-ds-overlay-open",H={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},V=C=>Object.keys(H).reduce(((e,t)=>{const n=H[t];return e[t]=`@media screen and (${C}: ${n}px)`,e}),{}),v=V("max-width"),h=(V("min-width"),l.div`
+`,c=({show:e=!1,rootId:l,onOverlayClick:d,children:c,backgroundOpacity:H,backgroundBlur:V=!0,disableTransition:v=!1,enableOverlayClick:h=!1,zIndex:p,id:f})=>{const[M,Z]=n(null),[y,g]=n(),m=o(),b=o(null),F=c&&t.cloneElement(c,{ref:b}),w=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";r((()=>{if(e){const C=k();if(R(C),!C){const C=setTimeout((()=>{x("add")}),200);return()=>clearTimeout(C)}}else if(!m.current){const C=setTimeout((()=>{x("remove")}),200);return()=>clearTimeout(C)}}),[e]),r((()=>{Z(_());const C=k();return R(C),C||B(),()=>{x("remove")}}),[]);const R=C=>{m.current=C,g(C)},_=()=>document&&l?document.getElementById(l):document?document.body:null,k=()=>document.body.classList.contains(s),B=()=>{if(!document.getElementById(u)){const C=document.createElement("style");C.id=u;const e=document.documentElement.clientWidth,t=window.innerWidth-e;C.innerHTML=`\n\t\t\t\t.${s} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${t}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${s}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(C)}},x=C=>{const e=document.body.classList.contains(s);"add"!==C||e?"remove"===C&&e&&document.body.classList.remove(s):document.body.classList.add(s)},$=C=>{C.preventDefault();const e=b.current?.firstChild;e&&e.contains(C.target)||d&&h&&d()};return M?i.createPortal(C(L,{id:w,"data-testid":w,$show:e,zIndex:p,$stacked:y,children:c&&C(a,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:H||(y?.5:.8),$backgroundBlur:V,$disableTransition:v,$enableOverlayClick:h,onClick:$,children:F})}),M):null},u="lifesg-ds-overlay-stylesheet",s="lifesg-ds-overlay-open",H={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},V=C=>Object.keys(H).reduce(((e,t)=>{const n=H[t];return e[t]=`@media screen and (${C}: ${n}px)`,e}),{}),v=V("max-width"),h=(V("min-width"),l.div`
     position: relative;
     display: flex;
     justify-content: center;