@lifesg/react-design-system 2.2.0-canary.6 → 2.2.0

package/modal/index.js

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