@chayns-components/core 5.0.0-beta.1170 → 5.0.0-beta.1172

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

@@ -14,10 +14,10 @@ var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBod
 var _ListItemHead = _interopRequireDefault(require("./list-item-head/ListItemHead"));
 var _ListItem = require("./ListItem.styles");
 var _Tooltip = _interopRequireDefault(require("../../tooltip/Tooltip"));
-var _reactResizeDetector = require("react-resize-detector");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ListItem = ({
+  backgroundColor,
   careOfLocationId,
   children,
   cornerImage,
@@ -62,9 +62,7 @@ const ListItem = ({
   } = (0, _react2.useContext)(_Accordion.AccordionContext);
   const areaProvider = (0, _react2.useContext)(_AreaContextProvider.AreaContext);
   const isInitialRenderRef = (0, _react2.useRef)(true);
-  const {
-    ref: listItemRef
-  } = (0, _reactResizeDetector.useResizeDetector)();
+  const listItemRef = (0, _react2.useRef)(null);
   const uuid = (0, _uuid.useUuid)();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
@@ -153,6 +151,7 @@ const ListItem = ({
     key: `list-item-${uuid}`,
     ref: listItemRef,
     layout: shouldPreventLayoutAnimation ? undefined : 'position',
+    $backgroundColor: backgroundColor,
     $isClickable: isClickable,
     $isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !shouldDisablePadding,
     $isOpen: isItemOpen,

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","_List","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_reactResizeDetector","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItem","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","ref","listItemRef","useResizeDetector","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","shouldDisablePadding","useMemo","shouldDisableListItemPadding","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","headContent","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","AnimatePresence","id","shouldHideBody","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    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItemTooltip, StyledMotionListItem } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useResizeDetector } from 'react-resize-detector';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * DEPRECATED: Use `cornerImage` instead.\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     * The image that is displayed in the bottom right corner of the grouped image of list item.\n     */\n    cornerImage?: string;\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 line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n     */\n    shouldForceBottomLine?: 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     * This will render the ListItem closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should always be 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     * Whether a Tooltip should be displayed on hover, if the title is cut.\n     */\n    shouldShowTooltipOnTitleOverflow?: 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    cornerImage,\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    shouldShowTooltipOnTitleOverflow = false,\n    shouldForceBackground = false,\n    shouldForceBottomLine = false,\n    shouldForceHover = false,\n    shouldHideBottomLine = false,\n    shouldOpenImageOnClick = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldPreventLayoutAnimation = false,\n    shouldRenderClosed = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = 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 areaProvider = useContext(AreaContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const { ref: listItemRef } = useResizeDetector();\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    const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n\n    const shouldDisablePadding = useMemo(\n        () => areaProvider.shouldDisableListItemPadding ?? false,\n        [areaProvider.shouldDisableListItemPadding],\n    );\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    const headContent = useMemo(\n        () => (\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                cornerImage={cornerImage}\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                setShouldEnableTooltip={setShouldEnableTooltip}\n            />\n        ),\n        [\n            careOfLocationId,\n            cornerImage,\n            handleHeadClick,\n            hoverItem,\n            icons,\n            imageBackground,\n            images,\n            isAnyItemExpandable,\n            isClickable,\n            isExpandable,\n            isItemOpen,\n            isTitleGreyed,\n            leftElements,\n            onLongPress,\n            rightElements,\n            shouldForceHover,\n            shouldHideImageOrIconBackground,\n            shouldHideIndicator,\n            shouldOpenImageOnClick,\n            shouldShowRoundImageOrIcon,\n            subtitle,\n            title,\n            titleElement,\n        ],\n    );\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            ref={listItemRef}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean' && !shouldDisablePadding}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldForceBottomLine={shouldForceBottomLine}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <Tooltip\n                shouldUseFullWidth\n                isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n                item={\n                    <StyledListItemTooltip\n                        style={{ cursor: 'default' }}\n                        key={`list-item-tooltip-${uuid}`}\n                    >\n                        {title}\n                    </StyledListItemTooltip>\n                }\n            >\n                {headContent}\n            </Tooltip>\n            <AnimatePresence initial={false}>\n                {isExpandable && (isItemOpen || shouldRenderClosed) && (\n                    <ListItemBody\n                        id={uuid}\n                        key={`listItemBody-${uuid}`}\n                        shouldHideBody={shouldRenderClosed && !isItemOpen}\n                    >\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AAaA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAH,uBAAA,CAAAF,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,aAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,aAAA,GAAAD,sBAAA,CAAAR,OAAA;AACA,IAAAU,SAAA,GAAAV,OAAA;AACA,IAAAW,QAAA,GAAAH,sBAAA,CAAAR,OAAA;AACA,IAAAY,oBAAA,GAAAZ,OAAA;AAA0D,SAAAQ,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAiJ1D,MAAMgB,QAA2B,GAAGA,CAAC;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,WAAW;EACXC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,aAAa;EACbC,YAAY;EACZC,OAAO;EACPC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC,aAAa;EACbC,gCAAgC,GAAG,KAAK;EACxCC,qBAAqB,GAAG,KAAK;EAC7BC,qBAAqB,GAAG,KAAK;EAC7BC,gBAAgB,GAAG,KAAK;EACxBC,oBAAoB,GAAG,KAAK;EAC5BC,sBAAsB,GAAG,KAAK;EAC9BC,+BAA+B;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,4BAA4B,GAAG,KAAK;EACpCC,kBAAkB,GAAG,KAAK;EAC1BC,0BAA0B;EAC1BC,wBAAwB,GAAG,KAAK;EAChCC,QAAQ;EACRC,KAAK;EACLC;AACJ,CAAC,KAAK;EACF,MAAM;IACFC,4BAA4B;IAC5BC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC;EACJ,CAAC,GAAG,IAAAC,kBAAU,EAACC,iBAAW,CAAC;EAE3B,MAAM;IAAEJ,SAAS,EAAEK;EAAyB,CAAC,GAAG,IAAAF,kBAAU,EAACG,2BAAgB,CAAC;EAE5E,MAAMC,YAAY,GAAG,IAAAJ,kBAAU,EAACK,gCAAW,CAAC;EAE5C,MAAMC,kBAAkB,GAAG,IAAAC,cAAM,EAAC,IAAI,CAAC;EAEvC,MAAM;IAAEC,GAAG,EAAEC;EAAY,CAAC,GAAG,IAAAC,sCAAiB,EAAC,CAAC;EAEhD,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAMC,YAAY,GAAGhD,QAAQ,KAAKiD,SAAS;EAC3C,MAAMC,UAAU,GAAG3C,MAAM,IAAI0B,YAAY,KAAKa,IAAI;EAElD,MAAMK,UAAU,GAAG,IAAAT,cAAM,EAAC/B,OAAO,CAAC;EAClC,MAAMyC,SAAS,GAAG,IAAAV,cAAM,EAAC7B,MAAM,CAAC;EAEhC,MAAM,CAACwC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,gBAAQ,EAAC,KAAK,CAAC;EAErE,MAAMC,oBAAoB,GAAG,IAAAC,eAAO,EAChC,MAAMlB,YAAY,CAACmB,4BAA4B,IAAI,KAAK,EACxD,CAACnB,YAAY,CAACmB,4BAA4B,CAC9C,CAAC;EAED,IAAAC,iBAAS,EAAC,MAAM;IACZR,UAAU,CAACS,OAAO,GAAGjD,OAAO;IAC5ByC,SAAS,CAACQ,OAAO,GAAG/C,MAAM;EAC9B,CAAC,EAAE,CAACN,MAAM,EAAEI,OAAO,EAAEE,MAAM,CAAC,CAAC;EAE7B,IAAA8C,iBAAS,EAAC,MAAM;IACZ,IAAIlB,kBAAkB,CAACmB,OAAO,EAAE;MAC5BnB,kBAAkB,CAACmB,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAIV,UAAU,EAAE;MACnB,IAAI,OAAOE,SAAS,CAACQ,OAAO,KAAK,UAAU,EAAE;QACzCR,SAAS,CAACQ,OAAO,CAAC,CAAC;MACvB;IACJ,CAAC,MAAM,IAAI,OAAOT,UAAU,CAACS,OAAO,KAAK,UAAU,EAAE;MACjDT,UAAU,CAACS,OAAO,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACV,UAAU,CAAC,CAAC;EAEhB,MAAMW,eAAe,GAAG,IAAAC,mBAAW,EAC9BC,KAAK,IAAK;IACP,IAAIf,YAAY,EAAE;MACdd,kBAAkB,CAACY,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOpC,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACqD,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACf,YAAY,EAAEtC,OAAO,EAAEwB,kBAAkB,EAAEY,IAAI,CACpD,CAAC;EAED,IAAAa,iBAAS,EAAC,MAAM;IACZ,IAAIX,YAAY,IAAI,CAAC1B,mBAAmB,EAAE;MACtC;MACA;MACA,OAAOQ,4BAA4B,CAAC,CAAC;IACzC;IAEA,OAAOmB,SAAS;EACpB,CAAC,EAAE,CAACnB,4BAA4B,EAAEkB,YAAY,EAAE1B,mBAAmB,CAAC,CAAC;EAErE,IAAAqC,iBAAS,EAAC,MAAM;IACZ,IAAIrD,aAAa,EAAE;MACf4B,kBAAkB,CAACY,IAAI,EAAE;QAAEkB,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAAC1D,aAAa,EAAE4B,kBAAkB,EAAEY,IAAI,CAAC,CAAC;EAE7C,MAAMmB,WAAW,GAAG,OAAOvD,OAAO,KAAK,UAAU,IAAIsC,YAAY;EAEjE,MAAMkB,WAAW,GAAG,IAAAT,eAAO,EACvB,mBACI1F,OAAA,CAAAc,OAAA,CAAAsF,aAAA,CAAC5F,aAAA,CAAAM,OAAY;IACTqB,SAAS,EAAEA,SAAU;IACrBH,gBAAgB,EAAEA,gBAAiB;IACnCE,WAAW,EAAEA,WAAY;IACzBE,KAAK,EAAEA,KAAM;IACbC,eAAe,EAAEA,eAAgB;IACjCC,MAAM,EAAEA,MAAO;IACf0B,mBAAmB,EAAEA,mBAAoB;IACzCiB,YAAY,EAAEA,YAAa;IAC3BzC,MAAM,EAAE2C,UAAW;IACnB1C,aAAa,EAAEA,aAAc;IAC7BC,YAAY,EAAEA,YAAa;IAC3BC,OAAO,EAAEuD,WAAW,GAAGJ,eAAe,GAAGZ,SAAU;IACnDrC,WAAW,EAAEA,WAAY;IACzBM,gBAAgB,EAAEA,gBAAiB;IACnCJ,aAAa,EAAEA,aAAc;IAC7BO,+BAA+B,EAAEA,+BAAgC;IACjEC,mBAAmB,EAAEA,mBAAoB;IACzCF,sBAAsB,EAAEA,sBAAuB;IAC/CK,0BAA0B,EAAEA,0BAA2B;IACvDE,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3ByB,sBAAsB,EAAEA;EAAuB,CAClD,CACJ,EACD,CACIvD,gBAAgB,EAChBE,WAAW,EACX4D,eAAe,EACf3D,SAAS,EACTC,KAAK,EACLC,eAAe,EACfC,MAAM,EACN0B,mBAAmB,EACnBkC,WAAW,EACXjB,YAAY,EACZE,UAAU,EACV1C,aAAa,EACbC,YAAY,EACZG,WAAW,EACXE,aAAa,EACbI,gBAAgB,EAChBG,+BAA+B,EAC/BC,mBAAmB,EACnBF,sBAAsB,EACtBK,0BAA0B,EAC1BE,QAAQ,EACRC,KAAK,EACLC,YAAY,CAEpB,CAAC;EAED,oBACI9D,OAAA,CAAAc,OAAA,CAAAsF,aAAA,CAAC3F,SAAA,CAAA4F,oBAAoB;IACjBC,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,aAAa7B,IAAI,EAAG;IACzBH,GAAG,EAAEC,WAAY;IACjBgC,MAAM,EAAErD,4BAA4B,GAAG0B,SAAS,GAAG,UAAW;IAC9D4B,YAAY,EAAEZ,WAAY;IAC1Ba,cAAc,EAAE,OAAOzC,wBAAwB,KAAK,SAAS,IAAI,CAACmB,oBAAqB;IACvFuB,OAAO,EAAE7B,UAAW;IACpB8B,UAAU,EAAEhD,SAAU;IACtBiD,sBAAsB,EAAEjE,qBAAsB;IAC9CkE,sBAAsB,EAAEjE,qBAAsB;IAC9CkE,qBAAqB,EAAEhE,oBAAqB;IAC5CiE,oBAAoB,EAAE9D,mBAAoB;IAC1C+D,yBAAyB,EAAE3D;EAAyB,gBAEpD3D,OAAA,CAAAc,OAAA,CAAAsF,aAAA,CAAC1F,QAAA,CAAAI,OAAO;IACJyG,kBAAkB;IAClBC,UAAU,EAAE,CAACxE,gCAAgC,IAAI,CAACsC,mBAAoB;IACtEmC,IAAI,eACAzH,OAAA,CAAAc,OAAA,CAAAsF,aAAA,CAAC3F,SAAA,CAAAiH,qBAAqB;MAClBC,KAAK,EAAE;QAAEC,MAAM,EAAE;MAAU,CAAE;MAC7BhB,GAAG,EAAE,qBAAqB7B,IAAI;IAAG,GAEhClB,KACkB;EAC1B,GAEAsC,WACI,CAAC,eACVnG,OAAA,CAAAc,OAAA,CAAAsF,aAAA,CAACtG,MAAA,CAAA+H,eAAe;IAAClB,OAAO,EAAE;EAAM,GAC3B1B,YAAY,KAAKE,UAAU,IAAI1B,kBAAkB,CAAC,iBAC/CzD,OAAA,CAAAc,OAAA,CAAAsF,aAAA,CAAC9F,aAAA,CAAAQ,OAAY;IACTgH,EAAE,EAAE/C,IAAK;IACT6B,GAAG,EAAE,gBAAgB7B,IAAI,EAAG;IAC5BgD,cAAc,EAAEtE,kBAAkB,IAAI,CAAC0B;EAAW,gBAElDnF,OAAA,CAAAc,OAAA,CAAAsF,aAAA,CAAChG,oBAAA,CAAAU,OAAmB,QAAEmB,QAA8B,CAC1C,CAEL,CACC,CAAC;AAE/B,CAAC;AAEDF,QAAQ,CAACiG,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApH,OAAA,GAEnBiB,QAAQ","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_List","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItem","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","listItemRef","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","shouldDisablePadding","useMemo","shouldDisableListItemPadding","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","headContent","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","ref","layout","$backgroundColor","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","AnimatePresence","id","shouldHideBody","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    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItemTooltip, StyledMotionListItem } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The background color of the `ListItem`.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * DEPRECATED: Use `cornerImage` instead.\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     * The image that is displayed in the bottom right corner of the grouped image of list item.\n     */\n    cornerImage?: string;\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 line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n     */\n    shouldForceBottomLine?: 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     * This will render the ListItem closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should always be 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     * Whether a Tooltip should be displayed on hover, if the title is cut.\n     */\n    shouldShowTooltipOnTitleOverflow?: 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    backgroundColor,\n    careOfLocationId,\n    children,\n    cornerImage,\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    shouldShowTooltipOnTitleOverflow = false,\n    shouldForceBackground = false,\n    shouldForceBottomLine = false,\n    shouldForceHover = false,\n    shouldHideBottomLine = false,\n    shouldOpenImageOnClick = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldPreventLayoutAnimation = false,\n    shouldRenderClosed = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = 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 areaProvider = useContext(AreaContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const listItemRef = useRef<HTMLDivElement>(null);\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    const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n\n    const shouldDisablePadding = useMemo(\n        () => areaProvider.shouldDisableListItemPadding ?? false,\n        [areaProvider.shouldDisableListItemPadding],\n    );\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    const headContent = useMemo(\n        () => (\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                cornerImage={cornerImage}\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                setShouldEnableTooltip={setShouldEnableTooltip}\n            />\n        ),\n        [\n            careOfLocationId,\n            cornerImage,\n            handleHeadClick,\n            hoverItem,\n            icons,\n            imageBackground,\n            images,\n            isAnyItemExpandable,\n            isClickable,\n            isExpandable,\n            isItemOpen,\n            isTitleGreyed,\n            leftElements,\n            onLongPress,\n            rightElements,\n            shouldForceHover,\n            shouldHideImageOrIconBackground,\n            shouldHideIndicator,\n            shouldOpenImageOnClick,\n            shouldShowRoundImageOrIcon,\n            subtitle,\n            title,\n            titleElement,\n        ],\n    );\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            ref={listItemRef}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $backgroundColor={backgroundColor}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean' && !shouldDisablePadding}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldForceBottomLine={shouldForceBottomLine}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <Tooltip\n                shouldUseFullWidth\n                isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n                item={\n                    <StyledListItemTooltip\n                        style={{ cursor: 'default' }}\n                        key={`list-item-tooltip-${uuid}`}\n                    >\n                        {title}\n                    </StyledListItemTooltip>\n                }\n            >\n                {headContent}\n            </Tooltip>\n            <AnimatePresence initial={false}>\n                {isExpandable && (isItemOpen || shouldRenderClosed) && (\n                    <ListItemBody\n                        id={uuid}\n                        key={`listItemBody-${uuid}`}\n                        shouldHideBody={shouldRenderClosed && !isItemOpen}\n                    >\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/ListItem.styles.js

@@ -26,6 +26,15 @@ const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponent
 }) => (!$isInAccordion && $isOpen || $shouldForceBackground) && (0, _styledComponents.css)`
             background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
         `}
+    
+    ${({
+  $backgroundColor,
+  $isInAccordion,
+  $isOpen,
+  $shouldForceBackground
+}) => $backgroundColor && (!$isInAccordion && $isOpen || $shouldForceBackground) && (0, _styledComponents.css)`
+            background-color: ${$backgroundColor} !important;
+        `}
 
     ${({
   $isClickable,

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionListItem","exports","styled","motion","div","$isInAccordion","$shouldHideIndicator","css","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({ $isInAccordion, $isOpen, $shouldForceBackground, theme }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    ${({ $isClickable, $isInAccordion, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionListItem","exports","styled","motion","div","$isInAccordion","$shouldHideIndicator","css","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\n\ntype StyledListItemProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({ $isInAccordion, $isOpen, $shouldForceBackground, theme }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n    \n    ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n        $backgroundColor &&\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: ${$backgroundColor} !important;\n        `}\n\n    ${({ $isClickable, $isInAccordion, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -40,59 +40,35 @@ const ListItemHead = ({
   setShouldEnableTooltip
 }) => {
   const [shouldShowHoverItem, setShouldShowHoverItem] = (0, _react.useState)(false);
-  const [openTitleWidth, setOpenTitleWidth] = (0, _react.useState)(0);
-  const [headHeight, setHeadHeight] = (0, _react.useState)({
-    closed: 64,
-    open: 64
-  });
   const [, setIsFirstRender] = (0, _react.useState)(false);
   const longPressTimeoutRef = (0, _react.useRef)();
   const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
-  const handleShowTooltipResize = (0, _react.useCallback)(ref => {
-    if (ref.current) {
-      const el = ref.current;
-      setShouldEnableTooltip(el.scrollWidth > el.clientWidth);
-    }
+  const {
+    ref: subTitleRef,
+    height: subTitleHeight = 0
+  } = (0, _reactResizeDetector.useResizeDetector)();
+  const shouldShowMultilineTitle = (0, _react.useMemo)(() => !subtitle, [subtitle]);
+  const handleShowTooltipResize = (0, _react.useCallback)(data => {
+    var _data$entry;
+    const el = (_data$entry = data.entry) === null || _data$entry === void 0 ? void 0 : _data$entry.target;
+    if (!el) return;
+    setShouldEnableTooltip(el.scrollWidth > el.clientWidth);
   }, [setShouldEnableTooltip]);
   const {
     ref: titleRef,
-    height: titleHeight,
-    width: titleWidth
+    height: titleHeight = 0,
+    width: titleWidth = 0
   } = (0, _reactResizeDetector.useResizeDetector)({
-    onResize: () => handleShowTooltipResize(titleRef)
+    onResize: handleShowTooltipResize
   });
   const {
     ref: ellipsisTitleRef,
-    height: ellipsisTitleHeight
-  } = (0, _reactResizeDetector.useResizeDetector)({
-    onResize: () => handleShowTooltipResize(ellipsisTitleRef)
-  });
-  const {
-    ref: subTitleRef,
-    height: subTitleHeight
-  } = (0, _reactResizeDetector.useResizeDetector)();
-  const {
-    ref: listItemRef
+    height: ellipsisTitleHeight = 0,
+    width: ellipsisTitleWidth = 0
   } = (0, _reactResizeDetector.useResizeDetector)({
-    onResize: () => {
-      setOpenTitleWidth(titleWidth ?? 0);
-      let closedHeight = (ellipsisTitleHeight ?? 0) + 24;
-      let openHeight = (titleHeight ?? 0) + 24;
-      if (shouldShowSubtitleRow) {
-        if (subTitleHeight) {
-          closedHeight += (ellipsisTitleHeight ?? 0) + 4;
-          openHeight += subTitleHeight + 4;
-        }
-      }
-      setHeadHeight({
-        closed: closedHeight,
-        open: openHeight
-      });
-    },
-    refreshMode: 'debounce',
-    refreshRate: 100
+    onResize: handleShowTooltipResize
   });
-  const shouldShowMultilineTitle = (0, _react.useMemo)(() => !subtitle, [subtitle]);
+  const height = (0, _react.useMemo)(() => (isOpen ? titleHeight : ellipsisTitleHeight) + (shouldShowSubtitleRow ? subTitleHeight + 4 : 0), [ellipsisTitleHeight, isOpen, shouldShowSubtitleRow, subTitleHeight, titleHeight]);
 
   // This is used to trigger a rerender, so the head height can be calculated
   (0, _react.useEffect)(() => {
@@ -150,7 +126,7 @@ const ListItemHead = ({
   }, [careOfLocationId, cornerImage, icons, imageBackground, images, shouldHideImageOrIconBackground, shouldOpenImageOnClick, shouldShowRoundImageOrIcon]);
   return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHead, {
     animate: {
-      height: isOpen ? headHeight.open : headHeight.closed,
+      height,
       opacity: isTitleGreyed ? 0.5 : 1
     },
     initial: false,
@@ -177,12 +153,12 @@ const ListItemHead = ({
   }, isExpandable && !shouldHideIndicator && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-chevron-right']
   })), leftElements, iconOrImageElement), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadContent, {
-    ref: listItemRef,
     $isIconOrImageGiven: iconOrImageElement !== undefined,
     $isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleContent, null, isOpen ? /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
+    key: "title",
     ref: titleRef,
-    $width: openTitleWidth,
+    $width: titleWidth,
     $shouldShowMultilineTitle: shouldShowMultilineTitle,
     initial: {
       opacity: 0
@@ -197,9 +173,10 @@ const ListItemHead = ({
       duration: 0.4
     }
   }, title) : /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
+    key: "ellipsisTitle",
     $isEllipsis: true,
     ref: ellipsisTitleRef,
-    $width: openTitleWidth,
+    $width: ellipsisTitleWidth,
     $shouldShowMultilineTitle: shouldShowMultilineTitle,
     initial: {
       opacity: 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","_accordion","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","_reactResizeDetector","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","useState","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","useRef","shouldShowSubtitleRow","handleShowTooltipResize","useCallback","ref","current","el","scrollWidth","clientWidth","titleRef","height","titleHeight","width","titleWidth","useResizeDetector","onResize","ellipsisTitleRef","ellipsisTitleHeight","subTitleRef","subTitleHeight","listItemRef","closedHeight","openHeight","refreshMode","refreshRate","shouldShowMultilineTitle","useMemo","useEffect","handleMouseEnter","handleMouseLeave","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","getElementClickEvent","center","top","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","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleText","$width","$shouldShowMultilineTitle","exit","$isEllipsis","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","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 { getElementClickEvent } from '../../../../utils/accordion';\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    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { OnRefChangeType } from 'react-resize-detector/build/types';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\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    setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    cornerImage,\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    setShouldEnableTooltip,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [openTitleWidth, setOpenTitleWidth] = useState(0);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 64, open: 64 });\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    const handleShowTooltipResize = useCallback(\n        (ref: OnRefChangeType<HTMLDivElement>) => {\n            if (ref.current) {\n                const el = ref.current;\n                setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n            }\n        },\n        [setShouldEnableTooltip],\n    );\n\n    const {\n        ref: titleRef,\n        height: titleHeight,\n        width: titleWidth,\n    } = useResizeDetector<HTMLDivElement>({\n        onResize: () => handleShowTooltipResize(titleRef),\n    });\n\n    const { ref: ellipsisTitleRef, height: ellipsisTitleHeight } =\n        useResizeDetector<HTMLDivElement>({\n            onResize: () => handleShowTooltipResize(ellipsisTitleRef),\n        });\n\n    const { ref: subTitleRef, height: subTitleHeight } = useResizeDetector();\n\n    const { ref: listItemRef } = useResizeDetector({\n        onResize: () => {\n            setOpenTitleWidth(titleWidth ?? 0);\n\n            let closedHeight = (ellipsisTitleHeight ?? 0) + 24;\n            let openHeight = (titleHeight ?? 0) + 24;\n\n            if (shouldShowSubtitleRow) {\n                if (subTitleHeight) {\n                    closedHeight += (ellipsisTitleHeight ?? 0) + 4;\n                    openHeight += subTitleHeight + 4;\n                }\n            }\n\n            setHeadHeight({ closed: closedHeight, open: openHeight });\n        },\n        refreshMode: 'debounce',\n        refreshRate: 100,\n    });\n\n    const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\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 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 shouldPreventRightElementClick = useMemo(() => {\n        if (!rightElements) return false;\n\n        if (\n            typeof rightElements === 'object' &&\n            ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n        ) {\n            if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n                return true;\n            }\n\n            if (rightElements.center && getElementClickEvent(rightElements.center)) {\n                return true;\n            }\n\n            if (rightElements.top && getElementClickEvent(rightElements.top)) {\n                return true;\n            }\n        } else {\n            return getElementClickEvent(rightElements as ReactNode);\n        }\n\n        return false;\n    }, [rightElements]);\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                    cornerImage={cornerImage}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        cornerImage,\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                ref={listItemRef}\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        {isOpen ? (\n                            <StyledListItemHeadTitleText\n                                ref={titleRef}\n                                $width={openTitleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.4 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        ) : (\n                            <StyledListItemHeadTitleText\n                                $isEllipsis\n                                ref={ellipsisTitleRef}\n                                $width={openTitleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.3 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        )}\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle ref={subTitleRef}>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && (\n                <ListItemRightElements\n                    rightElements={rightElements}\n                    shouldPreventRightElementClick={shouldPreventRightElementClick}\n                />\n            )}\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":[]}
+{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_accordion","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","_reactResizeDetector","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","useState","setIsFirstRender","longPressTimeoutRef","useRef","shouldShowSubtitleRow","ref","subTitleRef","height","subTitleHeight","useResizeDetector","shouldShowMultilineTitle","useMemo","handleShowTooltipResize","useCallback","data","_data$entry","el","entry","target","scrollWidth","clientWidth","titleRef","titleHeight","width","titleWidth","onResize","ellipsisTitleRef","ellipsisTitleHeight","ellipsisTitleWidth","useEffect","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","getElementClickEvent","center","top","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","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleText","key","$width","$shouldShowMultilineTitle","exit","$isEllipsis","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","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 { getElementClickEvent } from '../../../../utils/accordion';\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    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\nimport { ResizePayload, useResizeDetector } from 'react-resize-detector';\nimport { OnRefChangeType } from 'react-resize-detector/build/types';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\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    setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    cornerImage,\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    setShouldEnableTooltip,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    const { ref: subTitleRef, height: subTitleHeight = 0 } = useResizeDetector();\n\n    const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n    const handleShowTooltipResize = useCallback(\n        (data: ResizePayload) => {\n            const el = data.entry?.target;\n            if (!el) return;\n            setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n        },\n        [setShouldEnableTooltip],\n    );\n\n    const {\n        ref: titleRef,\n        height: titleHeight = 0,\n        width: titleWidth = 0,\n    } = useResizeDetector<HTMLDivElement>({\n        onResize: handleShowTooltipResize,\n    });\n\n    const {\n        ref: ellipsisTitleRef,\n        height: ellipsisTitleHeight = 0,\n        width: ellipsisTitleWidth = 0,\n    } = useResizeDetector<HTMLDivElement>({\n        onResize: handleShowTooltipResize,\n    });\n\n    const height = useMemo(\n        () =>\n            (isOpen ? titleHeight : ellipsisTitleHeight) +\n            (shouldShowSubtitleRow ? subTitleHeight + 4 : 0),\n        [ellipsisTitleHeight, isOpen, shouldShowSubtitleRow, subTitleHeight, titleHeight],\n    );\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 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 shouldPreventRightElementClick = useMemo(() => {\n        if (!rightElements) return false;\n\n        if (\n            typeof rightElements === 'object' &&\n            ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n        ) {\n            if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n                return true;\n            }\n\n            if (rightElements.center && getElementClickEvent(rightElements.center)) {\n                return true;\n            }\n\n            if (rightElements.top && getElementClickEvent(rightElements.top)) {\n                return true;\n            }\n        } else {\n            return getElementClickEvent(rightElements as ReactNode);\n        }\n\n        return false;\n    }, [rightElements]);\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                    cornerImage={cornerImage}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        cornerImage,\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height,\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                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        {isOpen ? (\n                            <StyledListItemHeadTitleText\n                                key=\"title\"\n                                ref={titleRef}\n                                $width={titleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.4 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        ) : (\n                            <StyledListItemHeadTitleText\n                                key=\"ellipsisTitle\"\n                                $isEllipsis\n                                ref={ellipsisTitleRef}\n                                $width={ellipsisTitleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.3 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        )}\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle ref={subTitleRef}>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && (\n                <ListItemRightElements\n                    rightElements={rightElements}\n                    shouldPreventRightElementClick={shouldPreventRightElementClick}\n                />\n            )}\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

@@ -8,8 +8,8 @@ import ListItemBody from './list-item-body/ListItemBody';
 import ListItemHead from './list-item-head/ListItemHead';
 import { StyledListItemTooltip, StyledMotionListItem } from './ListItem.styles';
 import Tooltip from '../../tooltip/Tooltip';
-import { useResizeDetector } from 'react-resize-detector';
 const ListItem = ({
+  backgroundColor,
   careOfLocationId,
   children,
   cornerImage,
@@ -54,9 +54,7 @@ const ListItem = ({
   } = useContext(AccordionContext);
   const areaProvider = useContext(AreaContext);
   const isInitialRenderRef = useRef(true);
-  const {
-    ref: listItemRef
-  } = useResizeDetector();
+  const listItemRef = useRef(null);
   const uuid = useUuid();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
@@ -145,6 +143,7 @@ const ListItem = ({
     key: `list-item-${uuid}`,
     ref: listItemRef,
     layout: shouldPreventLayoutAnimation ? undefined : 'position',
+    $backgroundColor: backgroundColor,
     $isClickable: isClickable,
     $isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !shouldDisablePadding,
     $isOpen: isItemOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","ListItemBody","ListItemHead","StyledListItemTooltip","StyledMotionListItem","Tooltip","useResizeDetector","ListItem","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","ref","listItemRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","shouldDisablePadding","shouldDisableListItemPadding","current","handleHeadClick","event","shouldOnlyOpen","isClickable","headContent","createElement","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","style","cursor","id","shouldHideBody","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    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItemTooltip, StyledMotionListItem } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useResizeDetector } from 'react-resize-detector';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * DEPRECATED: Use `cornerImage` instead.\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     * The image that is displayed in the bottom right corner of the grouped image of list item.\n     */\n    cornerImage?: string;\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 line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n     */\n    shouldForceBottomLine?: 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     * This will render the ListItem closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should always be 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     * Whether a Tooltip should be displayed on hover, if the title is cut.\n     */\n    shouldShowTooltipOnTitleOverflow?: 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    cornerImage,\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    shouldShowTooltipOnTitleOverflow = false,\n    shouldForceBackground = false,\n    shouldForceBottomLine = false,\n    shouldForceHover = false,\n    shouldHideBottomLine = false,\n    shouldOpenImageOnClick = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldPreventLayoutAnimation = false,\n    shouldRenderClosed = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = 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 areaProvider = useContext(AreaContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const { ref: listItemRef } = useResizeDetector();\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    const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n\n    const shouldDisablePadding = useMemo(\n        () => areaProvider.shouldDisableListItemPadding ?? false,\n        [areaProvider.shouldDisableListItemPadding],\n    );\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    const headContent = useMemo(\n        () => (\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                cornerImage={cornerImage}\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                setShouldEnableTooltip={setShouldEnableTooltip}\n            />\n        ),\n        [\n            careOfLocationId,\n            cornerImage,\n            handleHeadClick,\n            hoverItem,\n            icons,\n            imageBackground,\n            images,\n            isAnyItemExpandable,\n            isClickable,\n            isExpandable,\n            isItemOpen,\n            isTitleGreyed,\n            leftElements,\n            onLongPress,\n            rightElements,\n            shouldForceHover,\n            shouldHideImageOrIconBackground,\n            shouldHideIndicator,\n            shouldOpenImageOnClick,\n            shouldShowRoundImageOrIcon,\n            subtitle,\n            title,\n            titleElement,\n        ],\n    );\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            ref={listItemRef}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean' && !shouldDisablePadding}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldForceBottomLine={shouldForceBottomLine}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <Tooltip\n                shouldUseFullWidth\n                isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n                item={\n                    <StyledListItemTooltip\n                        style={{ cursor: 'default' }}\n                        key={`list-item-tooltip-${uuid}`}\n                    >\n                        {title}\n                    </StyledListItemTooltip>\n                }\n            >\n                {headContent}\n            </Tooltip>\n            <AnimatePresence initial={false}>\n                {isExpandable && (isItemOpen || shouldRenderClosed) && (\n                    <ListItemBody\n                        id={uuid}\n                        key={`listItemBody-${uuid}`}\n                        shouldHideBody={shouldRenderClosed && !isItemOpen}\n                    >\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","useMemo","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","ListItemBody","ListItemHead","StyledListItemTooltip","StyledMotionListItem","Tooltip","ListItem","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","shouldDisablePadding","shouldDisableListItemPadding","current","handleHeadClick","event","shouldOnlyOpen","isClickable","headContent","createElement","animate","height","opacity","className","exit","initial","key","ref","layout","$backgroundColor","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","style","cursor","id","shouldHideBody","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    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItemTooltip, StyledMotionListItem } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The background color of the `ListItem`.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * DEPRECATED: Use `cornerImage` instead.\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     * The image that is displayed in the bottom right corner of the grouped image of list item.\n     */\n    cornerImage?: string;\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 line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n     */\n    shouldForceBottomLine?: 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     * This will render the ListItem closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should always be 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     * Whether a Tooltip should be displayed on hover, if the title is cut.\n     */\n    shouldShowTooltipOnTitleOverflow?: 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    backgroundColor,\n    careOfLocationId,\n    children,\n    cornerImage,\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    shouldShowTooltipOnTitleOverflow = false,\n    shouldForceBackground = false,\n    shouldForceBottomLine = false,\n    shouldForceHover = false,\n    shouldHideBottomLine = false,\n    shouldOpenImageOnClick = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldPreventLayoutAnimation = false,\n    shouldRenderClosed = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = 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 areaProvider = useContext(AreaContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const listItemRef = useRef<HTMLDivElement>(null);\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    const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n\n    const shouldDisablePadding = useMemo(\n        () => areaProvider.shouldDisableListItemPadding ?? false,\n        [areaProvider.shouldDisableListItemPadding],\n    );\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    const headContent = useMemo(\n        () => (\n            <ListItemHead\n                hoverItem={hoverItem}\n                careOfLocationId={careOfLocationId}\n                cornerImage={cornerImage}\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                setShouldEnableTooltip={setShouldEnableTooltip}\n            />\n        ),\n        [\n            careOfLocationId,\n            cornerImage,\n            handleHeadClick,\n            hoverItem,\n            icons,\n            imageBackground,\n            images,\n            isAnyItemExpandable,\n            isClickable,\n            isExpandable,\n            isItemOpen,\n            isTitleGreyed,\n            leftElements,\n            onLongPress,\n            rightElements,\n            shouldForceHover,\n            shouldHideImageOrIconBackground,\n            shouldHideIndicator,\n            shouldOpenImageOnClick,\n            shouldShowRoundImageOrIcon,\n            subtitle,\n            title,\n            titleElement,\n        ],\n    );\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            ref={listItemRef}\n            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $backgroundColor={backgroundColor}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean' && !shouldDisablePadding}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldForceBottomLine={shouldForceBottomLine}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <Tooltip\n                shouldUseFullWidth\n                isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n                item={\n                    <StyledListItemTooltip\n                        style={{ cursor: 'default' }}\n                        key={`list-item-tooltip-${uuid}`}\n                    >\n                        {title}\n                    </StyledListItemTooltip>\n                }\n            >\n                {headContent}\n            </Tooltip>\n            <AnimatePresence initial={false}>\n                {isExpandable && (isItemOpen || shouldRenderClosed) && (\n                    <ListItemBody\n                        id={uuid}\n                        key={`listItemBody-${uuid}`}\n                        shouldHideBody={shouldRenderClosed && !isItemOpen}\n                    >\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/esm/components/list/list-item/ListItem.styles.js

@@ -19,6 +19,15 @@ export const StyledMotionListItem = styled(motion.div)`
 }) => (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
             background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
         `}
+    
+    ${({
+  $backgroundColor,
+  $isInAccordion,
+  $isOpen,
+  $shouldForceBackground
+}) => $backgroundColor && (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
+            background-color: ${$backgroundColor} !important;
+        `}
 
     ${({
   $isClickable,

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","$isInAccordion","$shouldHideIndicator","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({ $isInAccordion, $isOpen, $shouldForceBackground, theme }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    ${({ $isClickable, $isInAccordion, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAe/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E;AACA;AACA;AACA,MAAM,CAAC;EAAEC,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACdH,GAAG;AACX,4BAA4BI,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EAAED,cAAc;EAAEE,OAAO;EAAEC,sBAAsB;EAAEC;AAAM,CAAC,KACzD,CAAE,CAACJ,cAAc,IAAIE,OAAO,IAAKC,sBAAsB,KACvDN,GAAG;AACX,qCAAqCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEN,cAAc;EAAEI;AAAM,CAAC,KACtCE,YAAY,IACZ,CAACN,cAAc,IACfH,GAAG;AACX;AACA,yCAAyCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCL,cAAc;EACdE,OAAO;EACPK,UAAU;EACVC,qBAAqB;EACrBC,sBAAsB;EACtBC,yBAAyB;EACzBN;AACiB,CAAC,KAAK;EACvB,IACIM,yBAAyB,IACxB,CAAC,CAACR,OAAO,IAAIK,UAAU,IAAIP,cAAc,KACtCI,KAAK,CAACO,cAAc,IACpB,CAACH,qBAAsB,EAC7B;IACE,IAAIC,sBAAsB,EAAE;MACxB,OAAOZ,GAAG;AAC1B,qCAAqCa,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BN,KAAK,CAAC,cAAc,CAAC;AACpD,iBAAiB;IACL;IAEA,OAAOP,GAAG;AACtB;AACA,qCAAqCa,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BN,KAAK,CAAC,cAAc,CAAC;AACpD;AACA,aAAa;EACL;EAEA,OAAOQ,SAAS;AACpB,CAAC;AACL;AACA,MAAM,CAAC;EAAEL;AAAW,CAAC,KACbA,UAAU,IACVV,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMgB,qBAAqB,GAAGjB,MAAM,CAACG,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","$isInAccordion","$shouldHideIndicator","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\n\ntype StyledListItemProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({ $isInAccordion, $isOpen, $shouldForceBackground, theme }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n    \n    ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n        $backgroundColor &&\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: ${$backgroundColor} !important;\n        `}\n\n    ${({ $isClickable, $isInAccordion, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 0.5);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAiB/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E;AACA;AACA;AACA,MAAM,CAAC;EAAEC,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACdH,GAAG;AACX,4BAA4BI,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EAAED,cAAc;EAAEE,OAAO;EAAEC,sBAAsB;EAAEC;AAAM,CAAC,KACzD,CAAE,CAACJ,cAAc,IAAIE,OAAO,IAAKC,sBAAsB,KACvDN,GAAG;AACX,qCAAqCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,gBAAgB;EAAEN,cAAc;EAAEE,OAAO;EAAEC;AAAuB,CAAC,KACpEG,gBAAgB,KACd,CAACN,cAAc,IAAIE,OAAO,IAAKC,sBAAsB,CAAC,IACxDN,GAAG;AACX,gCAAgCS,gBAAgB;AAChD,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEP,cAAc;EAAEI;AAAM,CAAC,KACtCG,YAAY,IACZ,CAACP,cAAc,IACfH,GAAG;AACX;AACA,yCAAyCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCL,cAAc;EACdE,OAAO;EACPM,UAAU;EACVC,qBAAqB;EACrBC,sBAAsB;EACtBC,yBAAyB;EACzBP;AACiB,CAAC,KAAK;EACvB,IACIO,yBAAyB,IACxB,CAAC,CAACT,OAAO,IAAIM,UAAU,IAAIR,cAAc,KACtCI,KAAK,CAACQ,cAAc,IACpB,CAACH,qBAAsB,EAC7B;IACE,IAAIC,sBAAsB,EAAE;MACxB,OAAOb,GAAG;AAC1B,qCAAqCc,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BP,KAAK,CAAC,cAAc,CAAC;AACpD,iBAAiB;IACL;IAEA,OAAOP,GAAG;AACtB;AACA,qCAAqCc,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BP,KAAK,CAAC,cAAc,CAAC;AACpD;AACA,aAAa;EACL;EAEA,OAAOS,SAAS;AACpB,CAAC;AACL;AACA,MAAM,CAAC;EAAEL;AAAW,CAAC,KACbA,UAAU,IACVX,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMiB,qBAAqB,GAAGlB,MAAM,CAACG,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}

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

@@ -32,59 +32,34 @@ const ListItemHead = ({
   setShouldEnableTooltip
 }) => {
   const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);
-  const [openTitleWidth, setOpenTitleWidth] = useState(0);
-  const [headHeight, setHeadHeight] = useState({
-    closed: 64,
-    open: 64
-  });
   const [, setIsFirstRender] = useState(false);
   const longPressTimeoutRef = useRef();
   const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
-  const handleShowTooltipResize = useCallback(ref => {
-    if (ref.current) {
-      const el = ref.current;
-      setShouldEnableTooltip(el.scrollWidth > el.clientWidth);
-    }
+  const {
+    ref: subTitleRef,
+    height: subTitleHeight = 0
+  } = useResizeDetector();
+  const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
+  const handleShowTooltipResize = useCallback(data => {
+    const el = data.entry?.target;
+    if (!el) return;
+    setShouldEnableTooltip(el.scrollWidth > el.clientWidth);
   }, [setShouldEnableTooltip]);
   const {
     ref: titleRef,
-    height: titleHeight,
-    width: titleWidth
+    height: titleHeight = 0,
+    width: titleWidth = 0
   } = useResizeDetector({
-    onResize: () => handleShowTooltipResize(titleRef)
+    onResize: handleShowTooltipResize
   });
   const {
     ref: ellipsisTitleRef,
-    height: ellipsisTitleHeight
-  } = useResizeDetector({
-    onResize: () => handleShowTooltipResize(ellipsisTitleRef)
-  });
-  const {
-    ref: subTitleRef,
-    height: subTitleHeight
-  } = useResizeDetector();
-  const {
-    ref: listItemRef
+    height: ellipsisTitleHeight = 0,
+    width: ellipsisTitleWidth = 0
   } = useResizeDetector({
-    onResize: () => {
-      setOpenTitleWidth(titleWidth ?? 0);
-      let closedHeight = (ellipsisTitleHeight ?? 0) + 24;
-      let openHeight = (titleHeight ?? 0) + 24;
-      if (shouldShowSubtitleRow) {
-        if (subTitleHeight) {
-          closedHeight += (ellipsisTitleHeight ?? 0) + 4;
-          openHeight += subTitleHeight + 4;
-        }
-      }
-      setHeadHeight({
-        closed: closedHeight,
-        open: openHeight
-      });
-    },
-    refreshMode: 'debounce',
-    refreshRate: 100
+    onResize: handleShowTooltipResize
   });
-  const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
+  const height = useMemo(() => (isOpen ? titleHeight : ellipsisTitleHeight) + (shouldShowSubtitleRow ? subTitleHeight + 4 : 0), [ellipsisTitleHeight, isOpen, shouldShowSubtitleRow, subTitleHeight, titleHeight]);
 
   // This is used to trigger a rerender, so the head height can be calculated
   useEffect(() => {
@@ -142,7 +117,7 @@ const ListItemHead = ({
   }, [careOfLocationId, cornerImage, icons, imageBackground, images, shouldHideImageOrIconBackground, shouldOpenImageOnClick, shouldShowRoundImageOrIcon]);
   return /*#__PURE__*/React.createElement(StyledListItemHead, {
     animate: {
-      height: isOpen ? headHeight.open : headHeight.closed,
+      height,
       opacity: isTitleGreyed ? 0.5 : 1
     },
     initial: false,
@@ -169,12 +144,12 @@ const ListItemHead = ({
   }, isExpandable && !shouldHideIndicator && /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-chevron-right']
   })), leftElements, iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
-    ref: listItemRef,
     $isIconOrImageGiven: iconOrImageElement !== undefined,
     $isOpen: isOpen
   }, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleContent, null, isOpen ? /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
+    key: "title",
     ref: titleRef,
-    $width: openTitleWidth,
+    $width: titleWidth,
     $shouldShowMultilineTitle: shouldShowMultilineTitle,
     initial: {
       opacity: 0
@@ -189,9 +164,10 @@ const ListItemHead = ({
       duration: 0.4
     }
   }, title) : /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
+    key: "ellipsisTitle",
     $isEllipsis: true,
     ref: ellipsisTitleRef,
-    $width: openTitleWidth,
+    $width: ellipsisTitleWidth,
     $shouldShowMultilineTitle: shouldShowMultilineTitle,
     initial: {
       opacity: 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","getElementClickEvent","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","useResizeDetector","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","openTitleWidth","setOpenTitleWidth","headHeight","setHeadHeight","closed","open","setIsFirstRender","longPressTimeoutRef","shouldShowSubtitleRow","handleShowTooltipResize","ref","current","el","scrollWidth","clientWidth","titleRef","height","titleHeight","width","titleWidth","onResize","ellipsisTitleRef","ellipsisTitleHeight","subTitleRef","subTitleHeight","listItemRef","closedHeight","openHeight","refreshMode","refreshRate","shouldShowMultilineTitle","handleMouseEnter","handleMouseLeave","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","$width","$shouldShowMultilineTitle","exit","$isEllipsis","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 { getElementClickEvent } from '../../../../utils/accordion';\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    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { OnRefChangeType } from 'react-resize-detector/build/types';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\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    setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    cornerImage,\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    setShouldEnableTooltip,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [openTitleWidth, setOpenTitleWidth] = useState(0);\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({ closed: 64, open: 64 });\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    const handleShowTooltipResize = useCallback(\n        (ref: OnRefChangeType<HTMLDivElement>) => {\n            if (ref.current) {\n                const el = ref.current;\n                setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n            }\n        },\n        [setShouldEnableTooltip],\n    );\n\n    const {\n        ref: titleRef,\n        height: titleHeight,\n        width: titleWidth,\n    } = useResizeDetector<HTMLDivElement>({\n        onResize: () => handleShowTooltipResize(titleRef),\n    });\n\n    const { ref: ellipsisTitleRef, height: ellipsisTitleHeight } =\n        useResizeDetector<HTMLDivElement>({\n            onResize: () => handleShowTooltipResize(ellipsisTitleRef),\n        });\n\n    const { ref: subTitleRef, height: subTitleHeight } = useResizeDetector();\n\n    const { ref: listItemRef } = useResizeDetector({\n        onResize: () => {\n            setOpenTitleWidth(titleWidth ?? 0);\n\n            let closedHeight = (ellipsisTitleHeight ?? 0) + 24;\n            let openHeight = (titleHeight ?? 0) + 24;\n\n            if (shouldShowSubtitleRow) {\n                if (subTitleHeight) {\n                    closedHeight += (ellipsisTitleHeight ?? 0) + 4;\n                    openHeight += subTitleHeight + 4;\n                }\n            }\n\n            setHeadHeight({ closed: closedHeight, open: openHeight });\n        },\n        refreshMode: 'debounce',\n        refreshRate: 100,\n    });\n\n    const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\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 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 shouldPreventRightElementClick = useMemo(() => {\n        if (!rightElements) return false;\n\n        if (\n            typeof rightElements === 'object' &&\n            ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n        ) {\n            if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n                return true;\n            }\n\n            if (rightElements.center && getElementClickEvent(rightElements.center)) {\n                return true;\n            }\n\n            if (rightElements.top && getElementClickEvent(rightElements.top)) {\n                return true;\n            }\n        } else {\n            return getElementClickEvent(rightElements as ReactNode);\n        }\n\n        return false;\n    }, [rightElements]);\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                    cornerImage={cornerImage}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        cornerImage,\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                ref={listItemRef}\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        {isOpen ? (\n                            <StyledListItemHeadTitleText\n                                ref={titleRef}\n                                $width={openTitleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.4 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        ) : (\n                            <StyledListItemHeadTitleText\n                                $isEllipsis\n                                ref={ellipsisTitleRef}\n                                $width={openTitleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.3 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        )}\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle ref={subTitleRef}>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && (\n                <ListItemRightElements\n                    rightElements={rightElements}\n                    shouldPreventRightElementClick={shouldPreventRightElementClick}\n                />\n            )}\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":[]}
+{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getElementClickEvent","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","useResizeDetector","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","setIsFirstRender","longPressTimeoutRef","shouldShowSubtitleRow","ref","subTitleRef","height","subTitleHeight","shouldShowMultilineTitle","handleShowTooltipResize","data","el","entry","target","scrollWidth","clientWidth","titleRef","titleHeight","width","titleWidth","onResize","ellipsisTitleRef","ellipsisTitleHeight","ellipsisTitleWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","key","$width","$shouldShowMultilineTitle","exit","$isEllipsis","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 { getElementClickEvent } from '../../../../utils/accordion';\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    StyledListItemHeadTitle,\n    StyledListItemHeadTitleContent,\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadHoverItemWrapper,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\nimport { ResizePayload, useResizeDetector } from 'react-resize-detector';\nimport { OnRefChangeType } from 'react-resize-detector/build/types';\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\ntype ListItemHeadProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\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    setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    careOfLocationId,\n    cornerImage,\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    setShouldEnableTooltip,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n    const [, setIsFirstRender] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n    const { ref: subTitleRef, height: subTitleHeight = 0 } = useResizeDetector();\n\n    const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n    const handleShowTooltipResize = useCallback(\n        (data: ResizePayload) => {\n            const el = data.entry?.target;\n            if (!el) return;\n            setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n        },\n        [setShouldEnableTooltip],\n    );\n\n    const {\n        ref: titleRef,\n        height: titleHeight = 0,\n        width: titleWidth = 0,\n    } = useResizeDetector<HTMLDivElement>({\n        onResize: handleShowTooltipResize,\n    });\n\n    const {\n        ref: ellipsisTitleRef,\n        height: ellipsisTitleHeight = 0,\n        width: ellipsisTitleWidth = 0,\n    } = useResizeDetector<HTMLDivElement>({\n        onResize: handleShowTooltipResize,\n    });\n\n    const height = useMemo(\n        () =>\n            (isOpen ? titleHeight : ellipsisTitleHeight) +\n            (shouldShowSubtitleRow ? subTitleHeight + 4 : 0),\n        [ellipsisTitleHeight, isOpen, shouldShowSubtitleRow, subTitleHeight, titleHeight],\n    );\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 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 shouldPreventRightElementClick = useMemo(() => {\n        if (!rightElements) return false;\n\n        if (\n            typeof rightElements === 'object' &&\n            ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n        ) {\n            if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n                return true;\n            }\n\n            if (rightElements.center && getElementClickEvent(rightElements.center)) {\n                return true;\n            }\n\n            if (rightElements.top && getElementClickEvent(rightElements.top)) {\n                return true;\n            }\n        } else {\n            return getElementClickEvent(rightElements as ReactNode);\n        }\n\n        return false;\n    }, [rightElements]);\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                    cornerImage={cornerImage}\n                    images={images}\n                    shouldOpenImageOnClick={shouldOpenImageOnClick}\n                    shouldHideBackground={!!shouldHideImageOrIconBackground}\n                    shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n                />\n            );\n        }\n\n        return undefined;\n    }, [\n        careOfLocationId,\n        cornerImage,\n        icons,\n        imageBackground,\n        images,\n        shouldHideImageOrIconBackground,\n        shouldOpenImageOnClick,\n        shouldShowRoundImageOrIcon,\n    ]);\n\n    return (\n        <StyledListItemHead\n            animate={{\n                height,\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                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleContent>\n                        {isOpen ? (\n                            <StyledListItemHeadTitleText\n                                key=\"title\"\n                                ref={titleRef}\n                                $width={titleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.4 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        ) : (\n                            <StyledListItemHeadTitleText\n                                key=\"ellipsisTitle\"\n                                $isEllipsis\n                                ref={ellipsisTitleRef}\n                                $width={ellipsisTitleWidth}\n                                $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{ duration: 0.3 }}\n                            >\n                                {title}\n                            </StyledListItemHeadTitleText>\n                        )}\n                        <StyledListItemHeadTitleElement>\n                            {titleElement}\n                        </StyledListItemHeadTitleElement>\n                    </StyledListItemHeadTitleContent>\n                </StyledListItemHeadTitle>\n                {shouldShowSubtitleRow && (\n                    <StyledListItemHeadSubtitle ref={subTitleRef}>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements && (\n                <ListItemRightElements\n                    rightElements={rightElements}\n                    shouldPreventRightElementClick={shouldPreventRightElementClick}\n                />\n            )}\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/types/components/list/list-item/ListItem.d.ts

@@ -2,6 +2,10 @@ import { CSSProperties, FC, MouseEventHandler, ReactNode, TouchEventHandler } fr
 import type { IListItemRightElements } from '../../../types/list';
 export type ListItemElements = [ReactNode, ...ReactNode[]];
 export type ListItemProps = {
+    /**
+     * The background color of the `ListItem`.
+     */
+    backgroundColor?: CSSProperties['backgroundColor'];
     /**
      * DEPRECATED: Use `cornerImage` instead.
      */

package/lib/types/components/list/list-item/ListItem.styles.d.ts

@@ -1,5 +1,7 @@
 import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+import { CSSProperties } from 'react';
 type StyledListItemProps = WithTheme<{
+    $backgroundColor?: CSSProperties['backgroundColor'];
     $isClickable: boolean;
     $isInAccordion: boolean;
     $isOpen: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1170",
+    "version": "5.0.0-beta.1172",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e0f2b7c00356b8d25b46e6d04c5c7cf8d09427c5"
+    "gitHead": "4abcf4f5b772650aa118f15d7f28a2abe7a84f25"
 }