@react-magma/dropzone 1.0.0 → 1.0.1

package/dist/fileuploader.umd.js.map

@@ -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: '#707070',\n    },\n  },\n  word: {\n    Icon: FileWordIcon,\n    style: {\n      color: '#006298',\n    },\n  },\n  excel: {\n    Icon: FileExcelIcon,\n    style: {\n      color: '#3A8200',\n    },\n  },\n  powerpoint: {\n    Icon: FilePowerpointIcon,\n    style: {\n      color: '#FC4C02',\n    },\n  },\n  pdf: {\n    Icon: FilePdfIcon,\n    style: {\n      color: '#C61D23',\n    },\n  },\n  image: {\n    Icon: ImageIcon,\n    style: {\n      color: '#707070',\n    },\n  },\n  video: {\n    Icon: VideocamIcon,\n    style: {\n      color: '#707070',\n    },\n  },\n  audio: {\n    Icon: AudiotrackIcon,\n    style: {\n      color: '#707070',\n    },\n  },\n  archive: {\n    Icon: FileZipIcon,\n    style: {\n      color: '#707070',\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, {\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} 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  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.neutral06};\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: ${({ isInverse, theme }) =>\n    isInverse ? theme.colors.foundation02 : theme.colors.neutral08};\n  border-color: ${({ file, theme, isInverse }) =>\n    file.errors\n      ? isInverse\n        ? theme.colors.dangerInverse\n        : theme.colors.danger\n      : theme.colors.neutral06};\n  border-width: ${({ file }) => (file.errors ? '2px' : '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(constraints.maxSize, 2, byteLabel)}.`,\n      };\n    case 'file-too-small':\n      return {\n        ...error,\n        message: `${error.message} ${formatFileSize(constraints.minSize, 2, byteLabel)}.`,\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={\n                isInverse ? theme.colors.foundation04 : theme.colors.primary\n              }\n            />\n          </StatusIcons>\n        );\n      }\n\n      return (\n        <StatusIcons>\n          <Transition isOpen={!done} unmountOnExit fade>\n            <CheckCircleIcon\n              color={\n                isInverse ? theme.colors.successInverse : theme.colors.success\n              }\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.dangerInverse : 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' && <Flex role=\"progressbar\" style={{ marginLeft: 'auto' }} behavior={FlexBehavior.item}>\n              {file.processor.percent}\n            </Flex>}\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.dangerInverse\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';\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';\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  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        ? `2px dashed ${theme.colors.dangerInverse}`\n        : `2px dashed ${theme.colors.danger}`\n      : dragState === 'dragActive'\n      ? `2px dashed ${theme.colors.primary}`\n      : dragState === 'dragAccept'\n      ? `2px dashed ${theme.colors.success}`\n      : `2px dashed ${theme.colors.neutral05}`};\n\n  border-style: ${({ dragState = 'default' }) =>\n    dragState === 'error' ? 'solid' : 'dashed'};\n  background-color: ${({ theme, noDrag, isInverse }) =>\n    noDrag\n      ? 'transparent'\n      : isInverse\n      ? theme.colors.foundation\n      : theme.colors.neutral07};\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.neutral08 : theme.colors.neutral03};\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.neutral07 : theme.colors.neutral02};\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: 600;\n  padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\nexport const Dropzone = React.forwardRef<\n  HTMLInputElement,\n  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 && typeof onRemoveFile === 'function' && onRemoveFile(removedFile);\n  };\n\n  const handleDeleteFile = (removedFile: FilePreview) => {\n    setFiles(files => files.filter(file => file !== removedFile));\n    onDeleteFile && typeof onDeleteFile === 'function' && 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: { ...file.processor, percent: '', status: 'finished' },\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(file => file.preview && URL.revokeObjectURL(file.preview));\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 && ! file.processor && onSendFile && 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 ? theme.colors.neutral07 : theme.colors.neutral02\n                }\n                size={48}\n              />\n              <Wrapper isInverse={isInverse} theme={theme}>\n                {i18n.dropzone.dragMessage}\n              </Wrapper>\n              <Button\n                color={ButtonColor.secondary}\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"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","word","FileWordIcon","excel","FileExcelIcon","powerpoint","FilePowerpointIcon","pdf","FilePdfIcon","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","magma","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","colors","neutral06","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","foundation02","neutral08","errors","dangerInverse","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","foundation04","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","successInverse","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","neutral05","foundation","neutral07","HelperMessage","neutral03","Wrapper","neutral02","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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"}
+{"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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"}

package/dist/src/components/dropzone/Dropzone.d.ts

@@ -88,6 +88,9 @@ export interface DropzoneProps extends Omit<FormFieldContainerBaseProps, 'fieldI
      * @default false
      */
     sendFiles?: boolean;
+    /**
+     * @internal
+     */
     testId?: string;
     /**
      * Show thumbnails for images in lieu of the file icon.

package/dist/src/components/dropzone/Preview.d.ts

@@ -9,6 +9,9 @@ export interface PreviewProps extends Omit<FlexProps, 'behavior'> {
     minSize?: number;
     onDeleteFile?: (file: FilePreview) => void;
     onRemoveFile?: (file: FilePreview) => void;
+    /**
+     * @internal
+     */
     testId?: string;
     thumbnails: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/dropzone",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -34,6 +34,7 @@
     "react-magma-icons": "^2.3.1"
   },
   "dependencies": {
+    "polished": "^3.2.0",
     "react-dropzone": "11.3.2"
   },
   "devDependencies": {

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Dropzone, DropzoneProps, OnSendFileProps } from './Dropzone';
-import { Textarea, Datagrid } from 'react-magma-dom';
+import { Textarea, Datagrid, magma } from 'react-magma-dom';
 
 function csvJSON(csv: string) {
   const lines = csv.split('\n');
@@ -82,8 +82,8 @@ export const Default = (args: DropzoneProps) => {
   return (
     <div
       style={{
-        background: args.isInverse ? '#003865' : '#fff',
-        padding: '50px',
+        background: args.isInverse ? magma.colors.primary600 : 'none',
+        padding: '24px',
       }}
     >
       <Dropzone
@@ -92,6 +92,7 @@ export const Default = (args: DropzoneProps) => {
         maxFiles={5}
         maxSize={1024 * 1024}
         onSendFile={onSendFile}
+        sendFiles={true}
         labelText="Upload files"
         helperMessage="Only PNG, JPG, and SVG files with a max size of 1MB"
       />
@@ -103,8 +104,8 @@ export const NoLimits = (args: DropzoneProps) => {
   return (
     <div
       style={{
-        background: args.isInverse ? '#003865' : '#fff',
-        padding: '50px',
+        background: args.isInverse ? magma.colors.primary600 : 'none',
+        padding: '24px',
       }}
     >
       <Dropzone
@@ -141,12 +142,17 @@ export const Image = (args: DropzoneProps) => {
   };
 
   return (
-    <div>
+    <div
+      style={{
+        background: args.isInverse ? magma.colors.primary600 : 'none',
+        padding: '24px',
+      }}
+    >
       <Dropzone
         {...args}
         onSendFile={onSendFile}
         accept={['image/*']}
-        helperMessage="Only PNG files"
+        helperMessage="Only Image files"
         sendFiles
         onDeleteFile={onDeleteFile}
       />
@@ -179,7 +185,12 @@ export const Text = (args: DropzoneProps) => {
   };
 
   return (
-    <div>
+    <div
+      style={{
+        background: args.isInverse ? magma.colors.primary600 : 'none',
+        padding: '24px',
+      }}
+    >
       <Dropzone
         {...args}
         onSendFile={onSendFile}
@@ -218,7 +229,12 @@ export const Csv = (args: DropzoneProps) => {
   };
 
   return (
-    <div>
+    <div
+      style={{
+        background: args.isInverse ? magma.colors.primary600 : 'none',
+        padding: '24px',
+      }}
+    >
       <Dropzone
         {...args}
         onSendFile={onSendFile}

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

@@ -8,7 +8,7 @@ import {
   fireEvent,
   waitFor,
 } from '@testing-library/react';
-import { I18nContext, defaultI18n } from 'react-magma-dom';
+import { I18nContext, defaultI18n, magma } from 'react-magma-dom';
 import userEvent from '@testing-library/user-event';
 
 const TEXT = 'Test Text';
@@ -135,12 +135,14 @@ describe('File Uploader', () => {
     const { getByTestId, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-    expect(dropzone).toHaveStyle('border: 2px dashed #bfbfbf');
+    expect(dropzone).toHaveStyle(
+      `border: 1px dashed ${magma.colors.neutral400}`
+    );
 
     fireDragEnter(dropzone, data);
     await flushPromises(rerender, ui);
 
-    expect(dropzone).toHaveStyle('border: 2px dashed #178037');
+    expect(dropzone).toHaveStyle(`border: 1px dashed ${magma.colors.success}`);
   });
 
   it('border color changes for rejection', async () => {
@@ -150,12 +152,14 @@ describe('File Uploader', () => {
     const { getByTestId, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-    expect(dropzone).toHaveStyle('border: 2px dashed #bfbfbf');
+    expect(dropzone).toHaveStyle(
+      `border: 1px dashed ${magma.colors.neutral400}`
+    );
 
     fireDragEnter(dropzone, data);
     await flushPromises(rerender, ui);
 
-    expect(dropzone).toHaveStyle('border: 2px dashed #D32821');
+    expect(dropzone).toHaveStyle(`border: 1px dashed ${magma.colors.danger}`);
   });
 
   it('calls onSendFiles for a single file added via the input', async () => {