npm - @chayns-components/core - Versions diffs - 5.4.14 → 5.4.16 - Mend

@chayns-components/core 5.4.14 → 5.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/AGENTS.md CHANGED Viewed

@@ -2992,6 +2992,12 @@ import { List, ListItem } from '@chayns-components/core';
 </List>
 ```
+#### List Item With Title Input
+```tsx
+<List />
+```
 ### Props
 No prop documentation available.

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

@@ -10,6 +10,33 @@ var _CareOfClipPath = _interopRequireDefault(require("./clip-paths/CareOfClipPat
 var _uuid = require("../../hooks/uuid");
 var _SecondImageClipPath = _interopRequireDefault(require("./clip-paths/SecondImageClipPath"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';
+const IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\d+)$/i;
+const getGroupedImageDisplayUrl = (url, size) => {
+  try {
+    const urlObject = new URL(url);
+    if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {
+      return url;
+    }
+    const pathSegments = urlObject.pathname.split('/');
+    const fileName = pathSegments.pop();
+    if (!fileName) {
+      return url;
+    }
+    const extensionIndex = fileName.lastIndexOf('.');
+    const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';
+    const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;
+    const parameterSegment = fileBaseName.split('_').pop();
+    const hasImageServiceParameters = Boolean(parameterSegment && parameterSegment !== fileBaseName && parameterSegment.split('-').every(parameter => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)));
+    const normalizedFileBaseName = hasImageServiceParameters ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_')) : fileBaseName;
+    const normalizedSize = Math.max(1, Math.round(size));
+    pathSegments.push(`${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);
+    urlObject.pathname = pathSegments.join('/');
+    return urlObject.toString();
+  } catch {
+    return url;
+  }
+};
 const GroupedImage = ({
   cornerImage,
   height = 40,
@@ -25,6 +52,7 @@ const GroupedImage = ({
   const hasCornerElement = Boolean(cornerElement);
   const hasMultipleImages = images.length > 1;
   const uuid = (0, _uuid.useUuid)();
+  const cornerImageDisplayUrl = cornerImage ? getGroupedImageDisplayUrl(cornerImage, height) : undefined;
   const imageElements = images.slice(0, 2).map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupImageElement, {
     $background: imageBackground,
     $isSecondImage: index === 1,
@@ -47,7 +75,7 @@ const GroupedImage = ({
     height: "40"
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: `image--${index}`,
-    src: src,
+    src: getGroupedImageDisplayUrl(src, height),
     onError: event => typeof onImageError === 'function' && onImageError(event, index)
   })))));
   return /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupedImage, {
@@ -65,7 +93,7 @@ const GroupedImage = ({
     $background: imageBackground,
     $shouldPreventBackground: shouldPreventBackground,
     $hasMultipleImages: hasMultipleImages,
-    src: cornerImage,
+    src: cornerImageDisplayUrl,
     key: "corner-image"
   }), hasCornerElement && /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledCornerElement, null, cornerElement));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireDefault","require","_GroupedImage","_CareOfClipPath","_uuid","_SecondImageClipPath","e","__esModule","default","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","useUuid","imageElements","slice","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","StyledGroupedImage","$height","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\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\ninterface 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?: number;\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 = 40,\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 const uuid = useUuid();\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\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 <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={src}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\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":[]}
1	+ {"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireDefault","require","_GroupedImage","_CareOfClipPath","_uuid","_SecondImageClipPath","e","__esModule","default","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedFileBaseName","normalizedSize","Math","max","round","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","useUuid","cornerImageDisplayUrl","undefined","imageElements","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","StyledGroupedImage","$height","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\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\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale\|crop\|shortedgescale)\|[whsbd]\\d+)$/i;\n\ninterface 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?: number;\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 getGroupedImageDisplayUrl = (url: string, size: number): string => {\n try {\n const urlObject = new URL(url);\n\n if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n return url;\n }\n\n const pathSegments = urlObject.pathname.split('/');\n const fileName = pathSegments.pop();\n\n if (!fileName) {\n return url;\n }\n\n const extensionIndex = fileName.lastIndexOf('.');\n const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n const parameterSegment = fileBaseName.split('_').pop();\n const hasImageServiceParameters = Boolean(\n parameterSegment &&\n parameterSegment !== fileBaseName &&\n parameterSegment\n .split('-')\n .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n );\n const normalizedFileBaseName = hasImageServiceParameters\n ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_'))\n : fileBaseName;\n const normalizedSize = Math.max(1, Math.round(size));\n\n pathSegments.push(\n `${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`,\n );\n urlObject.pathname = pathSegments.join('/');\n\n return urlObject.toString();\n } catch {\n return url;\n }\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 onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const cornerImageDisplayUrl = cornerImage\n ? getGroupedImageDisplayUrl(cornerImage, height)\n : undefined;\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\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 <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={getGroupedImageDisplayUrl(src, height)}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImageDisplayUrl}\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/list/list-item/ListItem.js CHANGED Viewed

@@ -51,7 +51,9 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
   title,
   onImageError,
   onSizeChange,
+  onTitleInputChange,
   titleElement,
+  titleInputProps,
   shouldDisableAnimation = false,
   cornerElement,
   isSelected = false
@@ -187,7 +189,9 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     shouldShowRoundImageOrIcon: shouldShowRoundImageOrIcon,
     subtitle: subtitle,
     title: title,
+    onTitleInputChange: onTitleInputChange,
     onTitleWidthChange: handleTitleWidthChange,
+    titleInputProps: titleInputProps,
     titleElement: titleElement,
     setShouldEnableTooltip: setShouldEnableTooltip,
     shouldDisableAnimation: shouldDisableAnimation,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_List","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_element","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","onImageError","onSizeChange","titleElement","shouldDisableAnimation","cornerElement","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","listItemRef","isInDialog","useIsInsideDialog","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","useImperativeHandle","handleTitleWidthChange","width","maxWidth","createElement","StyledListItem","as","motion","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","onTitleWidthChange","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 forwardRef,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\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 { useIsInsideDialog } from '../../../hooks/element';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\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 Whether the item is selected.\n /\n isSelected?: 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 Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Function to be executed if the size are changed.\n */\n onSizeChange?: (sizes: ListItemSize) => void;\n};\n\nexport type ListItemRef = ListItemSize;\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 onImageError,\n onSizeChange,\n titleElement,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n },\n ref,\n ) => {\n const { isAnyItemExpandable, isWrapped, openItemUuid, 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 isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\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 const [titleMaxWidth, setTitleMaxWidth] = 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 (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' \|\| isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\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 $isInDialog={isInDialog}\n $isSelected={isSelected}\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 <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 onImageError={onImageError}\n />\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":[]}
1	+ {"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_List","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_element","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","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","areaProvider","AreaContext","isInitialRenderRef","useRef","listItemRef","isInDialog","useIsInsideDialog","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","useState","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","useImperativeHandle","handleTitleWidthChange","width","maxWidth","createElement","StyledListItem","as","motion","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","StyledListItemTooltip","style","cursor","onTitleWidthChange","AnimatePresence","id","shouldHideBody","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport type { InputProps } from '../../input/Input';\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 { useIsInsideDialog } from '../../../hooks/element';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\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 Whether the item is selected.\n /\n isSelected?: 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 Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Function to be executed if the size are changed.\n /\n onSizeChange?: (sizes: ListItemSize) => void;\n /\n Function that is executed when the text of the title input changes.\n * When this function is given, the title is displayed as an input.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n The props of the title input.\n */\n titleInputProps?: InputProps;\n};\n\nexport type ListItemRef = ListItemSize;\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 onImageError,\n onSizeChange,\n onTitleInputChange,\n titleElement,\n titleInputProps,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n },\n ref,\n ) => {\n const { isAnyItemExpandable, isWrapped, openItemUuid, 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 isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\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 const [titleMaxWidth, setTitleMaxWidth] = 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 (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' \|\| isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\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 $isInDialog={isInDialog}\n $isSelected={isSelected}\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 <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 onTitleInputChange={onTitleInputChange}\n onTitleWidthChange={handleTitleWidthChange}\n titleInputProps={titleInputProps}\n titleElement={titleElement}\n setShouldEnableTooltip={setShouldEnableTooltip}\n shouldDisableAnimation={shouldDisableAnimation}\n onImageError={onImageError}\n />\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 CHANGED Viewed

@@ -15,8 +15,11 @@ var _ListItemRightElement = _interopRequireDefault(require("./list-item-right-el
 var _styledComponents = require("styled-components");
 var _Icon = require("../../../icon/Icon.styles");
 var _icon = require("../../../../utils/icon");
+var _Input = _interopRequireDefault(require("../../../input/Input"));
+var _AreaContextProvider = require("../../../area-provider/AreaContextProvider");
 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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ListItemHead = ({
   careOfLocationId,
   cornerImage,
@@ -44,7 +47,9 @@ const ListItemHead = ({
   shouldDisableAnimation = false,
   cornerElement,
   onTitleWidthChange,
-  onImageError
+  onImageError,
+  onTitleInputChange,
+  titleInputProps
 }) => {
   const [shouldShowHoverItem, setShouldShowHoverItem] = (0, _react2.useState)(false);
   const [titleMaxWidth, setTitleMaxWidth] = (0, _react2.useState)(0);
@@ -52,8 +57,10 @@ const ListItemHead = ({
   const longPressTimeoutRef = (0, _react2.useRef)();
   const resizeSkipRef = (0, _react2.useRef)(true);
   const theme = (0, _styledComponents.useTheme)();
-  const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string' || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
-  const shouldShowMultilineTitle = (0, _react2.useMemo)(() => !subtitle, [subtitle]);
+  const areaProvider = (0, _react2.useContext)(_AreaContextProvider.AreaContext);
+  const hasTitleInput = typeof onTitleInputChange === 'function';
+  const shouldShowSubtitleRow = !hasTitleInput && (subtitle || typeof subtitle === 'string') || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
+  const shouldShowMultilineTitle = (0, _react2.useMemo)(() => !subtitle && !hasTitleInput, [hasTitleInput, subtitle]);
   (0, _react2.useEffect)(() => {
     window.setTimeout(() => {
       resizeSkipRef.current = false;
@@ -87,6 +94,9 @@ const ListItemHead = ({
   const handleTitleWidthChange = (0, _react2.useCallback)(width => {
     setTitleMaxWidth(width);
   }, []);
+  const handleInputClick = (0, _react2.useCallback)(event => {
+    event.stopPropagation();
+  }, []);
   const iconOrImageElement = (0, _react2.useMemo)(() => {
     if (icons) {
       return /*#__PURE__*/_react2.default.createElement(_ListItemIcon.default, {
@@ -151,7 +161,21 @@ const ListItemHead = ({
   }, /*#__PURE__*/_react2.default.createElement(_react.LayoutGroup, null, /*#__PURE__*/_react2.default.createElement(_ListItemHead.StyledListItemHeadTitle, {
     as: shouldDisableAnimation ? undefined : _react.motion.div,
     layout: "position"
-  }, /*#__PURE__*/_react2.default.createElement(_ListItemTitle.default, {
+  }, hasTitleInput ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  _react2.default.createElement(_AreaContextProvider.AreaContext.Provider, {
+    value: {
+      ...areaProvider,
+      shouldChangeColor: true
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_ListItemHead.StyledListItemHeadTitleInputWrapper, {
+    onClick: handleInputClick
+  }, /*#__PURE__*/_react2.default.createElement(_Input.default
+  /* eslint-disable-next-line react/jsx-props-no-spreading */, _extends({}, titleInputProps, {
+    value: typeof title === 'string' ? title : undefined,
+    onChange: onTitleInputChange
+  })))) : /*#__PURE__*/_react2.default.createElement(_ListItemTitle.default, {
     title: title,
     titleElement: titleElement,
     isOpen: isOpen,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.js","names":["_react","require","_react2","_interopRequireWildcard","_ListItemIcon","_interopRequireDefault","_ListItemImage","_ListItemHead","_ListItemTitle","_ListItemSubtitle","_ListItemRightElement","_styledComponents","_Icon","_icon","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","shouldShowHoverItem","setShouldShowHoverItem","useState","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","useRef","resizeSkipRef","theme","useTheme","shouldShowSubtitleRow","shouldShowMultilineTitle","useMemo","useEffect","window","setTimeout","current","handleShowTooltipResize","useCallback","entries","_entries$","_entries$2","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","getIsExpandableIcon","accordionIcon","internalIconStyle","iconStyle","StyledUnicodeIcon","$icon","className","StyledListItemHead","as","motion","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$isOpen","LayoutGroup","StyledListItemHeadTitle","layout","onResize","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","marginLeft","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadIndicator,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadTitle,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n shouldDisableAnimation?: boolean;\n cornerElement?: ReactNode;\n onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n shouldDisableAnimation = false,\n cornerElement,\n onTitleWidthChange,\n onImageError,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n const [titleWidth, setTitleWidth] = useState(0);\n\n const longPressTimeoutRef = useRef<number>();\n const resizeSkipRef = useRef(true);\n\n const theme = useTheme() as Theme;\n\n const shouldShowSubtitleRow =\n subtitle \|\|\n typeof subtitle === 'string' \|\|\n (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n useEffect(() => {\n window.setTimeout(() => {\n resizeSkipRef.current = false;\n }, 200);\n }, []);\n\n useEffect(() => {\n onTitleWidthChange(titleWidth, titleMaxWidth);\n }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n if (resizeSkipRef.current) {\n return;\n }\n\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const handleTitleWidthChange = useCallback((width: number) => {\n setTitleMaxWidth(width);\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 cornerElement={cornerElement}\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n onImageError={onImageError}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerElement,\n cornerImage,\n icons,\n imageBackground,\n images,\n onImageError,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n const expandIcon = useMemo(() => {\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n }, [theme.accordionIcon, theme.iconStyle]);\n\n return (\n <StyledListItemHead\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={\n shouldDisableAnimation\n ? undefined\n : {\n opacity: isTitleGreyed ? 0.5 : 1,\n }\n }\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { 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 <StyledListItemHeadIndicator\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && expandIcon}\n </StyledListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <LayoutGroup>\n <StyledListItemHeadTitle\n as={shouldDisableAnimation ? undefined : motion.div}\n layout=\"position\"\n >\n <ListItemTitle\n title={title}\n titleElement={titleElement}\n isOpen={isOpen}\n shouldShowMultilineTitle={shouldShowMultilineTitle}\n rightElements={rightElements}\n onTitleWidthChange={handleTitleWidthChange}\n onResize={handleShowTooltipResize}\n />\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <ListItemSubtitle\n subtitle={subtitle}\n isOpen={isOpen}\n rightElements={rightElements}\n />\n </StyledListItemHeadSubtitle>\n )}\n </LayoutGroup>\n </StyledListItemHeadContent>\n <ListItemRightElement rightElements={rightElements} />\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover \|\| shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover \|\| shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover \|\| shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListItemHead.js","names":["_react","require","_react2","_interopRequireWildcard","_ListItemIcon","_interopRequireDefault","_ListItemImage","_ListItemHead","_ListItemTitle","_ListItemSubtitle","_ListItemRightElement","_styledComponents","_Icon","_icon","_Input","_AreaContextProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","onTitleInputChange","titleInputProps","shouldShowHoverItem","setShouldShowHoverItem","useState","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","useRef","resizeSkipRef","theme","useTheme","areaProvider","useContext","AreaContext","hasTitleInput","shouldShowSubtitleRow","shouldShowMultilineTitle","useMemo","useEffect","window","setTimeout","current","handleShowTooltipResize","useCallback","entries","_entries$","_entries$2","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","handleInputClick","stopPropagation","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","getIsExpandableIcon","accordionIcon","internalIconStyle","iconStyle","StyledUnicodeIcon","$icon","className","StyledListItemHead","as","motion","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$isOpen","LayoutGroup","StyledListItemHeadTitle","layout","Provider","value","shouldChangeColor","StyledListItemHeadTitleInputWrapper","onChange","onResize","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","marginLeft","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n ChangeEventHandler,\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 type { IListItemRightElements } from '../../../../types/list';\nimport type { InputProps } from '../../../input/Input';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadIndicator,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleInputWrapper,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\nimport Input from '../../../input/Input';\nimport { AreaContext } from '../../../area-provider/AreaContextProvider';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n shouldDisableAnimation?: boolean;\n cornerElement?: ReactNode;\n onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n shouldDisableAnimation = false,\n cornerElement,\n onTitleWidthChange,\n onImageError,\n onTitleInputChange,\n titleInputProps,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n const [titleWidth, setTitleWidth] = useState(0);\n\n const longPressTimeoutRef = useRef<number>();\n const resizeSkipRef = useRef(true);\n\n const theme = useTheme() as Theme;\n const areaProvider = useContext(AreaContext);\n\n const hasTitleInput = typeof onTitleInputChange === 'function';\n\n const shouldShowSubtitleRow =\n (!hasTitleInput && (subtitle \|\| typeof subtitle === 'string')) \|\|\n (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n const shouldShowMultilineTitle = useMemo(\n () => !subtitle && !hasTitleInput,\n [hasTitleInput, subtitle],\n );\n\n useEffect(() => {\n window.setTimeout(() => {\n resizeSkipRef.current = false;\n }, 200);\n }, []);\n\n useEffect(() => {\n onTitleWidthChange(titleWidth, titleMaxWidth);\n }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n if (resizeSkipRef.current) {\n return;\n }\n\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const handleTitleWidthChange = useCallback((width: number) => {\n setTitleMaxWidth(width);\n }, []);\n\n const handleInputClick = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {\n event.stopPropagation();\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 cornerElement={cornerElement}\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n onImageError={onImageError}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerElement,\n cornerImage,\n icons,\n imageBackground,\n images,\n onImageError,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n const expandIcon = useMemo(() => {\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n }, [theme.accordionIcon, theme.iconStyle]);\n\n return (\n <StyledListItemHead\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={\n shouldDisableAnimation\n ? undefined\n : {\n opacity: isTitleGreyed ? 0.5 : 1,\n }\n }\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { 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 <StyledListItemHeadIndicator\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && expandIcon}\n </StyledListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <LayoutGroup>\n <StyledListItemHeadTitle\n as={shouldDisableAnimation ? undefined : motion.div}\n layout=\"position\"\n >\n {hasTitleInput ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider\n value={{ ...areaProvider, shouldChangeColor: true }}\n >\n <StyledListItemHeadTitleInputWrapper onClick={handleInputClick}>\n <Input\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...titleInputProps}\n value={typeof title === 'string' ? title : undefined}\n onChange={onTitleInputChange}\n />\n </StyledListItemHeadTitleInputWrapper>\n </AreaContext.Provider>\n ) : (\n <ListItemTitle\n title={title}\n titleElement={titleElement}\n isOpen={isOpen}\n shouldShowMultilineTitle={shouldShowMultilineTitle}\n rightElements={rightElements}\n onTitleWidthChange={handleTitleWidthChange}\n onResize={handleShowTooltipResize}\n />\n )}\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <ListItemSubtitle\n subtitle={subtitle}\n isOpen={isOpen}\n rightElements={rightElements}\n />\n </StyledListItemHeadSubtitle>\n )}\n </LayoutGroup>\n </StyledListItemHeadContent>\n <ListItemRightElement rightElements={rightElements} />\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover \|\| shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover \|\| shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover \|\| shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionListItemHeadHoverItemWrapper = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTitleContent = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadLeftWrapper = exports.StyledListItemHeadIndicator = exports.StyledListItemHeadContent = exports.StyledListItemHead = void 0;
+exports.StyledMotionListItemHeadHoverItemWrapper = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTitleInputWrapper = exports.StyledListItemHeadTitleContent = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadLeftWrapper = exports.StyledListItemHeadIndicator = exports.StyledListItemHeadContent = exports.StyledListItemHead = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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); }
@@ -61,6 +61,9 @@ const StyledListItemHeadTitle = exports.StyledListItemHeadTitle = _styledCompone
     display: flex;
     justify-content: space-between;
 `;
+const StyledListItemHeadTitleInputWrapper = exports.StyledListItemHeadTitleInputWrapper = _styledComponents.default.div`
+    width: 100%;
+`;
 const StyledListItemHeadTitleContent = exports.StyledListItemHeadTitleContent = _styledComponents.default.div`
     align-items: center;
     display: flex;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItemHead","exports","styled","div","theme","text","$isClickable","$isAnyItemExpandable","css","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","motion","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = HTMLMotionProps<'div'> & {\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n};\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps & { theme: Theme }) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n position: relative;\n width: 100%;\n justify-content: center;\n cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\ntype StyledListItemHeadIndicatorProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadIndicator = styled.div<StyledListItemHeadIndicatorProps>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\ntype StyledListItemHeadTitleProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadTitle = styled.div<StyledListItemHeadTitleProps>`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledMotionListItemHeadHoverItemWrapperProps = {\n theme: Theme;\n};\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,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;AAQzC,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA,aAAa,CAAC;EAAEC;AAAkD,CAAC,KAAKA,KAAK,CAACC,IAAI;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAa,CAAC,KAAMA,YAAY,GAAG,SAAS,GAAG,SAAU;AAC1E;AACA,MAAM,CAAC;EAAEC;AAAqB,CAAC,KACvB,CAACA,oBAAoB,IACrB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAGP,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAIM,MAAMO,2BAA2B,GAAAT,OAAA,CAAAS,2BAAA,GAAGR,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMQ,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACC,GAAmC;AACnF;AACA;AACA;AACA,mBAAmB,CAAC;EAAES;AAAQ,CAAC,KAAMA,OAAO,GAAG,MAAM,GAAG,QAAS;AACjE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAGC,SAAU;AAC1F;AACA,CAAC;AAIM,MAAMC,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAGb,yBAAM,CAACC,GAAiC;AAC/E;AACA;AACA;AACA,CAAC;AAEM,MAAMa,~~8BAA8B~~,GAAAf,OAAA,CAAAe,~~8BAAA~~,GAAGd,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,~~MAAMc~~,0BAA0B,~~GAAAhB~~,OAAA,~~CAAAgB~~,0BAAA,~~GAAGf~~,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAMM,~~MAAMe~~,wCAAwC,~~GAAAjB~~,OAAA,~~CAAAiB~~,wCAAA,GAAG,~~IAAAhB~~,yBAAM,~~EAC1DiB~~,aAAM,~~CAAChB~~,GACX,CAAgD;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqD,CAAC,KACnE,kDAAkDA,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS;AACzF,CAAC;AAEM,~~MAAMgB~~,iCAAiC,~~GAAAnB~~,OAAA,~~CAAAmB~~,iCAAA,~~GAAGlB~~,yBAAM,CAACC,GAAG;AAC3D;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ListItemHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledListItemHead","exports","styled","div","theme","text","$isClickable","$isAnyItemExpandable","css","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleInputWrapper","StyledListItemHeadTitleContent","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","motion","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = HTMLMotionProps<'div'> & {\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n};\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps & { theme: Theme }) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n position: relative;\n width: 100%;\n justify-content: center;\n cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\ntype StyledListItemHeadIndicatorProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadIndicator = styled.div<StyledListItemHeadIndicatorProps>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\ntype StyledListItemHeadTitleProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadTitle = styled.div<StyledListItemHeadTitleProps>`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleInputWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledMotionListItemHeadHoverItemWrapperProps = {\n theme: Theme;\n};\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -45,6 +45,7 @@ const ListItemImage = ({
       cornerImage: cornerImage ?? careOfImage,
       imageBackground: imageBackground,
       images: images,
+      height: 40,
       onImageError: onImageError,
       onClick: handleImageClick,
       shouldPreventBackground: shouldHideBackground,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_GroupedImage","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","useCallback","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","careOfImage","undefined","createElement","onClick","shouldPreventBackground","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, {\n CSSProperties,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n cornerElement?: ReactNode;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n careOfLocationId,\n cornerImage,\n imageBackground,\n images,\n shouldHideBackground,\n shouldShowRoundImage,\n shouldOpenImageOnClick,\n cornerElement,\n onImageError,\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]) {\n const careOfImage = careOfLocationId\n ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n : undefined;\n\n return (\n <GroupedImage\n cornerElement={cornerElement}\n cornerImage={cornerImage ?? careOfImage}\n imageBackground={imageBackground}\n images={images}\n onImageError={onImageError}\n onClick={handleImageClick}\n shouldPreventBackground={shouldHideBackground}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n );\n }\n\n return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAOA,IAAAG,aAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAkE,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAG,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAclE,MAAMgB,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC,sBAAsB;EACtBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAC/BC,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,EAAEC,oBAAS,CAACC;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAK,IAAAC,oBAAS,EAAC;MAAEP,KAAK;MAAEQ,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAACnB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMoB,WAAW,GAAGvB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDwB,SAAS;IAEf,oBACIhD,MAAA,CAAAM,OAAA,CAAA2C,aAAA,CAAC/C,aAAA,CAAAI,OAAY;MACTyB,aAAa,EAAEA,aAAc;MAC7BN,WAAW,EAAEA,WAAW,IAAIsB,WAAY;MACxCrB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;~~MACfK~~,YAAY,EAAEA,YAAa;~~MAC3BkB~~,OAAO,~~EAAEjB~~,gBAAiB;~~MAC1BkB~~,uBAAuB,~~EAAEvB~~,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,~~CAAC6B~~,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAAhD~~,OAAA,GAE7BiB,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"ListItemImage.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_GroupedImage","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","useCallback","event","preventDefault","stopPropagation","items","map","image","url","mediaType","MediaType","IMAGE","openMedia","startIndex","careOfImage","undefined","createElement","height","onClick","shouldPreventBackground","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, {\n CSSProperties,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n cornerElement?: ReactNode;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n careOfLocationId,\n cornerImage,\n imageBackground,\n images,\n shouldHideBackground,\n shouldShowRoundImage,\n shouldOpenImageOnClick,\n cornerElement,\n onImageError,\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]) {\n const careOfImage = careOfLocationId\n ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n : undefined;\n\n return (\n <GroupedImage\n cornerElement={cornerElement}\n cornerImage={cornerImage ?? careOfImage}\n imageBackground={imageBackground}\n images={images}\n height={40}\n onImageError={onImageError}\n onClick={handleImageClick}\n shouldPreventBackground={shouldHideBackground}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n );\n }\n\n return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grouped-image/GroupedImage.js CHANGED Viewed

@@ -3,6 +3,33 @@ import { StyledCornerElement, StyledCornerImage, StyledGroupedImage, StyledGroup
 import CareOfClipPath from './clip-paths/CareOfClipPath';
 import { useUuid } from '../../hooks/uuid';
 import SecondImageClipPath from './clip-paths/SecondImageClipPath';
+const GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';
+const IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\d+)$/i;
+const getGroupedImageDisplayUrl = (url, size) => {
+  try {
+    const urlObject = new URL(url);
+    if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {
+      return url;
+    }
+    const pathSegments = urlObject.pathname.split('/');
+    const fileName = pathSegments.pop();
+    if (!fileName) {
+      return url;
+    }
+    const extensionIndex = fileName.lastIndexOf('.');
+    const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';
+    const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;
+    const parameterSegment = fileBaseName.split('_').pop();
+    const hasImageServiceParameters = Boolean(parameterSegment && parameterSegment !== fileBaseName && parameterSegment.split('-').every(parameter => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)));
+    const normalizedFileBaseName = hasImageServiceParameters ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_')) : fileBaseName;
+    const normalizedSize = Math.max(1, Math.round(size));
+    pathSegments.push(`${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);
+    urlObject.pathname = pathSegments.join('/');
+    return urlObject.toString();
+  } catch {
+    return url;
+  }
+};
 const GroupedImage = ({
   cornerImage,
   height = 40,
@@ -18,6 +45,7 @@ const GroupedImage = ({
   const hasCornerElement = Boolean(cornerElement);
   const hasMultipleImages = images.length > 1;
   const uuid = useUuid();
+  const cornerImageDisplayUrl = cornerImage ? getGroupedImageDisplayUrl(cornerImage, height) : undefined;
   const imageElements = images.slice(0, 2).map((src, index) => /*#__PURE__*/React.createElement(StyledGroupImageElement, {
     $background: imageBackground,
     $isSecondImage: index === 1,
@@ -40,7 +68,7 @@ const GroupedImage = ({
     height: "40"
   }, /*#__PURE__*/React.createElement("img", {
     alt: `image--${index}`,
-    src: src,
+    src: getGroupedImageDisplayUrl(src, height),
     onError: event => typeof onImageError === 'function' && onImageError(event, index)
   })))));
   return /*#__PURE__*/React.createElement(StyledGroupedImage, {
@@ -58,7 +86,7 @@ const GroupedImage = ({
     $background: imageBackground,
     $shouldPreventBackground: shouldPreventBackground,
     $hasMultipleImages: hasMultipleImages,
-    src: cornerImage,
+    src: cornerImageDisplayUrl,
     key: "corner-image"
   }), hasCornerElement && /*#__PURE__*/React.createElement(StyledCornerElement, null, cornerElement));
 };

package/lib/esm/components/grouped-image/GroupedImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedImage.js","names":["React","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","Boolean","hasCornerElement","hasMultipleImages","length","uuid","imageElements","slice","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","$height","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\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\ninterface 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?: number;\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 = 40,\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 const uuid = useUuid();\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\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 <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={src}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\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":"AAAA,OAAOA,KAAK,MAA2E,OAAO;AAC9F,SACIC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,QACpB,uBAAuB;AAC9B,OAAOC,cAAc,MAAM,6BAA6B;AACxD,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,OAAOC,mBAAmB,MAAM,kCAAkC;AAyClE,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,WAAW;EACXC,MAAM,GAAG,EAAE;EACXC,eAAe;EACfC,MAAM;EACNC,OAAO;EACPC,uBAAuB,GAAG,KAAK;EAC/BC,oBAAoB,GAAG,KAAK;EAC5BC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGC,OAAO,CAACV,WAAW,CAAC;EAC3C,MAAMW,gBAAgB,GAAGD,OAAO,CAACH,aAAa,CAAC;EAC/C,MAAMK,iBAAiB,GAAGT,MAAM,CAACU,MAAM,GAAG,CAAC;EAC3C,MAAMC,IAAI,GAAGjB,OAAO,CAAC,CAAC;EAEtB,MAAMkB,aAAa,GAAGZ,MAAM,CAACa,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAACC,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpD5B,KAAA,CAAA6B,aAAA,CAACzB,uBAAuB;IACpB0B,WAAW,EAAEnB,eAAgB;IAC7BoB,cAAc,EAAEH,KAAK,KAAK,CAAE;IAC5BI,eAAe,EAAEd,cAAe;IAChCe,kBAAkB,EAAEZ,iBAAkB;IACtCa,wBAAwB,EAAEpB,uBAAwB;IAClDqB,qBAAqB,EAAEpB,oBAAqB;IAC5CqB,KAAK,EAAEb;IACP;IAAA;IACAc,GAAG,EAAET;EAAM,gBAEX5B,KAAA,CAAA6B,aAAA;IACIS,KAAK,EAAC,MAAM;IACZ5B,MAAM,EAAC,MAAM;IACb6B,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClCC,mBAAmB,EAAC;EAAgB,gBAEpCzC,KAAA,CAAA6B,aAAA;IAAeS,KAAK,EAAC,IAAI;IAAC5B,MAAM,EAAC;EAAI,gBACjCV,KAAA,CAAA6B,aAAA;IACIa,GAAG,EAAE,UAAUd,KAAK,EAAG;IACvBD,GAAG,EAAEA,GAAI;IACTgB,OAAO,EAAGC,KAAK,IACX,OAAO3B,YAAY,KAAK,UAAU,IAAIA,YAAY,CAAC2B,KAAK,EAAEhB,KAAK;EAClE,CACJ,CACU,CACd,CACgB,CAC5B,CAAC;EAEF,oBACI5B,KAAA,CAAA6B,aAAA,CAAC1B,kBAAkB;IAACU,OAAO,EAAEA,OAAQ;IAACgC,OAAO,EAAEnC;EAAO,GACjDQ,cAAc,iBACXlB,KAAA,CAAA6B,aAAA,CAACxB,cAAc;IACXK,MAAM,EAAEA,MAAO;IACfa,IAAI,EAAEA,IAAK;IACXuB,YAAY,EAAEzB,iBAAiB,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;EAAE,CACvD,CACJ,EACAA,iBAAiB,iBACdrB,KAAA,CAAA6B,aAAA,CAACtB,mBAAmB;IAChBG,MAAM,EAAEA,MAAO;IACfa,IAAI,EAAEA,IAAK;IACXR,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EAEAS,aAAa,EAEbN,cAAc,iBACXlB,KAAA,CAAA6B,aAAA,CAAC3B,iBAAiB;IACd4B,WAAW,EAAEnB,eAAgB;IAC7BuB,wBAAwB,EAAEpB,uBAAwB;IAClDmB,kBAAkB,EAAEZ,iBAAkB;IACtCM,GAAG,EAAElB,WAAY;IACjB4B,GAAG,EAAC;EAAc,CACrB,CACJ,EACAjB,gBAAgB,iBAAIpB,KAAA,CAAA6B,aAAA,CAAC5B,mBAAmB,QAAEe,aAAmC,CAC9D,CAAC;AAE7B,CAAC;AAEDR,YAAY,CAACuC,WAAW,GAAG,cAAc;AAEzC,eAAevC,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"GroupedImage.js","names":["React","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedFileBaseName","normalizedSize","Math","max","round","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","cornerImageDisplayUrl","undefined","imageElements","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","$height","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\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\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale\|crop\|shortedgescale)\|[whsbd]\\d+)$/i;\n\ninterface 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?: number;\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 getGroupedImageDisplayUrl = (url: string, size: number): string => {\n try {\n const urlObject = new URL(url);\n\n if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n return url;\n }\n\n const pathSegments = urlObject.pathname.split('/');\n const fileName = pathSegments.pop();\n\n if (!fileName) {\n return url;\n }\n\n const extensionIndex = fileName.lastIndexOf('.');\n const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n const parameterSegment = fileBaseName.split('_').pop();\n const hasImageServiceParameters = Boolean(\n parameterSegment &&\n parameterSegment !== fileBaseName &&\n parameterSegment\n .split('-')\n .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n );\n const normalizedFileBaseName = hasImageServiceParameters\n ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_'))\n : fileBaseName;\n const normalizedSize = Math.max(1, Math.round(size));\n\n pathSegments.push(\n `${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`,\n );\n urlObject.pathname = pathSegments.join('/');\n\n return urlObject.toString();\n } catch {\n return url;\n }\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 onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const cornerImageDisplayUrl = cornerImage\n ? getGroupedImageDisplayUrl(cornerImage, height)\n : undefined;\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\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 <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={getGroupedImageDisplayUrl(src, height)}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImageDisplayUrl}\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/esm/components/list/list-item/ListItem.js CHANGED Viewed

@@ -43,7 +43,9 @@ const ListItem = /*#__PURE__*/forwardRef(({
   title,
   onImageError,
   onSizeChange,
+  onTitleInputChange,
   titleElement,
+  titleInputProps,
   shouldDisableAnimation = false,
   cornerElement,
   isSelected = false
@@ -179,7 +181,9 @@ const ListItem = /*#__PURE__*/forwardRef(({
     shouldShowRoundImageOrIcon: shouldShowRoundImageOrIcon,
     subtitle: subtitle,
     title: title,
+    onTitleInputChange: onTitleInputChange,
     onTitleWidthChange: handleTitleWidthChange,
+    titleInputProps: titleInputProps,
     titleElement: titleElement,
     setShouldEnableTooltip: setShouldEnableTooltip,
     shouldDisableAnimation: shouldDisableAnimation,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","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","onImageError","onSizeChange","titleElement","shouldDisableAnimation","cornerElement","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","isInDialog","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","current","handleHeadClick","event","shouldOnlyOpen","isClickable","handleTitleWidthChange","width","maxWidth","createElement","as","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","style","cursor","onTitleWidthChange","id","shouldHideBody","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n CSSProperties,\n forwardRef,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\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 { useIsInsideDialog } from '../../../hooks/element';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\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 Whether the item is selected.\n /\n isSelected?: 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 Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Function to be executed if the size are changed.\n */\n onSizeChange?: (sizes: ListItemSize) => void;\n};\n\nexport type ListItemRef = ListItemSize;\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 onImageError,\n onSizeChange,\n titleElement,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n },\n ref,\n ) => {\n const { isAnyItemExpandable, isWrapped, openItemUuid, 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 isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\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 const [titleMaxWidth, setTitleMaxWidth] = 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 (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' \|\| isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\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 $isInDialog={isInDialog}\n $isSelected={isSelected}\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 <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 onImageError={onImageError}\n />\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":[]}
1	+ {"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","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","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","isInDialog","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","current","handleHeadClick","event","shouldOnlyOpen","isClickable","handleTitleWidthChange","width","maxWidth","createElement","as","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","style","cursor","onTitleWidthChange","id","shouldHideBody","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport type { InputProps } from '../../input/Input';\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 { useIsInsideDialog } from '../../../hooks/element';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\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 Whether the item is selected.\n /\n isSelected?: 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 Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Function to be executed if the size are changed.\n /\n onSizeChange?: (sizes: ListItemSize) => void;\n /\n Function that is executed when the text of the title input changes.\n * When this function is given, the title is displayed as an input.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n The props of the title input.\n */\n titleInputProps?: InputProps;\n};\n\nexport type ListItemRef = ListItemSize;\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 onImageError,\n onSizeChange,\n onTitleInputChange,\n titleElement,\n titleInputProps,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n },\n ref,\n ) => {\n const { isAnyItemExpandable, isWrapped, openItemUuid, 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 isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\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 const [titleMaxWidth, setTitleMaxWidth] = 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 (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' \|\| isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\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 $isInDialog={isInDialog}\n $isSelected={isSelected}\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 <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 onTitleInputChange={onTitleInputChange}\n onTitleWidthChange={handleTitleWidthChange}\n titleInputProps={titleInputProps}\n titleElement={titleElement}\n setShouldEnableTooltip={setShouldEnableTooltip}\n shouldDisableAnimation={shouldDisableAnimation}\n onImageError={onImageError}\n />\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/esm/components/list/list-item/list-item-head/ListItemHead.js CHANGED Viewed

@@ -1,14 +1,17 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { LayoutGroup, motion } from 'motion/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ListItemIcon from './list-item-icon/ListItemIcon';
 import ListItemImage from './list-item-image/ListItemImage';
-import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadTitle, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper } from './ListItemHead.styles';
+import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadTitle, StyledListItemHeadTitleInputWrapper, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper } from './ListItemHead.styles';
 import ListItemTitle from './list-item-title/ListItemTitle';
 import ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';
 import ListItemRightElement from './list-item-right-element/ListItemRightElement';
 import { useTheme } from 'styled-components';
 import { StyledUnicodeIcon } from '../../../icon/Icon.styles';
 import { getIsExpandableIcon } from '../../../../utils/icon';
+import Input from '../../../input/Input';
+import { AreaContext } from '../../../area-provider/AreaContextProvider';
 const ListItemHead = ({
   careOfLocationId,
   cornerImage,
@@ -36,7 +39,9 @@ const ListItemHead = ({
   shouldDisableAnimation = false,
   cornerElement,
   onTitleWidthChange,
-  onImageError
+  onImageError,
+  onTitleInputChange,
+  titleInputProps
 }) => {
   const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);
   const [titleMaxWidth, setTitleMaxWidth] = useState(0);
@@ -44,8 +49,10 @@ const ListItemHead = ({
   const longPressTimeoutRef = useRef();
   const resizeSkipRef = useRef(true);
   const theme = useTheme();
-  const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string' || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
-  const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
+  const areaProvider = useContext(AreaContext);
+  const hasTitleInput = typeof onTitleInputChange === 'function';
+  const shouldShowSubtitleRow = !hasTitleInput && (subtitle || typeof subtitle === 'string') || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
+  const shouldShowMultilineTitle = useMemo(() => !subtitle && !hasTitleInput, [hasTitleInput, subtitle]);
   useEffect(() => {
     window.setTimeout(() => {
       resizeSkipRef.current = false;
@@ -78,6 +85,9 @@ const ListItemHead = ({
   const handleTitleWidthChange = useCallback(width => {
     setTitleMaxWidth(width);
   }, []);
+  const handleInputClick = useCallback(event => {
+    event.stopPropagation();
+  }, []);
   const iconOrImageElement = useMemo(() => {
     if (icons) {
       return /*#__PURE__*/React.createElement(ListItemIcon, {
@@ -142,7 +152,21 @@ const ListItemHead = ({
   }, /*#__PURE__*/React.createElement(LayoutGroup, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, {
     as: shouldDisableAnimation ? undefined : motion.div,
     layout: "position"
-  }, /*#__PURE__*/React.createElement(ListItemTitle, {
+  }, hasTitleInput ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  React.createElement(AreaContext.Provider, {
+    value: {
+      ...areaProvider,
+      shouldChangeColor: true
+    }
+  }, /*#__PURE__*/React.createElement(StyledListItemHeadTitleInputWrapper, {
+    onClick: handleInputClick
+  }, /*#__PURE__*/React.createElement(Input
+  /* eslint-disable-next-line react/jsx-props-no-spreading */, _extends({}, titleInputProps, {
+    value: typeof title === 'string' ? title : undefined,
+    onChange: onTitleInputChange
+  })))) : /*#__PURE__*/React.createElement(ListItemTitle, {
     title: title,
     titleElement: titleElement,
     isOpen: isOpen,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadTitle","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","ListItemTitle","ListItemSubtitle","ListItemRightElement","useTheme","StyledUnicodeIcon","getIsExpandableIcon","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","shouldShowHoverItem","setShouldShowHoverItem","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","resizeSkipRef","theme","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","accordionIcon","internalIconStyle","iconStyle","$icon","className","as","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","layout","onResize","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadIndicator,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadTitle,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n shouldDisableAnimation?: boolean;\n cornerElement?: ReactNode;\n onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n shouldDisableAnimation = false,\n cornerElement,\n onTitleWidthChange,\n onImageError,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n const [titleWidth, setTitleWidth] = useState(0);\n\n const longPressTimeoutRef = useRef<number>();\n const resizeSkipRef = useRef(true);\n\n const theme = useTheme() as Theme;\n\n const shouldShowSubtitleRow =\n subtitle \|\|\n typeof subtitle === 'string' \|\|\n (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n useEffect(() => {\n window.setTimeout(() => {\n resizeSkipRef.current = false;\n }, 200);\n }, []);\n\n useEffect(() => {\n onTitleWidthChange(titleWidth, titleMaxWidth);\n }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n if (resizeSkipRef.current) {\n return;\n }\n\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const handleTitleWidthChange = useCallback((width: number) => {\n setTitleMaxWidth(width);\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 cornerElement={cornerElement}\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n onImageError={onImageError}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerElement,\n cornerImage,\n icons,\n imageBackground,\n images,\n onImageError,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n const expandIcon = useMemo(() => {\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n }, [theme.accordionIcon, theme.iconStyle]);\n\n return (\n <StyledListItemHead\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={\n shouldDisableAnimation\n ? undefined\n : {\n opacity: isTitleGreyed ? 0.5 : 1,\n }\n }\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { 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 <StyledListItemHeadIndicator\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && expandIcon}\n </StyledListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <LayoutGroup>\n <StyledListItemHeadTitle\n as={shouldDisableAnimation ? undefined : motion.div}\n layout=\"position\"\n >\n <ListItemTitle\n title={title}\n titleElement={titleElement}\n isOpen={isOpen}\n shouldShowMultilineTitle={shouldShowMultilineTitle}\n rightElements={rightElements}\n onTitleWidthChange={handleTitleWidthChange}\n onResize={handleShowTooltipResize}\n />\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <ListItemSubtitle\n subtitle={subtitle}\n isOpen={isOpen}\n rightElements={rightElements}\n />\n </StyledListItemHeadSubtitle>\n )}\n </LayoutGroup>\n </StyledListItemHeadContent>\n <ListItemRightElement rightElements={rightElements} />\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover \|\| shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover \|\| shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover \|\| shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useContext","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadTitle","StyledListItemHeadTitleInputWrapper","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","ListItemTitle","ListItemSubtitle","ListItemRightElement","useTheme","StyledUnicodeIcon","getIsExpandableIcon","Input","AreaContext","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","onTitleInputChange","titleInputProps","shouldShowHoverItem","setShouldShowHoverItem","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","resizeSkipRef","theme","areaProvider","hasTitleInput","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","handleInputClick","stopPropagation","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","accordionIcon","internalIconStyle","iconStyle","$icon","className","as","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","layout","Provider","value","shouldChangeColor","_extends","onChange","onResize","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n ChangeEventHandler,\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 type { IListItemRightElements } from '../../../../types/list';\nimport type { InputProps } from '../../../input/Input';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadIndicator,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleInputWrapper,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\nimport Input from '../../../input/Input';\nimport { AreaContext } from '../../../area-provider/AreaContextProvider';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n shouldDisableAnimation?: boolean;\n cornerElement?: ReactNode;\n onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n shouldDisableAnimation = false,\n cornerElement,\n onTitleWidthChange,\n onImageError,\n onTitleInputChange,\n titleInputProps,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n const [titleWidth, setTitleWidth] = useState(0);\n\n const longPressTimeoutRef = useRef<number>();\n const resizeSkipRef = useRef(true);\n\n const theme = useTheme() as Theme;\n const areaProvider = useContext(AreaContext);\n\n const hasTitleInput = typeof onTitleInputChange === 'function';\n\n const shouldShowSubtitleRow =\n (!hasTitleInput && (subtitle \|\| typeof subtitle === 'string')) \|\|\n (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n const shouldShowMultilineTitle = useMemo(\n () => !subtitle && !hasTitleInput,\n [hasTitleInput, subtitle],\n );\n\n useEffect(() => {\n window.setTimeout(() => {\n resizeSkipRef.current = false;\n }, 200);\n }, []);\n\n useEffect(() => {\n onTitleWidthChange(titleWidth, titleMaxWidth);\n }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n if (resizeSkipRef.current) {\n return;\n }\n\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const handleTitleWidthChange = useCallback((width: number) => {\n setTitleMaxWidth(width);\n }, []);\n\n const handleInputClick = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {\n event.stopPropagation();\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 cornerElement={cornerElement}\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n onImageError={onImageError}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerElement,\n cornerImage,\n icons,\n imageBackground,\n images,\n onImageError,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n const expandIcon = useMemo(() => {\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n }, [theme.accordionIcon, theme.iconStyle]);\n\n return (\n <StyledListItemHead\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={\n shouldDisableAnimation\n ? undefined\n : {\n opacity: isTitleGreyed ? 0.5 : 1,\n }\n }\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { 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 <StyledListItemHeadIndicator\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && expandIcon}\n </StyledListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <LayoutGroup>\n <StyledListItemHeadTitle\n as={shouldDisableAnimation ? undefined : motion.div}\n layout=\"position\"\n >\n {hasTitleInput ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider\n value={{ ...areaProvider, shouldChangeColor: true }}\n >\n <StyledListItemHeadTitleInputWrapper onClick={handleInputClick}>\n <Input\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...titleInputProps}\n value={typeof title === 'string' ? title : undefined}\n onChange={onTitleInputChange}\n />\n </StyledListItemHeadTitleInputWrapper>\n </AreaContext.Provider>\n ) : (\n <ListItemTitle\n title={title}\n titleElement={titleElement}\n isOpen={isOpen}\n shouldShowMultilineTitle={shouldShowMultilineTitle}\n rightElements={rightElements}\n onTitleWidthChange={handleTitleWidthChange}\n onResize={handleShowTooltipResize}\n />\n )}\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <ListItemSubtitle\n subtitle={subtitle}\n isOpen={isOpen}\n rightElements={rightElements}\n />\n </StyledListItemHeadSubtitle>\n )}\n </LayoutGroup>\n </StyledListItemHeadContent>\n <ListItemRightElement rightElements={rightElements} />\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover \|\| shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover \|\| shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover \|\| shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -54,6 +54,9 @@ export const StyledListItemHeadTitle = styled.div`
     display: flex;
     justify-content: space-between;
 `;
+export const StyledListItemHeadTitleInputWrapper = styled.div`
+    width: 100%;
+`;
 export const StyledListItemHeadTitleContent = styled.div`
     align-items: center;
     display: flex;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","theme","text","$isClickable","$isAnyItemExpandable","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = HTMLMotionProps<'div'> & {\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n};\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps & { theme: Theme }) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n position: relative;\n width: 100%;\n justify-content: center;\n cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\ntype StyledListItemHeadIndicatorProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadIndicator = styled.div<StyledListItemHeadIndicatorProps>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\ntype StyledListItemHeadTitleProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadTitle = styled.div<StyledListItemHeadTitleProps>`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledMotionListItemHeadHoverItemWrapperProps = {\n theme: Theme;\n};\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA;AACA,aAAa,CAAC;EAAEC;AAAkD,CAAC,KAAKA,KAAK,CAACC,IAAI;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAa,CAAC,KAAMA,YAAY,GAAG,SAAS,GAAG,SAAU;AAC1E;AACA,MAAM,CAAC;EAAEC;AAAqB,CAAC,KACvB,CAACA,oBAAoB,IACrBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGR,MAAM,CAACG,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMM,2BAA2B,GAAGT,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,yBAAyB,GAAGV,MAAM,CAACG,GAAmC;AACnF;AACA;AACA;AACA,mBAAmB,CAAC;EAAEQ;AAAQ,CAAC,KAAMA,OAAO,GAAG,MAAM,GAAG,QAAS;AACjE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAGC,SAAU;AAC1F;AACA,CAAC;AAID,OAAO,MAAMC,uBAAuB,GAAGd,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMY,~~8BAA8B~~,GAAGf,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMa~~,0BAA0B,~~GAAGhB~~,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,~~MAAMc~~,wCAAwC,~~GAAGjB~~,MAAM,CAC1DD,MAAM,CAACI,GACX,CAAgD;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqD,CAAC,KACnE,kDAAkDA,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS;AACzF,CAAC;AAED,OAAO,~~MAAMc~~,iCAAiC,~~GAAGlB~~,MAAM,CAACG,GAAG;AAC3D;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","theme","text","$isClickable","$isAnyItemExpandable","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleInputWrapper","StyledListItemHeadTitleContent","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = HTMLMotionProps<'div'> & {\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n};\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps & { theme: Theme }) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n position: relative;\n width: 100%;\n justify-content: center;\n cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\ntype StyledListItemHeadIndicatorProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadIndicator = styled.div<StyledListItemHeadIndicatorProps>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\ntype StyledListItemHeadTitleProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadTitle = styled.div<StyledListItemHeadTitleProps>`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleInputWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledMotionListItemHeadHoverItemWrapperProps = {\n theme: Theme;\n};\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA;AACA,aAAa,CAAC;EAAEC;AAAkD,CAAC,KAAKA,KAAK,CAACC,IAAI;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAa,CAAC,KAAMA,YAAY,GAAG,SAAS,GAAG,SAAU;AAC1E;AACA,MAAM,CAAC;EAAEC;AAAqB,CAAC,KACvB,CAACA,oBAAoB,IACrBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGR,MAAM,CAACG,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMM,2BAA2B,GAAGT,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,yBAAyB,GAAGV,MAAM,CAACG,GAAmC;AACnF;AACA;AACA;AACA,mBAAmB,CAAC;EAAEQ;AAAQ,CAAC,KAAMA,OAAO,GAAG,MAAM,GAAG,QAAS;AACjE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAGC,SAAU;AAC1F;AACA,CAAC;AAID,OAAO,MAAMC,uBAAuB,GAAGd,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMY,mCAAmC,GAAGf,MAAM,CAACG,GAAG;AAC7D;AACA,CAAC;AAED,OAAO,MAAMa,8BAA8B,GAAGhB,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMc,0BAA0B,GAAGjB,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMe,wCAAwC,GAAGlB,MAAM,CAC1DD,MAAM,CAACI,GACX,CAAgD;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqD,CAAC,KACnE,kDAAkDA,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS;AACzF,CAAC;AAED,OAAO,MAAMe,iCAAiC,GAAGnB,MAAM,CAACG,GAAG;AAC3D;AACA,CAAC","ignoreList":[]}

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

@@ -37,6 +37,7 @@ const ListItemImage = ({
       cornerImage: cornerImage ?? careOfImage,
       imageBackground: imageBackground,
       images: images,
+      height: 40,
       onImageError: onImageError,
       onClick: handleImageClick,
       shouldPreventBackground: shouldHideBackground,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","GroupedImage","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","careOfImage","undefined","createElement","onClick","shouldPreventBackground","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, {\n CSSProperties,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n cornerElement?: ReactNode;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n careOfLocationId,\n cornerImage,\n imageBackground,\n images,\n shouldHideBackground,\n shouldShowRoundImage,\n shouldOpenImageOnClick,\n cornerElement,\n onImageError,\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]) {\n const careOfImage = careOfLocationId\n ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n : undefined;\n\n return (\n <GroupedImage\n cornerElement={cornerElement}\n cornerImage={cornerImage ?? careOfImage}\n imageBackground={imageBackground}\n images={images}\n onImageError={onImageError}\n onClick={handleImageClick}\n shouldPreventBackground={shouldHideBackground}\n shouldShowRoundImage={shouldShowRoundImage}\n />\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,IAKRC,WAAW,QACR,OAAO;AACd,OAAOC,YAAY,MAAM,wCAAwC;AAcjE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC,sBAAsB;EACtBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAGZ,WAAW,CAC/Ba,KAAK,IAAK;IACP,IAAI,CAACJ,sBAAsB,EAAE;MACzB;IACJ;IAEAI,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGV,MAAM,CAACW,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAEvB,SAAS,CAACwB;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKvB,SAAS,CAAC;MAAEkB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAAChB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMiB,WAAW,GAAGpB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDqB,SAAS;IAEf,oBACIzB,KAAA,CAAA0B,aAAA,CAACxB,YAAY;MACTS,aAAa,EAAEA,aAAc;MAC7BN,WAAW,EAAEA,WAAW,IAAImB,WAAY;MACxClB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;~~MACfK~~,YAAY,EAAEA,YAAa;~~MAC3Be~~,OAAO,~~EAAEd~~,gBAAiB;~~MAC1Be~~,uBAAuB,~~EAAEpB~~,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,~~CAAC0B~~,WAAW,GAAG,eAAe;AAE3C,~~eAAe1B~~,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","GroupedImage","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","careOfImage","undefined","createElement","height","onClick","shouldPreventBackground","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, {\n CSSProperties,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n cornerElement?: ReactNode;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n careOfLocationId,\n cornerImage,\n imageBackground,\n images,\n shouldHideBackground,\n shouldShowRoundImage,\n shouldOpenImageOnClick,\n cornerElement,\n onImageError,\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]) {\n const careOfImage = careOfLocationId\n ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n : undefined;\n\n return (\n <GroupedImage\n cornerElement={cornerElement}\n cornerImage={cornerImage ?? careOfImage}\n imageBackground={imageBackground}\n images={images}\n height={40}\n onImageError={onImageError}\n onClick={handleImageClick}\n shouldPreventBackground={shouldHideBackground}\n shouldShowRoundImage={shouldShowRoundImage}\n />\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,IAKRC,WAAW,QACR,OAAO;AACd,OAAOC,YAAY,MAAM,wCAAwC;AAcjE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC,sBAAsB;EACtBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAGZ,WAAW,CAC/Ba,KAAK,IAAK;IACP,IAAI,CAACJ,sBAAsB,EAAE;MACzB;IACJ;IAEAI,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGV,MAAM,CAACW,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAEvB,SAAS,CAACwB;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKvB,SAAS,CAAC;MAAEkB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAAChB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMiB,WAAW,GAAGpB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDqB,SAAS;IAEf,oBACIzB,KAAA,CAAA0B,aAAA,CAACxB,YAAY;MACTS,aAAa,EAAEA,aAAc;MAC7BN,WAAW,EAAEA,WAAW,IAAImB,WAAY;MACxClB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;MACfoB,MAAM,EAAE,EAAG;MACXf,YAAY,EAAEA,YAAa;MAC3BgB,OAAO,EAAEf,gBAAiB;MAC1BgB,uBAAuB,EAAErB,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,CAAC2B,WAAW,GAAG,eAAe;AAE3C,eAAe3B,aAAa","ignoreList":[]}

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

@@ -1,5 +1,6 @@
-import React, { CSSProperties, MouseEventHandler, ReactNode, SyntheticEvent, TouchEventHandler } from 'react';
+import React, { ChangeEventHandler, CSSProperties, MouseEventHandler, ReactNode, SyntheticEvent, TouchEventHandler } from 'react';
 import type { IListItemRightElements } from '../../../types/list';
+import type { InputProps } from '../../input/Input';
 export type ListItemElements = [ReactNode, ...ReactNode[]];
 export interface ListItemSize {
     titleWidth: number;
@@ -168,6 +169,15 @@ export type ListItemProps = {
      * Function to be executed if the size are changed.
      */
     onSizeChange?: (sizes: ListItemSize) => void;
+    /**
+     * Function that is executed when the text of the title input changes.
+     * When this function is given, the title is displayed as an input.
+     */
+    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The props of the title input.
+     */
+    titleInputProps?: InputProps;
 };
 export type ListItemRef = ListItemSize;
 declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<ListItemSize>>;

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

@@ -1,5 +1,6 @@
-import { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent, TouchEventHandler } from 'react';
+import { ChangeEventHandler, CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent, TouchEventHandler } from 'react';
 import type { IListItemRightElements } from '../../../../types/list';
+import type { InputProps } from '../../../input/Input';
 type ListItemHeadProps = {
     careOfLocationId?: number;
     cornerImage?: string;
@@ -28,6 +29,8 @@ type ListItemHeadProps = {
     cornerElement?: ReactNode;
     onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;
     onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;
+    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;
+    titleInputProps?: InputProps;
 };
 declare const ListItemHead: FC<ListItemHeadProps>;
 export default ListItemHead;

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

@@ -1599,6 +1599,7 @@ export declare const StyledListItemHeadTitle: import("styled-components/dist/typ
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     key?: React.Key | null | undefined;
 } & import("motion/react").MotionProps, never>>> & string;
+export declare const StyledListItemHeadTitleInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const StyledListItemHeadTitleContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const StyledListItemHeadSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 type StyledMotionListItemHeadHoverItemWrapperProps = {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.4.14",
+    "version": "5.4.16",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -71,7 +71,7 @@
         "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/textstring": "^5.4.0",
+        "@chayns-components/textstring": "^5.4.16",
         "@chayns/colors": "^2.0.2",
         "@chayns/uac-service": "~0.0.62",
         "clsx": "^2.1.1",
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e88088525ff7c11b6f352d53196fb3eaf253f9a7"
+    "gitHead": "14eafb6d12f36a1788ac032ed2dffa8e700b2cc9"
 }