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

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

@@ -1,5 +1,4 @@
 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;
@@ -84,8 +83,16 @@ export const StyledListItem = styled.div`
     
         &[data-should-show-keyboard-highlighting='true']:focus-visible {
         transition: none;
-        ${keyboardFocusHighlightingRingCss};
+        outline: none;
         overflow: visible;
+        position: relative;
+        z-index: 5;
+    }
+
+    &[data-should-show-keyboard-highlighting='true']:focus-within {
+        overflow: visible;
+        position: relative;
+        z-index: 5;
     }
 `;
 export const StyledListItemTooltip = styled.div`

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

@@ -1 +1 @@
-{"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":[]}
+{"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        &[data-should-show-keyboard-highlighting='true']:focus-visible {\n        transition: none;\n        outline: none;\n        overflow: visible;\n        position: relative;\n        z-index: 5;\n    }\n\n    &[data-should-show-keyboard-highlighting='true']:focus-within {\n        overflow: visible;\n        position: relative;\n        z-index: 5;\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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMoB,qBAAqB,GAAGrB,MAAM,CAACG,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}

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

@@ -86,6 +86,7 @@ const ListItemHead = ({
   const handleTitleWidthChange = useCallback(width => {
     setTitleMaxWidth(width);
   }, []);
+  const shouldShowHoverItemContent = !!(shouldForceHover || shouldShowHoverItem);
   const handleInputClick = useCallback(event => {
     event.stopPropagation();
   }, []);
@@ -184,12 +185,12 @@ const ListItemHead = ({
     rightElements: rightElements
   })))), /*#__PURE__*/React.createElement(ListItemRightElement, {
     rightElements: rightElements
-  }), hoverItem && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItemWrapper, {
+  }), hoverItem && shouldShowHoverItemContent && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItemWrapper, {
     className: "beta-chayns-list-item-hover-item",
     animate: {
-      marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,
-      opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,
-      width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0
+      marginLeft: 8,
+      opacity: 1,
+      width: 'auto'
     },
     initial: false,
     transition: {

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

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

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

@@ -13,9 +13,6 @@ const ListItemImage = ({
   onImageError
 }) => {
   const handleImageClick = useCallback(event => {
-    if (!shouldOpenImageOnClick) {
-      return;
-    }
     event.preventDefault();
     event.stopPropagation();
     const items = images.map(image => ({
@@ -29,7 +26,7 @@ const ListItemImage = ({
       items,
       startIndex: 0
     });
-  }, [images, shouldOpenImageOnClick]);
+  }, [images]);
   if (images && images[0]) {
     const careOfImage = careOfLocationId ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128` : undefined;
     return /*#__PURE__*/React.createElement(GroupedImage, {
@@ -39,7 +36,7 @@ const ListItemImage = ({
       images: images,
       height: 40,
       onImageError: onImageError,
-      onClick: handleImageClick,
+      onClick: shouldOpenImageOnClick ? handleImageClick : undefined,
       shouldPreventBackground: shouldHideBackground,
       shouldShowRoundImage: shouldShowRoundImage
     });

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","GroupedImage","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","careOfImage","undefined","createElement","height","onClick","shouldPreventBackground","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, {\n    CSSProperties,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n    cornerElement?: ReactNode;\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    careOfLocationId,\n    cornerImage,\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n    cornerElement,\n    onImageError,\n}) => {\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (!shouldOpenImageOnClick) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images, shouldOpenImageOnClick],\n    );\n\n    if (images && images[0]) {\n        const careOfImage = careOfLocationId\n            ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n            : undefined;\n\n        return (\n            <GroupedImage\n                cornerElement={cornerElement}\n                cornerImage={cornerImage ?? careOfImage}\n                imageBackground={imageBackground}\n                images={images}\n                height={40}\n                onImageError={onImageError}\n                onClick={handleImageClick}\n                shouldPreventBackground={shouldHideBackground}\n                shouldShowRoundImage={shouldShowRoundImage}\n            />\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAuB,YAAY;AAChE,OAAOC,KAAK,IAKRC,WAAW,QACR,OAAO;AACd,OAAOC,YAAY,MAAM,wCAAwC;AAcjE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC,sBAAsB;EACtBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAGZ,WAAW,CAC/Ba,KAAK,IAAK;IACP,IAAI,CAACJ,sBAAsB,EAAE;MACzB;IACJ;IAEAI,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGV,MAAM,CAACW,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAEvB,SAAS,CAACwB;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKvB,SAAS,CAAC;MAAEkB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAAChB,MAAM,EAAEG,sBAAsB,CACnC,CAAC;EAED,IAAIH,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMiB,WAAW,GAAGpB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDqB,SAAS;IAEf,oBACIzB,KAAA,CAAA0B,aAAA,CAACxB,YAAY;MACTS,aAAa,EAAEA,aAAc;MAC7BN,WAAW,EAAEA,WAAW,IAAImB,WAAY;MACxClB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;MACfoB,MAAM,EAAE,EAAG;MACXf,YAAY,EAAEA,YAAa;MAC3BgB,OAAO,EAAEf,gBAAiB;MAC1BgB,uBAAuB,EAAErB,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,CAAC2B,WAAW,GAAG,eAAe;AAE3C,eAAe3B,aAAa","ignoreList":[]}
+{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","GroupedImage","ListItemImage","careOfLocationId","cornerImage","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","cornerElement","onImageError","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","careOfImage","undefined","createElement","height","onClick","shouldPreventBackground","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, {\n    CSSProperties,\n    MouseEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    useCallback,\n} from 'react';\nimport GroupedImage from '../../../../grouped-image/GroupedImage';\n\ntype ListItemImageProps = {\n    careOfLocationId?: number;\n    cornerImage?: string;\n    imageBackground?: CSSProperties['background'];\n    images: string[];\n    shouldHideBackground: boolean;\n    shouldShowRoundImage: boolean;\n    shouldOpenImageOnClick: boolean;\n    cornerElement?: ReactNode;\n    onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n    careOfLocationId,\n    cornerImage,\n    imageBackground,\n    images,\n    shouldHideBackground,\n    shouldShowRoundImage,\n    shouldOpenImageOnClick,\n    cornerElement,\n    onImageError,\n}) => {\n    const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const items: OpenMediaItem[] = images.map((image) => ({\n                url: image,\n                mediaType: MediaType.IMAGE,\n            }));\n\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            void openMedia({ items, startIndex: 0 });\n        },\n        [images],\n    );\n\n    if (images && images[0]) {\n        const careOfImage = careOfLocationId\n            ? `https://sub60.tobit.com/l/${careOfLocationId}?size=128`\n            : undefined;\n\n        return (\n            <GroupedImage\n                cornerElement={cornerElement}\n                cornerImage={cornerImage ?? careOfImage}\n                imageBackground={imageBackground}\n                images={images}\n                height={40}\n                onImageError={onImageError}\n                onClick={shouldOpenImageOnClick ? handleImageClick : undefined}\n                shouldPreventBackground={shouldHideBackground}\n                shouldShowRoundImage={shouldShowRoundImage}\n            />\n        );\n    }\n\n    return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,QAAuB,YAAY;AAChE,OAAOC,KAAK,IAKRC,WAAW,QACR,OAAO;AACd,OAAOC,YAAY,MAAM,wCAAwC;AAcjE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,gBAAgB;EAChBC,WAAW;EACXC,eAAe;EACfC,MAAM;EACNC,oBAAoB;EACpBC,oBAAoB;EACpBC,sBAAsB;EACtBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,gBAAgB,GAAGZ,WAAW,CAC/Ba,KAAK,IAAK;IACPA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAMC,KAAsB,GAAGV,MAAM,CAACW,GAAG,CAAEC,KAAK,KAAM;MAClDC,GAAG,EAAED,KAAK;MACVE,SAAS,EAAEvB,SAAS,CAACwB;IACzB,CAAC,CAAC,CAAC;;IAEH;IACA;IACA,KAAKvB,SAAS,CAAC;MAAEkB,KAAK;MAAEM,UAAU,EAAE;IAAE,CAAC,CAAC;EAC5C,CAAC,EACD,CAAChB,MAAM,CACX,CAAC;EAED,IAAIA,MAAM,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACrB,MAAMiB,WAAW,GAAGpB,gBAAgB,GAC9B,6BAA6BA,gBAAgB,WAAW,GACxDqB,SAAS;IAEf,oBACIzB,KAAA,CAAA0B,aAAA,CAACxB,YAAY;MACTS,aAAa,EAAEA,aAAc;MAC7BN,WAAW,EAAEA,WAAW,IAAImB,WAAY;MACxClB,eAAe,EAAEA,eAAgB;MACjCC,MAAM,EAAEA,MAAO;MACfoB,MAAM,EAAE,EAAG;MACXf,YAAY,EAAEA,YAAa;MAC3BgB,OAAO,EAAElB,sBAAsB,GAAGG,gBAAgB,GAAGY,SAAU;MAC/DI,uBAAuB,EAAErB,oBAAqB;MAC9CC,oBAAoB,EAAEA;IAAqB,CAC9C,CAAC;EAEV;EAEA,OAAO,IAAI;AACf,CAAC;AAEDN,aAAa,CAAC2B,WAAW,GAAG,eAAe;AAE3C,eAAe3B,aAAa","ignoreList":[]}

package/lib/esm/components/multi-action-button/action-button/ActionButton.js

@@ -1,5 +1,6 @@
 import { AnimatePresence } from 'motion/react';
-import React from 'react';
+import React, { useRef } from 'react';
+import { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';
 import Icon from '../../icon/Icon';
 import Tooltip from '../../tooltip/Tooltip';
 import { StyledActionButton, StyledActionContent, StyledIconSlot, StyledLabelWrapper, StyledSecondaryLabel } from './ActionButton.styles';
@@ -32,6 +33,7 @@ const ActionButton = ({
   height,
   shouldShowKeyboardHighlighting = false
 }) => {
+  const actionButtonRef = useRef(null);
   const isPrimary = actionType === 'primary';
   const isSecondary = actionType === 'secondary';
   const actionColor = action.color ?? '#FFFFFF';
@@ -39,6 +41,9 @@ const ActionButton = ({
   const disabledReason = action.disabledReason?.trim();
   const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;
   const iconSize = height - 24;
+  useFocusRingPortal(actionButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting && !isActionDisabled
+  });
   const actionContent = /*#__PURE__*/React.createElement(StyledActionContent, null, /*#__PURE__*/React.createElement(StyledIconSlot, {
     $height: height,
     $isDisabled: isActionDisabled
@@ -71,6 +76,7 @@ const ActionButton = ({
     }
   }, action.label))));
   return /*#__PURE__*/React.createElement(StyledActionButton, {
+    ref: actionButtonRef,
     "aria-disabled": isActionDisabled,
     disabled: isActionDisabled && !shouldShowDisabledReason,
     $backgroundColor: backgroundColor,
@@ -86,7 +92,6 @@ const ActionButton = ({
     $height: height,
     $statusType: action.status?.type,
     $shouldUseContentWidth: shouldUseContentWidth,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","showLabel","shouldUseContentWidth","height","shouldShowKeyboardHighlighting","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","actionContent","createElement","$height","$isDisabled","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","$shouldShowKeyboardHighlighting","alignment","BottomRight","item","text","maxItemWidth","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, FocusEventHandler, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    onFocus?: FocusEventHandler<HTMLButtonElement>;\n    onBlur?: FocusEventHandler<HTMLButtonElement>;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n    shouldShowKeyboardHighlighting?: boolean;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n    shouldShowKeyboardHighlighting = false,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n    const iconSize = height - 24;\n\n    const actionContent = (\n        <StyledActionContent>\n            <StyledIconSlot $height={height} $isDisabled={isActionDisabled}>\n                {typeof action.icon === 'string' ? (\n                    <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n                ) : (\n                    action.icon\n                )}\n            </StyledIconSlot>\n            <AnimatePresence initial={false}>\n                {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                {showLabel && (\n                    <StyledLabelWrapper\n                        animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                        exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        transition={LABEL_TRANSITION}\n                    >\n                        <StyledSecondaryLabel style={{ color: actionColor }}>\n                            {action.label}\n                        </StyledSecondaryLabel>\n                    </StyledLabelWrapper>\n                )}\n            </AnimatePresence>\n        </StyledActionContent>\n    );\n\n    return (\n        <StyledActionButton\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            type=\"button\"\n        >\n            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","useRef","useFocusRingPortal","Icon","Tooltip","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","PopupAlignment","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","showLabel","shouldUseContentWidth","height","shouldShowKeyboardHighlighting","actionButtonRef","isPrimary","isSecondary","actionColor","color","isActionDisabled","Boolean","disabledReason","trim","shouldShowDisabledReason","iconSize","isEnabled","actionContent","createElement","$height","$isDisabled","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","ref","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isInteractionDisabled","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$statusType","type","$shouldUseContentWidth","alignment","BottomRight","item","text","maxItemWidth","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, FocusEventHandler, MouseEvent, useRef } from 'react';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport Icon from '../../icon/Icon';\nimport Tooltip from '../../tooltip/Tooltip';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { PopupAlignment } from '../../../types/popup';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    onFocus?: FocusEventHandler<HTMLButtonElement>;\n    onBlur?: FocusEventHandler<HTMLButtonElement>;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n    shouldShowKeyboardHighlighting?: boolean;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n    shouldShowKeyboardHighlighting = false,\n}) => {\n    const actionButtonRef = useRef<HTMLButtonElement>(null);\n\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n    const isActionDisabled = isDisabled || Boolean(action.isDisabled);\n    const disabledReason = action.disabledReason?.trim();\n    const shouldShowDisabledReason = Boolean(disabledReason) && isActionDisabled;\n    const iconSize = height - 24;\n\n    useFocusRingPortal(actionButtonRef, {\n        isEnabled: shouldShowKeyboardHighlighting && !isActionDisabled,\n    });\n\n    const actionContent = (\n        <StyledActionContent>\n            <StyledIconSlot $height={height} $isDisabled={isActionDisabled}>\n                {typeof action.icon === 'string' ? (\n                    <Icon icons={[action.icon]} color={actionColor} size={iconSize} />\n                ) : (\n                    action.icon\n                )}\n            </StyledIconSlot>\n            <AnimatePresence initial={false}>\n                {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                {showLabel && (\n                    <StyledLabelWrapper\n                        animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                        exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                        transition={LABEL_TRANSITION}\n                    >\n                        <StyledSecondaryLabel style={{ color: actionColor }}>\n                            {action.label}\n                        </StyledSecondaryLabel>\n                    </StyledLabelWrapper>\n                )}\n            </AnimatePresence>\n        </StyledActionContent>\n    );\n\n    return (\n        <StyledActionButton\n            ref={actionButtonRef}\n            aria-disabled={isActionDisabled}\n            disabled={isActionDisabled && !shouldShowDisabledReason}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isInteractionDisabled={isActionDisabled}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            type=\"button\"\n        >\n            {shouldShowDisabledReason && disabledReason ? (\n                <Tooltip\n                    alignment={PopupAlignment.BottomRight}\n                    item={{ text: disabledReason }}\n                    maxItemWidth={400}\n                >\n                    {actionContent}\n                </Tooltip>\n            ) : (\n                actionContent\n            )}\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js

@@ -170,18 +170,9 @@ export const StyledActionButton = styled.button`
             }
         `}
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                transition: none;
-                z-index: 1;
-                outline: solid 2px color-mix(in srgb, currentColor 70%, transparent);
-                box-shadow: inset 0 0 0 2px rgba(0, 102, 204, 0.25);
-                outline-offset: -2px;
-                color: white;
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+    }
 `;
 export const StyledActionContent = styled.span`
     align-items: center;