@chayns-components/core 5.0.0-beta.670 → 5.0.0-beta.672

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js

@@ -35,6 +35,7 @@ const ListItemHead = ({
     closed: 40,
     open: 40
   });
+  const [isFirstRender, setIsFirstRender] = (0, _react.useState)(false);
   const longPressTimeoutRef = (0, _react.useRef)();
   const pseudoTitleOpenRef = (0, _react.useRef)(null);
   const pseudoTitleClosedRef = (0, _react.useRef)(null);
@@ -52,6 +53,11 @@ const ListItemHead = ({
       });
     }
   }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);
+
+  // This is used to trigger a rerender, so the head height can be calculate
+  (0, _react.useEffect)(() => {
+    setIsFirstRender(true);
+  }, []);
   const handleMouseEnter = (0, _react.useCallback)(() => setShouldShowHoverItem(true), []);
   const handleMouseLeave = (0, _react.useCallback)(() => setShouldShowHoverItem(false), []);
   const marginTop = (0, _react.useMemo)(() => {

package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","StyledListItemHead","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","length","StyledListItemHeadTopRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem","marginLeft","opacity","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    shouldShowSingleRightElementCentered: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    shouldShowSingleRightElementCentered,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    subtitle && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    subtitle && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        if (headHeight.closed < 64) {\n            return (64 - headHeight.closed) / 2;\n        }\n\n        return 0;\n    }, [headHeight.closed]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return <ListItemIcon icons={icons} />;\n        }\n\n        if (images) {\n            return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n        }\n\n        return undefined;\n    }, [icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                    {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_useElementSize","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","StyledListItemHead","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","StyledListItemHeadTitleElement","length","StyledListItemHeadTopRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem","marginLeft","opacity","width","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    shouldShowSingleRightElementCentered: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    shouldShowSingleRightElementCentered,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n    const [isFirstRender, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    subtitle && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    subtitle && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);\n\n    // This is used to trigger a rerender, so the head height can be calculate\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        if (headHeight.closed < 64) {\n            return (64 - headHeight.closed) / 2;\n        }\n\n        return 0;\n    }, [headHeight.closed]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return <ListItemIcon icons={icons} />;\n        }\n\n        if (images) {\n            return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n        }\n\n        return undefined;\n    }, [icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                    {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -34,6 +34,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [portal, setPortal] = (0, _react.useState)();
   const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  const [pseudoSize, setPseudoSize] = (0, _react.useState)();
   const timeout = (0, _react.useRef)();
   const uuid = (0, _uuid.useUuid)();
 
@@ -42,12 +43,24 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
   const popupContentRef = (0, _react.useRef)(null);
   const popupPseudoContentRef = (0, _react.useRef)(null);
   const popupRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (popupPseudoContentRef.current) {
+      const {
+        height,
+        width
+      } = popupPseudoContentRef.current.getBoundingClientRect();
+      setPseudoSize({
+        height,
+        width
+      });
+    }
+  }, []);
   const handleShow = (0, _react.useCallback)(() => {
-    if (popupRef.current && popupPseudoContentRef.current) {
+    if (popupRef.current && pseudoSize) {
       const {
         height: pseudoHeight,
         width: pseudoWidth
-      } = popupPseudoContentRef.current.getBoundingClientRect();
+      } = pseudoSize;
       const {
         height: childrenHeight,
         left: childrenLeft,
@@ -105,7 +118,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
       }
       setIsOpen(true);
     }
-  }, [yOffset]);
+  }, [pseudoSize, yOffset]);
   const handleChildrenClick = () => {
     if (!shouldShowOnHover) {
       handleShow();
@@ -177,7 +190,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
       shouldChangeColor: false
     }, content))), container));
   }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, uuid]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !pseudoSize && /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
     ref: popupPseudoContentRef,
     $menuHeight: menuHeight
   }, content), /*#__PURE__*/_react.default.createElement(_Popup.StyledPopup, {

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container = document.querySelector('.tapp') || document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","height","width","getBoundingClientRect","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container = document.querySelector('.tapp') || document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupPseudoContentRef.current) {\n                const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n                setPseudoSize({ height, width });\n            }\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {!pseudoSize && (\n                    <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                        {content}\n                    </StyledPopupPseudo>\n                )}\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\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/list/list-item/list-item-head/ListItemHead.js

@@ -27,6 +27,7 @@ const ListItemHead = _ref => {
     closed: 40,
     open: 40
   });
+  const [isFirstRender, setIsFirstRender] = useState(false);
   const longPressTimeoutRef = useRef();
   const pseudoTitleOpenRef = useRef(null);
   const pseudoTitleClosedRef = useRef(null);
@@ -44,6 +45,11 @@ const ListItemHead = _ref => {
       });
     }
   }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);
+
+  // This is used to trigger a rerender, so the head height can be calculate
+  useEffect(() => {
+    setIsFirstRender(true);
+  }, []);
   const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);
   const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);
   const marginTop = useMemo(() => {

package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","length","marginLeft","opacity","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    shouldShowSingleRightElementCentered: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    shouldShowSingleRightElementCentered,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    subtitle && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    subtitle && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        if (headHeight.closed < 64) {\n            return (64 - headHeight.closed) / 2;\n        }\n\n        return 0;\n    }, [headHeight.closed]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return <ListItemIcon icons={icons} />;\n        }\n\n        if (images) {\n            return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n        }\n\n        return undefined;\n    }, [icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                    {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","leftElements","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","shouldShowSingleRightElementCentered","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","isFirstRender","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","animate","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","length","marginLeft","opacity","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useElementSize } from '../../../../hooks/useElementSize';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    shouldShowSingleRightElementCentered: boolean;\n    title: ReactNode;\n    titleElement?: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    shouldShowSingleRightElementCentered,\n    title,\n    titleElement,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: 40,\n        open: 40,\n    });\n    const [isFirstRender, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n    const pseudoTitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoTitleClosedRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleOpenRef = useRef<HTMLDivElement>(null);\n    const pseudoSubtitleClosedRef = useRef<HTMLDivElement>(null);\n\n    const closedTitle = useElementSize(pseudoTitleClosedRef);\n    const openedTitle = useElementSize(pseudoTitleOpenRef);\n    const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);\n    const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    subtitle && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    subtitle && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, subtitle]);\n\n    // This is used to trigger a rerender, so the head height can be calculate\n    useEffect(() => {\n        setIsFirstRender(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const marginTop = useMemo(() => {\n        if (headHeight.closed < 64) {\n            return (64 - headHeight.closed) / 2;\n        }\n\n        return 0;\n    }, [headHeight.closed]);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return <ListItemIcon icons={icons} />;\n        }\n\n        if (images) {\n            return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n        }\n\n        return undefined;\n    }, [icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            initial={false}\n            transition={{ duration: 0.2, type: 'tween' }}\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            <StyledListItemHeadLeftWrapper>\n                {isAnyItemExpandable && (\n                    <StyledMotionListItemHeadIndicator\n                        animate={{ rotate: isOpen ? 90 : 0 }}\n                        initial={false}\n                        transition={{ type: 'tween' }}\n                    >\n                        {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                    </StyledMotionListItemHeadIndicator>\n                )}\n                {leftElements}\n                {iconOrImageElement}\n            </StyledListItemHeadLeftWrapper>\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $marginTop={marginTop}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleTextPseudo\n                            ref={pseudoTitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleTextPseudo>\n                        <StyledListItemHeadTitleText $isOpen={isOpen}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                    {rightElements?.length === 1 && !shouldShowSingleRightElementCentered && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleTextPseudo ref={pseudoSubtitleOpenRef} $isOpen>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleTextPseudo\n                            ref={pseudoSubtitleClosedRef}\n                            $isOpen={false}\n                        >\n                            {subtitle}\n                        </StyledListItemHeadSubtitleTextPseudo>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && shouldShowSingleRightElementCentered && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -26,6 +26,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [isOpen, setIsOpen] = useState(false);
   const [portal, setPortal] = useState();
   const [menuHeight, setMenuHeight] = useState(0);
+  const [pseudoSize, setPseudoSize] = useState();
   const timeout = useRef();
   const uuid = useUuid();
 
@@ -34,12 +35,24 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const popupContentRef = useRef(null);
   const popupPseudoContentRef = useRef(null);
   const popupRef = useRef(null);
+  useEffect(() => {
+    if (popupPseudoContentRef.current) {
+      const {
+        height,
+        width
+      } = popupPseudoContentRef.current.getBoundingClientRect();
+      setPseudoSize({
+        height,
+        width
+      });
+    }
+  }, []);
   const handleShow = useCallback(() => {
-    if (popupRef.current && popupPseudoContentRef.current) {
+    if (popupRef.current && pseudoSize) {
       const {
         height: pseudoHeight,
         width: pseudoWidth
-      } = popupPseudoContentRef.current.getBoundingClientRect();
+      } = pseudoSize;
       const {
         height: childrenHeight,
         left: childrenLeft,
@@ -97,7 +110,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
       setIsOpen(true);
     }
-  }, [yOffset]);
+  }, [pseudoSize, yOffset]);
   const handleChildrenClick = () => {
     if (!shouldShowOnHover) {
       handleShow();
@@ -168,7 +181,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
       shouldChangeColor: false
     }, content))), container));
   }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, uuid]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopupPseudo, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !pseudoSize && /*#__PURE__*/React.createElement(StyledPopupPseudo, {
     ref: popupPseudoContentRef,
     $menuHeight: menuHeight
   }, content), /*#__PURE__*/React.createElement(StyledPopup, {

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container = document.querySelector('.tapp') || document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","height","width","getBoundingClientRect","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container = document.querySelector('.tapp') || document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupPseudoContentRef.current) {\n                const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n                setPseudoSize({ height, width });\n            }\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {!pseudoSize && (\n                    <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                        {content}\n                    </StyledPopupPseudo>\n                )}\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.670",
+    "version": "5.0.0-beta.672",
     "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": "0be66bf9f4db571cbb155b1d8ad058e7d957037c"
+    "gitHead": "d8889aba06196eea519db488da9f23d37e9e9545"
 }