@chayns-components/core 5.4.13 → 5.4.14-alpha.0

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

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

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledListItem = styled.div`
     overflow: hidden;
     transition: background-color 0.3s ease;
@@ -80,6 +81,12 @@ export const StyledListItem = styled.div`
 }) => $isWrapped && css`
             padding-left: 26px;
         `}
+    
+        &[data-should-show-keyboard-highlighting='true']:focus-visible {
+        transition: none;
+        ${keyboardFocusHighlightingRingCss};
+        overflow: visible;
+    }
 `;
 export const StyledListItemTooltip = styled.div`
     padding: 6px;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["styled","css","StyledListItem","div","$isInAccordion","$shouldHideIndicator","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","$isInDialog","$isSelected","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\n\ntype StyledListItemProps = HTMLMotionProps<'div'> & {\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldChangeColor?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n    $isInDialog: boolean;\n    $isSelected: boolean;\n};\n\nexport const StyledListItem = styled.div<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $shouldChangeColor,\n        $shouldForceBackground,\n        theme,\n        $isInDialog,\n        $isSelected,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground || $isSelected) &&\n        css`\n            background-color: rgba(\n                ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                ${theme.cardBackgroundOpacity}\n            );\n        `}\n\n    ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n        $backgroundColor &&\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: ${$backgroundColor} !important;\n        `}\n\n    ${({\n        $isClickable,\n        $isInAccordion,\n        $shouldChangeColor,\n        $isInDialog,\n        theme,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(\n                    ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                    ${theme.cardBackgroundOpacity}\n                );\n            }\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps & { theme: Theme }) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAoB/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,MAAM,CAAC;EAAEC,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACdH,GAAG;AACX,4BAA4BI,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EACCD,cAAc;EACdE,OAAO;EACPC,kBAAkB;EAClBC,sBAAsB;EACtBC,KAAK;EACLC,WAAW;EACXC;AAGJ,CAAC,KACG,CAAE,CAACP,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,IAAIG,WAAW,KACtEV,GAAG;AACX;AACA,kBAAkBM,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AACzF,kBAAkBA,KAAK,CAACG,qBAAqB;AAC7C;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,gBAAgB;EAAET,cAAc;EAAEE,OAAO;EAAEE;AAAuB,CAAC,KACpEK,gBAAgB,KACd,CAACT,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,CAAC,IACxDP,GAAG;AACX,gCAAgCY,gBAAgB;AAChD,SAAS;AACT;AACA,MAAM,CAAC;EACCC,YAAY;EACZV,cAAc;EACdG,kBAAkB;EAClBG,WAAW;EACXD;AAGJ,CAAC,KACGK,YAAY,IACZ,CAACV,cAAc,IACfH,GAAG;AACX;AACA;AACA,sBAAsBM,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AAC7F,sBAAsBA,KAAK,CAACG,qBAAqB;AACjD;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCR,cAAc;EACdE,OAAO;EACPS,UAAU;EACVC,qBAAqB;EACrBC,sBAAsB;EACtBC,yBAAyB;EACzBT;AACoC,CAAC,KAAK;EAC1C,IACIS,yBAAyB,IACxB,CAAC,CAACZ,OAAO,IAAIS,UAAU,IAAIX,cAAc,KACtCK,KAAK,CAACU,cAAc,IACpB,CAACH,qBAAsB,EAC7B;IACE,IAAIC,sBAAsB,EAAE;MACxB,OAAOhB,GAAG;AAC1B,qCAAqCiB,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD,iBAAiB;IACL;IAEA,OAAOR,GAAG;AACtB;AACA,qCAAqCiB,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD;AACA,aAAa;EACL;EAEA,OAAOW,SAAS;AACpB,CAAC;AACL;AACA,MAAM,CAAC;EAAEL;AAAW,CAAC,KACbA,UAAU,IACVd,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMoB,qBAAqB,GAAGrB,MAAM,CAACG,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledListItem","div","$isInAccordion","$shouldHideIndicator","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","$isInDialog","$isSelected","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledListItemProps = HTMLMotionProps<'div'> & {\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $isClickable: boolean;\n    $isInAccordion: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldChangeColor?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldForceBottomLine?: boolean;\n    $shouldHideBottomLine: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldShowSeparatorBelow: boolean;\n    $isInDialog: boolean;\n    $isSelected: boolean;\n};\n\nexport const StyledListItem = styled.div<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $shouldChangeColor,\n        $shouldForceBackground,\n        theme,\n        $isInDialog,\n        $isSelected,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground || $isSelected) &&\n        css`\n            background-color: rgba(\n                ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                ${theme.cardBackgroundOpacity}\n            );\n        `}\n\n    ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n        $backgroundColor &&\n        ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: ${$backgroundColor} !important;\n        `}\n\n    ${({\n        $isClickable,\n        $isInAccordion,\n        $shouldChangeColor,\n        $isInDialog,\n        theme,\n    }: StyledListItemProps & {\n        theme: Theme;\n    }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(\n                    ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n                    ${theme.cardBackgroundOpacity}\n                );\n            }\n        `}\n\n    ${({\n        $isInAccordion,\n        $isOpen,\n        $isWrapped,\n        $shouldHideBottomLine,\n        $shouldForceBottomLine,\n        $shouldShowSeparatorBelow,\n        theme,\n    }: StyledListItemProps & { theme: Theme }) => {\n        if (\n            $shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) &&\n                theme.accordionLines &&\n                !$shouldHideBottomLine)\n        ) {\n            if ($shouldForceBottomLine) {\n                return css`\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                `;\n            }\n\n            return css`\n                &&:not(:last-child) {\n                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                        rgba(${theme['headline-rgb']}, 1);\n                }\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n    \n        &[data-should-show-keyboard-highlighting='true']:focus-visible {\n        transition: none;\n        ${keyboardFocusHighlightingRingCss};\n        overflow: visible;\n    }\n`;\n\nexport const StyledListItemTooltip = styled.div`\n    padding: 6px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,gCAAgC,QAAQ,iDAAiD;AAkBlG,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA,MAAM,CAAC;EAAEC,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACdJ,GAAG;AACX,4BAA4BK,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EACCD,cAAc;EACdE,OAAO;EACPC,kBAAkB;EAClBC,sBAAsB;EACtBC,KAAK;EACLC,WAAW;EACXC;AAGJ,CAAC,KACG,CAAE,CAACP,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,IAAIG,WAAW,KACtEX,GAAG;AACX;AACA,kBAAkBO,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AACzF,kBAAkBA,KAAK,CAACG,qBAAqB;AAC7C;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,gBAAgB;EAAET,cAAc;EAAEE,OAAO;EAAEE;AAAuB,CAAC,KACpEK,gBAAgB,KACd,CAACT,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,CAAC,IACxDR,GAAG;AACX,gCAAgCa,gBAAgB;AAChD,SAAS;AACT;AACA,MAAM,CAAC;EACCC,YAAY;EACZV,cAAc;EACdG,kBAAkB;EAClBG,WAAW;EACXD;AAGJ,CAAC,KACGK,YAAY,IACZ,CAACV,cAAc,IACfJ,GAAG;AACX;AACA;AACA,sBAAsBO,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AAC7F,sBAAsBA,KAAK,CAACG,qBAAqB;AACjD;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCR,cAAc;EACdE,OAAO;EACPS,UAAU;EACVC,qBAAqB;EACrBC,sBAAsB;EACtBC,yBAAyB;EACzBT;AACoC,CAAC,KAAK;EAC1C,IACIS,yBAAyB,IACxB,CAAC,CAACZ,OAAO,IAAIS,UAAU,IAAIX,cAAc,KACtCK,KAAK,CAACU,cAAc,IACpB,CAACH,qBAAsB,EAC7B;IACE,IAAIC,sBAAsB,EAAE;MACxB,OAAOjB,GAAG;AAC1B,qCAAqCkB,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD,iBAAiB;IACL;IAEA,OAAOT,GAAG;AACtB;AACA,qCAAqCkB,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD;AACA,aAAa;EACL;EAEA,OAAOW,SAAS;AACpB,CAAC;AACL;AACA,MAAM,CAAC;EAAEL;AAAW,CAAC,KACbA,UAAU,IACVf,GAAG;AACX;AACA,SAAS;AACT;AACA;AACA;AACA,UAAUC,gCAAgC;AAC1C;AACA;AACA,CAAC;AAED,OAAO,MAAMoB,qBAAqB,GAAGtB,MAAM,CAACI,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { LayoutGroup, motion } from 'motion/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ListItemIcon from './list-item-icon/ListItemIcon';
 import ListItemImage from './list-item-image/ListItemImage';
-import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadTitle, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper } from './ListItemHead.styles';
+import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator, StyledListItemHeadLeftElements, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadTitle, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper } from './ListItemHead.styles';
 import ListItemTitle from './list-item-title/ListItemTitle';
 import ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';
 import ListItemRightElement from './list-item-right-element/ListItemRightElement';
@@ -43,6 +43,7 @@ const ListItemHead = ({
   const [titleWidth, setTitleWidth] = useState(0);
   const longPressTimeoutRef = useRef();
   const resizeSkipRef = useRef(true);
+  const leftElementRef = useRef(null);
   const theme = useTheme();
   const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string' || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
   const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
@@ -136,7 +137,10 @@ const ListItemHead = ({
     transition: shouldDisableAnimation ? undefined : {
       type: 'tween'
     }
-  }, isExpandable && !shouldHideIndicator && expandIcon), leftElements, iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
+  }, isExpandable && !shouldHideIndicator && expandIcon), leftElements && /*#__PURE__*/React.createElement(StyledListItemHeadLeftElements, {
+    ref: leftElementRef,
+    "data-left-element": "true"
+  }, leftElements), iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
     $isIconOrImageGiven: iconOrImageElement !== undefined,
     $isOpen: isOpen
   }, /*#__PURE__*/React.createElement(LayoutGroup, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, {

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

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

@@ -27,6 +27,10 @@ export const StyledListItemHeadLeftWrapper = styled.div`
     align-items: center;
     margin: auto 0;
 `;
+export const StyledListItemHeadLeftElements = styled.div`
+    display: flex;
+    align-items: center;
+`;
 export const StyledListItemHeadIndicator = styled.div`
     align-items: center;
     display: flex;

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

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

package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js

@@ -27,6 +27,7 @@ const ListItemRightElement = ({
     return null;
   }
   return /*#__PURE__*/React.createElement(StyledListItemRightElement, {
+    "data-right-element": "true",
     onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
   }, centerElement);
 };

package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemRightElement.js","names":["React","isValidElement","useMemo","StyledListItemRightElement","getElementClickEvent","ListItemRightElement","rightElements","handlePreventClick","event","stopPropagation","preventDefault","centerElement","center","undefined","shouldPreventRightElementClick","createElement","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.tsx"],"sourcesContent":["import React, { FC, isValidElement, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport { StyledListItemRightElement } from './ListItemRightElement.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemRightElementProps = {\n    rightElements?: IListItemRightElements;\n};\n\nconst ListItemRightElement: FC<ListItemRightElementProps> = ({ rightElements }) => {\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const centerElement = useMemo(() => {\n        if (typeof rightElements === 'string' || isValidElement(rightElements)) {\n            return rightElements;\n        }\n\n        if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).center;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (centerElement) {\n            return getElementClickEvent(centerElement);\n        }\n\n        return false;\n    }, [centerElement]);\n\n    if (!centerElement) {\n        return null;\n    }\n\n    return (\n        <StyledListItemRightElement\n            onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n        >\n            {centerElement}\n        </StyledListItemRightElement>\n    );\n};\n\nListItemRightElement.displayName = 'ListItemRightElement';\n\nexport default ListItemRightElement;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,oBAAoB,QAAQ,gCAAgC;AAMrE,MAAMC,oBAAmD,GAAGA,CAAC;EAAEC;AAAc,CAAC,KAAK;EAC/E,MAAMC,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGT,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOI,aAAa,KAAK,QAAQ,iBAAIL,cAAc,CAACK,aAAa,CAAC,EAAE;MACpE,OAAOA,aAAa;IACxB;IAEA,IAAI,OAAOA,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCM,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACP,aAAa,CAAC,CAAC;EAEnB,MAAMQ,8BAA8B,GAAGZ,OAAO,CAAC,MAAM;IACjD,IAAIS,aAAa,EAAE;MACf,OAAOP,oBAAoB,CAACO,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACA,aAAa,EAAE;IAChB,OAAO,IAAI;EACf;EAEA,oBACIX,KAAA,CAAAe,aAAA,CAACZ,0BAA0B;IACvBa,OAAO,EAAEF,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aACuB,CAAC;AAErC,CAAC;AAEDN,oBAAoB,CAACY,WAAW,GAAG,sBAAsB;AAEzD,eAAeZ,oBAAoB","ignoreList":[]}
+{"version":3,"file":"ListItemRightElement.js","names":["React","isValidElement","useMemo","StyledListItemRightElement","getElementClickEvent","ListItemRightElement","rightElements","handlePreventClick","event","stopPropagation","preventDefault","centerElement","center","undefined","shouldPreventRightElementClick","createElement","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.tsx"],"sourcesContent":["import React, { FC, isValidElement, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport { StyledListItemRightElement } from './ListItemRightElement.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemRightElementProps = {\n    rightElements?: IListItemRightElements;\n};\n\nconst ListItemRightElement: FC<ListItemRightElementProps> = ({ rightElements }) => {\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const centerElement = useMemo(() => {\n        if (typeof rightElements === 'string' || isValidElement(rightElements)) {\n            return rightElements;\n        }\n\n        if (typeof rightElements === 'object' && rightElements && 'center' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).center;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (centerElement) {\n            return getElementClickEvent(centerElement);\n        }\n\n        return false;\n    }, [centerElement]);\n\n    if (!centerElement) {\n        return null;\n    }\n\n    return (\n        <StyledListItemRightElement\n            data-right-element=\"true\"\n            onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n        >\n            {centerElement}\n        </StyledListItemRightElement>\n    );\n};\n\nListItemRightElement.displayName = 'ListItemRightElement';\n\nexport default ListItemRightElement;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,oBAAoB,QAAQ,gCAAgC;AAMrE,MAAMC,oBAAmD,GAAGA,CAAC;EAAEC;AAAc,CAAC,KAAK;EAC/E,MAAMC,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGT,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOI,aAAa,KAAK,QAAQ,iBAAIL,cAAc,CAACK,aAAa,CAAC,EAAE;MACpE,OAAOA,aAAa;IACxB;IAEA,IAAI,OAAOA,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCM,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACP,aAAa,CAAC,CAAC;EAEnB,MAAMQ,8BAA8B,GAAGZ,OAAO,CAAC,MAAM;IACjD,IAAIS,aAAa,EAAE;MACf,OAAOP,oBAAoB,CAACO,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACA,aAAa,EAAE;IAChB,OAAO,IAAI;EACf;EAEA,oBACIX,KAAA,CAAAe,aAAA,CAACZ,0BAA0B;IACvB,sBAAmB,MAAM;IACzBa,OAAO,EAAEF,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aACuB,CAAC;AAErC,CAAC;AAEDN,oBAAoB,CAACY,WAAW,GAAG,sBAAsB;AAEzD,eAAeZ,oBAAoB","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { StyledListItemHeadSubtitleText, StyledListItemSubtitle, StyledListItemBottomRightElement } from './ListItemSubtitle.styles';
 import { getElementClickEvent } from '../../../../../utils/accordion';
 const ListItemSubtitle = ({
@@ -6,6 +6,7 @@ const ListItemSubtitle = ({
   subtitle,
   isOpen
 }) => {
+  const bottomElementRef = useRef(null);
   const handlePreventClick = event => {
     event.stopPropagation();
     event.preventDefault();
@@ -25,6 +26,8 @@ const ListItemSubtitle = ({
   return /*#__PURE__*/React.createElement(StyledListItemSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
     $isOpen: isOpen
   }, subtitle), bottomElement && /*#__PURE__*/React.createElement(StyledListItemBottomRightElement, {
+    "data-right-element": "true",
+    ref: bottomElementRef,
     onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
   }, bottomElement));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemSubtitle.js","names":["React","useMemo","StyledListItemHeadSubtitleText","StyledListItemSubtitle","StyledListItemBottomRightElement","getElementClickEvent","ListItemSubtitle","rightElements","subtitle","isOpen","handlePreventClick","event","stopPropagation","preventDefault","bottomElement","bottom","undefined","shouldPreventRightElementClick","createElement","$isOpen","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useMemo } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadSubtitleText,\n    StyledListItemSubtitle,\n    StyledListItemBottomRightElement,\n} from './ListItemSubtitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemSubtitleProps = {\n    rightElements?: IListItemRightElements;\n    subtitle?: ReactNode;\n    isOpen: boolean;\n};\n\nconst ListItemSubtitle: FC<ListItemSubtitleProps> = ({ rightElements, subtitle, isOpen }) => {\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const bottomElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).bottom;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (bottomElement) {\n            return getElementClickEvent(bottomElement);\n        }\n\n        return false;\n    }, [bottomElement]);\n\n    return (\n        <StyledListItemSubtitle>\n            <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                {subtitle}\n            </StyledListItemHeadSubtitleText>\n            {bottomElement && (\n                <StyledListItemBottomRightElement\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {bottomElement}\n                </StyledListItemBottomRightElement>\n            )}\n        </StyledListItemSubtitle>\n    );\n};\n\nListItemSubtitle.displayName = 'ListItemSubtitle';\n\nexport default ListItemSubtitle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AAErD,SACIC,8BAA8B,EAC9BC,sBAAsB,EACtBC,gCAAgC,QAC7B,2BAA2B;AAClC,SAASC,oBAAoB,QAAQ,gCAAgC;AAQrE,MAAMC,gBAA2C,GAAGA,CAAC;EAAEC,aAAa;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACzF,MAAMC,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGb,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOM,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCQ,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACT,aAAa,CAAC,CAAC;EAEnB,MAAMU,8BAA8B,GAAGhB,OAAO,CAAC,MAAM;IACjD,IAAIa,aAAa,EAAE;MACf,OAAOT,oBAAoB,CAACS,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,oBACId,KAAA,CAAAkB,aAAA,CAACf,sBAAsB,qBACnBH,KAAA,CAAAkB,aAAA,CAAChB,8BAA8B;IAACiB,OAAO,EAAEV;EAAO,GAC3CD,QAC2B,CAAC,EAChCM,aAAa,iBACVd,KAAA,CAAAkB,aAAA,CAACd,gCAAgC;IAC7BgB,OAAO,EAAEH,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aAC6B,CAElB,CAAC;AAEjC,CAAC;AAEDR,gBAAgB,CAACe,WAAW,GAAG,kBAAkB;AAEjD,eAAef,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ListItemSubtitle.js","names":["React","useMemo","useRef","StyledListItemHeadSubtitleText","StyledListItemSubtitle","StyledListItemBottomRightElement","getElementClickEvent","ListItemSubtitle","rightElements","subtitle","isOpen","bottomElementRef","handlePreventClick","event","stopPropagation","preventDefault","bottomElement","bottom","undefined","shouldPreventRightElementClick","createElement","$isOpen","ref","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadSubtitleText,\n    StyledListItemSubtitle,\n    StyledListItemBottomRightElement,\n} from './ListItemSubtitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemSubtitleProps = {\n    rightElements?: IListItemRightElements;\n    subtitle?: ReactNode;\n    isOpen: boolean;\n};\n\nconst ListItemSubtitle: FC<ListItemSubtitleProps> = ({ rightElements, subtitle, isOpen }) => {\n    const bottomElementRef = useRef<HTMLDivElement>(null);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const bottomElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).bottom;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (bottomElement) {\n            return getElementClickEvent(bottomElement);\n        }\n\n        return false;\n    }, [bottomElement]);\n\n    return (\n        <StyledListItemSubtitle>\n            <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                {subtitle}\n            </StyledListItemHeadSubtitleText>\n            {bottomElement && (\n                <StyledListItemBottomRightElement\n                    data-right-element=\"true\"\n                    ref={bottomElementRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {bottomElement}\n                </StyledListItemBottomRightElement>\n            )}\n        </StyledListItemSubtitle>\n    );\n};\n\nListItemSubtitle.displayName = 'ListItemSubtitle';\n\nexport default ListItemSubtitle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE7D,SACIC,8BAA8B,EAC9BC,sBAAsB,EACtBC,gCAAgC,QAC7B,2BAA2B;AAClC,SAASC,oBAAoB,QAAQ,gCAAgC;AAQrE,MAAMC,gBAA2C,GAAGA,CAAC;EAAEC,aAAa;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACzF,MAAMC,gBAAgB,GAAGT,MAAM,CAAiB,IAAI,CAAC;EAErD,MAAMU,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGf,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOO,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCS,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACV,aAAa,CAAC,CAAC;EAEnB,MAAMW,8BAA8B,GAAGlB,OAAO,CAAC,MAAM;IACjD,IAAIe,aAAa,EAAE;MACf,OAAOV,oBAAoB,CAACU,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,oBACIhB,KAAA,CAAAoB,aAAA,CAAChB,sBAAsB,qBACnBJ,KAAA,CAAAoB,aAAA,CAACjB,8BAA8B;IAACkB,OAAO,EAAEX;EAAO,GAC3CD,QAC2B,CAAC,EAChCO,aAAa,iBACVhB,KAAA,CAAAoB,aAAA,CAACf,gCAAgC;IAC7B,sBAAmB,MAAM;IACzBiB,GAAG,EAAEX,gBAAiB;IACtBY,OAAO,EAAEJ,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aAC6B,CAElB,CAAC;AAEjC,CAAC;AAEDT,gBAAgB,CAACiB,WAAW,GAAG,kBAAkB;AAEjD,eAAejB,gBAAgB","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js

@@ -61,6 +61,7 @@ const ListItemTitle = ({
   }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, {
     ref: elementWrapperRef
   }, titleElement)), topElement && /*#__PURE__*/React.createElement(StyledListItemTopRightElement, {
+    "data-right-element": "true",
     ref: topElementWrapperRef,
     onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
   }, topElement));

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemTitle,\n    StyledListItemTitleLeftWrapper,\n    StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n    rightElements?: IListItemRightElements;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldShowMultilineTitle: boolean;\n    isOpen: boolean;\n    onResize?: (entries: ResizeObserverEntry[]) => void;\n    onTitleWidthChange: (width: number) => void;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n    rightElements,\n    titleElement,\n    title,\n    shouldShowMultilineTitle,\n    isOpen,\n    onResize,\n    onTitleWidthChange,\n}) => {\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const elementWrapperRef = useRef<HTMLDivElement>(null);\n    const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const element = titleWrapperRef?.current;\n        if (!element || typeof onResize !== 'function') return undefined;\n\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(element);\n\n        return () => resizeObserver.disconnect();\n    }, [onResize]);\n\n    useEffect(() => {\n        if (wrapperRef.current && elementWrapperRef.current) {\n            const fullWidth = wrapperRef.current.clientWidth;\n            const rightElementWidth = elementWrapperRef.current.clientWidth;\n            const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n            let width = fullWidth;\n\n            if (rightElementWidth > 0) {\n                width -= rightElementWidth + 8;\n            }\n\n            if (topElementWidth) {\n                width -= topElementWidth + 12;\n            }\n\n            onTitleWidthChange(width);\n        }\n    }, [onTitleWidthChange]);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (topElement) {\n            return getElementClickEvent(topElement);\n        }\n\n        return false;\n    }, [topElement]);\n\n    return (\n        <StyledListItemTitle ref={wrapperRef}>\n            <StyledListItemTitleLeftWrapper>\n                <StyledListItemHeadTitleText\n                    $isEllipsis={!isOpen}\n                    ref={titleWrapperRef}\n                    $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                >\n                    {title}\n                </StyledListItemHeadTitleText>\n                <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n                    {titleElement}\n                </StyledListItemHeadTitleElement>\n            </StyledListItemTitleLeftWrapper>\n            {topElement && (\n                <StyledListItemTopRightElement\n                    ref={topElementWrapperRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {topElement}\n                </StyledListItemTopRightElement>\n            )}\n        </StyledListItemTitle>\n    );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemTitle,\n    StyledListItemTitleLeftWrapper,\n    StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n    rightElements?: IListItemRightElements;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldShowMultilineTitle: boolean;\n    isOpen: boolean;\n    onResize?: (entries: ResizeObserverEntry[]) => void;\n    onTitleWidthChange: (width: number) => void;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n    rightElements,\n    titleElement,\n    title,\n    shouldShowMultilineTitle,\n    isOpen,\n    onResize,\n    onTitleWidthChange,\n}) => {\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const elementWrapperRef = useRef<HTMLDivElement>(null);\n    const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const element = titleWrapperRef?.current;\n        if (!element || typeof onResize !== 'function') return undefined;\n\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(element);\n\n        return () => resizeObserver.disconnect();\n    }, [onResize]);\n\n    useEffect(() => {\n        if (wrapperRef.current && elementWrapperRef.current) {\n            const fullWidth = wrapperRef.current.clientWidth;\n            const rightElementWidth = elementWrapperRef.current.clientWidth;\n            const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n            let width = fullWidth;\n\n            if (rightElementWidth > 0) {\n                width -= rightElementWidth + 8;\n            }\n\n            if (topElementWidth) {\n                width -= topElementWidth + 12;\n            }\n\n            onTitleWidthChange(width);\n        }\n    }, [onTitleWidthChange]);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (topElement) {\n            return getElementClickEvent(topElement);\n        }\n\n        return false;\n    }, [topElement]);\n\n    return (\n        <StyledListItemTitle ref={wrapperRef}>\n            <StyledListItemTitleLeftWrapper>\n                <StyledListItemHeadTitleText\n                    $isEllipsis={!isOpen}\n                    ref={titleWrapperRef}\n                    $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                >\n                    {title}\n                </StyledListItemHeadTitleText>\n                <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n                    {titleElement}\n                </StyledListItemHeadTitleElement>\n            </StyledListItemTitleLeftWrapper>\n            {topElement && (\n                <StyledListItemTopRightElement\n                    data-right-element=\"true\"\n                    ref={topElementWrapperRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {topElement}\n                </StyledListItemTopRightElement>\n            )}\n        </StyledListItemTitle>\n    );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+export const useListItemFocus = ({
+  uuid,
+  listGroupUuid,
+  isInKeyboardNavigationGroup,
+  updateActiveListItemUuid
+}) => {
+  const [isFocusWithinListItem, setIsFocusWithinListItem] = useState(false);
+  const handleFocus = useCallback(event => {
+    setIsFocusWithinListItem(true);
+    if (event.currentTarget === event.target && isInKeyboardNavigationGroup && typeof updateActiveListItemUuid === 'function') {
+      updateActiveListItemUuid(uuid);
+    }
+  }, [isInKeyboardNavigationGroup, updateActiveListItemUuid, uuid]);
+  const handleBlur = useCallback(event => {
+    const nextFocusedElement = event.relatedTarget;
+    const currentListItemElement = event.currentTarget;
+    if (nextFocusedElement && currentListItemElement.contains(nextFocusedElement)) {
+      return;
+    }
+    setIsFocusWithinListItem(false);
+    if (!isInKeyboardNavigationGroup || typeof updateActiveListItemUuid !== 'function' || typeof listGroupUuid !== 'string') {
+      return;
+    }
+    if (!nextFocusedElement) {
+      updateActiveListItemUuid(undefined);
+      return;
+    }
+    const nextFocusedListItem = nextFocusedElement.closest(`[data-uuid^="${listGroupUuid}---"]`);
+    if (!nextFocusedListItem) {
+      updateActiveListItemUuid(undefined);
+    }
+  }, [isInKeyboardNavigationGroup, listGroupUuid, updateActiveListItemUuid]);
+  return {
+    isFocusWithinListItem,
+    handleFocus,
+    handleBlur
+  };
+};
+//# sourceMappingURL=useListItemFocus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemFocus.js","names":["useCallback","useState","useListItemFocus","uuid","listGroupUuid","isInKeyboardNavigationGroup","updateActiveListItemUuid","isFocusWithinListItem","setIsFocusWithinListItem","handleFocus","event","currentTarget","target","handleBlur","nextFocusedElement","relatedTarget","currentListItemElement","contains","undefined","nextFocusedListItem","closest"],"sources":["../../../../../src/components/list/list-item/useListItemFocus.ts"],"sourcesContent":["import { type FocusEvent, useCallback, useState } from 'react';\n\ntype UseListItemFocusParams = {\n    uuid: string;\n    listGroupUuid?: string;\n    isInKeyboardNavigationGroup: boolean;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n};\n\nexport const useListItemFocus = ({\n    uuid,\n    listGroupUuid,\n    isInKeyboardNavigationGroup,\n    updateActiveListItemUuid,\n}: UseListItemFocusParams) => {\n    const [isFocusWithinListItem, setIsFocusWithinListItem] = useState(false);\n\n    const handleFocus = useCallback(\n        (event: FocusEvent<HTMLDivElement>) => {\n            setIsFocusWithinListItem(true);\n\n            if (\n                event.currentTarget === event.target &&\n                isInKeyboardNavigationGroup &&\n                typeof updateActiveListItemUuid === 'function'\n            ) {\n                updateActiveListItemUuid(uuid);\n            }\n        },\n        [isInKeyboardNavigationGroup, updateActiveListItemUuid, uuid],\n    );\n\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLDivElement>) => {\n            const nextFocusedElement = event.relatedTarget as HTMLElement | null;\n            const currentListItemElement = event.currentTarget as HTMLElement;\n\n            if (nextFocusedElement && currentListItemElement.contains(nextFocusedElement)) {\n                return;\n            }\n\n            setIsFocusWithinListItem(false);\n\n            if (\n                !isInKeyboardNavigationGroup ||\n                typeof updateActiveListItemUuid !== 'function' ||\n                typeof listGroupUuid !== 'string'\n            ) {\n                return;\n            }\n\n            if (!nextFocusedElement) {\n                updateActiveListItemUuid(undefined);\n                return;\n            }\n\n            const nextFocusedListItem = nextFocusedElement.closest<HTMLElement>(\n                `[data-uuid^=\"${listGroupUuid}---\"]`,\n            );\n\n            if (!nextFocusedListItem) {\n                updateActiveListItemUuid(undefined);\n            }\n        },\n        [isInKeyboardNavigationGroup, listGroupUuid, updateActiveListItemUuid],\n    );\n\n    return {\n        isFocusWithinListItem,\n        handleFocus,\n        handleBlur,\n    };\n};\n"],"mappings":"AAAA,SAA0BA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAS9D,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAC7BC,IAAI;EACJC,aAAa;EACbC,2BAA2B;EAC3BC;AACoB,CAAC,KAAK;EAC1B,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGP,QAAQ,CAAC,KAAK,CAAC;EAEzE,MAAMQ,WAAW,GAAGT,WAAW,CAC1BU,KAAiC,IAAK;IACnCF,wBAAwB,CAAC,IAAI,CAAC;IAE9B,IACIE,KAAK,CAACC,aAAa,KAAKD,KAAK,CAACE,MAAM,IACpCP,2BAA2B,IAC3B,OAAOC,wBAAwB,KAAK,UAAU,EAChD;MACEA,wBAAwB,CAACH,IAAI,CAAC;IAClC;EACJ,CAAC,EACD,CAACE,2BAA2B,EAAEC,wBAAwB,EAAEH,IAAI,CAChE,CAAC;EAED,MAAMU,UAAU,GAAGb,WAAW,CACzBU,KAAiC,IAAK;IACnC,MAAMI,kBAAkB,GAAGJ,KAAK,CAACK,aAAmC;IACpE,MAAMC,sBAAsB,GAAGN,KAAK,CAACC,aAA4B;IAEjE,IAAIG,kBAAkB,IAAIE,sBAAsB,CAACC,QAAQ,CAACH,kBAAkB,CAAC,EAAE;MAC3E;IACJ;IAEAN,wBAAwB,CAAC,KAAK,CAAC;IAE/B,IACI,CAACH,2BAA2B,IAC5B,OAAOC,wBAAwB,KAAK,UAAU,IAC9C,OAAOF,aAAa,KAAK,QAAQ,EACnC;MACE;IACJ;IAEA,IAAI,CAACU,kBAAkB,EAAE;MACrBR,wBAAwB,CAACY,SAAS,CAAC;MACnC;IACJ;IAEA,MAAMC,mBAAmB,GAAGL,kBAAkB,CAACM,OAAO,CAClD,gBAAgBhB,aAAa,OACjC,CAAC;IAED,IAAI,CAACe,mBAAmB,EAAE;MACtBb,wBAAwB,CAACY,SAAS,CAAC;IACvC;EACJ,CAAC,EACD,CAACb,2BAA2B,EAAED,aAAa,EAAEE,wBAAwB,CACzE,CAAC;EAED,OAAO;IACHC,qBAAqB;IACrBE,WAAW;IACXI;EACJ,CAAC;AACL,CAAC","ignoreList":[]}