@chayns-components/core 5.0.28 → 5.0.30

package/lib/cjs/components/popup/Popup.js

@@ -27,7 +27,8 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
   shouldUseChildrenWidth = true,
   shouldScrollWithContent = true,
   shouldUseFullWidth = false,
-  yOffset = 0
+  yOffset = 0,
+  shouldBeOpen = false
 }, ref) => {
   const [coordinates, setCoordinates] = (0, _react2.useState)({
     x: 0,
@@ -35,7 +36,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
   });
   const [internalAlignment, setInternalAlignment] = (0, _react2.useState)(_popup.PopupAlignment.TopLeft);
   const [offset, setOffset] = (0, _react2.useState)(0);
-  const [isOpen, setIsOpen] = (0, _react2.useState)(false);
+  const [isOpen, setIsOpen] = (0, _react2.useState)(shouldBeOpen);
   const [portal, setPortal] = (0, _react2.useState)();
   const [pseudoSize, setPseudoSize] = (0, _react2.useState)();
   const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
@@ -146,6 +147,11 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       setIsOpen(true);
     }
   }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);
+  (0, _react2.useEffect)(() => {
+    if (shouldBeOpen) {
+      handleShow();
+    }
+  }, [handleShow, shouldBeOpen]);
   (0, _react2.useEffect)(() => {
     if (!newContainer || !popupRef.current) return;
     const viewHeight = newContainer.clientHeight;
@@ -191,7 +197,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
     show: handleShow
   }), [handleHide, handleShow]);
   (0, _react2.useEffect)(() => {
-    if (isOpen) {
+    if (isOpen && !shouldBeOpen) {
       document.addEventListener('click', handleDocumentClick, true);
       window.addEventListener('blur', handleHide);
       if (typeof onShow === 'function') {
@@ -204,7 +210,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       document.removeEventListener('click', handleDocumentClick, true);
       window.removeEventListener('blur', handleHide);
     };
-  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);
+  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow, shouldBeOpen]);
   (0, _react2.useEffect)(() => {
     if (!newContainer) {
       return;

package/lib/cjs/components/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","shouldPreventTextWrapping","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n    /**\n     * The alignment of the popup. By default, the popup will calculate the best alignment.\n     */\n    alignment?: PopupAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the tooltip should be hidden after the children is not hovered.\n     */\n    shouldHideOnChildrenLeave?: boolean;\n    /**\n     * Whether the popup should scroll with the content.\n     */\n    shouldScrollWithContent?: boolean;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * Whether the popup children should use the full width.\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            alignment,\n            content,\n            onShow,\n            container,\n            onHide,\n            children,\n            shouldHideOnChildrenLeave,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            shouldScrollWithContent = true,\n            shouldUseFullWidth = false,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n            PopupAlignment.TopLeft,\n        );\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n        const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        const { height, width, measuredElement } = useMeasuredClone({\n            content,\n            shouldPreventTextWrapping: !shouldUseChildrenWidth,\n        });\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            setPseudoSize({ height, width });\n        }, [height, width]);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                const element = shouldScrollWithContent ? newContainer : document.body;\n\n                const {\n                    height: containerHeight,\n                    width: containerWidth,\n                    top,\n                    left,\n                } = element.getBoundingClientRect();\n\n                const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n                const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n                if (\n                    pseudoHeight > childrenTop - 25 ||\n                    alignment === PopupAlignment.BottomLeft ||\n                    alignment === PopupAlignment.BottomRight\n                ) {\n                    let isRight = false;\n\n                    if (\n                        pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n                        alignment === PopupAlignment.BottomRight\n                    ) {\n                        setInternalAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setInternalAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n                    const y =\n                        (childrenTop + childrenHeight / 2 - top) / zoomY +\n                        element.scrollTop -\n                        yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (\n                        pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n                        alignment === PopupAlignment.TopRight\n                    ) {\n                        setInternalAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setInternalAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n                    const y =\n                        (childrenTop + childrenHeight / 2 - top) / zoomY +\n                        element.scrollTop -\n                        yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n        useEffect(() => {\n            if (!newContainer || !popupRef.current) return;\n\n            const viewHeight = newContainer.clientHeight;\n            const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n            if (\n                [\n                    PopupAlignment.TopLeft,\n                    PopupAlignment.TopRight,\n                    PopupAlignment.TopCenter,\n                ].includes(internalAlignment)\n            ) {\n                setContentMaxHeight(coordinates.y - 20);\n            } else {\n                setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n            }\n        }, [coordinates.y, internalAlignment, newContainer]);\n\n        const handleChildrenClick = () => {\n            handleShow();\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            if (shouldHideOnChildrenLeave) {\n                handleHide();\n\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\n                                offset={offset}\n                                shouldScrollWithContent={shouldScrollWithContent}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                maxHeight={contentMaxHeight}\n                                alignment={internalAlignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            contentMaxHeight,\n            internalAlignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n            shouldScrollWithContent,\n        ]);\n\n        return (\n            <>\n                {measuredElement}\n                <StyledPopup\n                    className=\"beta-chayns-popup\"\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    $shouldUseFullWidth={shouldUseFullWidth}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popup.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","shouldBeOpen","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","contentMaxHeight","setContentMaxHeight","undefined","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","shouldPreventTextWrapping","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","document","body","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","viewHeight","clientHeight","TopCenter","includes","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","maxHeight","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n    /**\n     * The alignment of the popup. By default, the popup will calculate the best alignment.\n     */\n    alignment?: PopupAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the tooltip should be hidden after the children is not hovered.\n     */\n    shouldHideOnChildrenLeave?: boolean;\n    /**\n     * Whether the popup should scroll with the content.\n     */\n    shouldScrollWithContent?: boolean;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * Whether the popup children should use the full width.\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n    /**\n     * Whether the popup should be open. This can be used to control the popup from outside.\n     */\n    shouldBeOpen?: boolean;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            alignment,\n            content,\n            onShow,\n            container,\n            onHide,\n            children,\n            shouldHideOnChildrenLeave,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            shouldScrollWithContent = true,\n            shouldUseFullWidth = false,\n            yOffset = 0,\n            shouldBeOpen = false,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n            PopupAlignment.TopLeft,\n        );\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(shouldBeOpen);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n        const [contentMaxHeight, setContentMaxHeight] = useState<number | undefined>(undefined);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        const { height, width, measuredElement } = useMeasuredClone({\n            content,\n            shouldPreventTextWrapping: !shouldUseChildrenWidth,\n        });\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            setPseudoSize({ height, width });\n        }, [height, width]);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                const element = shouldScrollWithContent ? newContainer : document.body;\n\n                const {\n                    height: containerHeight,\n                    width: containerWidth,\n                    top,\n                    left,\n                } = element.getBoundingClientRect();\n\n                const zoomX = containerWidth / (element as HTMLElement).offsetWidth;\n                const zoomY = containerHeight / (element as HTMLElement).offsetHeight;\n\n                if (\n                    pseudoHeight > childrenTop - 25 ||\n                    alignment === PopupAlignment.BottomLeft ||\n                    alignment === PopupAlignment.BottomRight\n                ) {\n                    let isRight = false;\n\n                    if (\n                        pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n                        alignment === PopupAlignment.BottomRight\n                    ) {\n                        setInternalAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setInternalAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n                    const y =\n                        (childrenTop + childrenHeight / 2 - top) / zoomY +\n                        element.scrollTop -\n                        yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (\n                        pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n                        alignment === PopupAlignment.TopRight\n                    ) {\n                        setInternalAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setInternalAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x =\n                        (childrenLeft + childrenWidth / 2 - left) / zoomX + element.scrollLeft;\n                    const y =\n                        (childrenTop + childrenHeight / 2 - top) / zoomY +\n                        element.scrollTop -\n                        yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);\n\n        useEffect(() => {\n            if (shouldBeOpen) {\n                handleShow();\n            }\n        }, [handleShow, shouldBeOpen]);\n\n        useEffect(() => {\n            if (!newContainer || !popupRef.current) return;\n\n            const viewHeight = newContainer.clientHeight;\n            const childrenHeight = popupRef.current.getBoundingClientRect().height;\n\n            if (\n                [\n                    PopupAlignment.TopLeft,\n                    PopupAlignment.TopRight,\n                    PopupAlignment.TopCenter,\n                ].includes(internalAlignment)\n            ) {\n                setContentMaxHeight(coordinates.y - 20);\n            } else {\n                setContentMaxHeight(viewHeight - childrenHeight - coordinates.y - 20);\n            }\n        }, [coordinates.y, internalAlignment, newContainer]);\n\n        const handleChildrenClick = () => {\n            handleShow();\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            if (shouldHideOnChildrenLeave) {\n                handleHide();\n\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isOpen && !shouldBeOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow, shouldBeOpen]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\n                                offset={offset}\n                                shouldScrollWithContent={shouldScrollWithContent}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                maxHeight={contentMaxHeight}\n                                alignment={internalAlignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            contentMaxHeight,\n            internalAlignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n            shouldScrollWithContent,\n        ]);\n\n        return (\n            <>\n                {measuredElement}\n                <StyledPopup\n                    className=\"beta-chayns-popup\"\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    $shouldUseFullWidth={shouldUseFullWidth}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/progress-bar/ProgressBar.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactCompilerRuntime = require("react-compiler-runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _uuid = require("../../hooks/uuid");
 var _ProgressBar = require("./ProgressBar.styles");
@@ -12,140 +13,252 @@ var _styledComponents = require("styled-components");
 var _Popup = _interopRequireDefault(require("../popup/Popup"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const ProgressBar = ({
-  percentage,
-  label,
-  shouldHideProgress = false,
-  shouldShowLabelInline = false,
-  steps,
-  colors,
-  thumbLabel,
-  showShine = false,
-  height
-}) => {
-  'use memo';
+const ProgressBar = t0 => {
+  "use memo";
 
+  const $ = (0, _reactCompilerRuntime.c)(39);
+  const {
+    percentage,
+    label,
+    shouldHideProgress: t1,
+    shouldShowLabelInline: t2,
+    steps,
+    colors,
+    thumbLabel,
+    showShine: t3,
+    height
+  } = t0;
+  const shouldHideProgress = t1 === undefined ? false : t1;
+  const shouldShowLabelInline = t2 === undefined ? false : t2;
+  const showShine = t3 === undefined ? false : t3;
   const uuid = (0, _uuid.useUuid)();
   const [coordinates, setCoordinates] = (0, _react.useState)();
   const popupRef = (0, _react.useRef)(null);
-  const hostContainerRef = (0, _react.useRef)(null);
+  const [hostContainer, setHostContainer] = (0, _react.useState)(null);
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
-  const shineEffect = (0, _react.useMemo)(() => {
-    if (!showShine || percentage === undefined) return null;
-    const MIN_ANIMATION_LENGTH = 1;
-    const MAX_ANIMATION_LENGTH = 5;
-    const MAX_SHINE_COUNT = 6;
+  let t4;
+  bb0: {
+    if (!showShine || percentage === undefined) {
+      t4 = null;
+      break bb0;
+    }
     const t = percentage / 100;
-    const shineCount = Math.ceil(MAX_SHINE_COUNT * t);
-    const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;
-    return Array.from({
-      length: shineCount
-    }).map((_, index) => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarShine
-    /* eslint-disable-next-line react/no-array-index-key */, {
-      key: `progress-bar-shine__${shineCount}__${index}`,
-      $speed: speed,
-      $delay: -(speed / shineCount) * index
-    }));
-  }, [percentage, showShine]);
-  (0, _react.useEffect)(() => {
-    var _hostContainerRef$cur;
-    if (thumbLabel) setCoordinates((_hostContainerRef$cur = hostContainerRef.current) === null || _hostContainerRef$cur === void 0 ? void 0 : _hostContainerRef$cur.getBoundingClientRect());
-  }, [thumbLabel]);
-  (0, _react.useEffect)(() => {
-    var _popupRef$current;
-    if (coordinates) (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.show();
-  }, [coordinates]);
-  const progressBar = (0, _react.useMemo)(() => {
-    if (shouldHideProgress) {
-      return null;
+    const shineCount = Math.ceil(6 * t);
+    const speed = 1 + 4 * t;
+    let t5;
+    if ($[0] !== shineCount) {
+      t5 = Array.from({
+        length: shineCount
+      });
+      $[0] = shineCount;
+      $[1] = t5;
+    } else {
+      t5 = $[1];
+    }
+    let t6;
+    if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
+      t6 = t5.map((_, index) => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarShine, {
+        key: `progress-bar-shine__${shineCount}__${index}`,
+        $speed: speed,
+        $delay: -(speed / shineCount) * index
+      }));
+      $[2] = shineCount;
+      $[3] = speed;
+      $[4] = t5;
+      $[5] = t6;
+    } else {
+      t6 = $[5];
     }
-    if (percentage === undefined) {
-      return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
-        key: `progress-bar-loop__${uuid}`,
+    t4 = t6;
+  }
+  const shineEffect = t4;
+  let t5;
+  let t6;
+  if ($[6] !== hostContainer || $[7] !== thumbLabel) {
+    t5 = () => {
+      if (thumbLabel) {
+        setCoordinates(hostContainer === null || hostContainer === void 0 ? void 0 : hostContainer.getBoundingClientRect());
+      }
+    };
+    t6 = [hostContainer, thumbLabel];
+    $[6] = hostContainer;
+    $[7] = thumbLabel;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t5 = $[8];
+    t6 = $[9];
+  }
+  (0, _react.useEffect)(t5, t6);
+  let t7;
+  let t8;
+  if ($[10] !== coordinates) {
+    t7 = () => {
+      if (coordinates) {
+        var _popupRef$current;
+        (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.show();
+      }
+    };
+    t8 = [coordinates];
+    $[10] = coordinates;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t7 = $[11];
+    t8 = $[12];
+  }
+  (0, _react.useEffect)(t7, t8);
+  let t9;
+  if ($[13] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[14] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[15] !== (colors === null || colors === void 0 ? void 0 : colors.progressColor) || $[16] !== (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) || $[17] !== (colors === null || colors === void 0 ? void 0 : colors.stepColor) || $[18] !== (colors === null || colors === void 0 ? void 0 : colors.thumbLabelColor) || $[19] !== height || $[20] !== hostContainer || $[21] !== label || $[22] !== percentage || $[23] !== shineEffect || $[24] !== shouldHideProgress || $[25] !== shouldShowLabelInline || $[26] !== showShine || $[27] !== steps || $[28] !== theme || $[29] !== thumbLabel || $[30] !== uuid) {
+    colors === null || colors === void 0 || colors.backgroundColor;
+    colors === null || colors === void 0 || colors.primaryTextColor;
+    colors === null || colors === void 0 || colors.progressColor;
+    colors === null || colors === void 0 || colors.secondaryTextColor;
+    colors === null || colors === void 0 || colors.stepColor;
+    colors === null || colors === void 0 || colors.thumbLabelColor;
+    t9 = (() => {
+      if (shouldHideProgress) {
+        return null;
+      }
+      if (percentage === undefined) {
+        return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
+          key: `progress-bar-loop__${uuid}`,
+          $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
+          initial: {
+            width: "200px",
+            left: "-200px"
+          },
+          animate: {
+            width: "200px",
+            left: "100%"
+          },
+          exit: {
+            width: "200px",
+            left: "100%"
+          },
+          transition: {
+            type: "tween",
+            repeat: Infinity,
+            repeatDelay: 0,
+            duration: 1
+          }
+        }), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
+          $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
+        }));
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: instance => setHostContainer(instance),
+        style: {
+          border: 0
+        }
+      }, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
+        $isBig: shouldShowLabelInline,
+        $height: height
+      }, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
+        $position: step,
+        key: `progress-step-${step}`,
+        $color: colors === null || colors === void 0 ? void 0 : colors.stepColor
+      }))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
+        $height: height,
         $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
+        key: `progress-bar__${uuid}`,
         initial: {
-          width: '200px',
-          left: '-200px'
+          width: "0%"
         },
         animate: {
-          width: '200px',
-          left: '100%'
+          width: `${percentage}%`
         },
         exit: {
-          width: '200px',
-          left: '100%'
+          width: "0%"
         },
         transition: {
-          type: 'tween',
-          repeat: Infinity,
-          repeatDelay: 0,
-          duration: 1
+          type: "tween"
+        },
+        onUpdate: () => {
+          var _popupRef$current2;
+          return (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.show();
+        },
+        onAnimationComplete: () => {
+          var _popupRef$current3;
+          return (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.show();
         }
-      }), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
+      }, showShine && shineEffect, thumbLabel && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarThumbLabel, {
+        onClick: _temp
+      }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+        theme: {
+          "000": (colors === null || colors === void 0 ? void 0 : colors.thumbLabelColor) ?? (theme === null || theme === void 0 ? void 0 : theme["104"]),
+          text: (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) ?? (theme === null || theme === void 0 ? void 0 : theme["300"])
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
+        ref: popupRef,
+        content: thumbLabel,
+        alignment: _popup.PopupAlignment.TopCenter,
+        onHide: () => {
+          var _popupRef$current4;
+          return (_popupRef$current4 = popupRef.current) === null || _popupRef$current4 === void 0 ? void 0 : _popupRef$current4.show();
+        },
+        container: hostContainer ?? undefined,
+        shouldUseChildrenWidth: true,
+        shouldBeOpen: true
+      })))), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
+        $shouldShowLabelInline: shouldShowLabelInline,
+        $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
+        $secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
+        $colorSplitPosition: percentage
+      }, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
         $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
-      }));
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: hostContainerRef
-    }, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
-      $isBig: shouldShowLabelInline,
-      $height: height
-    }, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
-      $position: step,
-      key: `progress-step-${step}`,
-      $color: colors === null || colors === void 0 ? void 0 : colors.stepColor
-    }))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
-      $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
-      key: `progress-bar__${uuid}`,
-      initial: {
-        width: '0%'
-      },
-      animate: {
-        width: `${percentage}%`
-      },
-      exit: {
-        width: '0%'
-      },
-      transition: {
-        type: 'tween'
-      },
-      onUpdate: () => {
-        var _popupRef$current2;
-        return (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.show();
-      },
-      onAnimationComplete: () => {
-        var _popupRef$current3;
-        return (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.show();
-      }
-    }, showShine && shineEffect, thumbLabel && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarThumbLabel, {
-      onClick: event => event.stopPropagation()
-    }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-      theme: {
-        '000': (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) ?? (theme === null || theme === void 0 ? void 0 : theme['104']),
-        text: (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) ?? (theme === null || theme === void 0 ? void 0 : theme['300'])
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
-      ref: popupRef,
-      content: thumbLabel,
-      alignment: _popup.PopupAlignment.TopCenter,
-      onHide: () => {
-        var _popupRef$current4;
-        return (_popupRef$current4 = popupRef.current) === null || _popupRef$current4 === void 0 ? void 0 : _popupRef$current4.show();
-      },
-      container: hostContainerRef.current ?? undefined
-    })))), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
-      $shouldShowLabelInline: shouldShowLabelInline,
-      $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
-      $secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
-      $colorSplitPosition: percentage
-    }, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
-      $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
-    })));
-  }, [colors === null || colors === void 0 ? void 0 : colors.backgroundColor, colors === null || colors === void 0 ? void 0 : colors.primaryTextColor, colors === null || colors === void 0 ? void 0 : colors.progressColor, colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor, colors === null || colors === void 0 ? void 0 : colors.stepColor, height, label, percentage, shineEffect, shouldHideProgress, shouldShowLabelInline, showShine, steps, theme, thumbLabel, uuid]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
-    $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
-  }, label)), [colors === null || colors === void 0 ? void 0 : colors.primaryTextColor, label, progressBar, shouldShowLabelInline]);
+      })));
+    })();
+    $[13] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
+    $[14] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
+    $[15] = colors === null || colors === void 0 ? void 0 : colors.progressColor;
+    $[16] = colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor;
+    $[17] = colors === null || colors === void 0 ? void 0 : colors.stepColor;
+    $[18] = colors === null || colors === void 0 ? void 0 : colors.thumbLabelColor;
+    $[19] = height;
+    $[20] = hostContainer;
+    $[21] = label;
+    $[22] = percentage;
+    $[23] = shineEffect;
+    $[24] = shouldHideProgress;
+    $[25] = shouldShowLabelInline;
+    $[26] = showShine;
+    $[27] = steps;
+    $[28] = theme;
+    $[29] = thumbLabel;
+    $[30] = uuid;
+    $[31] = t9;
+  } else {
+    t9 = $[31];
+  }
+  const progressBar = t9;
+  colors === null || colors === void 0 || colors.primaryTextColor;
+  let t10;
+  if ($[32] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[33] !== label || $[34] !== shouldShowLabelInline) {
+    t10 = label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
+      $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
+    }, label);
+    $[32] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
+    $[33] = label;
+    $[34] = shouldShowLabelInline;
+    $[35] = t10;
+  } else {
+    t10 = $[35];
+  }
+  let t11;
+  if ($[36] !== progressBar || $[37] !== t10) {
+    t11 = /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, t10);
+    $[36] = progressBar;
+    $[37] = t10;
+    $[38] = t11;
+  } else {
+    t11 = $[38];
+  }
+  return t11;
 };
 ProgressBar.displayName = 'ProgressBar';
 var _default = exports.default = ProgressBar;
+function _temp(event) {
+  return event.stopPropagation();
+}
 //# sourceMappingURL=ProgressBar.js.map