@lifesg/react-design-system 1.0.0-alpha.7 → 1.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +14 -7
- package/cjs/index.js.map +1 -1
- package/form/index.js +50 -43
- package/form/index.js.map +1 -1
- package/index.js +14 -7
- package/index.js.map +1 -1
- package/input-group/index.js +16 -9
- package/input-group/index.js.map +1 -1
- package/modal/index.js +1 -1
- package/modal/index.js.map +1 -1
- package/navbar/index.js +1 -1
- package/navbar/index.js.map +1 -1
- package/overlay/index.js +1 -1
- package/overlay/index.js.map +1 -1
- package/package.json +1 -1
- package/popover/index.js +1 -1
- package/popover/index.js.map +1 -1
- package/timepicker/index.js +3 -3
- package/timepicker/index.js.map +1 -1
package/overlay/index.js
CHANGED
|
@@ -36,5 +36,5 @@ import{jsx as t}from"react/jsx-runtime";import e,{useState as n,useRef as i,useE
|
|
|
36
36
|
`,t.$disableTransition&&(e+=s`
|
|
37
37
|
transition: none;
|
|
38
38
|
`),e}}
|
|
39
|
-
`,c=({show:d=!1,rootId:s,onOverlayClick:c,children:b,backgroundOpacity:y,backgroundBlur:h=!0,disableTransition:p=!1,enableOverlayClick:v=!1,zIndex:$,id:f})=>{const[g,w]=n(null),[k,x]=n(),T=i(),C=i(null),I=b&&e.cloneElement(b,{ref:C}),O=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";o((()=>{if(d){const t=L();if(B(t),!t){const t=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(t)}}else if(!T.current){const t=setTimeout((()=>{W("
|
|
39
|
+
`,c=({show:d=!1,rootId:s,onOverlayClick:c,children:b,backgroundOpacity:y,backgroundBlur:h=!0,disableTransition:p=!1,enableOverlayClick:v=!1,zIndex:$,id:f})=>{const[g,w]=n(null),[k,x]=n(),T=i(),C=i(null),I=b&&e.cloneElement(b,{ref:C}),O=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";o((()=>{if(d){const t=L();if(B(t),!t){const t=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(t)}}else if(!T.current){const t=setTimeout((()=>{W("remove")}),200);return()=>clearTimeout(t)}}),[d]),o((()=>{w(E());const t=L();return B(t),t||z(),()=>{W("remove")}}),[]);const B=t=>{T.current=t,x(t)},E=()=>document&&s?document.getElementById(s):document?document.body:null,L=()=>document.body.classList.contains(m),z=()=>{if(!document.getElementById(u)){const t=document.createElement("style");t.id=u;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${m} {\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.${m}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},W=t=>{const e=document.body.classList.contains(m);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(m):document.body.classList.add(m)},j=t=>{t.preventDefault();const e=C.current?.firstChild;e&&e.contains(t.target)||c&&v&&c()};return g?r.createPortal(t(l,{id:O,"data-testid":O,$show:d,zIndex:$,$stacked:k,children:b&&t(a,{"data-testid":"overlay-wrapper",$show:d,$backgroundOpacity:y||(k?.5:.8),$backgroundBlur:h,$disableTransition:p,$enableOverlayClick:v,onClick:j,children:I})}),g):null},u="lifesg-ds-overlay-stylesheet",m="lifesg-ds-overlay-open";export{c as Overlay};
|
|
40
40
|
//# sourceMappingURL=index.js.map
|
package/overlay/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/overlay/overlay.styles.tsx","../../src/overlay/overlay.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { StyleProps } from \"./types\";\n\nconst getBackdropFilter = (blur: boolean) => {\n let styleString = \"\";\n\n if (blur) {\n styleString += \"blur(10px)\";\n }\n\n return styleString.length > 0 ? styleString : \"none\";\n};\n\nexport const Root = styled.div<StyleProps>`\n position: fixed;\n left: 0;\n top: 0;\n height: 0;\n width: 0;\n visibility: hidden;\n z-index: ${(props) => {\n return props.zIndex || (props.$stacked ? 99999 : 99998);\n }};\n\n ${(props) => {\n if (props.$show) {\n return css`\n height: 100%;\n width: 100vw;\n visibility: visible;\n `;\n }\n }}\n`;\n\nexport const Wrapper = styled.div<StyleProps>`\n position: absolute;\n left: 0;\n top: 0;\n background-color: rgba(5, 1, 1, ${(props) => props.$backgroundOpacity});\n backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};\n transition: opacity 200ms ease;\n\n ${(props) => {\n let customStyles = \"\";\n if (props.$show) {\n customStyles += css`\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n height: 100%;\n width: 100vw;\n `;\n } else {\n customStyles += css`\n visibility: hidden;\n opacity: 0;\n transition-delay: ${props.$disableTransition ? \"0ms\" : \"400ms\"};\n pointer-events: none;\n height: 0;\n width: 0;\n `;\n }\n if (props.$disableTransition) {\n customStyles += css`\n transition: none;\n `;\n }\n\n return customStyles;\n }}\n`;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { OverlayProps } from \"./types\";\nimport { Root, Wrapper } from \"./overlay.styles\";\n\nexport const Overlay = ({\n show = false,\n rootId,\n onOverlayClick,\n children,\n backgroundOpacity,\n backgroundBlur = true,\n disableTransition = false,\n enableOverlayClick = false,\n zIndex,\n id,\n}: OverlayProps): JSX.Element | null => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n const [isStacked, _setIsStacked] = useState<boolean>();\n\n const stacked = useRef<boolean>();\n\n const childRef = useRef<HTMLDivElement>(null);\n const childWithRef =\n children && React.cloneElement(children, { ref: childRef });\n\n const overlayRootId = id\n ? `lifesg-ds-overlay-root-${id}`\n : \"lifesg-ds-overlay-root\";\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (show) {\n const isStacked = checkIfStacked();\n setStacked(isStacked);\n\n if (!isStacked) {\n const timerId = setTimeout(() => {\n applyBodyStyleClass(\"add\");\n }, 200); // Allow overlay animations to complete\n return () => clearTimeout(timerId);\n }\n } else {\n /**\n * Here we have to used the ref value to know if it is stacked\n * rather than checking for the presence of the overlay class\n * on <body>\n */\n if (!stacked.current) {\n const timerId = setTimeout(() => {\n applyBodyStyleClass(\"add\");\n }, 200); // Allow overlay animations to complete\n return () => clearTimeout(timerId);\n }\n }\n }, [show]);\n\n useEffect(() => {\n setRootElement(getRootElement());\n\n /**\n * Only add stylesheet for a non-stacked overlay\n */\n const isStacked = checkIfStacked();\n setStacked(isStacked);\n if (!isStacked) addStylesheetForDocumentBody();\n\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n // =============================================================================\n // REF FUNCTIONS\n // =============================================================================\n const setStacked = (data: boolean) => {\n stacked.current = data;\n _setIsStacked(data);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getRootElement = (): HTMLElement | null => {\n if (document && rootId) {\n return document.getElementById(rootId);\n } else if (document) {\n // If rootId not specified, we'll use body\n return document.body;\n } else {\n return null;\n }\n };\n\n const checkIfStacked = () => {\n /**\n * Check if the body style was altered before. If it was, then this is\n * a stacked overlay\n */\n return document.body.classList.contains(OVERLAY_OPEN_CLASSNAME);\n };\n\n const addStylesheetForDocumentBody = () => {\n /**\n * This stylesheet is to manipulate the <body>. We only add once\n */\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}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`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n /**\n * This sets the style of <body> to hide the scrollbar\n */\n const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n OVERLAY_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n\n const modal = childRef.current?.firstChild;\n if (modal && (modal as any).contains(event.target)) {\n return;\n } else if (onOverlayClick && enableOverlayClick) {\n onOverlayClick();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderWrapper = () => (\n <Wrapper\n data-testid={\"overlay-wrapper\"}\n $show={show}\n $backgroundOpacity={backgroundOpacity || (isStacked ? 0.5 : 0.8)}\n $backgroundBlur={backgroundBlur}\n $disableTransition={disableTransition}\n $enableOverlayClick={enableOverlayClick}\n onClick={handleWrapperClick}\n >\n {childWithRef}\n </Wrapper>\n );\n\n const renderComponent = () => (\n <Root\n id={overlayRootId}\n data-testid={overlayRootId}\n $show={show}\n zIndex={zIndex}\n $stacked={isStacked}\n >\n {children && renderWrapper()}\n </Root>\n );\n\n return rootElement\n ? ReactDOM.createPortal(renderComponent(), rootElement)\n : null;\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\n"],"names":["Root","styled","div","props","zIndex","$stacked","$show","css","Wrapper","$backgroundOpacity","blur","styleString","length","getBackdropFilter","$backgroundBlur","customStyles","$disableTransition","Overlay","show","rootId","onOverlayClick","children","backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","id","rootElement","setRootElement","useState","isStacked","_setIsStacked","stacked","useRef","childRef","childWithRef","React","cloneElement","ref","overlayRootId","useEffect","checkIfStacked","setStacked","timerId","setTimeout","applyBodyStyleClass","clearTimeout","current","getRootElement","addStylesheetForDocumentBody","data","document","getElementById","body","classList","contains","OVERLAY_OPEN_CLASSNAME","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","appendChild","action","isOverlayStyleClassApplied","remove","add","handleWrapperClick","event","preventDefault","modal","firstChild","target","ReactDOM","createPortal","_jsx","$enableOverlayClick","onClick"],"mappings":"2KAGA,MAUaA,EAAOC,EAAOC,GAAe;;;;;;;eAO1BC,GACDA,EAAMC,SAAWD,EAAME,SAAW,MAAQ;;MAGlDF,IACC,GAAIA,EAAMG,MACN,OAAOC,CAAG;;;;;EASTC,EAAUP,EAAOC,GAAe;;;;sCAINC,GAAUA,EAAMM;uBAC/BN,GArCE,CAACO,IACvB,IAAIC,EAAc,GAMlB,OAJID,IACAC,GAAe,cAGZA,EAAYC,OAAS,EAAID,EAAc,QA8BhBE,CAAkBV,EAAMW;;;MAGnDX,IACC,IAAIY,EAAe,GAyBnB,OAxBIZ,EAAMG,MACNS,GAAgBR,CAAG;;;;;;cAQnBQ,GAAgBR,CAAG;;;oCAGKJ,EAAMa,mBAAqB,MAAQ;;;;cAM3Db,EAAMa,qBACND,GAAgBR,CAAG;;eAKhBQ;EChEFE,EAAU,EACnBC,QAAO,EACPC,SACAC,iBACAC,WACAC,oBACAC,kBAAiB,EACjBC,qBAAoB,EACpBC,sBAAqB,EACrBrB,SACAsB,SAKA,MAAOC,EAAaC,GAAkBC,EAA6B,OAC5DC,EAAWC,GAAiBF,IAE7BG,EAAUC,IAEVC,EAAWD,EAAuB,MAClCE,EACFd,GAAYe,EAAMC,aAAahB,EAAU,CAAEiB,IAAKJ,IAE9CK,EAAgBb,EAChB,0BAA0BA,IAC1B,yBAKNc,GAAU,KACN,GAAItB,EAAM,CACN,MAAMY,EAAYW,IAGlB,GAFAC,EAAWZ,IAENA,EAAW,CACZ,MAAMa,EAAUC,YAAW,KACvBC,EAAoB,SACrB,KACH,MAAO,IAAMC,aAAaH,SAQ9B,IAAKX,EAAQe,QAAS,CAClB,MAAMJ,EAAUC,YAAW,KACvBC,EAAoB,SACrB,KACH,MAAO,IAAMC,aAAaH,MAGnC,CAACzB,IAEJsB,GAAU,KACNZ,EAAeoB,KAKf,MAAMlB,EAAYW,IAIlB,OAHAC,EAAWZ,GACNA,GAAWmB,IAET,KACHJ,EAAoB,aAEzB,IAKH,MAAMH,EAAcQ,IAChBlB,EAAQe,QAAUG,EAClBnB,EAAcmB,IAMZF,EAAiB,IACfG,UAAYhC,EACLgC,SAASC,eAAejC,GACxBgC,SAEAA,SAASE,KAET,KAITZ,EAAiB,IAKZU,SAASE,KAAKC,UAAUC,SAASC,GAGtCP,EAA+B,KAIjC,IAAKE,SAASC,eAAeK,GAAgB,CACzC,MAAMC,EAAoBP,SAASQ,cAAc,SACjDD,EAAkBhC,GAAK+B,EAEvB,MAAMG,EAAgBT,SAASU,gBAAgBC,YAEzCC,EADcC,OAAOC,WACUL,EAErCF,EAAkBQ,UAAY,cACnCV,8DAEeO,iHAKfP,sEAKKL,SAASE,KAAKc,YAAYT,KAO5Bb,EAAuBuB,IACzB,MAAMC,EAA6BlB,SAASE,KAAKC,UAAUC,SACvDC,GAGW,QAAXY,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BlB,SAASE,KAAKC,UAAUgB,OAAOd,GAF/BL,SAASE,KAAKC,UAAUiB,IAAIf,IAS9BgB,EAAsBC,IACxBA,EAAMC,iBAEN,MAAMC,EAAQzC,EAASa,SAAS6B,WAC5BD,GAAUA,EAAcpB,SAASkB,EAAMI,SAEhCzD,GAAkBK,GACzBL,KAiCR,OAAOO,EACDmD,EAASC,aAZXC,EAAChF,EACG,CAAA0B,GAAIa,EACS,cAAAA,EACNjC,MAAAY,EACPd,OAAQA,EACEC,SAAAyB,EAETT,SAAAA,GArBL2D,EAACxE,EAAO,CAAA,cACS,kBAAiBF,MACvBY,EACaT,mBAAAa,IAAsBQ,EAAY,GAAM,IAC3ChB,gBAAAS,qBACGC,EAAiByD,oBAChBxD,EACrByD,QAASV,WAERrC,MAiBsCR,GACzC,MAMJ8B,EAAgB,+BAChBD,EAAyB"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/overlay/overlay.styles.tsx","../../src/overlay/overlay.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { StyleProps } from \"./types\";\n\nconst getBackdropFilter = (blur: boolean) => {\n let styleString = \"\";\n\n if (blur) {\n styleString += \"blur(10px)\";\n }\n\n return styleString.length > 0 ? styleString : \"none\";\n};\n\nexport const Root = styled.div<StyleProps>`\n position: fixed;\n left: 0;\n top: 0;\n height: 0;\n width: 0;\n visibility: hidden;\n z-index: ${(props) => {\n return props.zIndex || (props.$stacked ? 99999 : 99998);\n }};\n\n ${(props) => {\n if (props.$show) {\n return css`\n height: 100%;\n width: 100vw;\n visibility: visible;\n `;\n }\n }}\n`;\n\nexport const Wrapper = styled.div<StyleProps>`\n position: absolute;\n left: 0;\n top: 0;\n background-color: rgba(5, 1, 1, ${(props) => props.$backgroundOpacity});\n backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};\n transition: opacity 200ms ease;\n\n ${(props) => {\n let customStyles = \"\";\n if (props.$show) {\n customStyles += css`\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n height: 100%;\n width: 100vw;\n `;\n } else {\n customStyles += css`\n visibility: hidden;\n opacity: 0;\n transition-delay: ${props.$disableTransition ? \"0ms\" : \"400ms\"};\n pointer-events: none;\n height: 0;\n width: 0;\n `;\n }\n if (props.$disableTransition) {\n customStyles += css`\n transition: none;\n `;\n }\n\n return customStyles;\n }}\n`;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { OverlayProps } from \"./types\";\nimport { Root, Wrapper } from \"./overlay.styles\";\n\nexport const Overlay = ({\n show = false,\n rootId,\n onOverlayClick,\n children,\n backgroundOpacity,\n backgroundBlur = true,\n disableTransition = false,\n enableOverlayClick = false,\n zIndex,\n id,\n}: OverlayProps): JSX.Element | null => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n const [isStacked, _setIsStacked] = useState<boolean>();\n\n const stacked = useRef<boolean>();\n\n const childRef = useRef<HTMLDivElement>(null);\n const childWithRef =\n children && React.cloneElement(children, { ref: childRef });\n\n const overlayRootId = id\n ? `lifesg-ds-overlay-root-${id}`\n : \"lifesg-ds-overlay-root\";\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (show) {\n const isStacked = checkIfStacked();\n setStacked(isStacked);\n\n if (!isStacked) {\n const timerId = setTimeout(() => {\n applyBodyStyleClass(\"add\");\n }, 200); // Allow overlay animations to complete\n return () => clearTimeout(timerId);\n }\n } else {\n /**\n * Here we have to used the ref value to know if it is stacked\n * rather than checking for the presence of the overlay class\n * on <body>\n */\n if (!stacked.current) {\n const timerId = setTimeout(() => {\n applyBodyStyleClass(\"remove\");\n }, 200); // Allow overlay animations to complete\n return () => clearTimeout(timerId);\n }\n }\n }, [show]);\n\n useEffect(() => {\n setRootElement(getRootElement());\n\n /**\n * Only add stylesheet for a non-stacked overlay\n */\n const isStacked = checkIfStacked();\n setStacked(isStacked);\n if (!isStacked) addStylesheetForDocumentBody();\n\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n // =============================================================================\n // REF FUNCTIONS\n // =============================================================================\n const setStacked = (data: boolean) => {\n stacked.current = data;\n _setIsStacked(data);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getRootElement = (): HTMLElement | null => {\n if (document && rootId) {\n return document.getElementById(rootId);\n } else if (document) {\n // If rootId not specified, we'll use body\n return document.body;\n } else {\n return null;\n }\n };\n\n const checkIfStacked = () => {\n /**\n * Check if the body style was altered before. If it was, then this is\n * a stacked overlay\n */\n return document.body.classList.contains(OVERLAY_OPEN_CLASSNAME);\n };\n\n const addStylesheetForDocumentBody = () => {\n /**\n * This stylesheet is to manipulate the <body>. We only add once\n */\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}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`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n /**\n * This sets the style of <body> to hide the scrollbar\n */\n const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n OVERLAY_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n\n const modal = childRef.current?.firstChild;\n if (modal && (modal as any).contains(event.target)) {\n return;\n } else if (onOverlayClick && enableOverlayClick) {\n onOverlayClick();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderWrapper = () => (\n <Wrapper\n data-testid={\"overlay-wrapper\"}\n $show={show}\n $backgroundOpacity={backgroundOpacity || (isStacked ? 0.5 : 0.8)}\n $backgroundBlur={backgroundBlur}\n $disableTransition={disableTransition}\n $enableOverlayClick={enableOverlayClick}\n onClick={handleWrapperClick}\n >\n {childWithRef}\n </Wrapper>\n );\n\n const renderComponent = () => (\n <Root\n id={overlayRootId}\n data-testid={overlayRootId}\n $show={show}\n zIndex={zIndex}\n $stacked={isStacked}\n >\n {children && renderWrapper()}\n </Root>\n );\n\n return rootElement\n ? ReactDOM.createPortal(renderComponent(), rootElement)\n : null;\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\n"],"names":["Root","styled","div","props","zIndex","$stacked","$show","css","Wrapper","$backgroundOpacity","blur","styleString","length","getBackdropFilter","$backgroundBlur","customStyles","$disableTransition","Overlay","show","rootId","onOverlayClick","children","backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","id","rootElement","setRootElement","useState","isStacked","_setIsStacked","stacked","useRef","childRef","childWithRef","React","cloneElement","ref","overlayRootId","useEffect","checkIfStacked","setStacked","timerId","setTimeout","applyBodyStyleClass","clearTimeout","current","getRootElement","addStylesheetForDocumentBody","data","document","getElementById","body","classList","contains","OVERLAY_OPEN_CLASSNAME","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","appendChild","action","isOverlayStyleClassApplied","remove","add","handleWrapperClick","event","preventDefault","modal","firstChild","target","ReactDOM","createPortal","_jsx","$enableOverlayClick","onClick"],"mappings":"2KAGA,MAUaA,EAAOC,EAAOC,GAAe;;;;;;;eAO1BC,GACDA,EAAMC,SAAWD,EAAME,SAAW,MAAQ;;MAGlDF,IACC,GAAIA,EAAMG,MACN,OAAOC,CAAG;;;;;EASTC,EAAUP,EAAOC,GAAe;;;;sCAINC,GAAUA,EAAMM;uBAC/BN,GArCE,CAACO,IACvB,IAAIC,EAAc,GAMlB,OAJID,IACAC,GAAe,cAGZA,EAAYC,OAAS,EAAID,EAAc,QA8BhBE,CAAkBV,EAAMW;;;MAGnDX,IACC,IAAIY,EAAe,GAyBnB,OAxBIZ,EAAMG,MACNS,GAAgBR,CAAG;;;;;;cAQnBQ,GAAgBR,CAAG;;;oCAGKJ,EAAMa,mBAAqB,MAAQ;;;;cAM3Db,EAAMa,qBACND,GAAgBR,CAAG;;eAKhBQ;EChEFE,EAAU,EACnBC,QAAO,EACPC,SACAC,iBACAC,WACAC,oBACAC,kBAAiB,EACjBC,qBAAoB,EACpBC,sBAAqB,EACrBrB,SACAsB,SAKA,MAAOC,EAAaC,GAAkBC,EAA6B,OAC5DC,EAAWC,GAAiBF,IAE7BG,EAAUC,IAEVC,EAAWD,EAAuB,MAClCE,EACFd,GAAYe,EAAMC,aAAahB,EAAU,CAAEiB,IAAKJ,IAE9CK,EAAgBb,EAChB,0BAA0BA,IAC1B,yBAKNc,GAAU,KACN,GAAItB,EAAM,CACN,MAAMY,EAAYW,IAGlB,GAFAC,EAAWZ,IAENA,EAAW,CACZ,MAAMa,EAAUC,YAAW,KACvBC,EAAoB,SACrB,KACH,MAAO,IAAMC,aAAaH,SAQ9B,IAAKX,EAAQe,QAAS,CAClB,MAAMJ,EAAUC,YAAW,KACvBC,EAAoB,YACrB,KACH,MAAO,IAAMC,aAAaH,MAGnC,CAACzB,IAEJsB,GAAU,KACNZ,EAAeoB,KAKf,MAAMlB,EAAYW,IAIlB,OAHAC,EAAWZ,GACNA,GAAWmB,IAET,KACHJ,EAAoB,aAEzB,IAKH,MAAMH,EAAcQ,IAChBlB,EAAQe,QAAUG,EAClBnB,EAAcmB,IAMZF,EAAiB,IACfG,UAAYhC,EACLgC,SAASC,eAAejC,GACxBgC,SAEAA,SAASE,KAET,KAITZ,EAAiB,IAKZU,SAASE,KAAKC,UAAUC,SAASC,GAGtCP,EAA+B,KAIjC,IAAKE,SAASC,eAAeK,GAAgB,CACzC,MAAMC,EAAoBP,SAASQ,cAAc,SACjDD,EAAkBhC,GAAK+B,EAEvB,MAAMG,EAAgBT,SAASU,gBAAgBC,YAEzCC,EADcC,OAAOC,WACUL,EAErCF,EAAkBQ,UAAY,cACnCV,8DAEeO,iHAKfP,sEAKKL,SAASE,KAAKc,YAAYT,KAO5Bb,EAAuBuB,IACzB,MAAMC,EAA6BlB,SAASE,KAAKC,UAAUC,SACvDC,GAGW,QAAXY,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BlB,SAASE,KAAKC,UAAUgB,OAAOd,GAF/BL,SAASE,KAAKC,UAAUiB,IAAIf,IAS9BgB,EAAsBC,IACxBA,EAAMC,iBAEN,MAAMC,EAAQzC,EAASa,SAAS6B,WAC5BD,GAAUA,EAAcpB,SAASkB,EAAMI,SAEhCzD,GAAkBK,GACzBL,KAiCR,OAAOO,EACDmD,EAASC,aAZXC,EAAChF,EACG,CAAA0B,GAAIa,EACS,cAAAA,EACNjC,MAAAY,EACPd,OAAQA,EACEC,SAAAyB,EAETT,SAAAA,GArBL2D,EAACxE,EAAO,CAAA,cACS,kBAAiBF,MACvBY,EACaT,mBAAAa,IAAsBQ,EAAY,GAAM,IAC3ChB,gBAAAS,qBACGC,EAAiByD,oBAChBxD,EACrByD,QAASV,WAERrC,MAiBsCR,GACzC,MAMJ8B,EAAgB,+BAChBD,EAAyB"}
|
package/package.json
CHANGED
package/popover/index.js
CHANGED
|
@@ -99,7 +99,7 @@ var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.pr
|
|
|
99
99
|
`,e.$disableTransition&&(t+=c`
|
|
100
100
|
transition: none;
|
|
101
101
|
`),t}}
|
|
102
|
-
`,ee=({show:t=!1,rootId:n,onOverlayClick:C,children:c,backgroundOpacity:u,backgroundBlur:d=!0,disableTransition:s=!1,enableOverlayClick:f=!1,zIndex:p,id:h})=>{const[L,y]=o(null),[m,v]=o(),g=i(),H=i(null),b=c&&r.cloneElement(c,{ref:H}),V=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root";a((()=>{if(t){const e=x();if(w(e),!e){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}else if(!g.current){const e=setTimeout((()=>{Z("
|
|
102
|
+
`,ee=({show:t=!1,rootId:n,onOverlayClick:C,children:c,backgroundOpacity:u,backgroundBlur:d=!0,disableTransition:s=!1,enableOverlayClick:f=!1,zIndex:p,id:h})=>{const[L,y]=o(null),[m,v]=o(),g=i(),H=i(null),b=c&&r.cloneElement(c,{ref:H}),V=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root";a((()=>{if(t){const e=x();if(w(e),!e){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}else if(!g.current){const e=setTimeout((()=>{Z("remove")}),200);return()=>clearTimeout(e)}}),[t]),a((()=>{y(M());const e=x();return w(e),e||S(),()=>{Z("remove")}}),[]);const w=e=>{g.current=e,v(e)},M=()=>document&&n?document.getElementById(n):document?document.body:null,x=()=>document.body.classList.contains(ne),S=()=>{if(!document.getElementById(te)){const e=document.createElement("style");e.id=te;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${ne} {\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.${ne}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},Z=e=>{const t=document.body.classList.contains(ne);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(ne):document.body.classList.add(ne)},$=e=>{e.preventDefault();const t=H.current?.firstChild;t&&t.contains(e.target)||C&&f&&C()};return L?l.createPortal(e(J,{id:V,"data-testid":V,$show:t,zIndex:p,$stacked:m,children:c&&e(K,{"data-testid":"overlay-wrapper",$show:t,$backgroundOpacity:u||(m?.5:.8),$backgroundBlur:d,$disableTransition:s,$enableOverlayClick:f,onClick:$,children:b})}),L):null},te="lifesg-ds-overlay-stylesheet",ne="lifesg-ds-overlay-open",re=e=>Object.keys(f).reduce(((t,n)=>{const r=f[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),oe=re("max-width"),ie=(re("min-width"),C.div`
|
|
103
103
|
position: relative;
|
|
104
104
|
display: flex;
|
|
105
105
|
justify-content: center;
|