npm - @react-magma/dropzone - Versions diffs - 2.0.0 → 2.0.1-next.1 - Mend

@react-magma/dropzone 2.0.0 → 2.0.1-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/fileuploader.js.map +1 -1
package/dist/fileuploader.modern.js.map +1 -1
package/dist/fileuploader.modern.module.js.map +1 -1
package/dist/fileuploader.umd.js.map +1 -1
package/dist/src/components/dropzone/Dropzone.stories.d.ts +2 -2
package/package.json +5 -5
package/src/components/dropzone/Dropzone.stories.tsx +4 -2
package/src/components/dropzone/Dropzone.test.js +11 -25
package/src/components/dropzone/Dropzone.tsx +2 -0
package/src/components/dropzone/Preview.tsx +1 -0
package/src/components/dropzone/utils.ts +14 -8

package/dist/fileuploader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileuploader.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number \| undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","header","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
1	+ {"version":3,"file":"fileuploader.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (\n bytes: number \| undefined,\n decimalPoint: number = 2,\n bytesLabel: string = 'Bytes'\n) => {\n if (bytes === undefined) return;\n if (bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024;\n const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return (\n parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]\n );\n};\n","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n // eslint-disable-next-line complexity\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/ eslint-disable no-empty-pattern /\n/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","header","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}

package/dist/fileuploader.modern.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileuploader.modern.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number \| undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","actions","setActions","useState","CloseIcon","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","_ref","code","header","message","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","formatError","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","Dropzone","containerStyle","disabled","dropzoneOptions","multiple","helperMessage","id","defaultId","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","getInputProps","getRootProps","isDragAccept","isDragActive","isDragReject","open","useDropzone","noClick","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
1	+ {"version":3,"file":"fileuploader.modern.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (\n bytes: number \| undefined,\n decimalPoint: number = 2,\n bytesLabel: string = 'Bytes'\n) => {\n if (bytes === undefined) return;\n if (bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024;\n const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return (\n parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]\n );\n};\n","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n // eslint-disable-next-line complexity\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/ eslint-disable no-empty-pattern /\n/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","actions","setActions","useState","CloseIcon","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","_ref","code","header","message","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","formatError","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","Dropzone","containerStyle","disabled","dropzoneOptions","multiple","helperMessage","id","defaultId","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","getInputProps","getRootProps","isDragAccept","isDragActive","isDragReject","open","useDropzone","noClick","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}

package/dist/fileuploader.modern.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileuploader.modern.module.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number \| undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","header","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","Dropzone","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
1	+ {"version":3,"file":"fileuploader.modern.module.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (\n bytes: number \| undefined,\n decimalPoint: number = 2,\n bytesLabel: string = 'Bytes'\n) => {\n if (bytes === undefined) return;\n if (bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024;\n const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return (\n parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]\n );\n};\n","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n // eslint-disable-next-line complexity\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/ eslint-disable no-empty-pattern /\n/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","header","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","Dropzone","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}

package/dist/fileuploader.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileuploader.umd.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (bytes: number \| undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {\n if(bytes === undefined) return;\n if(bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024,\n sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];\n}","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","header","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}
1	+ {"version":3,"file":"fileuploader.umd.js","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\nimport {\n InsertDriveFileIcon,\n ImageIcon,\n AudiotrackIcon,\n VideocamIcon,\n FileExcelIcon,\n FilePdfIcon,\n FilePowerpointIcon,\n FileWordIcon,\n FileZipIcon,\n IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\nimport { magma } from 'react-magma-dom';\n\nexport interface FileIconProps extends IconProps {\n file: FilePreview;\n isInverse?: boolean;\n}\n\nconst icons = {\n default: {\n Icon: InsertDriveFileIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n word: {\n Icon: FileWordIcon,\n style: {\n color: magma.colors.info500,\n },\n },\n excel: {\n Icon: FileExcelIcon,\n style: {\n color: magma.colors.success500,\n },\n },\n powerpoint: {\n Icon: FilePowerpointIcon,\n style: {\n color: magma.colors.warning500,\n },\n },\n pdf: {\n Icon: FilePdfIcon,\n style: {\n color: magma.colors.danger500,\n },\n },\n image: {\n Icon: ImageIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n video: {\n Icon: VideocamIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n audio: {\n Icon: AudiotrackIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n archive: {\n Icon: FileZipIcon,\n style: {\n color: magma.colors.neutral500,\n },\n },\n};\n\nconst iconMapping: {\n [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n default: icons.default,\n xlsx: icons.excel,\n xlsm: icons.excel,\n xlsb: icons.excel,\n xltx: icons.excel,\n xls: icons.excel,\n xlt: icons.excel,\n doc: icons.word,\n docx: icons.word,\n docm: icons.word,\n dotx: icons.word,\n dotm: icons.word,\n docb: icons.word,\n pptx: icons.powerpoint,\n pptm: icons.powerpoint,\n ppt: icons.powerpoint,\n pdf: icons.pdf,\n png: icons.image,\n svg: icons.image,\n image: icons.image,\n audio: icons.audio,\n video: icons.video,\n zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n const { path = '', type = '' } = file;\n const category = type.split('/')[0];\n const extension = path.split('.').pop() \|\| 'default';\n const { Icon, style } =\n iconMapping[extension] \|\| iconMapping[category] \|\| iconMapping.default;\n\n return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (\n bytes: number \| undefined,\n decimalPoint: number = 2,\n bytesLabel: string = 'Bytes'\n) => {\n if (bytes === undefined) return;\n if (bytes == 0) return `0 ${bytesLabel}`;\n const k = 1024;\n const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return (\n parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]\n );\n};\n","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n CheckCircleIcon,\n CloseIcon,\n DeleteIcon,\n ErrorIcon,\n} from 'react-magma-icons';\n\nimport {\n ButtonColor,\n ButtonVariant,\n Card,\n Flex,\n FlexAlignItems,\n FlexBehavior,\n FlexProps,\n I18nContext,\n I18nInterface,\n IconButton,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n Transition,\n Spinner,\n styled,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n accept?: string \| string[];\n file: FilePreview;\n isInverse?: boolean;\n maxSize?: number;\n minSize?: number;\n onDeleteFile?: (file: FilePreview) => void;\n onRemoveFile?: (file: FilePreview) => void;\n /*\n @internal\n /\n testId?: string;\n thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n background-image: ${({ file }) =>\n `url('${'preview' in file && file.preview}')`};\n background-repeat: no-repeat;\n background-size: cover;\n display: inline-block;\n vertical-align: middle;\n height: 40px;\n width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n display: grid;\n grid-template-areas: 'inner-div';\n height: auto;\n place-items: center;\n width: 46px;\n & > div {\n display: inline-block;\n right: 0;\n grid-area: inner-div;\n }\n`;\n\nconst IconStyles = {\n marginRight: '12px',\n display: 'flex',\n};\n\nconst Errors = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n padding: 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n height: 56px;\n padding: 0 8px 0 16px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n overflow: hidden;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n display: block;\n margin-right: 24px;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n background-color: none;\n border-color: ${({ file, theme, isInverse }) =>\n file.errors\n ? isInverse\n ? theme.colors.danger200\n : theme.colors.danger\n : theme.colors.neutral300};\n border-width: 1px;\n margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n display: block;\n\n > div {\n display: flex;\n align-self: center;\n margin-right: 12px;\n }\n`;\n\nconst ErrorMessage = styled.span`\n display: block;\n`;\n\nconst formatError = (\n error: { header?: string; message: string; code: string },\n constraints: {\n maxSize?: number;\n minSize?: number;\n accept?: string \| string[];\n },\n byteLabel: string\n) => {\n const accept =\n Array.isArray(constraints.accept) && constraints.accept.length === 1\n ? constraints.accept[0]\n : constraints.accept;\n const messageSuffix = Array.isArray(accept)\n ? `one of ${accept.join(', ')}`\n : accept;\n switch (error.code) {\n case 'file-too-large':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.maxSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-too-small':\n return {\n ...error,\n message: `${error.message} ${formatFileSize(\n constraints.minSize,\n 2,\n byteLabel\n )}.`,\n };\n case 'file-invalid-type':\n return { ...error, message: `${error.message}: ${messageSuffix}` };\n default:\n return error;\n }\n};\n\nexport const Preview = forwardRef<HTMLDivElement, PreviewProps>(\n // eslint-disable-next-line complexity\n (props, ref) => {\n const {\n accept,\n file,\n isInverse: isInverseProp,\n maxSize,\n minSize,\n onDeleteFile,\n onRemoveFile,\n testId,\n thumbnails,\n ...rest\n } = props;\n\n const theme: ThemeInterface = useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const isInverse = useIsInverse(isInverseProp);\n const [actions, setActions] = useState(<CloseIcon />);\n\n const handleRemoveFile = () => {\n onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n };\n\n const handleDeleteFile = () => {\n onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n };\n\n const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n const [done, setDone] = useState<boolean>(false);\n\n useEffect(() => {\n let mounted = true;\n setTimeout(() => {\n if (mounted) {\n setDone(true);\n }\n }, 1000);\n return () => {\n mounted = false;\n };\n }, [status]);\n\n if (status === 'error' \|\| status === 'ready') {\n return (\n <StatusIcons>\n <IconButton\n onClick={handleRemoveFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.removeFile}\n icon={<CloseIcon />}\n />\n </StatusIcons>\n );\n }\n\n if (status === 'pending') {\n return (\n <StatusIcons>\n <Spinner\n color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n />\n </StatusIcons>\n );\n }\n\n return (\n <StatusIcons>\n <Transition isOpen={!done} unmountOnExit fade>\n <CheckCircleIcon\n color={isInverse ? theme.colors.success200 : theme.colors.success}\n style={{ marginTop: '4px' }}\n />\n </Transition>\n <Transition isOpen={done} unmountOnExit fade>\n <IconButton\n onClick={handleDeleteFile}\n variant={ButtonVariant.link}\n color={ButtonColor.secondary}\n aria-label={i18n.dropzone.deleteFile}\n icon={<DeleteIcon />}\n />\n </Transition>\n </StatusIcons>\n );\n };\n\n useEffect(() => {\n setActions(<FinishedActions status={file?.processor?.status} />);\n }, [file?.processor?.status]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <StyledCard\n isInverse={isInverse}\n theme={theme}\n file={file}\n data-testid={props.testId}\n ref={ref}\n role={file.errors ? 'alert' : ''}\n >\n <StyledFlex\n theme={theme}\n behavior={FlexBehavior.container}\n alignItems={FlexAlignItems.center}\n {...rest}\n >\n <Flex\n behavior={FlexBehavior.item}\n alignItems={FlexAlignItems.center}\n style={IconStyles}\n >\n {file.errors ? (\n <ErrorIcon\n color={\n isInverse ? theme.colors.danger200 : theme.colors.danger\n }\n size={24}\n />\n ) : file.preview &&\n thumbnails &&\n file.type &&\n file.type.startsWith('image') ? (\n <Thumb role=\"img\" file={file} />\n ) : (\n <FileIcon isInverse={isInverse} file={file} />\n )}\n </Flex>\n <FileName xs behavior={FlexBehavior.item} theme={theme}>\n {file.name}\n </FileName>\n {file.processor && file.processor.status === 'pending' && (\n <Flex\n role=\"progressbar\"\n style={{ marginLeft: 'auto' }}\n behavior={FlexBehavior.item}\n >\n {file.processor.percent}\n </Flex>\n )}\n <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n </StyledFlex>\n {file.errors && (\n <Errors theme={theme}>\n {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n const { header = '', message } = formatError(\n { code, ...rest, ...i18n.dropzone.errors[code] },\n { accept, minSize, maxSize },\n i18n.dropzone.bytes\n );\n return (\n <React.Fragment key={code}>\n <ErrorHeader\n style={{\n color: isInverse\n ? theme.colors.danger200\n : theme.colors.danger,\n }}\n >\n {header}\n </ErrorHeader>\n <ErrorMessage>{message}</ErrorMessage>\n </React.Fragment>\n );\n })}\n </Errors>\n )}\n </StyledCard>\n </InverseContext.Provider>\n );\n }\n);\n","/ eslint-disable no-empty-pattern /\n/\n HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n /\n\nimport React from 'react';\nimport {\n useDropzone,\n DropzoneOptions,\n DropzoneRootProps,\n FileRejection,\n} from 'react-dropzone';\nimport {\n Button,\n ButtonColor,\n ButtonVariant,\n Flex,\n FlexBehavior,\n FlexProps,\n FormFieldContainer,\n FormFieldContainerBaseProps,\n I18nContext,\n I18nInterface,\n InverseContext,\n ThemeContext,\n ThemeInterface,\n styled,\n useGenerateId,\n useIsInverse,\n} from 'react-magma-dom';\n\nimport { CloudUploadIcon } from 'react-magma-icons';\nimport { Preview } from './Preview';\nimport { FilePreview, FileError } from './FilePreview';\nimport { transparentize } from 'polished';\n\nexport interface OnSendFileProps {\n file: FilePreview;\n onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n onFinish?: ({}: { file: FilePreview }) => void;\n onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n \| 'error'\n \| 'dragAccept'\n \| 'dragReject'\n \| 'dragActive'\n \| 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n extends Omit<FormFieldContainerBaseProps, 'fieldId' \| 'errorMessage'> {\n /\n Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n /\n accept?: string \| string[];\n /\n Enable/Disable the input\n /\n disabled?: boolean;\n /\n Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n /\n dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n /\n Content of the helper message.\n /\n helperMessage?: string;\n /\n @internal\n /\n id?: string;\n /\n Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n * @default 0\n /\n maxFiles?: number;\n /\n Minimum accepted number of files.\n /\n minFiles?: number;\n /\n Maximum file size (in bytes)\n * @default Infinity\n /\n maxSize?: number;\n /\n Minimum file size (in bytes)\n * @default 0\n /\n minSize?: number;\n /\n Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n * @default true\n /\n multiple?: boolean;\n /\n If true, disables drag 'n' drop\n * @default false\n /\n noDrag?: boolean;\n /\n Callback for when a file is deleted\n /\n onDeleteFile?: (file: FilePreview) => void;\n /\n Callback for when a file is deleted\n /\n onRemoveFile?: (file: FilePreview) => void;\n /\n Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n /\n onSendFile?: (props: OnSendFileProps) => void;\n /\n Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n * @default false\n /\n sendFiles?: boolean;\n /\n @internal\n /\n testId?: string;\n /\n Show thumbnails for images in lieu of the file icon.\n * @default true\n */\n thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n DropzoneRootProps &\n FlexProps & {\n dragState?: DragState;\n noDrag?: boolean;\n isInverse?: boolean;\n }\n>`\n flex-direction: column;\n align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n noDrag\n ? `0px`\n : dragState === 'dragReject' \|\| dragState === 'error'\n ? isInverse\n ? `1px dashed ${theme.colors.danger200}`\n : `1px dashed ${theme.colors.danger}`\n : dragState === 'dragActive'\n ? `1px dashed ${theme.colors.primary}`\n : dragState === 'dragAccept'\n ? `1px dashed ${theme.colors.success}`\n : `1px dashed ${theme.colors.neutral400}`};\n\n border-style: ${({ dragState = 'default' }) =>\n dragState === 'error' ? 'solid' : 'dashed'};\n background-color: ${({ theme, noDrag, isInverse }) =>\n noDrag\n ? 'transparent'\n : isInverse\n ? transparentize(0.75, theme.colors.neutral900)\n : theme.colors.neutral200};\n outline: none;\n transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n display: block;\n font-size: 14px;\n margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n color: ${({ theme, isInverse }) =>\n isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n margin: 0 0 24px 0;\n font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n font-weight: 500;\n padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n (props, ref) => {\n const {\n accept,\n containerStyle,\n disabled,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n dropzoneOptions = {\n multiple: true,\n },\n helperMessage,\n id: defaultId,\n inputSize,\n isInverse: isInverseProp,\n isLabelVisuallyHidden,\n labelStyle,\n labelText,\n maxFiles,\n minFiles,\n maxSize,\n minSize,\n multiple = true,\n noDrag = false,\n onSendFile,\n onDeleteFile,\n onRemoveFile,\n sendFiles = false,\n testId,\n thumbnails = true,\n ...rest\n } = props;\n\n const [files, setFiles] = React.useState<FilePreview[]>([]);\n const [errorMessage, setErrorMessage] = React.useState<string \| null>(null);\n\n const isInverse = useIsInverse(isInverseProp);\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n const id = useGenerateId(defaultId);\n\n const onDrop = React.useCallback(\n (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n setFiles((files: FilePreview[]) => [\n ...files,\n ...acceptedFiles.map((file: FilePreview) =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n ),\n ...rejectedFiles.map(\n ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n Object.assign(file, {\n errors,\n })\n ),\n ]);\n },\n []\n );\n\n const {\n getInputProps,\n getRootProps,\n isDragAccept,\n isDragActive,\n isDragReject,\n open,\n } = useDropzone({\n noClick: true,\n disabled,\n multiple,\n maxSize,\n minSize,\n accept,\n onDrop,\n noDrag,\n });\n\n const dragState: DragState = errorMessage\n ? 'error'\n : isDragAccept\n ? 'dragAccept'\n : isDragReject\n ? 'dragReject'\n : isDragActive\n ? 'dragActive'\n : 'default';\n\n const handleRemoveFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onRemoveFile &&\n typeof onRemoveFile === 'function' &&\n onRemoveFile(removedFile);\n };\n\n const handleDeleteFile = (removedFile: FilePreview) => {\n setFiles(files => files.filter(file => file !== removedFile));\n onDeleteFile &&\n typeof onDeleteFile === 'function' &&\n onDeleteFile(removedFile);\n };\n\n const setProgress = (props: { percent: number; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: `${props.percent}%`,\n status: 'pending',\n },\n })\n : file\n )\n );\n };\n\n const setFinished = (props: { file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n processor: {\n ...file.processor,\n percent: '',\n status: 'finished',\n },\n })\n : file\n )\n );\n };\n\n const setError = (props: { errors: FileError[]; file: FilePreview }) => {\n setFiles(files =>\n files.map(file =>\n file === props.file\n ? Object.assign(file, {\n errors: props.errors,\n processor: { ...file.processor, status: 'error' },\n })\n : file\n )\n );\n };\n\n const formatError = (\n code: string \| null,\n constraints: { maxFiles?: number; minFiles?: number }\n ) => {\n if (code === null) return null;\n const error = i18n.dropzone.errors[code];\n switch (code) {\n case 'too-many-files':\n return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n case 'too-few-files':\n return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n default:\n return error.message;\n }\n };\n\n React.useEffect(\n () => () => {\n files.forEach(\n file => file.preview && URL.revokeObjectURL(file.preview)\n );\n },\n [files]\n );\n\n React.useEffect(() => {\n const minFileError = minFiles && files.length < minFiles;\n const maxFileError = maxFiles && files.length > maxFiles;\n\n setErrorMessage(\n formatError(\n maxFileError\n ? 'too-many-files'\n : minFileError\n ? 'too-few-files'\n : null,\n { minFiles, maxFiles }\n )\n );\n\n if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n setFiles((files: FilePreview[]) => {\n return files.map((file: FilePreview) => {\n !file.errors &&\n !file.processor &&\n onSendFile &&\n onSendFile({\n file,\n onError: setError,\n onFinish: setFinished,\n onProgress: setProgress,\n });\n return file;\n });\n });\n }\n }, [sendFiles, files.length, onSendFile]);\n\n return (\n <InverseContext.Provider value={{ isInverse }}>\n <FormFieldContainer\n actionable={false}\n containerStyle={containerStyle}\n errorMessage={errorMessage}\n fieldId={id}\n inputSize={inputSize}\n isInverse={isInverse}\n isLabelVisuallyHidden={isLabelVisuallyHidden}\n labelStyle={labelStyle}\n labelText={labelText}\n messageStyle={{ minHeight: 0 }}\n data-testid={testId}\n >\n <HelperMessage theme={theme} isInverse={isInverse}>\n {helperMessage}\n </HelperMessage>\n <Container\n behavior={FlexBehavior.container}\n dragState={dragState}\n isInverse={isInverse}\n noDrag={noDrag}\n theme={theme}\n {...getRootProps()}\n {...rest}\n testId={testId}\n tabIndex={-1}\n >\n <input ref={ref} {...getInputProps({ id })} />\n {noDrag ? (\n <Flex xs behavior={FlexBehavior.item}>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n ) : (\n <Flex behavior={FlexBehavior.item}>\n <CloudUploadIcon\n aria-hidden=\"true\"\n color={\n isInverse\n ? theme.colors.neutral100\n : theme.colors.neutral500\n }\n size={48}\n />\n <Wrapper isInverse={isInverse} theme={theme}>\n {i18n.dropzone.dragMessage}\n </Wrapper>\n <Button\n color={ButtonColor.primary}\n disabled={disabled}\n isInverse={isInverse}\n onClick={open}\n style={{ margin: 0 }}\n variant={ButtonVariant.solid}\n >\n {i18n.dropzone.browseFiles}\n </Button>\n </Flex>\n )}\n </Container>\n </FormFieldContainer>\n {files.map((file: FilePreview) => (\n <Preview\n accept={accept}\n file={file}\n isInverse={isInverse}\n key={file.name}\n maxSize={maxSize}\n minSize={minSize}\n onDeleteFile={handleDeleteFile}\n onRemoveFile={handleRemoveFile}\n thumbnails={thumbnails}\n />\n ))}\n </InverseContext.Provider>\n );\n }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger200","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","useState","CloseIcon","actions","setActions","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","processor","_file$processor","_file$processor2","InverseContext","Provider","value","testId","role","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","name","marginLeft","percent","slice","map","code","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","message","formatError","header","Fragment","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","containerStyle","disabled","helperMessage","defaultId","id","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","multiple","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","useGenerateId","onDrop","useCallback","acceptedFiles","rejectedFiles","Object","assign","URL","createObjectURL","useDropzone","noClick","getInputProps","getRootProps","open","isDragAccept","isDragReject","isDragActive","removedFile","filter","setProgress","setFinished","setError","forEach","revokeObjectURL","minFileError","maxFileError","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid"],"mappings":"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"}

package/dist/src/components/dropzone/Dropzone.stories.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { DropzoneProps } from './Dropzone';
+import React from 'react';
 declare const _default: {
-    component: import("react").ForwardRefExoticComponent<DropzoneProps & import("react").RefAttributes<HTMLInputElement>>;
+    component: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLInputElement>>;
     title: string;
     argTypes: {
         noDrag: {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/dropzone",
-  "version": "2.0.0",
+  "version": "2.0.1-next.1",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@emotion/styled": "^10.0.27",
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
     "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0",
-    "react-magma-dom": "^3.2.0-next.0",
-    "react-magma-icons": "^2.3.4"
+    "react-magma-dom": "^3.2.1-next.0",
+    "react-magma-icons": "2.3.6"
   },
   "dependencies": {
     "polished": "^3.2.0",
@@ -42,7 +42,7 @@
     "@emotion/styled": "^10.0.27",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
-    "react-magma-dom": "^3.2.0",
-    "react-magma-icons": "^2.3.4"
+    "react-magma-dom": "^3.2.1-next.5",
+    "react-magma-icons": "2.3.6"
   }
 }

package/src/components/dropzone/Dropzone.stories.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Dropzone, DropzoneProps, OnSendFileProps } from './Dropzone';
 import { Textarea, Datagrid, magma } from 'react-magma-dom';
+import React from 'react';
 function csvJSON(csv: string) {
   const lines = csv.split('\n');
@@ -28,7 +29,7 @@ function csvJSON(csv: string) {
 }
 const onSendFile = (props: OnSendFileProps) => {
-  const { onProgress, onError, onFinish, file } = props;
+  const { onProgress, onFinish, file } = props;
   let percent: number = 1;
   const interval = setInterval(() => {
@@ -47,6 +48,7 @@ const onSendFile = (props: OnSendFileProps) => {
   }, 100 * Math.random());
 };
+/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
 export default {
   component: Dropzone,
   title: 'Dropzone',
@@ -156,7 +158,7 @@ export const Image = (args: DropzoneProps) => {
         sendFiles
         onDeleteFile={onDeleteFile}
       />
-      {file && <img src={file} />}
+      {file && <img src={file} alt="" />}
     </div>
   );
 };

package/src/components/dropzone/Dropzone.test.js CHANGED Viewed

@@ -11,8 +11,6 @@ import {
 import { I18nContext, defaultI18n, magma } from 'react-magma-dom';
 import userEvent from '@testing-library/user-event';
-const TEXT = 'Test Text';
 describe('File Uploader', () => {
   let files;
   let images;
@@ -35,7 +33,7 @@ describe('File Uploader', () => {
   });
   it('should render the file uploader component', () => {
-    const { container, getByText } = render(<Dropzone />);
+    const { getByText } = render(<Dropzone />);
     expect(getByText('Browse Files')).toBeInTheDocument();
@@ -45,7 +43,7 @@ describe('File Uploader', () => {
   });
   it('should render the file uploader component without drag', () => {
-    const { container, queryByText } = render(<Dropzone noDrag />);
+    const { queryByText } = render(<Dropzone noDrag />);
     expect(queryByText('Browse Files')).toBeInTheDocument();
     expect(
@@ -116,18 +114,6 @@ describe('File Uploader', () => {
     expect(dropEvtPreventDefaultSpy).toHaveBeenCalled();
   });
-  it('allows adding files via drop', () => {
-    const { container } = render(<Dropzone />);
-    const dropzone = container.querySelector('div');
-    const dropEvt = new Event('drop', { bubbles: true });
-    const dropEvtPreventDefaultSpy = jest.spyOn(dropEvt, 'preventDefault');
-    fireEvent(dropzone, dropEvt);
-    expect(dropEvtPreventDefaultSpy).toHaveBeenCalled();
-  });
   it('border color changes for success', async () => {
     const data = createDtWithFiles(files);
     const testId = 'testId';
@@ -398,7 +384,7 @@ describe('File Uploader', () => {
     const ui = <Dropzone minSize={10000} testId={testId} />;
-    const { getByTestId, getByLabelText, getByText, rerender } = render(ui);
+    const { getByTestId, getByText, rerender } = render(ui);
     const dropzone = getByTestId(testId);
     fireDrop(dropzone, data);
@@ -524,7 +510,7 @@ describe('File Uploader', () => {
       />
     );
-    const { getByTestId, getByLabelText, getByText, queryByText, rerender } =
+    const { getByTestId, getByLabelText, getByText, rerender } =
       render(ui);
     const dropzone = getByTestId(testId);
@@ -570,7 +556,7 @@ describe('File Uploader', () => {
     const ui = <Dropzone onRemoveFile={onRemoveFileSpy} testId={testId} />;
-    const { getByTestId, getByLabelText, queryByText, rerender } = render(ui);
+    const { getByTestId, getByLabelText, rerender } = render(ui);
     const dropzone = getByTestId(testId);
     fireDrop(dropzone, data);
@@ -608,13 +594,13 @@ function fireDragEnter(node, data) {
   dispatchEvt(node, 'dragenter', data);
 }
-function fireDragOver(node, data) {
-  dispatchEvt(node, 'dragover', data);
-}
+// function fireDragOver(node, data) {
+//   dispatchEvt(node, 'dragover', data);
+// }
-function fireDragLeave(node, data) {
-  dispatchEvt(node, 'dragleave', data);
-}
+// function fireDragLeave(node, data) {
+//   dispatchEvt(node, 'dragleave', data);
+// }
 function fireDrop(node, data) {
   dispatchEvt(node, 'drop', data);

package/src/components/dropzone/Dropzone.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+/* eslint-disable no-empty-pattern */
 /**
  * HELPFUL NOTE!
  * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING
@@ -191,6 +192,7 @@ export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
       accept,
       containerStyle,
       disabled,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       dropzoneOptions = {
         multiple: true,
       },

package/src/components/dropzone/Preview.tsx CHANGED Viewed

@@ -169,6 +169,7 @@ const formatError = (
 };
 export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
+  // eslint-disable-next-line complexity
   (props, ref) => {
     const {
       accept,

package/src/components/dropzone/utils.ts CHANGED Viewed

@@ -1,8 +1,14 @@
-export const formatFileSize = (bytes: number | undefined, decimalPoint:number = 2, bytesLabel: string = 'Bytes') => {
-  if(bytes === undefined) return;
-  if(bytes == 0) return `0 ${bytesLabel}`;
-  const k = 1024,
-      sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-      i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i];
-}
+export const formatFileSize = (
+  bytes: number | undefined,
+  decimalPoint: number = 2,
+  bytesLabel: string = 'Bytes'
+) => {
+  if (bytes === undefined) return;
+  if (bytes == 0) return `0 ${bytesLabel}`;
+  const k = 1024;
+  const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return (
+    parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]
+  );
+};