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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","canDownload","canRemove","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","key","onClick","text","title","subtitle","rightElements","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        // Only download\n        if (canDownload) {\n            return (\n                <StyledFileItemIcon onClick={handleDownload}>\n                    <Icon icons={['fa fa-download']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        // Only remove\n        if (canRemove) {\n            return (\n                <StyledFileItemIcon onClick={() => onRemove(id)}>\n                    <Icon icons={['ts-wrong']} />\n                </StyledFileItemIcon>\n            );\n        }\n\n        return undefined;\n    }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <ListItem\n                    title={name}\n                    subtitle={humanFileSize}\n                    icons={[icon]}\n                    rightElements={rightElement}\n                />\n            </StyledFileItem>\n        ),\n        [humanFileSize, icon, name, rightElement],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemKeyboardWrapper","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","useKeyboardFocusHighlighting","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","canDownload","canRemove","shouldShowKeyboardHighlighting","handleRemove","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","handleClick","handleKeyDown","fileIcon","onKeyDown","role","tabIndex","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport {\n    StyledFileItem,\n    StyledFileItemActions,\n    StyledFileItemKeyboardWrapper,\n    StyledFileItemRemoveButton,\n    StyledFileItemIcon,\n} from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n    shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n    mimeType,\n    onRemove,\n    size,\n    name,\n    id,\n    source,\n    shouldAllowDownload,\n}) => {\n    const canDownload = shouldAllowDownload && !!source;\n    const canRemove = typeof onRemove === 'function';\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);\n\n    const handleRemove = useCallback(() => {\n        if (canRemove) {\n            onRemove(id);\n        }\n    }, [id, onRemove]);\n\n    const handleItemKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (event.key === 'Delete') {\n                event.preventDefault();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const handleRemoveKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n        (event) => {\n            if (canRemove && (event.key === 'Enter' || event.key === ' ')) {\n                event.preventDefault();\n                event.stopPropagation();\n                handleRemove();\n            }\n        },\n        [handleRemove],\n    );\n\n    const humanFileSize = useMemo(() => {\n        if (typeof size === 'number') {\n            return getHumanSize(size);\n        }\n\n        return undefined;\n    }, [size]);\n\n    const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n    const handleDownload = useCallback(() => {\n        if (!source) return;\n\n        if (source instanceof File) {\n            const url = URL.createObjectURL(source);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = name;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(url);\n        } else {\n            // Try fetching as blob to force download. If CORS blocks it,\n            // fall back to opening the URL directly.\n            fetch(source)\n                .then((res) => {\n                    if (!res.ok) throw new Error('fetch failed');\n                    return res.blob();\n                })\n                .then((blob) => {\n                    const url = URL.createObjectURL(blob);\n                    const a = document.createElement('a');\n                    a.href = url;\n                    a.download = name;\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                    URL.revokeObjectURL(url);\n                })\n                .catch(() => {\n                    // CORS or network error: fall back to direct link\n                    const a = document.createElement('a');\n                    a.href = source;\n                    a.download = name;\n                    a.rel = 'noopener noreferrer';\n                    a.target = '_blank';\n                    document.body.appendChild(a);\n                    a.click();\n                    document.body.removeChild(a);\n                });\n        }\n    }, [name, source]);\n\n    const downloadText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.download),\n    });\n    const removeText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.fileItem.remove),\n    });\n\n    const rightElement = useMemo(() => {\n        if (!canDownload && !canRemove) return undefined;\n        // Both actions available → show as ContextMenu\n        if (canDownload && canRemove) {\n            const items: ContextMenuItem[] = [\n                {\n                    icons: ['fa fa-download'],\n                    key: 'download',\n                    onClick: handleDownload,\n                    text: downloadText,\n                },\n                {\n                    icons: ['fa fa-trash'],\n                    key: 'remove',\n                    onClick: () => onRemove(id),\n                    text: removeText,\n                },\n            ];\n\n            return <ContextMenu items={items} />;\n        }\n\n        const handleClick = () => {\n            if (canRemove) {\n                onRemove(id);\n                return;\n            }\n\n            handleDownload();\n        };\n\n        const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;\n\n        const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';\n\n        return (\n            <StyledFileItemIcon\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                <Icon icons={[fileIcon]} />\n            </StyledFileItemIcon>\n        );\n    }, [\n        canDownload,\n        canRemove,\n        downloadText,\n        handleDownload,\n        handleRemoveKeyDown,\n        id,\n        onRemove,\n        removeText,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledFileItem>\n                <StyledFileItemKeyboardWrapper onKeyDown={handleItemKeyDown} tabIndex={-1}>\n                    <ListItem\n                        title={name}\n                        subtitle={humanFileSize}\n                        icons={[icon]}\n                        rightElements={rightElement}\n                        shouldEnableKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    />\n                </StyledFileItemKeyboardWrapper>\n            </StyledFileItem>\n        ),\n        [\n            handleItemKeyDown,\n            humanFileSize,\n            icon,\n            name,\n            rightElement,\n            shouldShowKeyboardHighlighting,\n        ],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"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":[]}
+{"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":"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","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 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;
@@ -35,6 +36,15 @@ export const StyledFileSelectContainer = styled.div`
 }) => $isImageSelection && css`
             border-left: none;
         `}
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledFileSelectText = styled.p`
     color: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"FileSelect.styles.js","names":["motion","styled","css","StyledFileSelect","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","headline","StyledFileSelectContainer","text","$isImageSelection","StyledFileSelectText","p","StyledMotionFileSelectList"],"sources":["../../../../src/components/file-select/FileSelect.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileSelect = styled.div``;\n\ntype StyledFileSelectWrapperProps = WithTheme<{\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledFileSelectWrapper = styled.div<StyledFileSelectWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileSelectContainerProps = WithTheme<{\n    $isImageSelection?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n    ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n        $shouldShowBorder &&\n        css`\n            border-top: 1px solid ${theme.headline};\n        `}\n`;\n\nexport const StyledFileSelectContainer = styled.div<StyledFileSelectContainerProps>`\n    border: ${({ theme }: StyledFileSelectContainerProps) => theme.text} 1px dashed;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 15px;\n    justify-content: center;\n    width: 100%;\n\n    ${({ $isImageSelection }) =>\n        $isImageSelection &&\n        css`\n            border-left: none;\n        `}\n`;\n\ntype StyledFileSelectTextProps = WithTheme<unknown>;\n\nexport const StyledFileSelectText = styled.p<StyledFileSelectTextProps>`\n    color: ${({ theme }: StyledFileSelectTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileSelectList = styled(motion.div)``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAAG,EAAE;AAM5C,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AAQD,OAAO,MAAMC,uBAAuB,GAAGN,MAAM,CAACG,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjBN,GAAG;AACX,oCAAoCO,KAAK,CAACC,QAAQ;AAClD,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGV,MAAM,CAACG,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjBX,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMY,oBAAoB,GAAGb,MAAM,CAACc,CAA4B;AACvE,aAAa,CAAC;EAAEN;AAAiC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACjE,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGf,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC,EAAE","ignoreList":[]}
+{"version":3,"file":"FileSelect.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledFileSelect","div","StyledFileSelectWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","headline","StyledFileSelectContainer","text","$isImageSelection","$shouldShowKeyboardHighlighting","StyledFileSelectText","p","StyledMotionFileSelectList"],"sources":["../../../../src/components/file-select/FileSelect.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileSelect = styled.div``;\n\ntype StyledFileSelectWrapperProps = WithTheme<{\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledFileSelectWrapper = styled.div<StyledFileSelectWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileSelectContainerProps = WithTheme<{\n    $isImageSelection?: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n    ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n        $shouldShowBorder &&\n        css`\n            border-top: 1px solid ${theme.headline};\n        `}\n`;\n\nexport const StyledFileSelectContainer = styled.div<StyledFileSelectContainerProps>`\n    border: ${({ theme }: StyledFileSelectContainerProps) => theme.text} 1px dashed;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    padding: 15px;\n    justify-content: center;\n    width: 100%;\n\n    ${({ $isImageSelection }) =>\n        $isImageSelection &&\n        css`\n            border-left: none;\n        `}\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledFileSelectTextProps = WithTheme<unknown>;\n\nexport const StyledFileSelectText = styled.p<StyledFileSelectTextProps>`\n    color: ${({ theme }: StyledFileSelectTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileSelectList = styled(motion.div)``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAG,EAAE;AAM5C,OAAO,MAAMC,uBAAuB,GAAGL,MAAM,CAACI,GAAiC;AAC/E;AACA;AACA,cAAc,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D,CAAC;AASD,OAAO,MAAMC,uBAAuB,GAAGP,MAAM,CAACI,GAAiC;AAC/E,MAAM,CAAC;EAAEI,iBAAiB;EAAEC;AAAoC,CAAC,KACzDD,iBAAiB,IACjBP,GAAG;AACX,oCAAoCQ,KAAK,CAACC,QAAQ;AAClD,SAAS;AACT,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGX,MAAM,CAACI,GAAmC;AACnF,cAAc,CAAC;EAAEK;AAAsC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjBZ,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEa;AAAgC,CAAC,KAClCA,+BAA+B,IAC/Bb,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMa,oBAAoB,GAAGf,MAAM,CAACgB,CAA4B;AACvE,aAAa,CAAC;EAAEP;AAAiC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACjE,CAAC;AAED,OAAO,MAAMK,0BAA0B,GAAGjB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAC,EAAE","ignoreList":[]}