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

package/cjs/index.js

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