@chayns-components/core 5.0.0-beta.955 → 5.0.0-beta.965

package/lib/cjs/components/grid-image/GridImage.js

@@ -11,7 +11,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const GridImage = ({
   images,
   shouldShowRoundImage,
-  size
+  size,
+  onClick
 }) => {
   const [hasLoadedLeftImage, setHasLoadedLeftImage] = (0, _react.useState)(false);
   const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = (0, _react.useState)(false);
@@ -22,7 +23,8 @@ const GridImage = ({
   const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
   return /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridImage, {
     $shouldShowRoundImage: shouldShowRoundImage,
-    $size: size
+    $size: size,
+    onClick: typeof onClick === 'function' ? onClick : undefined
   }, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,

package/lib/cjs/components/grid-image/GridImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GridImage","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","$shouldShowRoundImage","$size","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { FC, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three\n     * images are displayed.\n     */\n    images: string[];\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     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size }) => {\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage $shouldShowRoundImage={shouldShowRoundImage} $size={size}>\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GridImage","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","$shouldShowRoundImage","$size","undefined","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { FC, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three\n     * images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\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     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size, onClick }) => {\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={typeof onClick === 'function' ? onClick : undefined}\n        >\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

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

@@ -26,6 +26,9 @@ const ListItem = ({
   shouldForceBackground = false,
   onClick,
   onLongPress,
+  shouldOpenImageOnClick = false,
+  onOpen,
+  onClose,
   leftElements,
   isTitleGreyed: isDisabledButNotReallyDisabled,
   rightElements,
@@ -48,9 +51,27 @@ const ListItem = ({
   const {
     isWrapped: isParentAccordionWrapped
   } = (0, _react.useContext)(_Accordion.AccordionContext);
+  const isInitialRenderRef = (0, _react.useRef)(true);
   const uuid = (0, _uuid.useUuid)();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
+  const onCloseRef = (0, _react.useRef)(onClose);
+  const onOpenRef = (0, _react.useRef)(onOpen);
+  (0, _react.useEffect)(() => {
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [isOpen, onClose, onOpen]);
+  (0, _react.useEffect)(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (isItemOpen) {
+      if (typeof onOpenRef.current === 'function') {
+        onOpenRef.current();
+      }
+    } else if (typeof onCloseRef.current === 'function') {
+      onCloseRef.current();
+    }
+  }, [isItemOpen]);
   const handleHeadClick = (0, _react.useCallback)(event => {
     if (isExpandable) {
       updateOpenItemUuid(uuid);
@@ -104,6 +125,7 @@ const ListItem = ({
     images: images,
     isAnyItemExpandable: isAnyItemExpandable,
     isDisabledButNotReallyDisabled: isDisabledButNotReallyDisabled,
+    shouldOpenImageOnClick: shouldOpenImageOnClick,
     isExpandable: isExpandable,
     isOpen: isItemOpen,
     leftElements: leftElements,

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

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

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

@@ -24,6 +24,7 @@ const ListItemHead = ({
   leftElements,
   onClick,
   onLongPress,
+  shouldOpenImageOnClick,
   rightElements,
   shouldHideImageOrIconBackground,
   shouldHideIndicator,
@@ -92,6 +93,7 @@ const ListItemHead = ({
     if (images) {
       return /*#__PURE__*/_react.default.createElement(_ListItemImage.default, {
         images: images,
+        shouldOpenImageOnClick: shouldOpenImageOnClick,
         shouldHideBackground: !!shouldHideImageOrIconBackground,
         shouldShowRoundImage: !!shouldShowRoundImageOrIcon
       });

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

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

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _GridImage = _interopRequireDefault(require("../../../../grid-image/GridImage"));
 var _ListItemImage = require("./ListItemImage.styles");
@@ -13,22 +14,43 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const ListItemImage = ({
   images,
   shouldHideBackground,
-  shouldShowRoundImage
+  shouldShowRoundImage,
+  shouldOpenImageOnClick
 }) => {
   const [hasLoadedImage, setHasLoadedImage] = (0, _react.useState)(false);
   const handleImageLoaded = (0, _react.useCallback)(() => {
     setHasLoadedImage(true);
   }, []);
+  const handleImageClick = (0, _react.useCallback)(event => {
+    if (!shouldOpenImageOnClick) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const items = images.map(image => ({
+      url: image,
+      mediaType: _chaynsApi.MediaType.IMAGE
+    }));
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    void (0, _chaynsApi.openMedia)({
+      items,
+      startIndex: 0
+    });
+  }, [images, shouldOpenImageOnClick]);
   if (images && images[0] && images[1] && images[2]) {
     const gridImages = [images[0], images[1], images[2]];
     return /*#__PURE__*/_react.default.createElement(_GridImage.default, {
       images: gridImages,
       shouldShowRoundImage: shouldShowRoundImage,
-      size: 40
+      size: 40,
+      onClick: handleImageClick
     });
   }
   if (images && images[0]) {
     return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImageWrapper, {
+      onClick: handleImageClick,
       $shouldHideBackground: shouldHideBackground,
       $shouldShowRoundImage: shouldShowRoundImage
     }, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImage, {

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_interopRequireDefault","_ListItemImage","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","images","shouldHideBackground","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","gridImages","createElement","size","StyledListItemHeadImageWrapper","$shouldHideBackground","$shouldShowRoundImage","StyledListItemHeadImage","$isHidden","onLoad","src","displayName","_default","exports"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"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    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n}) => {\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\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_GridImage","_interopRequireDefault","_ListItemImage","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemImage","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","gridImages","createElement","size","onClick","StyledListItemHeadImageWrapper","$shouldHideBackground","$shouldShowRoundImage","StyledListItemHeadImage","$isHidden","onLoad","src","displayName","_default","exports"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { MouseEventHandler, useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\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                onClick={handleImageClick}\n            />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper\n                onClick={handleImageClick}\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\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"],"mappings":"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","ignoreList":[]}

package/lib/cjs/utils/fileDialog.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectFiles = exports.getFileAsArrayBuffer = void 0;
+exports.selectFiles = exports.getFileAsArrayBuffer = exports.filterFilesByMimeType = void 0;
 var _chaynsApi = require("chayns-api");
 const selectFiles = ({
   type,
@@ -43,7 +43,7 @@ const selectFiles = ({
       return;
     }
     const fileArray = Object.values(files);
-    const filteredFileArray = fileArray.filter(file => {
+    let filteredFileArray = fileArray.filter(file => {
       const sizeInMB = file.size / 1024 / 1024;
       if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {
         return false;
@@ -59,6 +59,9 @@ const selectFiles = ({
         text: 'Einige Deiner ausgewählten Dateien sind zu groß.'
       }).open();
     }
+    if (typeof type === 'string') {
+      filteredFileArray = filterFilesByMimeType(filteredFileArray, type);
+    }
     resolve(filteredFileArray);
   };
   const onCancel = () => {
@@ -75,6 +78,21 @@ const selectFiles = ({
   input.click();
 });
 exports.selectFiles = selectFiles;
+const filterFilesByMimeType = (files, mimeTypes) => {
+  const allowedTypes = mimeTypes.split(',').map(type => type.trim());
+  const isAllowedType = fileType => allowedTypes.some(allowedType => {
+    if (allowedType.endsWith('/*')) {
+      const convertedAllowedType = allowedType.split('/*')[0];
+      if (!convertedAllowedType) {
+        return false;
+      }
+      return fileType.startsWith(convertedAllowedType);
+    }
+    return fileType === allowedType;
+  });
+  return Array.from(files).filter(file => isAllowedType(file.type));
+};
+exports.filterFilesByMimeType = filterFilesByMimeType;
 const getFileAsArrayBuffer = file => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.onload = e => {

package/lib/cjs/utils/fileDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileDialog.js","names":["_chaynsApi","require","selectFiles","type","multiple","maxFileSizeInMB","Promise","resolve","reject","input","document","createElement","style","visibility","width","height","display","accept","body","appendChild","abortController","AbortController","signal","onChange","event","removeChild","abort","target","files","fileArray","Object","values","filteredFileArray","filter","file","sizeInMB","size","includes","length","createDialog","DialogType","ALERT","text","open","onCancel","Error","addEventListener","click","exports","getFileAsArrayBuffer","reader","FileReader","onload","e","_e$target","result","onerror","readAsArrayBuffer"],"sources":["../../../src/utils/fileDialog.ts"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\n\ninterface SelectFilesOptions {\n    type?: string;\n    multiple: boolean;\n    maxFileSizeInMB?: number;\n}\n\nexport const selectFiles = ({\n                                type,\n                                multiple,\n                                maxFileSizeInMB,\n                            }: SelectFilesOptions): Promise<File[]> =>\n    new Promise((resolve, reject) => {\n        const input = document.createElement('input');\n\n        input.type = 'file';\n        input.style.visibility = 'none';\n        input.style.width = '0';\n        input.style.height = '0';\n        input.style.display = 'none';\n\n        if (type !== '*/*' && type) {\n            input.accept = type;\n        }\n\n        if (multiple) {\n            input.multiple = true;\n        }\n\n        document.body.appendChild(input);\n\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        const onChange = (event: Event) => {\n            document.body.removeChild(input);\n            abortController.abort();\n\n            if (!event.target) {\n                resolve([]);\n                return;\n            }\n\n            const target = event.target as HTMLInputElement;\n            const { files } = target;\n\n            if (!files) {\n                resolve([]);\n                return;\n            }\n\n            const fileArray = Object.values(files);\n\n            const filteredFileArray = fileArray.filter((file) => {\n                const sizeInMB = file.size / 1024 / 1024;\n\n                if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {\n                    return false;\n                }\n\n                if (file.type.includes('video/') && sizeInMB > 500) {\n                    return false;\n                }\n\n                return !(file.type.includes('image/') && sizeInMB > 64);\n            });\n\n            if (fileArray.length !== filteredFileArray.length) {\n                void createDialog({\n                    type: DialogType.ALERT,\n                    text: 'Einige Deiner ausgewählten Dateien sind zu groß.',\n                }).open();\n            }\n\n            resolve(filteredFileArray);\n        };\n\n        const onCancel = () => {\n            document.body.removeChild(input);\n            abortController.abort();\n            reject(new Error('File selection was cancelled.'));\n        };\n\n        input.addEventListener('change', onChange, { signal });\n        input.addEventListener('focusout', onCancel, { signal });\n\n        input.click();\n    });\n\nexport const getFileAsArrayBuffer = (file: File): Promise<string | ArrayBuffer> =>\n    new Promise((resolve, reject) => {\n        const reader = new FileReader();\n\n        reader.onload = (e) => {\n            if (e.target?.result) {\n                resolve(e.target.result);\n            } else {\n                reject(Error('Could not get array buffer.'));\n            }\n        };\n\n        reader.onerror = reject;\n\n        reader.readAsArrayBuffer(file);\n    });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"fileDialog.js","names":["_chaynsApi","require","selectFiles","type","multiple","maxFileSizeInMB","Promise","resolve","reject","input","document","createElement","style","visibility","width","height","display","accept","body","appendChild","abortController","AbortController","signal","onChange","event","removeChild","abort","target","files","fileArray","Object","values","filteredFileArray","filter","file","sizeInMB","size","includes","length","createDialog","DialogType","ALERT","text","open","filterFilesByMimeType","onCancel","Error","addEventListener","click","exports","mimeTypes","allowedTypes","split","map","trim","isAllowedType","fileType","some","allowedType","endsWith","convertedAllowedType","startsWith","Array","from","getFileAsArrayBuffer","reader","FileReader","onload","e","_e$target","result","onerror","readAsArrayBuffer"],"sources":["../../../src/utils/fileDialog.ts"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\n\ninterface SelectFilesOptions {\n    type?: string;\n    multiple: boolean;\n    maxFileSizeInMB?: number;\n}\n\nexport const selectFiles = ({\n    type,\n    multiple,\n    maxFileSizeInMB,\n}: SelectFilesOptions): Promise<File[]> =>\n    new Promise((resolve, reject) => {\n        const input = document.createElement('input');\n\n        input.type = 'file';\n        input.style.visibility = 'none';\n        input.style.width = '0';\n        input.style.height = '0';\n        input.style.display = 'none';\n\n        if (type !== '*/*' && type) {\n            input.accept = type;\n        }\n\n        if (multiple) {\n            input.multiple = true;\n        }\n\n        document.body.appendChild(input);\n\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        const onChange = (event: Event) => {\n            document.body.removeChild(input);\n            abortController.abort();\n\n            if (!event.target) {\n                resolve([]);\n                return;\n            }\n\n            const target = event.target as HTMLInputElement;\n            const { files } = target;\n\n            if (!files) {\n                resolve([]);\n                return;\n            }\n\n            const fileArray = Object.values(files);\n\n            let filteredFileArray = fileArray.filter((file) => {\n                const sizeInMB = file.size / 1024 / 1024;\n\n                if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {\n                    return false;\n                }\n\n                if (file.type.includes('video/') && sizeInMB > 500) {\n                    return false;\n                }\n\n                return !(file.type.includes('image/') && sizeInMB > 64);\n            });\n\n            if (fileArray.length !== filteredFileArray.length) {\n                void createDialog({\n                    type: DialogType.ALERT,\n                    text: 'Einige Deiner ausgewählten Dateien sind zu groß.',\n                }).open();\n            }\n\n            if (typeof type === 'string') {\n                filteredFileArray = filterFilesByMimeType(filteredFileArray, type);\n            }\n\n            resolve(filteredFileArray);\n        };\n\n        const onCancel = () => {\n            document.body.removeChild(input);\n            abortController.abort();\n            reject(new Error('File selection was cancelled.'));\n        };\n\n        input.addEventListener('change', onChange, { signal });\n        input.addEventListener('focusout', onCancel, { signal });\n\n        input.click();\n    });\n\nexport const filterFilesByMimeType = (files: FileList | File[], mimeTypes: string): File[] => {\n    const allowedTypes = mimeTypes.split(',').map((type) => type.trim());\n\n    const isAllowedType = (fileType: string) =>\n        allowedTypes.some((allowedType) => {\n            if (allowedType.endsWith('/*')) {\n                const convertedAllowedType = allowedType.split('/*')[0];\n\n                if (!convertedAllowedType) {\n                    return false;\n                }\n\n                return fileType.startsWith(convertedAllowedType);\n            }\n\n            return fileType === allowedType;\n        });\n\n    return Array.from(files).filter((file) => isAllowedType(file.type));\n};\n\nexport const getFileAsArrayBuffer = (file: File): Promise<string | ArrayBuffer> =>\n    new Promise((resolve, reject) => {\n        const reader = new FileReader();\n\n        reader.onload = (e) => {\n            if (e.target?.result) {\n                resolve(e.target.result);\n            } else {\n                reject(Error('Could not get array buffer.'));\n            }\n        };\n\n        reader.onerror = reject;\n\n        reader.readAsArrayBuffer(file);\n    });\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.js

@@ -4,7 +4,8 @@ const GridImage = _ref => {
   let {
     images,
     shouldShowRoundImage,
-    size
+    size,
+    onClick
   } = _ref;
   const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);
   const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);
@@ -15,7 +16,8 @@ const GridImage = _ref => {
   const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
   return /*#__PURE__*/React.createElement(StyledGridImage, {
     $shouldShowRoundImage: shouldShowRoundImage,
-    $size: size
+    $size: size,
+    onClick: typeof onClick === 'function' ? onClick : undefined
   }, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,

package/lib/esm/components/grid-image/GridImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridImage.js","names":["React","useCallback","useState","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","_ref","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$shouldShowRoundImage","$size","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { FC, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three\n     * images are displayed.\n     */\n    images: string[];\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     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size }) => {\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage $shouldShowRoundImage={shouldShowRoundImage} $size={size}>\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;AAmB3B,MAAMC,SAA6B,GAAGC,IAAA,IAA4C;EAAA,IAA3C;IAAEC,MAAM;IAAEC,oBAAoB;IAAEC;EAAK,CAAC,GAAAH,IAAA;EACzE,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACY,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGb,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACc,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAMgB,qBAAqB,GAAGjB,WAAW,CAAC,MAAMY,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMM,yBAAyB,GAAGlB,WAAW,CAAC,MAAMc,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMK,4BAA4B,GAAGnB,WAAW,CAAC,MAAMgB,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMI,iBAAiB,GACnB,CAACT,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,oBACIhB,KAAA,CAAAsB,aAAA,CAAClB,eAAe;IAACmB,qBAAqB,EAAEb,oBAAqB;IAACc,KAAK,EAAEb;EAAK,gBACtEX,KAAA,CAAAsB,aAAA,CAACjB,mBAAmB;IAChBoB,SAAS,EAAEJ,iBAAkB;IAC7BK,MAAM,EAAER,qBAAsB;IAC9BM,KAAK,EAAEb,IAAK;IACZgB,GAAG,EAAElB,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFT,KAAA,CAAAsB,aAAA,CAAChB,uBAAuB;IACpBmB,SAAS,EAAEJ,iBAAkB;IAC7BK,MAAM,EAAEP,yBAA0B;IAClCK,KAAK,EAAEb,IAAK;IACZgB,GAAG,EAAElB,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFT,KAAA,CAAAsB,aAAA,CAACnB,0BAA0B;IACvBsB,SAAS,EAAEJ,iBAAkB;IAC7BK,MAAM,EAAEN,4BAA6B;IACrCO,GAAG,EAAElB,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,CAACqB,WAAW,GAAG,WAAW;AAEnC,eAAerB,SAAS","ignoreList":[]}
+{"version":3,"file":"GridImage.js","names":["React","useCallback","useState","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","_ref","images","shouldShowRoundImage","size","onClick","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","$shouldShowRoundImage","$size","undefined","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { FC, MouseEventHandler, useCallback, useState } from 'react';\nimport {\n    StyledGridBottomRightImage,\n    StyledGridImage,\n    StyledGridLeftImage,\n    StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n    /**\n     * The images to be displayed in the `GridImage`. Only the first three\n     * images are displayed.\n     */\n    images: string[];\n    /**\n     * Function to be executed when the images are clicked.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\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     * The size of the `GridImage` in pixels, which is set as both width and height.\n     */\n    size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size, onClick }) => {\n    const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n    const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n    const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n    const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n    const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n    const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n    const isGridImageHidden =\n        !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n    return (\n        <StyledGridImage\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $size={size}\n            onClick={typeof onClick === 'function' ? onClick : undefined}\n        >\n            <StyledGridLeftImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleLeftImageLoaded}\n                $size={size}\n                src={images[0]}\n            />\n            <StyledGridTopRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleTopRightImageLoaded}\n                $size={size}\n                src={images[1]}\n            />\n            <StyledGridBottomRightImage\n                $isHidden={isGridImageHidden}\n                onLoad={handleBottomRightImageLoaded}\n                src={images[2]}\n            />\n        </StyledGridImage>\n    );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA2BC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAC3E,SACIC,0BAA0B,EAC1BC,eAAe,EACfC,mBAAmB,EACnBC,uBAAuB,QACpB,oBAAoB;AAuB3B,MAAMC,SAA6B,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,MAAM;IAAEC,oBAAoB;IAAEC,IAAI;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EAClF,MAAM,CAACK,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACa,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACe,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAMiB,qBAAqB,GAAGlB,WAAW,CAAC,MAAMa,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMM,yBAAyB,GAAGnB,WAAW,CAAC,MAAMe,yBAAyB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAExF,MAAMK,4BAA4B,GAAGpB,WAAW,CAAC,MAAMiB,4BAA4B,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE9F,MAAMI,iBAAiB,GACnB,CAACT,kBAAkB,IAAI,CAACE,sBAAsB,IAAI,CAACE,yBAAyB;EAEhF,oBACIjB,KAAA,CAAAuB,aAAA,CAACnB,eAAe;IACZoB,qBAAqB,EAAEd,oBAAqB;IAC5Ce,KAAK,EAAEd,IAAK;IACZC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGA,OAAO,GAAGc;EAAU,gBAE7D1B,KAAA,CAAAuB,aAAA,CAAClB,mBAAmB;IAChBsB,SAAS,EAAEL,iBAAkB;IAC7BM,MAAM,EAAET,qBAAsB;IAC9BM,KAAK,EAAEd,IAAK;IACZkB,GAAG,EAAEpB,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFT,KAAA,CAAAuB,aAAA,CAACjB,uBAAuB;IACpBqB,SAAS,EAAEL,iBAAkB;IAC7BM,MAAM,EAAER,yBAA0B;IAClCK,KAAK,EAAEd,IAAK;IACZkB,GAAG,EAAEpB,MAAM,CAAC,CAAC;EAAE,CAClB,CAAC,eACFT,KAAA,CAAAuB,aAAA,CAACpB,0BAA0B;IACvBwB,SAAS,EAAEL,iBAAkB;IAC7BM,MAAM,EAAEP,4BAA6B;IACrCQ,GAAG,EAAEpB,MAAM,CAAC,CAAC;EAAE,CAClB,CACY,CAAC;AAE1B,CAAC;AAEDF,SAAS,CAACuB,WAAW,GAAG,WAAW;AAEnC,eAAevB,SAAS","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { useUuid } from '../../../hooks/uuid';
 import { AccordionContext } from '../../accordion/Accordion';
 import AreaContextProvider from '../../area-provider/AreaContextProvider';
@@ -18,6 +18,9 @@ const ListItem = _ref => {
     shouldForceBackground = false,
     onClick,
     onLongPress,
+    shouldOpenImageOnClick = false,
+    onOpen,
+    onClose,
     leftElements,
     isTitleGreyed: isDisabledButNotReallyDisabled,
     rightElements,
@@ -40,9 +43,27 @@ const ListItem = _ref => {
   const {
     isWrapped: isParentAccordionWrapped
   } = useContext(AccordionContext);
+  const isInitialRenderRef = useRef(true);
   const uuid = useUuid();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
+  const onCloseRef = useRef(onClose);
+  const onOpenRef = useRef(onOpen);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [isOpen, onClose, onOpen]);
+  useEffect(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (isItemOpen) {
+      if (typeof onOpenRef.current === 'function') {
+        onOpenRef.current();
+      }
+    } else if (typeof onCloseRef.current === 'function') {
+      onCloseRef.current();
+    }
+  }, [isItemOpen]);
   const handleHeadClick = useCallback(event => {
     if (isExpandable) {
       updateOpenItemUuid(uuid);
@@ -96,6 +117,7 @@ const ListItem = _ref => {
     images: images,
     isAnyItemExpandable: isAnyItemExpandable,
     isDisabledButNotReallyDisabled: isDisabledButNotReallyDisabled,
+    shouldOpenImageOnClick: shouldOpenImageOnClick,
     isExpandable: isExpandable,
     isOpen: isItemOpen,
     leftElements: leftElements,

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","shouldForceBackground","onClick","onLongPress","leftElements","isTitleGreyed","isDisabledButNotReallyDisabled","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldHideBottomLine","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$shouldForceBackground","$shouldShowSeparatorBelow","$shouldHideBottomLine","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"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 type {IListItemRightElements} from '../../../types/list';\nimport {AccordionContext} from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport {ListContext} from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport {StyledMotionListItem} from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The 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     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: 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?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n                                         children,\n                                         hoverItem,\n                                         icons,\n                                         images,\n                                         isDefaultOpen,\n                                         isOpen,\n                                         shouldForceBackground = false,\n                                         onClick,\n                                         onLongPress,\n                                         leftElements,\n                                         isTitleGreyed: isDisabledButNotReallyDisabled,\n                                         rightElements,\n                                         shouldHideImageOrIconBackground,\n                                         shouldHideIndicator = false,\n                                         subtitle,\n                                         shouldShowRoundImageOrIcon,\n                                         shouldHideBottomLine = false,\n                                         shouldShowSeparatorBelow = false,\n                                         title,\n                                         titleElement,\n                                     }) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const {isWrapped: isParentAccordionWrapped} = useContext(AccordionContext);\n\n    const 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 && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, {shouldOnlyOpen: true});\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{height: 'auto', opacity: 1}}\n            className=\"beta-chayns-list-item\"\n            exit={{height: 0, opacity: 0}}\n            initial={{height: 0, opacity: 0}}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n            $shouldHideBottomLine={shouldHideBottomLine}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isDisabledButNotReallyDisabled={isDisabledButNotReallyDisabled}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","shouldForceBackground","onClick","onLongPress","shouldOpenImageOnClick","onOpen","onClose","leftElements","isTitleGreyed","isDisabledButNotReallyDisabled","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldHideBottomLine","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","isInitialRenderRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","current","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isInAccordion","$isWrapped","$shouldHideIndicator","$shouldForceBackground","$shouldShowSeparatorBelow","$shouldHideBottomLine","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The 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     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: 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 ListItem is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    shouldForceBackground = false,\n    onClick,\n    onLongPress,\n    shouldOpenImageOnClick = false,\n    onOpen,\n    onClose,\n    leftElements,\n    isTitleGreyed: isDisabledButNotReallyDisabled,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldHideBottomLine = false,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const isInitialRenderRef = useRef(true);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isItemOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isItemOpen]);\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable && !shouldHideIndicator) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isWrapped={isWrapped}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n            $shouldHideBottomLine={shouldHideBottomLine}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isDisabledButNotReallyDisabled={isDisabledButNotReallyDisabled}\n                shouldOpenImageOnClick={shouldOpenImageOnClick}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

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

@@ -16,6 +16,7 @@ const ListItemHead = _ref => {
     leftElements,
     onClick,
     onLongPress,
+    shouldOpenImageOnClick,
     rightElements,
     shouldHideImageOrIconBackground,
     shouldHideIndicator,
@@ -84,6 +85,7 @@ const ListItemHead = _ref => {
     if (images) {
       return /*#__PURE__*/React.createElement(ListItemImage, {
         images: images,
+        shouldOpenImageOnClick: shouldOpenImageOnClick,
         shouldHideBackground: !!shouldHideImageOrIconBackground,
         shouldShowRoundImage: !!shouldShowRoundImageOrIcon
       });

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

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

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

@@ -1,3 +1,4 @@
+import { MediaType, openMedia } from 'chayns-api';
 import React, { useCallback, useState } from 'react';
 import GridImage from '../../../../grid-image/GridImage';
 import { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';
@@ -5,22 +6,43 @@ const ListItemImage = _ref => {
   let {
     images,
     shouldHideBackground,
-    shouldShowRoundImage
+    shouldShowRoundImage,
+    shouldOpenImageOnClick
   } = _ref;
   const [hasLoadedImage, setHasLoadedImage] = useState(false);
   const handleImageLoaded = useCallback(() => {
     setHasLoadedImage(true);
   }, []);
+  const handleImageClick = useCallback(event => {
+    if (!shouldOpenImageOnClick) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const items = images.map(image => ({
+      url: image,
+      mediaType: MediaType.IMAGE
+    }));
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    void openMedia({
+      items,
+      startIndex: 0
+    });
+  }, [images, shouldOpenImageOnClick]);
   if (images && images[0] && images[1] && images[2]) {
     const gridImages = [images[0], images[1], images[2]];
     return /*#__PURE__*/React.createElement(GridImage, {
       images: gridImages,
       shouldShowRoundImage: shouldShowRoundImage,
-      size: 40
+      size: 40,
+      onClick: handleImageClick
     });
   }
   if (images && images[0]) {
     return /*#__PURE__*/React.createElement(StyledListItemHeadImageWrapper, {
+      onClick: handleImageClick,
       $shouldHideBackground: shouldHideBackground,
       $shouldShowRoundImage: shouldShowRoundImage
     }, /*#__PURE__*/React.createElement(StyledListItemHeadImage, {

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","names":["React","useCallback","useState","GridImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","images","shouldHideBackground","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","handleImageLoaded","gridImages","createElement","size","$shouldHideBackground","$shouldShowRoundImage","$isHidden","onLoad","src","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"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    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n}) => {\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\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,OAAOC,SAAS,MAAM,kCAAkC;AACxD,SAASC,uBAAuB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAQhG,MAAMC,aAA2C,GAAGC,IAAA,IAI9C;EAAA,IAJ+C;IACjDC,MAAM;IACNC,oBAAoB;IACpBC;EACJ,CAAC,GAAAH,IAAA;EACG,MAAM,CAACI,cAAc,EAAEC,iBAAiB,CAAC,GAAGV,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMW,iBAAiB,GAAGZ,WAAW,CAAC,MAAM;IACxCW,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIJ,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IAC/C,MAAMM,UAAU,GAAG,CAACN,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpD,oBACIR,KAAA,CAAAe,aAAA,CAACZ,SAAS;MAACK,MAAM,EAAEM,UAAW;MAACJ,oBAAoB,EAAEA,oBAAqB;MAACM,IAAI,EAAE;IAAG,CAAE,CAAC;EAE/F;EAEA,IAAIR,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,oBACIR,KAAA,CAAAe,aAAA,CAACV,8BAA8B;MAC3BY,qBAAqB,EAAER,oBAAqB;MAC5CS,qBAAqB,EAAER;IAAqB,gBAE5CV,KAAA,CAAAe,aAAA,CAACX,uBAAuB;MACpBe,SAAS,EAAE,CAACR,cAAe;MAC3BS,MAAM,EAAEP,iBAAkB;MAC1BQ,GAAG,EAAEb,MAAM,CAAC,CAAC;IAAE,CAClB,CAC2B,CAAC;EAEzC;EAEA,OAAO,IAAI;AACf,CAAC;AAEDF,aAAa,CAACgB,WAAW,GAAG,eAAe;AAE3C,eAAehB,aAAa","ignoreList":[]}
+{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","GridImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","gridImages","createElement","size","onClick","$shouldHideBackground","$shouldShowRoundImage","$isHidden","onLoad","src","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { MouseEventHandler, useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\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                onClick={handleImageClick}\n            />\n        );\n    }\n\n    if (images && images[0]) {\n        return (\n            <StyledListItemHeadImageWrapper\n                onClick={handleImageClick}\n                $shouldHideBackground={shouldHideBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n            >\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"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAuB,YAAY;AAChE,OAAOC,KAAK,IAAuBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACvE,OAAOC,SAAS,MAAM,kCAAkC;AACxD,SAASC,uBAAuB,EAAEC,8BAA8B,QAAQ,wBAAwB;AAShG,MAAMC,aAA2C,GAAGC,IAAA,IAK9C;EAAA,IAL+C;IACjDC,MAAM;IACNC,oBAAoB;IACpBC,oBAAoB;IACpBC;EACJ,CAAC,GAAAJ,IAAA;EACG,MAAM,CAACK,cAAc,EAAEC,iBAAiB,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMY,iBAAiB,GAAGb,WAAW,CAAC,MAAM;IACxCY,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,gBAAgB,GAAGd,WAAW,CAC/Be,KAAK,IAAK;IACP,IAAI,CAACL,sBAAsB,EAAE;MACzB;IACJ;IAEAK,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGX,MAAM,CAACY,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAEzB,SAAS,CAAC0B;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKzB,SAAS,CAAC;MAAEoB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAACjB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IAC/C,MAAMkB,UAAU,GAAG,CAAClB,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpD,oBACIR,KAAA,CAAA2B,aAAA,CAACxB,SAAS;MACNK,MAAM,EAAEkB,UAAW;MACnBhB,oBAAoB,EAAEA,oBAAqB;MAC3CkB,IAAI,EAAE,EAAG;MACTC,OAAO,EAAEd;IAAiB,CAC7B,CAAC;EAEV;EAEA,IAAIP,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,oBACIR,KAAA,CAAA2B,aAAA,CAACtB,8BAA8B;MAC3BwB,OAAO,EAAEd,gBAAiB;MAC1Be,qBAAqB,EAAErB,oBAAqB;MAC5CsB,qBAAqB,EAAErB;IAAqB,gBAE5CV,KAAA,CAAA2B,aAAA,CAACvB,uBAAuB;MACpB4B,SAAS,EAAE,CAACpB,cAAe;MAC3BqB,MAAM,EAAEnB,iBAAkB;MAC1BoB,GAAG,EAAE1B,MAAM,CAAC,CAAC;IAAE,CAClB,CAC2B,CAAC;EAEzC;EAEA,OAAO,IAAI;AACf,CAAC;AAEDF,aAAa,CAAC6B,WAAW,GAAG,eAAe;AAE3C,eAAe7B,aAAa","ignoreList":[]}

package/lib/esm/utils/fileDialog.js

@@ -39,7 +39,7 @@ export const selectFiles = _ref => {
         return;
       }
       const fileArray = Object.values(files);
-      const filteredFileArray = fileArray.filter(file => {
+      let filteredFileArray = fileArray.filter(file => {
         const sizeInMB = file.size / 1024 / 1024;
         if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {
           return false;
@@ -55,6 +55,9 @@ export const selectFiles = _ref => {
           text: 'Einige Deiner ausgewählten Dateien sind zu groß.'
         }).open();
       }
+      if (typeof type === 'string') {
+        filteredFileArray = filterFilesByMimeType(filteredFileArray, type);
+      }
       resolve(filteredFileArray);
     };
     const onCancel = () => {
@@ -71,6 +74,20 @@ export const selectFiles = _ref => {
     input.click();
   });
 };
+export const filterFilesByMimeType = (files, mimeTypes) => {
+  const allowedTypes = mimeTypes.split(',').map(type => type.trim());
+  const isAllowedType = fileType => allowedTypes.some(allowedType => {
+    if (allowedType.endsWith('/*')) {
+      const convertedAllowedType = allowedType.split('/*')[0];
+      if (!convertedAllowedType) {
+        return false;
+      }
+      return fileType.startsWith(convertedAllowedType);
+    }
+    return fileType === allowedType;
+  });
+  return Array.from(files).filter(file => isAllowedType(file.type));
+};
 export const getFileAsArrayBuffer = file => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.onload = e => {

package/lib/esm/utils/fileDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileDialog.js","names":["createDialog","DialogType","selectFiles","_ref","type","multiple","maxFileSizeInMB","Promise","resolve","reject","input","document","createElement","style","visibility","width","height","display","accept","body","appendChild","abortController","AbortController","signal","onChange","event","removeChild","abort","target","files","fileArray","Object","values","filteredFileArray","filter","file","sizeInMB","size","includes","length","ALERT","text","open","onCancel","Error","addEventListener","click","getFileAsArrayBuffer","reader","FileReader","onload","e","result","onerror","readAsArrayBuffer"],"sources":["../../../src/utils/fileDialog.ts"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\n\ninterface SelectFilesOptions {\n    type?: string;\n    multiple: boolean;\n    maxFileSizeInMB?: number;\n}\n\nexport const selectFiles = ({\n                                type,\n                                multiple,\n                                maxFileSizeInMB,\n                            }: SelectFilesOptions): Promise<File[]> =>\n    new Promise((resolve, reject) => {\n        const input = document.createElement('input');\n\n        input.type = 'file';\n        input.style.visibility = 'none';\n        input.style.width = '0';\n        input.style.height = '0';\n        input.style.display = 'none';\n\n        if (type !== '*/*' && type) {\n            input.accept = type;\n        }\n\n        if (multiple) {\n            input.multiple = true;\n        }\n\n        document.body.appendChild(input);\n\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        const onChange = (event: Event) => {\n            document.body.removeChild(input);\n            abortController.abort();\n\n            if (!event.target) {\n                resolve([]);\n                return;\n            }\n\n            const target = event.target as HTMLInputElement;\n            const { files } = target;\n\n            if (!files) {\n                resolve([]);\n                return;\n            }\n\n            const fileArray = Object.values(files);\n\n            const filteredFileArray = fileArray.filter((file) => {\n                const sizeInMB = file.size / 1024 / 1024;\n\n                if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {\n                    return false;\n                }\n\n                if (file.type.includes('video/') && sizeInMB > 500) {\n                    return false;\n                }\n\n                return !(file.type.includes('image/') && sizeInMB > 64);\n            });\n\n            if (fileArray.length !== filteredFileArray.length) {\n                void createDialog({\n                    type: DialogType.ALERT,\n                    text: 'Einige Deiner ausgewählten Dateien sind zu groß.',\n                }).open();\n            }\n\n            resolve(filteredFileArray);\n        };\n\n        const onCancel = () => {\n            document.body.removeChild(input);\n            abortController.abort();\n            reject(new Error('File selection was cancelled.'));\n        };\n\n        input.addEventListener('change', onChange, { signal });\n        input.addEventListener('focusout', onCancel, { signal });\n\n        input.click();\n    });\n\nexport const getFileAsArrayBuffer = (file: File): Promise<string | ArrayBuffer> =>\n    new Promise((resolve, reject) => {\n        const reader = new FileReader();\n\n        reader.onload = (e) => {\n            if (e.target?.result) {\n                resolve(e.target.result);\n            } else {\n                reject(Error('Could not get array buffer.'));\n            }\n        };\n\n        reader.onerror = reject;\n\n        reader.readAsArrayBuffer(file);\n    });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"fileDialog.js","names":["createDialog","DialogType","selectFiles","_ref","type","multiple","maxFileSizeInMB","Promise","resolve","reject","input","document","createElement","style","visibility","width","height","display","accept","body","appendChild","abortController","AbortController","signal","onChange","event","removeChild","abort","target","files","fileArray","Object","values","filteredFileArray","filter","file","sizeInMB","size","includes","length","ALERT","text","open","filterFilesByMimeType","onCancel","Error","addEventListener","click","mimeTypes","allowedTypes","split","map","trim","isAllowedType","fileType","some","allowedType","endsWith","convertedAllowedType","startsWith","Array","from","getFileAsArrayBuffer","reader","FileReader","onload","e","result","onerror","readAsArrayBuffer"],"sources":["../../../src/utils/fileDialog.ts"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\n\ninterface SelectFilesOptions {\n    type?: string;\n    multiple: boolean;\n    maxFileSizeInMB?: number;\n}\n\nexport const selectFiles = ({\n    type,\n    multiple,\n    maxFileSizeInMB,\n}: SelectFilesOptions): Promise<File[]> =>\n    new Promise((resolve, reject) => {\n        const input = document.createElement('input');\n\n        input.type = 'file';\n        input.style.visibility = 'none';\n        input.style.width = '0';\n        input.style.height = '0';\n        input.style.display = 'none';\n\n        if (type !== '*/*' && type) {\n            input.accept = type;\n        }\n\n        if (multiple) {\n            input.multiple = true;\n        }\n\n        document.body.appendChild(input);\n\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        const onChange = (event: Event) => {\n            document.body.removeChild(input);\n            abortController.abort();\n\n            if (!event.target) {\n                resolve([]);\n                return;\n            }\n\n            const target = event.target as HTMLInputElement;\n            const { files } = target;\n\n            if (!files) {\n                resolve([]);\n                return;\n            }\n\n            const fileArray = Object.values(files);\n\n            let filteredFileArray = fileArray.filter((file) => {\n                const sizeInMB = file.size / 1024 / 1024;\n\n                if (maxFileSizeInMB && maxFileSizeInMB < sizeInMB) {\n                    return false;\n                }\n\n                if (file.type.includes('video/') && sizeInMB > 500) {\n                    return false;\n                }\n\n                return !(file.type.includes('image/') && sizeInMB > 64);\n            });\n\n            if (fileArray.length !== filteredFileArray.length) {\n                void createDialog({\n                    type: DialogType.ALERT,\n                    text: 'Einige Deiner ausgewählten Dateien sind zu groß.',\n                }).open();\n            }\n\n            if (typeof type === 'string') {\n                filteredFileArray = filterFilesByMimeType(filteredFileArray, type);\n            }\n\n            resolve(filteredFileArray);\n        };\n\n        const onCancel = () => {\n            document.body.removeChild(input);\n            abortController.abort();\n            reject(new Error('File selection was cancelled.'));\n        };\n\n        input.addEventListener('change', onChange, { signal });\n        input.addEventListener('focusout', onCancel, { signal });\n\n        input.click();\n    });\n\nexport const filterFilesByMimeType = (files: FileList | File[], mimeTypes: string): File[] => {\n    const allowedTypes = mimeTypes.split(',').map((type) => type.trim());\n\n    const isAllowedType = (fileType: string) =>\n        allowedTypes.some((allowedType) => {\n            if (allowedType.endsWith('/*')) {\n                const convertedAllowedType = allowedType.split('/*')[0];\n\n                if (!convertedAllowedType) {\n                    return false;\n                }\n\n                return fileType.startsWith(convertedAllowedType);\n            }\n\n            return fileType === allowedType;\n        });\n\n    return Array.from(files).filter((file) => isAllowedType(file.type));\n};\n\nexport const getFileAsArrayBuffer = (file: File): Promise<string | ArrayBuffer> =>\n    new Promise((resolve, reject) => {\n        const reader = new FileReader();\n\n        reader.onload = (e) => {\n            if (e.target?.result) {\n                resolve(e.target.result);\n            } else {\n                reject(Error('Could not get array buffer.'));\n            }\n        };\n\n        reader.onerror = reject;\n\n        reader.readAsArrayBuffer(file);\n    });\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/grid-image/GridImage.d.ts

@@ -1,10 +1,14 @@
-import { FC } from 'react';
+import { FC, MouseEventHandler } from 'react';
 type GridImageProps = {
     /**
      * The images to be displayed in the `GridImage`. Only the first three
      * images are displayed.
      */
     images: string[];
+    /**
+     * Function to be executed when the images are clicked.
+     */
+    onClick?: MouseEventHandler<HTMLDivElement>;
     /**
      * Images of users should always be displayed in a round shape. Therefore
      * this property can be set to true.

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

@@ -40,11 +40,19 @@ export type ListItemProps = {
      * Function to be executed when the header of the `ListItem` was clicked
      */
     onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Function to be executed when the ListItem is closed.
+     */
+    onClose?: VoidFunction;
     /**
      * Function to be executed when the header of the `ListItem` is pressed for
      * 400 milliseconds.
      */
     onLongPress?: TouchEventHandler<HTMLDivElement>;
+    /**
+     * Function to be executed when the ListItem is opened.
+     */
+    onOpen?: VoidFunction;
     /**
      * Elements that are displayed on the left side of the header. If multiple
      * elements are specified, they are displayed one aside the other.
@@ -74,6 +82,10 @@ export type ListItemProps = {
      * hidden.
      */
     shouldHideIndicator?: boolean;
+    /**
+     * Whether the image should be opened on click.
+     */
+    shouldOpenImageOnClick?: boolean;
     /**
      * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.
      */

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

@@ -18,6 +18,7 @@ type ListItemHeadProps = {
     title: ReactNode;
     titleElement?: ReactNode;
     isDisabledButNotReallyDisabled?: boolean;
+    shouldOpenImageOnClick: boolean;
 };
 declare const ListItemHead: FC<ListItemHeadProps>;
 export default ListItemHead;

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

@@ -3,6 +3,7 @@ type ListItemImageProps = {
     images: string[];
     shouldHideBackground: boolean;
     shouldShowRoundImage: boolean;
+    shouldOpenImageOnClick: boolean;
 };
 declare const ListItemImage: React.FC<ListItemImageProps>;
 export default ListItemImage;

package/lib/types/utils/fileDialog.d.ts

@@ -4,5 +4,6 @@ interface SelectFilesOptions {
     maxFileSizeInMB?: number;
 }
 export declare const selectFiles: ({ type, multiple, maxFileSizeInMB, }: SelectFilesOptions) => Promise<File[]>;
+export declare const filterFilesByMimeType: (files: FileList | File[], mimeTypes: string) => File[];
 export declare const getFileAsArrayBuffer: (file: File) => Promise<string | ArrayBuffer>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.955",
+    "version": "5.0.0-beta.965",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "00981f69e59d945c814c16588bf3da8ed0fbf622"
+    "gitHead": "3d17e9e2dd344cc77c2e96e4db2ac6c03c76b2f3"
 }