@chayns-components/core 5.4.6 → 5.4.8-alpha.0

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.utils.js","names":["getDefaultFocusedIndex","items","findIndex","item","isSelected"],"sources":["../../../../src/components/context-menu/ContextMenu.utils.ts"],"sourcesContent":["import type { ContextMenuItem } from './ContextMenu.types';\n\nexport const getDefaultFocusedIndex = (items: ContextMenuItem[]): number =>\n    items.findIndex((item) => item.isSelected);\n"],"mappings":"AAEA,OAAO,MAAMA,sBAAsB,GAAIC,KAAwB,IAC3DA,KAAK,CAACC,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACC,UAAU,CAAC","ignoreList":[]}
+{"version":3,"file":"ContextMenu.utils.js","names":["getDefaultFocusedIndex","items","findIndex","item","isSelected","getActiveItemIndex","contextMenuContentElement","focusedIndex","activeElement","document","activeItemElement","contains","closest","undefined","Number","dataset","index","selectItem","onClose","shouldCloseOnPopupClick","onClick"],"sources":["../../../../src/components/context-menu/ContextMenu.utils.ts"],"sourcesContent":["import type { ContextMenuItem } from './ContextMenu.types';\n\nexport const getDefaultFocusedIndex = (items: ContextMenuItem[]): number =>\n    items.findIndex((item) => item.isSelected);\n\nexport const getActiveItemIndex = ({\n    contextMenuContentElement,\n    focusedIndex,\n}: {\n    contextMenuContentElement: HTMLDivElement | null;\n    focusedIndex: number;\n}) => {\n    const activeElement = document.activeElement as HTMLElement | null;\n    const activeItemElement = contextMenuContentElement?.contains(activeElement)\n        ? activeElement?.closest<HTMLElement>('[data-index]')\n        : undefined;\n\n    return activeItemElement ? Number(activeItemElement.dataset.index) : focusedIndex;\n};\n\nexport const selectItem = ({\n    index,\n    items,\n    onClose,\n    shouldCloseOnPopupClick,\n}: {\n    index: number;\n    items: ContextMenuItem[];\n    onClose: VoidFunction;\n    shouldCloseOnPopupClick: boolean;\n}) => {\n    const item = items[index];\n\n    if (!item) {\n        return false;\n    }\n\n    void item.onClick();\n\n    if (shouldCloseOnPopupClick) {\n        onClose();\n    }\n\n    return true;\n};\n"],"mappings":"AAEA,OAAO,MAAMA,sBAAsB,GAAIC,KAAwB,IAC3DA,KAAK,CAACC,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACC,UAAU,CAAC;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAC/BC,yBAAyB;EACzBC;AAIJ,CAAC,KAAK;EACF,MAAMC,aAAa,GAAGC,QAAQ,CAACD,aAAmC;EAClE,MAAME,iBAAiB,GAAGJ,yBAAyB,EAAEK,QAAQ,CAACH,aAAa,CAAC,GACtEA,aAAa,EAAEI,OAAO,CAAc,cAAc,CAAC,GACnDC,SAAS;EAEf,OAAOH,iBAAiB,GAAGI,MAAM,CAACJ,iBAAiB,CAACK,OAAO,CAACC,KAAK,CAAC,GAAGT,YAAY;AACrF,CAAC;AAED,OAAO,MAAMU,UAAU,GAAGA,CAAC;EACvBD,KAAK;EACLf,KAAK;EACLiB,OAAO;EACPC;AAMJ,CAAC,KAAK;EACF,MAAMhB,IAAI,GAAGF,KAAK,CAACe,KAAK,CAAC;EAEzB,IAAI,CAACb,IAAI,EAAE;IACP,OAAO,KAAK;EAChB;EAEA,KAAKA,IAAI,CAACiB,OAAO,CAAC,CAAC;EAEnB,IAAID,uBAAuB,EAAE;IACzBD,OAAO,CAAC,CAAC;EACb;EAEA,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js

@@ -9,7 +9,7 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef(({
   zIndex,
   shouldHidePopupArrow,
   headline,
-  onKeySelect,
+  onItemFocus,
   focusedIndex,
   onMouseEnter,
   onMouseLeave
@@ -69,14 +69,9 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef(({
       tabIndex: 0,
       $shouldHidePopupArrow: shouldHidePopupArrow,
       $isFocused: isFocused,
-      onKeyDown: e => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          onKeySelect(index);
-        }
-      }
+      onFocus: () => onItemFocus(index)
     }, iconElement, /*#__PURE__*/React.createElement(StyledContextMenuContentItemText, null, text)), shouldShowSpacer && /*#__PURE__*/React.createElement(StyledContextMenuContentItemSpacer, null));
-  }), [items, focusedIndex, shouldHidePopupArrow, onKeySelect]);
+  }), [items, focusedIndex, shouldHidePopupArrow, onItemFocus]);
   return /*#__PURE__*/React.createElement(StyledMotionContextMenuContent, {
     animate: {
       opacity: 1,

package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContent.js","names":["React","isValidElement","useMemo","Icon","StyledContextMenuContentHeadline","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemSpacer","StyledContextMenuContentItemText","StyledContextMenuContentItemWrapper","StyledMotionContextMenuContent","ContextMenuAlignment","ContextMenuContent","forwardRef","alignment","coordinates","items","zIndex","shouldHidePopupArrow","headline","onKeySelect","focusedIndex","onMouseEnter","onMouseLeave","ref","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","content","map","onClick","key","text","icons","shouldShowSpacer","index","isFocused","iconElement","Array","isArray","length","createElement","event","preventDefault","stopPropagation","tabIndex","$shouldHidePopupArrow","$isFocused","onKeyDown","e","animate","opacity","y","exit","initial","$position","$zIndex","style","left","x","top","transition","ease","transformTemplate","displayName"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { isValidElement, useMemo } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledContextMenuContentHeadline,\n    StyledContextMenuContentItem,\n    StyledContextMenuContentItemIconWrapper,\n    StyledContextMenuContentItemSpacer,\n    StyledContextMenuContentItemText,\n    StyledContextMenuContentItemWrapper,\n    StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n} from '../ContextMenu.types';\n\ntype ContextMenuContentProps = {\n    alignment: ContextMenuAlignment;\n    coordinates: ContextMenuCoordinates;\n    items: ContextMenuItem[];\n    shouldHidePopupArrow: boolean;\n    headline?: string;\n    zIndex: number;\n    focusedIndex: number;\n    onKeySelect: (index: number) => void;\n    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n    (\n        {\n            alignment,\n            coordinates,\n            items,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            onKeySelect,\n            focusedIndex,\n            onMouseEnter,\n            onMouseLeave,\n        },\n        ref,\n    ) => {\n        const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n        const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n        const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n        const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n        const percentageOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return -100;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return -50;\n            }\n\n            return 0;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const anchorOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return 15;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return 0;\n            }\n\n            return -15;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const percentageOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;\n\n        const anchorOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        const content = useMemo(\n            () =>\n                items.map(({ onClick, key, text, icons, shouldShowSpacer }, index) => {\n                    const isFocused = index === focusedIndex;\n\n                    let iconElement = null;\n\n                    if (isValidElement(icons)) {\n                        iconElement = icons;\n                    } else if (Array.isArray(icons) && icons.length > 0) {\n                        iconElement = (\n                            <StyledContextMenuContentItemIconWrapper>\n                                <Icon icons={icons} />\n                            </StyledContextMenuContentItemIconWrapper>\n                        );\n                    }\n\n                    return (\n                        <StyledContextMenuContentItem\n                            key={`context-menu-item-${key}`}\n                            data-index={index}\n                        >\n                            <StyledContextMenuContentItemWrapper\n                                key={key}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                    void onClick(event);\n                                }}\n                                tabIndex={0}\n                                $shouldHidePopupArrow={shouldHidePopupArrow}\n                                $isFocused={isFocused}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        onKeySelect(index);\n                                    }\n                                }}\n                            >\n                                {iconElement}\n                                <StyledContextMenuContentItemText>\n                                    {text}\n                                </StyledContextMenuContentItemText>\n                            </StyledContextMenuContentItemWrapper>\n                            {shouldShowSpacer && <StyledContextMenuContentItemSpacer />}\n                        </StyledContextMenuContentItem>\n                    );\n                }),\n            [items, focusedIndex, shouldHidePopupArrow, onKeySelect],\n        );\n\n        return (\n            <StyledMotionContextMenuContent\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldHidePopupArrow={shouldHidePopupArrow}\n                $zIndex={zIndex}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ ease: 'anticipate' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n            >\n                {headline && (\n                    <StyledContextMenuContentHeadline>{headline}</StyledContextMenuContentHeadline>\n                )}\n                {content}\n            </StyledMotionContextMenuContent>\n        );\n    },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenuContent.js","names":["React","isValidElement","useMemo","Icon","StyledContextMenuContentHeadline","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemSpacer","StyledContextMenuContentItemText","StyledContextMenuContentItemWrapper","StyledMotionContextMenuContent","ContextMenuAlignment","ContextMenuContent","forwardRef","alignment","coordinates","items","zIndex","shouldHidePopupArrow","headline","onItemFocus","focusedIndex","onMouseEnter","onMouseLeave","ref","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","content","map","onClick","key","text","icons","shouldShowSpacer","index","isFocused","iconElement","Array","isArray","length","createElement","event","preventDefault","stopPropagation","tabIndex","$shouldHidePopupArrow","$isFocused","onFocus","animate","opacity","y","exit","initial","$position","$zIndex","style","left","x","top","transition","ease","transformTemplate","displayName"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { isValidElement, useMemo } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledContextMenuContentHeadline,\n    StyledContextMenuContentItem,\n    StyledContextMenuContentItemIconWrapper,\n    StyledContextMenuContentItemSpacer,\n    StyledContextMenuContentItemText,\n    StyledContextMenuContentItemWrapper,\n    StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n} from '../ContextMenu.types';\n\ntype ContextMenuContentProps = {\n    alignment: ContextMenuAlignment;\n    coordinates: ContextMenuCoordinates;\n    items: ContextMenuItem[];\n    shouldHidePopupArrow: boolean;\n    headline?: string;\n    zIndex: number;\n    focusedIndex: number;\n    onItemFocus: (index: number) => void;\n    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n    (\n        {\n            alignment,\n            coordinates,\n            items,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            onItemFocus,\n            focusedIndex,\n            onMouseEnter,\n            onMouseLeave,\n        },\n        ref,\n    ) => {\n        const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n        const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n        const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n        const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n        const percentageOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return -100;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return -50;\n            }\n\n            return 0;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const anchorOffsetX = useMemo(() => {\n            if (isBottomLeftAlignment || isTopLeftAlignment) {\n                return 15;\n            }\n\n            if (isBottomCenterAlignment || isTopCenterAlignment) {\n                return 0;\n            }\n\n            return -15;\n        }, [\n            isBottomCenterAlignment,\n            isBottomLeftAlignment,\n            isTopCenterAlignment,\n            isTopLeftAlignment,\n        ]);\n\n        const percentageOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;\n\n        const anchorOffsetY =\n            isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        const content = useMemo(\n            () =>\n                items.map(({ onClick, key, text, icons, shouldShowSpacer }, index) => {\n                    const isFocused = index === focusedIndex;\n\n                    let iconElement = null;\n\n                    if (isValidElement(icons)) {\n                        iconElement = icons;\n                    } else if (Array.isArray(icons) && icons.length > 0) {\n                        iconElement = (\n                            <StyledContextMenuContentItemIconWrapper>\n                                <Icon icons={icons} />\n                            </StyledContextMenuContentItemIconWrapper>\n                        );\n                    }\n\n                    return (\n                        <StyledContextMenuContentItem\n                            key={`context-menu-item-${key}`}\n                            data-index={index}\n                        >\n                            <StyledContextMenuContentItemWrapper\n                                key={key}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                    void onClick(event);\n                                }}\n                                tabIndex={0}\n                                $shouldHidePopupArrow={shouldHidePopupArrow}\n                                $isFocused={isFocused}\n                                onFocus={() => onItemFocus(index)}\n                            >\n                                {iconElement}\n                                <StyledContextMenuContentItemText>\n                                    {text}\n                                </StyledContextMenuContentItemText>\n                            </StyledContextMenuContentItemWrapper>\n                            {shouldShowSpacer && <StyledContextMenuContentItemSpacer />}\n                        </StyledContextMenuContentItem>\n                    );\n                }),\n            [items, focusedIndex, shouldHidePopupArrow, onItemFocus],\n        );\n\n        return (\n            <StyledMotionContextMenuContent\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                $shouldHidePopupArrow={shouldHidePopupArrow}\n                $zIndex={zIndex}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ ease: 'anticipate' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n            >\n                {headline && (\n                    <StyledContextMenuContentHeadline>{headline}</StyledContextMenuContentHeadline>\n                )}\n                {content}\n            </StyledMotionContextMenuContent>\n        );\n    },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js

@@ -46,13 +46,10 @@ const DropdownBodyWrapper = /*#__PURE__*/forwardRef(({
     shouldShowDropdown
   });
   useEffect(() => {
-    // Only report the available max height while the dropdown is shown. Reporting it while
-    // the dropdown is closed would trigger unnecessary re-renders of the consumer (e.g. the
-    // ComboBox) during the initial layout, which can cause visible layout shifts.
-    if (shouldShowDropdown && typeof onAvailableMaxHeightChange === 'function') {
+    if (typeof onAvailableMaxHeightChange === 'function') {
       onAvailableMaxHeightChange(availableMaxHeight);
     }
-  }, [availableMaxHeight, onAvailableMaxHeightChange, shouldShowDropdown]);
+  }, [availableMaxHeight, onAvailableMaxHeightChange]);
   const handleClose = useCallback(() => {
     if (typeof onClose === 'function') {
       onClose();

package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBodyWrapper.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onAvailableMaxHeightChange","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","availableMaxHeight","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the available maximum height of the dropdown changes. The\n     * available maximum height is the space that is available for the dropdown content until the\n     * edge of the container is reached (minus a small spacing). This can be used to limit the\n     * content height, so the dropdown is not cut off when there is not enough space.\n     */\n    onAvailableMaxHeightChange?: (availableMaxHeight: number) => void;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper = forwardRef<HTMLDivElement, DropdownBodyWrapperProps>(\n    (\n        {\n            anchorElement,\n            bodyWidth,\n            children,\n            container: containerProp,\n            contentHeight = 0,\n            direction = DropdownDirection.BOTTOM_RIGHT,\n            maxHeight,\n            minBodyWidth = 0,\n            onAvailableMaxHeightChange,\n            onClose,\n            onOutsideClick,\n            onMeasure,\n            shouldCaptureEvents = true,\n            shouldShowDropdown,\n        },\n        ref,\n    ) => {\n        const isInChaynsWalletRef = useRef(false);\n\n        const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n        const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const contentRef = useRef<HTMLDivElement>(null);\n        const shouldPreventClickRef = useRef<boolean>(false);\n        const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n        const container = useContainer({ anchorElement, container: containerProp });\n\n        const { transform, width, coordinates, availableMaxHeight } = useDropdown({\n            anchorElement,\n            container,\n            contentHeight,\n            contentWidth: bodyWidth ?? measuredContentWidth,\n            direction,\n            shouldShowDropdown,\n        });\n\n        useEffect(() => {\n            // Only report the available max height while the dropdown is shown. Reporting it while\n            // the dropdown is closed would trigger unnecessary re-renders of the consumer (e.g. the\n            // ComboBox) during the initial layout, which can cause visible layout shifts.\n            if (shouldShowDropdown && typeof onAvailableMaxHeightChange === 'function') {\n                onAvailableMaxHeightChange(availableMaxHeight);\n            }\n        }, [availableMaxHeight, onAvailableMaxHeightChange, shouldShowDropdown]);\n\n        const handleClose = useCallback(() => {\n            if (typeof onClose === 'function') {\n                onClose();\n            }\n        }, [onClose]);\n\n        /**\n         * This function closes the body\n         */\n        const handleClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    contentRef.current &&\n                    shouldShowDropdown &&\n                    !anchorElement.contains(event.target as Node) &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                    if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                        handleClose();\n                    }\n                }\n\n                shouldPreventClickRef.current = false;\n            },\n            [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n        );\n\n        const handleContentMeasure = useCallback(\n            (measurements: DropdownMeasurements) => {\n                // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n                // unnecessary renders, we only set the height if the content is shown in the wallet.\n                if (isInChaynsWalletRef.current) {\n                    setMeasuredContentHeight(measurements.height);\n                }\n\n                setMeasuredContentWidth(measurements.width);\n\n                if (typeof onMeasure === 'function') {\n                    onMeasure(measurements);\n                }\n            },\n            [onMeasure],\n        );\n\n        const handleTouchEnd = useCallback(() => {\n            clearTimeout(touchTimeoutRef.current);\n        }, []);\n\n        const handleTouchStart = useCallback(() => {\n            touchTimeoutRef.current = window.setTimeout(() => {\n                shouldPreventClickRef.current = true;\n            }, 500);\n        }, []);\n\n        /**\n         * This hook listens for clicks\n         */\n        useDropdownListener({\n            onClick: handleClick,\n            onClose: handleClose,\n            onTouchEnd: handleTouchEnd,\n            onTouchStart: handleTouchStart,\n            shouldCaptureEvents,\n        });\n\n        useEffect(() => {\n            const isBottomDirection = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n                ContainerAnchor.RESERVATION_WRAPPER,\n            );\n\n            isInChaynsWalletRef.current =\n                !!(\n                    reservationWrapperElement && reservationWrapperElement.contains(anchorElement)\n                ) || true;\n\n            // This effect checks if additional space is needed to show dropdown content in chayns cards.\n            if (\n                isBottomDirection &&\n                isInChaynsWalletRef.current &&\n                measuredContentHeight > 0 &&\n                reservationWrapperElement &&\n                shouldShowDropdown\n            ) {\n                const availableHeight =\n                    window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n                // If the content height is greater than the available height, we need to add additional space.\n                // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n                const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n                if (additionalNeededSpace > 0) {\n                    // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                    reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n                } else {\n                    // Reset the margin bottom if no additional space is needed.\n                    reservationWrapperElement.style.marginBottom = '0px';\n                }\n            }\n\n            if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n                // Reset the margin bottom when the dropdown is closed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n\n            return () => {\n                if (reservationWrapperElement) {\n                    reservationWrapperElement.style.marginBottom = '0px';\n                }\n            };\n        }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n        useEffect(() => {\n            if (!container) return;\n\n            setPortal(() =>\n                createPortal(\n                    <DelayedDropdownContent\n                        coordinates={coordinates}\n                        onMeasure={handleContentMeasure}\n                        shouldShowContent={shouldShowDropdown}\n                        transform={transform}\n                    >\n                        <StyledDropdownBodyWrapperContent\n                            $width={width}\n                            $minWidth={minBodyWidth}\n                            $maxHeight={maxHeight}\n                            $direction={direction}\n                            ref={contentRef}\n                            className={\n                                typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined\n                            }\n                            tabIndex={0}\n                        >\n                            {children}\n                        </StyledDropdownBodyWrapperContent>\n                    </DelayedDropdownContent>,\n                    container,\n                ),\n            );\n        }, [\n            children,\n            container,\n            coordinates,\n            direction,\n            handleContentMeasure,\n            maxHeight,\n            minBodyWidth,\n            shouldShowDropdown,\n            transform,\n            width,\n        ]);\n\n        useImperativeHandle(ref, () => contentRef.current!, []);\n\n        return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n    },\n);\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropdownBodyWrapper.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onAvailableMaxHeightChange","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","availableMaxHeight","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the available maximum height of the dropdown changes. The\n     * available maximum height is the space that is available for the dropdown content until the\n     * edge of the container is reached (minus a small spacing). This can be used to limit the\n     * content height, so the dropdown is not cut off when there is not enough space.\n     */\n    onAvailableMaxHeightChange?: (availableMaxHeight: number) => void;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper = forwardRef<HTMLDivElement, DropdownBodyWrapperProps>(\n    (\n        {\n            anchorElement,\n            bodyWidth,\n            children,\n            container: containerProp,\n            contentHeight = 0,\n            direction = DropdownDirection.BOTTOM_RIGHT,\n            maxHeight,\n            minBodyWidth = 0,\n            onAvailableMaxHeightChange,\n            onClose,\n            onOutsideClick,\n            onMeasure,\n            shouldCaptureEvents = true,\n            shouldShowDropdown,\n        },\n        ref,\n    ) => {\n        const isInChaynsWalletRef = useRef(false);\n\n        const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n        const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const contentRef = useRef<HTMLDivElement>(null);\n        const shouldPreventClickRef = useRef<boolean>(false);\n        const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n        const container = useContainer({ anchorElement, container: containerProp });\n\n        const { transform, width, coordinates, availableMaxHeight } = useDropdown({\n            anchorElement,\n            container,\n            contentHeight,\n            contentWidth: bodyWidth ?? measuredContentWidth,\n            direction,\n            shouldShowDropdown,\n        });\n\n        useEffect(() => {\n            if (typeof onAvailableMaxHeightChange === 'function') {\n                onAvailableMaxHeightChange(availableMaxHeight);\n            }\n        }, [availableMaxHeight, onAvailableMaxHeightChange]);\n\n        const handleClose = useCallback(() => {\n            if (typeof onClose === 'function') {\n                onClose();\n            }\n        }, [onClose]);\n\n        /**\n         * This function closes the body\n         */\n        const handleClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    contentRef.current &&\n                    shouldShowDropdown &&\n                    !anchorElement.contains(event.target as Node) &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                    if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                        handleClose();\n                    }\n                }\n\n                shouldPreventClickRef.current = false;\n            },\n            [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n        );\n\n        const handleContentMeasure = useCallback(\n            (measurements: DropdownMeasurements) => {\n                // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n                // unnecessary renders, we only set the height if the content is shown in the wallet.\n                if (isInChaynsWalletRef.current) {\n                    setMeasuredContentHeight(measurements.height);\n                }\n\n                setMeasuredContentWidth(measurements.width);\n\n                if (typeof onMeasure === 'function') {\n                    onMeasure(measurements);\n                }\n            },\n            [onMeasure],\n        );\n\n        const handleTouchEnd = useCallback(() => {\n            clearTimeout(touchTimeoutRef.current);\n        }, []);\n\n        const handleTouchStart = useCallback(() => {\n            touchTimeoutRef.current = window.setTimeout(() => {\n                shouldPreventClickRef.current = true;\n            }, 500);\n        }, []);\n\n        /**\n         * This hook listens for clicks\n         */\n        useDropdownListener({\n            onClick: handleClick,\n            onClose: handleClose,\n            onTouchEnd: handleTouchEnd,\n            onTouchStart: handleTouchStart,\n            shouldCaptureEvents,\n        });\n\n        useEffect(() => {\n            const isBottomDirection = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n                ContainerAnchor.RESERVATION_WRAPPER,\n            );\n\n            isInChaynsWalletRef.current =\n                !!(\n                    reservationWrapperElement && reservationWrapperElement.contains(anchorElement)\n                ) || true;\n\n            // This effect checks if additional space is needed to show dropdown content in chayns cards.\n            if (\n                isBottomDirection &&\n                isInChaynsWalletRef.current &&\n                measuredContentHeight > 0 &&\n                reservationWrapperElement &&\n                shouldShowDropdown\n            ) {\n                const availableHeight =\n                    window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n                // If the content height is greater than the available height, we need to add additional space.\n                // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n                const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n                if (additionalNeededSpace > 0) {\n                    // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                    reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n                } else {\n                    // Reset the margin bottom if no additional space is needed.\n                    reservationWrapperElement.style.marginBottom = '0px';\n                }\n            }\n\n            if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n                // Reset the margin bottom when the dropdown is closed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n\n            return () => {\n                if (reservationWrapperElement) {\n                    reservationWrapperElement.style.marginBottom = '0px';\n                }\n            };\n        }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n        useEffect(() => {\n            if (!container) return;\n\n            setPortal(() =>\n                createPortal(\n                    <DelayedDropdownContent\n                        coordinates={coordinates}\n                        onMeasure={handleContentMeasure}\n                        shouldShowContent={shouldShowDropdown}\n                        transform={transform}\n                    >\n                        <StyledDropdownBodyWrapperContent\n                            $width={width}\n                            $minWidth={minBodyWidth}\n                            $maxHeight={maxHeight}\n                            $direction={direction}\n                            ref={contentRef}\n                            className={\n                                typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined\n                            }\n                            tabIndex={0}\n                        >\n                            {children}\n                        </StyledDropdownBodyWrapperContent>\n                    </DelayedDropdownContent>,\n                    container,\n                ),\n            );\n        }, [\n            children,\n            container,\n            coordinates,\n            direction,\n            handleContentMeasure,\n            maxHeight,\n            minBodyWidth,\n            shouldShowDropdown,\n            transform,\n            width,\n        ]);\n\n        useImperativeHandle(ref, () => contentRef.current!, []);\n\n        return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n    },\n);\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-input/FileInput.js

@@ -19,7 +19,8 @@ const FileInput = /*#__PURE__*/forwardRef(({
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
   shouldPreventImageUpload = false,
-  shouldAllowDownload
+  shouldAllowDownload,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [internalFiles, setInternalFiles] = useState([]);
   const [internalImages, setInternalImages] = useState([]);
@@ -154,6 +155,7 @@ const FileInput = /*#__PURE__*/forwardRef(({
   }, [files, internalFiles, internalImages]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFileInput, null, /*#__PURE__*/React.createElement(FileSelect, {
     shouldPreventImageUpload: shouldPreventImageUpload,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     maxFiles: maxFiles,
     fileTypes: fileTypes,
     fileSelectionIcons: fileSelectionIcons,
@@ -167,7 +169,7 @@ const FileInput = /*#__PURE__*/forwardRef(({
     files: filesToDisplay,
     onRemove: handleDeleteFile,
     shouldAllowDownload: shouldAllowDownload
-  })), [shouldPreventImageUpload, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
+  })), [shouldPreventImageUpload, shouldEnableKeyboardHighlighting, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
 });
 FileInput.displayName = 'FileInput';
 export default FileInput;

package/lib/esm/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","StyledFileInput","FileList","FileSelect","TSIMG_FILE_TYPES","STREAMINGSERVICE_FILE_TYPES","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","ref","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n    'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n    'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: IFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | IFileItem | UploadedFile) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n    /**\n     * Whether to show a download icon for files that have a `source` set.\n     */\n    shouldAllowDownload?: boolean;\n};\n\nexport type FileInputRef = {\n    clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n    (\n        {\n            fileSelectionIcons = ['fa fa-upload'],\n            imageSelectIcons = ['ts-image'],\n            fileTypes,\n            onMaxFilesReached,\n            maxFiles,\n            onRemove,\n            files,\n            isDisabled,\n            maxFileSizeInMB,\n            onAdd,\n            fileSelectionPlaceholder = 'Dateien hochladen',\n            imageSelectPlaceholder,\n            shouldPreventImageUpload = false,\n            shouldAllowDownload,\n        },\n        ref,\n    ) => {\n        const [internalFiles, setInternalFiles] = useState<File[]>([]);\n        const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n        const handleInputClear = () => {\n            setInternalFiles([]);\n            setInternalImages([]);\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleInputClear,\n            }),\n            [],\n        );\n\n        const handleAddImages = useCallback(\n            (images: UploadedFile[]) => {\n                const newImages: UploadedFile[] = [];\n\n                images.forEach((image) => {\n                    if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                        newImages.push(image);\n                    }\n                });\n\n                let tmp = newImages;\n\n                if (maxFiles) {\n                    tmp = newImages.slice(\n                        0,\n                        maxFiles -\n                            (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalImages((prevState) => [...prevState, ...tmp]);\n            },\n            [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n        );\n\n        const handleAddFiles = useCallback(\n            (newFiles: File[]) => {\n                const newFileItems: File[] = [];\n\n                newFiles.forEach((file) => {\n                    if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                        return;\n                    }\n\n                    if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                        newFileItems.push(file);\n                    }\n                });\n\n                let tmp = newFileItems;\n\n                if (maxFiles) {\n                    tmp = newFileItems.slice(\n                        0,\n                        maxFiles - (internalFiles.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalFiles((prevState) => [...prevState, ...tmp]);\n            },\n            [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n        );\n\n        const handleAdd = useCallback(\n            (newFiles: File[] | UploadedFile[]) => {\n                if (Array.isArray(newFiles) && newFiles.length > 0) {\n                    if (newFiles[0] && 'url' in newFiles[0]) {\n                        handleAddImages(newFiles as UploadedFile[]);\n                    } else {\n                        handleAddFiles(newFiles as File[]);\n                    }\n                }\n            },\n            [handleAddFiles, handleAddImages],\n        );\n\n        const handleDeleteFile = useCallback(\n            (id: string) => {\n                let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n                const filteredFiles = internalFiles.filter((file) => {\n                    const { name } = file;\n\n                    if (name === id) {\n                        fileToDelete = file;\n                    }\n\n                    return name !== id;\n                });\n\n                setInternalFiles(filteredFiles);\n\n                if (!fileToDelete) {\n                    const filteredImages = internalImages.filter((image) => {\n                        if (image.name === id) {\n                            fileToDelete = image;\n                        }\n\n                        return image.name !== id;\n                    });\n\n                    setInternalImages(filteredImages);\n                }\n\n                if (!fileToDelete) {\n                    files?.forEach((file) => {\n                        if (file.id === id || file.name === id) {\n                            fileToDelete = file;\n                        }\n                    });\n                }\n\n                if (!fileToDelete || typeof onRemove !== 'function') {\n                    return;\n                }\n\n                onRemove(fileToDelete);\n            },\n            [files, internalFiles, internalImages, onRemove],\n        );\n\n        const internalIsDisabled = useMemo(() => {\n            if (isDisabled) {\n                return true;\n            }\n\n            if (maxFiles) {\n                if (internalFiles.length + internalImages.length >= maxFiles) {\n                    if (typeof onMaxFilesReached === 'function') {\n                        onMaxFilesReached();\n                    }\n\n                    return true;\n                }\n            }\n\n            return false;\n        }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n        const filesToDisplay: IFileItem[] = useMemo(() => {\n            const items: IFileItem[] = internalFiles.map((file) => ({\n                id: file.name,\n                name: file.name,\n                size: file.size,\n                mimeType: file.type,\n                source: file,\n            }));\n\n            internalImages.forEach((image) => {\n                items.push({\n                    id: image.name ?? image.url,\n                    name: image.name ?? image.url,\n                    size: image.size ?? 0,\n                    mimeType: 'image/png',\n                    source: image.url,\n                });\n            });\n\n            files?.forEach((file) => {\n                items.push(file);\n            });\n\n            return items;\n        }, [files, internalFiles, internalImages]);\n\n        return useMemo(\n            () => (\n                <StyledFileInput>\n                    <FileSelect\n                        shouldPreventImageUpload={shouldPreventImageUpload}\n                        maxFiles={maxFiles}\n                        fileTypes={fileTypes}\n                        fileSelectionIcons={fileSelectionIcons}\n                        fileSelectionPlaceholder={fileSelectionPlaceholder}\n                        imageSelectIcons={imageSelectIcons}\n                        imageSelectPlaceholder={imageSelectPlaceholder}\n                        maxFileSizeInMB={maxFileSizeInMB}\n                        isDisabled={internalIsDisabled}\n                        onAdd={handleAdd}\n                    />\n                    <FileList\n                        files={filesToDisplay}\n                        onRemove={handleDeleteFile}\n                        shouldAllowDownload={shouldAllowDownload}\n                    />\n                </StyledFileInput>\n            ),\n            [\n                shouldPreventImageUpload,\n                maxFiles,\n                fileTypes,\n                fileSelectionIcons,\n                fileSelectionPlaceholder,\n                imageSelectIcons,\n                imageSelectPlaceholder,\n                maxFileSizeInMB,\n                internalIsDisabled,\n                handleAdd,\n                filesToDisplay,\n                handleDeleteFile,\n                shouldAllowDownload,\n            ],\n        );\n    },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileInput.js","names":["React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","StyledFileInput","FileList","FileSelect","TSIMG_FILE_TYPES","STREAMINGSERVICE_FILE_TYPES","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","shouldEnableKeyboardHighlighting","ref","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n    'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n    'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: IFileItem[];\n    /**\n     * An array of icons that should be displayed inside the FileInput\n     */\n    fileSelectionIcons?: string[];\n    /**\n     * The text that should be displayed inside the FileInput.\n     */\n    fileSelectionPlaceholder?: string;\n    /**\n     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n     */\n    fileTypes?: string;\n    /**\n     * The icon of the image selection.\n     */\n    imageSelectIcons?: string[];\n    /**\n     * If set, pictures can be select via Pixabay.\n     */\n    imageSelectPlaceholder?: string;\n    /**\n     * Whether the FileInput is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum amount of Files that can be uploaded.\n     */\n    maxFiles?: number;\n    /**\n     * The maximum size of a file in MB.\n     */\n    maxFileSizeInMB?: number;\n    /**\n     * A function to be executed when files are added.\n     */\n    onAdd?: (files: File[] | UploadedFile[]) => void;\n    /**\n     * Function to be executed when the maximum amount of Files are reached.\n     */\n    onMaxFilesReached?: () => void;\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (file: File | IFileItem | UploadedFile) => void;\n    /**\n     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n    /**\n     * Whether to show a download icon for files that have a `source` set.\n     */\n    shouldAllowDownload?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for the file selection trigger.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nexport type FileInputRef = {\n    clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n    (\n        {\n            fileSelectionIcons = ['fa fa-upload'],\n            imageSelectIcons = ['ts-image'],\n            fileTypes,\n            onMaxFilesReached,\n            maxFiles,\n            onRemove,\n            files,\n            isDisabled,\n            maxFileSizeInMB,\n            onAdd,\n            fileSelectionPlaceholder = 'Dateien hochladen',\n            imageSelectPlaceholder,\n            shouldPreventImageUpload = false,\n            shouldAllowDownload,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        const [internalFiles, setInternalFiles] = useState<File[]>([]);\n        const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n        const handleInputClear = () => {\n            setInternalFiles([]);\n            setInternalImages([]);\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleInputClear,\n            }),\n            [],\n        );\n\n        const handleAddImages = useCallback(\n            (images: UploadedFile[]) => {\n                const newImages: UploadedFile[] = [];\n\n                images.forEach((image) => {\n                    if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n                        newImages.push(image);\n                    }\n                });\n\n                let tmp = newImages;\n\n                if (maxFiles) {\n                    tmp = newImages.slice(\n                        0,\n                        maxFiles -\n                            (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalImages((prevState) => [...prevState, ...tmp]);\n            },\n            [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n        );\n\n        const handleAddFiles = useCallback(\n            (newFiles: File[]) => {\n                const newFileItems: File[] = [];\n\n                newFiles.forEach((file) => {\n                    if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                        return;\n                    }\n\n                    if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n                        newFileItems.push(file);\n                    }\n                });\n\n                let tmp = newFileItems;\n\n                if (maxFiles) {\n                    tmp = newFileItems.slice(\n                        0,\n                        maxFiles - (internalFiles.length + (files?.length ?? 0)),\n                    );\n                }\n\n                if (tmp.length > 0 && typeof onAdd === 'function') {\n                    onAdd(tmp);\n                }\n\n                setInternalFiles((prevState) => [...prevState, ...tmp]);\n            },\n            [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n        );\n\n        const handleAdd = useCallback(\n            (newFiles: File[] | UploadedFile[]) => {\n                if (Array.isArray(newFiles) && newFiles.length > 0) {\n                    if (newFiles[0] && 'url' in newFiles[0]) {\n                        handleAddImages(newFiles as UploadedFile[]);\n                    } else {\n                        handleAddFiles(newFiles as File[]);\n                    }\n                }\n            },\n            [handleAddFiles, handleAddImages],\n        );\n\n        const handleDeleteFile = useCallback(\n            (id: string) => {\n                let fileToDelete: File | IFileItem | UploadedFile | undefined;\n\n                const filteredFiles = internalFiles.filter((file) => {\n                    const { name } = file;\n\n                    if (name === id) {\n                        fileToDelete = file;\n                    }\n\n                    return name !== id;\n                });\n\n                setInternalFiles(filteredFiles);\n\n                if (!fileToDelete) {\n                    const filteredImages = internalImages.filter((image) => {\n                        if (image.name === id) {\n                            fileToDelete = image;\n                        }\n\n                        return image.name !== id;\n                    });\n\n                    setInternalImages(filteredImages);\n                }\n\n                if (!fileToDelete) {\n                    files?.forEach((file) => {\n                        if (file.id === id || file.name === id) {\n                            fileToDelete = file;\n                        }\n                    });\n                }\n\n                if (!fileToDelete || typeof onRemove !== 'function') {\n                    return;\n                }\n\n                onRemove(fileToDelete);\n            },\n            [files, internalFiles, internalImages, onRemove],\n        );\n\n        const internalIsDisabled = useMemo(() => {\n            if (isDisabled) {\n                return true;\n            }\n\n            if (maxFiles) {\n                if (internalFiles.length + internalImages.length >= maxFiles) {\n                    if (typeof onMaxFilesReached === 'function') {\n                        onMaxFilesReached();\n                    }\n\n                    return true;\n                }\n            }\n\n            return false;\n        }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n        const filesToDisplay: IFileItem[] = useMemo(() => {\n            const items: IFileItem[] = internalFiles.map((file) => ({\n                id: file.name,\n                name: file.name,\n                size: file.size,\n                mimeType: file.type,\n                source: file,\n            }));\n\n            internalImages.forEach((image) => {\n                items.push({\n                    id: image.name ?? image.url,\n                    name: image.name ?? image.url,\n                    size: image.size ?? 0,\n                    mimeType: 'image/png',\n                    source: image.url,\n                });\n            });\n\n            files?.forEach((file) => {\n                items.push(file);\n            });\n\n            return items;\n        }, [files, internalFiles, internalImages]);\n\n        return useMemo(\n            () => (\n                <StyledFileInput>\n                    <FileSelect\n                        shouldPreventImageUpload={shouldPreventImageUpload}\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                        maxFiles={maxFiles}\n                        fileTypes={fileTypes}\n                        fileSelectionIcons={fileSelectionIcons}\n                        fileSelectionPlaceholder={fileSelectionPlaceholder}\n                        imageSelectIcons={imageSelectIcons}\n                        imageSelectPlaceholder={imageSelectPlaceholder}\n                        maxFileSizeInMB={maxFileSizeInMB}\n                        isDisabled={internalIsDisabled}\n                        onAdd={handleAdd}\n                    />\n                    <FileList\n                        files={filesToDisplay}\n                        onRemove={handleDeleteFile}\n                        shouldAllowDownload={shouldAllowDownload}\n                    />\n                </StyledFileInput>\n            ),\n            [\n                shouldPreventImageUpload,\n                shouldEnableKeyboardHighlighting,\n                maxFiles,\n                fileTypes,\n                fileSelectionIcons,\n                fileSelectionPlaceholder,\n                imageSelectIcons,\n                imageSelectPlaceholder,\n                maxFileSizeInMB,\n                internalIsDisabled,\n                handleAdd,\n                filesToDisplay,\n                handleDeleteFile,\n                shouldAllowDownload,\n            ],\n        );\n    },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,9 +3,10 @@ import { getHumanSize, getIconByMimeType } from '../../../utils/file';
 import Icon from '../../icon/Icon';
 import ContextMenu from '../../context-menu/ContextMenu';
 import ListItem from '../../list/list-item/ListItem';
-import { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';
+import { StyledFileItem, StyledFileItemKeyboardWrapper, StyledFileItemIcon } from './FileItem.styles';
 import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
 import textStrings from '../../../constants/textStrings';
+import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
 const FileItem = ({
   mimeType,
   onRemove,
@@ -15,6 +16,27 @@ const FileItem = ({
   source,
   shouldAllowDownload
 }) => {
+  const canDownload = shouldAllowDownload && !!source;
+  const canRemove = typeof onRemove === 'function';
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);
+  const handleRemove = useCallback(() => {
+    if (canRemove) {
+      onRemove(id);
+    }
+  }, [id, onRemove]);
+  const handleItemKeyDown = useCallback(event => {
+    if (event.key === 'Delete') {
+      event.preventDefault();
+      handleRemove();
+    }
+  }, [handleRemove]);
+  const handleRemoveKeyDown = useCallback(event => {
+    if (canRemove && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      event.stopPropagation();
+      handleRemove();
+    }
+  }, [handleRemove]);
   const humanFileSize = useMemo(() => {
     if (typeof size === 'number') {
       return getHumanSize(size);
@@ -61,8 +83,6 @@ const FileItem = ({
       });
     }
   }, [name, source]);
-  const canDownload = shouldAllowDownload && !!source;
-  const canRemove = typeof onRemove === 'function';
   const downloadText = useTextstringValue({
     textstring: ttsToITextString(textStrings.components.fileItem.download)
   });
@@ -70,6 +90,7 @@ const FileItem = ({
     textstring: ttsToITextString(textStrings.components.fileItem.remove)
   });
   const rightElement = useMemo(() => {
+    if (!canDownload && !canRemove) return undefined;
     // Both actions available → show as ContextMenu
     if (canDownload && canRemove) {
       const items = [{
@@ -87,32 +108,34 @@ const FileItem = ({
         items: items
       });
     }
-
-    // Only download
-    if (canDownload) {
-      return /*#__PURE__*/React.createElement(StyledFileItemIcon, {
-        onClick: handleDownload
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icons: ['fa fa-download']
-      }));
-    }
-
-    // Only remove
-    if (canRemove) {
-      return /*#__PURE__*/React.createElement(StyledFileItemIcon, {
-        onClick: () => onRemove(id)
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icons: ['ts-wrong']
-      }));
-    }
-    return undefined;
-  }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(ListItem, {
+    const handleClick = () => {
+      if (canRemove) {
+        onRemove(id);
+        return;
+      }
+      handleDownload();
+    };
+    const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;
+    const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';
+    return /*#__PURE__*/React.createElement(StyledFileItemIcon, {
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icons: [fileIcon]
+    }));
+  }, [canDownload, canRemove, downloadText, handleDownload, handleRemoveKeyDown, id, onRemove, removeText]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(StyledFileItemKeyboardWrapper, {
+    onKeyDown: handleItemKeyDown,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(ListItem, {
     title: name,
     subtitle: humanFileSize,
     icons: [icon],
-    rightElements: rightElement
-  })), [humanFileSize, icon, name, rightElement]);
+    rightElements: rightElement,
+    shouldEnableKeyboardHighlighting: shouldShowKeyboardHighlighting
+  }))), [handleItemKeyDown, humanFileSize, icon, name, rightElement, shouldShowKeyboardHighlighting]);
 };
 FileItem.displayName = 'FileList';
 export default FileItem;

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","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","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","canDownload","canRemove","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","key","onClick","text","title","subtitle","rightElements","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, 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 { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\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 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 canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\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        // 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        // Only download\n        if (canDownload) {\n            return (\n                <StyledFileItemIcon onClick={handleDownload}>\n                    <Icon icons={['fa fa-download']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        // Only remove\n        if (canRemove) {\n            return (\n                <StyledFileItemIcon onClick={() => onRemove(id)}>\n                    <Icon icons={['ts-wrong']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        return undefined;\n    }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <ListItem\n                    title={name}\n                    subtitle={humanFileSize}\n                    icons={[icon]}\n                    rightElements={rightElement}\n                />\n            </StyledFileItem>\n        ),\n        [humanFileSize, icon, name, rightElement],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
+{"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":"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","ignoreList":[]}

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

@@ -1,4 +1,5 @@
 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;
@@ -8,5 +9,28 @@ export const StyledFileItemIcon = styled.div`
     border-radius: 3px;
     padding: 6px;
     transition: background-color 0.3s ease;
+
+    &:focus-visible {
+        outline: none;
+        color: inherit;
+        ${keyboardFocusHighlightingCircleRingCss};
+    }
+`;
+export const StyledFileItemKeyboardWrapper = styled.div`
+    &:focus-visible {
+        ${keyboardFocusHighlightingRingCss}
+    }
+`;
+export const StyledFileItemActions = styled.span`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+`;
+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","StyledFileItem","div","StyledFileItemIcon"],"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"],"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,CAAC","ignoreList":[]}
+{"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":[]}

package/lib/esm/components/file-select/FileSelect.js

@@ -2,6 +2,7 @@ import { createDialog, DialogType } from 'chayns-api';
 import React, { useCallback, useMemo } from 'react';
 import { isValidFileType } from '../../utils/file';
 import { selectFiles } from '../../utils/fileDialog';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../icon/Icon';
 import { StyledFileSelect, StyledFileSelectContainer, StyledFileSelectText, StyledFileSelectWrapper } from './FileSelect.styles';
 var DialogView = /*#__PURE__*/function (DialogView) {
@@ -18,8 +19,10 @@ const FileSelect = ({
   onAdd,
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
-  shouldPreventImageUpload = false
+  shouldPreventImageUpload = false,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const handleAddImages = useCallback(images => {
     if (typeof onAdd === 'function') {
       onAdd(images);
@@ -106,20 +109,40 @@ const FileSelect = ({
     }
     handleAddFiles(draggedFiles);
   }, [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor]);
+  const handleFileSelectionKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleFileSelectionClick();
+    }
+  }, [handleFileSelectionClick]);
+  const handleImageSelectionKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      void handleImageSelectionClick();
+    }
+  }, [handleImageSelectionClick]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFileSelect, null, /*#__PURE__*/React.createElement(StyledFileSelectWrapper, {
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onClick: () => void handleFileSelectionClick(),
+    onKeyDown: handleFileSelectionKeyDown,
     onDragOver: e => e.preventDefault(),
-    onDrop: handleDrop
+    onDrop: handleDrop,
+    role: "button",
+    tabIndex: isDisabled ? -1 : 0
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: fileSelectionIcons
   }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
     $isImageSelection: true,
-    onClick: () => void handleImageSelectionClick()
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    onClick: () => void handleImageSelectionClick(),
+    onKeyDown: handleImageSelectionKeyDown,
+    role: "button",
+    tabIndex: isDisabled ? -1 : 0
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: imageSelectIcons
-  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
+  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, shouldShowKeyboardHighlighting, handleFileSelectionClick, handleDrop, handleFileSelectionKeyDown, handleImageSelectionClick, handleImageSelectionKeyDown]);
 };
 FileSelect.displayName = 'FileSelect';
 export default FileSelect;