@chayns-components/core 5.0.0-beta.790 → 5.0.0-beta.792

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

@@ -56,6 +56,25 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
       });
     }
   }, []);
+  (0, _react.useLayoutEffect)(() => {
+    if (popupPseudoContentRef.current) {
+      const resizeObserver = new ResizeObserver(entries => {
+        if (entries && entries[0]) {
+          const observedHeight = entries[0].contentRect.height;
+          const observedWidth = entries[0].contentRect.width;
+          setPseudoSize({
+            height: observedHeight,
+            width: observedWidth
+          });
+        }
+      });
+      resizeObserver.observe(popupPseudoContentRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, []);
   const handleShow = (0, _react.useCallback)(() => {
     if (popupRef.current && pseudoSize) {
       const {
@@ -68,6 +87,14 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
         top: childrenTop,
         width: childrenWidth
       } = popupRef.current.getBoundingClientRect();
+      console.debug('Popup', {
+        pseudoHeight,
+        pseudoWidth,
+        childrenHeight,
+        childrenLeft,
+        childrenTop,
+        childrenWidth
+      });
       if (pseudoHeight > childrenTop - 25) {
         let isRight = false;
         if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
@@ -191,7 +218,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
       shouldChangeColor: false
     }, content))), container));
   }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, uuid]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !pseudoSize && /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
     ref: popupPseudoContentRef,
     $menuHeight: menuHeight
   }, content), /*#__PURE__*/_react.default.createElement(_Popup.StyledPopup, {

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","height","width","getBoundingClientRect","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","$shouldUseChildrenWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\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, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\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 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     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container = document.querySelector('.tapp') || document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupPseudoContentRef.current) {\n                const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n                setPseudoSize({ height, width });\n            }\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\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                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + 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: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - 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: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\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            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\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            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {!pseudoSize && (\n                    <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                        {content}\n                    </StyledPopupPseudo>\n                )}\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\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":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","height","width","getBoundingClientRect","useLayoutEffect","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","observedWidth","observe","disconnect","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","console","debug","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","$shouldUseChildrenWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\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, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\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 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     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container = document.querySelector('.tapp') || document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupPseudoContentRef.current) {\n                const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n                setPseudoSize({ height, width });\n            }\n        }, []);\n\n        useLayoutEffect(() => {\n            if (popupPseudoContentRef.current) {\n                const resizeObserver = new ResizeObserver((entries) => {\n                    if (entries && entries[0]) {\n                        const observedHeight = entries[0].contentRect.height;\n                        const observedWidth = entries[0].contentRect.width;\n\n                        setPseudoSize({ height: observedHeight, width: observedWidth });\n                    }\n                });\n\n                resizeObserver.observe(popupPseudoContentRef.current);\n\n                return () => {\n                    resizeObserver.disconnect();\n                };\n            }\n\n            return () => {};\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\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                console.debug('Popup', {\n                    pseudoHeight,\n                    pseudoWidth,\n                    childrenHeight,\n                    childrenLeft,\n                    childrenTop,\n                    childrenWidth,\n                });\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + 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: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - 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: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\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            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\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            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\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/slider/Slider.js

@@ -31,6 +31,8 @@ const Slider = ({
   const toSliderRef = (0, _react.useRef)(null);
   const fromSliderThumbRef = (0, _react.useRef)(null);
   const toSliderThumbRef = (0, _react.useRef)(null);
+  const fromSliderThumbContentRef = (0, _react.useRef)(null);
+  const toSliderThumbContentRef = (0, _react.useRef)(null);
   const sliderWrapperRef = (0, _react.useRef)(null);
   const sliderWrapperSize = (0, _useElementSize.useElementSize)(sliderWrapperRef);
   const theme = (0, _styledComponents.useTheme)();
@@ -161,7 +163,7 @@ const Slider = ({
         max: maxValue,
         min: minValue,
         value: fromValue,
-        thumbWidth: fromSliderThumbRef.current.offsetWidth,
+        thumbWidth: 35,
         containerWidth: fromSliderRef.current.offsetWidth
       });
     }
@@ -179,6 +181,18 @@ const Slider = ({
     }
     return 0;
   }, [toValue, minValue, maxValue, sliderWrapperSize]);
+  const toSliderThumbContentPosition = (0, _react.useMemo)(() => (0, _slider.calculatePopupPosition)({
+    min: minValue,
+    max: maxValue,
+    sliderValue: toValue,
+    popupWidth: thumbWidth
+  }), [maxValue, minValue, thumbWidth, toValue]);
+  const fromSliderThumbContentPosition = (0, _react.useMemo)(() => (0, _slider.calculatePopupPosition)({
+    min: minValue,
+    max: maxValue,
+    sliderValue: fromValue,
+    popupWidth: thumbWidth
+  }), [fromValue, maxValue, minValue, thumbWidth]);
   const handleTouchStart = (0, _react.useCallback)(() => {
     if (shouldShowThumbLabel) {
       setIsBigSlider(true);
@@ -210,7 +224,7 @@ const Slider = ({
     exit: {
       height: 10
     },
-    $thumbWidth: thumbWidth,
+    $thumbWidth: 35,
     ref: fromSliderRef,
     $isInterval: !!interval,
     type: "range",
@@ -229,11 +243,21 @@ const Slider = ({
     ref: fromSliderThumbRef,
     $position: fromSliderThumbPosition,
     $isBigSlider: isBigSlider
-  }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
+  }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, {
+    $width: thumbWidth,
+    $isBigSlider: isBigSlider,
+    $position: fromSliderThumbContentPosition,
+    ref: fromSliderThumbContentRef
+  }, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
     ref: toSliderThumbRef,
     $position: toSliderThumbPosition,
     $isBigSlider: isBigSlider
-  }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
+  }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, {
+    $width: thumbWidth,
+    $isBigSlider: isBigSlider,
+    $position: toSliderThumbContentPosition,
+    ref: toSliderThumbContentRef
+  }, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
     animate: {
       height: isBigSlider ? 30 : 10
     },
@@ -243,7 +267,7 @@ const Slider = ({
     exit: {
       height: 10
     },
-    $thumbWidth: thumbWidth,
+    $thumbWidth: 35,
     $max: maxValue,
     $min: minValue,
     $value: toValue,
@@ -258,7 +282,7 @@ const Slider = ({
     onTouchEnd: handleTouchEnd,
     onChange: handleControlToSlider,
     onMouseUp: handleMouseUp
-  })), [isBigSlider, thumbWidth, interval, fromValue, steps, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbLabelFormatter, toSliderThumbPosition, toValue, handleControlToSlider]);
+  })), [isBigSlider, interval, fromValue, steps, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbWidth, fromSliderThumbContentPosition, thumbLabelFormatter, toSliderThumbPosition, toSliderThumbContentPosition, toValue, handleControlToSlider]);
 };
 Slider.displayName = 'Slider';
 var _default = exports.default = Slider;

package/lib/cjs/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","offsetWidth","containerWidth","toSliderThumbPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { calculateGradientOffset, fillSlider, getThumbMaxWidth } from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: fromSliderThumbRef.current.offsetWidth,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: toSliderThumbRef.current.offsetWidth,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={thumbWidth}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel>\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel>\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={thumbWidth}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            thumbWidth,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAKyB,SAAAO,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA8CzB,MAAMW,MAAuB,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,mBAAmB;EACnBC,oBAAoB,GAAG,KAAK;EAC5BC,KAAK,GAAG;AACZ,CAAC,KAAK;EACF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAC7C,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAF,eAAQ,EAACX,QAAQ,CAAC;EAChD,MAAM,CAACc,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAJ,eAAQ,EAAC,EAAE,CAAC;EAChD,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAN,eAAQ,EAAC,KAAK,CAAC;EAErD,MAAMO,aAAa,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EACpD,MAAMC,WAAW,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAClD,MAAME,kBAAkB,GAAG,IAAAF,aAAM,EAAiB,IAAI,CAAC;EACvD,MAAMG,gBAAgB,GAAG,IAAAH,aAAM,EAAiB,IAAI,CAAC;EACrD,MAAMI,gBAAgB,GAAG,IAAAJ,aAAM,EAAiB,IAAI,CAAC;EAErD,MAAMK,iBAAiB,GAAG,IAAAC,8BAAc,EAACF,gBAAgB,CAAC;EAE1D,MAAMG,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EAExB,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIrB,oBAAoB,EAAE;MACtBQ,aAAa,CAAC,IAAAc,wBAAgB,EAAC;QAAEC,SAAS,EAAE9B,QAAQ;QAAEM;MAAoB,CAAC,CAAC,CAAC;IACjF;EACJ,CAAC,EAAE,CAACN,QAAQ,EAAEO,oBAAoB,EAAED,mBAAmB,CAAC,CAAC;;EAEzD;AACJ;AACA;EACI,IAAAsB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO1B,KAAK,KAAK,QAAQ,EAAE;MAC3B;IACJ;IAEA,IAAIA,KAAK,IAAID,QAAQ,IAAIC,KAAK,IAAIF,QAAQ,EAAE;MACxCU,YAAY,CAACR,KAAK,CAAC;IACvB;EACJ,CAAC,EAAE,CAACF,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,CAAC,CAAC;EAE/B,IAAA0B,gBAAS,EAAC,MAAM;IACZ,IAAInB,SAAS,GAAGG,OAAO,EAAE;MACrBF,YAAY,CAACE,OAAO,CAAC;IACzB;IAEA,IAAIA,OAAO,GAAGH,SAAS,EAAE;MACrBI,UAAU,CAACJ,SAAS,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,SAAS,EAAEG,OAAO,CAAC,CAAC;EAExB,MAAMmB,aAAa,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAAA,IAAAC,qBAAA,EAAAC,oBAAA;IACpC,KAAK,IAAAC,kCAAuB,EAAC,IAAI,CAAC;IAElC,MAAMC,IAAI,GAAGC,MAAM,EAAAJ,qBAAA,GAACf,aAAa,CAACoB,OAAO,cAAAL,qBAAA,uBAArBA,qBAAA,CAAuB/B,KAAK,CAAC;IACjD,MAAMqC,EAAE,GAAGF,MAAM,EAAAH,oBAAA,GAACd,WAAW,CAACkB,OAAO,cAAAJ,oBAAA,uBAAnBA,oBAAA,CAAqBhC,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAGmC,SAAS,GAAGJ,IAAI,EAC3B/B,QAAQ,GAAG;QAAEL,QAAQ,EAAEuC,EAAE;QAAEtC,QAAQ,EAAEmC;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;EACJ,CAAC,EAAE,CAACnC,QAAQ,EAAEF,QAAQ,CAAC,CAAC;EAExB,MAAMsC,uBAAuB,GAAG,IAAAT,kBAAW,EACtCU,KAAoC,IAAK;IACtC,IAAI,CAACxB,aAAa,CAACoB,OAAO,IAAI,CAAClB,WAAW,CAACkB,OAAO,EAAE;MAChD;IACJ;IAEA5B,YAAY,CAAC2B,MAAM,CAACK,KAAK,CAACC,MAAM,CAACzC,KAAK,CAAC,CAAC;IAExC,MAAMkC,IAAI,GAAGC,MAAM,CAACnB,aAAa,CAACoB,OAAO,CAACpC,KAAK,CAAC;IAChD,MAAMqC,EAAE,GAAGF,MAAM,CAACjB,WAAW,CAACkB,OAAO,CAACpC,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACoC,SAAS,EAAE;QAAExC,QAAQ,EAAEuC,EAAE;QAAEtC,QAAQ,EAAEmC;MAAK,CAAC,CAAC;IACzD;IAEA,IAAAQ,kBAAU,EAAC;MACPC,QAAQ,EAAEzB,WAAW,CAACkB,OAAO;MAC7BQ,UAAU,EAAE5B,aAAa,CAACoB,OAAO;MACjCZ;IACJ,CAAC,CAAC;IAEF,IAAIU,IAAI,GAAGG,EAAE,EAAE;MACXrB,aAAa,CAACoB,OAAO,CAACpC,KAAK,GAAG6C,MAAM,CAACR,EAAE,CAAC;IAC5C,CAAC,MAAM;MACHrB,aAAa,CAACoB,OAAO,CAACpC,KAAK,GAAG6C,MAAM,CAACX,IAAI,CAAC;IAC9C;EACJ,CAAC,EACD,CAAChC,QAAQ,EAAEsB,KAAK,CACpB,CAAC;EAED,MAAMsB,qBAAqB,GAAG,IAAAhB,kBAAW,EACpCU,KAAoC,IAAK;IACtC,KAAK,IAAAP,kCAAuB,EAAC,KAAK,CAAC;IAEnC,IAAI,CAACjB,aAAa,CAACoB,OAAO,IAAI,CAAClB,WAAW,CAACkB,OAAO,EAAE;MAChD;IACJ;IAEAzB,UAAU,CAACwB,MAAM,CAACK,KAAK,CAACC,MAAM,CAACzC,KAAK,CAAC,CAAC;IAEtC,MAAMkC,IAAI,GAAGC,MAAM,CAACnB,aAAa,CAACoB,OAAO,CAACpC,KAAK,CAAC;IAChD,MAAMqC,EAAE,GAAGF,MAAM,CAACjB,WAAW,CAACkB,OAAO,CAACpC,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACoC,SAAS,EAAE;QAAExC,QAAQ,EAAEuC,EAAE;QAAEtC,QAAQ,EAAEmC;MAAK,CAAC,CAAC;IACzD;IAEA,IAAAQ,kBAAU,EAAC;MACPC,QAAQ,EAAEzB,WAAW,CAACkB,OAAO;MAC7BQ,UAAU,EAAE5B,aAAa,CAACoB,OAAO;MACjCZ;IACJ,CAAC,CAAC;IAEF,IAAIU,IAAI,IAAIG,EAAE,EAAE;MACZnB,WAAW,CAACkB,OAAO,CAACpC,KAAK,GAAG6C,MAAM,CAACR,EAAE,CAAC;IAC1C,CAAC,MAAM;MACHnB,WAAW,CAACkB,OAAO,CAACpC,KAAK,GAAG6C,MAAM,CAACX,IAAI,CAAC;IAC5C;EACJ,CAAC,EACD,CAAChC,QAAQ,EAAEsB,KAAK,CACpB,CAAC;EAED,IAAAE,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACV,aAAa,CAACoB,OAAO,IAAI,CAAClB,WAAW,CAACkB,OAAO,IAAI,CAACjC,QAAQ,EAAE;MAC7D;IACJ;IAEAK,YAAY,CAACL,QAAQ,CAACJ,QAAQ,CAAC;IAC/BY,UAAU,CAACR,QAAQ,CAACL,QAAQ,CAAC;IAE7BkB,aAAa,CAACoB,OAAO,CAACpC,KAAK,GAAG6C,MAAM,CAAC1C,QAAQ,CAACJ,QAAQ,CAAC;IACvDmB,WAAW,CAACkB,OAAO,CAACpC,KAAK,GAAG6C,MAAM,CAAC1C,QAAQ,CAACL,QAAQ,CAAC;IAErD,IAAA4C,kBAAU,EAAC;MACPE,UAAU,EAAE5B,aAAa,CAACoB,OAAO;MACjCO,QAAQ,EAAEzB,WAAW,CAACkB,OAAO;MAC7BZ;IACJ,CAAC,CAAC;IACF;IACA;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMuB,iBAAiB,GAAG,IAAAjB,kBAAW,EAChCU,KAAoC,IAAK;IACtC,KAAK,IAAAP,kCAAuB,EAAC,KAAK,CAAC;IAEnC,MAAMe,QAAQ,GAAGb,MAAM,CAACK,KAAK,CAACC,MAAM,CAACzC,KAAK,CAAC;IAE3C,IAAIG,QAAQ,EAAE;MACVoC,uBAAuB,CAACC,KAAK,CAAC;MAE9B;IACJ;IAEAhC,YAAY,CAACwC,QAAQ,CAAC;IAEtB,IAAI9C,QAAQ,EAAE;MACVA,QAAQ,CAAC8C,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAACT,uBAAuB,EAAEpC,QAAQ,EAAED,QAAQ,CAChD,CAAC;EAED,MAAM+C,uBAAuB,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC1C,IAAIlC,aAAa,CAACoB,OAAO,IAAIjB,kBAAkB,CAACiB,OAAO,IAAId,iBAAiB,EAAE;MAC1E,OAAO,IAAA6B,+BAAuB,EAAC;QAC3BC,GAAG,EAAEtD,QAAQ;QACbuD,GAAG,EAAEtD,QAAQ;QACbC,KAAK,EAAEO,SAAS;QAChBK,UAAU,EAAEO,kBAAkB,CAACiB,OAAO,CAACkB,WAAW;QAClDC,cAAc,EAAEvC,aAAa,CAACoB,OAAO,CAACkB;MAC1C,CAAC,CAAC;IACN;IAEA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAC/C,SAAS,EAAET,QAAQ,EAAEC,QAAQ,EAAEuB,iBAAiB,CAAC,CAAC;EAEtD,MAAMkC,qBAAqB,GAAG,IAAAN,cAAO,EAAC,MAAM;IACxC,IAAIhC,WAAW,CAACkB,OAAO,IAAIhB,gBAAgB,CAACgB,OAAO,IAAId,iBAAiB,EAAE;MACtE,OAAO,IAAA6B,+BAAuB,EAAC;QAC3BC,GAAG,EAAEtD,QAAQ;QACbuD,GAAG,EAAEtD,QAAQ;QACbC,KAAK,EAAEU,OAAO;QACdE,UAAU,EAAEQ,gBAAgB,CAACgB,OAAO,CAACkB,WAAW;QAChDC,cAAc,EAAErC,WAAW,CAACkB,OAAO,CAACkB;MACxC,CAAC,CAAC;IACN;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAC5C,OAAO,EAAEX,QAAQ,EAAED,QAAQ,EAAEwB,iBAAiB,CAAC,CAAC;EAEpD,MAAMmC,gBAAgB,GAAG,IAAA3B,kBAAW,EAAC,MAAM;IACvC,IAAIzB,oBAAoB,EAAE;MACtBU,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACV,oBAAoB,CAAC,CAAC;EAE1B,MAAMqD,cAAc,GAAG,IAAA5B,kBAAW,EAAC,MAAM;IAAA,IAAA6B,sBAAA,EAAAC,qBAAA;IACrC,MAAM1B,IAAI,GAAGC,MAAM,EAAAwB,sBAAA,GAAC3C,aAAa,CAACoB,OAAO,cAAAuB,sBAAA,uBAArBA,sBAAA,CAAuB3D,KAAK,CAAC;IACjD,MAAMqC,EAAE,GAAGF,MAAM,EAAAyB,qBAAA,GAAC1C,WAAW,CAACkB,OAAO,cAAAwB,qBAAA,uBAAnBA,qBAAA,CAAqB5D,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAGmC,SAAS,GAAGJ,IAAI,EAC3B/B,QAAQ,GAAG;QAAEL,QAAQ,EAAEuC,EAAE;QAAEtC,QAAQ,EAAEmC;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;IAEA,IAAIjC,oBAAoB,EAAE;MACtBU,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EAAE,CAACZ,QAAQ,EAAEF,QAAQ,EAAEI,oBAAoB,CAAC,CAAC;EAE9C,OAAO,IAAA6C,cAAO,EACV,mBACI/E,MAAA,CAAAY,OAAA,CAAA8E,aAAA,CAACrF,OAAA,CAAAsF,YAAY;IAACC,GAAG,EAAE1C;EAAiB,gBAChClD,MAAA,CAAAY,OAAA,CAAA8E,aAAA,CAACrF,OAAA,CAAAwF,iBAAiB;IACdC,OAAO,EAAE;MAAEC,MAAM,EAAEpD,WAAW,GAAG,EAAE,GAAG;IAAG,CAAE;IAC3CqD,OAAO,EAAE;MAAED,MAAM,EAAE;IAAG,CAAE;IACxBE,IAAI,EAAE;MAAEF,MAAM,EAAE;IAAG,CAAE;IACrBG,WAAW,EAAEzD,UAAW;IACxBmD,GAAG,EAAE/C,aAAc;IACnBsD,WAAW,EAAE,CAAC,CAACnE,QAAS;IACxBoE,IAAI,EAAC,OAAO;IACZvE,KAAK,EAAEO,SAAU;IACjBiE,IAAI,EAAElE,KAAM;IACZ8C,GAAG,EAAEtD,QAAS;IACduD,GAAG,EAAEtD,QAAS;IACd0E,YAAY,EAAEhB,gBAAiB;IAC/BiB,UAAU,EAAEhB,cAAe;IAC3BxD,QAAQ,EAAE6C,iBAAkB;IAC5B4B,SAAS,EAAE9C,aAAc;IACzB+C,IAAI,EAAE9E,QAAS;IACf+E,IAAI,EAAE9E,QAAS;IACf+E,MAAM,EAAEvE;EAAU,CACrB,CAAC,eACFpC,MAAA,CAAAY,OAAA,CAAA8E,aAAA,CAACrF,OAAA,CAAAuG,iBAAiB;IACdhB,GAAG,EAAE5C,kBAAmB;IACxB6D,SAAS,EAAE/B,uBAAwB;IACnCgC,YAAY,EAAEnE;EAAY,GAEzBT,oBAAoB,iBACjBlC,MAAA,CAAAY,OAAA,CAAA8E,aAAA,CAACrF,OAAA,CAAA0G,sBAAsB,QAClB,OAAO9E,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACG,SAAS,CAAC,GAC9BA,SACc,CAEb,CAAC,EACnBJ,QAAQ,iBACLhC,MAAA,CAAAY,OAAA,CAAA8E,aAAA,CAACrF,OAAA,CAAAuG,iBAAiB;IACdhB,GAAG,EAAE3C,gBAAiB;IACtB4D,SAAS,EAAExB,qBAAsB;IACjCyB,YAAY,EAAEnE;EAAY,GAEzBT,oBAAoB,iBACjBlC,MAAA,CAAAY,OAAA,CAAA8E,aAAA,CAACrF,OAAA,CAAA0G,sBAAsB,QAClB,OAAO9E,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACM,OAAO,CAAC,GAC5BA,OACc,CAEb,CACtB,EACAP,QAAQ,iBACLhC,MAAA,CAAAY,OAAA,CAAA8E,aAAA,CAACrF,OAAA,CAAAwF,iBAAiB;IACdC,OAAO,EAAE;MAAEC,MAAM,EAAEpD,WAAW,GAAG,EAAE,GAAG;IAAG,CAAE;IAC3CqD,OAAO,EAAE;MAAED,MAAM,EAAE;IAAG,CAAE;IACxBE,IAAI,EAAE;MAAEF,MAAM,EAAE;IAAG,CAAE;IACrBG,WAAW,EAAEzD,UAAW;IACxBgE,IAAI,EAAE9E,QAAS;IACf+E,IAAI,EAAE9E,QAAS;IACf+E,MAAM,EAAEpE,OAAQ;IAChBqD,GAAG,EAAE7C,WAAY;IACjBoD,WAAW,EAAE,CAAC,CAACnE,QAAS;IACxBoE,IAAI,EAAC,OAAO;IACZvE,KAAK,EAAEU,OAAQ;IACf8D,IAAI,EAAElE,KAAM;IACZ8C,GAAG,EAAEtD,QAAS;IACduD,GAAG,EAAEtD,QAAS;IACd0E,YAAY,EAAEhB,gBAAiB;IAC/BiB,UAAU,EAAEhB,cAAe;IAC3BxD,QAAQ,EAAE4C,qBAAsB;IAChC6B,SAAS,EAAE9C;EAAc,CAC5B,CAEK,CACjB,EACD,CACIf,WAAW,EACXF,UAAU,EACVT,QAAQ,EACRI,SAAS,EACTD,KAAK,EACLR,QAAQ,EACRC,QAAQ,EACR0D,gBAAgB,EAChBC,cAAc,EACdX,iBAAiB,EACjBlB,aAAa,EACboB,uBAAuB,EACvB5C,oBAAoB,EACpBD,mBAAmB,EACnBoD,qBAAqB,EACrB9C,OAAO,EACPoC,qBAAqB,CAE7B,CAAC;AACL,CAAC;AAEDjD,MAAM,CAACsF,WAAW,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtG,OAAA,GAEfc,MAAM","ignoreList":[]}
+{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n    calculateGradientOffset,\n    calculatePopupPosition,\n    fillSlider,\n    getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: 35,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: toSliderThumbRef.current.offsetWidth,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const toSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: toValue,\n                popupWidth: thumbWidth,\n            }),\n        [maxValue, minValue, thumbWidth, toValue],\n    );\n\n    const fromSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: fromValue,\n                popupWidth: thumbWidth,\n            }),\n        [fromValue, maxValue, minValue, thumbWidth],\n    );\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={35}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel\n                            $width={thumbWidth}\n                            $isBigSlider={isBigSlider}\n                            $position={fromSliderThumbContentPosition}\n                            ref={fromSliderThumbContentRef}\n                        >\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel\n                                $width={thumbWidth}\n                                $isBigSlider={isBigSlider}\n                                $position={toSliderThumbContentPosition}\n                                ref={toSliderThumbContentRef}\n                            >\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={35}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbWidth,\n            fromSliderThumbContentPosition,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toSliderThumbContentPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider/Slider.styles.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = void 0;
 var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
     width: 100%;
     height: 30px;
@@ -29,7 +28,7 @@ const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.defa
 }) => ({
   style: {
     pointerEvents: $isInterval ? 'none' : 'all',
-    width: `calc(100% - ${$thumbWidth / 2}px)`,
+    width: `calc(100% - ${$thumbWidth}px)`,
     background: !$isInterval ? `linear-gradient(
             to right,
             ${theme['409'] ?? ''} 0%,
@@ -74,10 +73,12 @@ const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.defa
     }
 `;
 const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.div.attrs(({
-  $position
+  $position,
+  $isBigSlider
 }) => ({
   style: {
-    left: `${$position}px`
+    left: `${$position}px`,
+    height: `${$isBigSlider ? 0 : 20}px`
   }
 }))`
     min-width: 20px;
@@ -97,42 +98,64 @@ const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.
     top: 5px;
 
     transition: top 0.2s ease 0s;
-
-    ${({
-  $isBigSlider
-}) => $isBigSlider && (0, _styledComponents.css)`
-            top: -30px;
-
-            &::after {
-                background-color: inherit;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-                border-right: 1px solid rgba(0, 0, 0, 0.1);
-                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
-                content: '';
-                height: 14px;
-                position: absolute;
-                width: 14px;
-                z-index: -2;
-
-                transform: rotate(225deg);
-                bottom: -7px;
-            }
-
-            &::before {
-                background-color: inherit;
-                bottom: 0;
-                content: '';
-                left: 0;
-                position: absolute;
-                right: 0;
-                border-radius: 3px;
-                top: 0;
-                z-index: -1;
-            }
-        `}
 `;
 const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponents.default.span`
     pointer-events: none;
     color: #222;
+
+    min-width: ${({
+  $width
+}) => $width}px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 3px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    z-index: 3;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    white-space: nowrap;
+
+    transition: top 0.2s ease 0s;
+
+    left: ${({
+  $position
+}) => $position}px;
+
+    top: ${({
+  $isBigSlider
+}) => `-${$isBigSlider ? 45 : 35}px`};
+
+    &::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+        left: ${({
+  $position
+}) => $position * -1}px;
+        transform: rotate(225deg);
+        bottom: -7px;
+    }
+
+    &::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        border-radius: 3px;
+        top: 0;
+        z-index: -1;
+    }
 `;
 //# sourceMappingURL=Slider.styles.js.map

package/lib/cjs/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","left","$isBigSlider","css","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth / 2}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number; $isBigSlider: boolean }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n    style: {\n        left: `${$position}px`,\n    },\n}))`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n\n    ${({ $isBigSlider }) =>\n        $isBigSlider &&\n        css`\n            top: -30px;\n\n            &::after {\n                background-color: inherit;\n                border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n                border-right: 1px solid rgba(0, 0, 0, 0.1);\n                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n                content: '';\n                height: 14px;\n                position: absolute;\n                width: 14px;\n                z-index: -2;\n\n                transform: rotate(225deg);\n                bottom: -7px;\n            }\n\n            &::before {\n                background-color: inherit;\n                bottom: 0;\n                content: '';\n                left: 0;\n                position: absolute;\n                right: 0;\n                border-radius: 3px;\n                top: 0;\n                z-index: -1;\n            }\n        `}\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n\n    min-width: ${({ $width }) => $width}px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    left: ${({ $position }) => $position}px;\n\n    top: ${({ $isBigSlider }) => `-${$isBigSlider ? 45 : 35}px`};\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACC,KAAK,CAAC,CAACC,KAAK,CACvD,CAAC;EAAEC,WAAW;EAAEC,MAAM;EAAEC,WAAW;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAM,CAAC,MAAM;EAC1DC,KAAK,EAAE;IACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CQ,KAAK,EAAE,eAAeN,WAAW,KAAK;IACtCO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMC,iBAAiB,GAAAlB,OAAA,CAAAkB,iBAAA,GAAGjB,yBAAM,CAACC,GAAG,CAACI,KAAK,CAC7C,CAAC;EAAEa,SAAS;EAAEC;AAAa,CAAC,MAAM;EAC9BP,KAAK,EAAE;IACHQ,IAAI,EAAE,GAAGF,SAAS,IAAI;IACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;EACpC;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMG,sBAAsB,GAAAvB,OAAA,CAAAuB,sBAAA,GAAGtB,yBAAM,CAACuB,IAAiC;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEN;AAAU,CAAC,KAAKA,SAAS;AACxC;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAK,IAAIA,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,CAAC;EAAED;AAAU,CAAC,KAAKA,SAAS,GAAG,CAAC,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/utils/slider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getThumbMaxWidth = exports.fillSlider = exports.calculateGradientOffset = void 0;
+exports.getThumbMaxWidth = exports.fillSlider = exports.calculatePopupPosition = exports.calculateGradientOffset = void 0;
 const fillSlider = ({
   fromSlider,
   toSlider,
@@ -42,9 +42,26 @@ const calculateGradientOffset = ({
 }) => {
   const percentage = (value - min) / (max - min);
   const adjustedWidth = containerWidth - thumbWidth * 0.25;
-  return percentage * adjustedWidth;
+  return percentage * adjustedWidth + thumbWidth / 2;
 };
 exports.calculateGradientOffset = calculateGradientOffset;
+const calculatePopupPosition = ({
+  sliderValue,
+  min,
+  max,
+  popupWidth
+}) => {
+  // Berechnung des Prozentwerts des Sliders zwischen min und max
+  const percentage = (sliderValue - min) / (max - min);
+
+  // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)
+  const leftAtMin = -10;
+  const leftAtMax = -popupWidth + 25;
+
+  // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert
+  return leftAtMin + percentage * (leftAtMax - leftAtMin);
+};
+exports.calculatePopupPosition = calculatePopupPosition;
 const getThumbMaxWidth = ({
   maxNumber,
   thumbLabelFormatter

package/lib/cjs/utils/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","calculateGradientOffset","thumbWidth","containerWidth","percentage","adjustedWidth","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n    value: number;\n    min: number;\n    max: number;\n    thumbWidth: number;\n    containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n    value,\n    min,\n    max,\n    thumbWidth,\n    containerWidth,\n}: CalculateGradientOffset): number => {\n    const percentage = (value - min) / (max - min);\n\n    const adjustedWidth = containerWidth - thumbWidth * 0.25;\n\n    return percentage * adjustedWidth;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '0 8px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":";;;;;;AAQO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,UAAU;EAAEC,QAAQ;EAAEC;AAAkB,CAAC,KAAK;EACvE,MAAMC,aAAa,GAAGC,MAAM,CAACH,QAAQ,CAACI,GAAG,CAAC,GAAGD,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACjE,MAAMC,YAAY,GAAGH,MAAM,CAACJ,UAAU,CAACQ,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACpE,MAAMG,UAAU,GAAGL,MAAM,CAACH,QAAQ,CAACO,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EAEhE,MAAMI,eAAe,GAAGR,KAAK,CAAC,KAAK,CAAC;EACpC,MAAMS,UAAU,GAAGT,KAAK,CAAC,KAAK,CAAC;EAE/B,IAAI,CAACQ,eAAe,IAAI,CAACC,UAAU,EAAE;IACjC;EACJ;EAEA,MAAMC,QAAQ,GAAG;AACrB;AACA,QAAQF,eAAe;AACvB,QAAQA,eAAe,IAAKH,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC/D,QAAQQ,UAAU,IAAKJ,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC1D,QAAQQ,UAAU,IAAKF,UAAU,GAAGN,aAAa,GAAI,GAAG;AACxD,QAAQO,eAAe,IAAKD,UAAU,GAAGN,aAAa,GAAI,GAAG;AAC7D,QAAQO,eAAe,QAAQ;;EAE3B;EACA;EACAT,QAAQ,CAACY,KAAK,CAACC,UAAU,GAAGF,QAAQ;EACpC;EACAZ,UAAU,CAACa,KAAK,CAACC,UAAU,GAAGF,QAAQ;AAC1C,CAAC;AAACG,OAAA,CAAAhB,UAAA,GAAAA,UAAA;AAUK,MAAMiB,uBAAuB,GAAGA,CAAC;EACpCR,KAAK;EACLF,GAAG;EACHD,GAAG;EACHY,UAAU;EACVC;AACqB,CAAC,KAAa;EACnC,MAAMC,UAAU,GAAG,CAACX,KAAK,GAAGF,GAAG,KAAKD,GAAG,GAAGC,GAAG,CAAC;EAE9C,MAAMc,aAAa,GAAGF,cAAc,GAAGD,UAAU,GAAG,IAAI;EAExD,OAAOE,UAAU,GAAGC,aAAa;AACrC,CAAC;AAACL,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAOK,MAAMK,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAA6C,CAAC,KAAK;EAC7F,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;EAE9CF,OAAO,CAACX,KAAK,CAACc,MAAM,GAAG,MAAM;EAC7BH,OAAO,CAACX,KAAK,CAACe,OAAO,GAAG,MAAM;EAC9BJ,OAAO,CAACX,KAAK,CAACgB,OAAO,GAAG,OAAO;EAC/BL,OAAO,CAACX,KAAK,CAACiB,UAAU,GAAG,QAAQ;EACnCN,OAAO,CAACX,KAAK,CAACkB,QAAQ,GAAG,MAAM;EAC/BP,OAAO,CAACX,KAAK,CAACmB,OAAO,GAAG,GAAG;EAC3BR,OAAO,CAACX,KAAK,CAACoB,QAAQ,GAAG,UAAU;EAEnCT,OAAO,CAACU,WAAW,GACf,OAAOX,mBAAmB,KAAK,UAAU,GACnCA,mBAAmB,CAACD,SAAS,CAAC,GAC9Ba,MAAM,CAACb,SAAS,CAAC;EAE3BG,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,OAAO,CAAC;EAElC,MAAMc,KAAK,GAAGd,OAAO,CAACe,WAAW;EAEjCd,QAAQ,CAACW,IAAI,CAACI,WAAW,CAAChB,OAAO,CAAC;EAElC,OAAOc,KAAK;AAChB,CAAC;AAACvB,OAAA,CAAAM,gBAAA,GAAAA,gBAAA","ignoreList":[]}
+{"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","calculateGradientOffset","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n    value: number;\n    min: number;\n    max: number;\n    thumbWidth: number;\n    containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n    value,\n    min,\n    max,\n    thumbWidth,\n    containerWidth,\n}: CalculateGradientOffset): number => {\n    const percentage = (value - min) / (max - min);\n\n    const adjustedWidth = containerWidth - thumbWidth * 0.25;\n\n    return percentage * adjustedWidth + thumbWidth / 2;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n    sliderValue: number;\n    min: number;\n    max: number;\n    popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n    sliderValue,\n    min,\n    max,\n    popupWidth,\n}: CalculatePopupPositionOptions) => {\n    // Berechnung des Prozentwerts des Sliders zwischen min und max\n    const percentage = (sliderValue - min) / (max - min);\n\n    // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n    const leftAtMin = -10;\n    const leftAtMax = -popupWidth + 25;\n\n    // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n    return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '0 8px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":";;;;;;AAQO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,UAAU;EAAEC,QAAQ;EAAEC;AAAkB,CAAC,KAAK;EACvE,MAAMC,aAAa,GAAGC,MAAM,CAACH,QAAQ,CAACI,GAAG,CAAC,GAAGD,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACjE,MAAMC,YAAY,GAAGH,MAAM,CAACJ,UAAU,CAACQ,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACpE,MAAMG,UAAU,GAAGL,MAAM,CAACH,QAAQ,CAACO,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EAEhE,MAAMI,eAAe,GAAGR,KAAK,CAAC,KAAK,CAAC;EACpC,MAAMS,UAAU,GAAGT,KAAK,CAAC,KAAK,CAAC;EAE/B,IAAI,CAACQ,eAAe,IAAI,CAACC,UAAU,EAAE;IACjC;EACJ;EAEA,MAAMC,QAAQ,GAAG;AACrB;AACA,QAAQF,eAAe;AACvB,QAAQA,eAAe,IAAKH,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC/D,QAAQQ,UAAU,IAAKJ,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC1D,QAAQQ,UAAU,IAAKF,UAAU,GAAGN,aAAa,GAAI,GAAG;AACxD,QAAQO,eAAe,IAAKD,UAAU,GAAGN,aAAa,GAAI,GAAG;AAC7D,QAAQO,eAAe,QAAQ;;EAE3B;EACA;EACAT,QAAQ,CAACY,KAAK,CAACC,UAAU,GAAGF,QAAQ;EACpC;EACAZ,UAAU,CAACa,KAAK,CAACC,UAAU,GAAGF,QAAQ;AAC1C,CAAC;AAACG,OAAA,CAAAhB,UAAA,GAAAA,UAAA;AAUK,MAAMiB,uBAAuB,GAAGA,CAAC;EACpCR,KAAK;EACLF,GAAG;EACHD,GAAG;EACHY,UAAU;EACVC;AACqB,CAAC,KAAa;EACnC,MAAMC,UAAU,GAAG,CAACX,KAAK,GAAGF,GAAG,KAAKD,GAAG,GAAGC,GAAG,CAAC;EAE9C,MAAMc,aAAa,GAAGF,cAAc,GAAGD,UAAU,GAAG,IAAI;EAExD,OAAOE,UAAU,GAAGC,aAAa,GAAGH,UAAU,GAAG,CAAC;AACtD,CAAC;AAACF,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAcK,MAAMK,sBAAsB,GAAGA,CAAC;EACnCC,WAAW;EACXhB,GAAG;EACHD,GAAG;EACHkB;AAC2B,CAAC,KAAK;EACjC;EACA,MAAMJ,UAAU,GAAG,CAACG,WAAW,GAAGhB,GAAG,KAAKD,GAAG,GAAGC,GAAG,CAAC;;EAEpD;EACA,MAAMkB,SAAS,GAAG,CAAC,EAAE;EACrB,MAAMC,SAAS,GAAG,CAACF,UAAU,GAAG,EAAE;;EAElC;EACA,OAAOC,SAAS,GAAGL,UAAU,IAAIM,SAAS,GAAGD,SAAS,CAAC;AAC3D,CAAC;AAACT,OAAA,CAAAM,sBAAA,GAAAA,sBAAA;AAEK,MAAMK,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAA6C,CAAC,KAAK;EAC7F,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;EAE9CF,OAAO,CAAChB,KAAK,CAACmB,MAAM,GAAG,MAAM;EAC7BH,OAAO,CAAChB,KAAK,CAACoB,OAAO,GAAG,MAAM;EAC9BJ,OAAO,CAAChB,KAAK,CAACqB,OAAO,GAAG,OAAO;EAC/BL,OAAO,CAAChB,KAAK,CAACsB,UAAU,GAAG,QAAQ;EACnCN,OAAO,CAAChB,KAAK,CAACuB,QAAQ,GAAG,MAAM;EAC/BP,OAAO,CAAChB,KAAK,CAACwB,OAAO,GAAG,GAAG;EAC3BR,OAAO,CAAChB,KAAK,CAACyB,QAAQ,GAAG,UAAU;EAEnCT,OAAO,CAACU,WAAW,GACf,OAAOX,mBAAmB,KAAK,UAAU,GACnCA,mBAAmB,CAACD,SAAS,CAAC,GAC9Ba,MAAM,CAACb,SAAS,CAAC;EAE3BG,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,OAAO,CAAC;EAElC,MAAMc,KAAK,GAAGd,OAAO,CAACe,WAAW;EAEjCd,QAAQ,CAACW,IAAI,CAACI,WAAW,CAAChB,OAAO,CAAC;EAElC,OAAOc,KAAK;AAChB,CAAC;AAAC5B,OAAA,CAAAW,gBAAA,GAAAA,gBAAA","ignoreList":[]}