@chayns-components/core 5.0.0-beta.1034 → 5.0.0-beta.1036

package/lib/cjs/components/list/list-item/ListItem.js

@@ -149,7 +149,8 @@ const ListItem = ({
   }), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, isExpandable && isItemOpen && /*#__PURE__*/_react2.default.createElement(_ListItemBody.default, {
-    id: uuid
+    id: uuid,
+    key: `listItemBody-${uuid}`
   }, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.default, null, children))));
 };
 ListItem.displayName = 'ListItem';

package/lib/cjs/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","isInitialRenderRef","useRef","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The locationId of the care-of site.\n     */\n    careOfLocationId?: number;\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the hover item should be forced.\n     */\n    shouldForceHover?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    careOfLocationId,\n    children,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isDefaultOpen,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onClose,\n    onLongPress,\n    onOpen,\n    rightElements,\n    shouldForceBackground = false,\n    shouldHideBottomLine = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldOpenImageOnClick = false,\n    shouldPreventLayoutAnimation = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    shouldForceHover = false,\n    subtitle,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isItemOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isItemOpen]);\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                icons={icons}\n                imageBackground={imageBackground}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                isTitleGreyed={isTitleGreyed}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                shouldForceHover={shouldForceHover}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                shouldOpenImageOnClick={shouldOpenImageOnClick}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                subtitle={subtitle}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","isInitialRenderRef","useRef","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The locationId of the care-of site.\n     */\n    careOfLocationId?: number;\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the hover item should be forced.\n     */\n    shouldForceHover?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    careOfLocationId,\n    children,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isDefaultOpen,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onClose,\n    onLongPress,\n    onOpen,\n    rightElements,\n    shouldForceBackground = false,\n    shouldHideBottomLine = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldOpenImageOnClick = false,\n    shouldPreventLayoutAnimation = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    shouldForceHover = false,\n    subtitle,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isItemOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isItemOpen]);\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                icons={icons}\n                imageBackground={imageBackground}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                isTitleGreyed={isTitleGreyed}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                shouldForceHover={shouldForceHover}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                shouldOpenImageOnClick={shouldOpenImageOnClick}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                subtitle={subtitle}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid} key={`listItemBody-${uuid}`}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _useElementSize = require("../../../../hooks/useElementSize");
 var _Icon = _interopRequireDefault(require("../../../icon/Icon"));
 var _ListItemIcon = _interopRequireDefault(require("./list-item-icon/ListItemIcon"));
 var _ListItemImage = _interopRequireDefault(require("./list-item-image/ListItemImage"));
@@ -37,7 +36,9 @@ const ListItemHead = ({
   title,
   titleElement
 }) => {
+  const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = (0, _react.useState)(true);
   const [shouldShowHoverItem, setShouldShowHoverItem] = (0, _react.useState)(false);
+  const [openTitleWidth, setOpenTitleWidth] = (0, _react.useState)(0);
   const [headHeight, setHeadHeight] = (0, _react.useState)({
     closed: 40,
     open: 40
@@ -48,19 +49,41 @@ const ListItemHead = ({
   const pseudoTitleClosedRef = (0, _react.useRef)(null);
   const pseudoSubtitleOpenRef = (0, _react.useRef)(null);
   const pseudoSubtitleClosedRef = (0, _react.useRef)(null);
-  const closedTitle = (0, _useElementSize.useElementSize)(pseudoTitleClosedRef);
-  const openedTitle = (0, _useElementSize.useElementSize)(pseudoTitleOpenRef);
-  const closedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleClosedRef);
-  const openedSubtitle = (0, _useElementSize.useElementSize)(pseudoSubtitleOpenRef);
   const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
   (0, _react.useEffect)(() => {
-    if (closedTitle && openedTitle) {
+    if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {
+      const {
+        height: closedTitleHeight
+      } = pseudoTitleClosedRef.current.getBoundingClientRect();
+      const {
+        height: openTitleHeight,
+        width: openWidth
+      } = pseudoTitleOpenRef.current.getBoundingClientRect();
+      setOpenTitleWidth(openWidth);
+      let closedHeight = closedTitleHeight + 24;
+      let openHeight = openTitleHeight + 24;
+      if (shouldShowSubtitleRow) {
+        if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {
+          const {
+            height: closedSubtitleHeight
+          } = pseudoSubtitleClosedRef.current.getBoundingClientRect();
+          const {
+            height: openSubtitleHeight
+          } = pseudoSubtitleOpenRef.current.getBoundingClientRect();
+          closedHeight += closedSubtitleHeight + 4;
+          openHeight += openSubtitleHeight + 4;
+        }
+      }
       setHeadHeight({
-        closed: shouldShowSubtitleRow && closedSubtitle ? closedSubtitle.height + 4 + closedTitle.height + 24 : closedTitle.height + 24,
-        open: shouldShowSubtitleRow && openedSubtitle ? openedSubtitle.height + 4 + openedTitle.height + 24 : openedTitle.height + 24
+        closed: closedHeight,
+        open: openHeight
       });
+      setShouldRenderPseudoElements(false);
     }
-  }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);
+  }, [shouldShowSubtitleRow]);
+  (0, _react.useEffect)(() => {
+    if (subtitle || title) setShouldRenderPseudoElements(true);
+  }, [subtitle, title]);
 
   // This is used to trigger a rerender, so the head height can be calculated
   (0, _react.useEffect)(() => {
@@ -137,26 +160,27 @@ const ListItemHead = ({
     $isIconOrImageGiven: iconOrImageElement !== undefined,
     $marginTop: marginTop,
     $isOpen: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleContent, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleTextPseudo, {
+  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleContent, null, shouldRenderPseudoElements && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleTextPseudo, {
     ref: pseudoTitleOpenRef,
     $isOpen: true
   }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleTextPseudo, {
     ref: pseudoTitleClosedRef,
     $isOpen: false
-  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
+  }, title)), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
     $isOpen: isOpen,
-    $width: (openedTitle === null || openedTitle === void 0 ? void 0 : openedTitle.width) ?? 0
-  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
+    $width: openTitleWidth
+  }, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, shouldRenderPseudoElements && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleOpenRef,
     $isOpen: true
   }, subtitle), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleClosedRef,
     $isOpen: false
-  }, subtitle), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleText, {
+  }, subtitle)), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleText, {
     $isOpen: isOpen
   }, subtitle))), rightElements && /*#__PURE__*/_react.default.createElement(_ListItemRightElements.default, {
     rightElements: rightElements
   }), hoverItem && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadHoverItemWrapper, {
+    className: "beta-chayns-list-item-hover-item",
     animate: {
       marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,
       opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,

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","_ListItemRightElements","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","careOfLocationId","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","useState","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","useElementSize","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","useEffect","height","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","$width","width","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItemWrapper","marginLeft","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\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 type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    hoverItem?: ReactNode;\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    isTitleGreyed?: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    shouldOpenImageOnClick: boolean;\n    shouldShowRoundImageOrIcon?: boolean;\n    subtitle?: ReactNode;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    shouldOpenImageOnClick,\n    shouldShowRoundImageOrIcon,\n    subtitle,\n    shouldForceHover,\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 [, 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    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    shouldShowSubtitleRow && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    shouldShowSubtitleRow && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\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        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\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 (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    imageBackground={imageBackground}\n                    careOfLocationId={careOfLocationId}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height: isOpen ? headHeight.open : headHeight.closed,\n                opacity: isTitleGreyed ? 0.5 : 1,\n            }}\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 && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\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\n                            $isOpen={isOpen}\n                            $width={openedTitle?.width ?? 0}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\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                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    animate={{\n                        marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n                        width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\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","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemHead","careOfLocationId","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldRenderPseudoElements","setShouldRenderPseudoElements","useState","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","useRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","shouldShowSubtitleRow","useEffect","current","height","closedTitleHeight","getBoundingClientRect","openTitleHeight","width","openWidth","closedHeight","openHeight","closedSubtitleHeight","openSubtitleHeight","handleMouseEnter","useCallback","handleMouseLeave","marginTop","useMemo","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$marginTop","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","Fragment","StyledListItemHeadTitleTextPseudo","ref","StyledListItemHeadTitleText","$width","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItemWrapper","marginLeft","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    hoverItem?: ReactNode;\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    isTitleGreyed?: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    shouldOpenImageOnClick: boolean;\n    shouldShowRoundImageOrIcon?: boolean;\n    subtitle?: ReactNode;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    shouldOpenImageOnClick,\n    shouldShowRoundImageOrIcon,\n    subtitle,\n    shouldForceHover,\n    title,\n    titleElement,\n}) => {\n    const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [openTitleWidth, setOpenTitleWidth] = useState(0);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 40, open: 40 });\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\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 shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {\n            const { height: closedTitleHeight } =\n                pseudoTitleClosedRef.current.getBoundingClientRect();\n            const { height: openTitleHeight, width: openWidth } =\n                pseudoTitleOpenRef.current.getBoundingClientRect();\n\n            setOpenTitleWidth(openWidth);\n\n            let closedHeight = closedTitleHeight + 24;\n            let openHeight = openTitleHeight + 24;\n\n            if (shouldShowSubtitleRow) {\n                if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {\n                    const { height: closedSubtitleHeight } =\n                        pseudoSubtitleClosedRef.current.getBoundingClientRect();\n                    const { height: openSubtitleHeight } =\n                        pseudoSubtitleOpenRef.current.getBoundingClientRect();\n\n                    closedHeight += closedSubtitleHeight + 4;\n                    openHeight += openSubtitleHeight + 4;\n                }\n            }\n\n            setHeadHeight({ closed: closedHeight, open: openHeight });\n\n            setShouldRenderPseudoElements(false);\n        }\n    }, [shouldShowSubtitleRow]);\n\n    useEffect(() => {\n        if (subtitle || title) setShouldRenderPseudoElements(true);\n    }, [subtitle, title]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\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        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\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 (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    imageBackground={imageBackground}\n                    careOfLocationId={careOfLocationId}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height: isOpen ? headHeight.open : headHeight.closed,\n                opacity: isTitleGreyed ? 0.5 : 1,\n            }}\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 && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\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                        {shouldRenderPseudoElements && (\n                            <>\n                                <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                                    {title}\n                                </StyledListItemHeadTitleTextPseudo>\n                                <StyledListItemHeadTitleTextPseudo\n                                    ref={pseudoTitleClosedRef}\n                                    $isOpen={false}\n                                >\n                                    {title}\n                                </StyledListItemHeadTitleTextPseudo>\n                            </>\n                        )}\n                        <StyledListItemHeadTitleText $isOpen={isOpen} $width={openTitleWidth}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        {shouldRenderPseudoElements && (\n                            <>\n                                <StyledListItemHeadSubtitleTextPseudo\n                                    ref={pseudoSubtitleOpenRef}\n                                    $isOpen\n                                >\n                                    {subtitle}\n                                </StyledListItemHeadSubtitleTextPseudo>\n                                <StyledListItemHeadSubtitleTextPseudo\n                                    ref={pseudoSubtitleClosedRef}\n                                    $isOpen={false}\n                                >\n                                    {subtitle}\n                                </StyledListItemHeadSubtitleTextPseudo>\n                            </>\n                        )}\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n                        width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.js

@@ -141,7 +141,8 @@ const ListItem = _ref => {
   }), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isExpandable && isItemOpen && /*#__PURE__*/React.createElement(ListItemBody, {
-    id: uuid
+    id: uuid,
+    key: `listItemBody-${uuid}`
   }, /*#__PURE__*/React.createElement(AreaContextProvider, null, children))));
 };
 ListItem.displayName = 'ListItem';

package/lib/esm/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","isInitialRenderRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","current","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The locationId of the care-of site.\n     */\n    careOfLocationId?: number;\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the hover item should be forced.\n     */\n    shouldForceHover?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    careOfLocationId,\n    children,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isDefaultOpen,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onClose,\n    onLongPress,\n    onOpen,\n    rightElements,\n    shouldForceBackground = false,\n    shouldHideBottomLine = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldOpenImageOnClick = false,\n    shouldPreventLayoutAnimation = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    shouldForceHover = false,\n    subtitle,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isItemOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isItemOpen]);\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                icons={icons}\n                imageBackground={imageBackground}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                isTitleGreyed={isTitleGreyed}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                shouldForceHover={shouldForceHover}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                shouldOpenImageOnClick={shouldOpenImageOnClick}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                subtitle={subtitle}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","isInitialRenderRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","current","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The locationId of the care-of site.\n     */\n    careOfLocationId?: number;\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the hover item should be forced.\n     */\n    shouldForceHover?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    careOfLocationId,\n    children,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isDefaultOpen,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onClose,\n    onLongPress,\n    onOpen,\n    rightElements,\n    shouldForceBackground = false,\n    shouldHideBottomLine = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldOpenImageOnClick = false,\n    shouldPreventLayoutAnimation = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    shouldForceHover = false,\n    subtitle,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isItemOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isItemOpen]);\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                icons={icons}\n                imageBackground={imageBackground}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                isTitleGreyed={isTitleGreyed}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                shouldForceHover={shouldForceHover}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                shouldOpenImageOnClick={shouldOpenImageOnClick}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                subtitle={subtitle}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid} key={`listItemBody-${uuid}`}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAMRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,QACH,OAAO;AACd,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAOC,mBAAmB,MAAM,yCAAyC;AACzE,SAASC,WAAW,QAAQ,SAAS;AACrC,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,YAAY,MAAM,+BAA+B;AACxD,SAASC,oBAAoB,QAAQ,mBAAmB;AAiIxD,MAAMC,QAA2B,GAAGC,IAAA,IA4B9B;EAAA,IA5B+B;IACjCC,gBAAgB;IAChBC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,eAAe;IACfC,MAAM;IACNC,aAAa;IACbC,MAAM;IACNC,aAAa;IACbC,YAAY;IACZC,OAAO;IACPC,OAAO;IACPC,WAAW;IACXC,MAAM;IACNC,aAAa;IACbC,qBAAqB,GAAG,KAAK;IAC7BC,oBAAoB,GAAG,KAAK;IAC5BC,+BAA+B;IAC/BC,mBAAmB,GAAG,KAAK;IAC3BC,sBAAsB,GAAG,KAAK;IAC9BC,4BAA4B,GAAG,KAAK;IACpCC,0BAA0B;IAC1BC,wBAAwB,GAAG,KAAK;IAChCC,gBAAgB,GAAG,KAAK;IACxBC,QAAQ;IACRC,KAAK;IACLC;EACJ,CAAC,GAAA3B,IAAA;EACG,MAAM;IACF4B,4BAA4B;IAC5BC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC;EACJ,CAAC,GAAG3C,UAAU,CAACM,WAAW,CAAC;EAE3B,MAAM;IAAEmC,SAAS,EAAEG;EAAyB,CAAC,GAAG5C,UAAU,CAACI,gBAAgB,CAAC;EAE5E,MAAMyC,kBAAkB,GAAG3C,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAM4C,IAAI,GAAG3C,OAAO,CAAC,CAAC;EAEtB,MAAM4C,YAAY,GAAGlC,QAAQ,KAAKmC,SAAS;EAC3C,MAAMC,UAAU,GAAG9B,MAAM,IAAIuB,YAAY,KAAKI,IAAI;EAElD,MAAMI,UAAU,GAAGhD,MAAM,CAACqB,OAAO,CAAC;EAClC,MAAM4B,SAAS,GAAGjD,MAAM,CAACuB,MAAM,CAAC;EAEhCxB,SAAS,CAAC,MAAM;IACZiD,UAAU,CAACE,OAAO,GAAG7B,OAAO;IAC5B4B,SAAS,CAACC,OAAO,GAAG3B,MAAM;EAC9B,CAAC,EAAE,CAACN,MAAM,EAAEI,OAAO,EAAEE,MAAM,CAAC,CAAC;EAE7BxB,SAAS,CAAC,MAAM;IACZ,IAAI4C,kBAAkB,CAACO,OAAO,EAAE;MAC5BP,kBAAkB,CAACO,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAIH,UAAU,EAAE;MACnB,IAAI,OAAOE,SAAS,CAACC,OAAO,KAAK,UAAU,EAAE;QACzCD,SAAS,CAACC,OAAO,CAAC,CAAC;MACvB;IACJ,CAAC,MAAM,IAAI,OAAOF,UAAU,CAACE,OAAO,KAAK,UAAU,EAAE;MACjDF,UAAU,CAACE,OAAO,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACH,UAAU,CAAC,CAAC;EAEhB,MAAMI,eAAe,GAAGtD,WAAW,CAC9BuD,KAAK,IAAK;IACP,IAAIP,YAAY,EAAE;MACdJ,kBAAkB,CAACG,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOxB,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACgC,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACP,YAAY,EAAEzB,OAAO,EAAEqB,kBAAkB,EAAEG,IAAI,CACpD,CAAC;EAED7C,SAAS,CAAC,MAAM;IACZ,IAAI8C,YAAY,IAAI,CAACjB,mBAAmB,EAAE;MACtC;MACA;MACA,OAAOS,4BAA4B,CAAC,CAAC;IACzC;IAEA,OAAOS,SAAS;EACpB,CAAC,EAAE,CAACT,4BAA4B,EAAEQ,YAAY,EAAEjB,mBAAmB,CAAC,CAAC;EAErE7B,SAAS,CAAC,MAAM;IACZ,IAAIiB,aAAa,EAAE;MACfyB,kBAAkB,CAACG,IAAI,EAAE;QAAES,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAACrC,aAAa,EAAEyB,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE7C,MAAMU,WAAW,GAAG,OAAOlC,OAAO,KAAK,UAAU,IAAIyB,YAAY;EAEjE,oBACIjD,KAAA,CAAA2D,aAAA,CAAChD,oBAAoB;IACjBiD,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,GAAG,EAAE,aAAalB,IAAI,EAAG;IACzBmB,MAAM,EAAEjC,4BAA4B,GAAGgB,SAAS,GAAG,UAAW;IAC9DkB,YAAY,EAAEV,WAAY;IAC1BW,cAAc,EAAE,OAAOvB,wBAAwB,KAAK,SAAU;IAC9DwB,OAAO,EAAEnB,UAAW;IACpBoB,UAAU,EAAE5B,SAAU;IACtB6B,sBAAsB,EAAE3C,qBAAsB;IAC9C4C,qBAAqB,EAAE3C,oBAAqB;IAC5C4C,oBAAoB,EAAE1C,mBAAoB;IAC1C2C,yBAAyB,EAAEvC;EAAyB,gBAEpDpC,KAAA,CAAA2D,aAAA,CAACjD,YAAY;IACTM,SAAS,EAAEA,SAAU;IACrBF,gBAAgB,EAAEA,gBAAiB;IACnCG,KAAK,EAAEA,KAAM;IACbC,eAAe,EAAEA,eAAgB;IACjCC,MAAM,EAAEA,MAAO;IACfuB,mBAAmB,EAAEA,mBAAoB;IACzCO,YAAY,EAAEA,YAAa;IAC3B5B,MAAM,EAAE8B,UAAW;IACnB7B,aAAa,EAAEA,aAAc;IAC7BC,YAAY,EAAEA,YAAa;IAC3BC,OAAO,EAAEkC,WAAW,GAAGH,eAAe,GAAGL,SAAU;IACnDxB,WAAW,EAAEA,WAAY;IACzBW,gBAAgB,EAAEA,gBAAiB;IACnCT,aAAa,EAAEA,aAAc;IAC7BG,+BAA+B,EAAEA,+BAAgC;IACjEC,mBAAmB,EAAEA,mBAAoB;IACzCC,sBAAsB,EAAEA,sBAAuB;IAC/CE,0BAA0B,EAAEA,0BAA2B;IACvDG,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA;EAAa,CAC9B,CAAC,eACFxC,KAAA,CAAA2D,aAAA,CAAC5D,eAAe;IAACkE,OAAO,EAAE;EAAM,GAC3BhB,YAAY,IAAIE,UAAU,iBACvBnD,KAAA,CAAA2D,aAAA,CAAClD,YAAY;IAACmE,EAAE,EAAE5B,IAAK;IAACkB,GAAG,EAAE,gBAAgBlB,IAAI;EAAG,gBAChDhD,KAAA,CAAA2D,aAAA,CAACpD,mBAAmB,QAAEQ,QAA8B,CAC1C,CAEL,CACC,CAAC;AAE/B,CAAC;AAEDH,QAAQ,CAACiE,WAAW,GAAG,UAAU;AAEjC,eAAejE,QAAQ","ignoreList":[]}

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useElementSize } from '../../../../hooks/useElementSize';
 import Icon from '../../../icon/Icon';
 import ListItemIcon from './list-item-icon/ListItemIcon';
 import ListItemImage from './list-item-image/ListItemImage';
@@ -29,7 +28,9 @@ const ListItemHead = _ref => {
     title,
     titleElement
   } = _ref;
+  const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);
   const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);
+  const [openTitleWidth, setOpenTitleWidth] = useState(0);
   const [headHeight, setHeadHeight] = useState({
     closed: 40,
     open: 40
@@ -40,19 +41,41 @@ const ListItemHead = _ref => {
   const pseudoTitleClosedRef = useRef(null);
   const pseudoSubtitleOpenRef = useRef(null);
   const pseudoSubtitleClosedRef = useRef(null);
-  const closedTitle = useElementSize(pseudoTitleClosedRef);
-  const openedTitle = useElementSize(pseudoTitleOpenRef);
-  const closedSubtitle = useElementSize(pseudoSubtitleClosedRef);
-  const openedSubtitle = useElementSize(pseudoSubtitleOpenRef);
   const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
   useEffect(() => {
-    if (closedTitle && openedTitle) {
+    if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {
+      const {
+        height: closedTitleHeight
+      } = pseudoTitleClosedRef.current.getBoundingClientRect();
+      const {
+        height: openTitleHeight,
+        width: openWidth
+      } = pseudoTitleOpenRef.current.getBoundingClientRect();
+      setOpenTitleWidth(openWidth);
+      let closedHeight = closedTitleHeight + 24;
+      let openHeight = openTitleHeight + 24;
+      if (shouldShowSubtitleRow) {
+        if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {
+          const {
+            height: closedSubtitleHeight
+          } = pseudoSubtitleClosedRef.current.getBoundingClientRect();
+          const {
+            height: openSubtitleHeight
+          } = pseudoSubtitleOpenRef.current.getBoundingClientRect();
+          closedHeight += closedSubtitleHeight + 4;
+          openHeight += openSubtitleHeight + 4;
+        }
+      }
       setHeadHeight({
-        closed: shouldShowSubtitleRow && closedSubtitle ? closedSubtitle.height + 4 + closedTitle.height + 24 : closedTitle.height + 24,
-        open: shouldShowSubtitleRow && openedSubtitle ? openedSubtitle.height + 4 + openedTitle.height + 24 : openedTitle.height + 24
+        closed: closedHeight,
+        open: openHeight
       });
+      setShouldRenderPseudoElements(false);
     }
-  }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);
+  }, [shouldShowSubtitleRow]);
+  useEffect(() => {
+    if (subtitle || title) setShouldRenderPseudoElements(true);
+  }, [subtitle, title]);
 
   // This is used to trigger a rerender, so the head height can be calculated
   useEffect(() => {
@@ -129,26 +152,27 @@ const ListItemHead = _ref => {
     $isIconOrImageGiven: iconOrImageElement !== undefined,
     $marginTop: marginTop,
     $isOpen: isOpen
-  }, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleContent, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleTextPseudo, {
+  }, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleContent, null, shouldRenderPseudoElements && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleTextPseudo, {
     ref: pseudoTitleOpenRef,
     $isOpen: true
   }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleTextPseudo, {
     ref: pseudoTitleClosedRef,
     $isOpen: false
-  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
+  }, title)), /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
     $isOpen: isOpen,
-    $width: openedTitle?.width ?? 0
-  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
+    $width: openTitleWidth
+  }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, shouldRenderPseudoElements && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleOpenRef,
     $isOpen: true
   }, subtitle), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleTextPseudo, {
     ref: pseudoSubtitleClosedRef,
     $isOpen: false
-  }, subtitle), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
+  }, subtitle)), /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
     $isOpen: isOpen
   }, subtitle))), rightElements && /*#__PURE__*/React.createElement(ListItemRightElements, {
     rightElements: rightElements
   }), hoverItem && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItemWrapper, {
+    className: "beta-chayns-list-item-hover-item",
     animate: {
       marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,
       opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,

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","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","ListItemHead","_ref","careOfLocationId","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldShowHoverItem","setShouldShowHoverItem","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","closedTitle","openedTitle","closedSubtitle","openedSubtitle","shouldShowSubtitleRow","height","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","ref","$width","width","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\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 type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    hoverItem?: ReactNode;\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    isTitleGreyed?: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    shouldOpenImageOnClick: boolean;\n    shouldShowRoundImageOrIcon?: boolean;\n    subtitle?: ReactNode;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    shouldOpenImageOnClick,\n    shouldShowRoundImageOrIcon,\n    subtitle,\n    shouldForceHover,\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 [, 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    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (closedTitle && openedTitle) {\n            setHeadHeight({\n                closed:\n                    shouldShowSubtitleRow && closedSubtitle\n                        ? closedSubtitle.height + 4 + closedTitle.height + 24\n                        : closedTitle.height + 24,\n                open:\n                    shouldShowSubtitleRow && openedSubtitle\n                        ? openedSubtitle.height + 4 + openedTitle.height + 24\n                        : openedTitle.height + 24,\n            });\n        }\n    }, [closedSubtitle, closedTitle, openedSubtitle, openedTitle, shouldShowSubtitleRow]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\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        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\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 (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    imageBackground={imageBackground}\n                    careOfLocationId={careOfLocationId}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height: isOpen ? headHeight.open : headHeight.closed,\n                opacity: isTitleGreyed ? 0.5 : 1,\n            }}\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 && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\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\n                            $isOpen={isOpen}\n                            $width={openedTitle?.width ?? 0}\n                        >\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\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                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    animate={{\n                        marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n                        width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\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","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadSubtitleTextPseudo","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemHeadTitleTextPseudo","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","ListItemHead","_ref","careOfLocationId","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","shouldRenderPseudoElements","setShouldRenderPseudoElements","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","pseudoTitleOpenRef","pseudoTitleClosedRef","pseudoSubtitleOpenRef","pseudoSubtitleClosedRef","shouldShowSubtitleRow","current","height","closedTitleHeight","getBoundingClientRect","openTitleHeight","width","openWidth","closedHeight","openHeight","closedSubtitleHeight","openSubtitleHeight","handleMouseEnter","handleMouseLeave","marginTop","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$marginTop","$isOpen","Fragment","ref","$width","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadContent,\n    StyledListItemHeadLeftWrapper,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadSubtitleTextPseudo,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTitleTextPseudo,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    hoverItem?: ReactNode;\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    isTitleGreyed?: boolean;\n    leftElements?: ReactNode;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: IListItemRightElements;\n    shouldHideImageOrIconBackground?: boolean;\n    shouldHideIndicator?: boolean;\n    shouldOpenImageOnClick: boolean;\n    shouldShowRoundImageOrIcon?: boolean;\n    subtitle?: ReactNode;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldForceHover?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    hoverItem,\n    icons,\n    imageBackground,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onLongPress,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    shouldOpenImageOnClick,\n    shouldShowRoundImageOrIcon,\n    subtitle,\n    shouldForceHover,\n    title,\n    titleElement,\n}) => {\n    const [shouldRenderPseudoElements, setShouldRenderPseudoElements] = useState(true);\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [openTitleWidth, setOpenTitleWidth] = useState(0);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 40, open: 40 });\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\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 shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    useEffect(() => {\n        if (pseudoTitleOpenRef.current && pseudoTitleClosedRef.current) {\n            const { height: closedTitleHeight } =\n                pseudoTitleClosedRef.current.getBoundingClientRect();\n            const { height: openTitleHeight, width: openWidth } =\n                pseudoTitleOpenRef.current.getBoundingClientRect();\n\n            setOpenTitleWidth(openWidth);\n\n            let closedHeight = closedTitleHeight + 24;\n            let openHeight = openTitleHeight + 24;\n\n            if (shouldShowSubtitleRow) {\n                if (pseudoSubtitleOpenRef.current && pseudoSubtitleClosedRef.current) {\n                    const { height: closedSubtitleHeight } =\n                        pseudoSubtitleClosedRef.current.getBoundingClientRect();\n                    const { height: openSubtitleHeight } =\n                        pseudoSubtitleOpenRef.current.getBoundingClientRect();\n\n                    closedHeight += closedSubtitleHeight + 4;\n                    openHeight += openSubtitleHeight + 4;\n                }\n            }\n\n            setHeadHeight({ closed: closedHeight, open: openHeight });\n\n            setShouldRenderPseudoElements(false);\n        }\n    }, [shouldShowSubtitleRow]);\n\n    useEffect(() => {\n        if (subtitle || title) setShouldRenderPseudoElements(true);\n    }, [subtitle, title]);\n\n    // This is used to trigger a rerender, so the head height can be calculated\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        const height = headHeight[isOpen ? 'open' : 'closed'];\n\n        if (height < 64) {\n            return (64 - height) / 2;\n        }\n\n        return 0;\n    }, [headHeight, isOpen]);\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 (\n                <ListItemIcon\n                    icons={icons}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        if (images) {\n            return (\n                <ListItemImage\n                    imageBackground={imageBackground}\n                    careOfLocationId={careOfLocationId}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height: isOpen ? headHeight.open : headHeight.closed,\n                opacity: isTitleGreyed ? 0.5 : 1,\n            }}\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 && !shouldHideIndicator && (\n                            <Icon icons={['fa fa-chevron-right']} />\n                        )}\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                        {shouldRenderPseudoElements && (\n                            <>\n                                <StyledListItemHeadTitleTextPseudo ref={pseudoTitleOpenRef} $isOpen>\n                                    {title}\n                                </StyledListItemHeadTitleTextPseudo>\n                                <StyledListItemHeadTitleTextPseudo\n                                    ref={pseudoTitleClosedRef}\n                                    $isOpen={false}\n                                >\n                                    {title}\n                                </StyledListItemHeadTitleTextPseudo>\n                            </>\n                        )}\n                        <StyledListItemHeadTitleText $isOpen={isOpen} $width={openTitleWidth}>\n                            {title}\n                        </StyledListItemHeadTitleText>\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle>\n                        {shouldRenderPseudoElements && (\n                            <>\n                                <StyledListItemHeadSubtitleTextPseudo\n                                    ref={pseudoSubtitleOpenRef}\n                                    $isOpen\n                                >\n                                    {subtitle}\n                                </StyledListItemHeadSubtitleTextPseudo>\n                                <StyledListItemHeadSubtitleTextPseudo\n                                    ref={pseudoSubtitleClosedRef}\n                                    $isOpen={false}\n                                >\n                                    {subtitle}\n                                </StyledListItemHeadSubtitleTextPseudo>\n                            </>\n                        )}\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && <ListItemRightElements rightElements={rightElements} />}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n                        width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1034",
+    "version": "5.0.0-beta.1036",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "254a6901c7b429c95f9ddbb515f4cfe0fc5b1519"
+    "gitHead": "de6f082b30b042fcd788884f0a63d665337ab067"
 }