@chayns-components/core 5.0.0-beta.649 → 5.0.0-beta.653

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

@@ -19,6 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
   content,
   onShow,
+  container = document.body,
   onHide,
   children,
   shouldShowOnHover = false,
@@ -28,7 +29,6 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
     x: 0,
     y: 0
   });
-  const container = document.querySelector('.tapp') || document.body;
   const [alignment, setAlignment] = (0, _react.useState)(_popup.PopupAlignment.TopLeft);
   const [offset, setOffset] = (0, _react.useState)(0);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);

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","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","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","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","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 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 [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 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        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                    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        }, [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                >\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","body","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","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","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","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     * 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.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\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 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        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                    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        }, [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                >\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,MAAA,GAAAN,OAAA;AACA,IAAAO,oBAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,oBAAA,GAAAD,sBAAA,CAAAR,OAAA;AACA,IAAAU,MAAA,GAAAV,OAAA;AAAgE,SAAAQ,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAiChE,MAAMW,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CACI;EACIC,OAAO;EACPC,MAAM;EACNC,SAAS,GAAGC,QAAQ,CAACC,IAAI;EACzBC,MAAM;EACNC,QAAQ;EACRC,iBAAiB,GAAG,KAAK;EACzBC,OAAO,GAAG;AACd,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAmB;IAC7DC,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAJ,eAAQ,EAAiBK,qBAAc,CAACC,OAAO,CAAC;EAClF,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAR,eAAQ,EAAS,CAAC,CAAC;EAC/C,MAAM,CAACS,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAV,eAAQ,EAAC,KAAK,CAAC;EAC3C,MAAM,CAACW,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAZ,eAAQ,EAAc,CAAC;EACnD,MAAM,CAACa,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAd,eAAQ,EAAC,CAAC,CAAC;EAE/C,MAAMe,OAAO,GAAG,IAAAC,aAAM,EAAS,CAAC;EAEhC,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;;EAEtB;;EAEA,MAAMC,eAAe,GAAG,IAAAH,aAAM,EAAiB,IAAI,CAAC;EACpD,MAAMI,qBAAqB,GAAG,IAAAJ,aAAM,EAAiB,IAAI,CAAC;EAC1D,MAAMK,QAAQ,GAAG,IAAAL,aAAM,EAAiB,IAAI,CAAC;EAE7C,MAAMM,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,IAAIE,OAAO,GAAG,KAAK;QAEnB,IAAIR,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD/B,YAAY,CAACC,qBAAc,CAACgC,WAAW,CAAC;UAExCD,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHhC,YAAY,CAACC,qBAAc,CAACiC,UAAU,CAAC;QAC3C;QAEA,MAAMrC,CAAC,GAAG+B,YAAY,GAAGG,aAAa,GAAG,CAAC;QAC1C,MAAMjC,CAAC,GAAGgC,WAAW,GAAGJ,cAAc,GAAGlC,OAAO;QAEhD,IAAI2C,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLtC,CAAC,GAAG2B,WAAW,IAAIY,MAAM,CAACC,UAAU,GAC9BxC,CAAC,GAAG2B,WAAW,GAAGY,MAAM,CAACC,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHF,SAAS,GAAG,CAAC;UAEb,MAAMG,KAAK,GAAGF,MAAM,CAACC,UAAU,IAAIT,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEI,SAAS,GACLG,KAAK,GAAGd,WAAW,IAAIY,MAAM,CAACC,UAAU,GAClCC,KAAK,GAAGd,WAAW,GAAGY,MAAM,CAACC,UAAU,GACvC,CAAC;QACf;QAEAjC,SAAS,CAAC+B,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAG1C,CAAC,GAAGsC,SAAS;QAE1BxC,cAAc,CAAC;UACXE,CAAC,EAAE0C,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBzC,CAAC,EAAEA,CAAC,GAAGN;QACX,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAIwC,OAAO,GAAG,KAAK;QAEnB,IAAIR,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrD/B,YAAY,CAACC,qBAAc,CAACuC,QAAQ,CAAC;UAErCR,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHhC,YAAY,CAACC,qBAAc,CAACC,OAAO,CAAC;QACxC;QAEA,MAAML,CAAC,GAAG+B,YAAY,GAAGG,aAAa,GAAG,CAAC;QAC1C,MAAMjC,CAAC,GAAGgC,WAAW,GAAGtC,OAAO;QAE/B,IAAI2C,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACLtC,CAAC,GAAG2B,WAAW,IAAIY,MAAM,CAACC,UAAU,GAC9BxC,CAAC,GAAG2B,WAAW,GAAGY,MAAM,CAACC,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHF,SAAS,GAAG,CAAC;UAEb,MAAMG,KAAK,GAAGF,MAAM,CAACC,UAAU,IAAIT,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEI,SAAS,GACLG,KAAK,GAAGd,WAAW,IAAIY,MAAM,CAACC,UAAU,GAClCC,KAAK,GAAGd,WAAW,GAAGY,MAAM,CAACC,UAAU,GACvC,CAAC;QACf;QAEAjC,SAAS,CAAC+B,SAAS,CAAC;QAEpB,MAAMI,IAAI,GAAG1C,CAAC,GAAGsC,SAAS;QAE1BxC,cAAc,CAAC;UACXE,CAAC,EAAE0C,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBzC,CAAC,EAAEA,CAAC,GAAGN;QACX,CAAC,CAAC;MACN;MAEAc,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACd,OAAO,CAAC,CAAC;EAEb,MAAMiD,mBAAmB,GAAGA,CAAA,KAAM;IAC9B,IAAI,CAAClD,iBAAiB,EAAE;MACpB2B,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMwB,UAAU,GAAG,IAAAvB,kBAAW,EAAC,MAAM;IACjCb,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMqC,gBAAgB,GAAG,IAAAxB,kBAAW,EAAC,MAAM;IACvC,IAAI5B,iBAAiB,EAAE;MACnB6C,MAAM,CAACQ,YAAY,CAACjC,OAAO,CAACS,OAAO,CAAC;MACpCF,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAE3B,iBAAiB,CAAC,CAAC;EAEnC,MAAMsD,gBAAgB,GAAG,IAAA1B,kBAAW,EAAC,MAAM;IACvC,IAAI,CAAC5B,iBAAiB,EAAE;MACpB;IACJ;IAEAoB,OAAO,CAACS,OAAO,GAAGgB,MAAM,CAACU,UAAU,CAAC,MAAM;MACtCJ,UAAU,CAAC,CAAC;IAChB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACA,UAAU,EAAEnD,iBAAiB,CAAC,CAAC;EAEnC,MAAMwD,mBAAmB,GAAG,IAAA5B,kBAAW,EAClC6B,KAAK,IAAK;IAAA,IAAAC,qBAAA;IACP,IACI,GAAAA,qBAAA,GAAClC,eAAe,CAACK,OAAO,cAAA6B,qBAAA,eAAvBA,qBAAA,CAAyBC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,KACxD,CAAC5D,iBAAiB,EACpB;MACEyD,KAAK,CAACI,cAAc,CAAC,CAAC;MACtBJ,KAAK,CAACK,eAAe,CAAC,CAAC;MAEvBX,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,EAAEnD,iBAAiB,CAClC,CAAC;EAED,IAAA+D,0BAAmB,EACf7D,GAAG,EACH,OAAO;IACH8D,IAAI,EAAEb,UAAU;IAChBc,IAAI,EAAEtC;EACV,CAAC,CAAC,EACF,CAACwB,UAAU,EAAExB,UAAU,CAC3B,CAAC;EAED,IAAAuC,gBAAS,EAAC,MAAM;IACZ,KAAK,IAAAC,2BAAgB,EAAC,CAAC,CAACC,IAAI,CAAEC,MAAM,IAAK;MACrC,IAAIA,MAAM,CAACC,YAAY,EAAE;QACrBnD,aAAa,CAACkD,MAAM,CAACC,YAAY,CAAC;MACtC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAJ,gBAAS,EAAC,MAAM;IACZ,IAAIpD,MAAM,EAAE;MACRlB,QAAQ,CAAC2E,gBAAgB,CAAC,OAAO,EAAEf,mBAAmB,EAAE,IAAI,CAAC;MAC7DX,MAAM,CAAC0B,gBAAgB,CAAC,MAAM,EAAEpB,UAAU,CAAC;MAE3C,IAAI,OAAOzD,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOI,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTF,QAAQ,CAAC4E,mBAAmB,CAAC,OAAO,EAAEhB,mBAAmB,EAAE,IAAI,CAAC;MAChEX,MAAM,CAAC2B,mBAAmB,CAAC,MAAM,EAAErB,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACK,mBAAmB,EAAEL,UAAU,EAAErC,MAAM,EAAEhB,MAAM,EAAEJ,MAAM,CAAC,CAAC;EAE7D,IAAAwE,gBAAS,EAAC,MAAM;IACZjD,SAAS,CAAC,mBACN,IAAAwD,sBAAY,gBACR/G,MAAA,CAAAW,OAAA,CAAAqG,aAAA,CAACjH,aAAA,CAAAkH,eAAe;MAACC,OAAO,EAAE;IAAM,GAC3B9D,MAAM,iBACHpD,MAAA,CAAAW,OAAA,CAAAqG,aAAA,CAACzG,oBAAA,CAAAI,OAAmB;MAChBuC,MAAM,EAAEA,MAAO;MACfT,WAAW,EAAEA,WAAY;MACzB0E,GAAG,EAAE,WAAWvD,IAAI,EAAG;MACvBd,SAAS,EAAEA,SAAU;MACrBN,GAAG,EAAEsB,eAAgB;MACrBsD,YAAY,EAAExB,gBAAiB;MAC/ByB,YAAY,EAAE3B;IAAiB,gBAE/B1F,MAAA,CAAAW,OAAA,CAAAqG,aAAA,CAAC3G,oBAAA,CAAAM,OAAmB;MAAC2G,iBAAiB,EAAE;IAAM,GACzCvF,OACgB,CACJ,CAEZ,CAAC,EAClBE,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCa,SAAS,EACTb,SAAS,EACTF,OAAO,EACPU,WAAW,EACXiD,gBAAgB,EAChBE,gBAAgB,EAChBxC,MAAM,EACNF,MAAM,EACNU,IAAI,CACP,CAAC;EAEF,oBACI5D,MAAA,CAAAW,OAAA,CAAAqG,aAAA,CAAAhH,MAAA,CAAAW,OAAA,CAAA4G,QAAA,qBACIvH,MAAA,CAAAW,OAAA,CAAAqG,aAAA,CAACxG,MAAA,CAAAgH,iBAAiB;IAAChF,GAAG,EAAEuB,qBAAsB;IAAC0D,WAAW,EAAEjE;EAAW,GAClEzB,OACc,CAAC,eACpB/B,MAAA,CAAAW,OAAA,CAAAqG,aAAA,CAACxG,MAAA,CAAAkH,WAAW;IACRlF,GAAG,EAAEwB,QAAS;IACd2D,OAAO,EAAEnC,mBAAoB;IAC7B4B,YAAY,EAAExB,gBAAiB;IAC/ByB,YAAY,EAAE3B;EAAiB,GAE9BrD,QACQ,CAAC,EACbiB,MACH,CAAC;AAEX,CACJ,CAAC;AAEDzB,KAAK,CAAC+F,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnH,OAAA,GAEbkB,KAAK","ignoreList":[]}

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.js

@@ -30,17 +30,21 @@ const SearchBoxBody = /*#__PURE__*/(0, _react.forwardRef)(({
   const headHeight = (0, _react.useMemo)(() => headSize !== null && headSize !== void 0 && headSize.height ? headSize.height + 15 : 0, [headSize === null || headSize === void 0 ? void 0 : headSize.height]);
   (0, _react.useEffect)(() => {
     const element = document.getElementById(`searchbox-content__${uuid}`);
-    if (element) {
+    if (element && ((selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) === 1 && selectedGroups[0] === 'all' || (selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) !== 1)) {
       setCurrentGroupName((0, _searchBox.getCurrentGroupName)(element));
+    } else {
+      setCurrentGroupName('');
     }
-  }, [uuid, children]);
-  const handleScroll = event => {
+  }, [uuid, children, selectedGroups]);
+  const handleScroll = (0, _react.useCallback)(event => {
     const {
       scrollTop
     } = event.target;
     setHasScrolled(scrollTop > 1);
-    setCurrentGroupName((0, _searchBox.getCurrentGroupName)(event.target));
-  };
+    if ((selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) === 1 && selectedGroups[0] === 'all' || (selectedGroups === null || selectedGroups === void 0 ? void 0 : selectedGroups.length) !== 1) {
+      setCurrentGroupName((0, _searchBox.getCurrentGroupName)(event.target));
+    }
+  }, [selectedGroups]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBoxBody.StyledMotionSearchBoxBody, {
     $width: width,
     initial: {
@@ -77,7 +81,7 @@ const SearchBoxBody = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     tabIndex: 0,
     onScroll: handleScroll
-  }, children)), [browser, children, currentGroupName, filterbuttons, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, uuid, width]);
+  }, children)), [browser, children, currentGroupName, filterbuttons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, uuid, width]);
 });
 SearchBoxBody.displayName = 'SearchBoxBody';
 var _default = exports.default = SearchBoxBody;

package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_uuid","_searchBox","_FilterButtons","_interopRequireDefault","_SearchBoxBody","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchBoxBody","forwardRef","filterbuttons","selectedGroups","width","browser","height","children","onGroupSelect","ref","hasScrolled","setHasScrolled","useState","currentGroupName","setCurrentGroupName","headRef","useRef","headSize","useElementSize","uuid","useUuid","headHeight","useMemo","useEffect","element","document","getElementById","getCurrentGroupName","handleScroll","event","scrollTop","target","createElement","StyledMotionSearchBoxBody","$width","initial","opacity","exit","animate","transition","duration","type","length","StyledSearchBoxBodyHead","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","StyledSearchBoxBodyHeadGroupName","StyledSearchBoxBodyContent","$height","$headHeight","key","id","$browser","tabIndex","onScroll","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport React, {\n    forwardRef,\n    UIEvent,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledMotionSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterbuttons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n    onGroupSelect?: (keys: string[]) => void;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    ({ filterbuttons, selectedGroups, width, browser, height, children, onGroupSelect }, ref) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchbox-content__${uuid}`);\n\n            if (element) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            }\n        }, [uuid, children]);\n\n        const handleScroll = (event: UIEvent) => {\n            const { scrollTop } = event.target as HTMLDivElement;\n\n            setHasScrolled(scrollTop > 1);\n            setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n        };\n\n        return useMemo(\n            () => (\n                <StyledMotionSearchBoxBody\n                    $width={width}\n                    initial={{ height: 0, opacity: 0 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'fit-content', opacity: 1 }}\n                    transition={{\n                        duration: 0.2,\n                        type: 'tween',\n                    }}\n                >\n                    {filterbuttons && filterbuttons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            <FilterButtons\n                                items={filterbuttons}\n                                size={0}\n                                onSelect={onGroupSelect}\n                                selectedItemIds={selectedGroups}\n                            />\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchbox-content__${uuid}`}\n                        $browser={browser}\n                        ref={ref}\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledMotionSearchBoxBody>\n            ),\n            [\n                browser,\n                children,\n                currentGroupName,\n                filterbuttons,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                uuid,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AASA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AAKgC,SAAAK,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAYhC,MAAMW,aAAa,gBAAG,IAAAC,iBAAU,EAC5B,CAAC;EAAEC,aAAa;EAAEC,cAAc;EAAEC,KAAK;EAAEC,OAAO;EAAEC,MAAM;EAAEC,QAAQ;EAAEC;AAAc,CAAC,EAAEC,GAAG,KAAK;EACzF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,EAAC,EAAE,CAAC;EAE5D,MAAMG,OAAO,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAE5C,MAAMC,QAAQ,GAAG,IAAAC,8BAAc,EAACH,OAAO,CAAC;EAExC,MAAMI,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAMC,UAAU,GAAG,IAAAC,cAAO,EACtB,MAAOL,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEX,MAAM,GAAGW,QAAQ,CAACX,MAAM,GAAG,EAAE,GAAG,CAAE,EACnD,CAACW,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEX,MAAM,CACrB,CAAC;EAED,IAAAiB,gBAAS,EAAC,MAAM;IACZ,MAAMC,OAAO,GAAGC,QAAQ,CAACC,cAAc,CAAC,sBAAsBP,IAAI,EAAE,CAAC;IAErE,IAAIK,OAAO,EAAE;MACTV,mBAAmB,CAAC,IAAAa,8BAAmB,EAACH,OAAO,CAAC,CAAC;IACrD;EACJ,CAAC,EAAE,CAACL,IAAI,EAAEZ,QAAQ,CAAC,CAAC;EAEpB,MAAMqB,YAAY,GAAIC,KAAc,IAAK;IACrC,MAAM;MAAEC;IAAU,CAAC,GAAGD,KAAK,CAACE,MAAwB;IAEpDpB,cAAc,CAACmB,SAAS,GAAG,CAAC,CAAC;IAC7BhB,mBAAmB,CAAC,IAAAa,8BAAmB,EAACE,KAAK,CAACE,MAAwB,CAAC,CAAC;EAC5E,CAAC;EAED,OAAO,IAAAT,cAAO,EACV,mBACInD,MAAA,CAAAW,OAAA,CAAAkD,aAAA,CAACrD,cAAA,CAAAsD,yBAAyB;IACtBC,MAAM,EAAE9B,KAAM;IACd+B,OAAO,EAAE;MAAE7B,MAAM,EAAE,CAAC;MAAE8B,OAAO,EAAE;IAAE,CAAE;IACnCC,IAAI,EAAE;MAAE/B,MAAM,EAAE,CAAC;MAAE8B,OAAO,EAAE;IAAE,CAAE;IAChCE,OAAO,EAAE;MAAEhC,MAAM,EAAE,aAAa;MAAE8B,OAAO,EAAE;IAAE,CAAE;IAC/CG,UAAU,EAAE;MACRC,QAAQ,EAAE,GAAG;MACbC,IAAI,EAAE;IACV;EAAE,GAEDvC,aAAa,IAAI,CAAAA,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEwC,MAAM,IAAG,CAAC,iBACvCvE,MAAA,CAAAW,OAAA,CAAAkD,aAAA,CAACrD,cAAA,CAAAgE,uBAAuB;IACpBlC,GAAG,EAAEM,OAAQ;IACb6B,YAAY,EAAElC,WAAY;IAC1BmC,aAAa,EAAE,CAAC,CAAChC;EAAiB,gBAElC1C,MAAA,CAAAW,OAAA,CAAAkD,aAAA,CAACvD,cAAA,CAAAK,OAAa;IACVgE,KAAK,EAAE5C,aAAc;IACrB6C,IAAI,EAAE,CAAE;IACRC,QAAQ,EAAExC,aAAc;IACxByC,eAAe,EAAE9C;EAAe,CACnC,CAAC,eACFhC,MAAA,CAAAW,OAAA,CAAAkD,aAAA,CAACrD,cAAA,CAAAuE,gCAAgC,QAC5BrC,gBAC6B,CACb,CAC5B,eACD1C,MAAA,CAAAW,OAAA,CAAAkD,aAAA,CAACrD,cAAA,CAAAwE,0BAA0B;IACvBC,OAAO,EAAE9C,MAAO;IAChB+C,WAAW,EAAEhC,UAAW;IACxBiC,GAAG,EAAC,SAAS;IACbC,EAAE,EAAE,sBAAsBpC,IAAI,EAAG;IACjCqC,QAAQ,EAAEnD,OAAQ;IAClBI,GAAG,EAAEA,GAAI;IACTgD,QAAQ,EAAE,CAAE;IACZC,QAAQ,EAAE9B;EAAa,GAEtBrB,QACuB,CACL,CAC9B,EACD,CACIF,OAAO,EACPE,QAAQ,EACRM,gBAAgB,EAChBX,aAAa,EACbQ,WAAW,EACXW,UAAU,EACVf,MAAM,EACNE,aAAa,EACbC,GAAG,EACHN,cAAc,EACdgB,IAAI,EACJf,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDJ,aAAa,CAAC2D,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/E,OAAA,GAE7BkB,aAAa","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_uuid","_searchBox","_FilterButtons","_interopRequireDefault","_SearchBoxBody","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchBoxBody","forwardRef","filterbuttons","selectedGroups","width","browser","height","children","onGroupSelect","ref","hasScrolled","setHasScrolled","useState","currentGroupName","setCurrentGroupName","headRef","useRef","headSize","useElementSize","uuid","useUuid","headHeight","useMemo","useEffect","element","document","getElementById","length","getCurrentGroupName","handleScroll","useCallback","event","scrollTop","target","createElement","StyledMotionSearchBoxBody","$width","initial","opacity","exit","animate","transition","duration","type","StyledSearchBoxBodyHead","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","StyledSearchBoxBodyHeadGroupName","StyledSearchBoxBodyContent","$height","$headHeight","key","id","$browser","tabIndex","onScroll","displayName","_default","exports"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport React, {\n    forwardRef,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledMotionSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterbuttons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n    onGroupSelect?: (keys: string[]) => void;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    ({ filterbuttons, selectedGroups, width, browser, height, children, onGroupSelect }, ref) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchbox-content__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledMotionSearchBoxBody\n                    $width={width}\n                    initial={{ height: 0, opacity: 0 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'fit-content', opacity: 1 }}\n                    transition={{\n                        duration: 0.2,\n                        type: 'tween',\n                    }}\n                >\n                    {filterbuttons && filterbuttons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            <FilterButtons\n                                items={filterbuttons}\n                                size={0}\n                                onSelect={onGroupSelect}\n                                selectedItemIds={selectedGroups}\n                            />\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchbox-content__${uuid}`}\n                        $browser={browser}\n                        ref={ref}\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledMotionSearchBoxBody>\n            ),\n            [\n                browser,\n                children,\n                currentGroupName,\n                filterbuttons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                uuid,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tooltip/Tooltip.js

@@ -15,6 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Tooltip = ({
   item,
   children,
+  container,
   isDisabled,
   itemWidth
 }) => {
@@ -36,10 +37,11 @@ const Tooltip = ({
   }, children) : /*#__PURE__*/_react.default.createElement(_Popup.default, {
     shouldShowOnHover: true,
     content: content,
-    ref: tooltipRef
+    ref: tooltipRef,
+    container: container
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
     $isOnlyText: (0, _tooltip.isTextOnlyElement)(children)
-  }, children))), [isDisabled, children, content]);
+  }, children))), [isDisabled, children, content, container]);
 };
 Tooltip.displayName = 'Tooltip';
 var _default = exports.default = Tooltip;

package/lib/cjs/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","isDisabled","itemWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({ item, children, isDisabled, itemWidth }) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup shouldShowOnHover content={content} ref={tooltipRef}>\n                        <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, content],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({ item, children, container, isDisabled, itemWidth }) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                    >\n                        <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,6 +11,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     content,
     onShow,
+    container = document.body,
     onHide,
     children,
     shouldShowOnHover = false,
@@ -20,7 +21,6 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
     x: 0,
     y: 0
   });
-  const container = document.querySelector('.tapp') || document.body;
   const [alignment, setAlignment] = useState(PopupAlignment.TopLeft);
   const [offset, setOffset] = useState(0);
   const [isOpen, setIsOpen] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"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 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 [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 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        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                    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        }, [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                >\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":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","body","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"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     * 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.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\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 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        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                    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        }, [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                >\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/esm/components/search-box/search-box-body/SearchBoxBody.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useElementSize } from '../../../hooks/useElementSize';
 import { useUuid } from '../../../hooks/uuid';
 import { getCurrentGroupName } from '../../../utils/searchBox';
@@ -22,17 +22,21 @@ const SearchBoxBody = /*#__PURE__*/forwardRef((_ref, ref) => {
   const headHeight = useMemo(() => headSize?.height ? headSize.height + 15 : 0, [headSize?.height]);
   useEffect(() => {
     const element = document.getElementById(`searchbox-content__${uuid}`);
-    if (element) {
+    if (element && (selectedGroups?.length === 1 && selectedGroups[0] === 'all' || selectedGroups?.length !== 1)) {
       setCurrentGroupName(getCurrentGroupName(element));
+    } else {
+      setCurrentGroupName('');
     }
-  }, [uuid, children]);
-  const handleScroll = event => {
+  }, [uuid, children, selectedGroups]);
+  const handleScroll = useCallback(event => {
     const {
       scrollTop
     } = event.target;
     setHasScrolled(scrollTop > 1);
-    setCurrentGroupName(getCurrentGroupName(event.target));
-  };
+    if (selectedGroups?.length === 1 && selectedGroups[0] === 'all' || selectedGroups?.length !== 1) {
+      setCurrentGroupName(getCurrentGroupName(event.target));
+    }
+  }, [selectedGroups]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledMotionSearchBoxBody, {
     $width: width,
     initial: {
@@ -69,7 +73,7 @@ const SearchBoxBody = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref,
     tabIndex: 0,
     onScroll: handleScroll
-  }, children)), [browser, children, currentGroupName, filterbuttons, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, uuid, width]);
+  }, children)), [browser, children, currentGroupName, filterbuttons, handleScroll, hasScrolled, headHeight, height, onGroupSelect, ref, selectedGroups, uuid, width]);
 });
 SearchBoxBody.displayName = 'SearchBoxBody';
 export default SearchBoxBody;

package/lib/esm/components/search-box/search-box-body/SearchBoxBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxBody.js","names":["React","forwardRef","useEffect","useMemo","useRef","useState","useElementSize","useUuid","getCurrentGroupName","FilterButtons","StyledMotionSearchBoxBody","StyledSearchBoxBodyContent","StyledSearchBoxBodyHead","StyledSearchBoxBodyHeadGroupName","SearchBoxBody","_ref","ref","filterbuttons","selectedGroups","width","browser","height","children","onGroupSelect","hasScrolled","setHasScrolled","currentGroupName","setCurrentGroupName","headRef","headSize","uuid","headHeight","element","document","getElementById","handleScroll","event","scrollTop","target","createElement","$width","initial","opacity","exit","animate","transition","duration","type","length","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","$height","$headHeight","key","id","$browser","tabIndex","onScroll","displayName"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport React, {\n    forwardRef,\n    UIEvent,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledMotionSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterbuttons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n    onGroupSelect?: (keys: string[]) => void;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    ({ filterbuttons, selectedGroups, width, browser, height, children, onGroupSelect }, ref) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchbox-content__${uuid}`);\n\n            if (element) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            }\n        }, [uuid, children]);\n\n        const handleScroll = (event: UIEvent) => {\n            const { scrollTop } = event.target as HTMLDivElement;\n\n            setHasScrolled(scrollTop > 1);\n            setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n        };\n\n        return useMemo(\n            () => (\n                <StyledMotionSearchBoxBody\n                    $width={width}\n                    initial={{ height: 0, opacity: 0 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'fit-content', opacity: 1 }}\n                    transition={{\n                        duration: 0.2,\n                        type: 'tween',\n                    }}\n                >\n                    {filterbuttons && filterbuttons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            <FilterButtons\n                                items={filterbuttons}\n                                size={0}\n                                onSelect={onGroupSelect}\n                                selectedItemIds={selectedGroups}\n                            />\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchbox-content__${uuid}`}\n                        $browser={browser}\n                        ref={ref}\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledMotionSearchBoxBody>\n            ),\n            [\n                browser,\n                children,\n                currentGroupName,\n                filterbuttons,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                uuid,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBoxBody.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useUuid","getCurrentGroupName","FilterButtons","StyledMotionSearchBoxBody","StyledSearchBoxBodyContent","StyledSearchBoxBodyHead","StyledSearchBoxBodyHeadGroupName","SearchBoxBody","_ref","ref","filterbuttons","selectedGroups","width","browser","height","children","onGroupSelect","hasScrolled","setHasScrolled","currentGroupName","setCurrentGroupName","headRef","headSize","uuid","headHeight","element","document","getElementById","length","handleScroll","event","scrollTop","target","createElement","$width","initial","opacity","exit","animate","transition","duration","type","$hasScrolled","$hasGroupName","items","size","onSelect","selectedItemIds","$height","$headHeight","key","id","$browser","tabIndex","onScroll","displayName"],"sources":["../../../../../src/components/search-box/search-box-body/SearchBoxBody.tsx"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport React, {\n    forwardRef,\n    UIEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IFilterButtonItem } from '../../../types/filterButtons';\nimport { getCurrentGroupName } from '../../../utils/searchBox';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    StyledMotionSearchBoxBody,\n    StyledSearchBoxBodyContent,\n    StyledSearchBoxBodyHead,\n    StyledSearchBoxBodyHeadGroupName,\n} from './SearchBoxBody.styles';\n\nexport type SearchBoxBodyProps = {\n    children: ReactNode;\n    filterbuttons?: IFilterButtonItem[];\n    selectedGroups?: string[];\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n    onGroupSelect?: (keys: string[]) => void;\n};\n\nconst SearchBoxBody = forwardRef<HTMLDivElement, SearchBoxBodyProps>(\n    ({ filterbuttons, selectedGroups, width, browser, height, children, onGroupSelect }, ref) => {\n        const [hasScrolled, setHasScrolled] = useState(false);\n        const [currentGroupName, setCurrentGroupName] = useState('');\n\n        const headRef = useRef<HTMLDivElement>(null);\n\n        const headSize = useElementSize(headRef);\n\n        const uuid = useUuid();\n\n        const headHeight = useMemo(\n            () => (headSize?.height ? headSize.height + 15 : 0),\n            [headSize?.height],\n        );\n\n        useEffect(() => {\n            const element = document.getElementById(`searchbox-content__${uuid}`);\n\n            if (\n                element &&\n                ((selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1)\n            ) {\n                setCurrentGroupName(getCurrentGroupName(element));\n            } else {\n                setCurrentGroupName('');\n            }\n        }, [uuid, children, selectedGroups]);\n\n        const handleScroll = useCallback(\n            (event: UIEvent) => {\n                const { scrollTop } = event.target as HTMLDivElement;\n\n                setHasScrolled(scrollTop > 1);\n\n                if (\n                    (selectedGroups?.length === 1 && selectedGroups[0] === 'all') ||\n                    selectedGroups?.length !== 1\n                ) {\n                    setCurrentGroupName(getCurrentGroupName(event.target as HTMLDivElement));\n                }\n            },\n            [selectedGroups],\n        );\n\n        return useMemo(\n            () => (\n                <StyledMotionSearchBoxBody\n                    $width={width}\n                    initial={{ height: 0, opacity: 0 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'fit-content', opacity: 1 }}\n                    transition={{\n                        duration: 0.2,\n                        type: 'tween',\n                    }}\n                >\n                    {filterbuttons && filterbuttons?.length > 1 && (\n                        <StyledSearchBoxBodyHead\n                            ref={headRef}\n                            $hasScrolled={hasScrolled}\n                            $hasGroupName={!!currentGroupName}\n                        >\n                            <FilterButtons\n                                items={filterbuttons}\n                                size={0}\n                                onSelect={onGroupSelect}\n                                selectedItemIds={selectedGroups}\n                            />\n                            <StyledSearchBoxBodyHeadGroupName>\n                                {currentGroupName}\n                            </StyledSearchBoxBodyHeadGroupName>\n                        </StyledSearchBoxBodyHead>\n                    )}\n                    <StyledSearchBoxBodyContent\n                        $height={height}\n                        $headHeight={headHeight}\n                        key=\"content\"\n                        id={`searchbox-content__${uuid}`}\n                        $browser={browser}\n                        ref={ref}\n                        tabIndex={0}\n                        onScroll={handleScroll}\n                    >\n                        {children}\n                    </StyledSearchBoxBodyContent>\n                </StyledMotionSearchBoxBody>\n            ),\n            [\n                browser,\n                children,\n                currentGroupName,\n                filterbuttons,\n                handleScroll,\n                hasScrolled,\n                headHeight,\n                height,\n                onGroupSelect,\n                ref,\n                selectedGroups,\n                uuid,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBoxBody.displayName = 'SearchBoxBody';\n\nexport default SearchBoxBody;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/tooltip/Tooltip.js

@@ -7,6 +7,7 @@ const Tooltip = _ref => {
   let {
     item,
     children,
+    container,
     isDisabled,
     itemWidth
   } = _ref;
@@ -28,10 +29,11 @@ const Tooltip = _ref => {
   }, children) : /*#__PURE__*/React.createElement(Popup, {
     shouldShowOnHover: true,
     content: content,
-    ref: tooltipRef
+    ref: tooltipRef,
+    container: container
   }, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
     $isOnlyText: isTextOnlyElement(children)
-  }, children))), [isDisabled, children, content]);
+  }, children))), [isDisabled, children, content, container]);
 };
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

package/lib/esm/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","isDisabled","itemWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({ item, children, isDisabled, itemWidth }) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup shouldShowOnHover content={content} ref={tooltipRef}>\n                        <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, content],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AAqBvE,MAAMC,OAAyB,GAAGC,IAAA,IAA+C;EAAA,IAA9C;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,UAAU;IAAEC;EAAU,CAAC,GAAAJ,IAAA;EACxE,MAAMK,UAAU,GAAGZ,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMa,OAAO,GAAGd,OAAO,CAAC,MAAM;IAC1B,kBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAiB,aAAA,CAACX,WAAW;MACRY,KAAK,EAAEJ,SAAU;MACjBK,IAAI,EAAGR,IAAI,CAAkBQ,IAAK;MAClCC,QAAQ,EAAGT,IAAI,CAAkBS,QAAS;MAC1CC,QAAQ,EAAGV,IAAI,CAAkBU,QAAS;MAC1CC,MAAM,EAAGX,IAAI,CAAkBW;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACX,IAAI,EAAEG,SAAS,CAAC,CAAC;EAErB,OAAOZ,OAAO,CACV,mBACIF,KAAA,CAAAiB,aAAA,CAACV,aAAa,QACTM,UAAU,gBACPb,KAAA,CAAAiB,aAAA,CAACT,qBAAqB;IAACe,WAAW,EAAEnB,iBAAiB,CAACQ,QAAQ;EAAE,GAC3DA,QACkB,CAAC,gBAExBZ,KAAA,CAAAiB,aAAA,CAACZ,KAAK;IAACmB,iBAAiB;IAACR,OAAO,EAAEA,OAAQ;IAACS,GAAG,EAAEV;EAAW,gBACvDf,KAAA,CAAAiB,aAAA,CAACT,qBAAqB;IAACe,WAAW,EAAEnB,iBAAiB,CAACQ,QAAQ;EAAE,GAC3DA,QACkB,CACpB,CAEA,CAClB,EACD,CAACC,UAAU,EAAED,QAAQ,EAAEI,OAAO,CAClC,CAAC;AACL,CAAC;AAEDP,OAAO,CAACiB,WAAW,GAAG,SAAS;AAE/B,eAAejB,OAAO","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({ item, children, container, isDisabled, itemWidth }) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                    >\n                        <StyledTooltipChildren $isOnlyText={isTextOnlyElement(children)}>\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AAyBvE,MAAMC,OAAyB,GAAGC,IAAA,IAA0D;EAAA,IAAzD;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,UAAU;IAAEC;EAAU,CAAC,GAAAL,IAAA;EACnF,MAAMM,UAAU,GAAGb,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMc,OAAO,GAAGf,OAAO,CAAC,MAAM;IAC1B,kBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAkB,aAAA,CAACZ,WAAW;MACRa,KAAK,EAAEJ,SAAU;MACjBK,IAAI,EAAGT,IAAI,CAAkBS,IAAK;MAClCC,QAAQ,EAAGV,IAAI,CAAkBU,QAAS;MAC1CC,QAAQ,EAAGX,IAAI,CAAkBW,QAAS;MAC1CC,MAAM,EAAGZ,IAAI,CAAkBY;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACZ,IAAI,EAAEI,SAAS,CAAC,CAAC;EAErB,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAAkB,aAAA,CAACX,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAkB,aAAA,CAACV,qBAAqB;IAACgB,WAAW,EAAEpB,iBAAiB,CAACQ,QAAQ;EAAE,GAC3DA,QACkB,CAAC,gBAExBZ,KAAA,CAAAkB,aAAA,CAACb,KAAK;IACFoB,iBAAiB;IACjBR,OAAO,EAAEA,OAAQ;IACjBS,GAAG,EAAEV,UAAW;IAChBH,SAAS,EAAEA;EAAU,gBAErBb,KAAA,CAAAkB,aAAA,CAACV,qBAAqB;IAACgB,WAAW,EAAEpB,iBAAiB,CAACQ,QAAQ;EAAE,GAC3DA,QACkB,CACpB,CAEA,CAClB,EACD,CAACE,UAAU,EAAEF,QAAQ,EAAEK,OAAO,EAAEJ,SAAS,CAC7C,CAAC;AACL,CAAC;AAEDJ,OAAO,CAACkB,WAAW,GAAG,SAAS;AAE/B,eAAelB,OAAO","ignoreList":[]}

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

@@ -5,6 +5,10 @@ export type PopupProps = {
      * The element over which the content of the `ContextMenu` should be displayed.
      */
     children?: ReactNode;
+    /**
+     * The element where the content of the `Popup` should be rendered via React Portal.
+     */
+    container?: Element;
     /**
      * The content that should be displayed inside the popup.
      */

package/lib/types/components/tooltip/Tooltip.d.ts

@@ -5,6 +5,10 @@ export type TooltipProps = {
      * The elements that the tooltip should surround.
      */
     children: ReactNode;
+    /**
+     * The element where the content of the `Tooltip` should be rendered via React Portal.
+     */
+    container?: Element;
     /**
      * The content that should be displayed.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.649",
+    "version": "5.0.0-beta.653",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6b8696766d576ca51d075c40dff0441f35089c84"
+    "gitHead": "e5d7b2abfc1466a13d7f1041e52b59520f0d3a83"
 }