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

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

@@ -14,6 +14,7 @@ const DropdownBodyWrapper = /*#__PURE__*/forwardRef(({
   direction = DropdownDirection.BOTTOM_RIGHT,
   maxHeight,
   minBodyWidth = 0,
+  onAvailableMaxHeightChange,
   onClose,
   onOutsideClick,
   onMeasure,
@@ -34,7 +35,8 @@ const DropdownBodyWrapper = /*#__PURE__*/forwardRef(({
   const {
     transform,
     width,
-    coordinates
+    coordinates,
+    availableMaxHeight
   } = useDropdown({
     anchorElement,
     container,
@@ -43,6 +45,11 @@ const DropdownBodyWrapper = /*#__PURE__*/forwardRef(({
     direction,
     shouldShowDropdown
   });
+  useEffect(() => {
+    if (typeof onAvailableMaxHeightChange === 'function') {
+      onAvailableMaxHeightChange(availableMaxHeight);
+    }
+  }, [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","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","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 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            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 } = useDropdown({\n            anchorElement,\n            container,\n            contentHeight,\n            contentWidth: bodyWidth ?? measuredContentWidth,\n            direction,\n            shouldShowDropdown,\n        });\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":"AAAA,OAAOA,KAAK,IACRC,UAAU,EAGVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SACIC,yBAAyB,EACzBC,gCAAgC,QAC7B,8BAA8B;AACrC,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,iBAAiB,QAA8B,sBAAsB;AAC9E,OAAOC,sBAAsB,MAEtB,mDAAmD;AAC1D,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,sBAAsB;AACvE,SAASC,eAAe,EAAEC,YAAY,QAAQ,uBAAuB;AAiErE,MAAMC,mBAAmB,gBAAGf,UAAU,CAClC,CACI;EACIgB,aAAa;EACbC,SAAS;EACTC,QAAQ;EACRC,SAAS,EAAEC,aAAa;EACxBC,aAAa,GAAG,CAAC;EACjBC,SAAS,GAAGb,iBAAiB,CAACc,YAAY;EAC1CC,SAAS;EACTC,YAAY,GAAG,CAAC;EAChBC,0BAA0B;EAC1BC,OAAO;EACPC,cAAc;EACdC,SAAS;EACTC,mBAAmB,GAAG,IAAI;EAC1BC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,mBAAmB,GAAG7B,MAAM,CAAC,KAAK,CAAC;EAEzC,MAAM,CAAC8B,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG9B,QAAQ,CAAS,CAAC,CAAC;EAC7E,MAAM,CAAC+B,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGhC,QAAQ,CAAS,CAAC,CAAC;EAC3E,MAAM,CAACiC,MAAM,EAAEC,SAAS,CAAC,GAAGlC,QAAQ,CAAc,CAAC;EAEnD,MAAMmC,UAAU,GAAGpC,MAAM,CAAiB,IAAI,CAAC;EAC/C,MAAMqC,qBAAqB,GAAGrC,MAAM,CAAU,KAAK,CAAC;EACpD,MAAMsC,eAAe,GAAGtC,MAAM,CAAqBuC,SAAS,CAAC;EAE7D,MAAMxB,SAAS,GAAGL,YAAY,CAAC;IAAEE,aAAa;IAAEG,SAAS,EAAEC;EAAc,CAAC,CAAC;EAE3E,MAAM;IAAEwB,SAAS;IAAEC,KAAK;IAAEC,WAAW;IAAEC;EAAmB,CAAC,GAAGpC,WAAW,CAAC;IACtEK,aAAa;IACbG,SAAS;IACTE,aAAa;IACb2B,YAAY,EAAE/B,SAAS,IAAImB,oBAAoB;IAC/Cd,SAAS;IACTS;EACJ,CAAC,CAAC;EAEF7B,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOwB,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAACqB,kBAAkB,CAAC;IAClD;EACJ,CAAC,EAAE,CAACA,kBAAkB,EAAErB,0BAA0B,CAAC,CAAC;EAEpD,MAAMuB,WAAW,GAAGhD,WAAW,CAAC,MAAM;IAClC,IAAI,OAAO0B,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;;EAEb;AACR;AACA;EACQ,MAAMuB,WAAW,GAAGjD,WAAW,CAC1BkD,KAAiB,IAAK;IACnB,IACIX,UAAU,CAACY,OAAO,IAClBrB,kBAAkB,IAClB,CAACf,aAAa,CAACqC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,IAC7C,CAACd,UAAU,CAACY,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EACpD;MACEH,KAAK,CAACI,cAAc,CAAC,CAAC;MACtBJ,KAAK,CAACK,eAAe,CAAC,CAAC;MAEvB,MAAMC,yBAAyB,GAAG7B,cAAc,GAAG,CAAC,IAAI,KAAK;MAE7D,IAAI,CAACa,qBAAqB,CAACW,OAAO,IAAI,CAACK,yBAAyB,EAAE;QAC9DR,WAAW,CAAC,CAAC;MACjB;IACJ;IAEAR,qBAAqB,CAACW,OAAO,GAAG,KAAK;EACzC,CAAC,EACD,CAACpC,aAAa,EAAEiC,WAAW,EAAErB,cAAc,EAAEG,kBAAkB,CACnE,CAAC;EAED,MAAM2B,oBAAoB,GAAGzD,WAAW,CACnC0D,YAAkC,IAAK;IACpC;IACA;IACA,IAAI1B,mBAAmB,CAACmB,OAAO,EAAE;MAC7BjB,wBAAwB,CAACwB,YAAY,CAACC,MAAM,CAAC;IACjD;IAEAvB,uBAAuB,CAACsB,YAAY,CAACd,KAAK,CAAC;IAE3C,IAAI,OAAOhB,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAAC8B,YAAY,CAAC;IAC3B;EACJ,CAAC,EACD,CAAC9B,SAAS,CACd,CAAC;EAED,MAAMgC,cAAc,GAAG5D,WAAW,CAAC,MAAM;IACrC6D,YAAY,CAACpB,eAAe,CAACU,OAAO,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMW,gBAAgB,GAAG9D,WAAW,CAAC,MAAM;IACvCyC,eAAe,CAACU,OAAO,GAAGY,MAAM,CAACC,UAAU,CAAC,MAAM;MAC9CxB,qBAAqB,CAACW,OAAO,GAAG,IAAI;IACxC,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,EAAE,CAAC;;EAEN;AACR;AACA;EACQxC,mBAAmB,CAAC;IAChBsD,OAAO,EAAEhB,WAAW;IACpBvB,OAAO,EAAEsB,WAAW;IACpBkB,UAAU,EAAEN,cAAc;IAC1BO,YAAY,EAAEL,gBAAgB;IAC9BjC;EACJ,CAAC,CAAC;EAEF5B,SAAS,CAAC,MAAM;IACZ,MAAMmE,iBAAiB,GAAG,CACtB5D,iBAAiB,CAAC6D,MAAM,EACxB7D,iBAAiB,CAAC8D,WAAW,EAC7B9D,iBAAiB,CAACc,YAAY,CACjC,CAACiD,QAAQ,CAAClD,SAAS,CAAC;IAErB,MAAMmD,yBAAyB,GAAGzD,aAAa,CAAC0D,OAAO,CACnD7D,eAAe,CAAC8D,mBACpB,CAAC;IAED1C,mBAAmB,CAACmB,OAAO,GACvB,CAAC,EACGqB,yBAAyB,IAAIA,yBAAyB,CAACpB,QAAQ,CAACrC,aAAa,CAAC,CACjF,IAAI,IAAI;;IAEb;IACA,IACIqD,iBAAiB,IACjBpC,mBAAmB,CAACmB,OAAO,IAC3BlB,qBAAqB,GAAG,CAAC,IACzBuC,yBAAyB,IACzB1C,kBAAkB,EACpB;MACE,MAAM6C,eAAe,GACjBZ,MAAM,CAACa,WAAW,GAAG7D,aAAa,CAAC8D,qBAAqB,CAAC,CAAC,CAACC,MAAM;;MAErE;MACA;MACA,MAAMC,qBAAqB,GAAG9C,qBAAqB,GAAG,EAAE,GAAG0C,eAAe;MAE1E,IAAII,qBAAqB,GAAG,CAAC,EAAE;QAC3B;QACAP,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,GAAGF,qBAAqB,IAAI;MAC/E,CAAC,MAAM;QACH;QACAP,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,KAAK;MACxD;IACJ;IAEA,IAAIjD,mBAAmB,CAACmB,OAAO,IAAIqB,yBAAyB,IAAI,CAAC1C,kBAAkB,EAAE;MACjF;MACA0C,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,KAAK;IACxD;IAEA,OAAO,MAAM;MACT,IAAIT,yBAAyB,EAAE;QAC3BA,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,KAAK;MACxD;IACJ,CAAC;EACL,CAAC,EAAE,CAAClE,aAAa,EAAEM,SAAS,EAAEY,qBAAqB,EAAEH,kBAAkB,CAAC,CAAC;EAEzE7B,SAAS,CAAC,MAAM;IACZ,IAAI,CAACiB,SAAS,EAAE;IAEhBoB,SAAS,CAAC,mBACN/B,YAAY,cACRT,KAAA,CAAAoF,aAAA,CAACzE,sBAAsB;MACnBoC,WAAW,EAAEA,WAAY;MACzBjB,SAAS,EAAE6B,oBAAqB;MAChC0B,iBAAiB,EAAErD,kBAAmB;MACtCa,SAAS,EAAEA;IAAU,gBAErB7C,KAAA,CAAAoF,aAAA,CAAC5E,gCAAgC;MAC7B8E,MAAM,EAAExC,KAAM;MACdyC,SAAS,EAAE7D,YAAa;MACxB8D,UAAU,EAAE/D,SAAU;MACtBgE,UAAU,EAAElE,SAAU;MACtBU,GAAG,EAAEQ,UAAW;MAChBiD,SAAS,EACL,OAAOjE,SAAS,KAAK,QAAQ,GAAG,kBAAkB,GAAGmB,SACxD;MACD+C,QAAQ,EAAE;IAAE,GAEXxE,QAC6B,CACd,CAAC,EACzBC,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCD,QAAQ,EACRC,SAAS,EACT2B,WAAW,EACXxB,SAAS,EACToC,oBAAoB,EACpBlC,SAAS,EACTC,YAAY,EACZM,kBAAkB,EAClBa,SAAS,EACTC,KAAK,CACR,CAAC;EAEF1C,mBAAmB,CAAC6B,GAAG,EAAE,MAAMQ,UAAU,CAACY,OAAQ,EAAE,EAAE,CAAC;EAEvD,oBAAOrD,KAAA,CAAAoF,aAAA,CAAC7E,yBAAyB,QAAEgC,MAAkC,CAAC;AAC1E,CACJ,CAAC;AAEDvB,mBAAmB,CAAC4E,WAAW,GAAG,qBAAqB;AAEvD,eAAe5E,mBAAmB","ignoreList":[]}

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

@@ -19,8 +19,7 @@ const FileInput = /*#__PURE__*/forwardRef(({
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
   shouldPreventImageUpload = false,
-  shouldAllowDownload,
-  shouldEnableKeyboardHighlighting
+  shouldAllowDownload
 }, ref) => {
   const [internalFiles, setInternalFiles] = useState([]);
   const [internalImages, setInternalImages] = useState([]);
@@ -155,7 +154,6 @@ 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,
@@ -169,7 +167,7 @@ const FileInput = /*#__PURE__*/forwardRef(({
     files: filesToDisplay,
     onRemove: handleDeleteFile,
     shouldAllowDownload: shouldAllowDownload
-  })), [shouldPreventImageUpload, shouldEnableKeyboardHighlighting, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
+  })), [shouldPreventImageUpload, 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","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":[]}
+{"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":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,mBAAmB,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC9F,SAASC,mBAAmB,EAAEC,uBAAuB,EAAEC,eAAe,QAAQ,kBAAkB;AAChG,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,QAAQ,MAAqB,uBAAuB;AAC3D,OAAOC,UAAU,MAAwB,2BAA2B;AAEpE,OAAO,MAAMC,gBAAgB,GACzB,oFAAoF;AAExF,OAAO,MAAMC,2BAA2B,GACpC,oFAAoF;AAiExF,MAAMC,SAAS,gBAAGb,UAAU,CACxB,CACI;EACIc,kBAAkB,GAAG,CAAC,cAAc,CAAC;EACrCC,gBAAgB,GAAG,CAAC,UAAU,CAAC;EAC/BC,SAAS;EACTC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,UAAU;EACVC,eAAe;EACfC,KAAK;EACLC,wBAAwB,GAAG,mBAAmB;EAC9CC,sBAAsB;EACtBC,wBAAwB,GAAG,KAAK;EAChCC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG1B,QAAQ,CAAS,EAAE,CAAC;EAC9D,MAAM,CAAC2B,cAAc,EAAEC,iBAAiB,CAAC,GAAG5B,QAAQ,CAAiB,EAAE,CAAC;EAExE,MAAM6B,gBAAgB,GAAGA,CAAA,KAAM;IAC3BH,gBAAgB,CAAC,EAAE,CAAC;IACpBE,iBAAiB,CAAC,EAAE,CAAC;EACzB,CAAC;EAED9B,mBAAmB,CACf0B,GAAG,EACH,OAAO;IACHM,KAAK,EAAED;EACX,CAAC,CAAC,EACF,EACJ,CAAC;EAED,MAAME,eAAe,GAAGlC,WAAW,CAC9BmC,MAAsB,IAAK;IACxB,MAAMC,SAAyB,GAAG,EAAE;IAEpCD,MAAM,CAACE,OAAO,CAAEC,KAAK,IAAK;MACtB,IAAI,CAACjC,uBAAuB,CAAC;QAAEc,KAAK,EAAEW,cAAc;QAAES,OAAO,EAAED;MAAM,CAAC,CAAC,EAAE;QACrEF,SAAS,CAACI,IAAI,CAACF,KAAK,CAAC;MACzB;IACJ,CAAC,CAAC;IAEF,IAAIG,GAAG,GAAGL,SAAS;IAEnB,IAAInB,QAAQ,EAAE;MACVwB,GAAG,GAAGL,SAAS,CAACM,KAAK,CACjB,CAAC,EACDzB,QAAQ,IACHW,aAAa,CAACe,MAAM,GAAGb,cAAc,CAACa,MAAM,IAAIxB,KAAK,EAAEwB,MAAM,IAAI,CAAC,CAAC,CAC5E,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOrB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACmB,GAAG,CAAC;IACd;IAEAV,iBAAiB,CAAEa,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC5D,CAAC,EACD,CAACtB,KAAK,EAAEwB,MAAM,EAAEf,aAAa,CAACe,MAAM,EAAEb,cAAc,EAAEb,QAAQ,EAAEK,KAAK,CACzE,CAAC;EAED,MAAMuB,cAAc,GAAG7C,WAAW,CAC7B8C,QAAgB,IAAK;IAClB,MAAMC,YAAoB,GAAG,EAAE;IAE/BD,QAAQ,CAACT,OAAO,CAAEW,IAAI,IAAK;MACvB,IAAIjC,SAAS,IAAI,CAACT,eAAe,CAAC;QAAE0C,IAAI;QAAEC,KAAK,EAAElC;MAAU,CAAC,CAAC,EAAE;QAC3D;MACJ;MAEA,IAAIiC,IAAI,IAAI,CAAC5C,mBAAmB,CAAC;QAAEe,KAAK,EAAES,aAAa;QAAEW,OAAO,EAAES;MAAK,CAAC,CAAC,EAAE;QACvED,YAAY,CAACP,IAAI,CAACQ,IAAI,CAAC;MAC3B;IACJ,CAAC,CAAC;IAEF,IAAIP,GAAG,GAAGM,YAAY;IAEtB,IAAI9B,QAAQ,EAAE;MACVwB,GAAG,GAAGM,YAAY,CAACL,KAAK,CACpB,CAAC,EACDzB,QAAQ,IAAIW,aAAa,CAACe,MAAM,IAAIxB,KAAK,EAAEwB,MAAM,IAAI,CAAC,CAAC,CAC3D,CAAC;IACL;IAEA,IAAIF,GAAG,CAACE,MAAM,GAAG,CAAC,IAAI,OAAOrB,KAAK,KAAK,UAAU,EAAE;MAC/CA,KAAK,CAACmB,GAAG,CAAC;IACd;IAEAZ,gBAAgB,CAAEe,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAE,GAAGH,GAAG,CAAC,CAAC;EAC3D,CAAC,EACD,CAAC1B,SAAS,EAAEI,KAAK,EAAEwB,MAAM,EAAEf,aAAa,EAAEX,QAAQ,EAAEK,KAAK,CAC7D,CAAC;EAED,MAAM4B,SAAS,GAAGlD,WAAW,CACxB8C,QAAiC,IAAK;IACnC,IAAIK,KAAK,CAACC,OAAO,CAACN,QAAQ,CAAC,IAAIA,QAAQ,CAACH,MAAM,GAAG,CAAC,EAAE;MAChD,IAAIG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,IAAIA,QAAQ,CAAC,CAAC,CAAC,EAAE;QACrCZ,eAAe,CAACY,QAA0B,CAAC;MAC/C,CAAC,MAAM;QACHD,cAAc,CAACC,QAAkB,CAAC;MACtC;IACJ;EACJ,CAAC,EACD,CAACD,cAAc,EAAEX,eAAe,CACpC,CAAC;EAED,MAAMmB,gBAAgB,GAAGrD,WAAW,CAC/BsD,EAAU,IAAK;IACZ,IAAIC,YAAyD;IAE7D,MAAMC,aAAa,GAAG5B,aAAa,CAAC6B,MAAM,CAAET,IAAI,IAAK;MACjD,MAAM;QAAEU;MAAK,CAAC,GAAGV,IAAI;MAErB,IAAIU,IAAI,KAAKJ,EAAE,EAAE;QACbC,YAAY,GAAGP,IAAI;MACvB;MAEA,OAAOU,IAAI,KAAKJ,EAAE;IACtB,CAAC,CAAC;IAEFzB,gBAAgB,CAAC2B,aAAa,CAAC;IAE/B,IAAI,CAACD,YAAY,EAAE;MACf,MAAMI,cAAc,GAAG7B,cAAc,CAAC2B,MAAM,CAAEnB,KAAK,IAAK;QACpD,IAAIA,KAAK,CAACoB,IAAI,KAAKJ,EAAE,EAAE;UACnBC,YAAY,GAAGjB,KAAK;QACxB;QAEA,OAAOA,KAAK,CAACoB,IAAI,KAAKJ,EAAE;MAC5B,CAAC,CAAC;MAEFvB,iBAAiB,CAAC4B,cAAc,CAAC;IACrC;IAEA,IAAI,CAACJ,YAAY,EAAE;MACfpC,KAAK,EAAEkB,OAAO,CAAEW,IAAI,IAAK;QACrB,IAAIA,IAAI,CAACM,EAAE,KAAKA,EAAE,IAAIN,IAAI,CAACU,IAAI,KAAKJ,EAAE,EAAE;UACpCC,YAAY,GAAGP,IAAI;QACvB;MACJ,CAAC,CAAC;IACN;IAEA,IAAI,CAACO,YAAY,IAAI,OAAOrC,QAAQ,KAAK,UAAU,EAAE;MACjD;IACJ;IAEAA,QAAQ,CAACqC,YAAY,CAAC;EAC1B,CAAC,EACD,CAACpC,KAAK,EAAES,aAAa,EAAEE,cAAc,EAAEZ,QAAQ,CACnD,CAAC;EAED,MAAM0C,kBAAkB,GAAG1D,OAAO,CAAC,MAAM;IACrC,IAAIkB,UAAU,EAAE;MACZ,OAAO,IAAI;IACf;IAEA,IAAIH,QAAQ,EAAE;MACV,IAAIW,aAAa,CAACe,MAAM,GAAGb,cAAc,CAACa,MAAM,IAAI1B,QAAQ,EAAE;QAC1D,IAAI,OAAOD,iBAAiB,KAAK,UAAU,EAAE;UACzCA,iBAAiB,CAAC,CAAC;QACvB;QAEA,OAAO,IAAI;MACf;IACJ;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACY,aAAa,CAACe,MAAM,EAAEb,cAAc,CAACa,MAAM,EAAEvB,UAAU,EAAEH,QAAQ,EAAED,iBAAiB,CAAC,CAAC;EAE1F,MAAM6C,cAA2B,GAAG3D,OAAO,CAAC,MAAM;IAC9C,MAAM4D,KAAkB,GAAGlC,aAAa,CAACmC,GAAG,CAAEf,IAAI,KAAM;MACpDM,EAAE,EAAEN,IAAI,CAACU,IAAI;MACbA,IAAI,EAAEV,IAAI,CAACU,IAAI;MACfM,IAAI,EAAEhB,IAAI,CAACgB,IAAI;MACfC,QAAQ,EAAEjB,IAAI,CAACkB,IAAI;MACnBC,MAAM,EAAEnB;IACZ,CAAC,CAAC,CAAC;IAEHlB,cAAc,CAACO,OAAO,CAAEC,KAAK,IAAK;MAC9BwB,KAAK,CAACtB,IAAI,CAAC;QACPc,EAAE,EAAEhB,KAAK,CAACoB,IAAI,IAAIpB,KAAK,CAAC8B,GAAG;QAC3BV,IAAI,EAAEpB,KAAK,CAACoB,IAAI,IAAIpB,KAAK,CAAC8B,GAAG;QAC7BJ,IAAI,EAAE1B,KAAK,CAAC0B,IAAI,IAAI,CAAC;QACrBC,QAAQ,EAAE,WAAW;QACrBE,MAAM,EAAE7B,KAAK,CAAC8B;MAClB,CAAC,CAAC;IACN,CAAC,CAAC;IAEFjD,KAAK,EAAEkB,OAAO,CAAEW,IAAI,IAAK;MACrBc,KAAK,CAACtB,IAAI,CAACQ,IAAI,CAAC;IACpB,CAAC,CAAC;IAEF,OAAOc,KAAK;EAChB,CAAC,EAAE,CAAC3C,KAAK,EAAES,aAAa,EAAEE,cAAc,CAAC,CAAC;EAE1C,OAAO5B,OAAO,CACV,mBACIJ,KAAA,CAAAuE,aAAA,CAAC9D,eAAe,qBACZT,KAAA,CAAAuE,aAAA,CAAC5D,UAAU;IACPgB,wBAAwB,EAAEA,wBAAyB;IACnDR,QAAQ,EAAEA,QAAS;IACnBF,SAAS,EAAEA,SAAU;IACrBF,kBAAkB,EAAEA,kBAAmB;IACvCU,wBAAwB,EAAEA,wBAAyB;IACnDT,gBAAgB,EAAEA,gBAAiB;IACnCU,sBAAsB,EAAEA,sBAAuB;IAC/CH,eAAe,EAAEA,eAAgB;IACjCD,UAAU,EAAEwC,kBAAmB;IAC/BtC,KAAK,EAAE4B;EAAU,CACpB,CAAC,eACFpD,KAAA,CAAAuE,aAAA,CAAC7D,QAAQ;IACLW,KAAK,EAAE0C,cAAe;IACtB3C,QAAQ,EAAEmC,gBAAiB;IAC3B3B,mBAAmB,EAAEA;EAAoB,CAC5C,CACY,CACpB,EACD,CACID,wBAAwB,EACxBR,QAAQ,EACRF,SAAS,EACTF,kBAAkB,EAClBU,wBAAwB,EACxBT,gBAAgB,EAChBU,sBAAsB,EACtBH,eAAe,EACfuC,kBAAkB,EAClBV,SAAS,EACTW,cAAc,EACdR,gBAAgB,EAChB3B,mBAAmB,CAE3B,CAAC;AACL,CACJ,CAAC;AAEDd,SAAS,CAAC0D,WAAW,GAAG,WAAW;AAEnC,eAAe1D,SAAS","ignoreList":[]}

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

@@ -3,10 +3,9 @@ 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, StyledFileItemKeyboardWrapper, StyledFileItemIcon } from './FileItem.styles';
+import { StyledFileItem, 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,
@@ -16,27 +15,6 @@ 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);
@@ -83,6 +61,8 @@ const FileItem = ({
       });
     }
   }, [name, source]);
+  const canDownload = shouldAllowDownload && !!source;
+  const canRemove = typeof onRemove === 'function';
   const downloadText = useTextstringValue({
     textstring: ttsToITextString(textStrings.components.fileItem.download)
   });
@@ -90,7 +70,6 @@ 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 = [{
@@ -108,34 +87,32 @@ const FileItem = ({
         items: items
       });
     }
-    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, {
+
+    // 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, {
     title: name,
     subtitle: humanFileSize,
     icons: [icon],
-    rightElements: rightElement,
-    shouldEnableKeyboardHighlighting: shouldShowKeyboardHighlighting
-  }))), [handleItemKeyDown, humanFileSize, icon, name, rightElement, shouldShowKeyboardHighlighting]);
+    rightElements: rightElement
+  })), [humanFileSize, icon, name, rightElement]);
 };
 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","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":[]}
+{"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":[]}

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

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

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

@@ -2,7 +2,6 @@ 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) {
@@ -19,10 +18,8 @@ const FileSelect = ({
   onAdd,
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
-  shouldPreventImageUpload = false,
-  shouldEnableKeyboardHighlighting
+  shouldPreventImageUpload = false
 }) => {
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const handleAddImages = useCallback(images => {
     if (typeof onAdd === 'function') {
       onAdd(images);
@@ -109,40 +106,20 @@ 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,
-    role: "button",
-    tabIndex: isDisabled ? -1 : 0
+    onDrop: handleDrop
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: fileSelectionIcons
   }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileSelectContainer, {
     $isImageSelection: true,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
-    onClick: () => void handleImageSelectionClick(),
-    onKeyDown: handleImageSelectionKeyDown,
-    role: "button",
-    tabIndex: isDisabled ? -1 : 0
+    onClick: () => void handleImageSelectionClick()
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: imageSelectIcons
-  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, shouldShowKeyboardHighlighting, handleFileSelectionClick, handleDrop, handleFileSelectionKeyDown, handleImageSelectionClick, handleImageSelectionKeyDown]);
+  }), /*#__PURE__*/React.createElement(StyledFileSelectText, null, imageSelectPlaceholder)))), [isDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
 };
 FileSelect.displayName = 'FileSelect';
 export default FileSelect;

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

@@ -1 +1 @@
-{"version":3,"file":"FileSelect.js","names":["createDialog","DialogType","React","useCallback","useMemo","isValidFileType","selectFiles","useKeyboardFocusHighlighting","Icon","StyledFileSelect","StyledFileSelectContainer","StyledFileSelectText","StyledFileSelectWrapper","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","handleAddImages","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","multiple","length","startsWith","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","types","handleFileSelectionKeyDown","event","key","handleImageSelectionKeyDown","createElement","$isDisabled","$shouldShowKeyboardHighlighting","onClick","onKeyDown","onDragOver","onDrop","role","tabIndex","icons","$isImageSelection","displayName"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, KeyboardEventHandler, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n    StyledFileSelect,\n    StyledFileSelectContainer,\n    StyledFileSelectText,\n    StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n    PIXABAY = 'pixabay',\n    EDITOR = 'editor',\n}\n\ntype DialogInput = {\n    upload: boolean;\n    initialView: DialogView;\n    imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n    url: string;\n    size?: number;\n    name?: string;\n}\n\nexport type FileSelectProps = {\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     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for selection triggers.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    isDisabled,\n    maxFileSizeInMB,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hochladen',\n    imageSelectPlaceholder,\n    shouldPreventImageUpload = false,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const handleAddImages = useCallback(\n        (images: UploadedFile[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(images);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(newFiles);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleOpenEditor = useCallback(\n        async (file: File) => {\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    initialView: DialogView.EDITOR,\n                    imageArrayBuffer: file,\n                },\n                type: DialogType.MODULE,\n                system: {\n                    url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                    scope: 'dialog_image_editor',\n                    module: './ImageEditorEntry',\n                },\n                buttons: [],\n            }).open()) as ImageDialogResult;\n\n            if (buttonType === 1 && result?.url)\n                handleAddImages([\n                    {\n                        url: result.url,\n                        size: file.size,\n                        name: file.name,\n                    },\n                ]);\n        },\n        [handleAddImages],\n    );\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) handleAddImages([{ url: result.url }]);\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n        if (\n            newFiles.length === 1 &&\n            newFiles[0] &&\n            newFiles[0].type.startsWith('image') &&\n            !shouldPreventImageUpload\n        ) {\n            void handleOpenEditor(newFiles[0]);\n\n            return;\n        }\n\n        handleAddFiles(newFiles);\n    }, [\n        fileTypes,\n        handleAddFiles,\n        handleOpenEditor,\n        isDisabled,\n        maxFileSizeInMB,\n        shouldPreventImageUpload,\n    ]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n\n            const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return false;\n                }\n\n                return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);\n            });\n\n            if (\n                draggedFiles.length === 1 &&\n                draggedFiles[0] &&\n                draggedFiles[0].type.startsWith('image') &&\n                !shouldPreventImageUpload\n            ) {\n                void handleOpenEditor(draggedFiles[0]);\n\n                return;\n            }\n\n            handleAddFiles(draggedFiles);\n        },\n        [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n    );\n\n    const handleFileSelectionKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void handleFileSelectionClick();\n            }\n        },\n        [handleFileSelectionClick],\n    );\n\n    const handleImageSelectionKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void handleImageSelectionClick();\n            }\n        },\n        [handleImageSelectionClick],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileSelect>\n                <StyledFileSelectWrapper $isDisabled={isDisabled}>\n                    <StyledFileSelectContainer\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        onClick={() => void handleFileSelectionClick()}\n                        onKeyDown={handleFileSelectionKeyDown}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={handleDrop}\n                        role=\"button\"\n                        tabIndex={isDisabled ? -1 : 0}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n                    </StyledFileSelectContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileSelectContainer\n                            $isImageSelection\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            onClick={() => void handleImageSelectionClick()}\n                            onKeyDown={handleImageSelectionKeyDown}\n                            role=\"button\"\n                            tabIndex={isDisabled ? -1 : 0}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n                        </StyledFileSelectContainer>\n                    )}\n                </StyledFileSelectWrapper>\n            </StyledFileSelect>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            shouldShowKeyboardHighlighting,\n            handleFileSelectionClick,\n            handleDrop,\n            handleFileSelectionKeyDown,\n            handleImageSelectionClick,\n            handleImageSelectionKeyDown,\n        ],\n    );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,YAAY;AACrD,OAAOC,KAAK,IAAyCC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAExF,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,gBAAgB,EAChBC,yBAAyB,EACzBC,oBAAoB,EACpBC,uBAAuB,QACpB,qBAAqB;AAAC,IAExBC,UAAU,0BAAVA,UAAU;EAAVA,UAAU;EAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA,EAAVA,UAAU;AAgEf,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,kBAAkB,GAAG,CAAC,cAAc,CAAC;EACrCC,gBAAgB,GAAG,CAAC,UAAU,CAAC;EAC/BC,SAAS;EACTC,UAAU;EACVC,eAAe;EACfC,KAAK;EACLC,wBAAwB,GAAG,mBAAmB;EAC9CC,sBAAsB;EACtBC,wBAAwB,GAAG,KAAK;EAChCC;AACJ,CAAC,KAAK;EACF,MAAMC,8BAA8B,GAAGlB,4BAA4B,CAC/DiB,gCAAgC,IAAI,CAACN,UACzC,CAAC;EAED,MAAMQ,eAAe,GAAGvB,WAAW,CAC9BwB,MAAsB,IAAK;IACxB,IAAI,OAAOP,KAAK,KAAK,UAAU,EAAE;MAC7BA,KAAK,CAACO,MAAM,CAAC;IACjB;EACJ,CAAC,EACD,CAACP,KAAK,CACV,CAAC;EAED,MAAMQ,cAAc,GAAGzB,WAAW,CAC7B0B,QAAgB,IAAK;IAClB,IAAI,OAAOT,KAAK,KAAK,UAAU,EAAE;MAC7BA,KAAK,CAACS,QAAQ,CAAC;IACnB;EACJ,CAAC,EACD,CAACT,KAAK,CACV,CAAC;EAED,MAAMU,gBAAgB,GAAG3B,WAAW,CAChC,MAAO4B,IAAU,IAAK;IAClB,MAAM;MAAEC,UAAU;MAAEC;IAAO,CAAC,GAAI,MAAMjC,YAAY,CAAc;MAC5DkC,WAAW,EAAE;QACTC,MAAM,EAAE,IAAI;QACZC,WAAW,EAAEvB,UAAU,CAACwB,MAAM;QAC9BC,gBAAgB,EAAEP;MACtB,CAAC;MACDQ,IAAI,EAAEtC,UAAU,CAACuC,MAAM;MACvBC,MAAM,EAAE;QACJC,GAAG,EAAE,4EAA4E;QACjFC,KAAK,EAAE,qBAAqB;QAC5BC,MAAM,EAAE;MACZ,CAAC;MACDC,OAAO,EAAE;IACb,CAAC,CAAC,CAACC,IAAI,CAAC,CAAuB;IAE/B,IAAId,UAAU,KAAK,CAAC,IAAIC,MAAM,EAAES,GAAG,EAC/BhB,eAAe,CAAC,CACZ;MACIgB,GAAG,EAAET,MAAM,CAACS,GAAG;MACfK,IAAI,EAAEhB,IAAI,CAACgB,IAAI;MACfC,IAAI,EAAEjB,IAAI,CAACiB;IACf,CAAC,CACJ,CAAC;EACV,CAAC,EACD,CAACtB,eAAe,CACpB,CAAC;EAED,MAAMuB,yBAAyB,GAAG9C,WAAW,CAAC,YAAY;IACtD,IAAIe,UAAU,EAAE;IAEhB,MAAM;MAAEc,UAAU;MAAEC;IAAO,CAAC,GAAI,MAAMjC,YAAY,CAAc;MAC5DkC,WAAW,EAAE;QAAEC,MAAM,EAAE,IAAI;QAAEC,WAAW,EAAEvB,UAAU,CAACqC;MAAQ,CAAC;MAC9DX,IAAI,EAAEtC,UAAU,CAACuC,MAAM;MACvBC,MAAM,EAAE;QACJC,GAAG,EAAE,4EAA4E;QACjFC,KAAK,EAAE,qBAAqB;QAC5BC,MAAM,EAAE;MACZ,CAAC;MACDC,OAAO,EAAE;IACb,CAAC,CAAC,CAACC,IAAI,CAAC,CAAuB;IAE/B,IAAId,UAAU,KAAK,CAAC,IAAIC,MAAM,EAAES,GAAG,EAAEhB,eAAe,CAAC,CAAC;MAAEgB,GAAG,EAAET,MAAM,CAACS;IAAI,CAAC,CAAC,CAAC;EAC/E,CAAC,EAAE,CAAChB,eAAe,EAAER,UAAU,CAAC,CAAC;EAEjC,MAAMiC,wBAAwB,GAAGhD,WAAW,CAAC,YAAY;IACrD,IAAIe,UAAU,EAAE;IAEhB,MAAMW,QAAQ,GAAG,MAAMvB,WAAW,CAAC;MAAE8C,QAAQ,EAAE,IAAI;MAAEb,IAAI,EAAEtB,SAAS;MAAEE;IAAgB,CAAC,CAAC;IAExF,IACIU,QAAQ,CAACwB,MAAM,KAAK,CAAC,IACrBxB,QAAQ,CAAC,CAAC,CAAC,IACXA,QAAQ,CAAC,CAAC,CAAC,CAACU,IAAI,CAACe,UAAU,CAAC,OAAO,CAAC,IACpC,CAAC/B,wBAAwB,EAC3B;MACE,KAAKO,gBAAgB,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC;MAElC;IACJ;IAEAD,cAAc,CAACC,QAAQ,CAAC;EAC5B,CAAC,EAAE,CACCZ,SAAS,EACTW,cAAc,EACdE,gBAAgB,EAChBZ,UAAU,EACVC,eAAe,EACfI,wBAAwB,CAC3B,CAAC;EAEF,MAAMgC,UAAU,GAAGpD,WAAW,CACzBqD,CAA4B,IAAK;IAC9BA,CAAC,CAACC,cAAc,CAAC,CAAC;IAElB,MAAMC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAACJ,CAAC,CAACK,YAAY,CAACC,KAAK,CAAC,CAACC,MAAM,CAAEhC,IAAI,IAAK;MACnE,IAAId,SAAS,IAAI,CAACZ,eAAe,CAAC;QAAE0B,IAAI;QAAEiC,KAAK,EAAE/C;MAAU,CAAC,CAAC,EAAE;QAC3D,OAAO,KAAK;MAChB;MAEA,OAAO,EAAEE,eAAe,IAAIY,IAAI,CAACgB,IAAI,GAAG5B,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1E,CAAC,CAAC;IAEF,IACIuC,YAAY,CAACL,MAAM,KAAK,CAAC,IACzBK,YAAY,CAAC,CAAC,CAAC,IACfA,YAAY,CAAC,CAAC,CAAC,CAACnB,IAAI,CAACe,UAAU,CAAC,OAAO,CAAC,IACxC,CAAC/B,wBAAwB,EAC3B;MACE,KAAKO,gBAAgB,CAAC4B,YAAY,CAAC,CAAC,CAAC,CAAC;MAEtC;IACJ;IAEA9B,cAAc,CAAC8B,YAAY,CAAC;EAChC,CAAC,EACD,CAACnC,wBAAwB,EAAEK,cAAc,EAAEX,SAAS,EAAEE,eAAe,EAAEW,gBAAgB,CAC3F,CAAC;EAED,MAAMmC,0BAA0B,GAAG9D,WAAW,CACzC+D,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACT,cAAc,CAAC,CAAC;MACtB,KAAKN,wBAAwB,CAAC,CAAC;IACnC;EACJ,CAAC,EACD,CAACA,wBAAwB,CAC7B,CAAC;EAED,MAAMiB,2BAA2B,GAAGjE,WAAW,CAC1C+D,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACT,cAAc,CAAC,CAAC;MACtB,KAAKR,yBAAyB,CAAC,CAAC;IACpC;EACJ,CAAC,EACD,CAACA,yBAAyB,CAC9B,CAAC;EAED,OAAO7C,OAAO,CACV,mBACIF,KAAA,CAAAmE,aAAA,CAAC5D,gBAAgB,qBACbP,KAAA,CAAAmE,aAAA,CAACzD,uBAAuB;IAAC0D,WAAW,EAAEpD;EAAW,gBAC7ChB,KAAA,CAAAmE,aAAA,CAAC3D,yBAAyB;IACtB6D,+BAA+B,EAAE9C,8BAA+B;IAChE+C,OAAO,EAAEA,CAAA,KAAM,KAAKrB,wBAAwB,CAAC,CAAE;IAC/CsB,SAAS,EAAER,0BAA2B;IACtCS,UAAU,EAAGlB,CAAC,IAAKA,CAAC,CAACC,cAAc,CAAC,CAAE;IACtCkB,MAAM,EAAEpB,UAAW;IACnBqB,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE3D,UAAU,GAAG,CAAC,CAAC,GAAG;EAAE,gBAE9BhB,KAAA,CAAAmE,aAAA,CAAC7D,IAAI;IAACsE,KAAK,EAAE/D;EAAmB,CAAE,CAAC,eACnCb,KAAA,CAAAmE,aAAA,CAAC1D,oBAAoB,QAAEU,wBAA+C,CAC/C,CAAC,EAC3BC,sBAAsB,iBACnBpB,KAAA,CAAAmE,aAAA,CAAC3D,yBAAyB;IACtBqE,iBAAiB;IACjBR,+BAA+B,EAAE9C,8BAA+B;IAChE+C,OAAO,EAAEA,CAAA,KAAM,KAAKvB,yBAAyB,CAAC,CAAE;IAChDwB,SAAS,EAAEL,2BAA4B;IACvCQ,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE3D,UAAU,GAAG,CAAC,CAAC,GAAG;EAAE,gBAE9BhB,KAAA,CAAAmE,aAAA,CAAC7D,IAAI;IAACsE,KAAK,EAAE9D;EAAiB,CAAE,CAAC,eACjCd,KAAA,CAAAmE,aAAA,CAAC1D,oBAAoB,QAAEW,sBAA6C,CAC7C,CAEV,CACX,CACrB,EACD,CACIJ,UAAU,EACVH,kBAAkB,EAClBM,wBAAwB,EACxBC,sBAAsB,EACtBN,gBAAgB,EAChBS,8BAA8B,EAC9B0B,wBAAwB,EACxBI,UAAU,EACVU,0BAA0B,EAC1BhB,yBAAyB,EACzBmB,2BAA2B,CAEnC,CAAC;AACL,CAAC;AAEDtD,UAAU,CAACkE,WAAW,GAAG,YAAY;AAErC,eAAelE,UAAU","ignoreList":[]}
+{"version":3,"file":"FileSelect.js","names":["createDialog","DialogType","React","useCallback","useMemo","isValidFileType","selectFiles","Icon","StyledFileSelect","StyledFileSelectContainer","StyledFileSelectText","StyledFileSelectWrapper","DialogView","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","handleAddImages","images","handleAddFiles","newFiles","handleOpenEditor","file","buttonType","result","dialogInput","upload","initialView","EDITOR","imageArrayBuffer","type","MODULE","system","url","scope","module","buttons","open","size","name","handleImageSelectionClick","PIXABAY","handleFileSelectionClick","multiple","length","startsWith","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","types","createElement","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","displayName"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n    StyledFileSelect,\n    StyledFileSelectContainer,\n    StyledFileSelectText,\n    StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\nenum DialogView {\n    PIXABAY = 'pixabay',\n    EDITOR = 'editor',\n}\n\ntype DialogInput = {\n    upload: boolean;\n    initialView: DialogView;\n    imageArrayBuffer?: File;\n};\n\nexport interface UploadedFile {\n    url: string;\n    size?: number;\n    name?: string;\n}\n\nexport type FileSelectProps = {\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     * Whether the image upload should be prevented.\n     */\n    shouldPreventImageUpload?: boolean;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n    fileSelectionIcons = ['fa fa-upload'],\n    imageSelectIcons = ['ts-image'],\n    fileTypes,\n    isDisabled,\n    maxFileSizeInMB,\n    onAdd,\n    fileSelectionPlaceholder = 'Dateien hochladen',\n    imageSelectPlaceholder,\n    shouldPreventImageUpload = false,\n}) => {\n    const handleAddImages = useCallback(\n        (images: UploadedFile[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(images);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleAddFiles = useCallback(\n        (newFiles: File[]) => {\n            if (typeof onAdd === 'function') {\n                onAdd(newFiles);\n            }\n        },\n        [onAdd],\n    );\n\n    const handleOpenEditor = useCallback(\n        async (file: File) => {\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    initialView: DialogView.EDITOR,\n                    imageArrayBuffer: file,\n                },\n                type: DialogType.MODULE,\n                system: {\n                    url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                    scope: 'dialog_image_editor',\n                    module: './ImageEditorEntry',\n                },\n                buttons: [],\n            }).open()) as ImageDialogResult;\n\n            if (buttonType === 1 && result?.url)\n                handleAddImages([\n                    {\n                        url: result.url,\n                        size: file.size,\n                        name: file.name,\n                    },\n                ]);\n        },\n        [handleAddImages],\n    );\n\n    const handleImageSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const { buttonType, result } = (await createDialog<DialogInput>({\n            dialogInput: { upload: true, initialView: DialogView.PIXABAY },\n            type: DialogType.MODULE,\n            system: {\n                url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n                scope: 'dialog_image_editor',\n                module: './ImageEditorEntry',\n            },\n            buttons: [],\n        }).open()) as ImageDialogResult;\n\n        if (buttonType === 1 && result?.url) handleAddImages([{ url: result.url }]);\n    }, [handleAddImages, isDisabled]);\n\n    const handleFileSelectionClick = useCallback(async () => {\n        if (isDisabled) return;\n\n        const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n        if (\n            newFiles.length === 1 &&\n            newFiles[0] &&\n            newFiles[0].type.startsWith('image') &&\n            !shouldPreventImageUpload\n        ) {\n            void handleOpenEditor(newFiles[0]);\n\n            return;\n        }\n\n        handleAddFiles(newFiles);\n    }, [\n        fileTypes,\n        handleAddFiles,\n        handleOpenEditor,\n        isDisabled,\n        maxFileSizeInMB,\n        shouldPreventImageUpload,\n    ]);\n\n    const handleDrop = useCallback(\n        (e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n\n            const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n                if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n                    return false;\n                }\n\n                return !(maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024);\n            });\n\n            if (\n                draggedFiles.length === 1 &&\n                draggedFiles[0] &&\n                draggedFiles[0].type.startsWith('image') &&\n                !shouldPreventImageUpload\n            ) {\n                void handleOpenEditor(draggedFiles[0]);\n\n                return;\n            }\n\n            handleAddFiles(draggedFiles);\n        },\n        [shouldPreventImageUpload, handleAddFiles, fileTypes, maxFileSizeInMB, handleOpenEditor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileSelect>\n                <StyledFileSelectWrapper $isDisabled={isDisabled}>\n                    <StyledFileSelectContainer\n                        onClick={() => void handleFileSelectionClick()}\n                        onDragOver={(e) => e.preventDefault()}\n                        onDrop={handleDrop}\n                    >\n                        <Icon icons={fileSelectionIcons} />\n                        <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n                    </StyledFileSelectContainer>\n                    {imageSelectPlaceholder && (\n                        <StyledFileSelectContainer\n                            $isImageSelection\n                            onClick={() => void handleImageSelectionClick()}\n                        >\n                            <Icon icons={imageSelectIcons} />\n                            <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n                        </StyledFileSelectContainer>\n                    )}\n                </StyledFileSelectWrapper>\n            </StyledFileSelect>\n        ),\n        [\n            isDisabled,\n            fileSelectionIcons,\n            fileSelectionPlaceholder,\n            imageSelectPlaceholder,\n            imageSelectIcons,\n            handleFileSelectionClick,\n            handleDrop,\n            handleImageSelectionClick,\n        ],\n    );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledFileSelect = styled.div``;
 export const StyledFileSelectWrapper = styled.div`
     display: flex;
@@ -36,15 +35,6 @@ export const StyledFileSelectContainer = styled.div`
 }) => $isImageSelection && css`
             border-left: none;
         `}
-
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
 `;
 export const StyledFileSelectText = styled.p`
     color: ${({