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

package/form/index.js

@@ -237,7 +237,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
             `,e.$disableTransition&&(t+=$`
                 transition: none;
             `),t}}
-`,ja=({show:e=!1,rootId:r,onOverlayClick:n,children:i,backgroundOpacity:l,backgroundBlur:c=!0,disableTransition:u=!1,enableOverlayClick:f=!1,zIndex:h,id:p})=>{const[g,m]=s(null),[b,y]=s(),[v]=s((()=>Dn.generate())),w=o(),x=o(null),_=i&&a.cloneElement(i,{ref:x}),$=p?`lifesg-ds-overlay-root-${p}`:"lifesg-ds-overlay-root";d((()=>(j(),m(k()),()=>F())),[]),d((()=>{if(e){const e=D();S(e),T();const t=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(t)}{F();const e=setTimeout((()=>{M().length<1&&C("remove")}),200);return()=>clearTimeout(e)}}),[e]);const S=e=>{w.current=e,y(e)},k=()=>document&&r?document.getElementById(r):document?document.body:null,D=()=>M().length>0,j=()=>{if(!document.getElementById(Ca)){const e=document.createElement("style");e.id=Ca;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Ma} {\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.${Ma}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},C=e=>{const t=document.body.classList.contains(Ma);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Ma):document.body.classList.add(Ma)},M=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},T=()=>{const e=M();document.body.dataset.lifesgDsOverlayOrder=[...e,v].join(",")},F=()=>{const e=M();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==v)).join(",")},E=e=>{var t;const r=null===(t=x.current)||void 0===t?void 0:t.firstChild;r&&r.contains(e.target)||n&&f&&(e.preventDefault(),n())};return g?O.createPortal(t(ka,Object.assign({id:$,"data-testid":$,$show:e,zIndex:h,$stacked:b},{children:i&&t(Da,Object.assign({"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:l||(b?.5:.8),$backgroundBlur:c,$disableTransition:u,$enableOverlayClick:f,onClick:E},{children:_}))})),g):null},Ca="lifesg-ds-overlay-stylesheet",Ma="lifesg-ds-overlay-open",Ta=e=>Object.keys(X).reduce(((t,r)=>{const n=X[r];return t[r]=`@media screen and (${e}: ${n}px)`,t}),{}),Fa=Ta("max-width"),Ea=(Ta("min-width"),X),Aa=_.div`
+`,ja=({show:e=!1,rootId:r,onOverlayClick:n,children:i,backgroundOpacity:l,backgroundBlur:c=!0,disableTransition:u=!1,enableOverlayClick:f=!1,zIndex:h,id:p})=>{const[g,m]=s(null),[b,y]=s(),[v]=s((()=>Dn.generate())),w=o(),x=o(null),_=i&&a.cloneElement(i,{ref:x}),$=p?`lifesg-ds-overlay-root-${p}`:"lifesg-ds-overlay-root";d((()=>(j(),m(k()),()=>{F(),M().length<1&&C("remove")})),[]),d((()=>{if(e){const e=D();S(e),T();const t=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(t)}{F();const e=setTimeout((()=>{M().length<1&&C("remove")}),200);return()=>clearTimeout(e)}}),[e]);const S=e=>{w.current=e,y(e)},k=()=>document&&r?document.getElementById(r):document?document.body:null,D=()=>M().length>0,j=()=>{if(!document.getElementById(Ca)){const e=document.createElement("style");e.id=Ca;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Ma} {\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.${Ma}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},C=e=>{const t=document.body.classList.contains(Ma);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Ma):document.body.classList.add(Ma)},M=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},T=()=>{const e=M();document.body.dataset.lifesgDsOverlayOrder=[...e,v].join(",")},F=()=>{const e=M();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==v)).join(",")},E=e=>{var t;const r=null===(t=x.current)||void 0===t?void 0:t.firstChild;r&&r.contains(e.target)||n&&f&&(e.preventDefault(),n())};return g?O.createPortal(t(ka,Object.assign({id:$,"data-testid":$,$show:e,zIndex:h,$stacked:b},{children:i&&t(Da,Object.assign({"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:l||(b?.5:.8),$backgroundBlur:c,$disableTransition:u,$enableOverlayClick:f,onClick:E},{children:_}))})),g):null},Ca="lifesg-ds-overlay-stylesheet",Ma="lifesg-ds-overlay-open",Ta=e=>Object.keys(X).reduce(((t,r)=>{const n=X[r];return t[r]=`@media screen and (${e}: ${n}px)`,t}),{}),Fa=Ta("max-width"),Ea=(Ta("min-width"),X),Aa=_.div`
     position: relative;
     display: flex;
     justify-content: center;