@chayns-components/core 5.5.51 → 5.5.52

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

@@ -49,6 +49,7 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
   shouldOpenImageOnClick = false,
   shouldHideImageOrIconBackground,
   shouldHideIndicator = false,
+  shouldAnimateLayout = false,
   shouldPreventLayoutAnimation = false,
   shouldRenderClosed = false,
   shouldShowRoundImageOrIcon,
@@ -230,7 +231,7 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     key: `list-item-${uuid}`,
     ref: listItemRef,
     "data-uuid": `${listGroupUuid ?? ''}---${uuid}`,
-    layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
+    layout: shouldAnimateLayout && !shouldPreventLayoutAnimation && !shouldDisableAnimation ? 'position' : undefined,
     $backgroundColor: backgroundColor,
     $isClickable: isClickable,
     $isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !areaProvider.shouldDisableListItemPadding,
@@ -287,6 +288,7 @@ const ListItem = /*#__PURE__*/(0, _react2.forwardRef)(({
     titleElement: titleElement,
     setShouldEnableTooltip: setShouldEnableTooltip,
     shouldDisableAnimation: shouldDisableAnimation,
+    shouldAnimateLayout: shouldAnimateLayout && !shouldPreventLayoutAnimation && !shouldDisableAnimation,
     onImageError: onImageError
   })), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_uuid","_Accordion","_AreaContextProvider","_ColorSchemeProvider","_List","_List2","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_element","_useFocusRingPortal","_useKeyboardFocusHighlighting","_useListItemFocus","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","shouldEnableKeyboardHighlighting","shouldEnableKeyboardHighlightingProp","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlightingContext","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","useContext","ListContext","colorScheme","useColorScheme","theme","useTheme","isInsideListContext","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","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","borderRadius","cardBorderRadius","isInKeyboardNavigationGroup","tabIndex","useMemo","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","handleHorizontalArrowNavigation","handleListItemTabNavigation","currentUuid","handleVerticalListGroupNavigation","handleListItemToggleKey","toggleItem","some","handleKey","isFocusWithinListItem","handleFocus","handleBlur","useListItemFocus","shouldForceHoverItem","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","onKeyDown","onFocus","onBlur","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    KeyboardEvent,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\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 { type Theme, useColorScheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ListContext } from '../List';\nimport {\n    handleHorizontalArrowNavigation,\n    handleListItemTabNavigation,\n    handleListItemToggleKey,\n    handleVerticalListGroupNavigation,\n} from '../List.utils';\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';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\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     * Enables keyboard-only focus highlighting. Overrides the value from the List context.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\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            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp,\n        },\n        ref,\n    ) => {\n        const {\n            isAnyItemExpandable,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,\n            listGroupUuid,\n            listItemUuids,\n            registerListItemUuid,\n            unregisterListItemUuid,\n            activeListItemUuid,\n            updateActiveListItemUuid,\n        } = useContext(ListContext);\n        const colorScheme = useColorScheme();\n        const theme = useTheme() as Theme;\n        const isInsideListContext = typeof listGroupUuid === 'string';\n\n        const shouldEnableKeyboardHighlighting =\n            shouldEnableKeyboardHighlightingProp ??\n            (isInsideListContext\n                ? shouldEnableKeyboardHighlightingContext\n                : (colorScheme?.shouldEnableKeyboardHighlighting ?? false));\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        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n        useFocusRingPortal(listItemRef, {\n            isEnabled: shouldShowKeyboardHighlighting,\n            borderRadius: `${theme.cardBorderRadius}px`,\n        });\n\n        const isInKeyboardNavigationGroup =\n            shouldEnableKeyboardHighlighting &&\n            typeof listGroupUuid === 'string' &&\n            typeof updateActiveListItemUuid === 'function';\n\n        useEffect(() => {\n            if (\n                shouldEnableKeyboardHighlighting &&\n                typeof registerListItemUuid === 'function' &&\n                typeof unregisterListItemUuid === 'function'\n            ) {\n                registerListItemUuid(uuid);\n\n                return () => {\n                    unregisterListItemUuid(uuid);\n                };\n            }\n\n            return undefined;\n        }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n        const tabIndex = useMemo(\n            () => (shouldEnableKeyboardHighlighting ? 0 : -1),\n            [shouldEnableKeyboardHighlighting],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                const isCurrentListItemTarget = event.currentTarget === event.target;\n                const currentListItemElement = event.currentTarget as HTMLDivElement;\n                const targetElement = event.target as HTMLElement | null;\n\n                [\n                    () =>\n                        shouldEnableKeyboardHighlighting &&\n                        handleHorizontalArrowNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                        }),\n                    () =>\n                        handleListItemTabNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleVerticalListGroupNavigation({\n                            event,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleListItemToggleKey({\n                            event,\n                            isCurrentListItemTarget,\n                            isExpandable,\n                            isItemOpen,\n                            shouldEnableKeyboardHighlighting,\n                            toggleItem: () =>\n                                handleHeadClick(\n                                    event as unknown as React.MouseEvent<HTMLDivElement>,\n                                ),\n                        }),\n                ].some((handleKey) => handleKey());\n            },\n            [\n                handleHeadClick,\n                isExpandable,\n                isInKeyboardNavigationGroup,\n                isItemOpen,\n                listGroupUuid,\n                listItemUuids,\n                shouldEnableKeyboardHighlighting,\n                updateActiveListItemUuid,\n                uuid,\n            ],\n        );\n\n        const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n            uuid,\n            listGroupUuid,\n            isInKeyboardNavigationGroup,\n            updateActiveListItemUuid,\n        });\n        const shouldForceHoverItem = shouldForceHover || isFocusWithinListItem;\n\n        useEffect(() => {\n            if (\n                isInKeyboardNavigationGroup &&\n                activeListItemUuid == null &&\n                typeof updateActiveListItemUuid === 'function' &&\n                listItemUuids?.[0] === uuid\n            ) {\n                updateActiveListItemUuid(uuid);\n            }\n        }, [\n            activeListItemUuid,\n            isInKeyboardNavigationGroup,\n            listItemUuids,\n            updateActiveListItemUuid,\n            uuid,\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                data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\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                data-should-show-keyboard-highlighting={\n                    shouldShowKeyboardHighlighting ? 'true' : undefined\n                }\n                tabIndex={tabIndex}\n                onKeyDown={handleKeyDown}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\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={shouldForceHoverItem}\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":[]}
+{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_uuid","_Accordion","_AreaContextProvider","_ColorSchemeProvider","_List","_List2","_ListItemBody","_interopRequireDefault","_ListItemHead","_ListItem","_Tooltip","_element","_useFocusRingPortal","_useKeyboardFocusHighlighting","_useListItemFocus","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","shouldAnimateLayout","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","shouldEnableKeyboardHighlighting","shouldEnableKeyboardHighlightingProp","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlightingContext","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","useContext","ListContext","colorScheme","useColorScheme","theme","useTheme","isInsideListContext","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","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","borderRadius","cardBorderRadius","isInKeyboardNavigationGroup","tabIndex","useMemo","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","handleHorizontalArrowNavigation","handleListItemTabNavigation","currentUuid","handleVerticalListGroupNavigation","handleListItemToggleKey","toggleItem","some","handleKey","isFocusWithinListItem","handleFocus","handleBlur","useListItemFocus","shouldForceHoverItem","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","onKeyDown","onFocus","onBlur","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    KeyboardEvent,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\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 { type Theme, useColorScheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ListContext } from '../List';\nimport {\n    handleHorizontalArrowNavigation,\n    handleListItemTabNavigation,\n    handleListItemToggleKey,\n    handleVerticalListGroupNavigation,\n} from '../List.utils';\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';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\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 framer-motion layout projection (`layout=\"position\"`) should be\n     * enabled. This animates the `ListItem` smoothly into its new position when\n     * sibling items are reordered, expanded or resized.\n     *\n     * This is opt-in and disabled by default, because framer-motions layout\n     * projection is viewport-global: every layout change anywhere in the document\n     * (window resize, height animation, ...) forces a re-measurement of **all**\n     * layout-projection nodes via `getBoundingClientRect`. In lists with many\n     * `ListItem`s this scales linearly and causes noticeable layout thrash. The\n     * enter/exit height/opacity animation is unaffected and stays enabled.\n     */\n    shouldAnimateLayout?: 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     * @deprecated The layout projection is now disabled by default. Use\n     * `shouldAnimateLayout` to opt into it instead. When set to `true`, this\n     * prop keeps forcing the layout projection off.\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     * Enables keyboard-only focus highlighting. Overrides the value from the List context.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\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            shouldAnimateLayout = 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            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp,\n        },\n        ref,\n    ) => {\n        const {\n            isAnyItemExpandable,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,\n            listGroupUuid,\n            listItemUuids,\n            registerListItemUuid,\n            unregisterListItemUuid,\n            activeListItemUuid,\n            updateActiveListItemUuid,\n        } = useContext(ListContext);\n        const colorScheme = useColorScheme();\n        const theme = useTheme() as Theme;\n        const isInsideListContext = typeof listGroupUuid === 'string';\n\n        const shouldEnableKeyboardHighlighting =\n            shouldEnableKeyboardHighlightingProp ??\n            (isInsideListContext\n                ? shouldEnableKeyboardHighlightingContext\n                : (colorScheme?.shouldEnableKeyboardHighlighting ?? false));\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        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n        useFocusRingPortal(listItemRef, {\n            isEnabled: shouldShowKeyboardHighlighting,\n            borderRadius: `${theme.cardBorderRadius}px`,\n        });\n\n        const isInKeyboardNavigationGroup =\n            shouldEnableKeyboardHighlighting &&\n            typeof listGroupUuid === 'string' &&\n            typeof updateActiveListItemUuid === 'function';\n\n        useEffect(() => {\n            if (\n                shouldEnableKeyboardHighlighting &&\n                typeof registerListItemUuid === 'function' &&\n                typeof unregisterListItemUuid === 'function'\n            ) {\n                registerListItemUuid(uuid);\n\n                return () => {\n                    unregisterListItemUuid(uuid);\n                };\n            }\n\n            return undefined;\n        }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n        const tabIndex = useMemo(\n            () => (shouldEnableKeyboardHighlighting ? 0 : -1),\n            [shouldEnableKeyboardHighlighting],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                const isCurrentListItemTarget = event.currentTarget === event.target;\n                const currentListItemElement = event.currentTarget as HTMLDivElement;\n                const targetElement = event.target as HTMLElement | null;\n\n                [\n                    () =>\n                        shouldEnableKeyboardHighlighting &&\n                        handleHorizontalArrowNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                        }),\n                    () =>\n                        handleListItemTabNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleVerticalListGroupNavigation({\n                            event,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleListItemToggleKey({\n                            event,\n                            isCurrentListItemTarget,\n                            isExpandable,\n                            isItemOpen,\n                            shouldEnableKeyboardHighlighting,\n                            toggleItem: () =>\n                                handleHeadClick(\n                                    event as unknown as React.MouseEvent<HTMLDivElement>,\n                                ),\n                        }),\n                ].some((handleKey) => handleKey());\n            },\n            [\n                handleHeadClick,\n                isExpandable,\n                isInKeyboardNavigationGroup,\n                isItemOpen,\n                listGroupUuid,\n                listItemUuids,\n                shouldEnableKeyboardHighlighting,\n                updateActiveListItemUuid,\n                uuid,\n            ],\n        );\n\n        const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n            uuid,\n            listGroupUuid,\n            isInKeyboardNavigationGroup,\n            updateActiveListItemUuid,\n        });\n        const shouldForceHoverItem = shouldForceHover || isFocusWithinListItem;\n\n        useEffect(() => {\n            if (\n                isInKeyboardNavigationGroup &&\n                activeListItemUuid == null &&\n                typeof updateActiveListItemUuid === 'function' &&\n                listItemUuids?.[0] === uuid\n            ) {\n                updateActiveListItemUuid(uuid);\n            }\n        }, [\n            activeListItemUuid,\n            isInKeyboardNavigationGroup,\n            listItemUuids,\n            updateActiveListItemUuid,\n            uuid,\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                data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\n                layout={\n                    shouldAnimateLayout && !shouldPreventLayoutAnimation && !shouldDisableAnimation\n                        ? 'position'\n                        : undefined\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                data-should-show-keyboard-highlighting={\n                    shouldShowKeyboardHighlighting ? 'true' : undefined\n                }\n                tabIndex={tabIndex}\n                onKeyDown={handleKeyDown}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\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={shouldForceHoverItem}\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                        shouldAnimateLayout={\n                            shouldAnimateLayout &&\n                            !shouldPreventLayoutAnimation &&\n                            !shouldDisableAnimation\n                        }\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/ListItem.test.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = require("motion/react");
+var _react3 = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _vitest = require("vitest");
+var _List = _interopRequireDefault(require("../List"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+_vitest.vi.mock('@chayns/textstrings', () => ({
+  useTranslation: () => ({
+    t: textString => typeof textString === 'string' ? textString : textString.fallback
+  })
+}));
+
+/**
+ * Regression guard for the framer-motion layout-projection thrash.
+ *
+ * framer-motions layout projection (`layout` / `layout="position"`) is
+ * viewport-global: all layout-projection nodes share a single projection tree, so
+ * a layout change on *any* node forces a re-measurement of *all* nodes via
+ * `getBoundingClientRect`. With many `ListItem`s this scales linearly with N.
+ *
+ * The tests below render a projection node (`motion.div layout`) *outside* the
+ * list and change its layout. They then count how many `getBoundingClientRect`
+ * calls hit the rendered `ListItem` elements:
+ *  - default (no `shouldAnimateLayout`): the items are not projection nodes, so
+ *    the external change does not re-measure them (reads === 0).
+ *  - `shouldAnimateLayout`: the items join the shared projection tree, so they are
+ *    re-measured by the unrelated external change (reads > 0).
+ */
+
+const ITEM_COUNT = 20;
+let boundingRectCalls;
+let originalGetBoundingClientRect;
+const isInsideList = element => Boolean(element.closest('.beta-chayns-list-item'));
+(0, _vitest.beforeEach)(() => {
+  boundingRectCalls = 0;
+  originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function getBoundingClientRect() {
+    if (isInsideList(this)) {
+      boundingRectCalls += 1;
+    }
+    return originalGetBoundingClientRect.apply(this);
+  };
+});
+(0, _vitest.afterEach)(() => {
+  Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+});
+const theme = {
+  '100-rgb': '255, 255, 255',
+  '102-rgb': '255, 255, 255',
+  'headline-rgb': '0, 0, 0',
+  cardBackgroundOpacity: 1,
+  accordionLines: true,
+  accordionIcon: 'fa-chevron-right',
+  iconStyle: 'fa-regular'
+};
+const Harness = ({
+  shouldAnimateLayout,
+  isExternalExpanded
+}) => /*#__PURE__*/_react3.default.createElement(_styledComponents.ThemeProvider, {
+  theme: theme
+}, /*#__PURE__*/_react3.default.createElement(_react2.motion.div, {
+  layout: true,
+  "data-testid": "outside",
+  style: {
+    height: isExternalExpanded ? 500 : 100
+  }
+}), /*#__PURE__*/_react3.default.createElement(_List.default, null, Array.from({
+  length: ITEM_COUNT
+}, (_, index) => /*#__PURE__*/_react3.default.createElement(_ListItem.default, {
+  key: index,
+  title: `Item ${index}`,
+  shouldAnimateLayout: shouldAnimateLayout
+}))));
+const flushFrames = async () => {
+  await (0, _react.act)(async () => {
+    await new Promise(resolve => {
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve(undefined)));
+    });
+  });
+};
+
+/**
+ * Render the list, then trigger a layout change on the external projection node
+ * and return the number of `getBoundingClientRect` calls that hit the list items.
+ */
+const measureExternalLayoutChange = async shouldAnimateLayout => {
+  const {
+    rerender
+  } = (0, _react.render)(/*#__PURE__*/_react3.default.createElement(Harness, {
+    shouldAnimateLayout: shouldAnimateLayout,
+    isExternalExpanded: false
+  }));
+  await flushFrames();
+  boundingRectCalls = 0;
+  rerender(/*#__PURE__*/_react3.default.createElement(Harness, {
+    shouldAnimateLayout: shouldAnimateLayout,
+    isExternalExpanded: true
+  }));
+  await flushFrames();
+  return boundingRectCalls;
+};
+(0, _vitest.describe)('ListItem layout projection', () => {
+  (0, _vitest.it)('does not re-measure items on external layout changes by default', async () => {
+    const reads = await measureExternalLayoutChange(false);
+    (0, _vitest.expect)(reads).toBe(0);
+  });
+  (0, _vitest.it)('re-measures items on external layout changes when shouldAnimateLayout is set', async () => {
+    const reads = await measureExternalLayoutChange(true);
+    (0, _vitest.expect)(reads).toBeGreaterThan(0);
+  });
+  (0, _vitest.it)('keeps the enter/exit animation for added/removed items without layout projection', async () => {
+    const renderItems = titles => /*#__PURE__*/_react3.default.createElement(_styledComponents.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react3.default.createElement(_List.default, null, titles.map(title => /*#__PURE__*/_react3.default.createElement(_ListItem.default, {
+      key: title,
+      title: title
+    }))));
+    const {
+      rerender,
+      queryByText
+    } = (0, _react.render)(renderItems(['A', 'B', 'C']));
+    await flushFrames();
+
+    // Remove the first item. AnimatePresence must keep it mounted while its
+    // exit (height/opacity) animation runs -- this is independent of the
+    // (disabled) layout projection.
+    rerender(renderItems(['B', 'C']));
+    (0, _vitest.expect)(queryByText('A')).not.toBeNull();
+  });
+});
+//# sourceMappingURL=ListItem.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.test.js","names":["_react","require","_react2","_react3","_interopRequireDefault","_styledComponents","_vitest","_List","_ListItem","e","__esModule","default","vi","mock","useTranslation","t","textString","fallback","ITEM_COUNT","boundingRectCalls","originalGetBoundingClientRect","isInsideList","element","Boolean","closest","beforeEach","Element","prototype","getBoundingClientRect","apply","afterEach","theme","cardBackgroundOpacity","accordionLines","accordionIcon","iconStyle","Harness","shouldAnimateLayout","isExternalExpanded","createElement","ThemeProvider","motion","div","layout","style","height","Array","from","length","_","index","key","title","flushFrames","act","Promise","resolve","requestAnimationFrame","undefined","measureExternalLayoutChange","rerender","render","describe","it","reads","expect","toBe","toBeGreaterThan","renderItems","titles","map","queryByText","not","toBeNull"],"sources":["../../../../../src/components/list/list-item/ListItem.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { act, render } from '@testing-library/react';\nimport { motion } from 'motion/react';\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport List from '../List';\nimport ListItem from './ListItem';\n\nvi.mock('@chayns/textstrings', () => ({\n    useTranslation: () => ({\n        t: (textString: { fallback?: string } | string) =>\n            typeof textString === 'string' ? textString : textString.fallback,\n    }),\n}));\n\n/**\n * Regression guard for the framer-motion layout-projection thrash.\n *\n * framer-motions layout projection (`layout` / `layout=\"position\"`) is\n * viewport-global: all layout-projection nodes share a single projection tree, so\n * a layout change on *any* node forces a re-measurement of *all* nodes via\n * `getBoundingClientRect`. With many `ListItem`s this scales linearly with N.\n *\n * The tests below render a projection node (`motion.div layout`) *outside* the\n * list and change its layout. They then count how many `getBoundingClientRect`\n * calls hit the rendered `ListItem` elements:\n *  - default (no `shouldAnimateLayout`): the items are not projection nodes, so\n *    the external change does not re-measure them (reads === 0).\n *  - `shouldAnimateLayout`: the items join the shared projection tree, so they are\n *    re-measured by the unrelated external change (reads > 0).\n */\n\nconst ITEM_COUNT = 20;\n\nlet boundingRectCalls: number;\nlet originalGetBoundingClientRect: typeof Element.prototype.getBoundingClientRect;\n\nconst isInsideList = (element: Element) => Boolean(element.closest('.beta-chayns-list-item'));\n\nbeforeEach(() => {\n    boundingRectCalls = 0;\n    originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;\n\n    Element.prototype.getBoundingClientRect = function getBoundingClientRect(\n        this: Element,\n    ): DOMRect {\n        if (isInsideList(this)) {\n            boundingRectCalls += 1;\n        }\n\n        return originalGetBoundingClientRect.apply(this) as DOMRect;\n    };\n});\n\nafterEach(() => {\n    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;\n});\n\nconst theme = {\n    '100-rgb': '255, 255, 255',\n    '102-rgb': '255, 255, 255',\n    'headline-rgb': '0, 0, 0',\n    cardBackgroundOpacity: 1,\n    accordionLines: true,\n    accordionIcon: 'fa-chevron-right',\n    iconStyle: 'fa-regular',\n} as unknown as Theme;\n\ntype HarnessProps = {\n    shouldAnimateLayout: boolean;\n    isExternalExpanded: boolean;\n};\n\nconst Harness = ({ shouldAnimateLayout, isExternalExpanded }: HarnessProps) => (\n    <ThemeProvider theme={theme}>\n        {/* A layout-projection node completely outside of the list. */}\n        <motion.div\n            layout\n            data-testid=\"outside\"\n            style={{ height: isExternalExpanded ? 500 : 100 }}\n        />\n        <List>\n            {Array.from({ length: ITEM_COUNT }, (_, index) => (\n                <ListItem\n                    key={index}\n                    title={`Item ${index}`}\n                    shouldAnimateLayout={shouldAnimateLayout}\n                />\n            ))}\n        </List>\n    </ThemeProvider>\n);\n\nconst flushFrames = async () => {\n    await act(async () => {\n        await new Promise((resolve) => {\n            requestAnimationFrame(() => requestAnimationFrame(() => resolve(undefined)));\n        });\n    });\n};\n\n/**\n * Render the list, then trigger a layout change on the external projection node\n * and return the number of `getBoundingClientRect` calls that hit the list items.\n */\nconst measureExternalLayoutChange = async (shouldAnimateLayout: boolean) => {\n    const { rerender } = render(\n        <Harness shouldAnimateLayout={shouldAnimateLayout} isExternalExpanded={false} />,\n    );\n\n    await flushFrames();\n\n    boundingRectCalls = 0;\n\n    rerender(<Harness shouldAnimateLayout={shouldAnimateLayout} isExternalExpanded />);\n\n    await flushFrames();\n\n    return boundingRectCalls;\n};\n\ndescribe('ListItem layout projection', () => {\n    it('does not re-measure items on external layout changes by default', async () => {\n        const reads = await measureExternalLayoutChange(false);\n\n        expect(reads).toBe(0);\n    });\n\n    it('re-measures items on external layout changes when shouldAnimateLayout is set', async () => {\n        const reads = await measureExternalLayoutChange(true);\n\n        expect(reads).toBeGreaterThan(0);\n    });\n\n    it('keeps the enter/exit animation for added/removed items without layout projection', async () => {\n        const renderItems = (titles: string[]) => (\n            <ThemeProvider theme={theme}>\n                <List>\n                    {titles.map((title) => (\n                        <ListItem key={title} title={title} />\n                    ))}\n                </List>\n            </ThemeProvider>\n        );\n\n        const { rerender, queryByText } = render(renderItems(['A', 'B', 'C']));\n\n        await flushFrames();\n\n        // Remove the first item. AnimatePresence must keep it mounted while its\n        // exit (height/opacity) animation runs -- this is independent of the\n        // (disabled) layout projection.\n        rerender(renderItems(['B', 'C']));\n\n        expect(queryByText('A')).not.toBeNull();\n    });\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -45,6 +45,7 @@ const ListItemHead = ({
   titleElement,
   setShouldEnableTooltip,
   shouldDisableAnimation = false,
+  shouldAnimateLayout = false,
   cornerElement,
   onTitleWidthChange,
   onImageError,
@@ -165,7 +166,7 @@ const ListItemHead = ({
     $isOpen: isOpen
   }, /*#__PURE__*/_react2.default.createElement(_react.LayoutGroup, null, /*#__PURE__*/_react2.default.createElement(_ListItemHead.StyledListItemHeadTitle, {
     as: shouldDisableAnimation ? undefined : _react.motion.div,
-    layout: "position"
+    layout: shouldAnimateLayout ? 'position' : undefined
   }, hasTitleInput ?
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-no-constructed-context-values

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

@@ -1 +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","leftElementRef","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","shouldShowHoverItemContent","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","StyledListItemHeadLeftElements","ref","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    StyledListItemHeadLeftElements,\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    const leftElementRef = useRef<HTMLDivElement>(null);\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    const shouldShowHoverItemContent = !!(shouldForceHover || shouldShowHoverItem);\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                    <StyledListItemHeadLeftElements ref={leftElementRef} data-left-element=\"true\">\n                        {leftElements}\n                    </StyledListItemHeadLeftElements>\n                )}\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 && shouldShowHoverItemContent && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: 8,\n                        opacity: 1,\n                        width: 'auto',\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemHead.js","names":["_react","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","shouldAnimateLayout","cornerElement","onTitleWidthChange","onImageError","onTitleInputChange","titleInputProps","shouldShowHoverItem","setShouldShowHoverItem","useState","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","useRef","resizeSkipRef","leftElementRef","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","shouldShowHoverItemContent","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","StyledListItemHeadLeftElements","ref","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    StyledListItemHeadLeftElements,\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    shouldAnimateLayout?: 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    shouldAnimateLayout = 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    const leftElementRef = useRef<HTMLDivElement>(null);\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    const shouldShowHoverItemContent = !!(shouldForceHover || shouldShowHoverItem);\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                    <StyledListItemHeadLeftElements ref={leftElementRef} data-left-element=\"true\">\n                        {leftElements}\n                    </StyledListItemHeadLeftElements>\n                )}\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={shouldAnimateLayout ? 'position' : undefined}\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 && shouldShowHoverItemContent && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: 8,\n                        opacity: 1,\n                        width: 'auto',\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -41,6 +41,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
   shouldOpenImageOnClick = false,
   shouldHideImageOrIconBackground,
   shouldHideIndicator = false,
+  shouldAnimateLayout = false,
   shouldPreventLayoutAnimation = false,
   shouldRenderClosed = false,
   shouldShowRoundImageOrIcon,
@@ -222,7 +223,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
     key: `list-item-${uuid}`,
     ref: listItemRef,
     "data-uuid": `${listGroupUuid ?? ''}---${uuid}`,
-    layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
+    layout: shouldAnimateLayout && !shouldPreventLayoutAnimation && !shouldDisableAnimation ? 'position' : undefined,
     $backgroundColor: backgroundColor,
     $isClickable: isClickable,
     $isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !areaProvider.shouldDisableListItemPadding,
@@ -279,6 +280,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
     titleElement: titleElement,
     setShouldEnableTooltip: setShouldEnableTooltip,
     shouldDisableAnimation: shouldDisableAnimation,
+    shouldAnimateLayout: shouldAnimateLayout && !shouldPreventLayoutAnimation && !shouldDisableAnimation,
     onImageError: onImageError
   })), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useUuid","AccordionContext","AreaContextProvider","AreaContext","useColorScheme","ListContext","handleHorizontalArrowNavigation","handleListItemTabNavigation","handleListItemToggleKey","handleVerticalListGroupNavigation","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","useFocusRingPortal","useKeyboardFocusHighlighting","useListItemFocus","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","shouldEnableKeyboardHighlighting","shouldEnableKeyboardHighlightingProp","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlightingContext","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","colorScheme","theme","isInsideListContext","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","shouldShowKeyboardHighlighting","isEnabled","borderRadius","cardBorderRadius","isInKeyboardNavigationGroup","tabIndex","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","currentUuid","toggleItem","some","handleKey","isFocusWithinListItem","handleFocus","handleBlur","shouldForceHoverItem","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","onKeyDown","onFocus","onBlur","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    KeyboardEvent,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\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 { type Theme, useColorScheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ListContext } from '../List';\nimport {\n    handleHorizontalArrowNavigation,\n    handleListItemTabNavigation,\n    handleListItemToggleKey,\n    handleVerticalListGroupNavigation,\n} from '../List.utils';\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';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\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     * Enables keyboard-only focus highlighting. Overrides the value from the List context.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\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            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp,\n        },\n        ref,\n    ) => {\n        const {\n            isAnyItemExpandable,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,\n            listGroupUuid,\n            listItemUuids,\n            registerListItemUuid,\n            unregisterListItemUuid,\n            activeListItemUuid,\n            updateActiveListItemUuid,\n        } = useContext(ListContext);\n        const colorScheme = useColorScheme();\n        const theme = useTheme() as Theme;\n        const isInsideListContext = typeof listGroupUuid === 'string';\n\n        const shouldEnableKeyboardHighlighting =\n            shouldEnableKeyboardHighlightingProp ??\n            (isInsideListContext\n                ? shouldEnableKeyboardHighlightingContext\n                : (colorScheme?.shouldEnableKeyboardHighlighting ?? false));\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        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n        useFocusRingPortal(listItemRef, {\n            isEnabled: shouldShowKeyboardHighlighting,\n            borderRadius: `${theme.cardBorderRadius}px`,\n        });\n\n        const isInKeyboardNavigationGroup =\n            shouldEnableKeyboardHighlighting &&\n            typeof listGroupUuid === 'string' &&\n            typeof updateActiveListItemUuid === 'function';\n\n        useEffect(() => {\n            if (\n                shouldEnableKeyboardHighlighting &&\n                typeof registerListItemUuid === 'function' &&\n                typeof unregisterListItemUuid === 'function'\n            ) {\n                registerListItemUuid(uuid);\n\n                return () => {\n                    unregisterListItemUuid(uuid);\n                };\n            }\n\n            return undefined;\n        }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n        const tabIndex = useMemo(\n            () => (shouldEnableKeyboardHighlighting ? 0 : -1),\n            [shouldEnableKeyboardHighlighting],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                const isCurrentListItemTarget = event.currentTarget === event.target;\n                const currentListItemElement = event.currentTarget as HTMLDivElement;\n                const targetElement = event.target as HTMLElement | null;\n\n                [\n                    () =>\n                        shouldEnableKeyboardHighlighting &&\n                        handleHorizontalArrowNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                        }),\n                    () =>\n                        handleListItemTabNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleVerticalListGroupNavigation({\n                            event,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleListItemToggleKey({\n                            event,\n                            isCurrentListItemTarget,\n                            isExpandable,\n                            isItemOpen,\n                            shouldEnableKeyboardHighlighting,\n                            toggleItem: () =>\n                                handleHeadClick(\n                                    event as unknown as React.MouseEvent<HTMLDivElement>,\n                                ),\n                        }),\n                ].some((handleKey) => handleKey());\n            },\n            [\n                handleHeadClick,\n                isExpandable,\n                isInKeyboardNavigationGroup,\n                isItemOpen,\n                listGroupUuid,\n                listItemUuids,\n                shouldEnableKeyboardHighlighting,\n                updateActiveListItemUuid,\n                uuid,\n            ],\n        );\n\n        const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n            uuid,\n            listGroupUuid,\n            isInKeyboardNavigationGroup,\n            updateActiveListItemUuid,\n        });\n        const shouldForceHoverItem = shouldForceHover || isFocusWithinListItem;\n\n        useEffect(() => {\n            if (\n                isInKeyboardNavigationGroup &&\n                activeListItemUuid == null &&\n                typeof updateActiveListItemUuid === 'function' &&\n                listItemUuids?.[0] === uuid\n            ) {\n                updateActiveListItemUuid(uuid);\n            }\n        }, [\n            activeListItemUuid,\n            isInKeyboardNavigationGroup,\n            listItemUuids,\n            updateActiveListItemUuid,\n            uuid,\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                data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\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                data-should-show-keyboard-highlighting={\n                    shouldShowKeyboardHighlighting ? 'true' : undefined\n                }\n                tabIndex={tabIndex}\n                onKeyDown={handleKeyDown}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\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={shouldForceHoverItem}\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":[]}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useUuid","AccordionContext","AreaContextProvider","AreaContext","useColorScheme","ListContext","handleHorizontalArrowNavigation","handleListItemTabNavigation","handleListItemToggleKey","handleVerticalListGroupNavigation","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","useFocusRingPortal","useKeyboardFocusHighlighting","useListItemFocus","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","shouldAnimateLayout","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","shouldEnableKeyboardHighlighting","shouldEnableKeyboardHighlightingProp","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlightingContext","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","colorScheme","theme","isInsideListContext","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","shouldShowKeyboardHighlighting","isEnabled","borderRadius","cardBorderRadius","isInKeyboardNavigationGroup","tabIndex","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","currentUuid","toggleItem","some","handleKey","isFocusWithinListItem","handleFocus","handleBlur","shouldForceHoverItem","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","onKeyDown","onFocus","onBlur","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    KeyboardEvent,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\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 { type Theme, useColorScheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ListContext } from '../List';\nimport {\n    handleHorizontalArrowNavigation,\n    handleListItemTabNavigation,\n    handleListItemToggleKey,\n    handleVerticalListGroupNavigation,\n} from '../List.utils';\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';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\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 framer-motion layout projection (`layout=\"position\"`) should be\n     * enabled. This animates the `ListItem` smoothly into its new position when\n     * sibling items are reordered, expanded or resized.\n     *\n     * This is opt-in and disabled by default, because framer-motions layout\n     * projection is viewport-global: every layout change anywhere in the document\n     * (window resize, height animation, ...) forces a re-measurement of **all**\n     * layout-projection nodes via `getBoundingClientRect`. In lists with many\n     * `ListItem`s this scales linearly and causes noticeable layout thrash. The\n     * enter/exit height/opacity animation is unaffected and stays enabled.\n     */\n    shouldAnimateLayout?: 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     * @deprecated The layout projection is now disabled by default. Use\n     * `shouldAnimateLayout` to opt into it instead. When set to `true`, this\n     * prop keeps forcing the layout projection off.\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     * Enables keyboard-only focus highlighting. Overrides the value from the List context.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\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            shouldAnimateLayout = 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            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp,\n        },\n        ref,\n    ) => {\n        const {\n            isAnyItemExpandable,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n            shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,\n            listGroupUuid,\n            listItemUuids,\n            registerListItemUuid,\n            unregisterListItemUuid,\n            activeListItemUuid,\n            updateActiveListItemUuid,\n        } = useContext(ListContext);\n        const colorScheme = useColorScheme();\n        const theme = useTheme() as Theme;\n        const isInsideListContext = typeof listGroupUuid === 'string';\n\n        const shouldEnableKeyboardHighlighting =\n            shouldEnableKeyboardHighlightingProp ??\n            (isInsideListContext\n                ? shouldEnableKeyboardHighlightingContext\n                : (colorScheme?.shouldEnableKeyboardHighlighting ?? false));\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        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n        useFocusRingPortal(listItemRef, {\n            isEnabled: shouldShowKeyboardHighlighting,\n            borderRadius: `${theme.cardBorderRadius}px`,\n        });\n\n        const isInKeyboardNavigationGroup =\n            shouldEnableKeyboardHighlighting &&\n            typeof listGroupUuid === 'string' &&\n            typeof updateActiveListItemUuid === 'function';\n\n        useEffect(() => {\n            if (\n                shouldEnableKeyboardHighlighting &&\n                typeof registerListItemUuid === 'function' &&\n                typeof unregisterListItemUuid === 'function'\n            ) {\n                registerListItemUuid(uuid);\n\n                return () => {\n                    unregisterListItemUuid(uuid);\n                };\n            }\n\n            return undefined;\n        }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n        const tabIndex = useMemo(\n            () => (shouldEnableKeyboardHighlighting ? 0 : -1),\n            [shouldEnableKeyboardHighlighting],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                const isCurrentListItemTarget = event.currentTarget === event.target;\n                const currentListItemElement = event.currentTarget as HTMLDivElement;\n                const targetElement = event.target as HTMLElement | null;\n\n                [\n                    () =>\n                        shouldEnableKeyboardHighlighting &&\n                        handleHorizontalArrowNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                        }),\n                    () =>\n                        handleListItemTabNavigation({\n                            event,\n                            currentListItemElement,\n                            targetElement,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleVerticalListGroupNavigation({\n                            event,\n                            isCurrentListItemTarget,\n                            isInKeyboardNavigationGroup,\n                            listItemUuids,\n                            currentUuid: uuid,\n                            listGroupUuid,\n                            updateActiveListItemUuid,\n                        }),\n                    () =>\n                        handleListItemToggleKey({\n                            event,\n                            isCurrentListItemTarget,\n                            isExpandable,\n                            isItemOpen,\n                            shouldEnableKeyboardHighlighting,\n                            toggleItem: () =>\n                                handleHeadClick(\n                                    event as unknown as React.MouseEvent<HTMLDivElement>,\n                                ),\n                        }),\n                ].some((handleKey) => handleKey());\n            },\n            [\n                handleHeadClick,\n                isExpandable,\n                isInKeyboardNavigationGroup,\n                isItemOpen,\n                listGroupUuid,\n                listItemUuids,\n                shouldEnableKeyboardHighlighting,\n                updateActiveListItemUuid,\n                uuid,\n            ],\n        );\n\n        const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n            uuid,\n            listGroupUuid,\n            isInKeyboardNavigationGroup,\n            updateActiveListItemUuid,\n        });\n        const shouldForceHoverItem = shouldForceHover || isFocusWithinListItem;\n\n        useEffect(() => {\n            if (\n                isInKeyboardNavigationGroup &&\n                activeListItemUuid == null &&\n                typeof updateActiveListItemUuid === 'function' &&\n                listItemUuids?.[0] === uuid\n            ) {\n                updateActiveListItemUuid(uuid);\n            }\n        }, [\n            activeListItemUuid,\n            isInKeyboardNavigationGroup,\n            listItemUuids,\n            updateActiveListItemUuid,\n            uuid,\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                data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\n                layout={\n                    shouldAnimateLayout && !shouldPreventLayoutAnimation && !shouldDisableAnimation\n                        ? 'position'\n                        : undefined\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                data-should-show-keyboard-highlighting={\n                    shouldShowKeyboardHighlighting ? 'true' : undefined\n                }\n                tabIndex={tabIndex}\n                onKeyDown={handleKeyDown}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\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={shouldForceHoverItem}\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                        shouldAnimateLayout={\n                            shouldAnimateLayout &&\n                            !shouldPreventLayoutAnimation &&\n                            !shouldDisableAnimation\n                        }\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/ListItem.test.js

@@ -0,0 +1,133 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { act, render } from '@testing-library/react';
+import { motion } from 'motion/react';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import List from '../List';
+import ListItem from './ListItem';
+vi.mock('@chayns/textstrings', () => ({
+  useTranslation: () => ({
+    t: textString => typeof textString === 'string' ? textString : textString.fallback
+  })
+}));
+
+/**
+ * Regression guard for the framer-motion layout-projection thrash.
+ *
+ * framer-motions layout projection (`layout` / `layout="position"`) is
+ * viewport-global: all layout-projection nodes share a single projection tree, so
+ * a layout change on *any* node forces a re-measurement of *all* nodes via
+ * `getBoundingClientRect`. With many `ListItem`s this scales linearly with N.
+ *
+ * The tests below render a projection node (`motion.div layout`) *outside* the
+ * list and change its layout. They then count how many `getBoundingClientRect`
+ * calls hit the rendered `ListItem` elements:
+ *  - default (no `shouldAnimateLayout`): the items are not projection nodes, so
+ *    the external change does not re-measure them (reads === 0).
+ *  - `shouldAnimateLayout`: the items join the shared projection tree, so they are
+ *    re-measured by the unrelated external change (reads > 0).
+ */
+
+const ITEM_COUNT = 20;
+let boundingRectCalls;
+let originalGetBoundingClientRect;
+const isInsideList = element => Boolean(element.closest('.beta-chayns-list-item'));
+beforeEach(() => {
+  boundingRectCalls = 0;
+  originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function getBoundingClientRect() {
+    if (isInsideList(this)) {
+      boundingRectCalls += 1;
+    }
+    return originalGetBoundingClientRect.apply(this);
+  };
+});
+afterEach(() => {
+  Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+});
+const theme = {
+  '100-rgb': '255, 255, 255',
+  '102-rgb': '255, 255, 255',
+  'headline-rgb': '0, 0, 0',
+  cardBackgroundOpacity: 1,
+  accordionLines: true,
+  accordionIcon: 'fa-chevron-right',
+  iconStyle: 'fa-regular'
+};
+const Harness = ({
+  shouldAnimateLayout,
+  isExternalExpanded
+}) => /*#__PURE__*/React.createElement(ThemeProvider, {
+  theme: theme
+}, /*#__PURE__*/React.createElement(motion.div, {
+  layout: true,
+  "data-testid": "outside",
+  style: {
+    height: isExternalExpanded ? 500 : 100
+  }
+}), /*#__PURE__*/React.createElement(List, null, Array.from({
+  length: ITEM_COUNT
+}, (_, index) => /*#__PURE__*/React.createElement(ListItem, {
+  key: index,
+  title: `Item ${index}`,
+  shouldAnimateLayout: shouldAnimateLayout
+}))));
+const flushFrames = async () => {
+  await act(async () => {
+    await new Promise(resolve => {
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve(undefined)));
+    });
+  });
+};
+
+/**
+ * Render the list, then trigger a layout change on the external projection node
+ * and return the number of `getBoundingClientRect` calls that hit the list items.
+ */
+const measureExternalLayoutChange = async shouldAnimateLayout => {
+  const {
+    rerender
+  } = render(/*#__PURE__*/React.createElement(Harness, {
+    shouldAnimateLayout: shouldAnimateLayout,
+    isExternalExpanded: false
+  }));
+  await flushFrames();
+  boundingRectCalls = 0;
+  rerender(/*#__PURE__*/React.createElement(Harness, {
+    shouldAnimateLayout: shouldAnimateLayout,
+    isExternalExpanded: true
+  }));
+  await flushFrames();
+  return boundingRectCalls;
+};
+describe('ListItem layout projection', () => {
+  it('does not re-measure items on external layout changes by default', async () => {
+    const reads = await measureExternalLayoutChange(false);
+    expect(reads).toBe(0);
+  });
+  it('re-measures items on external layout changes when shouldAnimateLayout is set', async () => {
+    const reads = await measureExternalLayoutChange(true);
+    expect(reads).toBeGreaterThan(0);
+  });
+  it('keeps the enter/exit animation for added/removed items without layout projection', async () => {
+    const renderItems = titles => /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(List, null, titles.map(title => /*#__PURE__*/React.createElement(ListItem, {
+      key: title,
+      title: title
+    }))));
+    const {
+      rerender,
+      queryByText
+    } = render(renderItems(['A', 'B', 'C']));
+    await flushFrames();
+
+    // Remove the first item. AnimatePresence must keep it mounted while its
+    // exit (height/opacity) animation runs -- this is independent of the
+    // (disabled) layout projection.
+    rerender(renderItems(['B', 'C']));
+    expect(queryByText('A')).not.toBeNull();
+  });
+});
+//# sourceMappingURL=ListItem.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.test.js","names":["act","render","motion","React","ThemeProvider","afterEach","beforeEach","describe","expect","it","vi","List","ListItem","mock","useTranslation","t","textString","fallback","ITEM_COUNT","boundingRectCalls","originalGetBoundingClientRect","isInsideList","element","Boolean","closest","Element","prototype","getBoundingClientRect","apply","theme","cardBackgroundOpacity","accordionLines","accordionIcon","iconStyle","Harness","shouldAnimateLayout","isExternalExpanded","createElement","div","layout","style","height","Array","from","length","_","index","key","title","flushFrames","Promise","resolve","requestAnimationFrame","undefined","measureExternalLayoutChange","rerender","reads","toBe","toBeGreaterThan","renderItems","titles","map","queryByText","not","toBeNull"],"sources":["../../../../../src/components/list/list-item/ListItem.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { act, render } from '@testing-library/react';\nimport { motion } from 'motion/react';\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport List from '../List';\nimport ListItem from './ListItem';\n\nvi.mock('@chayns/textstrings', () => ({\n    useTranslation: () => ({\n        t: (textString: { fallback?: string } | string) =>\n            typeof textString === 'string' ? textString : textString.fallback,\n    }),\n}));\n\n/**\n * Regression guard for the framer-motion layout-projection thrash.\n *\n * framer-motions layout projection (`layout` / `layout=\"position\"`) is\n * viewport-global: all layout-projection nodes share a single projection tree, so\n * a layout change on *any* node forces a re-measurement of *all* nodes via\n * `getBoundingClientRect`. With many `ListItem`s this scales linearly with N.\n *\n * The tests below render a projection node (`motion.div layout`) *outside* the\n * list and change its layout. They then count how many `getBoundingClientRect`\n * calls hit the rendered `ListItem` elements:\n *  - default (no `shouldAnimateLayout`): the items are not projection nodes, so\n *    the external change does not re-measure them (reads === 0).\n *  - `shouldAnimateLayout`: the items join the shared projection tree, so they are\n *    re-measured by the unrelated external change (reads > 0).\n */\n\nconst ITEM_COUNT = 20;\n\nlet boundingRectCalls: number;\nlet originalGetBoundingClientRect: typeof Element.prototype.getBoundingClientRect;\n\nconst isInsideList = (element: Element) => Boolean(element.closest('.beta-chayns-list-item'));\n\nbeforeEach(() => {\n    boundingRectCalls = 0;\n    originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;\n\n    Element.prototype.getBoundingClientRect = function getBoundingClientRect(\n        this: Element,\n    ): DOMRect {\n        if (isInsideList(this)) {\n            boundingRectCalls += 1;\n        }\n\n        return originalGetBoundingClientRect.apply(this) as DOMRect;\n    };\n});\n\nafterEach(() => {\n    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;\n});\n\nconst theme = {\n    '100-rgb': '255, 255, 255',\n    '102-rgb': '255, 255, 255',\n    'headline-rgb': '0, 0, 0',\n    cardBackgroundOpacity: 1,\n    accordionLines: true,\n    accordionIcon: 'fa-chevron-right',\n    iconStyle: 'fa-regular',\n} as unknown as Theme;\n\ntype HarnessProps = {\n    shouldAnimateLayout: boolean;\n    isExternalExpanded: boolean;\n};\n\nconst Harness = ({ shouldAnimateLayout, isExternalExpanded }: HarnessProps) => (\n    <ThemeProvider theme={theme}>\n        {/* A layout-projection node completely outside of the list. */}\n        <motion.div\n            layout\n            data-testid=\"outside\"\n            style={{ height: isExternalExpanded ? 500 : 100 }}\n        />\n        <List>\n            {Array.from({ length: ITEM_COUNT }, (_, index) => (\n                <ListItem\n                    key={index}\n                    title={`Item ${index}`}\n                    shouldAnimateLayout={shouldAnimateLayout}\n                />\n            ))}\n        </List>\n    </ThemeProvider>\n);\n\nconst flushFrames = async () => {\n    await act(async () => {\n        await new Promise((resolve) => {\n            requestAnimationFrame(() => requestAnimationFrame(() => resolve(undefined)));\n        });\n    });\n};\n\n/**\n * Render the list, then trigger a layout change on the external projection node\n * and return the number of `getBoundingClientRect` calls that hit the list items.\n */\nconst measureExternalLayoutChange = async (shouldAnimateLayout: boolean) => {\n    const { rerender } = render(\n        <Harness shouldAnimateLayout={shouldAnimateLayout} isExternalExpanded={false} />,\n    );\n\n    await flushFrames();\n\n    boundingRectCalls = 0;\n\n    rerender(<Harness shouldAnimateLayout={shouldAnimateLayout} isExternalExpanded />);\n\n    await flushFrames();\n\n    return boundingRectCalls;\n};\n\ndescribe('ListItem layout projection', () => {\n    it('does not re-measure items on external layout changes by default', async () => {\n        const reads = await measureExternalLayoutChange(false);\n\n        expect(reads).toBe(0);\n    });\n\n    it('re-measures items on external layout changes when shouldAnimateLayout is set', async () => {\n        const reads = await measureExternalLayoutChange(true);\n\n        expect(reads).toBeGreaterThan(0);\n    });\n\n    it('keeps the enter/exit animation for added/removed items without layout projection', async () => {\n        const renderItems = (titles: string[]) => (\n            <ThemeProvider theme={theme}>\n                <List>\n                    {titles.map((title) => (\n                        <ListItem key={title} title={title} />\n                    ))}\n                </List>\n            </ThemeProvider>\n        );\n\n        const { rerender, queryByText } = render(renderItems(['A', 'B', 'C']));\n\n        await flushFrames();\n\n        // Remove the first item. AnimatePresence must keep it mounted while its\n        // exit (height/opacity) animation runs -- this is independent of the\n        // (disabled) layout projection.\n        rerender(renderItems(['B', 'C']));\n\n        expect(queryByText('A')).not.toBeNull();\n    });\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -37,6 +37,7 @@ const ListItemHead = ({
   titleElement,
   setShouldEnableTooltip,
   shouldDisableAnimation = false,
+  shouldAnimateLayout = false,
   cornerElement,
   onTitleWidthChange,
   onImageError,
@@ -156,7 +157,7 @@ const ListItemHead = ({
     $isOpen: isOpen
   }, /*#__PURE__*/React.createElement(LayoutGroup, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, {
     as: shouldDisableAnimation ? undefined : motion.div,
-    layout: "position"
+    layout: shouldAnimateLayout ? 'position' : undefined
   }, hasTitleInput ?
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-no-constructed-context-values

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useContext","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftElements","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","leftElementRef","theme","areaProvider","hasTitleInput","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","shouldShowHoverItemContent","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","ref","$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    StyledListItemHeadLeftElements,\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    const leftElementRef = useRef<HTMLDivElement>(null);\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    const shouldShowHoverItemContent = !!(shouldForceHover || shouldShowHoverItem);\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                    <StyledListItemHeadLeftElements ref={leftElementRef} data-left-element=\"true\">\n                        {leftElements}\n                    </StyledListItemHeadLeftElements>\n                )}\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 && shouldShowHoverItemContent && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: 8,\n                        opacity: 1,\n                        width: 'auto',\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    <StyledMotionListItemHeadHoverItem>\n                        {hoverItem}\n                    </StyledMotionListItemHeadHoverItem>\n                </StyledMotionListItemHeadHoverItemWrapper>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useContext","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftElements","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","shouldAnimateLayout","cornerElement","onTitleWidthChange","onImageError","onTitleInputChange","titleInputProps","shouldShowHoverItem","setShouldShowHoverItem","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","resizeSkipRef","leftElementRef","theme","areaProvider","hasTitleInput","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","shouldShowHoverItemContent","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","ref","$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    StyledListItemHeadLeftElements,\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    shouldAnimateLayout?: 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    shouldAnimateLayout = 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    const leftElementRef = useRef<HTMLDivElement>(null);\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    const shouldShowHoverItemContent = !!(shouldForceHover || shouldShowHoverItem);\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                    <StyledListItemHeadLeftElements ref={leftElementRef} data-left-element=\"true\">\n                        {leftElements}\n                    </StyledListItemHeadLeftElements>\n                )}\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={shouldAnimateLayout ? 'position' : undefined}\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 && shouldShowHoverItemContent && (\n                <StyledMotionListItemHeadHoverItemWrapper\n                    className=\"beta-chayns-list-item-hover-item\"\n                    animate={{\n                        marginLeft: 8,\n                        opacity: 1,\n                        width: 'auto',\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":";AAAA,SAASA,WAAW,EAAEC,MAAM,QAAQ,cAAc;AAClD,OAAOC,KAAK,IAQRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AAGd,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,6BAA6B,EAC7BC,0BAA0B,EAC1BC,uBAAuB,EACvBC,mCAAmC,EACnCC,iCAAiC,EACjCC,wCAAwC,QACrC,uBAAuB;AAC9B,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,gBAAgB,MAAM,uCAAuC;AACpE,OAAOC,oBAAoB,MAAM,gDAAgD;AACjF,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,SAASC,iBAAiB,QAAQ,2BAA2B;AAC7D,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,OAAOC,KAAK,MAAM,sBAAsB;AACxC,SAASC,WAAW,QAAQ,4CAA4C;AAmCxE,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,gBAAgB;EAChBC,WAAW;EACXC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,MAAM;EACNC,mBAAmB;EACnBC,YAAY;EACZC,MAAM;EACNC,aAAa;EACbC,YAAY;EACZC,OAAO;EACPC,WAAW;EACXC,aAAa;EACbC,+BAA+B;EAC/BC,mBAAmB;EACnBC,sBAAsB;EACtBC,0BAA0B;EAC1BC,QAAQ;EACRC,gBAAgB;EAChBC,KAAK;EACLC,YAAY;EACZC,sBAAsB;EACtBC,sBAAsB,GAAG,KAAK;EAC9BC,mBAAmB,GAAG,KAAK;EAC3BC,aAAa;EACbC,kBAAkB;EAClBC,YAAY;EACZC,kBAAkB;EAClBC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGrD,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAM,CAACsD,aAAa,EAAEC,gBAAgB,CAAC,GAAGvD,QAAQ,CAAC,CAAC,CAAC;EACrD,MAAM,CAACwD,UAAU,EAAEC,aAAa,CAAC,GAAGzD,QAAQ,CAAC,CAAC,CAAC;EAE/C,MAAM0D,mBAAmB,GAAG3D,MAAM,CAAS,CAAC;EAC5C,MAAM4D,aAAa,GAAG5D,MAAM,CAAC,IAAI,CAAC;EAClC,MAAM6D,cAAc,GAAG7D,MAAM,CAAiB,IAAI,CAAC;EAEnD,MAAM8D,KAAK,GAAG7C,QAAQ,CAAC,CAAU;EACjC,MAAM8C,YAAY,GAAGlE,UAAU,CAACwB,WAAW,CAAC;EAE5C,MAAM2C,aAAa,GAAG,OAAOb,kBAAkB,KAAK,UAAU;EAE9D,MAAMc,qBAAqB,GACtB,CAACD,aAAa,KAAKvB,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,CAAC,IAC5D,OAAOL,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAc;EAErF,MAAM8B,wBAAwB,GAAGnE,OAAO,CACpC,MAAM,CAAC0C,QAAQ,IAAI,CAACuB,aAAa,EACjC,CAACA,aAAa,EAAEvB,QAAQ,CAC5B,CAAC;EAED3C,SAAS,CAAC,MAAM;IACZqE,MAAM,CAACC,UAAU,CAAC,MAAM;MACpBR,aAAa,CAACS,OAAO,GAAG,KAAK;IACjC,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,EAAE,CAAC;EAENvE,SAAS,CAAC,MAAM;IACZmD,kBAAkB,CAACQ,UAAU,EAAEF,aAAa,CAAC;EACjD,CAAC,EAAE,CAACN,kBAAkB,EAAEM,aAAa,EAAEE,UAAU,CAAC,CAAC;EAEnD,MAAMa,uBAAuB,GAAG1E,WAAW,CACtC2E,OAA8B,IAAK;IAChCb,aAAa,CAACa,OAAO,CAAC,CAAC,CAAC,EAAEC,MAAM,CAACC,WAAW,IAAI,CAAC,CAAC;IAElD,IAAIb,aAAa,CAACS,OAAO,EAAE;MACvB;IACJ;IAEA,MAAMK,EAAE,GAAGH,OAAO,CAAC,CAAC,CAAC,EAAEC,MAAM;IAC7B,IAAI,CAACE,EAAE,EAAE;IACT7B,sBAAsB,CAAC6B,EAAE,CAACC,WAAW,GAAGD,EAAE,CAACD,WAAW,CAAC;EAC3D,CAAC,EACD,CAAC5B,sBAAsB,CAC3B,CAAC;EAED,MAAM+B,gBAAgB,GAAGhF,WAAW,CAAC,MAAM0D,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAE5E,MAAMuB,gBAAgB,GAAGjF,WAAW,CAAC,MAAM0D,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAE7E,MAAMwB,gBAAgB,GAAGlF,WAAW,CAC/BmF,KAAK,IAAK;IACPpB,mBAAmB,CAACU,OAAO,GAAGF,MAAM,CAACC,UAAU,CAAC,MAAM;MAClD,IAAI,OAAOjC,WAAW,KAAK,UAAU,EAAE;QACnCA,WAAW,CAAC4C,KAAK,CAAC;MACtB;IACJ,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EACD,CAAC5C,WAAW,CAChB,CAAC;EAED,MAAM6C,cAAc,GAAGpF,WAAW,CAAC,MAAM;IACrCqF,YAAY,CAACtB,mBAAmB,CAACU,OAAO,CAAC;EAC7C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMa,sBAAsB,GAAGtF,WAAW,CAAEuF,KAAa,IAAK;IAC1D3B,gBAAgB,CAAC2B,KAAK,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EACN,MAAMC,0BAA0B,GAAG,CAAC,EAAE1C,gBAAgB,IAAIW,mBAAmB,CAAC;EAE9E,MAAMgC,gBAAgB,GAAGzF,WAAW,CAAqCmF,KAAK,IAAK;IAC/EA,KAAK,CAACO,eAAe,CAAC,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGxF,OAAO,CAAC,MAAM;IACrC,IAAI2B,KAAK,EAAE;MACP,oBACI/B,KAAA,CAAA6F,aAAA,CAACtF,YAAY;QACTwB,KAAK,EAAEA,KAAM;QACb+D,oBAAoB,EAAE,CAAC,CAACpD,+BAAgC;QACxDqD,mBAAmB,EAAE,CAAC,CAAClD;MAA2B,CACrD,CAAC;IAEV;IAEA,IAAIZ,MAAM,EAAE;MACR,oBACIjC,KAAA,CAAA6F,aAAA,CAACrF,aAAa;QACV6C,aAAa,EAAEA,aAAc;QAC7BrB,eAAe,EAAEA,eAAgB;QACjCJ,gBAAgB,EAAEA,gBAAiB;QACnCC,WAAW,EAAEA,WAAY;QACzBI,MAAM,EAAEA,MAAO;QACfsB,YAAY,EAAEA,YAAa;QAC3BX,sBAAsB,EAAEA,sBAAuB;QAC/CkD,oBAAoB,EAAE,CAAC,CAACpD,+BAAgC;QACxDsD,oBAAoB,EAAE,CAAC,CAACnD;MAA2B,CACtD,CAAC;IAEV;IAEA,OAAOoD,SAAS;EACpB,CAAC,EAAE,CACCrE,gBAAgB,EAChByB,aAAa,EACbxB,WAAW,EACXE,KAAK,EACLC,eAAe,EACfC,MAAM,EACNsB,YAAY,EACZb,+BAA+B,EAC/BE,sBAAsB,EACtBC,0BAA0B,CAC7B,CAAC;EAEF,MAAMqD,UAAU,GAAG9F,OAAO,CAAC,MAAM;IAC7B,MAAM+F,YAAY,GAAG3E,mBAAmB,CAAC2C,KAAK,CAACiC,aAAa,CAAC;IAC7D,MAAMC,iBAAiB,GAAGlC,KAAK,EAAEmC,SAAS,GAAGnC,KAAK,CAACmC,SAAS,GAAG,YAAY;IAC3E,oBAAOtG,KAAA,CAAA6F,aAAA,CAACtE,iBAAiB;MAACgF,KAAK,EAAEJ,YAAa;MAACK,SAAS,EAAEH;IAAkB,CAAE,CAAC;EACnF,CAAC,EAAE,CAAClC,KAAK,CAACiC,aAAa,EAAEjC,KAAK,CAACmC,SAAS,CAAC,CAAC;EAE1C,oBACItG,KAAA,CAAA6F,aAAA,CAACpF,kBAAkB;IACfgG,EAAE,EAAEtD,sBAAsB,GAAG8C,SAAS,GAAGlG,MAAM,CAAC2G,GAAI;IACpDC,OAAO,EACHxD,sBAAsB,GAChB8C,SAAS,GACT;MACIW,OAAO,EAAEvE,aAAa,GAAG,GAAG,GAAG;IACnC,CACT;IACDwE,OAAO,EAAE1D,sBAAsB,GAAG8C,SAAS,GAAG,KAAM;IACpDa,UAAU,EAAE3D,sBAAsB,GAAG8C,SAAS,GAAG;MAAEc,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAClFR,SAAS,EAAC,4BAA4B;IACtCS,YAAY,EAAE,OAAO1E,OAAO,KAAK,UAAU,IAAIJ,YAAa;IAC5D+E,oBAAoB,EAAEhF,mBAAoB;IAC1CK,OAAO,EAAEA,OAAQ;IACjB4E,YAAY,EAAElC,gBAAiB;IAC/BmC,YAAY,EAAElC,gBAAiB;IAC/BmC,YAAY,EAAE,OAAO7E,WAAW,KAAK,UAAU,GAAG2C,gBAAgB,GAAGc,SAAU;IAC/EqB,UAAU,EAAE,OAAO9E,WAAW,KAAK,UAAU,GAAG6C,cAAc,GAAGY;EAAU,gBAE3EjG,KAAA,CAAA6F,aAAA,CAAChF,6BAA6B,QACzBqB,mBAAmB,iBAChBlC,KAAA,CAAA6F,aAAA,CAAClF,2BAA2B;IACxB8F,EAAE,EAAEtD,sBAAsB,GAAG8C,SAAS,GAAGlG,MAAM,CAAC2G,GAAI;IACpDC,OAAO,EAAExD,sBAAsB,GAAG8C,SAAS,GAAG;MAAEsB,MAAM,EAAEnF,MAAM,GAAG,EAAE,GAAG;IAAE,CAAE;IAC1EyE,OAAO,EAAE1D,sBAAsB,GAAG8C,SAAS,GAAG,KAAM;IACpDa,UAAU,EAAE3D,sBAAsB,GAAG8C,SAAS,GAAG;MAAEe,IAAI,EAAE;IAAQ;EAAE,GAElE7E,YAAY,IAAI,CAACQ,mBAAmB,IAAIuD,UAChB,CAChC,EACA5D,YAAY,iBACTtC,KAAA,CAAA6F,aAAA,CAACjF,8BAA8B;IAAC4G,GAAG,EAAEtD,cAAe;IAAC,qBAAkB;EAAM,GACxE5B,YAC2B,CACnC,EACAsD,kBAC0B,CAAC,eAChC5F,KAAA,CAAA6F,aAAA,CAACnF,yBAAyB;IACtB+G,mBAAmB,EAAE7B,kBAAkB,KAAKK,SAAU;IACtDyB,OAAO,EAAEtF;EAAO,gBAEhBpC,KAAA,CAAA6F,aAAA,CAAC/F,WAAW,qBACRE,KAAA,CAAA6F,aAAA,CAAC9E,uBAAuB;IACpB0F,EAAE,EAAEtD,sBAAsB,GAAG8C,SAAS,GAAGlG,MAAM,CAAC2G,GAAI;IACpDiB,MAAM,EAAEvE,mBAAmB,GAAG,UAAU,GAAG6C;EAAU,GAEpD5B,aAAa;EAAA;EACV;EACArE,KAAA,CAAA6F,aAAA,CAACnE,WAAW,CAACkG,QAAQ;IACjBC,KAAK,EAAE;MAAE,GAAGzD,YAAY;MAAE0D,iBAAiB,EAAE;IAAK;EAAE,gBAEpD9H,KAAA,CAAA6F,aAAA,CAAC7E,mCAAmC;IAACuB,OAAO,EAAEmD;EAAiB,gBAC3D1F,KAAA,CAAA6F,aAAA,CAACpE;EACG,6DAAAsG,QAAA,KACItE,eAAe;IACnBoE,KAAK,EAAE,OAAO7E,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGiD,SAAU;IACrD+B,QAAQ,EAAExE;EAAmB,EAChC,CACgC,CACnB,CAAC,gBAEvBxD,KAAA,CAAA6F,aAAA,CAAC1E,aAAa;IACV6B,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3Bb,MAAM,EAAEA,MAAO;IACfmC,wBAAwB,EAAEA,wBAAyB;IACnD9B,aAAa,EAAEA,aAAc;IAC7Ba,kBAAkB,EAAEiC,sBAAuB;IAC3C0C,QAAQ,EAAEtD;EAAwB,CACrC,CAEgB,CAAC,EACzBL,qBAAqB,iBAClBtE,KAAA,CAAA6F,aAAA,CAAC/E,0BAA0B,qBACvBd,KAAA,CAAA6F,aAAA,CAACzE,gBAAgB;IACb0B,QAAQ,EAAEA,QAAS;IACnBV,MAAM,EAAEA,MAAO;IACfK,aAAa,EAAEA;EAAc,CAChC,CACuB,CAEvB,CACU,CAAC,eAC5BzC,KAAA,CAAA6F,aAAA,CAACxE,oBAAoB;IAACoB,aAAa,EAAEA;EAAc,CAAE,CAAC,EACrDX,SAAS,IAAI2D,0BAA0B,iBACpCzF,KAAA,CAAA6F,aAAA,CAAC3E,wCAAwC;IACrCsF,SAAS,EAAC,kCAAkC;IAC5CG,OAAO,EAAE;MACLuB,UAAU,EAAE,CAAC;MACbtB,OAAO,EAAE,CAAC;MACVpB,KAAK,EAAE;IACX,CAAE;IACFqB,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,QAAQ,EAAE,IAAI;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9ChH,KAAA,CAAA6F,aAAA,CAAC5E,iCAAiC,QAC7Ba,SAC8B,CACG,CAE9B,CAAC;AAE7B,CAAC;AAEDH,YAAY,CAACwG,WAAW,GAAG,cAAc;AAEzC,eAAexG,YAAY","ignoreList":[]}

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

@@ -119,10 +119,27 @@ export type ListItemProps = {
      * Whether the image should be opened on click.
      */
     shouldOpenImageOnClick?: boolean;
+    /**
+     * Whether the framer-motion layout projection (`layout="position"`) should be
+     * enabled. This animates the `ListItem` smoothly into its new position when
+     * sibling items are reordered, expanded or resized.
+     *
+     * This is opt-in and disabled by default, because framer-motions layout
+     * projection is viewport-global: every layout change anywhere in the document
+     * (window resize, height animation, ...) forces a re-measurement of **all**
+     * layout-projection nodes via `getBoundingClientRect`. In lists with many
+     * `ListItem`s this scales linearly and causes noticeable layout thrash. The
+     * enter/exit height/opacity animation is unaffected and stays enabled.
+     */
+    shouldAnimateLayout?: boolean;
     /**
      * Whether the layout animation should be prevented. This is useful when the
      * `ListItem` is used in a list with a lot of items and the layout animation
      * is not desired.
+     *
+     * @deprecated The layout projection is now disabled by default. Use
+     * `shouldAnimateLayout` to opt into it instead. When set to `true`, this
+     * prop keeps forcing the layout projection off.
      */
     shouldPreventLayoutAnimation?: boolean;
     /**

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

@@ -26,6 +26,7 @@ type ListItemHeadProps = {
     shouldForceHover?: boolean;
     setShouldEnableTooltip: (value: boolean) => void;
     shouldDisableAnimation?: boolean;
+    shouldAnimateLayout?: boolean;
     cornerElement?: ReactNode;
     onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;
     onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.5.51",
+    "version": "5.5.52",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -93,5 +93,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5a52e13c899d061e982e5c39da6c2bc24de0c862"
+    "gitHead": "39253e6054b50233279b8105e09e6319171bc4ad"
 }