@chayns-components/core 5.5.29 → 5.5.31-alpha.0

package/lib/esm/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","useIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenuAlignment","getActiveItemIndex","getDefaultFocusedIndex","selectItem","useKeyboardFocusHighlighting","ContextMenu","alignment","className","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","shouldEnableKeyboardHighlighting","shouldUseDefaultTriggerStyles","style","yOffset","zIndex","dialogText","ref","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","newContainer","setNewContainer","focusedIndex","setFocusedIndex","isContentShown","setIsContentShown","portal","setPortal","isHovered","setIsHovered","shouldUseFocusableWrapper","setShouldUseFocusableWrapper","uuid","contextMenuContentRef","contextMenuRef","shouldSkipNextContextMenuOpenRef","shouldPreventNextNativeContextMenuRef","isTouch","shouldShowKeyboardHighlighting","shouldShowWrapperKeyboardHighlighting","shouldUseKeyboardFocusableWrapper","current","el","element","closest","Element","handleHide","handleContainerBlur","event","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","handleShow","result","type","SELECT","text","buttons","list","map","isSelected","index","name","id","icon","undefined","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","preventDefault","stopPropagation","handleKeyDown","isActivationKey","key","prev","length","contextMenuContentElement","onClose","target","isContextMenuShortcut","shiftKey","handleContextMenu","handleGlobalKeyDown","activeElement","document","HTMLElement","body","documentElement","shouldOpenFromFocusedParent","handleNativeContextMenuCapture","addEventListener","removeEventListener","hide","show","handleDocumentClick","window","initial","onItemFocus","onMouseEnter","onMouseLeave","focusableChildSelector","hasFocusableChild","Boolean","querySelector","Fragment","$isActive","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting","$shouldUseDefaultTriggerStyles","onContextMenuCapture","onContextMenu","onKeyDown","onBlur","tabIndex","role","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    isValidElement,\n    KeyboardEventHandler,\n    MouseEvent,\n    MouseEventHandler,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { useIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuProps,\n    type ContextMenuRef,\n} from './ContextMenu.types';\nimport { SelectDialogResult } from '../../types/general';\nimport { getActiveItemIndex, getDefaultFocusedIndex, selectItem } from './ContextMenu.utils';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            className,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container,\n            coordinates,\n            headline,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n            shouldDisableClick = false,\n            shouldHidePopupArrow = false,\n            shouldShowHoverEffect = false,\n            shouldEnableKeyboardHighlighting,\n            shouldUseDefaultTriggerStyles = true,\n            style,\n            yOffset = 0,\n            zIndex = 20,\n            dialogText,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [newContainer, setNewContainer] = useState(container ?? null);\n        const [focusedIndex, setFocusedIndex] = useState(getDefaultFocusedIndex(items));\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [isHovered, setIsHovered] = useState(false);\n        const [shouldUseFocusableWrapper, setShouldUseFocusableWrapper] = useState(false);\n\n        const uuid = useUuid();\n\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n        const shouldSkipNextContextMenuOpenRef = useRef(false);\n        const shouldPreventNextNativeContextMenuRef = useRef(false);\n\n        const isTouch = useIsTouch();\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting && !shouldDisableClick,\n        );\n        const shouldShowWrapperKeyboardHighlighting =\n            shouldShowKeyboardHighlighting && shouldUseFocusableWrapper;\n        const shouldUseKeyboardFocusableWrapper = shouldUseFocusableWrapper && !shouldDisableClick;\n\n        useEffect(() => {\n            if (isContentShown) {\n                setFocusedIndex(getDefaultFocusedIndex(items));\n            }\n        }, [isContentShown, items]);\n\n        useEffect(() => {\n            if (contextMenuRef.current && !container) {\n                const el = contextMenuRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleContainerBlur = useCallback(\n            (event: React.FocusEvent<HTMLSpanElement>) => {\n                const nextFocusedElement = event.relatedTarget as Node | null;\n                const currentContainer = event.currentTarget as HTMLElement;\n\n                if (\n                    !nextFocusedElement ||\n                    (!currentContainer.contains(nextFocusedElement) &&\n                        !contextMenuContentRef.current?.contains(nextFocusedElement))\n                ) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        const handleShow = useCallback(async () => {\n            if (isTouch) {\n                const { result } = (await createDialog({\n                    type: DialogType.SELECT,\n                    text: dialogText,\n                    buttons: [],\n                    list: items.map(({ icons, text, isSelected }, index) => ({\n                        name: text,\n                        id: index,\n                        isSelected,\n                        icon: isValidElement(icons)\n                            ? undefined\n                            : (icons as string[] | undefined)?.[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n                const x =\n                    (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                const y =\n                    (childrenTop + childrenHeight / 2 - top) / zoomY +\n                    newContainer.scrollTop -\n                    yOffset;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [isTouch, items, newContainer, yOffset, dialogText]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(\n            (event) => {\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow, shouldDisableClick],\n        );\n\n        const handleKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n            (event) => {\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                const isActivationKey =\n                    event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';\n\n                if (isContentShown && event.key === 'Escape') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    handleHide();\n                    return;\n                }\n\n                if (isContentShown && !isHovered && event.key === 'ArrowDown') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setFocusedIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));\n                    return;\n                }\n\n                if (isContentShown && !isHovered && event.key === 'ArrowUp') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setFocusedIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));\n                    return;\n                }\n\n                if (isContentShown && isActivationKey) {\n                    if (\n                        selectItem({\n                            index: getActiveItemIndex({\n                                contextMenuContentElement: contextMenuContentRef.current,\n                                focusedIndex,\n                            }),\n                            items,\n                            onClose: handleHide,\n                            shouldCloseOnPopupClick,\n                        })\n                    ) {\n                        event.preventDefault();\n                        event.stopPropagation();\n                    }\n\n                    return;\n                }\n\n                if (event.currentTarget !== event.target) {\n                    return;\n                }\n\n                const isContextMenuShortcut =\n                    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey);\n\n                if (isContextMenuShortcut) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    shouldSkipNextContextMenuOpenRef.current = true;\n                    void handleShow();\n                    return;\n                }\n\n                if (shouldUseFocusableWrapper && isActivationKey) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    void handleShow();\n                }\n            },\n            [\n                focusedIndex,\n                handleHide,\n                handleShow,\n                isHovered,\n                isContentShown,\n                items,\n                items.length,\n                shouldCloseOnPopupClick,\n                shouldDisableClick,\n                shouldUseFocusableWrapper,\n            ],\n        );\n\n        const handleContextMenu = useCallback(\n            (event: MouseEvent<HTMLSpanElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                if (shouldSkipNextContextMenuOpenRef.current) {\n                    shouldSkipNextContextMenuOpenRef.current = false;\n                    return;\n                }\n\n                void handleShow();\n            },\n            [handleShow, shouldDisableClick],\n        );\n\n        useEffect(() => {\n            const handleGlobalKeyDown = (event: KeyboardEvent) => {\n                if (shouldDisableClick || !contextMenuRef.current) {\n                    return;\n                }\n\n                const isContextMenuShortcut =\n                    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey);\n\n                if (!isContextMenuShortcut) {\n                    return;\n                }\n\n                const { activeElement } = document;\n\n                if (\n                    !(activeElement instanceof HTMLElement) ||\n                    activeElement === document.body ||\n                    activeElement === document.documentElement\n                ) {\n                    return;\n                }\n\n                const shouldOpenFromFocusedParent =\n                    activeElement.contains(contextMenuRef.current) &&\n                    !contextMenuRef.current.contains(activeElement);\n\n                if (!shouldOpenFromFocusedParent) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n                shouldPreventNextNativeContextMenuRef.current = true;\n                void handleShow();\n            };\n\n            const handleNativeContextMenuCapture = (event: Event) => {\n                if (!shouldPreventNextNativeContextMenuRef.current) {\n                    return;\n                }\n\n                shouldPreventNextNativeContextMenuRef.current = false;\n                event.preventDefault();\n                event.stopPropagation();\n            };\n\n            document.addEventListener('keydown', handleGlobalKeyDown, true);\n            document.addEventListener('contextmenu', handleNativeContextMenuCapture, true);\n\n            return () => {\n                document.removeEventListener('keydown', handleGlobalKeyDown, true);\n                document.removeEventListener('contextmenu', handleNativeContextMenuCapture, true);\n            };\n        }, [handleShow, shouldDisableClick]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            const handleDocumentClick = (event: PointerEvent) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            };\n\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleHide, isContentShown, onHide, onShow, shouldCloseOnPopupClick]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                zIndex={zIndex}\n                                headline={headline}\n                                shouldHidePopupArrow={shouldHidePopupArrow}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                                focusedIndex={focusedIndex}\n                                onItemFocus={setFocusedIndex}\n                                onMouseEnter={() => {\n                                    setIsHovered(true);\n                                    setFocusedIndex(-1);\n                                }}\n                                onMouseLeave={() => {\n                                    setIsHovered(false);\n                                }}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            focusedIndex,\n            handleHide,\n        ]);\n\n        useEffect(() => {\n            if (!contextMenuRef.current) {\n                return;\n            }\n\n            const focusableChildSelector =\n                'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]';\n\n            const hasFocusableChild = Boolean(\n                contextMenuRef.current.querySelector(focusableChildSelector),\n            );\n\n            setShouldUseFocusableWrapper(!hasFocusableChild);\n        }, [children]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className={\n                        className\n                            ? `beta-chayns-context-menu ${className}`\n                            : 'beta-chayns-context-menu'\n                    }\n                    $isActive={isContentShown && shouldShowHoverEffect}\n                    $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n                    $shouldShowWrapperKeyboardHighlighting={shouldShowWrapperKeyboardHighlighting}\n                    $shouldUseDefaultTriggerStyles={shouldUseDefaultTriggerStyles}\n                    onClick={handleClick}\n                    onContextMenuCapture={handleContextMenu}\n                    onContextMenu={handleContextMenu}\n                    onKeyDown={handleKeyDown}\n                    onBlur={handleContainerBlur}\n                    ref={contextMenuRef}\n                    tabIndex={shouldUseKeyboardFocusableWrapper ? 0 : undefined}\n                    role={shouldUseKeyboardFocusableWrapper ? 'button' : undefined}\n                    aria-haspopup={shouldUseKeyboardFocusableWrapper ? 'menu' : undefined}\n                    aria-expanded={shouldUseKeyboardFocusableWrapper ? isContentShown : undefined}\n                    style={style}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","useIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenuAlignment","getActiveItemIndex","getDefaultFocusedIndex","selectItem","useKeyboardFocusHighlighting","useFocusRingPortal","ContextMenu","alignment","className","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","shouldEnableKeyboardHighlighting","shouldUseDefaultTriggerStyles","style","yOffset","zIndex","dialogText","ref","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","newContainer","setNewContainer","focusedIndex","setFocusedIndex","isContentShown","setIsContentShown","portal","setPortal","isHovered","setIsHovered","shouldUseFocusableWrapper","setShouldUseFocusableWrapper","uuid","contextMenuContentRef","contextMenuRef","contextMenuFocusRingRef","shouldSkipNextContextMenuOpenRef","shouldPreventNextNativeContextMenuRef","isTouch","shouldShowKeyboardHighlighting","shouldShowWrapperKeyboardHighlighting","shouldUseKeyboardFocusableWrapper","isEnabled","overlayRef","shape","padding","current","firstElementChild","HTMLElement","el","element","closest","Element","handleHide","handleContainerBlur","event","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","handleShow","result","type","SELECT","text","buttons","list","map","isSelected","index","name","id","icon","undefined","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","preventDefault","stopPropagation","handleKeyDown","isActivationKey","key","prev","length","contextMenuContentElement","onClose","target","isContextMenuShortcut","shiftKey","handleContextMenu","handleGlobalKeyDown","activeElement","document","body","documentElement","shouldOpenFromFocusedParent","handleNativeContextMenuCapture","addEventListener","removeEventListener","hide","show","handleDocumentClick","window","initial","onItemFocus","onMouseEnter","onMouseLeave","focusableChildSelector","hasFocusableChild","Boolean","querySelector","Fragment","$isActive","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting","$shouldUseDefaultTriggerStyles","onContextMenuCapture","onContextMenu","onKeyDown","onBlur","tabIndex","role","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    isValidElement,\n    KeyboardEventHandler,\n    MouseEvent,\n    MouseEventHandler,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { useIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuProps,\n    type ContextMenuRef,\n} from './ContextMenu.types';\nimport { SelectDialogResult } from '../../types/general';\nimport { getActiveItemIndex, getDefaultFocusedIndex, selectItem } from './ContextMenu.utils';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            className,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container,\n            coordinates,\n            headline,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n            shouldDisableClick = false,\n            shouldHidePopupArrow = false,\n            shouldShowHoverEffect = false,\n            shouldEnableKeyboardHighlighting,\n            shouldUseDefaultTriggerStyles = true,\n            style,\n            yOffset = 0,\n            zIndex = 20,\n            dialogText,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [newContainer, setNewContainer] = useState(container ?? null);\n        const [focusedIndex, setFocusedIndex] = useState(getDefaultFocusedIndex(items));\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [isHovered, setIsHovered] = useState(false);\n        const [shouldUseFocusableWrapper, setShouldUseFocusableWrapper] = useState(false);\n\n        const uuid = useUuid();\n\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n        const contextMenuFocusRingRef = useRef<HTMLElement | null>(null);\n        const shouldSkipNextContextMenuOpenRef = useRef(false);\n        const shouldPreventNextNativeContextMenuRef = useRef(false);\n\n        const isTouch = useIsTouch();\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting && !shouldDisableClick,\n        );\n        const shouldShowWrapperKeyboardHighlighting =\n            shouldShowKeyboardHighlighting && shouldUseFocusableWrapper;\n        const shouldUseKeyboardFocusableWrapper = shouldUseFocusableWrapper && !shouldDisableClick;\n        useFocusRingPortal(contextMenuRef, {\n            isEnabled: shouldShowWrapperKeyboardHighlighting,\n            overlayRef: contextMenuFocusRingRef,\n            shape: shouldUseDefaultTriggerStyles ? 'circle' : 'rectangle',\n            padding: shouldUseDefaultTriggerStyles ? 4 : 0,\n        });\n\n        useEffect(() => {\n            contextMenuFocusRingRef.current =\n                contextMenuRef.current?.firstElementChild instanceof HTMLElement\n                    ? contextMenuRef.current.firstElementChild\n                    : contextMenuRef.current;\n        }, [children]);\n\n        useEffect(() => {\n            if (isContentShown) {\n                setFocusedIndex(getDefaultFocusedIndex(items));\n            }\n        }, [isContentShown, items]);\n\n        useEffect(() => {\n            if (contextMenuRef.current && !container) {\n                const el = contextMenuRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleContainerBlur = useCallback(\n            (event: React.FocusEvent<HTMLSpanElement>) => {\n                const nextFocusedElement = event.relatedTarget as Node | null;\n                const currentContainer = event.currentTarget as HTMLElement;\n\n                if (\n                    !nextFocusedElement ||\n                    (!currentContainer.contains(nextFocusedElement) &&\n                        !contextMenuContentRef.current?.contains(nextFocusedElement))\n                ) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        const handleShow = useCallback(async () => {\n            if (isTouch) {\n                const { result } = (await createDialog({\n                    type: DialogType.SELECT,\n                    text: dialogText,\n                    buttons: [],\n                    list: items.map(({ icons, text, isSelected }, index) => ({\n                        name: text,\n                        id: index,\n                        isSelected,\n                        icon: isValidElement(icons)\n                            ? undefined\n                            : (icons as string[] | undefined)?.[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n                const x =\n                    (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                const y =\n                    (childrenTop + childrenHeight / 2 - top) / zoomY +\n                    newContainer.scrollTop -\n                    yOffset;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [isTouch, items, newContainer, yOffset, dialogText]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(\n            (event) => {\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow, shouldDisableClick],\n        );\n\n        const handleKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n            (event) => {\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                const isActivationKey =\n                    event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';\n\n                if (isContentShown && event.key === 'Escape') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    handleHide();\n                    return;\n                }\n\n                if (isContentShown && !isHovered && event.key === 'ArrowDown') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setFocusedIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));\n                    return;\n                }\n\n                if (isContentShown && !isHovered && event.key === 'ArrowUp') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setFocusedIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));\n                    return;\n                }\n\n                if (isContentShown && isActivationKey) {\n                    if (\n                        selectItem({\n                            index: getActiveItemIndex({\n                                contextMenuContentElement: contextMenuContentRef.current,\n                                focusedIndex,\n                            }),\n                            items,\n                            onClose: handleHide,\n                            shouldCloseOnPopupClick,\n                        })\n                    ) {\n                        event.preventDefault();\n                        event.stopPropagation();\n                    }\n\n                    return;\n                }\n\n                if (event.currentTarget !== event.target) {\n                    return;\n                }\n\n                const isContextMenuShortcut =\n                    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey);\n\n                if (isContextMenuShortcut) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    shouldSkipNextContextMenuOpenRef.current = true;\n                    void handleShow();\n                    return;\n                }\n\n                if (shouldUseFocusableWrapper && isActivationKey) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    void handleShow();\n                }\n            },\n            [\n                focusedIndex,\n                handleHide,\n                handleShow,\n                isHovered,\n                isContentShown,\n                items,\n                items.length,\n                shouldCloseOnPopupClick,\n                shouldDisableClick,\n                shouldUseFocusableWrapper,\n            ],\n        );\n\n        const handleContextMenu = useCallback(\n            (event: MouseEvent<HTMLSpanElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                if (shouldSkipNextContextMenuOpenRef.current) {\n                    shouldSkipNextContextMenuOpenRef.current = false;\n                    return;\n                }\n\n                void handleShow();\n            },\n            [handleShow, shouldDisableClick],\n        );\n\n        useEffect(() => {\n            const handleGlobalKeyDown = (event: KeyboardEvent) => {\n                if (shouldDisableClick || !contextMenuRef.current) {\n                    return;\n                }\n\n                const isContextMenuShortcut =\n                    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey);\n\n                if (!isContextMenuShortcut) {\n                    return;\n                }\n\n                const { activeElement } = document;\n\n                if (\n                    !(activeElement instanceof HTMLElement) ||\n                    activeElement === document.body ||\n                    activeElement === document.documentElement\n                ) {\n                    return;\n                }\n\n                const shouldOpenFromFocusedParent =\n                    activeElement.contains(contextMenuRef.current) &&\n                    !contextMenuRef.current.contains(activeElement);\n\n                if (!shouldOpenFromFocusedParent) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n                shouldPreventNextNativeContextMenuRef.current = true;\n                void handleShow();\n            };\n\n            const handleNativeContextMenuCapture = (event: Event) => {\n                if (!shouldPreventNextNativeContextMenuRef.current) {\n                    return;\n                }\n\n                shouldPreventNextNativeContextMenuRef.current = false;\n                event.preventDefault();\n                event.stopPropagation();\n            };\n\n            document.addEventListener('keydown', handleGlobalKeyDown, true);\n            document.addEventListener('contextmenu', handleNativeContextMenuCapture, true);\n\n            return () => {\n                document.removeEventListener('keydown', handleGlobalKeyDown, true);\n                document.removeEventListener('contextmenu', handleNativeContextMenuCapture, true);\n            };\n        }, [handleShow, shouldDisableClick]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            const handleDocumentClick = (event: PointerEvent) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            };\n\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleHide, isContentShown, onHide, onShow, shouldCloseOnPopupClick]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                zIndex={zIndex}\n                                headline={headline}\n                                shouldHidePopupArrow={shouldHidePopupArrow}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                                focusedIndex={focusedIndex}\n                                onItemFocus={setFocusedIndex}\n                                onMouseEnter={() => {\n                                    setIsHovered(true);\n                                    setFocusedIndex(-1);\n                                }}\n                                onMouseLeave={() => {\n                                    setIsHovered(false);\n                                }}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            focusedIndex,\n            handleHide,\n        ]);\n\n        useEffect(() => {\n            if (!contextMenuRef.current) {\n                return;\n            }\n\n            const focusableChildSelector =\n                'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]';\n\n            const hasFocusableChild = Boolean(\n                contextMenuRef.current.querySelector(focusableChildSelector),\n            );\n\n            setShouldUseFocusableWrapper(!hasFocusableChild);\n        }, [children]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className={\n                        className\n                            ? `beta-chayns-context-menu ${className}`\n                            : 'beta-chayns-context-menu'\n                    }\n                    $isActive={isContentShown && shouldShowHoverEffect}\n                    $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n                    $shouldShowWrapperKeyboardHighlighting={shouldShowWrapperKeyboardHighlighting}\n                    $shouldUseDefaultTriggerStyles={shouldUseDefaultTriggerStyles}\n                    onClick={handleClick}\n                    onContextMenuCapture={handleContextMenu}\n                    onContextMenu={handleContextMenu}\n                    onKeyDown={handleKeyDown}\n                    onBlur={handleContainerBlur}\n                    ref={contextMenuRef}\n                    tabIndex={shouldUseKeyboardFocusableWrapper ? 0 : undefined}\n                    role={shouldUseKeyboardFocusableWrapper ? 'button' : undefined}\n                    aria-haspopup={shouldUseKeyboardFocusableWrapper ? 'menu' : undefined}\n                    aria-expanded={shouldUseKeyboardFocusableWrapper ? isContentShown : undefined}\n                    style={style}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/context-menu/ContextMenu.styles.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingCircleRingCss, keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledContextMenu = styled.span`
     align-items: center;
     cursor: pointer;
@@ -35,39 +34,12 @@ export const StyledContextMenu = styled.span`
         `}
 
     ${({
-  $shouldShowWrapperKeyboardHighlighting,
-  $shouldUseDefaultTriggerStyles
-}) => $shouldShowWrapperKeyboardHighlighting && ($shouldUseDefaultTriggerStyles ? css`
-                  &:focus-visible {
-                      outline: none;
-                      box-shadow: none;
-                  }
-
-                  &:focus-visible > .beta-chayns-icon {
-                      position: relative;
-                      color: inherit;
-                  }
-
-                  &:focus-visible > .beta-chayns-icon::after {
-                      ${keyboardFocusHighlightingCircleRingCss};
-                      content: '';
-                      position: absolute;
-                      top: 50%;
-                      left: 50%;
-                      width: calc(100% + 8px);
-                      height: calc(100% + 8px);
-                      transform: translate(-50%, -50%);
-                      pointer-events: none;
-                  }
-              ` : css`
-                  &:focus-visible {
-                      outline: none;
-                      box-shadow: none;
-                  }
-
-                  &:focus-visible > * {
-                      ${keyboardFocusHighlightingRingCss}
-                  }
-              `)}
+  $shouldShowWrapperKeyboardHighlighting
+}) => $shouldShowWrapperKeyboardHighlighting && css`
+            &:focus-visible {
+                outline: none;
+                box-shadow: none;
+            }
+        `}
 `;
 //# sourceMappingURL=ContextMenu.styles.js.map

package/lib/esm/components/context-menu/ContextMenu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.styles.js","names":["styled","css","keyboardFocusHighlightingCircleRingCss","keyboardFocusHighlightingRingCss","StyledContextMenu","span","$isActive","$shouldUseDefaultTriggerStyles","theme","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting"],"sources":["../../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    keyboardFocusHighlightingCircleRingCss,\n    keyboardFocusHighlightingRingCss,\n} from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledContextMenuProps = WithTheme<{\n    $isActive: boolean;\n    $shouldAddHoverEffect: boolean;\n    $shouldShowWrapperKeyboardHighlighting: boolean;\n    $shouldUseDefaultTriggerStyles: boolean;\n}>;\n\nexport const StyledContextMenu = styled.span<StyledContextMenuProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    position: relative;\n\n    ${({ $isActive, $shouldUseDefaultTriggerStyles, theme }: StyledContextMenuProps) =>\n        $shouldUseDefaultTriggerStyles\n            ? css`\n                  background-color: ${$isActive ? theme['201'] : 'transparent'};\n                  border-radius: 3px;\n                  padding: 6px;\n                  transition: background-color 0.3s ease;\n              `\n            : css`\n                  background-color: transparent;\n                  border-radius: inherit;\n                  padding: 0;\n\n                  > * {\n                      width: 100%;\n                  }\n              `}\n\n    ${({ $shouldAddHoverEffect, theme }: StyledContextMenuProps) =>\n        $shouldAddHoverEffect &&\n        css`\n            &:hover {\n                background-color: ${theme['201']};\n            }\n        `}\n\n    ${({\n        $shouldShowWrapperKeyboardHighlighting,\n        $shouldUseDefaultTriggerStyles,\n    }: StyledContextMenuProps) =>\n        $shouldShowWrapperKeyboardHighlighting &&\n        ($shouldUseDefaultTriggerStyles\n            ? css`\n                  &:focus-visible {\n                      outline: none;\n                      box-shadow: none;\n                  }\n\n                  &:focus-visible > .beta-chayns-icon {\n                      position: relative;\n                      color: inherit;\n                  }\n\n                  &:focus-visible > .beta-chayns-icon::after {\n                      ${keyboardFocusHighlightingCircleRingCss};\n                      content: '';\n                      position: absolute;\n                      top: 50%;\n                      left: 50%;\n                      width: calc(100% + 8px);\n                      height: calc(100% + 8px);\n                      transform: translate(-50%, -50%);\n                      pointer-events: none;\n                  }\n              `\n            : css`\n                  &:focus-visible {\n                      outline: none;\n                      box-shadow: none;\n                  }\n\n                  &:focus-visible > * {\n                      ${keyboardFocusHighlightingRingCss}\n                  }\n              `)}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SACIC,sCAAsC,EACtCC,gCAAgC,QAC7B,8CAA8C;AASrD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAEC,8BAA8B;EAAEC;AAA8B,CAAC,KAC3ED,8BAA8B,GACxBN,GAAG;AACjB,sCAAsCK,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAG,aAAa;AAC9E;AACA;AACA;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEQ,qBAAqB;EAAED;AAA8B,CAAC,KACvDC,qBAAqB,IACrBR,GAAG;AACX;AACA,oCAAoCO,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCE,sCAAsC;EACtCH;AACoB,CAAC,KACrBG,sCAAsC,KACrCH,8BAA8B,GACzBN,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,sCAAsC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,GACDD,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBE,gCAAgC;AACxD;AACA,eAAe,CAAC;AAChB,CAAC","ignoreList":[]}
+{"version":3,"file":"ContextMenu.styles.js","names":["styled","css","StyledContextMenu","span","$isActive","$shouldUseDefaultTriggerStyles","theme","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting"],"sources":["../../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContextMenuProps = WithTheme<{\n    $isActive: boolean;\n    $shouldAddHoverEffect: boolean;\n    $shouldShowWrapperKeyboardHighlighting: boolean;\n    $shouldUseDefaultTriggerStyles: boolean;\n}>;\n\nexport const StyledContextMenu = styled.span<StyledContextMenuProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    position: relative;\n\n    ${({ $isActive, $shouldUseDefaultTriggerStyles, theme }: StyledContextMenuProps) =>\n        $shouldUseDefaultTriggerStyles\n            ? css`\n                  background-color: ${$isActive ? theme['201'] : 'transparent'};\n                  border-radius: 3px;\n                  padding: 6px;\n                  transition: background-color 0.3s ease;\n              `\n            : css`\n                  background-color: transparent;\n                  border-radius: inherit;\n                  padding: 0;\n\n                  > * {\n                      width: 100%;\n                  }\n              `}\n\n    ${({ $shouldAddHoverEffect, theme }: StyledContextMenuProps) =>\n        $shouldAddHoverEffect &&\n        css`\n            &:hover {\n                background-color: ${theme['201']};\n            }\n        `}\n\n    ${({ $shouldShowWrapperKeyboardHighlighting }: StyledContextMenuProps) =>\n        $shouldShowWrapperKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                outline: none;\n                box-shadow: none;\n            }\n        `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAEC,8BAA8B;EAAEC;AAA8B,CAAC,KAC3ED,8BAA8B,GACxBJ,GAAG;AACjB,sCAAsCG,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAG,aAAa;AAC9E;AACA;AACA;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEM,qBAAqB;EAAED;AAA8B,CAAC,KACvDC,qBAAqB,IACrBN,GAAG;AACX;AACA,oCAAoCK,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEE;AAA+D,CAAC,KACjEA,sCAAsC,IACtCP,GAAG;AACX;AACA;AACA;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/copyable-content/CopyableContent.js

@@ -18,6 +18,7 @@ const CopyableContent = ({
   children,
   copyFailedMessage,
   collapsedHeight,
+  isDisabled = false,
   transformClipboardHtml
 }) => {
   const rootRef = useRef(null);
@@ -48,6 +49,9 @@ const CopyableContent = ({
     }, COPY_FEEDBACK_DURATION);
   }, []);
   const handleCopy = useCallback(async () => {
+    if (isDisabled) {
+      return;
+    }
     try {
       await copyableContentToClipboard(content, transformClipboardHtml);
       showCopyFeedback();
@@ -59,7 +63,7 @@ const CopyableContent = ({
         type: DialogType.TOAST
       }).open();
     }
-  }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback, transformClipboardHtml]);
+  }, [content, defaultCopyFailedMessage, isDisabled, copyFailedMessage, showCopyFeedback, transformClipboardHtml]);
   return /*#__PURE__*/React.createElement(StyledCopyableContent, {
     $appearance: appearance,
     $colorMode: colorMode,
@@ -71,6 +75,7 @@ const CopyableContent = ({
     $colorMode: colorMode,
     $isSticky: isActionGroupSticky,
     "aria-label": defaultCopyButtonText,
+    disabled: isDisabled,
     onClick: () => {
       void handleCopy();
     },
@@ -79,6 +84,7 @@ const CopyableContent = ({
     icons: hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']
   })), /*#__PURE__*/React.createElement(SharingContextMenu, {
     link: content,
+    shouldDisableClick: isDisabled,
     shouldShowCallingCodeAction: false,
     shouldShowCopyAction: false,
     shouldUseDefaultTriggerStyles: false
@@ -86,6 +92,7 @@ const CopyableContent = ({
     $colorMode: colorMode,
     $isSticky: isActionGroupSticky,
     "aria-label": shareText,
+    disabled: isDisabled,
     type: "button"
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-share-nodes']

package/lib/esm/components/copyable-content/CopyableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","useColorScheme","SharingContextMenu","Icon","Truncation","CopyableContentColorMode","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","StyledCopyableContentTruncation","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","collapsedHeight","transformClipboardHtml","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","colorScheme","colorMode","theme","Dark","Light","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","$colorMode","className","ref","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","$shouldShowPadding","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\n    CopyableContentColorMode,\n    StyledCopyableContent,\n    StyledCopyableContentActionGroup,\n    StyledCopyableContentActions,\n    StyledCopyableContentBody,\n    StyledCopyableContentButton,\n    StyledCopyableContentTruncation,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n    /**\n     * Controls the visual surface of the content block.\n     */\n    appearance?: CopyableContentAppearance;\n    /**\n     * Markdown source used for rendering and clipboard data.\n     */\n    content: string;\n    /**\n     * Replaces only the visible rendered content and never the copied source.\n     */\n    children?: ReactNode;\n    /**\n     * Replaces the localized error message shown when copying fails.\n     */\n    copyFailedMessage?: string;\n    /**\n     * The height of the content in its collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * Transforms the generated HTML before it is written to the clipboard.\n     */\n    transformClipboardHtml?: (html: string) => string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n    appearance = CopyableContentAppearance.Default,\n    content,\n    children,\n    copyFailedMessage,\n    collapsedHeight,\n    transformClipboardHtml,\n}) => {\n    const rootRef = useRef<HTMLElement>(null);\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const copyFeedbackTimeoutRef = useRef<number>();\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n    const [hasCopied, setHasCopied] = useState(false);\n\n    const colorScheme = useColorScheme();\n    const colorMode =\n        colorScheme?.theme.colorMode === 'dark'\n            ? CopyableContentColorMode.Dark\n            : CopyableContentColorMode.Light;\n\n    const defaultCopyButtonText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n    });\n    const defaultCopyFailedMessage = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.share),\n    });\n\n    const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n    useEffect(\n        () => () => {\n            window.clearTimeout(copyFeedbackTimeoutRef.current);\n        },\n        [],\n    );\n\n    const showCopyFeedback = useCallback(() => {\n        window.clearTimeout(copyFeedbackTimeoutRef.current);\n        setHasCopied(true);\n\n        copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n            setHasCopied(false);\n        }, COPY_FEEDBACK_DURATION);\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await copyableContentToClipboard(content, transformClipboardHtml);\n            showCopyFeedback();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedMessage ?? defaultCopyFailedMessage,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [\n        content,\n        defaultCopyFailedMessage,\n        copyFailedMessage,\n        showCopyFeedback,\n        transformClipboardHtml,\n    ]);\n\n    return (\n        <StyledCopyableContent\n            $appearance={appearance}\n            $colorMode={colorMode}\n            className=\"copyable-content\"\n            ref={rootRef}\n        >\n            <StyledCopyableContentActions ref={actionGroupRef}>\n                <StyledCopyableContentActionGroup>\n                    <StyledCopyableContentButton\n                        $colorMode={colorMode}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={defaultCopyButtonText}\n                        onClick={() => {\n                            void handleCopy();\n                        }}\n                        type=\"button\"\n                    >\n                        <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n                    </StyledCopyableContentButton>\n                    <SharingContextMenu\n                        link={content}\n                        shouldShowCallingCodeAction={false}\n                        shouldShowCopyAction={false}\n                        shouldUseDefaultTriggerStyles={false}\n                    >\n                        <StyledCopyableContentButton\n                            $colorMode={colorMode}\n                            $isSticky={isActionGroupSticky}\n                            aria-label={shareText}\n                            type=\"button\"\n                        >\n                            <Icon icons={['fa fa-share-nodes']} />\n                        </StyledCopyableContentButton>\n                    </SharingContextMenu>\n                </StyledCopyableContentActionGroup>\n            </StyledCopyableContentActions>\n            {typeof collapsedHeight === 'number' ? (\n                <StyledCopyableContentTruncation>\n                    <Truncation collapsedHeight={collapsedHeight}>\n                        <StyledCopyableContentBody\n                            $colorMode={colorMode}\n                            $shouldShowPadding={false}\n                        >\n                            {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n                        </StyledCopyableContentBody>\n                    </Truncation>\n                </StyledCopyableContentTruncation>\n            ) : (\n                <StyledCopyableContentBody $colorMode={colorMode}>\n                    {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n                </StyledCopyableContentBody>\n            )}\n        </StyledCopyableContent>\n    );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","useColorScheme","SharingContextMenu","Icon","Truncation","CopyableContentColorMode","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","StyledCopyableContentTruncation","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","collapsedHeight","isDisabled","transformClipboardHtml","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","colorScheme","colorMode","theme","Dark","Light","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","$colorMode","className","ref","$isSticky","disabled","onClick","icons","link","shouldDisableClick","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","$shouldShowPadding","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\n    CopyableContentColorMode,\n    StyledCopyableContent,\n    StyledCopyableContentActionGroup,\n    StyledCopyableContentActions,\n    StyledCopyableContentBody,\n    StyledCopyableContentButton,\n    StyledCopyableContentTruncation,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n    /**\n     * Controls the visual surface of the content block.\n     */\n    appearance?: CopyableContentAppearance;\n    /**\n     * Markdown source used for rendering and clipboard data.\n     */\n    content: string;\n    /**\n     * Disables the copy and share actions.\n     */\n    isDisabled?: boolean;\n    /**\n     * Replaces only the visible rendered content and never the copied source.\n     */\n    children?: ReactNode;\n    /**\n     * Replaces the localized error message shown when copying fails.\n     */\n    copyFailedMessage?: string;\n    /**\n     * The height of the content in its collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * Transforms the generated HTML before it is written to the clipboard.\n     */\n    transformClipboardHtml?: (html: string) => string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n    appearance = CopyableContentAppearance.Default,\n    content,\n    children,\n    copyFailedMessage,\n    collapsedHeight,\n    isDisabled = false,\n    transformClipboardHtml,\n}) => {\n    const rootRef = useRef<HTMLElement>(null);\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const copyFeedbackTimeoutRef = useRef<number>();\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n    const [hasCopied, setHasCopied] = useState(false);\n\n    const colorScheme = useColorScheme();\n    const colorMode =\n        colorScheme?.theme.colorMode === 'dark'\n            ? CopyableContentColorMode.Dark\n            : CopyableContentColorMode.Light;\n\n    const defaultCopyButtonText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n    });\n    const defaultCopyFailedMessage = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.share),\n    });\n\n    const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n    useEffect(\n        () => () => {\n            window.clearTimeout(copyFeedbackTimeoutRef.current);\n        },\n        [],\n    );\n\n    const showCopyFeedback = useCallback(() => {\n        window.clearTimeout(copyFeedbackTimeoutRef.current);\n        setHasCopied(true);\n\n        copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n            setHasCopied(false);\n        }, COPY_FEEDBACK_DURATION);\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        if (isDisabled) {\n            return;\n        }\n\n        try {\n            await copyableContentToClipboard(content, transformClipboardHtml);\n            showCopyFeedback();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedMessage ?? defaultCopyFailedMessage,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [\n        content,\n        defaultCopyFailedMessage,\n        isDisabled,\n        copyFailedMessage,\n        showCopyFeedback,\n        transformClipboardHtml,\n    ]);\n\n    return (\n        <StyledCopyableContent\n            $appearance={appearance}\n            $colorMode={colorMode}\n            className=\"copyable-content\"\n            ref={rootRef}\n        >\n            <StyledCopyableContentActions ref={actionGroupRef}>\n                <StyledCopyableContentActionGroup>\n                    <StyledCopyableContentButton\n                        $colorMode={colorMode}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={defaultCopyButtonText}\n                        disabled={isDisabled}\n                        onClick={() => {\n                            void handleCopy();\n                        }}\n                        type=\"button\"\n                    >\n                        <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n                    </StyledCopyableContentButton>\n                    <SharingContextMenu\n                        link={content}\n                        shouldDisableClick={isDisabled}\n                        shouldShowCallingCodeAction={false}\n                        shouldShowCopyAction={false}\n                        shouldUseDefaultTriggerStyles={false}\n                    >\n                        <StyledCopyableContentButton\n                            $colorMode={colorMode}\n                            $isSticky={isActionGroupSticky}\n                            aria-label={shareText}\n                            disabled={isDisabled}\n                            type=\"button\"\n                        >\n                            <Icon icons={['fa fa-share-nodes']} />\n                        </StyledCopyableContentButton>\n                    </SharingContextMenu>\n                </StyledCopyableContentActionGroup>\n            </StyledCopyableContentActions>\n            {typeof collapsedHeight === 'number' ? (\n                <StyledCopyableContentTruncation>\n                    <Truncation collapsedHeight={collapsedHeight}>\n                        <StyledCopyableContentBody\n                            $colorMode={colorMode}\n                            $shouldShowPadding={false}\n                        >\n                            {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n                        </StyledCopyableContentBody>\n                    </Truncation>\n                </StyledCopyableContentTruncation>\n            ) : (\n                <StyledCopyableContentBody $colorMode={colorMode}>\n                    {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n                </StyledCopyableContentBody>\n            )}\n        </StyledCopyableContent>\n    );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/copyable-content/CopyableContent.styles.js

@@ -99,17 +99,22 @@ export const StyledCopyableContentButton = styled.button`
         box-shadow 0.15s ease,
         transform 0.15s ease;
 
-    &:hover {
+    &:enabled:hover {
         border-color: ${getButtonHoverBorder};
         background-color: ${getButtonHoverBackground};
         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
     }
 
-    &:active {
+    &:enabled:active {
         background-color: ${getButtonActiveBackground};
         transform: scale(0.94);
     }
 
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.45;
+    }
+
     &:focus-visible {
         outline: 2px solid currentColor;
         outline-offset: 2px;

package/lib/esm/components/copyable-content/CopyableContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","CopyableContentColorMode","getBackgroundColor","$appearance","$colorMode","Chat","Dark","getTextColor","StyledCopyableContent","section","getActionGroupBorder","$isSticky","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonColor","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","StyledCopyableContentTruncation","getHeadlineColor","getBlockquoteBorderColor","getLinkColor","StyledCopyableContentBody","$shouldShowPadding"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\nexport enum CopyableContentColorMode {\n    Dark = 'dark',\n    Light = 'light',\n}\n\ntype StyledCopyableContentProps = WithTheme<{\n    $appearance: CopyableContentAppearance;\n    $colorMode: CopyableContentColorMode;\n}>;\n\nconst getBackgroundColor = ({ $appearance, $colorMode }: StyledCopyableContentProps) => {\n    if ($appearance === CopyableContentAppearance.Chat) {\n        return 'rgba(0, 0, 0, 0.12)';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';\n};\n\nconst getTextColor = ({ $colorMode }: StyledCopyableContentProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n    --copyable-content-action-size: 32px;\n    --copyable-content-action-inset: 8px;\n\n    margin: 4px 0;\n    min-width: 0;\n    max-width: 100%;\n    overflow-wrap: anywhere;\n    padding-top: calc(\n        var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n    );\n    border-radius: 8px;\n    background-color: ${getBackgroundColor};\n    color: ${getTextColor};\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n    $colorMode: CopyableContentColorMode;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n    position: sticky;\n    top: var(--copyable-content-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n    margin-top: calc(\n        (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n    );\n    padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--copyable-content-action-size);\n    height: var(--copyable-content-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${getButtonColor};\n    box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n    transition:\n        background-color 0.15s ease,\n        border-color 0.15s ease,\n        box-shadow 0.15s ease,\n        transform 0.15s ease;\n\n    &:hover {\n        border-color: ${getButtonHoverBorder};\n        background-color: ${getButtonHoverBackground};\n        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n    }\n\n    &:active {\n        background-color: ${getButtonActiveBackground};\n        transform: scale(0.94);\n    }\n\n    &:focus-visible {\n        outline: 2px solid currentColor;\n        outline-offset: 2px;\n    }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n    padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n    $colorMode: CopyableContentColorMode;\n    $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n    min-width: 0;\n    max-width: 100%;\n    overflow-x: clip;\n    overflow-wrap: anywhere;\n    padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    p,\n    ul,\n    ol,\n    blockquote {\n        margin: 0 0 12px;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        color: ${getHeadlineColor};\n    }\n\n    ul,\n    ol {\n        padding-left: 24px;\n    }\n\n    blockquote {\n        padding-left: 12px;\n        border-left: 3px solid ${getBlockquoteBorderColor};\n    }\n\n    a {\n        color: ${getLinkColor};\n        overflow-wrap: anywhere;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","CopyableContentColorMode","getBackgroundColor","$appearance","$colorMode","Chat","Dark","getTextColor","StyledCopyableContent","section","getActionGroupBorder","$isSticky","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonColor","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","StyledCopyableContentTruncation","getHeadlineColor","getBlockquoteBorderColor","getLinkColor","StyledCopyableContentBody","$shouldShowPadding"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\nexport enum CopyableContentColorMode {\n    Dark = 'dark',\n    Light = 'light',\n}\n\ntype StyledCopyableContentProps = WithTheme<{\n    $appearance: CopyableContentAppearance;\n    $colorMode: CopyableContentColorMode;\n}>;\n\nconst getBackgroundColor = ({ $appearance, $colorMode }: StyledCopyableContentProps) => {\n    if ($appearance === CopyableContentAppearance.Chat) {\n        return 'rgba(0, 0, 0, 0.12)';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';\n};\n\nconst getTextColor = ({ $colorMode }: StyledCopyableContentProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n    --copyable-content-action-size: 32px;\n    --copyable-content-action-inset: 8px;\n\n    margin: 4px 0;\n    min-width: 0;\n    max-width: 100%;\n    overflow-wrap: anywhere;\n    padding-top: calc(\n        var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n    );\n    border-radius: 8px;\n    background-color: ${getBackgroundColor};\n    color: ${getTextColor};\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n    $colorMode: CopyableContentColorMode;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n    position: sticky;\n    top: var(--copyable-content-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n    margin-top: calc(\n        (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n    );\n    padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--copyable-content-action-size);\n    height: var(--copyable-content-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${getButtonColor};\n    box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n    transition:\n        background-color 0.15s ease,\n        border-color 0.15s ease,\n        box-shadow 0.15s ease,\n        transform 0.15s ease;\n\n    &:enabled:hover {\n        border-color: ${getButtonHoverBorder};\n        background-color: ${getButtonHoverBackground};\n        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n    }\n\n    &:enabled:active {\n        background-color: ${getButtonActiveBackground};\n        transform: scale(0.94);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.45;\n    }\n\n    &:focus-visible {\n        outline: 2px solid currentColor;\n        outline-offset: 2px;\n    }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n    padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n    $colorMode: CopyableContentColorMode;\n    $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n    min-width: 0;\n    max-width: 100%;\n    overflow-x: clip;\n    overflow-wrap: anywhere;\n    padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    p,\n    ul,\n    ol,\n    blockquote {\n        margin: 0 0 12px;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        color: ${getHeadlineColor};\n    }\n\n    ul,\n    ol {\n        padding-left: 24px;\n    }\n\n    blockquote {\n        padding-left: 12px;\n        border-left: 3px solid ${getBlockquoteBorderColor};\n    }\n\n    a {\n        color: ${getLinkColor};\n        overflow-wrap: anywhere;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-list/file-item/FileItem.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { getHumanSize, getIconByMimeType } from '../../../utils/file';
 import Icon from '../../icon/Icon';
 import ContextMenu from '../../context-menu/ContextMenu';
@@ -6,6 +6,7 @@ import ListItem from '../../list/list-item/ListItem';
 import { StyledFileItem, StyledFileItemKeyboardWrapper, StyledFileItemIcon } from './FileItem.styles';
 import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
 import textStrings from '../../../constants/textStrings';
+import { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
 const FileItem = ({
   mimeType,
@@ -18,7 +19,12 @@ const FileItem = ({
 }) => {
   const canDownload = shouldAllowDownload && !!source;
   const canRemove = typeof onRemove === 'function';
+  const actionIconRef = useRef(null);
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);
+  useFocusRingPortal(actionIconRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle'
+  });
   const handleRemove = useCallback(() => {
     if (canRemove) {
       onRemove(id);
@@ -118,6 +124,7 @@ const FileItem = ({
     const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;
     const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';
     return /*#__PURE__*/React.createElement(StyledFileItemIcon, {
+      ref: actionIconRef,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       role: "button",

package/lib/esm/components/file-list/file-item/FileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemKeyboardWrapper","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","useKeyboardFocusHighlighting","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","canDownload","canRemove","shouldShowKeyboardHighlighting","handleRemove","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","handleClick","handleKeyDown","fileIcon","onKeyDown","role","tabIndex","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport {\n    StyledFileItem,\n    StyledFileItemActions,\n    StyledFileItemKeyboardWrapper,\n    StyledFileItemRemoveButton,\n    StyledFileItemIcon,\n} from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);\n\n    const handleRemove = useCallback(() => {\n        if (canRemove) {\n            onRemove(id);\n        }\n    }, [id, onRemove]);\n\n    const handleItemKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Delete') {\n                event.preventDefault();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const handleRemoveKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n        (event) => {\n            if (canRemove && (event.key === 'Enter' || event.key === ' ')) {\n                event.preventDefault();\n                event.stopPropagation();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        if (!canDownload && !canRemove) return undefined;\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        const handleClick = () => {\n            if (canRemove) {\n                onRemove(id);\n                return;\n            }\n\n            handleDownload();\n        };\n\n        const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;\n\n        const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';\n\n        return (\n            <StyledFileItemIcon\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                <Icon icons={[fileIcon]} />\n            </StyledFileItemIcon>\n        );\n    }, [\n        canDownload,\n        canRemove,\n        downloadText,\n        handleDownload,\n        handleRemoveKeyDown,\n        id,\n        onRemove,\n        removeText,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <StyledFileItemKeyboardWrapper onKeyDown={handleItemKeyDown} tabIndex={-1}>\n                    <ListItem\n                        title={name}\n                        subtitle={humanFileSize}\n                        icons={[icon]}\n                        rightElements={rightElement}\n                        shouldEnableKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    />\n                </StyledFileItemKeyboardWrapper>\n            </StyledFileItem>\n        ),\n        [\n            handleItemKeyDown,\n            humanFileSize,\n            icon,\n            name,\n            rightElement,\n            shouldShowKeyboardHighlighting,\n        ],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA8BC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC7E,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,qBAAqB;AACrE,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,WAAW,MAAM,gCAAgC;AAExD,OAAOC,QAAQ,MAAM,+BAA+B;AAEpD,SACIC,cAAc,EAEdC,6BAA6B,EAE7BC,kBAAkB,QACf,mBAAmB;AAC1B,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,+BAA+B;AACpF,OAAOC,WAAW,MAAM,gCAAgC;AACxD,SAASC,4BAA4B,QAAQ,6CAA6C;AAO1F,MAAMC,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,IAAI;EACJC,EAAE;EACFC,MAAM;EACNC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGD,mBAAmB,IAAI,CAAC,CAACD,MAAM;EACnD,MAAMG,SAAS,GAAG,OAAOP,QAAQ,KAAK,UAAU;EAEhD,MAAMQ,8BAA8B,GAAGX,4BAA4B,CAACU,SAAS,IAAI,CAAC,CAACD,WAAW,CAAC;EAE/F,MAAMG,YAAY,GAAGzB,WAAW,CAAC,MAAM;IACnC,IAAIuB,SAAS,EAAE;MACXP,QAAQ,CAACG,EAAE,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,EAAE,EAAEH,QAAQ,CAAC,CAAC;EAElB,MAAMU,iBAAiB,GAAG1B,WAAW,CAChC2B,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;MACxBD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBJ,YAAY,CAAC,CAAC;IAClB;EACJ,CAAC,EACD,CAACA,YAAY,CACjB,CAAC;EAED,MAAMK,mBAAmB,GAAG9B,WAAW,CAClC2B,KAAK,IAAK;IACP,IAAIJ,SAAS,KAAKI,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,CAAC,EAAE;MAC3DD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBF,KAAK,CAACI,eAAe,CAAC,CAAC;MACvBN,YAAY,CAAC,CAAC;IAClB;EACJ,CAAC,EACD,CAACA,YAAY,CACjB,CAAC;EAED,MAAMO,aAAa,GAAG/B,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOgB,IAAI,KAAK,QAAQ,EAAE;MAC1B,OAAOf,YAAY,CAACe,IAAI,CAAC;IAC7B;IAEA,OAAOgB,SAAS;EACpB,CAAC,EAAE,CAAChB,IAAI,CAAC,CAAC;EAEV,MAAMiB,IAAI,GAAGjC,OAAO,CAAC,MAAME,iBAAiB,CAACY,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEnE,MAAMoB,cAAc,GAAGnC,WAAW,CAAC,MAAM;IACrC,IAAI,CAACoB,MAAM,EAAE;IAEb,IAAIA,MAAM,YAAYgB,IAAI,EAAE;MACxB,MAAMC,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACnB,MAAM,CAAC;MACvC,MAAMoB,CAAC,GAAGC,QAAQ,CAACC,aAAa,CAAC,GAAG,CAAC;MACrCF,CAAC,CAACG,IAAI,GAAGN,GAAG;MACZG,CAAC,CAACI,QAAQ,GAAG1B,IAAI;MACjBuB,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACN,CAAC,CAAC;MAC5BA,CAAC,CAACO,KAAK,CAAC,CAAC;MACTN,QAAQ,CAACI,IAAI,CAACG,WAAW,CAACR,CAAC,CAAC;MAC5BF,GAAG,CAACW,eAAe,CAACZ,GAAG,CAAC;IAC5B,CAAC,MAAM;MACH;MACA;MACAa,KAAK,CAAC9B,MAAM,CAAC,CACR+B,IAAI,CAAEC,GAAG,IAAK;QACX,IAAI,CAACA,GAAG,CAACC,EAAE,EAAE,MAAM,IAAIC,KAAK,CAAC,cAAc,CAAC;QAC5C,OAAOF,GAAG,CAACG,IAAI,CAAC,CAAC;MACrB,CAAC,CAAC,CACDJ,IAAI,CAAEI,IAAI,IAAK;QACZ,MAAMlB,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACgB,IAAI,CAAC;QACrC,MAAMf,CAAC,GAAGC,QAAQ,CAACC,aAAa,CAAC,GAAG,CAAC;QACrCF,CAAC,CAACG,IAAI,GAAGN,GAAG;QACZG,CAAC,CAACI,QAAQ,GAAG1B,IAAI;QACjBuB,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACN,CAAC,CAAC;QAC5BA,CAAC,CAACO,KAAK,CAAC,CAAC;QACTN,QAAQ,CAACI,IAAI,CAACG,WAAW,CAACR,CAAC,CAAC;QAC5BF,GAAG,CAACW,eAAe,CAACZ,GAAG,CAAC;MAC5B,CAAC,CAAC,CACDmB,KAAK,CAAC,MAAM;QACT;QACA,MAAMhB,CAAC,GAAGC,QAAQ,CAACC,aAAa,CAAC,GAAG,CAAC;QACrCF,CAAC,CAACG,IAAI,GAAGvB,MAAM;QACfoB,CAAC,CAACI,QAAQ,GAAG1B,IAAI;QACjBsB,CAAC,CAACiB,GAAG,GAAG,qBAAqB;QAC7BjB,CAAC,CAACkB,MAAM,GAAG,QAAQ;QACnBjB,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACN,CAAC,CAAC;QAC5BA,CAAC,CAACO,KAAK,CAAC,CAAC;QACTN,QAAQ,CAACI,IAAI,CAACG,WAAW,CAACR,CAAC,CAAC;MAChC,CAAC,CAAC;IACV;EACJ,CAAC,EAAE,CAACtB,IAAI,EAAEE,MAAM,CAAC,CAAC;EAElB,MAAMuC,YAAY,GAAGhD,kBAAkB,CAAC;IACpCiD,UAAU,EAAElD,gBAAgB,CAACE,WAAW,CAACiD,UAAU,CAACC,QAAQ,CAAClB,QAAQ;EACzE,CAAC,CAAC;EACF,MAAMmB,UAAU,GAAGpD,kBAAkB,CAAC;IAClCiD,UAAU,EAAElD,gBAAgB,CAACE,WAAW,CAACiD,UAAU,CAACC,QAAQ,CAACE,MAAM;EACvE,CAAC,CAAC;EAEF,MAAMC,YAAY,GAAGhE,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACqB,WAAW,IAAI,CAACC,SAAS,EAAE,OAAOU,SAAS;IAChD;IACA,IAAIX,WAAW,IAAIC,SAAS,EAAE;MAC1B,MAAM2C,KAAwB,GAAG,CAC7B;QACIC,KAAK,EAAE,CAAC,gBAAgB,CAAC;QACzBvC,GAAG,EAAE,UAAU;QACfwC,OAAO,EAAEjC,cAAc;QACvBkC,IAAI,EAAEV;MACV,CAAC,EACD;QACIQ,KAAK,EAAE,CAAC,aAAa,CAAC;QACtBvC,GAAG,EAAE,QAAQ;QACbwC,OAAO,EAAEA,CAAA,KAAMpD,QAAQ,CAACG,EAAE,CAAC;QAC3BkD,IAAI,EAAEN;MACV,CAAC,CACJ;MAED,oBAAOhE,KAAA,CAAA2C,aAAA,CAACrC,WAAW;QAAC6D,KAAK,EAAEA;MAAM,CAAE,CAAC;IACxC;IAEA,MAAMI,WAAW,GAAGA,CAAA,KAAM;MACtB,IAAI/C,SAAS,EAAE;QACXP,QAAQ,CAACG,EAAE,CAAC;QACZ;MACJ;MAEAgB,cAAc,CAAC,CAAC;IACpB,CAAC;IAED,MAAMoC,aAAa,GAAGhD,SAAS,GAAGO,mBAAmB,GAAGG,SAAS;IAEjE,MAAMuC,QAAQ,GAAGjD,SAAS,GAAG,UAAU,GAAG,gBAAgB;IAE1D,oBACIxB,KAAA,CAAA2C,aAAA,CAACjC,kBAAkB;MACf2D,OAAO,EAAEE,WAAY;MACrBG,SAAS,EAAEF,aAAc;MACzBG,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE;IAAE,gBAEZ5E,KAAA,CAAA2C,aAAA,CAACtC,IAAI;MAAC+D,KAAK,EAAE,CAACK,QAAQ;IAAE,CAAE,CACV,CAAC;EAE7B,CAAC,EAAE,CACClD,WAAW,EACXC,SAAS,EACToC,YAAY,EACZxB,cAAc,EACdL,mBAAmB,EACnBX,EAAE,EACFH,QAAQ,EACR+C,UAAU,CACb,CAAC;EAEF,OAAO9D,OAAO,CACV,mBACIF,KAAA,CAAA2C,aAAA,CAACnC,cAAc,qBACXR,KAAA,CAAA2C,aAAA,CAAClC,6BAA6B;IAACiE,SAAS,EAAE/C,iBAAkB;IAACiD,QAAQ,EAAE,CAAC;EAAE,gBACtE5E,KAAA,CAAA2C,aAAA,CAACpC,QAAQ;IACLsE,KAAK,EAAE1D,IAAK;IACZ2D,QAAQ,EAAE7C,aAAc;IACxBmC,KAAK,EAAE,CAACjC,IAAI,CAAE;IACd4C,aAAa,EAAEb,YAAa;IAC5Bc,gCAAgC,EAAEvD;EAA+B,CACpE,CAC0B,CACnB,CACnB,EACD,CACIE,iBAAiB,EACjBM,aAAa,EACbE,IAAI,EACJhB,IAAI,EACJ+C,YAAY,EACZzC,8BAA8B,CAEtC,CAAC;AACL,CAAC;AAEDV,QAAQ,CAACkE,WAAW,GAAG,UAAU;AAEjC,eAAelE,QAAQ","ignoreList":[]}
+{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","useRef","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemKeyboardWrapper","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","canDownload","canRemove","actionIconRef","shouldShowKeyboardHighlighting","isEnabled","shape","handleRemove","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","handleClick","handleKeyDown","fileIcon","ref","onKeyDown","role","tabIndex","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useMemo, useRef } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport {\n    StyledFileItem,\n    StyledFileItemActions,\n    StyledFileItemKeyboardWrapper,\n    StyledFileItemRemoveButton,\n    StyledFileItemIcon,\n} from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n    const actionIconRef = useRef<HTMLDivElement>(null);\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);\n    useFocusRingPortal(actionIconRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n    });\n\n    const handleRemove = useCallback(() => {\n        if (canRemove) {\n            onRemove(id);\n        }\n    }, [id, onRemove]);\n\n    const handleItemKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Delete') {\n                event.preventDefault();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const handleRemoveKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n        (event) => {\n            if (canRemove && (event.key === 'Enter' || event.key === ' ')) {\n                event.preventDefault();\n                event.stopPropagation();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        if (!canDownload && !canRemove) return undefined;\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        const handleClick = () => {\n            if (canRemove) {\n                onRemove(id);\n                return;\n            }\n\n            handleDownload();\n        };\n\n        const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;\n\n        const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';\n\n        return (\n            <StyledFileItemIcon\n                ref={actionIconRef}\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                <Icon icons={[fileIcon]} />\n            </StyledFileItemIcon>\n        );\n    }, [\n        canDownload,\n        canRemove,\n        downloadText,\n        handleDownload,\n        handleRemoveKeyDown,\n        id,\n        onRemove,\n        removeText,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <StyledFileItemKeyboardWrapper onKeyDown={handleItemKeyDown} tabIndex={-1}>\n                    <ListItem\n                        title={name}\n                        subtitle={humanFileSize}\n                        icons={[icon]}\n                        rightElements={rightElement}\n                        shouldEnableKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    />\n                </StyledFileItemKeyboardWrapper>\n            </StyledFileItem>\n        ),\n        [\n            handleItemKeyDown,\n            humanFileSize,\n            icon,\n            name,\n            rightElement,\n            shouldShowKeyboardHighlighting,\n        ],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-list/file-item/FileItem.styles.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { keyboardFocusHighlightingCircleRingCss, keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledFileItem = styled.div``;
 export const StyledFileItemIcon = styled.div`
     align-items: center;
@@ -13,14 +12,9 @@ export const StyledFileItemIcon = styled.div`
     &:focus-visible {
         outline: none;
         color: inherit;
-        ${keyboardFocusHighlightingCircleRingCss};
-    }
-`;
-export const StyledFileItemKeyboardWrapper = styled.div`
-    &:focus-visible {
-        ${keyboardFocusHighlightingRingCss}
     }
 `;
+export const StyledFileItemKeyboardWrapper = styled.div``;
 export const StyledFileItemActions = styled.span`
     display: flex;
     gap: 8px;
@@ -28,9 +22,5 @@ export const StyledFileItemActions = styled.span`
 `;
 export const StyledFileItemRemoveButton = styled.span`
     display: inline-flex;
-
-    &:focus-visible {
-        ${keyboardFocusHighlightingRingCss}
-    }
 `;
 //# sourceMappingURL=FileItem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileItem.styles.js","names":["styled","keyboardFocusHighlightingCircleRingCss","keyboardFocusHighlightingRingCss","StyledFileItem","div","StyledFileItemIcon","StyledFileItemKeyboardWrapper","StyledFileItemActions","span","StyledFileItemRemoveButton"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport {\n    keyboardFocusHighlightingCircleRingCss,\n    keyboardFocusHighlightingRingCss,\n} from '../../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    background-color: transparent;\n    border-radius: 3px;\n    padding: 6px;\n    transition: background-color 0.3s ease;\n\n    &:focus-visible {\n        outline: none;\n        color: inherit;\n        ${keyboardFocusHighlightingCircleRingCss};\n    }\n`;\n\nexport const StyledFileItemKeyboardWrapper = styled.div`\n    &:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n\nexport const StyledFileItemActions = styled.span`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n`;\n\nexport const StyledFileItemRemoveButton = styled.span`\n    display: inline-flex;\n\n    &:focus-visible {\n        ${keyboardFocusHighlightingRingCss}\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SACIC,sCAAsC,EACtCC,gCAAgC,QAC7B,iDAAiD;AAExD,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAG,EAAE;AAC1C,OAAO,MAAMC,kBAAkB,GAAGL,MAAM,CAACI,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUH,sCAAsC;AAChD;AACA,CAAC;AAED,OAAO,MAAMK,6BAA6B,GAAGN,MAAM,CAACI,GAAG;AACvD;AACA,UAAUF,gCAAgC;AAC1C;AACA,CAAC;AAED,OAAO,MAAMK,qBAAqB,GAAGP,MAAM,CAACQ,IAAI;AAChD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGT,MAAM,CAACQ,IAAI;AACrD;AACA;AACA;AACA,UAAUN,gCAAgC;AAC1C;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"FileItem.styles.js","names":["styled","StyledFileItem","div","StyledFileItemIcon","StyledFileItemKeyboardWrapper","StyledFileItemActions","span","StyledFileItemRemoveButton"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    background-color: transparent;\n    border-radius: 3px;\n    padding: 6px;\n    transition: background-color 0.3s ease;\n\n    &:focus-visible {\n        outline: none;\n        color: inherit;\n    }\n`;\n\nexport const StyledFileItemKeyboardWrapper = styled.div``;\n\nexport const StyledFileItemActions = styled.span`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n`;\n\nexport const StyledFileItemRemoveButton = styled.span`\n    display: inline-flex;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,EAAE;AAC1C,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGJ,MAAM,CAACE,GAAG,EAAE;AAEzD,OAAO,MAAMG,qBAAqB,GAAGL,MAAM,CAACM,IAAI;AAChD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGP,MAAM,CAACM,IAAI;AACrD;AACA,CAAC","ignoreList":[]}