@popsure/dirty-swan 0.57.9 → 0.58.1

package/dist/esm/components/multiDropzone/index.stories.js

@@ -13,6 +13,7 @@ import './UploadFileCell/index.js';
 import '../icon/icons/EyeVision.js';
 import '../icon/icons/File.js';
 import '../icon/icons/Trash2.js';
+import '../button/index.js';
 
 var story = {
     title: 'JSX/MultiDropzone',

package/dist/esm/components/multiDropzone/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/multiDropzone/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { MultiDropzone, MultiDropzoneProps } from '.';\nimport { UploadedFile } from './types';\n\nconst story = {\n  title: 'JSX/MultiDropzone',\n  component: MultiDropzone,\n  argTypes: {\n    uploadedFiles: {\n      description: 'List of files to be displayed on the component.',\n    },\n    uploading: {\n      defaultValue: false,\n      description: 'Property that allows to display component in an uploading state',\n    },\n    isCondensed: {\n      defaultValue: false,\n      description: 'Property that allows to display component in a smaller layout',\n    },\n    maxFiles: {\n      description: 'Property that allows to display the maximum number of files allowed',\n      table: {\n        category: 'File Validation',\n      },\n    },\n    maxSize: {\n      description: 'Property that allows to display the maximum size of files allowed',\n      table: {\n        category: 'File Validation',\n      },\n    },\n    accept: {\n      description: 'Property that allows to define which file types are accepted',\n      table: {\n        category: 'File Validation',\n      },\n    },\n    onRemoveFile: {\n      description: 'Called when a file remove button is clicked',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    onFileSelect: {\n      description: 'Called when a file is uploaded',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    textOverrides: {\n      description: 'Properties that allow to localise component',\n    },\n  },\n  args: {\n    uploadedFiles: [{\n      id: '123456789',\n      name: 'my-code-doesnt-work-i-have-no-idea-why-my-code-works.jpg'\n    }],\n    uploading: false,\n    isCondensed: false,\n    textOverrides: {},\n    maxFiles: 0\n  },\n  parameters: {\n    componentSubtitle: 'MultiDropzone component allows upload of multiple documents / files.',\n  },\n};\n\nexport const MultiDropzoneStory = ({\n  onFileSelect,\n  onRemoveFile,\n  uploading,\n  uploadedFiles = [],\n  isCondensed,\n  maxFiles,\n  maxSize,\n  textOverrides,\n}: MultiDropzoneProps) => {\n  const [localFiles, setLocalFiles] = useState<UploadedFile[]>(uploadedFiles);\n\n  const handleOnRemoveFile = (id: string) => {\n    onRemoveFile?.(id);\n    setLocalFiles((prevFiles) => prevFiles.filter((file) => file.id !== id));\n  };\n\n  const handleOnFileSelect = (files: File[]) => {\n    const newFiles = files.map((newFile) => ({\n      id: String(new Date().getTime()),\n      name: newFile.name,\n      progress: 100,\n    }));\n    setLocalFiles((prevFiles) => [...prevFiles, ...newFiles]);\n    onFileSelect(files);\n  };\n\n  return (\n    <MultiDropzone \n      onFileSelect={handleOnFileSelect} \n      onRemoveFile={handleOnRemoveFile} \n      uploadedFiles={localFiles} \n      uploading={uploading} \n      isCondensed={isCondensed}\n      maxFiles={maxFiles}\n      maxSize={maxSize}\n      textOverrides={textOverrides}\n    />\n  );\n};\n\nMultiDropzoneStory.storyName = \"MultiDropzone\";\n\nexport const UploadingState = () => (\n  <MultiDropzone\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 72,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n      },\n      {\n        id: '124',\n        progress: 72,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n        showProgressBar: false,\n      },\n      {\n        id: '125',\n        progress: 72,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n      },\n      {\n        id: '456',\n        progress: 100,\n        name: 'test_file_name2.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name2.pdf',\n      },\n    ]}\n    onFileSelect={() => {}}\n    uploading={true}\n    onRemoveFile={() => {}}\n  />\n);\n\n\nexport const CondensedView = () => (\n  <MultiDropzone\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n      },\n    ]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n    isCondensed\n  />\n);\n\nexport const ErrorState = () => (\n  <MultiDropzone\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 0,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        error: 'File is too big!',\n      },\n    ]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const TooManyFilesErrorState = () => (\n  <MultiDropzone\n    maxFiles={2}\n    isCondensed\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n      },\n      {\n        id: '124',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n        showProgressBar: false,\n      },\n      {\n        id: '125',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n      },\n    ]}\n    uploading={false}\n    onFileSelect={() => {}}\n  />\n);\n\nexport const AcceptingOnlyImages = () => (\n  <MultiDropzone\n    accept=\"image\"\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const AcceptingOnlyDocuments = () => (\n  <MultiDropzone\n    accept=\"document\"\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const AcceptingOnlyVideos = () => (\n  <MultiDropzone\n    accept=\"video\"\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const LimitingFileSizeTo2MB = () => (\n  <MultiDropzone\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n    maxSize={2096000}\n  />\n);\n\nexport const I18nSupport = () => (\n  <MultiDropzone\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n    textOverrides={{\n      instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',\n      supportsTextShort: 'Unterstützt werden',\n      currentlyUploadingText:\n        'Bitte warten während die Datei hochgeladen wird...'\n    }}\n  />\n);\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/multiDropzone/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { MultiDropzone, MultiDropzoneProps } from '.';\nimport { UploadedFile } from './types';\n\nconst story = {\n  title: 'JSX/MultiDropzone',\n  component: MultiDropzone,\n  argTypes: {\n    uploadedFiles: {\n      description: 'List of files to be displayed on the component.',\n    },\n    uploading: {\n      defaultValue: false,\n      description: 'Property that allows to display component in an uploading state',\n    },\n    isCondensed: {\n      defaultValue: false,\n      description: 'Property that allows to display component in a smaller layout',\n    },\n    maxFiles: {\n      description: 'Property that allows to display the maximum number of files allowed',\n      table: {\n        category: 'File Validation',\n      },\n    },\n    maxSize: {\n      description: 'Property that allows to display the maximum size of files allowed',\n      table: {\n        category: 'File Validation',\n      },\n    },\n    accept: {\n      description: 'Property that allows to define which file types are accepted',\n      table: {\n        category: 'File Validation',\n      },\n    },\n    onRemoveFile: {\n      description: 'Called when a file remove button is clicked',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    onFileSelect: {\n      description: 'Called when a file is uploaded',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    textOverrides: {\n      description: 'Properties that allow to localise component',\n    },\n  },\n  args: {\n    uploadedFiles: [{\n      id: '123456789',\n      name: 'my-code-doesnt-work-i-have-no-idea-why-my-code-works.jpg'\n    }],\n    uploading: false,\n    isCondensed: false,\n    textOverrides: {},\n    maxFiles: 0\n  },\n  parameters: {\n    componentSubtitle: 'MultiDropzone component allows upload of multiple documents / files.',\n  },\n};\n\nexport const MultiDropzoneStory = ({\n  onFileSelect,\n  onRemoveFile,\n  uploading,\n  uploadedFiles = [],\n  isCondensed,\n  maxFiles,\n  maxSize,\n  textOverrides,\n}: MultiDropzoneProps) => {\n  const [localFiles, setLocalFiles] = useState<UploadedFile[]>(uploadedFiles);\n\n  const handleOnRemoveFile = (id: string) => {\n    onRemoveFile?.(id);\n    setLocalFiles((prevFiles) => prevFiles.filter((file) => file.id !== id));\n  };\n\n  const handleOnFileSelect = (files: File[]) => {\n    const newFiles = files.map((newFile) => ({\n      id: String(new Date().getTime()),\n      name: newFile.name,\n      progress: 100,\n    }));\n    setLocalFiles((prevFiles) => [...prevFiles, ...newFiles]);\n    onFileSelect(files);\n  };\n\n  return (\n    <MultiDropzone \n      onFileSelect={handleOnFileSelect} \n      onRemoveFile={handleOnRemoveFile} \n      uploadedFiles={localFiles} \n      uploading={uploading} \n      isCondensed={isCondensed}\n      maxFiles={maxFiles}\n      maxSize={maxSize}\n      textOverrides={textOverrides}\n    />\n  );\n};\n\nMultiDropzoneStory.storyName = \"MultiDropzone\";\n\nexport const UploadingState = () => (\n  <MultiDropzone\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 72,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n      },\n      {\n        id: '124',\n        progress: 72,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n        showProgressBar: false,\n      },\n      {\n        id: '125',\n        progress: 72,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n      },\n      {\n        id: '456',\n        progress: 100,\n        name: 'test_file_name2.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name2.pdf',\n      },\n    ]}\n    onFileSelect={() => {}}\n    uploading={true}\n    onRemoveFile={() => {}}\n  />\n);\n\n\nexport const CondensedView = () => (\n  <MultiDropzone\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n      },\n    ]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n    isCondensed\n  />\n);\n\nexport const ErrorState = () => (\n  <MultiDropzone\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 0,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        error: 'File is too big!',\n      },\n    ]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const TooManyFilesErrorState = () => (\n  <MultiDropzone\n    maxFiles={2}\n    isCondensed\n    uploadedFiles={[\n      {\n        id: '123',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n      },\n      {\n        id: '124',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n        showProgressBar: false,\n      },\n      {\n        id: '125',\n        progress: 100,\n        name: 'test_file_name.pdf',\n        previewUrl: 'http://getpopsure.com/test_file_name.pdf',\n        showLoadingSpinner: true,\n      },\n    ]}\n    uploading={false}\n    onFileSelect={() => {}}\n  />\n);\n\nexport const AcceptingOnlyImages = () => (\n  <MultiDropzone\n    accept=\"image\"\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const AcceptingOnlyDocuments = () => (\n  <MultiDropzone\n    accept=\"document\"\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const AcceptingOnlyVideos = () => (\n  <MultiDropzone\n    accept=\"video\"\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n  />\n);\n\nexport const LimitingFileSizeTo2MB = () => (\n  <MultiDropzone\n    isCondensed\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n    maxSize={2096000}\n  />\n);\n\nexport const I18nSupport = () => (\n  <MultiDropzone\n    uploadedFiles={[]}\n    onFileSelect={() => {}}\n    uploading={false}\n    onRemoveFile={() => {}}\n    textOverrides={{\n      instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',\n      supportsTextShort: 'Unterstützt werden',\n      currentlyUploadingText:\n        'Bitte warten während die Datei hochgeladen wird...'\n    }}\n  />\n);\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/multiDropzone/index.test.js

@@ -20,6 +20,7 @@ import './UploadFileCell/index.js';
 import '../icon/icons/EyeVision.js';
 import '../icon/icons/File.js';
 import '../icon/icons/Trash2.js';
+import '../button/index.js';
 
 var mockOnFileSelect = jest.fn();
 var mockOnRemoveFile = jest.fn();

package/dist/esm/components/multiDropzone/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/multiDropzone/index.test.tsx"],"sourcesContent":["import { act, fireEvent, render } from '../../util/testUtils';\nimport '@testing-library/jest-dom';\n\nimport { MultiDropzone, MultiDropzoneProps } from '.';\n\nconst mockOnFileSelect = jest.fn();\nconst mockOnRemoveFile = jest.fn();\nconst file = new File(['DummyFile'], 'dummy.png', { type: 'image/png' });\n\nconst inputTestId = 'ds-drop-input';\nconst spinnerTestId = 'ds-filecell-spinner';\nconst progressbarTestId = 'ds-filecell-progressbar';\nconst uploadedFilesMock = {\n  id: '123',\n  name: 'File name',\n  progress: 100,\n  type: 'jpg',\n};\n\nconst setup = ({\n  uploadedFiles = [],\n  uploading = false,\n  ...rest\n}: Partial<MultiDropzoneProps>) => {\n  return render(\n    <MultiDropzone\n      {...rest}\n      uploadedFiles={uploadedFiles}\n      uploading={uploading}\n      onFileSelect={mockOnFileSelect}\n      onRemoveFile={mockOnRemoveFile}\n    />\n  );\n};\n\ndescribe('MultiDropzone component', () => {\n  it('should call onFileSelect on files change', async () => {\n    const { getByTestId, user } = setup({});\n    const files = [file, file];\n\n    await user.upload(getByTestId(inputTestId), files);\n\n    expect(mockOnFileSelect).toHaveBeenCalledWith(files);\n  });\n\n  describe('Error states', () => {\n    it('should show max files error message', () => {\n      const screen = setup({\n        maxFiles: 1,\n        uploadedFiles: [\n          uploadedFilesMock,\n          {\n            ...uploadedFilesMock,\n            id: '222',\n          },\n        ],\n      });\n\n      expect(screen.getByText('You can upload maximum 1 files.')).toBeVisible();\n    });\n\n    it('should show max file size error message', async () => {\n      const { getByTestId, getByText, user } = setup({ maxSize: 10 });\n      const bigFile = file;\n      Object.defineProperty(bigFile, 'size', { value: 1024 });\n\n      await user.upload(getByTestId(inputTestId), [bigFile]);\n\n      expect(\n        getByText('File is too large. It must be less than 10 Bytes.')\n      ).toBeInTheDocument();\n    });\n\n    it('should show wrong filetype error message', async () => {\n      const { getByTestId, getByText } = setup({ accept: 'document' });\n      const input = getByTestId(inputTestId);\n\n      await act(async () => {\n        // Keeping fireevent to emulate file change like drop\n        // Using userevent.upload doesn't work since input has an accept/html validation\n        fireEvent.change(input, { target: { files: [file] } });\n      });\n\n      expect(\n        getByText('File type must be DOC, DOCX, PDF')\n      ).toBeInTheDocument();\n    });\n\n    it('should remove wrong filetype error message', async () => {\n      const { getByTestId, queryByText, user } = setup({\n        accept: 'document',\n      });\n      const input = getByTestId(inputTestId);\n\n      await act(async () => {\n        // Keeping fireevent to emulate file change like drop\n        // Using userevent.upload doesn't work since input has an accept/html validation\n        fireEvent.change(input, { target: { files: [file] } });\n      });\n\n      await user.click(getByTestId('remove-button'));\n\n      expect(\n        queryByText('File type must be PDF')\n      ).not.toBeInTheDocument();\n    });\n  });\n\n  describe('Copy text', () => {\n    it('should show uploader text', () => {\n      const screen = setup({});\n\n      expect(\n        screen.getByText('Choose file or drag & drop')\n      ).toBeInTheDocument();\n    });\n\n    it('should show uploader text translated', () => {\n      const instructionsText = 'Drag drop file';\n      const screen = setup({\n        textOverrides: { instructionsText },\n      });\n\n      expect(screen.getByText(instructionsText)).toBeInTheDocument();\n    });\n\n    it('should show image accept file type label', () => {\n      const screen = setup({ accept: 'image' });\n\n      expect(\n        screen.getByText('Supports images')\n      ).toBeInTheDocument();\n    });\n\n    it('should show document accept file type label', () => {\n      const screen = setup({ accept: 'document' });\n\n      expect(screen.getByText('Supports documents')).toBeInTheDocument();\n    });\n\n    it('should custom document accept file type label', () => {\n      const screen = setup({\n        accept: {\n          'application/pdf': ['.pdf'],\n          'image/jpg': ['.jpg'],\n        },\n      });\n\n      expect(screen.getByText('Supports images, videos and documents')).toBeInTheDocument();\n    });\n\n    it('should show disabled text if is uploading', () => {\n      const screen = setup({ uploading: true });\n\n      expect(\n        screen.getByText('Please wait while uploading file...')\n      ).toBeInTheDocument();\n    });\n  });\n\n  describe('Uploaded files', () => {\n    it('should show uploaded files', () => {\n      const screen = setup({\n        uploadedFiles: [uploadedFilesMock],\n      });\n\n      expect(screen.getByText(uploadedFilesMock.name)).toBeInTheDocument();\n    });\n\n    it('should call onRemoveFile with uploaded file id', () => {\n      const screen = setup({\n        uploadedFiles: [uploadedFilesMock],\n      });\n\n      screen.getByTestId('remove-button').click();\n\n      expect(mockOnRemoveFile).toBeCalledWith(uploadedFilesMock.id);\n    });\n\n    it('should show uploaded file with uploading label', () => {\n      const screen = setup({\n        uploadedFiles: [{ ...uploadedFilesMock, progress: 50 }],\n      });\n\n      expect(screen.getByText('Uploading...')).toBeInTheDocument();\n    });\n\n    it('should show uploaded file with progress bar', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n          },\n        ],\n      });\n\n      expect(screen.getByTestId(progressbarTestId)).toBeInTheDocument();\n    });\n\n    it('should show uploaded file with no progress bar', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n            showProgressBar: false,\n          },\n        ],\n      });\n\n      expect(screen.queryByTestId(progressbarTestId)).not.toBeInTheDocument();\n    });\n\n    it('should show uploaded file with loading spinner', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n            showLoadingSpinner: true,\n          },\n        ],\n      });\n\n      expect(screen.getByTestId(spinnerTestId)).toBeInTheDocument();\n    });\n\n    it('should show uploaded file with no loading spinner', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n            showLoadingSpinner: false,\n          },\n        ],\n      });\n\n      expect(screen.queryByTestId(spinnerTestId)).not.toBeInTheDocument();\n    });\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/multiDropzone/index.test.tsx"],"sourcesContent":["import { act, fireEvent, render } from '../../util/testUtils';\nimport '@testing-library/jest-dom';\n\nimport { MultiDropzone, MultiDropzoneProps } from '.';\n\nconst mockOnFileSelect = jest.fn();\nconst mockOnRemoveFile = jest.fn();\nconst file = new File(['DummyFile'], 'dummy.png', { type: 'image/png' });\n\nconst inputTestId = 'ds-drop-input';\nconst spinnerTestId = 'ds-filecell-spinner';\nconst progressbarTestId = 'ds-filecell-progressbar';\nconst uploadedFilesMock = {\n  id: '123',\n  name: 'File name',\n  progress: 100,\n  type: 'jpg',\n};\n\nconst setup = ({\n  uploadedFiles = [],\n  uploading = false,\n  ...rest\n}: Partial<MultiDropzoneProps>) => {\n  return render(\n    <MultiDropzone\n      {...rest}\n      uploadedFiles={uploadedFiles}\n      uploading={uploading}\n      onFileSelect={mockOnFileSelect}\n      onRemoveFile={mockOnRemoveFile}\n    />\n  );\n};\n\ndescribe('MultiDropzone component', () => {\n  it('should call onFileSelect on files change', async () => {\n    const { getByTestId, user } = setup({});\n    const files = [file, file];\n\n    await user.upload(getByTestId(inputTestId), files);\n\n    expect(mockOnFileSelect).toHaveBeenCalledWith(files);\n  });\n\n  describe('Error states', () => {\n    it('should show max files error message', () => {\n      const screen = setup({\n        maxFiles: 1,\n        uploadedFiles: [\n          uploadedFilesMock,\n          {\n            ...uploadedFilesMock,\n            id: '222',\n          },\n        ],\n      });\n\n      expect(screen.getByText('You can upload maximum 1 files.')).toBeVisible();\n    });\n\n    it('should show max file size error message', async () => {\n      const { getByTestId, getByText, user } = setup({ maxSize: 10 });\n      const bigFile = file;\n      Object.defineProperty(bigFile, 'size', { value: 1024 });\n\n      await user.upload(getByTestId(inputTestId), [bigFile]);\n\n      expect(\n        getByText('File is too large. It must be less than 10 Bytes.')\n      ).toBeInTheDocument();\n    });\n\n    it('should show wrong filetype error message', async () => {\n      const { getByTestId, getByText } = setup({ accept: 'document' });\n      const input = getByTestId(inputTestId);\n\n      await act(async () => {\n        // Keeping fireevent to emulate file change like drop\n        // Using userevent.upload doesn't work since input has an accept/html validation\n        fireEvent.change(input, { target: { files: [file] } });\n      });\n\n      expect(\n        getByText('File type must be DOC, DOCX, PDF')\n      ).toBeInTheDocument();\n    });\n\n    it('should remove wrong filetype error message', async () => {\n      const { getByTestId, queryByText, user } = setup({\n        accept: 'document',\n      });\n      const input = getByTestId(inputTestId);\n\n      await act(async () => {\n        // Keeping fireevent to emulate file change like drop\n        // Using userevent.upload doesn't work since input has an accept/html validation\n        fireEvent.change(input, { target: { files: [file] } });\n      });\n\n      await user.click(getByTestId('remove-button'));\n\n      expect(\n        queryByText('File type must be PDF')\n      ).not.toBeInTheDocument();\n    });\n  });\n\n  describe('Copy text', () => {\n    it('should show uploader text', () => {\n      const screen = setup({});\n\n      expect(\n        screen.getByText('Choose file or drag & drop')\n      ).toBeInTheDocument();\n    });\n\n    it('should show uploader text translated', () => {\n      const instructionsText = 'Drag drop file';\n      const screen = setup({\n        textOverrides: { instructionsText },\n      });\n\n      expect(screen.getByText(instructionsText)).toBeInTheDocument();\n    });\n\n    it('should show image accept file type label', () => {\n      const screen = setup({ accept: 'image' });\n\n      expect(\n        screen.getByText('Supports images')\n      ).toBeInTheDocument();\n    });\n\n    it('should show document accept file type label', () => {\n      const screen = setup({ accept: 'document' });\n\n      expect(screen.getByText('Supports documents')).toBeInTheDocument();\n    });\n\n    it('should custom document accept file type label', () => {\n      const screen = setup({\n        accept: {\n          'application/pdf': ['.pdf'],\n          'image/jpg': ['.jpg'],\n        },\n      });\n\n      expect(screen.getByText('Supports images, videos and documents')).toBeInTheDocument();\n    });\n\n    it('should show disabled text if is uploading', () => {\n      const screen = setup({ uploading: true });\n\n      expect(\n        screen.getByText('Please wait while uploading file...')\n      ).toBeInTheDocument();\n    });\n  });\n\n  describe('Uploaded files', () => {\n    it('should show uploaded files', () => {\n      const screen = setup({\n        uploadedFiles: [uploadedFilesMock],\n      });\n\n      expect(screen.getByText(uploadedFilesMock.name)).toBeInTheDocument();\n    });\n\n    it('should call onRemoveFile with uploaded file id', () => {\n      const screen = setup({\n        uploadedFiles: [uploadedFilesMock],\n      });\n\n      screen.getByTestId('remove-button').click();\n\n      expect(mockOnRemoveFile).toBeCalledWith(uploadedFilesMock.id);\n    });\n\n    it('should show uploaded file with uploading label', () => {\n      const screen = setup({\n        uploadedFiles: [{ ...uploadedFilesMock, progress: 50 }],\n      });\n\n      expect(screen.getByText('Uploading...')).toBeInTheDocument();\n    });\n\n    it('should show uploaded file with progress bar', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n          },\n        ],\n      });\n\n      expect(screen.getByTestId(progressbarTestId)).toBeInTheDocument();\n    });\n\n    it('should show uploaded file with no progress bar', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n            showProgressBar: false,\n          },\n        ],\n      });\n\n      expect(screen.queryByTestId(progressbarTestId)).not.toBeInTheDocument();\n    });\n\n    it('should show uploaded file with loading spinner', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n            showLoadingSpinner: true,\n          },\n        ],\n      });\n\n      expect(screen.getByTestId(spinnerTestId)).toBeInTheDocument();\n    });\n\n    it('should show uploaded file with no loading spinner', () => {\n      const screen = setup({\n        uploadedFiles: [\n          {\n            ...uploadedFilesMock,\n            progress: 50,\n            showLoadingSpinner: false,\n          },\n        ],\n      });\n\n      expect(screen.queryByTestId(spinnerTestId)).not.toBeInTheDocument();\n    });\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AACnC,IAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AACnC,IAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;AAEzE,IAAM,WAAW,GAAG,eAAe,CAAC;AACpC,IAAM,aAAa,GAAG,qBAAqB,CAAC;AAC5C,IAAM,iBAAiB,GAAG,yBAAyB,CAAC;AACpD,IAAM,iBAAiB,GAAG;IACxB,EAAE,EAAE,KAAK;IACT,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,KAAK;CACZ,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EAIe;IAH5B,IAAA,qBAAkB,EAAlB,aAAa,mBAAG,EAAE,KAAA,EAClB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACd,IAAI,cAHM,8BAId,CADQ;IAEP,OAAOA,YAAM,CACXC,IAAC,aAAa,eACR,IAAI,IACR,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,IAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,yBAAyB,EAAE;IAClC,EAAE,CAAC,0CAA0C,EAAE;;;;;oBACvC,KAAwB,KAAK,CAAC,EAAE,CAAC,EAA/B,WAAW,iBAAA,EAAE,IAAI,UAAA,CAAe;oBAClC,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;oBAE3B,qBAAM,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAA;;oBAAlD,SAAkD,CAAC;oBAEnD,MAAM,CAAC,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;;;;SACtD,CAAC,CAAC;IAEH,QAAQ,CAAC,cAAc,EAAE;QACvB,EAAE,CAAC,qCAAqC,EAAE;YACxC,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,QAAQ,EAAE,CAAC;gBACX,aAAa,EAAE;oBACb,iBAAiB;0CAEZ,iBAAiB,KACpB,EAAE,EAAE,KAAK;iBAEZ;aACF,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;SAC3E,CAAC,CAAC;QAEH,EAAE,CAAC,yCAAyC,EAAE;;;;;wBACtC,KAAmC,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAvD,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,CAA4B;wBAC1D,OAAO,GAAG,IAAI,CAAC;wBACrB,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;wBAExD,qBAAM,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAA;;wBAAtD,SAAsD,CAAC;wBAEvD,MAAM,CACJ,SAAS,CAAC,mDAAmD,CAAC,CAC/D,CAAC,iBAAiB,EAAE,CAAC;;;;aACvB,CAAC,CAAC;QAEH,EAAE,CAAC,0CAA0C,EAAE;;;;;wBACvC,KAA6B,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,EAAxD,WAAW,iBAAA,EAAE,SAAS,eAAA,CAAmC;wBAC3D,KAAK,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;wBAEvC,qBAAM,GAAG,CAAC;;;;oCAGR,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;;;iCACxD,CAAC,EAAA;;wBAJF,SAIE,CAAC;wBAEH,MAAM,CACJ,SAAS,CAAC,kCAAkC,CAAC,CAC9C,CAAC,iBAAiB,EAAE,CAAC;;;;aACvB,CAAC,CAAC;QAEH,EAAE,CAAC,4CAA4C,EAAE;;;;;wBACzC,KAAqC,KAAK,CAAC;4BAC/C,MAAM,EAAE,UAAU;yBACnB,CAAC,EAFM,WAAW,iBAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,CAEnC;wBACG,KAAK,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;wBAEvC,qBAAM,GAAG,CAAC;;;;oCAGR,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;;;iCACxD,CAAC,EAAA;;wBAJF,SAIE,CAAC;wBAEH,qBAAM,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,EAAA;;wBAA9C,SAA8C,CAAC;wBAE/C,MAAM,CACJ,WAAW,CAAC,uBAAuB,CAAC,CACrC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;;;;aAC3B,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,QAAQ,CAAC,WAAW,EAAE;QACpB,EAAE,CAAC,2BAA2B,EAAE;YAC9B,IAAM,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;YAEzB,MAAM,CACJ,MAAM,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAC/C,CAAC,iBAAiB,EAAE,CAAC;SACvB,CAAC,CAAC;QAEH,EAAE,CAAC,sCAAsC,EAAE;YACzC,IAAM,gBAAgB,GAAG,gBAAgB,CAAC;YAC1C,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE,EAAE,gBAAgB,kBAAA,EAAE;aACpC,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;SAChE,CAAC,CAAC;QAEH,EAAE,CAAC,0CAA0C,EAAE;YAC7C,IAAM,MAAM,GAAG,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;YAE1C,MAAM,CACJ,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CACpC,CAAC,iBAAiB,EAAE,CAAC;SACvB,CAAC,CAAC;QAEH,EAAE,CAAC,6CAA6C,EAAE;YAChD,IAAM,MAAM,GAAG,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;YAE7C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;SACpE,CAAC,CAAC;QAEH,EAAE,CAAC,+CAA+C,EAAE;YAClD,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,MAAM,EAAE;oBACN,iBAAiB,EAAE,CAAC,MAAM,CAAC;oBAC3B,WAAW,EAAE,CAAC,MAAM,CAAC;iBACtB;aACF,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,uCAAuC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;SACvF,CAAC,CAAC;QAEH,EAAE,CAAC,2CAA2C,EAAE;YAC9C,IAAM,MAAM,GAAG,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;YAE1C,MAAM,CACJ,MAAM,CAAC,SAAS,CAAC,qCAAqC,CAAC,CACxD,CAAC,iBAAiB,EAAE,CAAC;SACvB,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,QAAQ,CAAC,gBAAgB,EAAE;QACzB,EAAE,CAAC,4BAA4B,EAAE;YAC/B,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE,CAAC,iBAAiB,CAAC;aACnC,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;SACtE,CAAC,CAAC;QAEH,EAAE,CAAC,gDAAgD,EAAE;YACnD,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE,CAAC,iBAAiB,CAAC;aACnC,CAAC,CAAC;YAEH,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;YAE5C,MAAM,CAAC,gBAAgB,CAAC,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;SAC/D,CAAC,CAAC;QAEH,EAAE,CAAC,gDAAgD,EAAE;YACnD,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE,uBAAM,iBAAiB,KAAE,QAAQ,EAAE,EAAE,IAAG;aACxD,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;SAC9D,CAAC,CAAC;QAEH,EAAE,CAAC,6CAA6C,EAAE;YAChD,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE;0CAER,iBAAiB,KACpB,QAAQ,EAAE,EAAE;iBAEf;aACF,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;SACnE,CAAC,CAAC;QAEH,EAAE,CAAC,gDAAgD,EAAE;YACnD,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE;0CAER,iBAAiB,KACpB,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,KAAK;iBAEzB;aACF,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;SACzE,CAAC,CAAC;QAEH,EAAE,CAAC,gDAAgD,EAAE;YACnD,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE;0CAER,iBAAiB,KACpB,QAAQ,EAAE,EAAE,EACZ,kBAAkB,EAAE,IAAI;iBAE3B;aACF,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;SAC/D,CAAC,CAAC;QAEH,EAAE,CAAC,mDAAmD,EAAE;YACtD,IAAM,MAAM,GAAG,KAAK,CAAC;gBACnB,aAAa,EAAE;0CAER,iBAAiB,KACpB,QAAQ,EAAE,EAAE,EACZ,kBAAkB,EAAE,KAAK;iBAE5B;aACF,CAAC,CAAC;YAEH,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;SACrE,CAAC,CAAC;KACJ,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/components/table/Table.js

@@ -7,7 +7,7 @@ import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
 import { Card } from '../cards/card/index.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-a26ba0c5.js';
+import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-ebace923.js';
 import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/Table.stories.js

@@ -35,7 +35,7 @@ import '../../index-dd80248b.js';
 import '../modal/regularModal/index.js';
 import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
-import '../../TableSection-a26ba0c5.js';
+import '../../TableSection-ebace923.js';
 import './components/TableContents/TableContents.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/Table.test.js

@@ -35,7 +35,7 @@ import '../../index-dd80248b.js';
 import '../modal/regularModal/index.js';
 import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
-import '../../TableSection-a26ba0c5.js';
+import '../../TableSection-ebace923.js';
 import './components/TableContents/TableContents.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/components/TableContents/TableContents.js

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
+import { T as TableSection } from '../../../../TableSection-ebace923.js';
 import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
 import { Card } from '../../../cards/card/index.js';

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../../../TableSection-a26ba0c5.js';
+import '../../../../TableSection-ebace923.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';

package/dist/esm/components/table/components/TableSection/TableSection.js

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../../../index-6ea95111.js';
-export { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
+export { T as TableSection } from '../../../../TableSection-ebace923.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../style-inject.es-1f59c1d0.js';

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
-import { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
+import { T as TableSection } from '../../../../TableSection-ebace923.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';

package/dist/esm/index.js

@@ -31,7 +31,7 @@ export { a as Toaster, t as toast } from './index-4b19aafb.js';
 export { Accordion } from './components/accordion/index.js';
 export { Table } from './components/table/Table.js';
 import { useCallback, useEffect } from 'react';
-export { u as useMediaQuery } from './TableSection-a26ba0c5.js';
+export { u as useMediaQuery } from './TableSection-ebace923.js';
 export { u as useOnClickOutside } from './Calendar-2d7e51b5.js';
 export { default as Svg1Icon } from './components/icon/icons/1.js';
 export { default as Svg2Icon } from './components/icon/icons/2.js';

package/dist/esm/lib/components/multiDropzone/utils/index.d.ts

@@ -1,5 +1,5 @@
-import { Accept, FileError } from "react-dropzone";
-import { AcceptType, TextOverrides, UploadStatus } from "../types";
+import { Accept, FileError, FileRejection } from 'react-dropzone';
+import { AcceptType, TextOverrides, UploadStatus } from '../types';
 export declare const getUploadStatus: (progress: number, error?: string) => UploadStatus;
 export declare const DOCUMENT_FILES_ACCEPT: Accept;
 export declare const IMAGE_FILES_ACCEPT: Accept;
@@ -11,3 +11,10 @@ export declare const getErrorMessage: ({ code, message }: FileError, { fileList,
     fileList?: string;
     maxSize?: number;
 }, textOverrides?: TextOverrides) => string;
+export declare const getStatusMessage: ({ acceptedFiles, filesRejected, fileList, maxSize, textOverrides, }: {
+    acceptedFiles: File[];
+    filesRejected: FileRejection[];
+    fileList?: string;
+    maxSize?: number;
+    textOverrides?: TextOverrides;
+}) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.57.9",
+  "version": "0.58.1",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx

@@ -13,6 +13,8 @@ const TableInfoButton = ({
     type="button"
     data-testid="ds-table-info-button"
     onClick={onClick}
+    aria-label="View more information"
+    title="View more information"
   >
     <Info size={20} />
   </button>

package/src/lib/components/input/checkbox/index.tsx

@@ -31,7 +31,7 @@ export const Checkbox = <ValueType extends string>({
   inlineLayout = false,
   bordered = true,
   classNames: classNamesObj,
-  fieldLegend = 'Select one or more options',
+  fieldLegend,
 }: CheckboxProps<ValueType> & {}) => {
   const hasNoneValue = Object.keys(options).includes('NONE');
 
@@ -73,6 +73,12 @@ export const Checkbox = <ValueType extends string>({
     return (label as CheckboxWithDescription).title !== undefined;
   };
 
+  const legend =
+    fieldLegend ??
+    (Object.keys(options).length > 1
+      ? 'Select one or more options'
+      : 'You may select this option');
+
   return (
     <fieldset
       className={classNames(
@@ -87,7 +93,7 @@ export const Checkbox = <ValueType extends string>({
         }
       )}
     >
-      <legend className="sr-only">{fieldLegend}</legend>
+      <legend className="sr-only">{legend}</legend>
       {entries.map(([currentValue, label]) => {
         const checked = value?.includes(currentValue);
         const customIcon = (label as CheckboxWithDescription)?.icon;

package/src/lib/components/input/index.tsx

@@ -5,15 +5,15 @@ import generateId from '../../util/generateId';
 import styles from './style.module.scss';
 
 // Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.
-export type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
- Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {
-  error?: string | boolean;
-  prefix?: string;
-  label?: string;
-  id?: string;
-  hideLabel?: boolean;
-  labelInsideInput?: boolean;
-};
+export type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
+  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {
+    error?: string | boolean;
+    prefix?: string;
+    label?: string;
+    id?: string;
+    hideLabel?: boolean;
+    labelInsideInput?: boolean;
+  };
 
 export const Input = React.forwardRef(
   (
@@ -54,16 +54,20 @@ export const Input = React.forwardRef(
             ref={ref}
             className={classnames(
               error ? 'p-input--error' : 'p-input',
-              (!label || labelInsideInput) && placeholder && placeholder.length > 0
+              (!label || labelInsideInput) &&
+                placeholder &&
+                placeholder.length > 0
                 ? styles.input
                 : styles['input--no-placeholder'],
               {
-                [styles['input--with-prefix']]: prefix, 
-                [styles['input--with-inside-label']]: labelInsideInput
+                [styles['input--with-prefix']]: prefix,
+                [styles['input--with-inside-label']]: labelInsideInput,
               }
             )}
             placeholder={label || labelInsideInput ? placeholder : ' '}
             disabled={disabled}
+            aria-invalid={!!error}
+            aria-errormessage={error ? `${uniqueId}-error` : undefined}
             {...props}
           />
           {prefix && (
@@ -91,7 +95,10 @@ export const Input = React.forwardRef(
           )}
         </div>
         {error && (
-          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>
+          <p
+            id={`${uniqueId}-error`}
+            className={`p-p--small tc-red-500 w100 ${styles.error}`}
+          >
             {error}
           </p>
         )}

package/src/lib/components/multiDropzone/UploadFileCell/index.tsx

@@ -5,6 +5,7 @@ import styles from './style.module.scss';
 import { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';
 import { Color } from '../../../models/styles';
 import { UploadStatus, UploadedFile } from '../types';
+import { Button } from '../../button';
 
 interface Props {
   uploadStatus: UploadStatus;
@@ -94,35 +95,40 @@ const UploadFileCell: React.FC<Props> = ({
         ) : (
           <>
             {isComplete && (
-              <a
-                className={styles['view-icon']}
+              <Button
+                as="a"
                 href={previewUrl}
                 target="_blank"
                 rel="noopener noreferrer"
+                hideLabel
+                variant="filledWhite"
+                className={classnames('mr16', styles.button)}
+                leftIcon={
+                  <EyeVisionIcon noMargin color={'grey-500'} size={24} />
+                }
               >
-                <EyeVisionIcon
-                  color={'grey-500'}
-                  size={24}
-                  className={styles.icon}
-                />
-              </a>
+                Preview file
+              </Button>
             )}
 
             {onRemoveFile && (
-              <button
-                type="button"
+              <Button
                 onClick={() => onRemoveFile(id)}
-                className={classnames(styles['remove-icon'], {
-                  [styles.disabled]: uploading,
-                })}
+                disabled={uploading}
                 data-testid="remove-button"
+                className={styles.button}
+                leftIcon={
+                  <Trash2Icon
+                    color={hasError ? 'red-500' : 'grey-500'}
+                    size={24}
+                    noMargin
+                  />
+                }
+                hideLabel
+                variant="filledWhite"
               >
-                <Trash2Icon
-                  color={hasError ? 'red-500' : 'grey-500'}
-                  size={24}
-                  className={styles.icon}
-                />
-              </button>
+                Delete file
+              </Button>
             )}
           </>
         )}

package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss

@@ -27,10 +27,6 @@
   align-items: center;
 }
 
-.icon {
-  margin: 0px;
-}
-
 .main-icon {
   margin-right: 16px;
 }
@@ -64,39 +60,25 @@
 
 .cell-right-section {
   display: flex;
-  justify-content: flex-end;
-  min-width: 32px;
-  margin-left: 16px;
 }
 
 .cell-right-section-complete {
   min-width: 64px;
 }
 
-.view-icon,
-.remove-icon {
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  color: inherit;
-  text-align: inherit;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
+.button {
+  width: 32px;
 
-.remove-icon {
-  margin-left: 16px;
-}
+  div span span {
+    min-width: 24px !important;
+    height: 24px !important;
+  }
 
-.disabled {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.3;
+  &:focus-visible {
+    outline: 2px solid $ds-grey-900;
+    border-radius: 2px;
+    outline-offset: 2px;
+  }
 }
 
 @keyframes appear-down {

package/src/lib/components/multiDropzone/index.tsx

@@ -10,6 +10,7 @@ import {
   formatAcceptFileList,
   getErrorMessage,
   getFormattedAcceptObject,
+  getStatusMessage,
   getUploadStatus,
 } from './utils';
 
@@ -48,6 +49,7 @@ const MultiDropzone = ({
   textOverrides,
 }: MultiDropzoneProps) => {
   const [errors, setErrors] = useState<ErrorMessage[]>([]);
+  const [statusMessage, setStatusMessage] = useState('');
   const formattedAccept = getFormattedAcceptObject(accept);
   const fileList = formatAcceptFileList(formattedAccept);
   const placeholder = getPlaceholder(textOverrides, accept, maxSize);
@@ -60,6 +62,15 @@ const MultiDropzone = ({
     (acceptedFiles: File[], filesRejected: FileRejection[]) => {
       onFileSelect(acceptedFiles);
 
+      const messageForScreenReader = getStatusMessage({
+        acceptedFiles,
+        filesRejected,
+        fileList,
+        maxSize,
+        textOverrides,
+      });
+      setStatusMessage(messageForScreenReader);
+
       setErrors((previousErrors) => [
         ...previousErrors,
         ...filesRejected.map(({ errors }) => ({
@@ -93,10 +104,10 @@ const MultiDropzone = ({
         )}
         {...getRootProps()}
       >
-        <input
-          data-testid="ds-drop-input"
-          {...getInputProps()}
-        />
+        <div className="sr-only" aria-live="polite" aria-atomic="true">
+          {statusMessage}
+        </div>
+        <input data-testid="ds-drop-input" {...getInputProps()} />
         <UploadCloudIcon
           className={isCondensed ? styles.img : ''}
           size={isCondensed ? 24 : 64}
@@ -151,7 +162,8 @@ const MultiDropzone = ({
 
       <AnimateHeight duration={300} height={isOverMaxFiles ? 'auto' : 0}>
         <p className="tc-red-500 mt16">
-          {textOverrides?.tooManyFilesError || `You can upload maximum ${maxFiles} files.`}
+          {textOverrides?.tooManyFilesError ||
+            `You can upload maximum ${maxFiles} files.`}
         </p>
       </AnimateHeight>
     </div>

package/src/lib/components/multiDropzone/style.module.scss

@@ -1,4 +1,5 @@
 @use '../../scss/public/grid' as *;
+@use "../../scss/public/colors" as *;
 
 .container {
   background-color: transparent;
@@ -10,6 +11,17 @@
   background-color: white;
 
   transition: all 0.6s ease-in-out;
+
+  &:focus-visible {
+    outline: 2px solid $ds-grey-900;
+    border-radius: 2px;
+    outline-offset: 2px;
+  }
+
+  &:hover {
+    background-color: var(--ds-primary-100);
+    transition: 0.5s ease;
+  }
 }
 
 .img {
@@ -22,15 +34,6 @@
   display: inline-flex;
 }
 
-.dropzoneContainer:focus {
-  outline: none;
-}
-
-.dropzoneContainer:hover {
-  background-color: var(--ds-primary-100);
-  transition: 0.5s ease;
-}
-
 .dropzoneContainerDisabled {
   pointer-events: none;
   opacity: 0.4;