@chayns-components/core 5.0.0-beta.997 → 5.0.0

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

@@ -1,27 +1,25 @@
-import { createDialog, DialogType } from 'chayns-api';
-import { AnimatePresence } from 'framer-motion';
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';
-import { selectFiles } from '../../utils/fileDialog';
-import Icon from '../icon/Icon';
-import List from '../list/List';
-import FileListItem from './file-list/FileListItem';
-import { StyledFileInput, StyledFileInputContainer, StyledFileInputText, StyledFileInputWrapper, StyledMotionFileInputList, StyledUploadedFilesList } from './FileInput.styles';
-const FileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    fileSelectionIcons = ['fa fa-upload'],
-    imageSelectIcons = ['ts-image'],
-    fileTypes,
-    onMaxFilesReached,
-    maxFiles,
-    onRemove,
-    files,
-    isDisabled,
-    maxFileSizeInMB,
-    onAdd,
-    fileSelectionPlaceholder = 'Dateien hochladen',
-    imageSelectPlaceholder
-  } = _ref;
+import { StyledFileInput } from './FileInput.styles';
+import FileList from '../file-list/FileList';
+import FileSelect from '../file-select/FileSelect';
+export const TSIMG_FILE_TYPES = 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';
+export const STREAMINGSERVICE_FILE_TYPES = 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';
+const FileInput = /*#__PURE__*/forwardRef(({
+  fileSelectionIcons = ['fa fa-upload'],
+  imageSelectIcons = ['ts-image'],
+  fileTypes,
+  onMaxFilesReached,
+  maxFiles,
+  onRemove,
+  files,
+  isDisabled,
+  maxFileSizeInMB,
+  onAdd,
+  fileSelectionPlaceholder = 'Dateien hochladen',
+  imageSelectPlaceholder,
+  shouldPreventImageUpload = false
+}, ref) => {
   const [internalFiles, setInternalFiles] = useState([]);
   const [internalImages, setInternalImages] = useState([]);
   const handleInputClear = () => {
@@ -68,37 +66,46 @@ const FileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     });
     let tmp = newFileItems;
     if (maxFiles) {
-      tmp = newFileItems.slice(0, maxFiles - (internalFiles.length + internalImages.length + (files?.length ?? 0)));
+      tmp = newFileItems.slice(0, maxFiles - (internalFiles.length + (files?.length ?? 0)));
     }
     if (tmp.length > 0 && typeof onAdd === 'function') {
       onAdd(tmp);
     }
     setInternalFiles(prevState => [...prevState, ...tmp]);
-  }, [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd]);
-  const handleDeleteFile = useCallback(fileName => {
+  }, [fileTypes, files?.length, internalFiles, maxFiles, onAdd]);
+  const handleAdd = useCallback(newFiles => {
+    if (Array.isArray(newFiles) && newFiles.length > 0) {
+      if (newFiles[0] && 'url' in newFiles[0]) {
+        handleAddImages(newFiles);
+      } else {
+        handleAddFiles(newFiles);
+      }
+    }
+  }, [handleAddFiles, handleAddImages]);
+  const handleDeleteFile = useCallback(id => {
     let fileToDelete;
     const filteredFiles = internalFiles.filter(file => {
       const {
         name
       } = file;
-      if (name === fileName) {
+      if (name === id) {
         fileToDelete = file;
       }
-      return name !== fileName;
+      return name !== id;
     });
     setInternalFiles(filteredFiles);
     if (!fileToDelete) {
       const filteredImages = internalImages.filter(image => {
-        if (image === fileName) {
+        if (image.name === id) {
           fileToDelete = image;
         }
-        return image !== fileName;
+        return image.name !== id;
       });
       setInternalImages(filteredImages);
     }
     if (!fileToDelete) {
       files?.forEach(file => {
-        if (file.url === fileName || file.name === fileName) {
+        if (file.id === id || file.name === id) {
           fileToDelete = file;
         }
       });
@@ -122,129 +129,45 @@ const FileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     return false;
   }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);
-  const handleImageSelectionClick = useCallback(async () => {
-    if (internalIsDisabled) {
-      return;
-    }
-    const {
-      buttonType,
-      result
-    } = await createDialog({
-      dialogInput: {
-        upload: true,
-        buttons: [{
-          text: 'hello',
-          buttonType: 1
-        }, {
-          text: 'can',
-          buttonType: -1
-        }],
-        initialView: 'pixabay'
-      },
-      type: DialogType.MODULE,
-      system: {
-        url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',
-        scope: 'dialog_image_editor',
-        module: './ImageEditorEntry'
-      },
-      buttons: []
-    }).open();
-    if (buttonType === 1 && result?.url) {
-      handleAddImages([result.url]);
-    }
-  }, [handleAddImages, internalIsDisabled]);
-  const handleFileSelectionClick = useCallback(async () => {
-    if (internalIsDisabled) {
-      return;
-    }
-    const newFiles = await selectFiles({
-      multiple: true,
-      type: fileTypes,
-      maxFileSizeInMB
+  const filesToDisplay = useMemo(() => {
+    const items = internalFiles.map(({
+      type,
+      name,
+      size
+    }) => ({
+      id: name,
+      name,
+      size,
+      mimeType: type
+    }));
+    internalImages.forEach(image => {
+      items.push({
+        id: image.name ?? image.url,
+        name: image.name ?? image.url,
+        size: image.size ?? 0,
+        mimeType: 'image/png'
+      });
     });
-    handleAddFiles(newFiles);
-  }, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);
-  const handleDrop = useCallback(e => {
-    e.preventDefault();
-    const draggedFiles = Array.from(e.dataTransfer.files);
-    handleAddFiles(draggedFiles);
-  }, [handleAddFiles]);
-  const content = useMemo(() => {
-    const combinedFiles = [...internalImages, ...internalFiles];
-    const items = combinedFiles.map(file => /*#__PURE__*/React.createElement(StyledMotionFileInputList, {
-      animate: {
-        height: 'auto',
-        opacity: 1
-      },
-      exit: {
-        height: 0,
-        opacity: 0
-      },
-      key: typeof file === 'string' ? file : file.name,
-      transition: {
-        duration: 0.25,
-        type: 'tween'
-      }
-    }, /*#__PURE__*/React.createElement(FileListItem, {
-      fileType: typeof file !== 'string' ? file.type : undefined,
-      fileName: typeof file !== 'string' ? file.name : undefined,
-      fileSize: typeof file !== 'string' ? file.size : undefined,
-      url: typeof file === 'string' ? file : undefined,
-      onRemove: handleDeleteFile
-    })));
-    return items;
-  }, [handleDeleteFile, internalFiles, internalImages]);
-  const uploadedFiles = useMemo(() => {
-    const items = [];
-    const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;
-    cutFiles?.forEach(_ref2 => {
-      let {
-        url,
-        id,
-        name
-      } = _ref2;
-      items.push(/*#__PURE__*/React.createElement(StyledMotionFileInputList, {
-        animate: {
-          height: 'auto',
-          opacity: 1
-        },
-        exit: {
-          height: 0,
-          opacity: 0
-        },
-        key: id,
-        transition: {
-          duration: 0.25,
-          type: 'tween'
-        }
-      }, /*#__PURE__*/React.createElement(FileListItem, {
-        url: url,
-        onRemove: handleDeleteFile,
-        fileName: name
-      })));
+    files?.forEach(file => {
+      items.push(file);
     });
     return items;
-  }, [files, handleDeleteFile, maxFiles]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileInput, null, /*#__PURE__*/React.createElement(StyledFileInputWrapper, {
-    $isDisabled: internalIsDisabled
-  }, /*#__PURE__*/React.createElement(StyledFileInputContainer, {
-    onClick: () => void handleFileSelectionClick(),
-    onDragOver: e => e.preventDefault(),
-    onDrop: e => void handleDrop(e)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icons: fileSelectionIcons
-  }), /*#__PURE__*/React.createElement(StyledFileInputText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/React.createElement(StyledFileInputContainer, {
-    $isImageSelection: true,
-    onClick: () => void handleImageSelectionClick()
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icons: imageSelectIcons
-  }), /*#__PURE__*/React.createElement(StyledFileInputText, null, imageSelectPlaceholder))), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(AnimatePresence, {
-    initial: false
-  }, content)), uploadedFiles.length > 0 && /*#__PURE__*/React.createElement(StyledUploadedFilesList, {
-    $shouldShowBorder: content.length > 0
-  }, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(AnimatePresence, {
-    initial: false
-  }, uploadedFiles)))), [internalIsDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, content, uploadedFiles, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
+  }, [files, internalFiles, internalImages]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileInput, null, /*#__PURE__*/React.createElement(FileSelect, {
+    shouldPreventImageUpload: shouldPreventImageUpload,
+    maxFiles: maxFiles,
+    fileTypes: fileTypes,
+    fileSelectionIcons: fileSelectionIcons,
+    fileSelectionPlaceholder: fileSelectionPlaceholder,
+    imageSelectIcons: imageSelectIcons,
+    imageSelectPlaceholder: imageSelectPlaceholder,
+    maxFileSizeInMB: maxFileSizeInMB,
+    isDisabled: internalIsDisabled,
+    onAdd: handleAdd
+  }), /*#__PURE__*/React.createElement(FileList, {
+    files: filesToDisplay,
+    onRemove: handleDeleteFile
+  })), [shouldPreventImageUpload, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile]);
 });
 FileInput.displayName = 'FileInput';
 export default FileInput;

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","internalIsDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    DragEvent,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useImperativeHandle,\n    useMemo,\n    useState,\n} from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n    StyledFileInput,\n    StyledFileInputContainer,\n    StyledFileInputText,\n    StyledFileInputWrapper,\n    StyledMotionFileInputList,\n    StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: FileInputFileItem[];\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[] | string[]) => 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 | FileInputFileItem | string) => void;\n};\n\ntype DialogInput = {\n    upload: boolean;\n    buttons: {\n        text: string;\n        buttonType: number;\n    }[];\n    initialView: string;\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        },\n        ref,\n    ) => {\n        const [internalFiles, setInternalFiles] = useState<File[]>([]);\n        const [internalImages, setInternalImages] = useState<string[]>([]);\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: string[]) => {\n                const newImages: string[] = [];\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 -\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                setInternalFiles((prevState) => [...prevState, ...tmp]);\n            },\n            [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n        );\n\n        const handleDeleteFile = useCallback(\n            (fileName?: string) => {\n                let fileToDelete: File | FileInputFileItem | string | undefined;\n\n                const filteredFiles = internalFiles.filter((file) => {\n                    const { name } = file;\n\n                    if (name === fileName) {\n                        fileToDelete = file;\n                    }\n\n                    return name !== fileName;\n                });\n\n                setInternalFiles(filteredFiles);\n\n                if (!fileToDelete) {\n                    const filteredImages = internalImages.filter((image) => {\n                        if (image === fileName) {\n                            fileToDelete = image;\n                        }\n\n                        return image !== fileName;\n                    });\n\n                    setInternalImages(filteredImages);\n                }\n\n                if (!fileToDelete) {\n                    files?.forEach((file) => {\n                        if (file.url === fileName || file.name === fileName) {\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 handleImageSelectionClick = useCallback(async () => {\n            if (internalIsDisabled) {\n                return;\n            }\n\n            const { buttonType, result } = (await createDialog<DialogInput>({\n                dialogInput: {\n                    upload: true,\n                    buttons: [\n                        { text: 'hello', buttonType: 1 },\n                        { text: 'can', buttonType: -1 },\n                    ],\n                    initialView: 'pixabay',\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([result.url]);\n            }\n        }, [handleAddImages, internalIsDisabled]);\n\n        const handleFileSelectionClick = useCallback(async () => {\n            if (internalIsDisabled) {\n                return;\n            }\n\n            const newFiles = await selectFiles({\n                multiple: true,\n                type: fileTypes,\n                maxFileSizeInMB,\n            });\n\n            handleAddFiles(newFiles);\n        }, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);\n\n        const handleDrop = useCallback(\n            (e: DragEvent<HTMLDivElement>) => {\n                e.preventDefault();\n                const draggedFiles = Array.from(e.dataTransfer.files);\n\n                handleAddFiles(draggedFiles);\n            },\n            [handleAddFiles],\n        );\n\n        const content = useMemo(() => {\n            const combinedFiles = [...internalImages, ...internalFiles];\n\n            const items: ReactElement[] = combinedFiles.map((file) => (\n                <StyledMotionFileInputList\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    key={typeof file === 'string' ? file : file.name}\n                    transition={{ duration: 0.25, type: 'tween' }}\n                >\n                    <FileListItem\n                        fileType={typeof file !== 'string' ? file.type : undefined}\n                        fileName={typeof file !== 'string' ? file.name : undefined}\n                        fileSize={typeof file !== 'string' ? file.size : undefined}\n                        url={typeof file === 'string' ? file : undefined}\n                        onRemove={handleDeleteFile}\n                    />\n                </StyledMotionFileInputList>\n            ));\n\n            return items;\n        }, [handleDeleteFile, internalFiles, internalImages]);\n\n        const uploadedFiles = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n            cutFiles?.forEach(({ url, id, name }) => {\n                items.push(\n                    <StyledMotionFileInputList\n                        animate={{ height: 'auto', opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        key={id}\n                        transition={{ duration: 0.25, type: 'tween' }}\n                    >\n                        <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n                    </StyledMotionFileInputList>,\n                );\n            });\n\n            return items;\n        }, [files, handleDeleteFile, maxFiles]);\n\n        return useMemo(\n            () => (\n                <StyledFileInput>\n                    <StyledFileInputWrapper $isDisabled={internalIsDisabled}>\n                        <StyledFileInputContainer\n                            onClick={() => void handleFileSelectionClick()}\n                            onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n                            onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n                        >\n                            <Icon icons={fileSelectionIcons} />\n                            <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n                        </StyledFileInputContainer>\n                        {imageSelectPlaceholder && (\n                            <StyledFileInputContainer\n                                $isImageSelection\n                                onClick={() => void handleImageSelectionClick()}\n                            >\n                                <Icon icons={imageSelectIcons} />\n                                <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n                            </StyledFileInputContainer>\n                        )}\n                    </StyledFileInputWrapper>\n                    <List>\n                        <AnimatePresence initial={false}>{content}</AnimatePresence>\n                    </List>\n                    {uploadedFiles.length > 0 && (\n                        <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n                            <List>\n                                <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n                            </List>\n                        </StyledUploadedFilesList>\n                    )}\n                </StyledFileInput>\n            ),\n            [\n                internalIsDisabled,\n                fileSelectionIcons,\n                fileSelectionPlaceholder,\n                imageSelectPlaceholder,\n                imageSelectIcons,\n                content,\n                uploadedFiles,\n                handleFileSelectionClick,\n                handleDrop,\n                handleImageSelectionClick,\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","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","type","size","mimeType","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\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        },\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(({ type, name, size }) => ({\n                id: name,\n                name,\n                size,\n                mimeType: type,\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                });\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 files={filesToDisplay} onRemove={handleDeleteFile} />\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            ],\n        );\n    },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,40 +1,28 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 export const StyledFileInput = styled.div``;
 export const StyledFileInputWrapper = styled.div`
     display: flex;
 
-    cursor: ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return $isDisabled ? 'default' : 'pointer';
-}};
-    opacity: ${_ref2 => {
-  let {
-    $isDisabled
-  } = _ref2;
-  return $isDisabled ? 0.5 : 1;
-}};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
 `;
 export const StyledUploadedFilesList = styled.div`
-    ${_ref3 => {
-  let {
-    $shouldShowBorder,
-    theme
-  } = _ref3;
-  return $shouldShowBorder && css`
+    ${({
+  $shouldShowBorder,
+  theme
+}) => $shouldShowBorder && css`
             border-top: 1px solid ${theme.headline};
-        `;
-}}
+        `}
 `;
 export const StyledFileInputContainer = styled.div`
-    border: ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.text;
-}} 1px dotted;
+    border: ${({
+  theme
+}) => theme.text} 1px dotted;
     display: flex;
     gap: 10px;
     align-items: center;
@@ -42,22 +30,16 @@ export const StyledFileInputContainer = styled.div`
     justify-content: center;
     width: 100%;
 
-    ${_ref5 => {
-  let {
-    $isImageSelection
-  } = _ref5;
-  return $isImageSelection && css`
+    ${({
+  $isImageSelection
+}) => $isImageSelection && css`
             border-left: none;
-        `;
-}}
+        `}
 `;
 export const StyledFileInputText = styled.p`
-    color: ${_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
 `;
 export const StyledMotionFileInputList = styled(motion.div)``;
 //# sourceMappingURL=FileInput.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.styles.js","names":["motion","styled","css","StyledFileInput","div","StyledFileInputWrapper","_ref","$isDisabled","_ref2","StyledUploadedFilesList","_ref3","$shouldShowBorder","theme","headline","StyledFileInputContainer","_ref4","text","_ref5","$isImageSelection","StyledFileInputText","p","_ref6","StyledMotionFileInputList"],"sources":["../../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledFileInputWrapper = styled.div<StyledFileInputWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileInputContainerProps = 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 StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n    border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\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 StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n    color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAM3C,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,GAAgC;AAC7E;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACxE,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D,CAAC;AAQD,OAAO,MAAME,uBAAuB,GAAGR,MAAM,CAACG,GAAiC;AAC/E,MAAMM,KAAA;EAAA,IAAC;IAAEC,iBAAiB;IAAEC;EAAoC,CAAC,GAAAF,KAAA;EAAA,OACzDC,iBAAiB,IACjBT,GAAG;AACX,oCAAoCU,KAAK,CAACC,QAAQ;AAClD,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGb,MAAM,CAACG,GAAkC;AACjF,cAAcW,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OACpBC,iBAAiB,IACjBhB,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMiB,mBAAmB,GAAGlB,MAAM,CAACmB,CAA2B;AACrE,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAgC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACI,IAAI;AAAA;AAChE,CAAC;AAED,OAAO,MAAMM,yBAAyB,GAAGrB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB,EAAE","ignoreList":[]}
+{"version":3,"file":"FileInput.styles.js","names":["motion","styled","css","StyledFileInput","div","StyledFileInputWrapper","$isDisabled","StyledUploadedFilesList","$shouldShowBorder","theme","headline","StyledFileInputContainer","text","$isImageSelection","StyledFileInputText","p","StyledMotionFileInputList"],"sources":["../../../../src/components/file-input/FileInput.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 StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledFileInputWrapper = styled.div<StyledFileInputWrapperProps>`\n    display: flex;\n\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileInputContainerProps = 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 StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n    border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\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 StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n    color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAM3C,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,GAAgC;AAC7E;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,wBAAwB,GAAGV,MAAM,CAACG,GAAkC;AACjF,cAAc,CAAC;EAAEK;AAAqC,CAAC,KAAKA,KAAK,CAACG,IAAI;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,IACjBX,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMY,mBAAmB,GAAGb,MAAM,CAACc,CAA2B;AACrE,aAAa,CAAC;EAAEN;AAAgC,CAAC,KAAKA,KAAK,CAACG,IAAI;AAChE,CAAC;AAED,OAAO,MAAMI,yBAAyB,GAAGf,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC,EAAE","ignoreList":[]}

package/lib/esm/components/file-list/FileList.js

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import List from '../list/List';
+import { StyledFileList } from './FileList.styles';
+import FileItem from './file-item/FileItem';
+const FileList = ({
+  files,
+  onRemove
+}) => {
+  const content = useMemo(() => files?.map(({
+    mimeType,
+    size,
+    name,
+    id
+  }) => /*#__PURE__*/React.createElement(FileItem, {
+    key: id,
+    id: id,
+    name: name,
+    size: size,
+    mimeType: mimeType,
+    onRemove: onRemove
+  })), [files, onRemove]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileList, null, /*#__PURE__*/React.createElement(List, null, content)), [content]);
+};
+FileList.displayName = 'FileList';
+export default FileList;
+//# sourceMappingURL=FileList.js.map

package/lib/esm/components/file-list/FileList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.js","names":["React","useMemo","List","StyledFileList","FileItem","FileList","files","onRemove","content","map","mimeType","size","name","id","createElement","key","displayName"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n    id: string;\n    name: string;\n    size?: number;\n    mimeType: string;\n}\n\nexport type FileListProps = {\n    /**\n     * Already uploaded files to display.\n     */\n    files?: IFileItem[];\n    /**\n     * A function to be executed when a file is removed.\n     */\n    onRemove?: (id: IFileItem['id']) => void;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove }) => {\n    const content = useMemo(\n        () =>\n            files?.map(({ mimeType, size, name, id }) => (\n                <FileItem\n                    key={id}\n                    id={id}\n                    name={name}\n                    size={size}\n                    mimeType={mimeType}\n                    onRemove={onRemove}\n                />\n            )),\n        [files, onRemove],\n    );\n\n    return useMemo(\n        () => (\n            <StyledFileList>\n                <List>{content}</List>\n            </StyledFileList>\n        ),\n        [content],\n    );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,QAAQ,MAAM,sBAAsB;AAoB3C,MAAMC,QAA2B,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAK;EACzD,MAAMC,OAAO,GAAGP,OAAO,CACnB,MACIK,KAAK,EAAEG,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAG,CAAC,kBACpCb,KAAA,CAAAc,aAAA,CAACV,QAAQ;IACLW,GAAG,EAAEF,EAAG;IACRA,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBH,QAAQ,EAAEA;EAAS,CACtB,CACJ,CAAC,EACN,CAACD,KAAK,EAAEC,QAAQ,CACpB,CAAC;EAED,OAAON,OAAO,CACV,mBACID,KAAA,CAAAc,aAAA,CAACX,cAAc,qBACXH,KAAA,CAAAc,aAAA,CAACZ,IAAI,QAAEM,OAAc,CACT,CACnB,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDH,QAAQ,CAACW,WAAW,GAAG,UAAU;AAEjC,eAAeX,QAAQ","ignoreList":[]}

package/lib/esm/components/file-list/FileList.styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+export const StyledFileList = styled.div``;
+//# sourceMappingURL=FileList.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.styles.js","names":["styled","StyledFileList","div"],"sources":["../../../../src/components/file-list/FileList.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileList = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,EAAE","ignoreList":[]}

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

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react';
+import { getHumanSize, getIconByMimeType } from '../../../utils/file';
+import Icon from '../../icon/Icon';
+import ListItem from '../../list/list-item/ListItem';
+import { StyledFileItem } from './FileItem.styles';
+const FileItem = ({
+  mimeType,
+  onRemove,
+  size,
+  name,
+  id
+}) => {
+  const humanFileSize = useMemo(() => {
+    if (typeof size === 'number') {
+      return getHumanSize(size);
+    }
+    return undefined;
+  }, [size]);
+  const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(ListItem, {
+    title: name,
+    subtitle: humanFileSize,
+    icons: [icon],
+    rightElements: typeof onRemove === 'function' ? /*#__PURE__*/React.createElement(Icon, {
+      icons: ['ts-wrong'],
+      onClick: () => onRemove(id)
+    }) : undefined
+  })), [humanFileSize, icon, id, name, onRemove]);
+};
+FileItem.displayName = 'FileList';
+export default FileItem;
+//# sourceMappingURL=FileItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.js","names":["React","useMemo","getHumanSize","getIconByMimeType","Icon","ListItem","StyledFileItem","FileItem","mimeType","onRemove","size","name","id","humanFileSize","undefined","icon","createElement","title","subtitle","icons","rightElements","onClick","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport { StyledFileItem } from './FileItem.styles';\n\nexport type FileItemProps = IFileItem & {\n    onRemove?: (name: string) => void;\n};\n\nconst FileItem: FC<FileItemProps> = ({ mimeType, onRemove, size, name, id }) => {\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    return useMemo(\n        () => (\n            <StyledFileItem>\n                <ListItem\n                    title={name}\n                    subtitle={humanFileSize}\n                    icons={[icon]}\n                    rightElements={\n                        typeof onRemove === 'function' ? (\n                            <Icon icons={['ts-wrong']} onClick={() => onRemove(id)} />\n                        ) : undefined\n                    }\n                />\n            </StyledFileItem>\n        ),\n        [humanFileSize, icon, id, name, onRemove],\n    );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,qBAAqB;AACrE,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,QAAQ,MAAM,+BAA+B;AAEpD,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,MAAMC,QAA2B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAG,CAAC,KAAK;EAC5E,MAAMC,aAAa,GAAGZ,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOS,IAAI,KAAK,QAAQ,EAAE;MAC1B,OAAOR,YAAY,CAACQ,IAAI,CAAC;IAC7B;IAEA,OAAOI,SAAS;EACpB,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;EAEV,MAAMK,IAAI,GAAGd,OAAO,CAAC,MAAME,iBAAiB,CAACK,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEnE,OAAOP,OAAO,CACV,mBACID,KAAA,CAAAgB,aAAA,CAACV,cAAc,qBACXN,KAAA,CAAAgB,aAAA,CAACX,QAAQ;IACLY,KAAK,EAAEN,IAAK;IACZO,QAAQ,EAAEL,aAAc;IACxBM,KAAK,EAAE,CAACJ,IAAI,CAAE;IACdK,aAAa,EACT,OAAOX,QAAQ,KAAK,UAAU,gBAC1BT,KAAA,CAAAgB,aAAA,CAACZ,IAAI;MAACe,KAAK,EAAE,CAAC,UAAU,CAAE;MAACE,OAAO,EAAEA,CAAA,KAAMZ,QAAQ,CAACG,EAAE;IAAE,CAAE,CAAC,GAC1DE;EACP,CACJ,CACW,CACnB,EACD,CAACD,aAAa,EAAEE,IAAI,EAAEH,EAAE,EAAED,IAAI,EAAEF,QAAQ,CAC5C,CAAC;AACL,CAAC;AAEDF,QAAQ,CAACe,WAAW,GAAG,UAAU;AAEjC,eAAef,QAAQ","ignoreList":[]}

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

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+export const StyledFileItem = styled.div``;
+//# sourceMappingURL=FileItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.styles.js","names":["styled","StyledFileItem","div"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFileItem = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,EAAE","ignoreList":[]}