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

package/uneditable-section/index.js

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