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

package/index.js

@@ -1608,7 +1608,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
             `,e.$disableTransition&&(t+=css`
                 transition: none;
             `),t}}
-`,Overlay=({show:e=!1,rootId:t,onOverlayClick:r,children:n,backgroundOpacity:i,backgroundBlur:a=!0,disableTransition:o=!1,enableOverlayClick:s=!1,zIndex:l,id:c})=>{const[p,d]=useState(null),[u,h]=useState(),[f]=useState((()=>SimpleIdGenerator.generate())),m=useRef(),g=useRef(null),y=n&&React__default.cloneElement(n,{ref:g}),b=c?`lifesg-ds-overlay-root-${c}`:"lifesg-ds-overlay-root";useEffect((()=>(S(),d(x()),()=>T())),[]),useEffect((()=>{if(e){const e=_();v(e),w();const t=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(t)}{T();const e=setTimeout((()=>{$().length<1&&C("remove")}),200);return()=>clearTimeout(e)}}),[e]);const v=e=>{m.current=e,h(e)},x=()=>document&&t?document.getElementById(t):document?document.body:null,_=()=>$().length>0,S=()=>{if(!document.getElementById(STYLESHEET_ID)){const e=document.createElement("style");e.id=STYLESHEET_ID;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\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.${OVERLAY_OPEN_CLASSNAME}::-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(OVERLAY_OPEN_CLASSNAME);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(OVERLAY_OPEN_CLASSNAME):document.body.classList.add(OVERLAY_OPEN_CLASSNAME)},$=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},w=()=>{const e=$();document.body.dataset.lifesgDsOverlayOrder=[...e,f].join(",")},T=()=>{const e=$();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==f)).join(",")},k=e=>{var t;const n=null===(t=g.current)||void 0===t?void 0:t.firstChild;n&&n.contains(e.target)||r&&s&&(e.preventDefault(),r())};return p?ReactDOM.createPortal(jsx(Root,Object.assign({id:b,"data-testid":b,$show:e,zIndex:l,$stacked:u},{children:n&&jsx(Wrapper$l,Object.assign({"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:i||(u?.5:.8),$backgroundBlur:a,$disableTransition:o,$enableOverlayClick:s,onClick:k},{children:y}))})),p):null},STYLESHEET_ID="lifesg-ds-overlay-stylesheet",OVERLAY_OPEN_CLASSNAME="lifesg-ds-overlay-open",VISIBILITY_STYLE$1=e=>e?css`
+`,Overlay=({show:e=!1,rootId:t,onOverlayClick:r,children:n,backgroundOpacity:i,backgroundBlur:a=!0,disableTransition:o=!1,enableOverlayClick:s=!1,zIndex:l,id:c})=>{const[p,d]=useState(null),[u,h]=useState(),[f]=useState((()=>SimpleIdGenerator.generate())),m=useRef(),g=useRef(null),y=n&&React__default.cloneElement(n,{ref:g}),b=c?`lifesg-ds-overlay-root-${c}`:"lifesg-ds-overlay-root";useEffect((()=>(S(),d(x()),()=>{T(),$().length<1&&C("remove")})),[]),useEffect((()=>{if(e){const e=_();v(e),w();const t=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(t)}{T();const e=setTimeout((()=>{$().length<1&&C("remove")}),200);return()=>clearTimeout(e)}}),[e]);const v=e=>{m.current=e,h(e)},x=()=>document&&t?document.getElementById(t):document?document.body:null,_=()=>$().length>0,S=()=>{if(!document.getElementById(STYLESHEET_ID)){const e=document.createElement("style");e.id=STYLESHEET_ID;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\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.${OVERLAY_OPEN_CLASSNAME}::-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(OVERLAY_OPEN_CLASSNAME);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(OVERLAY_OPEN_CLASSNAME):document.body.classList.add(OVERLAY_OPEN_CLASSNAME)},$=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},w=()=>{const e=$();document.body.dataset.lifesgDsOverlayOrder=[...e,f].join(",")},T=()=>{const e=$();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==f)).join(",")},k=e=>{var t;const n=null===(t=g.current)||void 0===t?void 0:t.firstChild;n&&n.contains(e.target)||r&&s&&(e.preventDefault(),r())};return p?ReactDOM.createPortal(jsx(Root,Object.assign({id:b,"data-testid":b,$show:e,zIndex:l,$stacked:u},{children:n&&jsx(Wrapper$l,Object.assign({"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:i||(u?.5:.8),$backgroundBlur:a,$disableTransition:o,$enableOverlayClick:s,onClick:k},{children:y}))})),p):null},STYLESHEET_ID="lifesg-ds-overlay-stylesheet",OVERLAY_OPEN_CLASSNAME="lifesg-ds-overlay-open",VISIBILITY_STYLE$1=e=>e?css`
             right: 0;
             transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);
             transition-delay: 200ms;