@chayns-components/core 5.0.0-beta.1325 → 5.0.0-beta.1327

package/lib/cjs/components/grouped-image/GroupedImage.js

@@ -6,44 +6,66 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _GroupedImage = require("./GroupedImage.styles");
+var _CareOfClipPath = _interopRequireDefault(require("./clip-paths/CareOfClipPath"));
+var _uuid = require("../../hooks/uuid");
+var _SecondImageClipPath = _interopRequireDefault(require("./clip-paths/SecondImageClipPath"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const GroupedImage = ({
   cornerImage,
-  height = '40px',
+  height = 40,
   imageBackground,
   images,
   onClick,
   shouldPreventBackground = false,
   shouldShowRoundImage = false,
-  cornerElement,
-  onImageError
+  cornerElement
 }) => {
   const hasCornerImage = Boolean(cornerImage);
   const hasCornerElement = Boolean(cornerElement);
   const hasMultipleImages = images.length > 1;
+  const uuid = (0, _uuid.useUuid)();
   const imageSize = (0, _react.useMemo)(() => {
     if (hasCornerImage) {
       return hasMultipleImages ? _GroupedImage.ImageSize.GroupedSmall : _GroupedImage.ImageSize.Small;
     }
     return hasMultipleImages ? _GroupedImage.ImageSize.Grouped : _GroupedImage.ImageSize.Full;
   }, [hasCornerImage, hasMultipleImages]);
-  const imageElements = images.slice(0, 2) // Limit to 2 images for grouping
-  .map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupImageElement, {
+  const imageElements = images.slice(0, 2).map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupImageElement, {
     $background: imageBackground,
     $imageSize: imageSize,
     $isSecondImage: index === 1,
+    $hasCornerImage: hasCornerImage,
+    $hasMultipleImages: hasMultipleImages,
     $shouldPreventBackground: shouldPreventBackground,
-    $shouldShowRoundImage: shouldShowRoundImage
+    $shouldShowRoundImage: shouldShowRoundImage,
+    $uuid: uuid
     // eslint-disable-next-line react/no-array-index-key
     ,
-    key: index,
-    src: src,
-    onError: event => typeof onImageError === 'function' && onImageError(event, index)
-  }));
+    key: index
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 40 40",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid slice"
+  }, /*#__PURE__*/_react.default.createElement("image", {
+    href: src,
+    width: "40",
+    height: "40"
+  }))));
   return /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupedImage, {
     onClick: onClick,
     $height: height
-  }, imageElements, hasCornerImage && /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledCornerImage, {
+  }, hasCornerImage && /*#__PURE__*/_react.default.createElement(_CareOfClipPath.default, {
+    imageHeight: !hasMultipleImages ? height : height * 0.8,
+    containerHeight: height,
+    uuid: uuid
+  }), hasMultipleImages && /*#__PURE__*/_react.default.createElement(_SecondImageClipPath.default, {
+    containerHeight: height,
+    uuid: uuid,
+    shouldShowRoundImage: shouldShowRoundImage
+  }), imageElements, hasCornerImage && /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledCornerImage, {
     $background: imageBackground,
     $shouldPreventBackground: shouldPreventBackground,
     src: cornerImage,

package/lib/cjs/components/grouped-image/GroupedImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","imageSize","useMemo","ImageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","StyledGroupImageElement","$background","$imageSize","$isSecondImage","$shouldPreventBackground","$shouldShowRoundImage","key","onError","event","StyledGroupedImage","$height","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    useMemo,\n} from 'react';\nimport {\n    ImageSize,\n    StyledCornerElement,\n    StyledCornerImage,\n    StyledGroupedImage,\n    StyledGroupImageElement,\n} from './GroupedImage.styles';\n\ntype GroupedImageProps = {\n    /**\n     * Optional image to display in the bottom right corner of the grouped image.\n     */\n    cornerImage?: string;\n    /**\n     * Height of the grouped image container.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * Background for the single images.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n     */\n    images: string[];\n    /**\n     * Optional click handler for the grouped image.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Whether to prevent the background of the images from being set.\n     */\n    shouldPreventBackground?: boolean;\n    /**\n     * Whether to show the images in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Optional Element to display in the right corner of the image\n     */\n    cornerElement?: ReactNode;\n    /**\n     * Optional handler for image load errors.\n     */\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n    cornerImage,\n    height = '40px',\n    imageBackground,\n    images,\n    onClick,\n    shouldPreventBackground = false,\n    shouldShowRoundImage = false,\n    cornerElement,\n    onImageError,\n}) => {\n    const hasCornerImage = Boolean(cornerImage);\n    const hasCornerElement = Boolean(cornerElement);\n    const hasMultipleImages = images.length > 1;\n\n    const imageSize = useMemo(() => {\n        if (hasCornerImage) {\n            return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;\n        }\n\n        return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;\n    }, [hasCornerImage, hasMultipleImages]);\n\n    const imageElements = images\n        .slice(0, 2) // Limit to 2 images for grouping\n        .map((src, index) => (\n            <StyledGroupImageElement\n                $background={imageBackground}\n                $imageSize={imageSize}\n                $isSecondImage={index === 1}\n                $shouldPreventBackground={shouldPreventBackground}\n                $shouldShowRoundImage={shouldShowRoundImage}\n                // eslint-disable-next-line react/no-array-index-key\n                key={index}\n                src={src}\n                onError={(event) =>\n                    typeof onImageError === 'function' && onImageError(event, index)\n                }\n            />\n        ));\n\n    return (\n        <StyledGroupedImage onClick={onClick} $height={height}>\n            {imageElements}\n            {hasCornerImage && (\n                <StyledCornerImage\n                    $background={imageBackground}\n                    $shouldPreventBackground={shouldPreventBackground}\n                    src={cornerImage}\n                    key=\"corner-image\"\n                />\n            )}\n            {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n        </StyledGroupedImage>\n    );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireWildcard","require","_GroupedImage","_CareOfClipPath","_interopRequireDefault","_uuid","_SecondImageClipPath","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","useUuid","imageSize","useMemo","ImageSize","GroupedSmall","Small","Grouped","Full","imageElements","slice","map","src","index","createElement","StyledGroupImageElement","$background","$imageSize","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","href","StyledGroupedImage","$height","imageHeight","containerHeight","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, useMemo } from 'react';\nimport {\n    ImageSize,\n    StyledCornerElement,\n    StyledCornerImage,\n    StyledGroupedImage,\n    StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\ntype GroupedImageProps = {\n    cornerImage?: string;\n    height?: number;\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    shouldPreventBackground?: boolean;\n    shouldShowRoundImage?: boolean;\n    cornerElement?: ReactNode;\n};\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n    cornerImage,\n    height = 40,\n    imageBackground,\n    images,\n    onClick,\n    shouldPreventBackground = false,\n    shouldShowRoundImage = false,\n    cornerElement,\n}) => {\n    const hasCornerImage = Boolean(cornerImage);\n    const hasCornerElement = Boolean(cornerElement);\n    const hasMultipleImages = images.length > 1;\n    const uuid = useUuid();\n\n    const imageSize = useMemo(() => {\n        if (hasCornerImage) {\n            return hasMultipleImages ? ImageSize.GroupedSmall : ImageSize.Small;\n        }\n\n        return hasMultipleImages ? ImageSize.Grouped : ImageSize.Full;\n    }, [hasCornerImage, hasMultipleImages]);\n\n    const imageElements = images.slice(0, 2).map((src, index) => (\n        <StyledGroupImageElement\n            $background={imageBackground}\n            $imageSize={imageSize}\n            $isSecondImage={index === 1}\n            $hasCornerImage={hasCornerImage}\n            $hasMultipleImages={hasMultipleImages}\n            $shouldPreventBackground={shouldPreventBackground}\n            $shouldShowRoundImage={shouldShowRoundImage}\n            $uuid={uuid}\n            // eslint-disable-next-line react/no-array-index-key\n            key={index}\n        >\n            <svg\n                width=\"100%\"\n                height=\"100%\"\n                viewBox=\"0 0 40 40\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                preserveAspectRatio=\"xMidYMid slice\"\n            >\n                <image href={src} width=\"40\" height=\"40\" />\n            </svg>\n        </StyledGroupImageElement>\n    ));\n\n    return (\n        <StyledGroupedImage onClick={onClick} $height={height}>\n            {hasCornerImage && (\n                <CareOfClipPath\n                    imageHeight={!hasMultipleImages ? height : height * 0.8}\n                    containerHeight={height}\n                    uuid={uuid}\n                />\n            )}\n            {hasMultipleImages && (\n                <SecondImageClipPath\n                    containerHeight={height}\n                    uuid={uuid}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                />\n            )}\n\n            {imageElements}\n\n            {hasCornerImage && (\n                <StyledCornerImage\n                    $background={imageBackground}\n                    $shouldPreventBackground={shouldPreventBackground}\n                    src={cornerImage}\n                    key=\"corner-image\"\n                />\n            )}\n            {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n        </StyledGroupedImage>\n    );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grouped-image/GroupedImage.styles.js

@@ -10,20 +10,20 @@ const StyledGroupedImage = exports.StyledGroupedImage = _styledComponents.defaul
     flex: 0 0 auto;
     height: ${({
   $height
-}) => $height};
+}) => $height}px;
     position: relative;
     width: ${({
   $height
-}) => $height};
+}) => $height}px;
 `;
 let ImageSize = exports.ImageSize = /*#__PURE__*/function (ImageSize) {
   ImageSize["Full"] = "100%";
-  ImageSize["Small"] = "75%";
+  ImageSize["Small"] = "100%";
   ImageSize["Grouped"] = "80%";
-  ImageSize["GroupedSmall"] = "65%";
+  ImageSize["GroupedSmall"] = "80%";
   return ImageSize;
 }({});
-const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.img`
+const StyledGroupImageElement = exports.StyledGroupImageElement = _styledComponents.default.div`
     aspect-ratio: 1;
     border-radius: ${({
   $shouldShowRoundImage
@@ -31,20 +31,38 @@ const StyledGroupImageElement = exports.StyledGroupImageElement = _styledCompone
     height: ${({
   $imageSize
 }) => $imageSize};
-    object-fit: cover;
     position: absolute;
+    overflow: hidden;
 
     ${({
-  $imageSize,
   $isSecondImage
 }) => $isSecondImage ? (0, _styledComponents.css)`
-                  bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
-                  right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
+                  bottom: 0;
+                  right: 0;
               ` : (0, _styledComponents.css)`
                   top: 0;
                   left: 0;
               `}
 
+    ${({
+  $isSecondImage,
+  $hasMultipleImages,
+  $hasCornerImage,
+  $uuid
+}) => {
+  if ($isSecondImage && $hasCornerImage || !$isSecondImage && !$hasMultipleImages && $hasCornerImage) {
+    return (0, _styledComponents.css)`
+                clip-path: url(${`#care-of-mask--${$uuid}`});
+            `;
+  }
+  if (!$isSecondImage && $hasMultipleImages) {
+    return (0, _styledComponents.css)`
+                clip-path: url(${`#second-image-mask--${$uuid}`});
+            `;
+  }
+  return '';
+}}
+
     ${({
   $background,
   $shouldPreventBackground,
@@ -57,7 +75,7 @@ const StyledGroupImageElement = exports.StyledGroupImageElement = _styledCompone
 const StyledCornerImage = exports.StyledCornerImage = _styledComponents.default.img`
     aspect-ratio: 1;
     bottom: 0;
-    height: 50%;
+    height: 35%;
     position: absolute;
     right: 0;
 

package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","ImageSize","StyledGroupImageElement","img","$shouldShowRoundImage","$imageSize","$isSecondImage","css","GroupedSmall","$background","$shouldPreventBackground","theme","StyledCornerImage","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height};\n    position: relative;\n    width: ${({ $height }) => $height};\n`;\n\nexport enum ImageSize {\n    Full = '100%',\n    Small = '75%',\n    Grouped = '80%',\n    GroupedSmall = '65%',\n}\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $imageSize: ImageSize;\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledGroupImageElement = styled.img<StyledImageProps>`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    height: ${({ $imageSize }) => $imageSize};\n    object-fit: cover;\n    position: absolute;\n\n    ${({ $imageSize, $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n                  right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: 50%;\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GroupedImage.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGroupedImage","exports","styled","div","$height","ImageSize","StyledGroupImageElement","$shouldShowRoundImage","$imageSize","$isSecondImage","css","$hasMultipleImages","$hasCornerImage","$uuid","$background","$shouldPreventBackground","theme","StyledCornerImage","img","StyledCornerElement","span"],"sources":["../../../../src/components/grouped-image/GroupedImage.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { CSSProperties } from 'react';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGroupedImageProps = WithTheme<{\n    $height: CSSProperties['height'];\n}>;\n\nexport const StyledGroupedImage = styled.div<StyledGroupedImageProps>`\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    position: relative;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport enum ImageSize {\n    Full = '100%',\n    Small = '100%',\n    Grouped = '80%',\n    GroupedSmall = '80%',\n}\n\ntype StyledImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $imageSize: ImageSize;\n    $isSecondImage?: boolean;\n    $shouldPreventBackground?: boolean;\n    $shouldShowRoundImage?: boolean;\n    $hasCornerImage: boolean;\n    $hasMultipleImages: boolean;\n    $uuid: string;\n}>;\n\nexport const StyledGroupImageElement = styled.div<StyledImageProps>`\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : '0')};\n    height: ${({ $imageSize }) => $imageSize};\n    position: absolute;\n    overflow: hidden;\n\n    ${({ $isSecondImage }) =>\n        $isSecondImage\n            ? css`\n                  bottom: 0;\n                  right: 0;\n              `\n            : css`\n                  top: 0;\n                  left: 0;\n              `}\n\n    ${({ $isSecondImage, $hasMultipleImages, $hasCornerImage, $uuid }) => {\n        if (\n            ($isSecondImage && $hasCornerImage) ||\n            (!$isSecondImage && !$hasMultipleImages && $hasCornerImage)\n        ) {\n            return css`\n                clip-path: url(${`#care-of-mask--${$uuid}`});\n            `;\n        }\n\n        if (!$isSecondImage && $hasMultipleImages) {\n            return css`\n                clip-path: url(${`#second-image-mask--${$uuid}`});\n            `;\n        }\n\n        return '';\n    }}\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\ntype StyledCornerImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldPreventBackground?: boolean;\n}>;\n\nexport const StyledCornerImage = styled.img<StyledCornerImageProps>`\n    aspect-ratio: 1;\n    bottom: 0;\n    height: 35%;\n    position: absolute;\n    right: 0;\n\n    ${({ $background, $shouldPreventBackground, theme }) =>\n        !$shouldPreventBackground &&\n        css`\n            background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n            box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;\n        `}\n`;\n\nexport const StyledCornerElement = styled.span`\n    height: 18px;\n    width: 18px;\n    position: absolute;\n    bottom: 0;\n    right: -5px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    & > * {\n        max-height: 100%;\n        max-width: 100%;\n        display: block;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grouped-image/clip-paths/CareOfClipPath.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _groupedImage = require("../../../utils/groupedImage");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CareOfClipPath = ({
+  imageHeight,
+  containerHeight,
+  uuid
+}) => {
+  const d = (0, _react.useMemo)(() => (0, _groupedImage.createCareOfClipPath)({
+    imageHeight,
+    containerHeight
+  }), [containerHeight, imageHeight]);
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "0",
+    height: "0",
+    style: {
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
+    id: `care-of-mask--${uuid}`,
+    clipPathUnits: "objectBoundingBox"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: d
+  }))));
+};
+CareOfClipPath.dsiplayName = 'CareOfClipPath';
+var _default = exports.default = CareOfClipPath;
+//# sourceMappingURL=CareOfClipPath.js.map

package/lib/cjs/components/grouped-image/clip-paths/CareOfClipPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CareOfClipPath.js","names":["_react","_interopRequireWildcard","require","_groupedImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CareOfClipPath","imageHeight","containerHeight","uuid","d","useMemo","createCareOfClipPath","createElement","width","height","style","position","id","clipPathUnits","dsiplayName","_default","exports"],"sources":["../../../../../src/components/grouped-image/clip-paths/CareOfClipPath.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { createCareOfClipPath } from '../../../utils/groupedImage';\n\nconst CareOfClipPath = ({\n    imageHeight,\n    containerHeight,\n    uuid,\n}: {\n    imageHeight: number;\n    containerHeight: number;\n    uuid: string;\n}) => {\n    const d = useMemo(\n        () => createCareOfClipPath({ imageHeight, containerHeight }),\n        [containerHeight, imageHeight],\n    );\n\n    return (\n        <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n                <clipPath id={`care-of-mask--${uuid}`} clipPathUnits=\"objectBoundingBox\">\n                    <path d={d} />\n                </clipPath>\n            </defs>\n        </svg>\n    );\n};\n\nCareOfClipPath.dsiplayName = 'CareOfClipPath';\n\nexport default CareOfClipPath;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAAmE,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEnE,MAAMkB,cAAc,GAAGA,CAAC;EACpBC,WAAW;EACXC,eAAe;EACfC;AAKJ,CAAC,KAAK;EACF,MAAMC,CAAC,GAAG,IAAAC,cAAO,EACb,MAAM,IAAAC,kCAAoB,EAAC;IAAEL,WAAW;IAAEC;EAAgB,CAAC,CAAC,EAC5D,CAACA,eAAe,EAAED,WAAW,CACjC,CAAC;EAED,oBACIxB,MAAA,CAAAc,OAAA,CAAAgB,aAAA;IAAKC,KAAK,EAAC,GAAG;IAACC,MAAM,EAAC,GAAG;IAACC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAW;EAAE,gBACtDlC,MAAA,CAAAc,OAAA,CAAAgB,aAAA,4BACI9B,MAAA,CAAAc,OAAA,CAAAgB,aAAA;IAAUK,EAAE,EAAE,iBAAiBT,IAAI,EAAG;IAACU,aAAa,EAAC;EAAmB,gBACpEpC,MAAA,CAAAc,OAAA,CAAAgB,aAAA;IAAMH,CAAC,EAAEA;EAAE,CAAE,CACP,CACR,CACL,CAAC;AAEd,CAAC;AAEDJ,cAAc,CAACc,WAAW,GAAG,gBAAgB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAzB,OAAA,GAE/BS,cAAc","ignoreList":[]}

package/lib/cjs/components/grouped-image/clip-paths/SecondImageClipPath.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _groupedImage = require("../../../utils/groupedImage");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SecondImageClipPath = ({
+  containerHeight,
+  uuid,
+  shouldShowRoundImage
+}) => {
+  const d = (0, _react.useMemo)(() => (0, _groupedImage.createSecondImageClipPath)({
+    containerHeight,
+    shouldShowRoundImage
+  }), [containerHeight, shouldShowRoundImage]);
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "0",
+    height: "0",
+    style: {
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
+    id: `second-image-mask--${uuid}`,
+    clipPathUnits: "objectBoundingBox"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: d
+  }))));
+};
+SecondImageClipPath.dsiplayName = 'SecondImageClipPath';
+var _default = exports.default = SecondImageClipPath;
+//# sourceMappingURL=SecondImageClipPath.js.map

package/lib/cjs/components/grouped-image/clip-paths/SecondImageClipPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondImageClipPath.js","names":["_react","_interopRequireWildcard","require","_groupedImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SecondImageClipPath","containerHeight","uuid","shouldShowRoundImage","d","useMemo","createSecondImageClipPath","createElement","width","height","style","position","id","clipPathUnits","dsiplayName","_default","exports"],"sources":["../../../../../src/components/grouped-image/clip-paths/SecondImageClipPath.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { createSecondImageClipPath } from '../../../utils/groupedImage';\n\nconst SecondImageClipPath = ({\n    containerHeight,\n    uuid,\n    shouldShowRoundImage,\n}: {\n    containerHeight: number;\n    uuid: string;\n    shouldShowRoundImage: boolean;\n}) => {\n    const d = useMemo(\n        () => createSecondImageClipPath({ containerHeight, shouldShowRoundImage }),\n        [containerHeight, shouldShowRoundImage],\n    );\n\n    return (\n        <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n                <clipPath id={`second-image-mask--${uuid}`} clipPathUnits=\"objectBoundingBox\">\n                    <path d={d} />\n                </clipPath>\n            </defs>\n        </svg>\n    );\n};\n\nSecondImageClipPath.dsiplayName = 'SecondImageClipPath';\n\nexport default SecondImageClipPath;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAAwE,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAExE,MAAMkB,mBAAmB,GAAGA,CAAC;EACzBC,eAAe;EACfC,IAAI;EACJC;AAKJ,CAAC,KAAK;EACF,MAAMC,CAAC,GAAG,IAAAC,cAAO,EACb,MAAM,IAAAC,uCAAyB,EAAC;IAAEL,eAAe;IAAEE;EAAqB,CAAC,CAAC,EAC1E,CAACF,eAAe,EAAEE,oBAAoB,CAC1C,CAAC;EAED,oBACI1B,MAAA,CAAAc,OAAA,CAAAgB,aAAA;IAAKC,KAAK,EAAC,GAAG;IAACC,MAAM,EAAC,GAAG;IAACC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAW;EAAE,gBACtDlC,MAAA,CAAAc,OAAA,CAAAgB,aAAA,4BACI9B,MAAA,CAAAc,OAAA,CAAAgB,aAAA;IAAUK,EAAE,EAAE,sBAAsBV,IAAI,EAAG;IAACW,aAAa,EAAC;EAAmB,gBACzEpC,MAAA,CAAAc,OAAA,CAAAgB,aAAA;IAAMH,CAAC,EAAEA;EAAE,CAAE,CACP,CACR,CACL,CAAC;AAEd,CAAC;AAEDJ,mBAAmB,CAACc,WAAW,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAzB,OAAA,GAEzCS,mBAAmB","ignoreList":[]}

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

@@ -17,7 +17,7 @@ var _Tooltip = _interopRequireDefault(require("../../tooltip/Tooltip"));
 var _list = require("../../../constants/list");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const ListItem = ({
+const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
   backgroundColor,
   careOfLocationId,
   children,
@@ -51,9 +51,8 @@ const ListItem = ({
   title,
   titleElement,
   shouldDisableAnimation = false,
-  cornerElement,
-  onImageError
-}) => {
+  cornerElement
+}, ref) => {
   const {
     incrementExpandableItemCount,
     isAnyItemExpandable,
@@ -73,6 +72,7 @@ const ListItem = ({
   const onCloseRef = (0, _react2.useRef)(onClose);
   const onOpenRef = (0, _react2.useRef)(onOpen);
   const [shouldEnableTooltip, setShouldEnableTooltip] = (0, _react2.useState)(false);
+  const [titleWidth, setTitleWidth] = (0, _react2.useState)(0);
   (0, _react2.useEffect)(() => {
     onCloseRef.current = onClose;
     onOpenRef.current = onOpen;
@@ -112,6 +112,12 @@ const ListItem = ({
     }
   }, [isDefaultOpen, updateOpenItemUuid, uuid]);
   const isClickable = typeof onClick === 'function' || isExpandable;
+  (0, _react2.useImperativeHandle)(ref, () => ({
+    titleWidth
+  }), [titleWidth]);
+  const handleTitleWidthChange = width => {
+    setTitleWidth(width);
+  };
   const headContent = (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_ListItemHead.default, {
     hoverItem: hoverItem,
     careOfLocationId: careOfLocationId,
@@ -135,11 +141,11 @@ const ListItem = ({
     shouldShowRoundImageOrIcon: shouldShowRoundImageOrIcon,
     subtitle: subtitle,
     title: title,
+    onTitleWidthChange: handleTitleWidthChange,
     titleElement: titleElement,
     setShouldEnableTooltip: setShouldEnableTooltip,
-    shouldDisableAnimation: shouldDisableAnimation,
-    onImageError: onImageError
-  }), [hoverItem, careOfLocationId, cornerElement, cornerImage, icons, imageBackground, images, isAnyItemExpandable, isExpandable, isItemOpen, isTitleGreyed, leftElements, isClickable, handleHeadClick, onLongPress, shouldForceHover, rightElements, shouldHideImageOrIconBackground, shouldHideIndicator, shouldOpenImageOnClick, shouldShowRoundImageOrIcon, subtitle, title, titleElement, shouldDisableAnimation, onImageError]);
+    shouldDisableAnimation: shouldDisableAnimation
+  }), [hoverItem, careOfLocationId, cornerElement, cornerImage, icons, imageBackground, images, isAnyItemExpandable, isExpandable, isItemOpen, isTitleGreyed, leftElements, isClickable, handleHeadClick, onLongPress, shouldForceHover, rightElements, shouldHideImageOrIconBackground, shouldHideIndicator, shouldOpenImageOnClick, shouldShowRoundImageOrIcon, subtitle, title, titleElement, shouldDisableAnimation]);
   return /*#__PURE__*/_react2.default.createElement(_ListItem.StyledListItem, {
     as: shouldDisableAnimation ? undefined : _react.motion[_list.LIST_ITEM_HTML_TAG],
     animate: shouldDisableAnimation ? undefined : {
@@ -185,7 +191,7 @@ const ListItem = ({
     key: `listItemBody-${uuid}`,
     shouldHideBody: shouldRenderClosed && !isItemOpen
   }, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.default, null, children))));
-};
+});
 ListItem.displayName = 'ListItem';
 var _default = exports.default = ListItem;
 //# sourceMappingURL=ListItem.js.map

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

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

@@ -42,7 +42,7 @@ const ListItemHead = ({
   setShouldEnableTooltip,
   shouldDisableAnimation = false,
   cornerElement,
-  onImageError
+  onTitleWidthChange
 }) => {
   const [shouldShowHoverItem, setShouldShowHoverItem] = (0, _react2.useState)(false);
   const longPressTimeoutRef = (0, _react2.useRef)();
@@ -55,14 +55,15 @@ const ListItemHead = ({
     }, 200);
   }, []);
   const handleShowTooltipResize = (0, _react2.useCallback)(entries => {
-    var _entries$;
+    var _entries$, _entries$2;
+    onTitleWidthChange(((_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target.clientWidth) ?? 0);
     if (resizeSkipRef.current) {
       return;
     }
-    const el = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target;
+    const el = (_entries$2 = entries[0]) === null || _entries$2 === void 0 ? void 0 : _entries$2.target;
     if (!el) return;
     setShouldEnableTooltip(el.scrollWidth > el.clientWidth);
-  }, [setShouldEnableTooltip]);
+  }, [onTitleWidthChange, setShouldEnableTooltip]);
   const handleMouseEnter = (0, _react2.useCallback)(() => setShouldShowHoverItem(true), []);
   const handleMouseLeave = (0, _react2.useCallback)(() => setShouldShowHoverItem(false), []);
   const handleTouchStart = (0, _react2.useCallback)(event => {
@@ -92,12 +93,11 @@ const ListItemHead = ({
         images: images,
         shouldOpenImageOnClick: shouldOpenImageOnClick,
         shouldHideBackground: !!shouldHideImageOrIconBackground,
-        shouldShowRoundImage: !!shouldShowRoundImageOrIcon,
-        onImageError: onImageError
+        shouldShowRoundImage: !!shouldShowRoundImageOrIcon
       });
     }
     return undefined;
-  }, [careOfLocationId, cornerElement, cornerImage, icons, imageBackground, images, onImageError, shouldHideImageOrIconBackground, shouldOpenImageOnClick, shouldShowRoundImageOrIcon]);
+  }, [careOfLocationId, cornerElement, cornerImage, icons, imageBackground, images, shouldHideImageOrIconBackground, shouldOpenImageOnClick, shouldShowRoundImageOrIcon]);
   return /*#__PURE__*/_react2.default.createElement(_ListItemHead.StyledListItemHead, {
     as: shouldDisableAnimation ? undefined : _react.motion[_list.LIST_ITEM_HEAD_HTML_TAG],
     animate: shouldDisableAnimation ? undefined : {