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

package/file-upload/index.js

@@ -289,7 +289,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
             `,e.$disableTransition&&(t+=_`
                 transition: none;
             `),t}}
-`,xc=({show:e=!1,rootId:r,onOverlayClick:n,children:a,backgroundOpacity:o,backgroundBlur:l=!0,disableTransition:u=!1,enableOverlayClick:d=!1,zIndex:f,id:p})=>{const[h,m]=g(null),[b,y]=g(),[v]=g((()=>gc.generate())),w=s(),x=s(null),$=a&&i.cloneElement(a,{ref:x}),S=p?`lifesg-ds-overlay-root-${p}`:"lifesg-ds-overlay-root";c((()=>(k(),m(O()),()=>T())),[]),c((()=>{if(e){const e=D();_(e),A();const t=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(t)}{T();const e=setTimeout((()=>{E().length<1&&C("remove")}),200);return()=>clearTimeout(e)}}),[e]);const _=e=>{w.current=e,y(e)},O=()=>document&&r?document.getElementById(r):document?document.body:null,D=()=>E().length>0,k=()=>{if(!document.getElementById($c)){const e=document.createElement("style");e.id=$c;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Sc} {\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.${Sc}::-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(Sc);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Sc):document.body.classList.add(Sc)},E=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},A=()=>{const e=E();document.body.dataset.lifesgDsOverlayOrder=[...e,v].join(",")},T=()=>{const e=E();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==v)).join(",")},I=e=>{var t;const r=null===(t=x.current)||void 0===t?void 0:t.firstChild;r&&r.contains(e.target)||n&&d&&(e.preventDefault(),n())};return h?j.createPortal(t(vc,Object.assign({id:S,"data-testid":S,$show:e,zIndex:f,$stacked:b},{children:a&&t(wc,Object.assign({"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:o||(b?.5:.8),$backgroundBlur:l,$disableTransition:u,$enableOverlayClick:d,onClick:I},{children:$}))})),h):null},$c="lifesg-ds-overlay-stylesheet",Sc="lifesg-ds-overlay-open",_c=S.div`
+`,xc=({show:e=!1,rootId:r,onOverlayClick:n,children:a,backgroundOpacity:o,backgroundBlur:l=!0,disableTransition:u=!1,enableOverlayClick:d=!1,zIndex:f,id:p})=>{const[h,m]=g(null),[b,y]=g(),[v]=g((()=>gc.generate())),w=s(),x=s(null),$=a&&i.cloneElement(a,{ref:x}),S=p?`lifesg-ds-overlay-root-${p}`:"lifesg-ds-overlay-root";c((()=>(k(),m(O()),()=>{T(),E().length<1&&C("remove")})),[]),c((()=>{if(e){const e=D();_(e),A();const t=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(t)}{T();const e=setTimeout((()=>{E().length<1&&C("remove")}),200);return()=>clearTimeout(e)}}),[e]);const _=e=>{w.current=e,y(e)},O=()=>document&&r?document.getElementById(r):document?document.body:null,D=()=>E().length>0,k=()=>{if(!document.getElementById($c)){const e=document.createElement("style");e.id=$c;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Sc} {\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.${Sc}::-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(Sc);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Sc):document.body.classList.add(Sc)},E=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},A=()=>{const e=E();document.body.dataset.lifesgDsOverlayOrder=[...e,v].join(",")},T=()=>{const e=E();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==v)).join(",")},I=e=>{var t;const r=null===(t=x.current)||void 0===t?void 0:t.firstChild;r&&r.contains(e.target)||n&&d&&(e.preventDefault(),n())};return h?j.createPortal(t(vc,Object.assign({id:S,"data-testid":S,$show:e,zIndex:f,$stacked:b},{children:a&&t(wc,Object.assign({"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:o||(b?.5:.8),$backgroundBlur:l,$disableTransition:u,$enableOverlayClick:d,onClick:I},{children:$}))})),h):null},$c="lifesg-ds-overlay-stylesheet",Sc="lifesg-ds-overlay-open",_c=S.div`
     position: relative;
     display: flex;
     justify-content: center;