@chayns-components/core 5.0.0-beta.28 → 5.0.0-beta.30

package/lib/components/context-menu/ContextMenu.js

@@ -155,7 +155,7 @@ var ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }
       }
     }, _callee);
-  })), []);
+  })), [items]);
   var handleClick = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();

package/lib/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"names":["ContextMenu","ref","alignment","children","container","document","body","coordinates","items","onHide","onShow","x","y","internalCoordinates","setInternalCoordinates","ContextMenuAlignment","TopLeft","internalAlignment","setInternalAlignment","isContentShown","setIsContentShown","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","chayns","env","isMobile","isTablet","dialog","select","buttons","list","map","index","icons","text","name","value","icon","type","buttonType","selection","onClick","current","rootElement","querySelector","getBoundingClientRect","childrenHeight","height","childrenWidth","width","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","portal","displayName"],"mappings":"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","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport Icon from '../icon/Icon';\nimport { ContextMenuAlignment } from './constants/alignment';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => void;\n    text: string;\n};\n\ntype ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n        },\n        ref\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const { isMobile, isTablet } = chayns.env;\n\n            if (isMobile || isTablet) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, []);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow]\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                handleHide();\n            },\n            [handleHide]\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow]\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        const portal = useMemo(\n            () =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container\n                ),\n            [\n                container,\n                coordinates,\n                internalCoordinates,\n                internalAlignment,\n                isContentShown,\n                items,\n                alignment,\n                uuid,\n            ]\n        );\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    }\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"file":"ContextMenu.js"}
+{"version":3,"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"names":["ContextMenu","ref","alignment","children","container","document","body","coordinates","items","onHide","onShow","x","y","internalCoordinates","setInternalCoordinates","ContextMenuAlignment","TopLeft","internalAlignment","setInternalAlignment","isContentShown","setIsContentShown","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","chayns","env","isMobile","isTablet","dialog","select","buttons","list","map","index","icons","text","name","value","icon","type","buttonType","selection","onClick","current","rootElement","querySelector","getBoundingClientRect","childrenHeight","height","childrenWidth","width","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","portal","displayName"],"mappings":"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","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport Icon from '../icon/Icon';\nimport { ContextMenuAlignment } from './constants/alignment';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => void;\n    text: string;\n};\n\ntype ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n        },\n        ref\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const { isMobile, isTablet } = chayns.env;\n\n            if (isMobile || isTablet) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow]\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                handleHide();\n            },\n            [handleHide]\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow]\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        const portal = useMemo(\n            () =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container\n                ),\n            [\n                container,\n                coordinates,\n                internalCoordinates,\n                internalAlignment,\n                isContentShown,\n                items,\n                alignment,\n                uuid,\n            ]\n        );\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    }\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"file":"ContextMenu.js"}

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

@@ -26,6 +26,10 @@ declare type ListItemProps = {
      * This can be used to automatically expand the `ListItem` during the first render.
      */
     isDefaultOpen?: boolean;
+    /**
+     * This overrides the internal opening state of the item and makes it controlled.
+     */
+    isOpen?: boolean;
     /**
      * Function to be executed when the header of the `ListItem` was clicked
      */
@@ -35,6 +39,11 @@ declare type ListItemProps = {
      * 400 milliseconds.
      */
     onLongPress?: TouchEventHandler<HTMLDivElement>;
+    /**
+     * Elements that are displayed on the left side of the header. If multiple
+     * elements are specified, they are displayed one aside the other.
+     */
+    leftElements?: [ReactNode, ...ReactNode[]];
     /**
      * Elements that are displayed on the right side of the header. If multiple
      * elements are specified, they are displayed one below the other.

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

@@ -33,8 +33,10 @@ var ListItem = function ListItem(_ref) {
       icons = _ref.icons,
       images = _ref.images,
       isDefaultOpen = _ref.isDefaultOpen,
+      isOpen = _ref.isOpen,
       onClick = _ref.onClick,
       onLongPress = _ref.onLongPress,
+      leftElements = _ref.leftElements,
       rightElements = _ref.rightElements,
       subtitle = _ref.subtitle,
       shouldShowRoundImage = _ref.shouldShowRoundImage,
@@ -48,7 +50,7 @@ var ListItem = function ListItem(_ref) {
 
   var uuid = (0, _uuid.useUuid)();
   var isExpandable = children !== undefined;
-  var isOpen = openItemUuid === uuid;
+  var isItemOpen = isOpen !== null && isOpen !== void 0 ? isOpen : openItemUuid === uuid;
   var handleHeadClick = (0, _react.useCallback)(function (event) {
     if (isExpandable) {
       updateOpenItemUuid(uuid);
@@ -77,23 +79,24 @@ var ListItem = function ListItem(_ref) {
   return /*#__PURE__*/_react.default.createElement(_ListItem.StyledListItem, {
     className: "beta-chayns-list-item",
     isClickable: typeof onClick === 'function' || isExpandable,
-    isOpen: isOpen
+    isOpen: isItemOpen
   }, /*#__PURE__*/_react.default.createElement(_ListItemHead.default, {
     hoverItem: hoverItem,
     icons: icons,
     images: images,
     isAnyItemExpandable: isAnyItemExpandable,
     isExpandable: isExpandable,
-    isOpen: isOpen,
+    isOpen: isItemOpen,
     onClick: handleHeadClick,
     onLongPress: onLongPress,
+    leftElements: leftElements,
     rightElements: rightElements,
     subtitle: subtitle,
     shouldShowRoundImage: shouldShowRoundImage,
     title: title
   }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
-  }, isExpandable && isOpen && /*#__PURE__*/_react.default.createElement(_ListItemBody.default, null, children)));
+  }, isExpandable && isItemOpen && /*#__PURE__*/_react.default.createElement(_ListItemBody.default, null, children)));
 };
 
 ListItem.displayName = 'ListItem';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/list/list-item/ListItem.tsx"],"names":["ListItem","children","hoverItem","icons","images","isDefaultOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","ListContext","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isOpen","handleHeadClick","event","shouldOnlyOpen","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AA0DA,IAAMA,QAA2B,GAAG,SAA9BA,QAA8B,OAY9B;AAAA,MAXFC,QAWE,QAXFA,QAWE;AAAA,MAVFC,SAUE,QAVFA,SAUE;AAAA,MATFC,KASE,QATFA,KASE;AAAA,MARFC,MAQE,QARFA,MAQE;AAAA,MAPFC,aAOE,QAPFA,aAOE;AAAA,MANFC,OAME,QANFA,OAME;AAAA,MALFC,WAKE,QALFA,WAKE;AAAA,MAJFC,aAIE,QAJFA,aAIE;AAAA,MAHFC,QAGE,QAHFA,QAGE;AAAA,MAFFC,oBAEE,QAFFA,oBAEE;AAAA,MADFC,KACE,QADFA,KACE;;AACF,oBACI,uBAAWC,iBAAX,CADJ;AAAA,MAAQC,4BAAR,eAAQA,4BAAR;AAAA,MAAsCC,mBAAtC,eAAsCA,mBAAtC;AAAA,MAA2DC,YAA3D,eAA2DA,YAA3D;AAAA,MAAyEC,kBAAzE,eAAyEA,kBAAzE;;AAGA,MAAMC,IAAI,GAAG,oBAAb;AAEA,MAAMC,YAAY,GAAGjB,QAAQ,KAAKkB,SAAlC;AACA,MAAMC,MAAM,GAAGL,YAAY,KAAKE,IAAhC;AAEA,MAAMI,eAAe,GAAG,wBACpB,UAACC,KAAD,EAAW;AACP,QAAIJ,YAAJ,EAAkB;AACdF,MAAAA,kBAAkB,CAACC,IAAD,CAAlB;AACH;;AAED,QAAI,OAAOX,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACgB,KAAD,CAAP;AACH;AACJ,GATmB,EAUpB,CAACJ,YAAD,EAAeZ,OAAf,EAAwBU,kBAAxB,EAA4CC,IAA5C,CAVoB,CAAxB;AAaA,wBAAU,YAAM;AACZ,QAAIC,YAAJ,EAAkB;AACd;AACA;AACA,aAAOL,4BAA4B,EAAnC;AACH;;AAED,WAAOM,SAAP;AACH,GARD,EAQG,CAACN,4BAAD,EAA+BK,YAA/B,CARH;AAUA,wBAAU,YAAM;AACZ,QAAIb,aAAJ,EAAmB;AACfW,MAAAA,kBAAkB,CAACC,IAAD,EAAO;AAAEM,QAAAA,cAAc,EAAE;AAAlB,OAAP,CAAlB;AACH;AACJ,GAJD,EAIG,CAAClB,aAAD,EAAgBW,kBAAhB,EAAoCC,IAApC,CAJH;AAMA,sBACI,6BAAC,wBAAD;AACI,IAAA,SAAS,EAAC,uBADd;AAEI,IAAA,WAAW,EAAE,OAAOX,OAAP,KAAmB,UAAnB,IAAiCY,YAFlD;AAGI,IAAA,MAAM,EAAEE;AAHZ,kBAKI,6BAAC,qBAAD;AACI,IAAA,SAAS,EAAElB,SADf;AAEI,IAAA,KAAK,EAAEC,KAFX;AAGI,IAAA,MAAM,EAAEC,MAHZ;AAII,IAAA,mBAAmB,EAAEU,mBAJzB;AAKI,IAAA,YAAY,EAAEI,YALlB;AAMI,IAAA,MAAM,EAAEE,MANZ;AAOI,IAAA,OAAO,EAAEC,eAPb;AAQI,IAAA,WAAW,EAAEd,WARjB;AASI,IAAA,aAAa,EAAEC,aATnB;AAUI,IAAA,QAAQ,EAAEC,QAVd;AAWI,IAAA,oBAAoB,EAAEC,oBAX1B;AAYI,IAAA,KAAK,EAAEC;AAZX,IALJ,eAmBI,6BAAC,6BAAD;AAAiB,IAAA,OAAO,EAAE;AAA1B,KACKO,YAAY,IAAIE,MAAhB,iBAA0B,6BAAC,qBAAD,QAAenB,QAAf,CAD/B,CAnBJ,CADJ;AAyBH,CA3ED;;AA6EAD,QAAQ,CAACwB,WAAT,GAAuB,UAAvB;eAEexB,Q","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem } from './ListItem.styles';\n\ntype ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * 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     * 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 header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\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?: [ReactNode, ...ReactNode[]];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: 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\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const { incrementExpandableItemCount, isAnyItemExpandable, openItemUuid, updateOpenItemUuid } =\n        useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isOpen = openItemUuid === uuid;\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) {\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]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    return (\n        <StyledListItem\n            className=\"beta-chayns-list-item\"\n            isClickable={typeof onClick === 'function' || isExpandable}\n            isOpen={isOpen}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isOpen}\n                onClick={handleHeadClick}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                title={title}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isOpen && <ListItemBody>{children}</ListItemBody>}\n            </AnimatePresence>\n        </StyledListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"ListItem.js"}
+{"version":3,"sources":["../../../../src/components/list/list-item/ListItem.tsx"],"names":["ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","subtitle","shouldShowRoundImage","title","ListContext","incrementExpandableItemCount","isAnyItemExpandable","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","displayName"],"mappings":"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","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem } from './ListItem.styles';\n\ntype ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * 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     * 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 header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\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?: [ReactNode, ...ReactNode[]];\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?: [ReactNode, ...ReactNode[]];\n    /**\n     * Images of users should always be displayed in a round shape. Therefore\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: 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\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const { incrementExpandableItemCount, isAnyItemExpandable, openItemUuid, updateOpenItemUuid } =\n        useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\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) {\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]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    return (\n        <StyledListItem\n            className=\"beta-chayns-list-item\"\n            isClickable={typeof onClick === 'function' || isExpandable}\n            isOpen={isItemOpen}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                onClick={handleHeadClick}\n                onLongPress={onLongPress}\n                leftElements={leftElements}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                title={title}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && <ListItemBody>{children}</ListItemBody>}\n            </AnimatePresence>\n        </StyledListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"ListItem.js"}

package/lib/components/list/list-item/list-item-head/ListItemHead.d.ts

@@ -10,6 +10,7 @@ declare type ListItemHeadProps = {
     onLongPress?: TouchEventHandler<HTMLDivElement>;
     rightElements?: [ReactNode, ...ReactNode[]];
     subtitle?: ReactNode;
+    leftElements?: ReactNode;
     shouldShowRoundImage?: boolean;
     title: ReactNode;
 };

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

@@ -9,10 +9,12 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _GridImage = _interopRequireDefault(require("../../../grid-image/GridImage"));
-
 var _Icon = _interopRequireDefault(require("../../../icon/Icon"));
 
+var _ListItemIcon = _interopRequireDefault(require("./list-item-icon/ListItemIcon"));
+
+var _ListItemImage = _interopRequireDefault(require("./list-item-image/ListItemImage"));
+
 var _ListItemHead = require("./ListItemHead.styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,22 +47,15 @@ var ListItemHead = function ListItemHead(_ref) {
       rightElements = _ref.rightElements,
       subtitle = _ref.subtitle,
       shouldShowRoundImage = _ref.shouldShowRoundImage,
-      title = _ref.title;
+      title = _ref.title,
+      leftElements = _ref.leftElements;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      hasLoadedImage = _useState2[0],
-      setHasLoadedImage = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      shouldShowHoverItem = _useState4[0],
-      setShouldShowHoverItem = _useState4[1];
+      shouldShowHoverItem = _useState2[0],
+      setShouldShowHoverItem = _useState2[1];
 
   var longPressTimeoutRef = (0, _react.useRef)();
-  var handleImageLoaded = (0, _react.useCallback)(function () {
-    setHasLoadedImage(true);
-  }, []);
   var handleMouseEnter = (0, _react.useCallback)(function () {
     return setShouldShowHoverItem(true);
   }, []);
@@ -79,33 +74,20 @@ var ListItemHead = function ListItemHead(_ref) {
   }, []);
   var iconOrImageElement = (0, _react.useMemo)(function () {
     if (icons) {
-      return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        icons: icons,
-        size: 22
-      }));
-    }
-
-    if (images && images[0] && images[1] && images[2]) {
-      var gridImages = [images[0], images[1], images[2]];
-      return /*#__PURE__*/_react.default.createElement(_GridImage.default, {
-        images: gridImages,
-        shouldShowRoundImage: shouldShowRoundImage,
-        size: 40
+      return /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
+        icons: icons
       });
     }
 
-    if (images && images[0]) {
-      return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadImageWrapper, {
-        shouldShowRoundImage: shouldShowRoundImage
-      }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadImage, {
-        isHidden: !hasLoadedImage,
-        onLoad: handleImageLoaded,
-        src: images[0]
-      }));
+    if (images) {
+      return /*#__PURE__*/_react.default.createElement(_ListItemImage.default, {
+        images: images,
+        shouldShowRoundImage: !!shouldShowRoundImage
+      });
     }
 
     return undefined;
-  }, [handleImageLoaded, hasLoadedImage, icons, images, shouldShowRoundImage]);
+  }, [icons, images, shouldShowRoundImage]);
   return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHead, {
     className: "beta-chayns-list-item-head",
     isClickable: typeof onClick === 'function' || isExpandable,
@@ -124,7 +106,7 @@ var ListItemHead = function ListItemHead(_ref) {
     }
   }, isExpandable && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-chevron-right']
-  })), iconOrImageElement, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadContent, {
+  })), leftElements, iconOrImageElement, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadContent, {
     isIconOrImageGiven: iconOrImageElement !== undefined,
     isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"names":["ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","hasLoadedImage","setHasLoadedImage","shouldShowHoverItem","setShouldShowHoverItem","longPressTimeoutRef","handleImageLoaded","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","gridImages","undefined","rotate","type","length","marginLeft","opacity","width","duration","displayName"],"mappings":"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","sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport GridImage from '../../../grid-image/GridImage';\nimport Icon from '../../../icon/Icon';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadIcon,\n    StyledListItemHeadImage,\n    StyledListItemHeadImageWrapper,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    title: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(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 iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <StyledListItemHeadIcon>\n                    <Icon icons={icons} size={22} />\n                </StyledListItemHeadIcon>\n            );\n        }\n\n        if (images && images[0] && images[1] && images[2]) {\n            const gridImages = [images[0], images[1], images[2]];\n\n            return (\n                <GridImage\n                    images={gridImages}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                    size={40}\n                />\n            );\n        }\n\n        if (images && images[0]) {\n            return (\n                <StyledListItemHeadImageWrapper shouldShowRoundImage={shouldShowRoundImage}>\n                    <StyledListItemHeadImage\n                        isHidden={!hasLoadedImage}\n                        onLoad={handleImageLoaded}\n                        src={images[0]}\n                    />\n                </StyledListItemHeadImageWrapper>\n            );\n        }\n\n        return undefined;\n    }, [handleImageLoaded, hasLoadedImage, icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            className=\"beta-chayns-list-item-head\"\n            isClickable={typeof onClick === 'function' || isExpandable}\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            {isAnyItemExpandable && (\n                <StyledMotionListItemHeadIndicator\n                    animate={{ rotate: isOpen ? 90 : 0 }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                >\n                    {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                </StyledMotionListItemHeadIndicator>\n            )}\n            {iconOrImageElement}\n            <StyledListItemHeadContent\n                isIconOrImageGiven={iconOrImageElement !== undefined}\n                isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleText className=\"ellipsis\">\n                        {title}\n                    </StyledListItemHeadTitleText>\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleText className=\"ellipsis\">\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"file":"ListItemHead.js"}
+{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"names":["ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","leftElements","shouldShowHoverItem","setShouldShowHoverItem","longPressTimeoutRef","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","undefined","rotate","type","length","marginLeft","opacity","width","duration","displayName"],"mappings":"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","sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    leftElements?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    title: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n    leftElements,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\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 iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return <ListItemIcon icons={icons} />;\n        }\n\n        if (images) {\n            return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n        }\n\n        return undefined;\n    }, [icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            className=\"beta-chayns-list-item-head\"\n            isClickable={typeof onClick === 'function' || isExpandable}\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            {isAnyItemExpandable && (\n                <StyledMotionListItemHeadIndicator\n                    animate={{ rotate: isOpen ? 90 : 0 }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                >\n                    {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                </StyledMotionListItemHeadIndicator>\n            )}\n            {leftElements}\n            {iconOrImageElement}\n            <StyledListItemHeadContent\n                isIconOrImageGiven={iconOrImageElement !== undefined}\n                isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleText className=\"ellipsis\">\n                        {title}\n                    </StyledListItemHeadTitleText>\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleText className=\"ellipsis\">\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"file":"ListItemHead.js"}

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts

@@ -4,16 +4,6 @@ export declare const StyledListItemHead: import("styled-components").StyledCompo
     theme: import("../../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
 export declare const StyledMotionListItemHeadIndicator: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
-export declare const StyledListItemHeadIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledListItemHeadImageWrapper: import("styled-components").StyledComponent<"div", any, {
-    shouldShowRoundImage?: boolean | undefined;
-} & {
-    theme: import("../../../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;
-declare type StyledListItemHeadImageProps = {
-    isHidden: boolean;
-};
-export declare const StyledListItemHeadImage: import("styled-components").StyledComponent<"img", any, StyledListItemHeadImageProps, never>;
 declare type StyledListItemHeadContentProps = {
     isIconOrImageGiven: boolean;
     isOpen: boolean;

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

@@ -5,13 +5,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTopRightElement = exports.StyledListItemHeadTitleText = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadRightElement = exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = exports.StyledListItemHeadIcon = exports.StyledListItemHeadContent = exports.StyledListItemHeadBottomRightElement = exports.StyledListItemHead = void 0;
+exports.StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTopRightElement = exports.StyledListItemHeadTitleText = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadRightElement = exports.StyledListItemHeadContent = exports.StyledListItemHeadBottomRightElement = exports.StyledListItemHead = void 0;
 
 var _framerMotion = require("framer-motion");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,73 +31,43 @@ exports.StyledListItemHead = StyledListItemHead;
 var StyledMotionListItemHeadIndicator = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n"])));
 exports.StyledMotionListItemHeadIndicator = StyledMotionListItemHeadIndicator;
 
-var StyledListItemHeadIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: rgba(", ", 0.1);\n    box-shadow: 0 0 0 1px\n        rgba(", ", 0.08) inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n"])), function (_ref3) {
-  var theme = _ref3.theme;
-  return theme['text-rgb'];
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme['009-rgb'];
-});
-
-exports.StyledListItemHeadIcon = StyledListItemHeadIcon;
-
-var StyledListItemHeadImageWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: rgba(\n        ", ",\n        0.1\n    );\n    border-radius: ", ";\n    box-shadow: 0 0 0 1px\n        rgba(", ", 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme['text-rgb'];
-}, function (_ref6) {
-  var shouldShowRoundImage = _ref6.shouldShowRoundImage;
-  return shouldShowRoundImage ? '50%' : undefined;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme['009-rgb'];
-});
-
-exports.StyledListItemHeadImageWrapper = StyledListItemHeadImageWrapper;
-
-var StyledListItemHeadImage = _styledComponents.default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    height: 100%;\n    object-fit: cover;\n    opacity: ", ";\n    transition: opacity 0.4s ease;\n    width: 100%;\n"])), function (_ref8) {
-  var isHidden = _ref8.isHidden;
-  return isHidden ? 0 : 1;
-});
-
-exports.StyledListItemHeadImage = StyledListItemHeadImage;
-
-var StyledListItemHeadContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ", ";\n    justify-content: center;\n    line-height: normal;\n    margin-left: ", ";\n    min-width: 0;\n"])), function (_ref9) {
-  var isOpen = _ref9.isOpen;
+var StyledListItemHeadContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ", ";\n    justify-content: center;\n    line-height: normal;\n    margin-left: ", ";\n    min-width: 0;\n"])), function (_ref3) {
+  var isOpen = _ref3.isOpen;
   return isOpen ? 'bold' : 'normal';
-}, function (_ref10) {
-  var isIconOrImageGiven = _ref10.isIconOrImageGiven;
+}, function (_ref4) {
+  var isIconOrImageGiven = _ref4.isIconOrImageGiven;
   return isIconOrImageGiven ? '10px' : undefined;
 });
 
 exports.StyledListItemHeadContent = StyledListItemHeadContent;
 
-var StyledListItemHeadTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n"])));
+var StyledListItemHeadTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n"])));
 
 exports.StyledListItemHeadTitle = StyledListItemHeadTitle;
 
-var StyledListItemHeadTitleText = _styledComponents.default.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    min-width: 0;\n"])));
+var StyledListItemHeadTitleText = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    min-width: 0;\n"])));
 
 exports.StyledListItemHeadTitleText = StyledListItemHeadTitleText;
 
-var StyledListItemHeadSubtitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n"])));
+var StyledListItemHeadSubtitle = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n"])));
 
 exports.StyledListItemHeadSubtitle = StyledListItemHeadSubtitle;
 
-var StyledListItemHeadSubtitleText = _styledComponents.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n"])));
+var StyledListItemHeadSubtitleText = _styledComponents.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n"])));
 
 exports.StyledListItemHeadSubtitleText = StyledListItemHeadSubtitleText;
 
-var StyledListItemHeadTopRightElement = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n"])));
+var StyledListItemHeadTopRightElement = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n"])));
 
 exports.StyledListItemHeadTopRightElement = StyledListItemHeadTopRightElement;
 
-var StyledListItemHeadBottomRightElement = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n"])));
+var StyledListItemHeadBottomRightElement = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n"])));
 
 exports.StyledListItemHeadBottomRightElement = StyledListItemHeadBottomRightElement;
 
-var StyledListItemHeadRightElement = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin-left: 8px;\n"])));
+var StyledListItemHeadRightElement = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin-left: 8px;\n"])));
 
 exports.StyledListItemHeadRightElement = StyledListItemHeadRightElement;
-var StyledMotionListItemHeadHoverItem = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    overflow: hidden;\n"])));
+var StyledMotionListItemHeadHoverItem = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    overflow: hidden;\n"])));
 exports.StyledMotionListItemHeadHoverItem = StyledMotionListItemHeadHoverItem;
 //# sourceMappingURL=ListItemHead.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"names":["StyledListItemHead","styled","div","theme","text","isClickable","css","StyledMotionListItemHeadIndicator","motion","StyledListItemHeadIcon","StyledListItemHeadImageWrapper","shouldShowRoundImage","undefined","StyledListItemHeadImage","img","isHidden","StyledListItemHeadContent","isOpen","isIconOrImageGiven","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAOO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,+LAElB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAwCA,KAAK,CAACC,IAA9C;AAAA,CAFkB,EAOzB;AAAA,MAAGC,WAAH,SAAGA,WAAH;AAAA,SACEA,WAAW,QACXC,qBADW,gHADb;AAAA,CAPyB,CAAxB;;;AAcA,IAAMC,iCAAiC,GAAG,+BAAOC,qBAAON,GAAd,CAAH,+MAAvC;;;AAWA,IAAMO,sBAAsB,GAAGR,0BAAOC,GAAV,6UAEN;AAAA,MAAGC,KAAH,SAAGA,KAAH;AAAA,SAA4CA,KAAK,CAAC,UAAD,CAAjD;AAAA,CAFM,EAIpB;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAA4CA,KAAK,CAAC,SAAD,CAAjD;AAAA,CAJoB,CAA5B;;;;AAiBA,IAAMO,8BAA8B,GAAGT,0BAAOC,GAAV,4VAEjC;AAAA,MAAGC,KAAH,SAAGA,KAAH;AAAA,SAAoDA,KAAK,CAAC,UAAD,CAAzD;AAAA,CAFiC,EAKtB;AAAA,MAAGQ,oBAAH,SAAGA,oBAAH;AAAA,SAA+BA,oBAAoB,GAAG,KAAH,GAAWC,SAA9D;AAAA,CALsB,EAO5B;AAAA,MAAGT,KAAH,SAAGA,KAAH;AAAA,SAAoDA,KAAK,CAAC,SAAD,CAAzD;AAAA,CAP4B,CAApC;;;;AAmBA,IAAMU,uBAAuB,GAAGZ,0BAAOa,GAAV,+LAGrB;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,SAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CAHqB,CAA7B;;;;AAaA,IAAMC,yBAAyB,GAAGf,0BAAOC,GAAV,2QAInB;AAAA,MAAGe,MAAH,SAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,MAAH,GAAY,QAAnC;AAAA,CAJmB,EAOnB;AAAA,MAAGC,kBAAH,UAAGA,kBAAH;AAAA,SAA6BA,kBAAkB,GAAG,MAAH,GAAYN,SAA3D;AAAA,CAPmB,CAA/B;;;;AAWA,IAAMO,uBAAuB,GAAGlB,0BAAOC,GAAV,4JAA7B;;;;AAMA,IAAMkB,2BAA2B,GAAGnB,0BAAOoB,IAAV,iHAAjC;;;;AAKA,IAAMC,0BAA0B,GAAGrB,0BAAOC,GAAV,wMAAhC;;;;AAQA,IAAMqB,8BAA8B,GAAGtB,0BAAOoB,IAAV,wIAApC;;;;AAMA,IAAMG,iCAAiC,GAAGvB,0BAAOC,GAAV,gKAAvC;;;;AAOA,IAAMuB,oCAAoC,GAAGxB,0BAAOC,GAAV,4IAA1C;;;;AAMA,IAAMwB,8BAA8B,GAAGzB,0BAAOC,GAAV,uHAApC;;;AAKA,IAAMyB,iCAAiC,GAAG,+BAAOnB,qBAAON,GAAd,CAAH,kGAAvC","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    isClickable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ isClickable }) =>\n        isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadIconProps = WithTheme<unknown>;\n\nexport const StyledListItemHeadIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemHeadIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadIconProps) => theme['009-rgb']}, 0.08) inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    background-color: rgba(\n        ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n\ntype StyledListItemHeadContentProps = {\n    isIconOrImageGiven: boolean;\n    isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ isOpen }) => (isOpen ? 'bold' : 'normal')};\n    justify-content: center;\n    line-height: normal;\n    margin-left: ${({ isIconOrImageGiven }) => (isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)`\n    overflow: hidden;\n`;\n"],"file":"ListItemHead.styles.js"}
+{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"names":["StyledListItemHead","styled","div","theme","text","isClickable","css","StyledMotionListItemHeadIndicator","motion","StyledListItemHeadContent","isOpen","isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAOO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,+LAElB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAwCA,KAAK,CAACC,IAA9C;AAAA,CAFkB,EAOzB;AAAA,MAAGC,WAAH,SAAGA,WAAH;AAAA,SACEA,WAAW,QACXC,qBADW,gHADb;AAAA,CAPyB,CAAxB;;;AAcA,IAAMC,iCAAiC,GAAG,+BAAOC,qBAAON,GAAd,CAAH,+MAAvC;;;AAcA,IAAMO,yBAAyB,GAAGR,0BAAOC,GAAV,2QAInB;AAAA,MAAGQ,MAAH,SAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,MAAH,GAAY,QAAnC;AAAA,CAJmB,EAOnB;AAAA,MAAGC,kBAAH,SAAGA,kBAAH;AAAA,SAA6BA,kBAAkB,GAAG,MAAH,GAAYC,SAA3D;AAAA,CAPmB,CAA/B;;;;AAWA,IAAMC,uBAAuB,GAAGZ,0BAAOC,GAAV,4JAA7B;;;;AAMA,IAAMY,2BAA2B,GAAGb,0BAAOc,IAAV,iHAAjC;;;;AAKA,IAAMC,0BAA0B,GAAGf,0BAAOC,GAAV,sMAAhC;;;;AAQA,IAAMe,8BAA8B,GAAGhB,0BAAOc,IAAV,sIAApC;;;;AAMA,IAAMG,iCAAiC,GAAGjB,0BAAOC,GAAV,8JAAvC;;;;AAOA,IAAMiB,oCAAoC,GAAGlB,0BAAOC,GAAV,4IAA1C;;;;AAMA,IAAMkB,8BAA8B,GAAGnB,0BAAOC,GAAV,uHAApC;;;AAKA,IAAMmB,iCAAiC,GAAG,+BAAOb,qBAAON,GAAd,CAAH,kGAAvC","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    isClickable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ isClickable }) =>\n        isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n    isIconOrImageGiven: boolean;\n    isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ isOpen }) => (isOpen ? 'bold' : 'normal')};\n    justify-content: center;\n    line-height: normal;\n    margin-left: ${({ isIconOrImageGiven }) => (isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)`\n    overflow: hidden;\n`;\n"],"file":"ListItemHead.styles.js"}

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type ListItemIconProps = {
+    icons: string[];
+};
+declare const ListItemIcon: React.FC<ListItemIconProps>;
+export default ListItemIcon;

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../../../../icon/Icon"));
+
+var _ListItemIcon = require("./ListItemIcon.styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ListItemIcon = function ListItemIcon(_ref) {
+  var icons = _ref.icons;
+  return /*#__PURE__*/_react.default.createElement(_ListItemIcon.StyledListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: icons,
+    size: 22
+  }));
+};
+
+ListItemIcon.displayName = 'ListItemIcon';
+var _default = ListItemIcon;
+exports.default = _default;
+//# sourceMappingURL=ListItemIcon.js.map

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.tsx"],"names":["ListItemIcon","icons","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAMA,IAAMA,YAAyC,GAAG,SAA5CA,YAA4C,OAAe;AAAA,MAAZC,KAAY,QAAZA,KAAY;AAC7D,sBACI,6BAAC,gCAAD,qBACI,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAEA,KAAb;AAAoB,IAAA,IAAI,EAAE;AAA1B,IADJ,CADJ;AAKH,CAND;;AAQAD,YAAY,CAACE,WAAb,GAA2B,cAA3B;eAEeF,Y","sourcesContent":["import React from 'react';\nimport Icon from '../../../../icon/Icon';\nimport { StyledListItemIcon } from './ListItemIcon.styles';\n\ntype ListItemIconProps = {\n    icons: string[];\n};\n\nconst ListItemIcon: React.FC<ListItemIconProps> = ({ icons }) => {\n    return (\n        <StyledListItemIcon>\n            <Icon icons={icons} size={22} />\n        </StyledListItemIcon>\n    );\n};\n\nListItemIcon.displayName = 'ListItemIcon';\n\nexport default ListItemIcon;\n"],"file":"ListItemIcon.js"}

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledListItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledListItemIcon = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledListItemIcon = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: rgba(", ", 0.1);\n    box-shadow: 0 0 0 1px rgba(", ", 0.08)\n        inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme['text-rgb'];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme['009-rgb'];
+});
+
+exports.StyledListItemIcon = StyledListItemIcon;
+//# sourceMappingURL=ListItemIcon.styles.js.map

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"names":["StyledListItemIcon","styled","div","theme"],"mappings":";;;;;;;AAAA;;;;;;;;AAKO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,2UAEF;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAwCA,KAAK,CAAC,UAAD,CAA7C;AAAA,CAFE,EAGE;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAAwCA,KAAK,CAAC,SAAD,CAA7C;AAAA,CAHF,CAAxB","sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<unknown>;\n\nexport const StyledListItemIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08)\n        inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n`;\n"],"file":"ListItemIcon.styles.js"}

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type ListItemImageProps = {
+    images: string[];
+    shouldShowRoundImage: boolean;
+};
+declare const ListItemImage: React.FC<ListItemImageProps>;
+export default ListItemImage;

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js

@@ -0,0 +1,72 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _GridImage = _interopRequireDefault(require("../../../../grid-image/GridImage"));
+
+var _ListItemImage = require("./ListItemImage.styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ListItemImage = function ListItemImage(_ref) {
+  var images = _ref.images,
+      shouldShowRoundImage = _ref.shouldShowRoundImage;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasLoadedImage = _useState2[0],
+      setHasLoadedImage = _useState2[1];
+
+  var handleImageLoaded = (0, _react.useCallback)(function () {
+    setHasLoadedImage(true);
+  }, []);
+
+  if (images && images[0] && images[1] && images[2]) {
+    var gridImages = [images[0], images[1], images[2]];
+    return /*#__PURE__*/_react.default.createElement(_GridImage.default, {
+      images: gridImages,
+      shouldShowRoundImage: shouldShowRoundImage,
+      size: 40
+    });
+  }
+
+  if (images && images[0]) {
+    return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImageWrapper, {
+      shouldShowRoundImage: shouldShowRoundImage
+    }, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImage, {
+      isHidden: !hasLoadedImage,
+      onLoad: handleImageLoaded,
+      src: images[0]
+    }));
+  }
+
+  return null;
+};
+
+ListItemImage.displayName = 'ListItemImage';
+var _default = ListItemImage;
+exports.default = _default;
+//# sourceMappingURL=ListItemImage.js.map

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"names":["ListItemImage","images","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","handleImageLoaded","gridImages","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,aAA2C,GAAG,SAA9CA,aAA8C,OAAsC;AAAA,MAAnCC,MAAmC,QAAnCA,MAAmC;AAAA,MAA3BC,oBAA2B,QAA3BA,oBAA2B;;AACtF,kBAA4C,qBAAS,KAAT,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,MAAMC,iBAAiB,GAAG,wBAAY,YAAM;AACxCD,IAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACH,GAFyB,EAEvB,EAFuB,CAA1B;;AAIA,MAAIH,MAAM,IAAIA,MAAM,CAAC,CAAD,CAAhB,IAAuBA,MAAM,CAAC,CAAD,CAA7B,IAAoCA,MAAM,CAAC,CAAD,CAA9C,EAAmD;AAC/C,QAAMK,UAAU,GAAG,CAACL,MAAM,CAAC,CAAD,CAAP,EAAYA,MAAM,CAAC,CAAD,CAAlB,EAAuBA,MAAM,CAAC,CAAD,CAA7B,CAAnB;AAEA,wBACI,6BAAC,kBAAD;AAAW,MAAA,MAAM,EAAEK,UAAnB;AAA+B,MAAA,oBAAoB,EAAEJ,oBAArD;AAA2E,MAAA,IAAI,EAAE;AAAjF,MADJ;AAGH;;AAED,MAAID,MAAM,IAAIA,MAAM,CAAC,CAAD,CAApB,EAAyB;AACrB,wBACI,6BAAC,6CAAD;AAAgC,MAAA,oBAAoB,EAAEC;AAAtD,oBACI,6BAAC,sCAAD;AACI,MAAA,QAAQ,EAAE,CAACC,cADf;AAEI,MAAA,MAAM,EAAEE,iBAFZ;AAGI,MAAA,GAAG,EAAEJ,MAAM,CAAC,CAAD;AAHf,MADJ,CADJ;AASH;;AAED,SAAO,IAAP;AACH,CA3BD;;AA6BAD,aAAa,CAACO,WAAd,GAA4B,eAA5B;eAEeP,a","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    images: string[];\n    shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({ images, shouldShowRoundImage }) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    if (images && images[0] && images[1] && images[2]) {\n        const gridImages = [images[0], images[1], images[2]];\n\n        return (\n            <GridImage images={gridImages} shouldShowRoundImage={shouldShowRoundImage} size={40} />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper shouldShowRoundImage={shouldShowRoundImage}>\n                <StyledListItemHeadImage\n                    isHidden={!hasLoadedImage}\n                    onLoad={handleImageLoaded}\n                    src={images[0]}\n                />\n            </StyledListItemHeadImageWrapper>\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"file":"ListItemImage.js"}

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledListItemHeadImageWrapper: import("styled-components").StyledComponent<"div", any, {
+    shouldShowRoundImage?: boolean | undefined;
+} & {
+    theme: import("../../../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+declare type StyledListItemHeadImageProps = {
+    isHidden: boolean;
+};
+export declare const StyledListItemHeadImage: import("styled-components").StyledComponent<"img", any, StyledListItemHeadImageProps, never>;
+export {};

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledListItemHeadImageWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: rgba(\n        ", ",\n        0.1\n    );\n    border-radius: ", ";\n    box-shadow: 0 0 0 1px\n        rgba(", ", 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme['text-rgb'];
+}, function (_ref2) {
+  var shouldShowRoundImage = _ref2.shouldShowRoundImage;
+  return shouldShowRoundImage ? '50%' : undefined;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme['009-rgb'];
+});
+
+exports.StyledListItemHeadImageWrapper = StyledListItemHeadImageWrapper;
+
+var StyledListItemHeadImage = _styledComponents.default.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 100%;\n    object-fit: cover;\n    opacity: ", ";\n    transition: opacity 0.4s ease;\n    width: 100%;\n"])), function (_ref4) {
+  var isHidden = _ref4.isHidden;
+  return isHidden ? 0 : 1;
+});
+
+exports.StyledListItemHeadImage = StyledListItemHeadImage;
+//# sourceMappingURL=ListItemImage.styles.js.map

package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"names":["StyledListItemHeadImageWrapper","styled","div","theme","shouldShowRoundImage","undefined","StyledListItemHeadImage","img","isHidden"],"mappings":";;;;;;;AAAA;;;;;;;;AAOO,IAAMA,8BAA8B,GAAGC,0BAAOC,GAAV,0VAEjC;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAoDA,KAAK,CAAC,UAAD,CAAzD;AAAA,CAFiC,EAKtB;AAAA,MAAGC,oBAAH,SAAGA,oBAAH;AAAA,SAA+BA,oBAAoB,GAAG,KAAH,GAAWC,SAA9D;AAAA,CALsB,EAO5B;AAAA,MAAGF,KAAH,SAAGA,KAAH;AAAA,SAAoDA,KAAK,CAAC,SAAD,CAAzD;AAAA,CAP4B,CAApC;;;;AAmBA,IAAMG,uBAAuB,GAAGL,0BAAOM,GAAV,+LAGrB;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,SAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CAHqB,CAA7B","sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    background-color: rgba(\n        ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n"],"file":"ListItemImage.styles.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.28",
+    "version": "5.0.0-beta.30",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -61,5 +61,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c079761890efa42986a19739df1210ad46862df3"
+    "gitHead": "c7360693b78dc6c97b1655df459684498a1c218b"
 }