@lifesg/react-design-system 1.0.0-alpha.21 → 1.0.0-alpha.22

package/form/index.js

@@ -229,7 +229,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
             `,e.$disableTransition&&(t+=x`
                 transition: none;
             `),t}}
-`,Vr=({show:e=!1,rootId:t,onOverlayClick:n,children:a,backgroundOpacity:c,backgroundBlur:u=!0,disableTransition:d=!1,enableOverlayClick:h=!1,zIndex:p,id:f})=>{const[m,g]=o(null),[b,y]=o(),v=s(),w=s(null),x=a&&i.cloneElement(a,{ref:w}),$=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";l((()=>{if(e){const e=k();if(_(e),!e){const e=setTimeout((()=>{j("add")}),200);return()=>clearTimeout(e)}}else if(!v.current){const e=setTimeout((()=>{j("remove")}),200);return()=>clearTimeout(e)}}),[e]),l((()=>{g(C());const e=k();return _(e),e||O(),()=>{j("remove")}}),[]);const _=e=>{v.current=e,y(e)},C=()=>document&&t?document.getElementById(t):document?document.body:null,k=()=>document.body.classList.contains(Ur),O=()=>{if(!document.getElementById(Wr)){const e=document.createElement("style");e.id=Wr;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Ur} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${r}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.${Ur}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},j=e=>{const t=document.body.classList.contains(Ur);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Ur):document.body.classList.add(Ur)},M=e=>{e.preventDefault();const t=w.current?.firstChild;t&&t.contains(e.target)||n&&h&&n()};return m?S.createPortal(r(Hr,{id:$,"data-testid":$,$show:e,zIndex:p,$stacked:b,children:a&&r(Rr,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:c||(b?.5:.8),$backgroundBlur:u,$disableTransition:d,$enableOverlayClick:h,onClick:M,children:x})}),m):null},Wr="lifesg-ds-overlay-stylesheet",Ur="lifesg-ds-overlay-open",qr=e=>Object.keys(F).reduce(((t,r)=>{const n=F[r];return t[r]=`@media screen and (${e}: ${n}px)`,t}),{}),Qr=qr("max-width"),Yr=(qr("min-width"),w.div`
+`,Vr=({show:e=!1,rootId:t,onOverlayClick:n,children:a,backgroundOpacity:c,backgroundBlur:u=!0,disableTransition:d=!1,enableOverlayClick:h=!1,zIndex:p,id:f})=>{const[m,g]=o(null),[b,y]=o(),v=s(),w=s(null),x=a&&i.cloneElement(a,{ref:w}),$=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";l((()=>{if(e){const e=k();if(_(e),!e){const e=setTimeout((()=>{j("add")}),200);return()=>clearTimeout(e)}}else if(!v.current){const e=setTimeout((()=>{j("remove")}),200);return()=>clearTimeout(e)}}),[e]),l((()=>{g(C());const e=k();return _(e),e||O(),()=>{j("remove")}}),[]);const _=e=>{v.current=e,y(e)},C=()=>document&&t?document.getElementById(t):document?document.body:null,k=()=>document.body.classList.contains(Ur),O=()=>{if(!document.getElementById(Wr)){const e=document.createElement("style");e.id=Wr;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Ur} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${r}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.${Ur}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},j=e=>{const t=document.body.classList.contains(Ur);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Ur):document.body.classList.add(Ur)},M=e=>{const t=w.current?.firstChild;t&&t.contains(e.target)||n&&h&&(e.preventDefault(),n())};return m?S.createPortal(r(Hr,{id:$,"data-testid":$,$show:e,zIndex:p,$stacked:b,children:a&&r(Rr,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:c||(b?.5:.8),$backgroundBlur:u,$disableTransition:d,$enableOverlayClick:h,onClick:M,children:x})}),m):null},Wr="lifesg-ds-overlay-stylesheet",Ur="lifesg-ds-overlay-open",qr=e=>Object.keys(F).reduce(((t,r)=>{const n=F[r];return t[r]=`@media screen and (${e}: ${n}px)`,t}),{}),Qr=qr("max-width"),Yr=(qr("min-width"),w.div`
     position: relative;
     display: flex;
     justify-content: center;