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

package/navbar/index.js

@@ -219,7 +219,7 @@ import{MenuIcon as t}from"@lifesg/react-icons/menu";import e,{css as n,keyframes
             `,t.$disableTransition&&(e+=n`
                 transition: none;
             `),e}}
-`,Ln=({show:t=!1,rootId:e,onOverlayClick:n,children:r,backgroundOpacity:a,backgroundBlur:o=!0,disableTransition:u=!1,enableOverlayClick:h=!1,zIndex:p,id:g})=>{const[m,y]=c(null),[b,v]=c(),[$]=c((()=>zn.generate())),w=d(),S=d(null),F=r&&s.cloneElement(r,{ref:S}),x=g?`lifesg-ds-overlay-root-${g}`:"lifesg-ds-overlay-root";l((()=>(A(),y(D()),()=>j())),[]),l((()=>{if(t){const t=k();B(t),E();const e=setTimeout((()=>{O("add")}),200);return()=>clearTimeout(e)}{j();const t=setTimeout((()=>{_().length<1&&O("remove")}),200);return()=>clearTimeout(t)}}),[t]);const B=t=>{w.current=t,v(t)},D=()=>document&&e?document.getElementById(e):document?document.body:null,k=()=>_().length>0,A=()=>{if(!document.getElementById(In)){const t=document.createElement("style");t.id=In;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${Wn} {\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.${Wn}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},O=t=>{const e=document.body.classList.contains(Wn);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(Wn):document.body.classList.add(Wn)},_=()=>{const t=document.body.dataset.lifesgDsOverlayOrder;return t?t.split(","):[]},E=()=>{const t=_();document.body.dataset.lifesgDsOverlayOrder=[...t,$].join(",")},j=()=>{const t=_();document.body.dataset.lifesgDsOverlayOrder=t.filter((t=>t!==$)).join(",")},H=t=>{var e;const r=null===(e=S.current)||void 0===e?void 0:e.firstChild;r&&r.contains(t.target)||n&&h&&(t.preventDefault(),n())};return m?f.createPortal(i(Nn,Object.assign({id:x,"data-testid":x,$show:t,zIndex:p,$stacked:b},{children:r&&i(Yn,Object.assign({"data-testid":"overlay-wrapper",$show:t,$backgroundOpacity:a||(b?.5:.8),$backgroundBlur:o,$disableTransition:u,$enableOverlayClick:h,onClick:H},{children:F}))})),m):null},In="lifesg-ds-overlay-stylesheet",Wn="lifesg-ds-overlay-open",Rn=e.a`
+`,Ln=({show:t=!1,rootId:e,onOverlayClick:n,children:r,backgroundOpacity:a,backgroundBlur:o=!0,disableTransition:u=!1,enableOverlayClick:h=!1,zIndex:p,id:g})=>{const[m,y]=c(null),[b,v]=c(),[$]=c((()=>zn.generate())),w=d(),S=d(null),F=r&&s.cloneElement(r,{ref:S}),x=g?`lifesg-ds-overlay-root-${g}`:"lifesg-ds-overlay-root";l((()=>(A(),y(D()),()=>{j(),_().length<1&&O("remove")})),[]),l((()=>{if(t){const t=k();B(t),E();const e=setTimeout((()=>{O("add")}),200);return()=>clearTimeout(e)}{j();const t=setTimeout((()=>{_().length<1&&O("remove")}),200);return()=>clearTimeout(t)}}),[t]);const B=t=>{w.current=t,v(t)},D=()=>document&&e?document.getElementById(e):document?document.body:null,k=()=>_().length>0,A=()=>{if(!document.getElementById(In)){const t=document.createElement("style");t.id=In;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${Wn} {\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.${Wn}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},O=t=>{const e=document.body.classList.contains(Wn);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(Wn):document.body.classList.add(Wn)},_=()=>{const t=document.body.dataset.lifesgDsOverlayOrder;return t?t.split(","):[]},E=()=>{const t=_();document.body.dataset.lifesgDsOverlayOrder=[...t,$].join(",")},j=()=>{const t=_();document.body.dataset.lifesgDsOverlayOrder=t.filter((t=>t!==$)).join(",")},H=t=>{var e;const r=null===(e=S.current)||void 0===e?void 0:e.firstChild;r&&r.contains(t.target)||n&&h&&(t.preventDefault(),n())};return m?f.createPortal(i(Nn,Object.assign({id:x,"data-testid":x,$show:t,zIndex:p,$stacked:b},{children:r&&i(Yn,Object.assign({"data-testid":"overlay-wrapper",$show:t,$backgroundOpacity:a||(b?.5:.8),$backgroundBlur:o,$disableTransition:u,$enableOverlayClick:h,onClick:H},{children:F}))})),m):null},In="lifesg-ds-overlay-stylesheet",Wn="lifesg-ds-overlay-open",Rn=e.a`
     display: flex;
     justify-content: center;
     height: 100%;