@chayns-components/core 5.0.0-beta.1225 → 5.0.0-beta.1226

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

@@ -39,6 +39,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
   const [portal, setPortal] = (0, _react2.useState)();
   const [pseudoSize, setPseudoSize] = (0, _react2.useState)();
   const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
+  const [contentMaxHeight, setContentMaxHeight] = (0, _react2.useState)(undefined);
   const timeout = (0, _react2.useRef)();
   const uuid = (0, _uuid.useUuid)();
   const {
@@ -143,6 +144,15 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       setIsOpen(true);
     }
   }, [alignment, newContainer, pseudoSize, yOffset]);
+  (0, _react2.useEffect)(() => {
+    if (!newContainer) return;
+    const viewHeight = newContainer.clientHeight;
+    if ([_popup.PopupAlignment.TopLeft, _popup.PopupAlignment.TopRight, _popup.PopupAlignment.TopCenter].includes(internalAlignment)) {
+      setContentMaxHeight(coordinates.y - 20);
+    } else {
+      setContentMaxHeight(viewHeight - coordinates.y - 20);
+    }
+  }, [coordinates.y, internalAlignment, newContainer]);
   const handleChildrenClick = () => {
     handleShow();
   };
@@ -177,15 +187,6 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
     hide: handleHide,
     show: handleShow
   }), [handleHide, handleShow]);
-
-  // useEffect(() => {
-  //     void getWindowMetrics().then((result) => {
-  //         if (result.topBarHeight) {
-  //             setMenuHeight(result.topBarHeight);
-  //         }
-  //     });
-  // }, []);
-
   (0, _react2.useEffect)(() => {
     if (isOpen) {
       document.addEventListener('click', handleDocumentClick, true);
@@ -213,6 +214,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       shouldScrollWithContent: shouldScrollWithContent,
       coordinates: coordinates,
       key: `tooltip_${uuid}`,
+      maxHeight: contentMaxHeight,
       alignment: internalAlignment,
       ref: popupContentRef,
       onMouseLeave: handleMouseLeave,
@@ -220,7 +222,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
     }, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.default, {
       shouldChangeColor: true
     }, content))), newContainer));
-  }, [internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid, shouldScrollWithContent]);
+  }, [contentMaxHeight, internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid, shouldScrollWithContent]);
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, measuredElement, /*#__PURE__*/_react2.default.createElement(_Popup.StyledPopup, {
     className: "beta-chayns-popup",
     ref: popupRef,

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

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

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js

@@ -17,11 +17,15 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
   width,
   onMouseLeave,
   shouldScrollWithContent,
-  onMouseEnter
+  onMouseEnter,
+  maxHeight
 }, ref) => {
   const {
     colorMode
   } = (0, _chaynsApi.useSite)();
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
   const isBottomLeftAlignment = alignment === _popup.PopupAlignment.BottomLeft;
   const isTopLeftAlignment = alignment === _popup.PopupAlignment.TopLeft;
   const isTopRightAlignment = alignment === _popup.PopupAlignment.TopRight;
@@ -68,7 +72,10 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
                     translateY(${anchorOffsetY}px)
                     translateY(${y})
                 `
-  }, children);
+  }, /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.StyledPopupContentWrapperContent, {
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    $maxHeight: maxHeight
+  }, children));
 });
 PopupContentWrapper.displayName = 'PopupContent';
 var _default = exports.default = PopupContentWrapper;

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","e","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","transformTemplate","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAA+E,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAa/E,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGX,SAAS,KAAKY,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGd,SAAS,KAAKY,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGhB,SAAS,KAAKY,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACI1B,MAAA,CAAAM,OAAA,CAAA2B,aAAA,CAAC9B,oBAAA,CAAA+B,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEnB,SAAU;IACtBoB,OAAO,EAAE1B,MAAO;IAChB2B,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCS,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CU,SAAS,EAAEhC,SAAU;IACrBiC,wBAAwB,EAAE3B,uBAAwB;IAClDE,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBD,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3B6B,KAAK,EAAE;MAAEC,IAAI,EAAEjC,WAAW,CAACkC,CAAC;MAAEC,GAAG,EAAEnC,WAAW,CAACyB,CAAC;MAAEvB;IAAM,CAAE;IAC1DkC,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEb,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCT,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCM,CAAC;AAClC;EAAkB,GAED1B,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,CAAC4C,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/C,OAAA,GAElCC,mBAAmB","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","e","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","useSite","browser","getDevice","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","transformTemplate","StyledPopupContentWrapperContent","$browser","name","$maxHeight","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { getDevice, useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n    StyledMotionPopupContentWrapper,\n    StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\nimport { BrowserName } from '../../../types/chayns';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n    maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n            maxHeight,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const { browser } = getDevice();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentWrapperContent\n                    $browser={browser?.name as BrowserName}\n                    $maxHeight={maxHeight}\n                >\n                    {children}\n                </StyledPopupContentWrapperContent>\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAGsC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAetC,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGd,SAAS,KAAKe,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGjB,SAAS,KAAKe,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGnB,SAAS,KAAKe,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACI7B,MAAA,CAAAM,OAAA,CAAA8B,aAAA,CAACjC,oBAAA,CAAAkC,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAErB,SAAU;IACtBsB,OAAO,EAAE7B,MAAO;IAChB8B,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCS,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CU,SAAS,EAAEnC,SAAU;IACrBoC,wBAAwB,EAAE9B,uBAAwB;IAClDG,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBF,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3BgC,KAAK,EAAE;MAAEC,IAAI,EAAEpC,WAAW,CAACqC,CAAC;MAAEC,GAAG,EAAEtC,WAAW,CAAC4B,CAAC;MAAE1B;IAAM,CAAE;IAC1DqC,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEb,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCT,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCM,CAAC;AAClC;EAAkB,gBAEFxC,MAAA,CAAAM,OAAA,CAAA8B,aAAA,CAACjC,oBAAA,CAAAmD,gCAAgC;IAC7BC,QAAQ,EAAEjC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEkC,IAAoB;IACvCC,UAAU,EAAEvC;EAAU,GAErBP,QAC6B,CACL,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,CAACmD,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtD,OAAA,GAElCC,mBAAmB","ignoreList":[]}

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionPopupContentWrapper = void 0;
+exports.StyledPopupContentWrapperContent = exports.StyledMotionPopupContentWrapper = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _popup = require("../../../types/popup");
@@ -81,4 +81,50 @@ const StyledMotionPopupContentWrapper = exports.StyledMotionPopupContentWrapper
         z-index: -1;
     }
 `;
+const StyledPopupContentWrapperContent = exports.StyledPopupContentWrapperContent = _styledComponents.default.div`
+    height: 100%;
+    width: 100%;
+
+    ${({
+  $maxHeight
+}) => $maxHeight && (0, _styledComponents.css)`
+            max-height: ${$maxHeight}px;
+            overflow-y: auto;
+            overflow-x: hidden;
+        `}
+
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                      height: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
+              `}
+`;
 //# sourceMappingURL=PopupContentWrapper.styles.js.map

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_popup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","text","$shouldScrollWithContent","$position","$offset","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAAsD,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAU/C,MAAMkB,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,yBAAM,EACjDC,aAAM,CAACC,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKE,qBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGH,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKC,qBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGH,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKC,qBAAc,CAACI,QAAQ;MACxB,OAAO,IAAAF,qBAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGH,OAAO;AAC5C,qBAAqB;IACL,KAAKC,qBAAc,CAACK,WAAW;MAC3B,OAAO,IAAAH,qBAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGH,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOO,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_popup","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","text","$shouldScrollWithContent","$position","$offset","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight","$browser"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { BrowserName } from '../../../types/chayns';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n    $browser: BrowserName;\n    $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n    height: 100%;\n    width: 100%;\n\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n\n    ${({ $browser, theme }: StyledPopupContentWrapperContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -31,6 +31,7 @@ const Popup = /*#__PURE__*/forwardRef(({
   const [portal, setPortal] = useState();
   const [pseudoSize, setPseudoSize] = useState();
   const [newContainer, setNewContainer] = useState(container ?? null);
+  const [contentMaxHeight, setContentMaxHeight] = useState(undefined);
   const timeout = useRef();
   const uuid = useUuid();
   const {
@@ -135,6 +136,15 @@ const Popup = /*#__PURE__*/forwardRef(({
       setIsOpen(true);
     }
   }, [alignment, newContainer, pseudoSize, yOffset]);
+  useEffect(() => {
+    if (!newContainer) return;
+    const viewHeight = newContainer.clientHeight;
+    if ([PopupAlignment.TopLeft, PopupAlignment.TopRight, PopupAlignment.TopCenter].includes(internalAlignment)) {
+      setContentMaxHeight(coordinates.y - 20);
+    } else {
+      setContentMaxHeight(viewHeight - coordinates.y - 20);
+    }
+  }, [coordinates.y, internalAlignment, newContainer]);
   const handleChildrenClick = () => {
     handleShow();
   };
@@ -168,15 +178,6 @@ const Popup = /*#__PURE__*/forwardRef(({
     hide: handleHide,
     show: handleShow
   }), [handleHide, handleShow]);
-
-  // useEffect(() => {
-  //     void getWindowMetrics().then((result) => {
-  //         if (result.topBarHeight) {
-  //             setMenuHeight(result.topBarHeight);
-  //         }
-  //     });
-  // }, []);
-
   useEffect(() => {
     if (isOpen) {
       document.addEventListener('click', handleDocumentClick, true);
@@ -204,6 +205,7 @@ const Popup = /*#__PURE__*/forwardRef(({
       shouldScrollWithContent: shouldScrollWithContent,
       coordinates: coordinates,
       key: `tooltip_${uuid}`,
+      maxHeight: contentMaxHeight,
       alignment: internalAlignment,
       ref: popupContentRef,
       onMouseLeave: handleMouseLeave,
@@ -211,7 +213,7 @@ const Popup = /*#__PURE__*/forwardRef(({
     }, /*#__PURE__*/React.createElement(AreaContextProvider, {
       shouldChangeColor: true
     }, content))), newContainer));
-  }, [internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize?.width, uuid, shouldScrollWithContent]);
+  }, [contentMaxHeight, internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize?.width, uuid, shouldScrollWithContent]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, measuredElement, /*#__PURE__*/React.createElement(StyledPopup, {
     className: "beta-chayns-popup",
     ref: popupRef,

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

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

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js

@@ -1,7 +1,7 @@
-import { useSite } from 'chayns-api';
+import { getDevice, useSite } from 'chayns-api';
 import React from 'react';
 import { PopupAlignment } from '../../../types/popup';
-import { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';
+import { StyledMotionPopupContentWrapper, StyledPopupContentWrapperContent } from './PopupContentWrapper.styles';
 const PopupContentWrapper = /*#__PURE__*/React.forwardRef(({
   alignment,
   children,
@@ -10,11 +10,15 @@ const PopupContentWrapper = /*#__PURE__*/React.forwardRef(({
   width,
   onMouseLeave,
   shouldScrollWithContent,
-  onMouseEnter
+  onMouseEnter,
+  maxHeight
 }, ref) => {
   const {
     colorMode
   } = useSite();
+  const {
+    browser
+  } = getDevice();
   const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
   const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
   const isTopRightAlignment = alignment === PopupAlignment.TopRight;
@@ -61,7 +65,10 @@ const PopupContentWrapper = /*#__PURE__*/React.forwardRef(({
                     translateY(${anchorOffsetY}px)
                     translateY(${y})
                 `
-  }, children);
+  }, /*#__PURE__*/React.createElement(StyledPopupContentWrapperContent, {
+    $browser: browser?.name,
+    $maxHeight: maxHeight
+  }, children));
 });
 PopupContentWrapper.displayName = 'PopupContent';
 export default PopupContentWrapper;

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","PopupContentWrapper","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","ref","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","transformTemplate","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,+BAA+B,QAAQ,8BAA8B;AAa9E,MAAMC,mBAAmB,gBAAGH,KAAK,CAACI,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAGf,OAAO,CAAC,CAAC;EAE/B,MAAMgB,qBAAqB,GAAGV,SAAS,KAAKJ,cAAc,CAACe,UAAU;EACrE,MAAMC,kBAAkB,GAAGZ,SAAS,KAAKJ,cAAc,CAACiB,OAAO;EAC/D,MAAMC,mBAAmB,GAAGd,SAAS,KAAKJ,cAAc,CAACmB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACInB,KAAA,CAAA0B,aAAA,CAACxB,+BAA+B;IAC5ByB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,OAAO,EAAEvB,MAAO;IAChBwB,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,EAAE7B,SAAU;IACrB8B,wBAAwB,EAAExB,uBAAwB;IAClDE,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBD,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3B0B,KAAK,EAAE;MAAEC,IAAI,EAAE9B,WAAW,CAAC+B,CAAC;MAAEC,GAAG,EAAEhC,WAAW,CAACsB,CAAC;MAAEpB;IAAM,CAAE;IAC1D+B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEb,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCR,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCK,CAAC;AAClC;EAAkB,GAEDvB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDH,mBAAmB,CAACwC,WAAW,GAAG,cAAc;AAEhD,eAAexC,mBAAmB","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.js","names":["getDevice","useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","StyledPopupContentWrapperContent","PopupContentWrapper","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","shouldScrollWithContent","onMouseEnter","maxHeight","ref","colorMode","browser","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","$shouldScrollWithContent","style","left","x","top","transition","type","transformTemplate","$browser","name","$maxHeight","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { getDevice, useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport {\n    StyledMotionPopupContentWrapper,\n    StyledPopupContentWrapperContent,\n} from './PopupContentWrapper.styles';\nimport { BrowserName } from '../../../types/chayns';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    shouldScrollWithContent: boolean;\n    width: number;\n    maxHeight?: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    (\n        {\n            alignment,\n            children,\n            coordinates,\n            offset,\n            width,\n            onMouseLeave,\n            shouldScrollWithContent,\n            onMouseEnter,\n            maxHeight,\n        },\n        ref,\n    ) => {\n        const { colorMode } = useSite();\n\n        const { browser } = getDevice();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldScrollWithContent={shouldScrollWithContent}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentWrapperContent\n                    $browser={browser?.name as BrowserName}\n                    $maxHeight={maxHeight}\n                >\n                    {children}\n                </StyledPopupContentWrapperContent>\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,YAAY;AAC/C,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SACIC,+BAA+B,EAC/BC,gCAAgC,QAC7B,8BAA8B;AAerC,MAAMC,mBAAmB,gBAAGJ,KAAK,CAACK,UAAU,CACxC,CACI;EACIC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,YAAY;EACZC,uBAAuB;EACvBC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IAAEC;EAAU,CAAC,GAAGjB,OAAO,CAAC,CAAC;EAE/B,MAAM;IAAEkB;EAAQ,CAAC,GAAGnB,SAAS,CAAC,CAAC;EAE/B,MAAMoB,qBAAqB,GAAGZ,SAAS,KAAKL,cAAc,CAACkB,UAAU;EACrE,MAAMC,kBAAkB,GAAGd,SAAS,KAAKL,cAAc,CAACoB,OAAO;EAC/D,MAAMC,mBAAmB,GAAGhB,SAAS,KAAKL,cAAc,CAACsB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACItB,KAAA,CAAA6B,aAAA,CAAC3B,+BAA+B;IAC5B4B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEjB,SAAU;IACtBkB,OAAO,EAAEzB,MAAO;IAChB0B,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,EAAE/B,SAAU;IACrBgC,wBAAwB,EAAE1B,uBAAwB;IAClDG,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBF,YAAY,EAAEA,YAAa;IAC3BF,YAAY,EAAEA,YAAa;IAC3B4B,KAAK,EAAE;MAAEC,IAAI,EAAEhC,WAAW,CAACiC,CAAC;MAAEC,GAAG,EAAElC,WAAW,CAACwB,CAAC;MAAEtB;IAAM,CAAE;IAC1DiC,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEb,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCR,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCK,CAAC;AAClC;EAAkB,gBAEFhC,KAAA,CAAA6B,aAAA,CAAC1B,gCAAgC;IAC7B2C,QAAQ,EAAE7B,OAAO,EAAE8B,IAAoB;IACvCC,UAAU,EAAElC;EAAU,GAErBP,QAC6B,CACL,CAAC;AAE1C,CACJ,CAAC;AAEDH,mBAAmB,CAAC6C,WAAW,GAAG,cAAc;AAEhD,eAAe7C,mBAAmB","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -74,4 +74,50 @@ export const StyledMotionPopupContentWrapper = styled(motion.div)`
         z-index: -1;
     }
 `;
+export const StyledPopupContentWrapperContent = styled.div`
+    height: 100%;
+    width: 100%;
+
+    ${({
+  $maxHeight
+}) => $maxHeight && css`
+            max-height: ${$maxHeight}px;
+            overflow-y: auto;
+            overflow-x: hidden;
+        `}
+
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                      height: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
+              `}
+`;
 //# sourceMappingURL=PopupContentWrapper.styles.js.map

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","theme","text","$shouldScrollWithContent","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAUrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKN,cAAc,CAACQ,OAAO;MACvB,OAAOT,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACS,UAAU;MAC1B,OAAOV,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACU,QAAQ;MACxB,OAAOX,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL,KAAKP,cAAc,CAACW,WAAW;MAC3B,OAAOZ,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","theme","text","$shouldScrollWithContent","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight","$browser"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { BrowserName } from '../../../types/chayns';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n    $browser: BrowserName;\n    $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n    height: 100%;\n    width: 100%;\n\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n\n    ${({ $browser, theme }: StyledPopupContentWrapperContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAWrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKN,cAAc,CAACQ,OAAO;MACvB,OAAOT,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACS,UAAU;MAC1B,OAAOV,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACU,QAAQ;MACxB,OAAOX,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL,KAAKP,cAAc,CAACW,WAAW;MAC3B,OAAOZ,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;EAAEY;AAAW,CAAC,KACbA,UAAU,IACVf,GAAG;AACX,0BAA0Be,UAAU;AACpC;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEZ;AAA6C,CAAC,KACzDY,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.d.ts

@@ -9,6 +9,7 @@ type PopupContentProps = {
     onMouseEnter: MouseEventHandler<HTMLSpanElement>;
     shouldScrollWithContent: boolean;
     width: number;
+    maxHeight?: number;
 };
 declare const PopupContentWrapper: React.ForwardRefExoticComponent<PopupContentProps & React.RefAttributes<HTMLDivElement>>;
 export default PopupContentWrapper;

package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts

@@ -1,6 +1,7 @@
 import { ColorMode } from 'chayns-api';
 import { PopupAlignment } from '../../../types/popup';
 import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+import { BrowserName } from '../../../types/chayns';
 type StyledMotionPopupContentWrapperProps = WithTheme<{
     $position: PopupAlignment;
     $colorMode: ColorMode;
@@ -10,4 +11,9 @@ type StyledMotionPopupContentWrapperProps = WithTheme<{
 export declare const StyledMotionPopupContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, StyledMotionPopupContentWrapperProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+type StyledPopupContentWrapperContentProps = WithTheme<{
+    $browser: BrowserName;
+    $maxHeight?: number;
+}>;
+export declare const StyledPopupContentWrapperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPopupContentWrapperContentProps>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1225",
+    "version": "5.0.0-beta.1226",
     "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": "56619e84ba448c2b2a0d770e9ea8805278131a54"
+    "gitHead": "fbc247a34773d88f754e8e612fa6f9aa5c04c794"
 }