@chayns-components/core 5.0.0-beta.363 → 5.0.0-beta.366

package/lib/components/popup/Popup.d.ts

@@ -21,6 +21,10 @@ export type PopupProps = {
      * Whether the popup should be opened on hover. If not, the popup will be opened on click.
      */
     shouldShowOnHover?: boolean;
+    /**
+     * The Y offset of the popup to the children.
+     */
+    yOffset?: number;
 };
 declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupRef>>;
 export default Popup;

package/lib/components/popup/Popup.js

@@ -21,7 +21,8 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onShow,
     onHide,
     children,
-    shouldShowOnHover = false
+    shouldShowOnHover = false,
+    yOffset = 0
   } = _ref;
   const [coordinates, setCoordinates] = (0, _react.useState)({
     x: 0,
@@ -58,7 +59,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         }
         setCoordinates({
           x: childrenLeft + childrenWidth / 2,
-          y: childrenTop + childrenHeight + 4
+          y: childrenTop + childrenHeight + 4 - yOffset
         });
       } else {
         if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
@@ -68,12 +69,12 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         }
         setCoordinates({
           x: childrenLeft + childrenWidth / 2,
-          y: childrenTop - 4
+          y: childrenTop - 4 + yOffset
         });
       }
       setIsOpen(true);
     }
-  }, []);
+  }, [yOffset]);
   const handleChildrenClick = () => {
     if (!shouldShowOnHover) {
       handleShow();

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseLeave","onMouseEnter","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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\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 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\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\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                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop + childrenHeight + 4,\n                    });\n                } else {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop - 4,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, []);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = () => {\n            if (shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleMouseLeave = () => {\n            if (shouldShowOnHover) {\n                handleHide();\n            }\n        };\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    if (!shouldShowOnHover) {\n                        handleHide();\n                    }\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                            <PopupContent\n                                coordinates={coordinates}\n                                content={content}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container\n                )\n            );\n        }, [alignment, container, content, coordinates, isOpen, uuid]);\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                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    }\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}
+{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseLeave","onMouseEnter","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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\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 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     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\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                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop + childrenHeight + 4 - yOffset,\n                    });\n                } else {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop - 4 + yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [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 = () => {\n            if (shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleMouseLeave = () => {\n            if (shouldShowOnHover) {\n                handleHide();\n            }\n        };\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    if (!shouldShowOnHover) {\n                        handleHide();\n                    }\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                            <PopupContent\n                                coordinates={coordinates}\n                                content={content}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [alignment, container, content, coordinates, isOpen, uuid]);\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                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AAUA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AAAqE,SAAAO,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,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,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AA6BrE,MAAMY,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CAAAC,IAAA,EAAgFC,GAAG,KAAK;EAAA,IAAvF;IAAEC,OAAO;IAAEC,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,iBAAiB,GAAG,KAAK;IAAEC,OAAO,GAAG;EAAE,CAAC,GAAAP,IAAA;EAC1E,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAmB;IAC7DC,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,IAAID,QAAQ,CAACE,IAAI;EAElE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAR,eAAQ,EAAiBS,qBAAc,CAACC,OAAO,CAAC;EAClF,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAZ,eAAQ,EAAC,KAAK,CAAC;EAC3C,MAAM,CAACa,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAd,eAAQ,EAAc,CAAC;EACnD,MAAM,CAACe,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAhB,eAAQ,EAAC,CAAC,CAAC;EAE/C,MAAMiB,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;;EAEtB;EACA,MAAMC,eAAe,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACpD,MAAMC,qBAAqB,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC1D,MAAME,QAAQ,GAAG,IAAAF,aAAM,EAAiB,IAAI,CAAC;EAE7C,MAAMG,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjC,IAAIF,QAAQ,CAACG,OAAO,IAAIJ,qBAAqB,CAACI,OAAO,EAAE;MACnD,MAAM;QAAEC,MAAM,EAAEC,YAAY;QAAEC,KAAK,EAAEC;MAAY,CAAC,GAC9CR,qBAAqB,CAACI,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAEzD,MAAM;QACFJ,MAAM,EAAEK,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBP,KAAK,EAAEQ;MACX,CAAC,GAAGd,QAAQ,CAACG,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAE5C,IAAIH,YAAY,GAAGQ,WAAW,GAAG,EAAE,EAAE;QACjC,IAAIN,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD5B,YAAY,CAACC,qBAAc,CAAC4B,WAAW,CAAC;QAC5C,CAAC,MAAM;UACH7B,YAAY,CAACC,qBAAc,CAAC6B,UAAU,CAAC;QAC3C;QAEAvC,cAAc,CAAC;UACXE,CAAC,EAAEgC,YAAY,GAAGG,aAAa,GAAG,CAAC;UACnClC,CAAC,EAAEiC,WAAW,GAAGJ,cAAc,GAAG,CAAC,GAAGlC;QAC1C,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAIgC,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD5B,YAAY,CAACC,qBAAc,CAAC8B,QAAQ,CAAC;QACzC,CAAC,MAAM;UACH/B,YAAY,CAACC,qBAAc,CAACC,OAAO,CAAC;QACxC;QAEAX,cAAc,CAAC;UACXE,CAAC,EAAEgC,YAAY,GAAGG,aAAa,GAAG,CAAC;UACnClC,CAAC,EAAEiC,WAAW,GAAG,CAAC,GAAGtC;QACzB,CAAC,CAAC;MACN;MAEAe,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACf,OAAO,CAAC,CAAC;EAEb,MAAM2C,mBAAmB,GAAGA,CAAA,KAAM;IAC9B,IAAI,CAAC5C,iBAAiB,EAAE;MACpB2B,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMkB,UAAU,GAAG,IAAAjB,kBAAW,EAAC,MAAM;IACjCZ,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM8B,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI9C,iBAAiB,EAAE;MACnB2B,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMoB,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI/C,iBAAiB,EAAE;MACnB6C,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMG,mBAAmB,GAAG,IAAApB,kBAAW,EAClCqB,KAAK,IAAK;IACP,IAAI,CAAC1B,eAAe,CAACM,OAAO,EAAEqB,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EAAE;MAC1DF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBH,KAAK,CAACI,eAAe,CAAC,CAAC;MAEvB,IAAI,CAACrD,iBAAiB,EAAE;QACpB6C,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EACD,CAACA,UAAU,EAAE7C,iBAAiB,CAClC,CAAC;EAED,IAAAsD,0BAAmB,EACf3D,GAAG,EACH,OAAO;IACH4D,IAAI,EAAEV,UAAU;IAChBW,IAAI,EAAE7B;EACV,CAAC,CAAC,EACF,CAACkB,UAAU,EAAElB,UAAU,CAC3B,CAAC;EAED,IAAA8B,gBAAS,EAAC,MAAM;IACZ,KAAK,IAAAC,2BAAgB,EAAC,CAAC,CAACC,IAAI,CAAEC,MAAM,IAAK;MACrC,IAAIA,MAAM,CAACC,YAAY,EAAE;QACrBzC,aAAa,CAACwC,MAAM,CAACC,YAAY,CAAC;MACtC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAJ,gBAAS,EAAC,MAAM;IACZ,IAAI1C,MAAM,EAAE;MACRP,QAAQ,CAACsD,gBAAgB,CAAC,OAAO,EAAEd,mBAAmB,EAAE,IAAI,CAAC;MAC7De,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAEjB,UAAU,CAAC;MAE3C,IAAI,OAAOhD,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTU,QAAQ,CAACwD,mBAAmB,CAAC,OAAO,EAAEhB,mBAAmB,EAAE,IAAI,CAAC;MAChEe,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAEnB,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACG,mBAAmB,EAAEH,UAAU,EAAE9B,MAAM,EAAEjB,MAAM,EAAED,MAAM,CAAC,CAAC;EAE7D,IAAA4D,gBAAS,EAAC,MAAM;IACZvC,SAAS,CAAC,mBACN,IAAA+C,sBAAY,gBACRvG,MAAA,CAAAU,OAAA,CAAA8F,aAAA,CAACzG,aAAA,CAAA0G,eAAe;MAACC,OAAO,EAAE;IAAM,GAC3BrD,MAAM,iBACHrD,MAAA,CAAAU,OAAA,CAAA8F,aAAA,CAACpG,aAAA,CAAAM,OAAY;MACT8B,WAAW,EAAEA,WAAY;MACzBN,OAAO,EAAEA,OAAQ;MACjByE,GAAG,EAAG,WAAUhD,IAAK,EAAE;MACvBV,SAAS,EAAEA,SAAU;MACrBhB,GAAG,EAAE4B;IAAgB,CACxB,CAEQ,CAAC,EAClBhB,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACI,SAAS,EAAEJ,SAAS,EAAEX,OAAO,EAAEM,WAAW,EAAEa,MAAM,EAAEM,IAAI,CAAC,CAAC;EAE9D,oBACI3D,MAAA,CAAAU,OAAA,CAAA8F,aAAA,CAAAxG,MAAA,CAAAU,OAAA,CAAAkG,QAAA,qBACI5G,MAAA,CAAAU,OAAA,CAAA8F,aAAA,CAAClG,MAAA,CAAAuG,iBAAiB;IAAC5E,GAAG,EAAE8B,qBAAsB;IAACN,UAAU,EAAEA;EAAW,GACjEvB,OACc,CAAC,eACpBlC,MAAA,CAAAU,OAAA,CAAA8F,aAAA,CAAClG,MAAA,CAAAwG,WAAW;IACR7E,GAAG,EAAE+B,QAAS;IACd+C,OAAO,EAAE7B,mBAAoB;IAC7B8B,YAAY,EAAE3B,gBAAiB;IAC/B4B,YAAY,EAAE7B;EAAiB,GAE9B/C,QACQ,CAAC,EACbkB,MACH,CAAC;AAEX,CACJ,CAAC;AAEDzB,KAAK,CAACoF,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1G,OAAA,GAEboB,KAAK"}

package/lib/components/popup/popup-content/PopupContent.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _chaynsApi = require("chayns-api");
 var _react = _interopRequireDefault(require("react"));
+var _colorMode = require("../../../hooks/colorMode");
 var _types = require("../types");
 var _PopupContent = require("./PopupContent.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -15,9 +15,7 @@ const PopupContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     coordinates,
     content
   } = _ref;
-  const {
-    colorMode
-  } = (0, _chaynsApi.getSite)();
+  const colorMode = (0, _colorMode.useColorMode)();
   const isBottomLeftAlignment = alignment === _types.PopupAlignment.BottomLeft;
   const isTopLeftAlignment = alignment === _types.PopupAlignment.TopLeft;
   const isTopRightAlignment = alignment === _types.PopupAlignment.TopRight;

package/lib/components/popup/popup-content/PopupContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContent.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_types","_PopupContent","obj","__esModule","default","PopupContent","React","forwardRef","_ref","ref","alignment","coordinates","content","colorMode","getSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContent","animate","opacity","y","exit","initial","position","style","left","x","top","transition","type","transformTemplate","_ref2","StyledPopupContentInner","displayName","_default","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { ReactNode } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../types';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content }, ref) => {\n        const { colorMode } = getSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAA0F,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQ1F,MAAMG,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACjC,CAAAC,IAAA,EAAsCC,GAAG,KAAK;EAAA,IAA7C;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EAChC,MAAM;IAAEK;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGL,SAAS,KAAKM,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGR,SAAS,KAAKM,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGV,SAAS,KAAKM,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACItB,MAAA,CAAAM,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA2B,wBAAwB;IACrBC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BlB,SAAS,EAAEA,SAAU;IACrBmB,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,QAAQ,EAAExB,SAAU;IACpBD,GAAG,EAAEA,GAAI;IACT0B,KAAK,EAAE;MAAEC,IAAI,EAAEzB,WAAW,CAAC0B,CAAC;MAAEC,GAAG,EAAE3B,WAAW,CAACoB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEX,CAAC,GAAG;MAAM,CAAC,GAAAW,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEFjC,MAAA,CAAAM,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA0C,uBAAuB,QAAE/B,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDP,YAAY,CAACuC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAE3BC,YAAY"}
+{"version":3,"file":"PopupContent.js","names":["_react","_interopRequireDefault","require","_colorMode","_types","_PopupContent","obj","__esModule","default","PopupContent","React","forwardRef","_ref","ref","alignment","coordinates","content","colorMode","useColorMode","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContent","animate","opacity","y","exit","initial","position","style","left","x","top","transition","type","transformTemplate","_ref2","StyledPopupContentInner","displayName","_default","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useColorMode } from '../../../hooks/colorMode';\nimport { PopupAlignment, PopupCoordinates } from '../types';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content }, ref) => {\n        const colorMode = useColorMode();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAA0F,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQ1F,MAAMG,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACjC,CAAAC,IAAA,EAAsCC,GAAG,KAAK;EAAA,IAA7C;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EAChC,MAAMK,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAEhC,MAAMC,qBAAqB,GAAGL,SAAS,KAAKM,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGR,SAAS,KAAKM,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGV,SAAS,KAAKM,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIxB,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA2B,wBAAwB;IACrBC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BlB,SAAS,EAAEA,SAAU;IACrBmB,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,QAAQ,EAAExB,SAAU;IACpBD,GAAG,EAAEA,GAAI;IACT0B,KAAK,EAAE;MAAEC,IAAI,EAAEzB,WAAW,CAAC0B,CAAC;MAAEC,GAAG,EAAE3B,WAAW,CAACoB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEX,CAAC,GAAG;MAAM,CAAC,GAAAW,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEFnC,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA0C,uBAAuB,QAAE/B,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDP,YAAY,CAACuC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAE3BC,YAAY"}

package/lib/components/truncation/Truncation.js

@@ -36,11 +36,7 @@ const Truncation = _ref => {
     });
   }, [onChange]);
   const handleAnimationEnd = (0, _react.useCallback)(() => {
-    if (!isOpen) {
-      setShouldShowCollapsedElement(true);
-    } else {
-      setShouldShowCollapsedElement(false);
-    }
+    setShouldShowCollapsedElement(!isOpen);
   }, [isOpen]);
   (0, _react.useEffect)(() => {
     if (!pseudoChildrenRef.current) {
@@ -59,19 +55,11 @@ const Truncation = _ref => {
   }, [collapsedHeight, newCollapsedHeight, originalHeight]);
   (0, _react.useEffect)(() => {
     if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {
-      if (shouldShowCollapsedElement && !isOpen) {
-        while (childrenRef.current.firstChild) {
-          childrenRef.current.removeChild(childrenRef.current.firstChild);
-        }
-        childrenRef.current.appendChild(pseudoChildrenRef.current);
-        childrenRef.current.children[0].style.visibility = 'visible';
-      } else {
-        while (childrenRef.current.firstChild) {
-          childrenRef.current.removeChild(childrenRef.current.firstChild);
-        }
-        childrenRef.current.appendChild(originalChildrenRef.current);
-        childrenRef.current.children[0].style.visibility = 'visible';
+      while (childrenRef.current.firstChild) {
+        childrenRef.current.removeChild(childrenRef.current.firstChild);
       }
+      childrenRef.current.appendChild(shouldShowCollapsedElement && !isOpen ? pseudoChildrenRef.current : originalChildrenRef.current);
+      childrenRef.current.children[0].style.visibility = 'visible';
     }
   }, [children, isOpen, shouldShowCollapsedElement]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncation, {

package/lib/components/truncation/Truncation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_Truncation","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Truncation","_ref","collapsedHeight","moreLabel","lessLabel","onChange","children","isOpen","setIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","pseudoChildrenRef","useRef","childrenRef","originalChildrenRef","handleClampClick","useCallback","event","current","handleAnimationEnd","useEffect","offsetHeight","truncateElement","firstChild","removeChild","appendChild","style","visibility","useMemo","createElement","StyledTruncation","className","StyledTruncationPseudoContent","ref","StyledMotionTruncationContent","animate","height","initial","transition","type","onAnimationComplete","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        if (!isOpen) {\n            setShouldShowCollapsedElement(true);\n        } else {\n            setShouldShowCollapsedElement(false);\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            if (shouldShowCollapsedElement && !isOpen) {\n                while (childrenRef.current.firstChild) {\n                    childrenRef.current.removeChild(childrenRef.current.firstChild);\n                }\n\n                childrenRef.current.appendChild(pseudoChildrenRef.current);\n\n                (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n            } else {\n                while (childrenRef.current.firstChild) {\n                    childrenRef.current.removeChild(childrenRef.current.firstChild);\n                }\n\n                childrenRef.current.appendChild(originalChildrenRef.current);\n\n                (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n            }\n        }\n    }, [children, isOpen, shouldShowCollapsedElement]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\">\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: isOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                    onAnimationComplete={handleAnimationEnd}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClamp onClick={handleClampClick}>\n                        {isOpen ? lessLabel : moreLabel}\n                    </StyledTruncationClamp>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            handleAnimationEnd,\n            handleClampClick,\n            isOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}
+{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_Truncation","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Truncation","_ref","collapsedHeight","moreLabel","lessLabel","onChange","children","isOpen","setIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","pseudoChildrenRef","useRef","childrenRef","originalChildrenRef","handleClampClick","useCallback","event","current","handleAnimationEnd","useEffect","offsetHeight","truncateElement","firstChild","removeChild","appendChild","style","visibility","useMemo","createElement","StyledTruncation","className","StyledTruncationPseudoContent","ref","StyledMotionTruncationContent","animate","height","initial","transition","type","onAnimationComplete","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        setShouldShowCollapsedElement(!isOpen);\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !isOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, isOpen, shouldShowCollapsedElement]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\">\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: isOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                    onAnimationComplete={handleAnimationEnd}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClamp onClick={handleClampClick}>\n                        {isOpen ? lessLabel : moreLabel}\n                    </StyledTruncationClamp>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            handleAnimationEnd,\n            handleClampClick,\n            isOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}

package/lib/hooks/colorMode.d.ts

@@ -0,0 +1,2 @@
+import type { ColorMode } from 'chayns-api';
+export declare const useColorMode: () => ColorMode;

package/lib/hooks/colorMode.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorMode = void 0;
+var _react = require("react");
+const useColorMode = () => {
+  const [colorMode, setColorMode] = (0, _react.useState)(chayns.env.site.colorMode);
+  (0, _react.useEffect)(() => {
+    const listener = () => {
+      setColorMode(chayns.env.site.colorMode);
+    };
+    void chayns.addDesignSettingsChangeListener(listener);
+    return () => {
+      void chayns.removeDesignSettingsChangeListener(listener);
+    };
+  }, []);
+  return colorMode;
+};
+exports.useColorMode = useColorMode;
+//# sourceMappingURL=colorMode.js.map

package/lib/hooks/colorMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorMode.js","names":["_react","require","useColorMode","colorMode","setColorMode","useState","chayns","env","site","useEffect","listener","addDesignSettingsChangeListener","removeDesignSettingsChangeListener","exports"],"sources":["../../src/hooks/colorMode.ts"],"sourcesContent":["import type { ColorMode } from 'chayns-api';\nimport { useEffect, useState } from 'react';\n\nexport const useColorMode = (): ColorMode => {\n    const [colorMode, setColorMode] = useState<ColorMode>(chayns.env.site.colorMode);\n\n    useEffect(() => {\n        const listener = () => {\n            setColorMode(chayns.env.site.colorMode);\n        };\n\n        void chayns.addDesignSettingsChangeListener(listener);\n\n        return () => {\n            void chayns.removeDesignSettingsChangeListener(listener);\n        };\n    }, []);\n\n    return colorMode;\n};\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,MAAMC,YAAY,GAAGA,CAAA,KAAiB;EACzC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAYC,MAAM,CAACC,GAAG,CAACC,IAAI,CAACL,SAAS,CAAC;EAEhF,IAAAM,gBAAS,EAAC,MAAM;IACZ,MAAMC,QAAQ,GAAGA,CAAA,KAAM;MACnBN,YAAY,CAACE,MAAM,CAACC,GAAG,CAACC,IAAI,CAACL,SAAS,CAAC;IAC3C,CAAC;IAED,KAAKG,MAAM,CAACK,+BAA+B,CAACD,QAAQ,CAAC;IAErD,OAAO,MAAM;MACT,KAAKJ,MAAM,CAACM,kCAAkC,CAACF,QAAQ,CAAC;IAC5D,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOP,SAAS;AACpB,CAAC;AAACU,OAAA,CAAAX,YAAA,GAAAA,YAAA"}

package/lib/types/chayns.d.ts

@@ -8,6 +8,8 @@ export interface Chayns {
     openVideo(url: string): Promise<void>;
     register(config: object): any;
     getWindowMetrics(): Promise<WindowMetrics>;
+    addDesignSettingsChangeListener(callback: () => any): Promise<any>;
+    removeDesignSettingsChangeListener(callback: () => any): Promise<any>;
 }
 export interface WindowMetrics {
     bottomBarHeight: number;
@@ -99,6 +101,7 @@ export interface User {
 }
 export interface Site {
     id: string;
+    colorMode: 0 | 1 | 2;
 }
 export interface Env {
     site: Site;

package/lib/types/chayns.js.map

@@ -1 +1 @@
-{"version":3,"file":"chayns.js","names":["ButtonType","exports"],"sources":["../../src/types/chayns.ts"],"sourcesContent":["declare global {\n    let chayns: Chayns;\n}\n\nexport interface Chayns {\n    dialog: Dialog;\n    env: Env;\n    openImage(urls: string | string[], start?: number): Promise<undefined>;\n    openVideo(url: string): Promise<void>;\n    register(config: object): any;\n    getWindowMetrics(): Promise<WindowMetrics>;\n}\n\nexport interface WindowMetrics {\n    bottomBarHeight: number;\n    coverHeight: 0;\n    frameX: number;\n    frameY: number;\n    height: number;\n    menuHeight: number;\n    offsetTop: number;\n    pageYOffset: number;\n    scrollTop: number;\n    windowHeight: number;\n    windowWidth: number;\n}\n\nexport interface Dialog {\n    select(config: {\n        title?: string;\n        message?: string;\n        list: Array<SelectDialogItem>;\n        multiselect?: boolean;\n        type?: SelectType;\n        preventCloseOnClick?: boolean;\n        buttons?: DialogButton[];\n        selectAllButton?: string;\n    }): Promise<SelectDialogResult>;\n    alert(headline: string, text: string): Promise<ButtonType>;\n    iFrame(config: {\n        url: string;\n        input?: object;\n        title?: string;\n        message?: string;\n        buttons?: DialogButton[];\n        seamless?: boolean;\n        transparent?: boolean;\n        waitCursor?: boolean;\n        maxHeight?: string;\n        width?: number;\n        customTransitionTimeout?: number;\n    }): Promise<any>;\n}\n\ndeclare enum ButtonText {\n    Cancel = 'Abbrechen',\n    No = 'Nein',\n    Ok = 'OK',\n    Yes = 'Ja',\n}\n\nexport enum ButtonType {\n    Cancel = -1,\n    Negative = 0,\n    Positive = 1,\n}\n\nexport interface DialogButton {\n    text: ButtonText | string;\n    buttonType: ButtonType | number;\n    collapseTime?: number;\n    textColor?: string;\n    backgroundColor?: string;\n}\n\nexport interface SelectDialogItem {\n    name: string;\n    value: string | number;\n    isSelected?: boolean;\n}\n\nexport interface SelectDialogResult {\n    buttonType: ButtonType | number;\n    selection: Array<SelectDialogItem>;\n}\n\ndeclare enum SelectType {\n    Default = 0,\n    Icon = 1,\n    IconAndText,\n}\n\nexport interface Group {\n    id: number;\n    isActive: boolean;\n}\n\nexport interface User {\n    name: string;\n    firstName: string;\n    gender: number;\n    lastName: string;\n    id: number;\n    personId: string;\n    tobitAccessToken: string;\n    groups: Group[];\n    isAuthenticated: boolean;\n    adminMode: boolean;\n    isAdmin: boolean;\n}\n\nexport interface Site {\n    id: string;\n}\n\nexport interface Env {\n    site: Site;\n    user: User;\n    language: any;\n    parameters: any;\n    isApp: boolean;\n    isMobile: boolean;\n    isTablet: boolean;\n}\n"],"mappings":";;;;;;IA6DYA,UAAU,GAAAC,OAAA,CAAAD,UAAA,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA"}
+{"version":3,"file":"chayns.js","names":["ButtonType","exports"],"sources":["../../src/types/chayns.ts"],"sourcesContent":["declare global {\n    let chayns: Chayns;\n}\n\nexport interface Chayns {\n    dialog: Dialog;\n    env: Env;\n    openImage(urls: string | string[], start?: number): Promise<undefined>;\n    openVideo(url: string): Promise<void>;\n    register(config: object): any;\n    getWindowMetrics(): Promise<WindowMetrics>;\n    addDesignSettingsChangeListener(callback: () => any): Promise<any>;\n    removeDesignSettingsChangeListener(callback: () => any): Promise<any>;\n}\n\nexport interface WindowMetrics {\n    bottomBarHeight: number;\n    coverHeight: 0;\n    frameX: number;\n    frameY: number;\n    height: number;\n    menuHeight: number;\n    offsetTop: number;\n    pageYOffset: number;\n    scrollTop: number;\n    windowHeight: number;\n    windowWidth: number;\n}\n\nexport interface Dialog {\n    select(config: {\n        title?: string;\n        message?: string;\n        list: Array<SelectDialogItem>;\n        multiselect?: boolean;\n        type?: SelectType;\n        preventCloseOnClick?: boolean;\n        buttons?: DialogButton[];\n        selectAllButton?: string;\n    }): Promise<SelectDialogResult>;\n    alert(headline: string, text: string): Promise<ButtonType>;\n    iFrame(config: {\n        url: string;\n        input?: object;\n        title?: string;\n        message?: string;\n        buttons?: DialogButton[];\n        seamless?: boolean;\n        transparent?: boolean;\n        waitCursor?: boolean;\n        maxHeight?: string;\n        width?: number;\n        customTransitionTimeout?: number;\n    }): Promise<any>;\n}\n\ndeclare enum ButtonText {\n    Cancel = 'Abbrechen',\n    No = 'Nein',\n    Ok = 'OK',\n    Yes = 'Ja',\n}\n\nexport enum ButtonType {\n    Cancel = -1,\n    Negative = 0,\n    Positive = 1,\n}\n\nexport interface DialogButton {\n    text: ButtonText | string;\n    buttonType: ButtonType | number;\n    collapseTime?: number;\n    textColor?: string;\n    backgroundColor?: string;\n}\n\nexport interface SelectDialogItem {\n    name: string;\n    value: string | number;\n    isSelected?: boolean;\n}\n\nexport interface SelectDialogResult {\n    buttonType: ButtonType | number;\n    selection: Array<SelectDialogItem>;\n}\n\ndeclare enum SelectType {\n    Default = 0,\n    Icon = 1,\n    IconAndText,\n}\n\nexport interface Group {\n    id: number;\n    isActive: boolean;\n}\n\nexport interface User {\n    name: string;\n    firstName: string;\n    gender: number;\n    lastName: string;\n    id: number;\n    personId: string;\n    tobitAccessToken: string;\n    groups: Group[];\n    isAuthenticated: boolean;\n    adminMode: boolean;\n    isAdmin: boolean;\n}\n\nexport interface Site {\n    id: string;\n    colorMode: 0 | 1 | 2;\n}\n\nexport interface Env {\n    site: Site;\n    user: User;\n    language: any;\n    parameters: any;\n    isApp: boolean;\n    isMobile: boolean;\n    isTablet: boolean;\n}\n"],"mappings":";;;;;;IA+DYA,UAAU,GAAAC,OAAA,CAAAD,UAAA,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.363",
+    "version": "5.0.0-beta.366",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c50d2de2bcafd9742450849f4dc09e5e26ab0925"
+    "gitHead": "33cf86c4452074aa7bad0a2e7fac4a550a62e560"
 }