cozy-ui 62.7.0 → 62.9.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [62.9.1](https://github.com/cozy/cozy-ui/compare/v62.9.0...v62.9.1) (2022-04-21)
+
+
+### Bug Fixes
+
+* bump convict from 6.0.0 to 6.2.2 ([403c38e](https://github.com/cozy/cozy-ui/commit/403c38e))
+
+# [62.9.0](https://github.com/cozy/cozy-ui/compare/v62.8.0...v62.9.0) (2022-04-20)
+
+
+### Features
+
+* Add makeStyles helper from Mui ([7962227](https://github.com/cozy/cozy-ui/commit/7962227))
+
+# [62.8.0](https://github.com/cozy/cozy-ui/compare/v62.7.0...v62.8.0) (2022-04-19)
+
+
+### Bug Fixes
+
+* **deps:** Piwik-react-router should be a dependency ([ba6130b](https://github.com/cozy/cozy-ui/commit/ba6130b))
+
+
+### Features
+
+* Add mime-types package ([cc96d4a](https://github.com/cozy/cozy-ui/commit/cc96d4a))
+* Improve FilePicker component ([d52c45d](https://github.com/cozy/cozy-ui/commit/d52c45d)), closes [#2026](https://github.com/cozy/cozy-ui/issues/2026)
+* Update documentation ([dbb6098](https://github.com/cozy/cozy-ui/commit/dbb6098))
+
 # [62.7.0](https://github.com/cozy/cozy-ui/compare/v62.6.0...v62.7.0) (2022-04-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.7.0",
+  "version": "62.9.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -105,6 +105,7 @@
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "eslint-config-cozy-app": "4.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "express": "^4.17.1",
     "focus-trap-react": "^6.0.0",
     "git-directory-deploy": "1.5.1",
@@ -121,7 +122,6 @@
     "mini-css-extract-plugin": "0.6.0",
     "nodemon": "1.19.4",
     "npm-run-all": "4.1.5",
-    "piwik-react-router": "0.12.1",
     "postcss-cli": "6.1.3",
     "postcss-loader": "2.1.6",
     "pretty": "2.0.0",
@@ -159,9 +159,11 @@
     "filesize": "8.0.7",
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",
+    "mime-types": "2.1.35",
     "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.6",
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
+    "piwik-react-router": "0.12.1",
     "react-markdown": "^4.0.8",
     "react-pdf": "^4.0.5",
     "react-popper": "^2.2.3",
@@ -177,11 +179,15 @@
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": ">=1.3.0",
     "cozy-sharing": "^3.10.0",
-    "piwik-react-router": "0.12.1",
     "puppeteer": "^1.20.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
+  "peerDependenciesMeta ": {
+    "puppeteer": {
+      "optional": true
+    }
+  },
   "eslintConfig": {
     "extends": [
       "eslint-config-cozy-app"

package/react/ContactsListModal/AddContactButton.jsx

@@ -40,7 +40,9 @@ const DumbAddContactButton = props => {
 
   return (
     <AppLinker
-      slug={installedApp ? installedApp.attributes.slug : 'store'}
+      app={{
+        slug: installedApp ? installedApp.attributes.slug : 'store'
+      }}
       href={href}
     >
       {({ onClick, href }) => (

package/react/FilePicker/FilePickerBody.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, memo } from 'react'
+import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 
 import { models, useQuery } from 'cozy-client'
@@ -7,17 +7,18 @@ import LoadMore from '../LoadMore'
 
 import { buildContentFolderQuery } from './queries'
 import FilePickerBodyItem from './FilePickerBodyItem'
+import { isValidFile } from '../helpers/acceptedTypes'
 
 const {
-  file: { isDirectory, isFile }
+  file: { isDirectory }
 } = models
 
 const FilePickerBody = ({
   navigateTo,
   folderId,
-  onSelectFileId,
-  filesIdsSelected,
-  fileTypesAccepted,
+  onSelectItemId,
+  itemsIdsSelected,
+  itemTypesAccepted,
   multiple
 }) => {
   const contentFolderQuery = buildContentFolderQuery(folderId)
@@ -27,68 +28,68 @@ const FilePickerBody = ({
   )
 
   const onCheck = useCallback(
-    fileId => {
-      const isChecked = filesIdsSelected.some(
-        fileIdSelected => fileIdSelected === fileId
+    itemId => {
+      const isChecked = itemsIdsSelected.some(
+        fileIdSelected => fileIdSelected === itemId
       )
       if (isChecked) {
-        onSelectFileId(
-          filesIdsSelected.filter(fileIdSelected => fileIdSelected !== fileId)
+        onSelectItemId(
+          itemsIdsSelected.filter(fileIdSelected => fileIdSelected !== itemId)
         )
-      } else onSelectFileId(prev => [...prev, fileId])
+      } else onSelectItemId(prev => [...prev, itemId])
     },
-    [filesIdsSelected, onSelectFileId]
+    [itemsIdsSelected, onSelectItemId]
   )
 
   // When click on checkbox/radio area...
   const handleChoiceClick = useCallback(
-    file => () => {
-      if (multiple) onCheck(file._id)
-      else onSelectFileId(file._id)
+    item => () => {
+      if (multiple) onCheck(item._id)
+      else onSelectItemId(item._id)
     },
-    [multiple, onCheck, onSelectFileId]
+    [multiple, onCheck, onSelectItemId]
   )
 
   // ...when click anywhere on the rest of the line
   const handleListItemClick = useCallback(
-    file => () => {
-      if (isDirectory(file)) {
-        navigateTo(contentFolder.find(f => f._id === file._id))
+    item => () => {
+      if (isDirectory(item)) {
+        navigateTo(contentFolder.find(it => it._id === item._id))
       }
 
-      if (isFile(file) && fileTypesAccepted.file) {
-        if (multiple) onCheck(file._id)
-        else onSelectFileId(file._id)
+      if (isValidFile(item, itemTypesAccepted)) {
+        if (multiple) onCheck(item._id)
+        else onSelectItemId(item._id)
       }
     },
     [
       contentFolder,
-      fileTypesAccepted.file,
+      itemTypesAccepted,
       multiple,
       navigateTo,
       onCheck,
-      onSelectFileId
+      onSelectItemId
     ]
   )
 
   return (
     <List>
       {contentFolder &&
-        contentFolder.map((file, idx) => {
+        contentFolder.map((item, idx) => {
           const hasDivider = contentFolder
             ? idx !== contentFolder.length - 1
             : false
 
           return (
             <FilePickerBodyItem
-              key={file._id}
-              file={file}
-              fileTypesAccepted={fileTypesAccepted}
+              key={item._id}
+              item={item}
+              itemTypesAccepted={itemTypesAccepted}
               multiple={multiple}
               handleChoiceClick={handleChoiceClick}
               handleListItemClick={handleListItemClick}
               onCheck={onCheck}
-              filesIdsSelected={filesIdsSelected}
+              itemsIdsSelected={itemsIdsSelected}
               hasDivider={hasDivider}
             />
           )
@@ -99,14 +100,11 @@ const FilePickerBody = ({
 }
 
 FilePickerBody.propTypes = {
-  onSelectFileId: PropTypes.func.isRequired,
-  filesIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onSelectItemId: PropTypes.func.isRequired,
+  itemsIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
   folderId: PropTypes.string.isRequired,
   navigateTo: PropTypes.func.isRequired,
-  fileTypesAccepted: PropTypes.exact({
-    file: PropTypes.bool,
-    folder: PropTypes.bool
-  })
+  itemTypesAccepted: PropTypes.arrayOf(PropTypes.string).isRequired
 }
 
-export default memo(FilePickerBody)
+export default FilePickerBody

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import filesize from 'filesize'
@@ -17,6 +17,8 @@ import Checkbox from '../Checkbox'
 import Radio from '../Radios'
 import { useI18n } from '../I18n'
 
+import { isValidFile, isValidFolder } from '../helpers/acceptedTypes'
+
 import styles from './styles.styl'
 
 const {
@@ -37,49 +39,54 @@ const useStyles = makeStyles(() => ({
 }))
 
 const FilePickerBodyItem = ({
-  file,
-  fileTypesAccepted,
+  item,
+  itemTypesAccepted,
   multiple,
   handleChoiceClick,
   handleListItemClick,
-  filesIdsSelected,
+  itemsIdsSelected,
   hasDivider
 }) => {
   const classes = useStyles()
   const { f } = useI18n()
   const hasChoice =
-    (fileTypesAccepted.file && isFile(file)) ||
-    (fileTypesAccepted.folder && isDirectory(file))
+    isValidFile(item, itemTypesAccepted) ||
+    isValidFolder(item, itemTypesAccepted)
 
   const Input = multiple ? Checkbox : Radio
 
-  const listItemSecondaryContent = isFile(file)
-    ? `${f(file.updated_at, 'DD MMM YYYY')} - ${filesize(file.size, {
+  const listItemSecondaryContent = isFile(item)
+    ? `${f(item.updated_at, 'DD MMM YYYY')} - ${filesize(item.size, {
         base: 10
       })}`
     : null
 
   return (
     <>
-      <ListItem button className="u-p-0">
+      <ListItem
+        disabled={!hasChoice && isFile(item)}
+        button
+        className="u-p-0"
+        data-testid="list-item"
+      >
         <div
           data-testid="listitem-onclick"
           className={styles['filePickerBreadcrumb-wrapper']}
-          onClick={handleListItemClick(file)}
+          onClick={handleListItemClick(item)}
         >
           <ListItemIcon className={classes.listItemIcon}>
             <Icon
-              icon={isDirectory(file) ? FileTypeFolder : FileTypeText}
+              icon={isDirectory(item) ? FileTypeFolder : FileTypeText}
               width="32"
               height="32"
             />
           </ListItemIcon>
           <ListItemText
-            primary={file.name}
+            primary={item.name}
             secondary={listItemSecondaryContent}
           />
         </div>
-        {isDirectory(file) && hasChoice && (
+        {isDirectory(item) && hasChoice && (
           <Divider
             orientation="vertical"
             flexItem
@@ -89,15 +96,15 @@ const FilePickerBodyItem = ({
         <div
           data-testid="choice-onclick"
           className="u-ph-1 u-pv-half u-h-2 u-flex u-flex-items-center"
-          onClick={hasChoice ? handleChoiceClick(file) : undefined}
+          onClick={hasChoice ? handleChoiceClick(item) : undefined}
         >
           <Input
             data-testid={multiple ? 'checkbox-btn' : 'radio-btn'}
             onChange={() => {
               // handled by onClick on the container
             }}
-            checked={filesIdsSelected.includes(file._id)}
-            value={file._id}
+            checked={itemsIdsSelected.includes(item._id)}
+            value={item._id}
             className={cx('u-p-0', {
               'u-o-100': hasChoice,
               'u-o-0': !hasChoice
@@ -112,16 +119,13 @@ const FilePickerBodyItem = ({
 }
 
 FilePickerBodyItem.propTypes = {
-  file: PropTypes.object.isRequired,
-  fileTypesAccepted: PropTypes.exact({
-    file: PropTypes.bool,
-    folder: PropTypes.bool
-  }),
+  item: PropTypes.object.isRequired,
+  itemTypesAccepted: PropTypes.arrayOf(PropTypes.string).isRequired,
   multiple: PropTypes.bool,
   handleChoiceClick: PropTypes.func.isRequired,
   handleListItemClick: PropTypes.func.isRequired,
-  filesIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  itemsIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
   hasDivider: PropTypes.bool.isRequired
 }
 
-export default memo(FilePickerBodyItem)
+export default FilePickerBodyItem

package/react/FilePicker/FilePickerBodyItem.spec.jsx

@@ -4,11 +4,13 @@ import filesize from 'filesize'
 
 import DemoProvider from './docs/DemoProvider'
 import FilePickerBodyItem from './FilePickerBodyItem'
+import { isValidFile, isValidFolder } from '../helpers/acceptedTypes'
 
 const mockFile01 = {
   _id: '001',
   type: 'file',
-  name: 'Filename',
+  name: 'Filename.pdf',
+  mime: 'application/pdf',
   updated_at: '2021-01-01T12:00:00.000000+01:00'
 }
 const mockFolder01 = {
@@ -19,6 +21,11 @@ const mockFolder01 = {
 }
 
 jest.mock('filesize', () => jest.fn())
+jest.mock('../helpers/acceptedTypes', () => ({
+  ...jest.requireActual('../helpers/acceptedTypes'),
+  isValidFile: jest.fn(),
+  isValidFolder: jest.fn()
+}))
 
 describe('FilePickerBodyItem components:', () => {
   const mockHandleChoiceClick = jest.fn()
@@ -26,19 +33,23 @@ describe('FilePickerBodyItem components:', () => {
   filesize.mockReturnValue('111Ko')
 
   const setup = ({
-    file = mockFile01,
+    item = mockFile01,
     multiple = false,
-    fileTypesAccepted = { file: true, folder: false }
-  }) => {
+    validFile = false,
+    validFolder = false
+  } = {}) => {
+    isValidFile.mockReturnValue(validFile)
+    isValidFolder.mockReturnValue(validFolder)
+
     return render(
       <DemoProvider>
         <FilePickerBodyItem
-          file={file}
-          fileTypesAccepted={fileTypesAccepted}
+          item={item}
+          itemTypesAccepted={[]}
           multiple={multiple}
           handleChoiceClick={mockHandleChoiceClick}
           handleListItemClick={mockHandleListItemClick}
-          filesIdsSelected={[]}
+          itemsIdsSelected={[]}
           hasDivider={false}
         />
       </DemoProvider>
@@ -50,48 +61,71 @@ describe('FilePickerBodyItem components:', () => {
   })
 
   it('should be rendered correctly', () => {
-    const { container } = setup({})
+    const { container } = setup()
 
     expect(container).toBeDefined()
   })
 
   it('should display filename', () => {
-    const { getByText } = setup({})
+    const { getByText } = setup()
 
-    expect(getByText('Filename'))
+    expect(getByText('Filename.pdf'))
   })
 
   it('should display foldername', () => {
-    const { getByText } = setup({ file: mockFolder01 })
+    const { getByText } = setup({ item: mockFolder01 })
 
     expect(getByText('Foldername'))
   })
 
+  it("should item's line is not disabled when has not valid type & is File", () => {
+    const { getByTestId } = setup({
+      item: mockFile01,
+      validFile: false,
+      validFolder: false
+    })
+    const listItem = getByTestId('list-item')
+
+    expect(listItem).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it("should item's line is not disabled when has not valid type & is Folder", () => {
+    const { getByTestId } = setup({
+      item: mockFolder01,
+      validFile: false,
+      validFolder: false
+    })
+    const listItem = getByTestId('list-item')
+
+    expect(listItem).toHaveAttribute('aria-disabled', 'false')
+  })
+
   describe('Functions called', () => {
     it('should call "handleChoiceClick" function when click on checkbox/radio area', () => {
-      const { getByTestId } = setup({})
+      const { getByTestId } = setup({ validFile: true })
       fireEvent.click(getByTestId('choice-onclick'))
 
       expect(mockHandleChoiceClick).toHaveBeenCalled()
     })
 
     it('should NOT call "handleChoiceClick" function when click on checkbox/radio area, if is Folder & not accepted', () => {
-      const { getByTestId } = setup({ file: mockFolder01 })
+      const { getByTestId } = setup({
+        item: mockFolder01,
+        validFolder: false
+      })
       fireEvent.click(getByTestId('choice-onclick'))
 
       expect(mockHandleChoiceClick).not.toHaveBeenCalled()
     })
     it('should NOT call "handleChoiceClick" function when click on checkbox/radio area, if is File & not accepted', () => {
-      const { getByTestId } = setup({
-        fileTypesAccepted: { file: false, folder: true }
-      })
+      const { getByTestId } = setup({ validFile: false })
       fireEvent.click(getByTestId('choice-onclick'))
 
       expect(mockHandleChoiceClick).not.toHaveBeenCalled()
     })
 
     it('should call "handleListItemClick" function when click on ListItem node', () => {
-      const { getByTestId } = setup({})
+      const { getByTestId } = setup()
       fireEvent.click(getByTestId('listitem-onclick'))
 
       expect(mockHandleListItemClick).toHaveBeenCalled()
@@ -100,7 +134,7 @@ describe('FilePickerBodyItem components:', () => {
 
   describe('Attribute "multiple"', () => {
     it('should radio button exists if "multiple" atribute is False', () => {
-      const { getByTestId } = setup({})
+      const { getByTestId } = setup()
       const radioBtn = getByTestId('radio-btn')
       expect(radioBtn).not.toBeNull()
     })
@@ -114,16 +148,14 @@ describe('FilePickerBodyItem components:', () => {
 
   describe('Radio/Checkbox button', () => {
     it('should disable and not display the Radio button if it is a File and is not accepted', () => {
-      const { getByTestId } = setup({
-        fileTypesAccepted: { file: false }
-      })
+      const { getByTestId } = setup({ validFile: false })
       const radioBtn = getByTestId('radio-btn')
 
       expect(radioBtn.getAttribute('disabled')).toBe(null)
     })
 
     it('should disable and not display the Radio button if it is a Folder and is not accepted', () => {
-      const { getByTestId } = setup({ file: mockFolder01 })
+      const { getByTestId } = setup({ item: mockFolder01 })
       const radioBtn = getByTestId('radio-btn')
 
       expect(radioBtn.getAttribute('disabled')).toBe(null)

package/react/FilePicker/Readme.md

@@ -12,7 +12,7 @@ initialState = {
 };
 
 const initialVariants = [
-  { acceptFile: true, acceptFolder: false, multiple: false }
+  { acceptFileTXT: false, acceptFileMD: false, acceptFolder: false, multiple: false }
 ];
 
 const toggleFilePicker = () => setState({ filePickerOpened: !state.filePickerOpened });
@@ -20,18 +20,15 @@ const onChange = (fileId) => alert(`ID of file selected : [${fileId}]`);
 <DemoProvider>
   <Variants initialVariants={initialVariants} screenshotAllVariants>
     {variant => {
-      let acceptRule = ''
-      if (variant.acceptFile) {
-        acceptRule = 'file'
-        if (variant.acceptFolder) {
-          acceptRule = 'file,folder'
-        }
+      const acceptRule = []
+      if (variant.acceptFileMD) {
+        acceptRule.push('.md')
+      }
+      if (variant.acceptFileTXT) {
+        acceptRule.push('.txt')
       }
       if (variant.acceptFolder) {
-        acceptRule = 'folder'
-        if (variant.acceptFile) {
-          acceptRule = 'folder,file'
-        }
+        acceptRule.push('folder')
       }
 
       return (
@@ -41,7 +38,7 @@ const onChange = (fileId) => alert(`ID of file selected : [${fileId}]`);
             <FilePicker
               onClose={toggleFilePicker}
               onChange={onChange}
-              accept={acceptRule}
+              accept={acceptRule.toString()}
               multiple={variant.multiple}
             />
           )}

package/react/FilePicker/index.jsx

@@ -7,22 +7,7 @@ import FilePickerHeader from './FilePickerHeader'
 import FilePickerFooter from './FilePickerFooter'
 import FilePickerBody from './FilePickerBody'
 import useBreakpoints from '../hooks/useBreakpoints'
-
-/**
- * @param {string} fileType - Defines the file types that should be accepted ("file" and/or "folder"), separated by commas
- * @returns {{ file: boolean, folder: boolean }}
- */
-const getFileTypesAccepted = fileType => {
-  // If accept is falsy, set default to file
-  const acceptedFileType = fileType
-    ? fileType.replaceAll(' ', '').split(',')
-    : ['file']
-
-  return {
-    file: acceptedFileType.includes('file'),
-    folder: acceptedFileType.includes('folder')
-  }
-}
+import { getCompliantTypes } from '../helpers/acceptedTypes'
 
 const useStyles = makeStyles(() => ({
   paper: {
@@ -36,23 +21,23 @@ const FilePicker = ({ onClose, onChange, accept, multiple }) => {
   const { isMobile } = useBreakpoints()
   const classes = useStyles()
   const [folderId, setFolderId] = useState(ROOT_DIR_ID)
-  const [filesIdsSelected, setFilesIdsSelected] = useState([])
+  const [itemsIdsSelected, setItemsIdsSelected] = useState([])
 
-  const onSelectFileId = fileId => {
+  const onSelectItemId = fileId => {
     if (!multiple) {
       handleConfirm(null, fileId)
     } else {
-      setFilesIdsSelected(fileId)
+      setItemsIdsSelected(fileId)
     }
   }
 
   const navigateTo = folder => setFolderId(folder.id)
 
   const handleConfirm = (_, fileId) => {
-    onChange(fileId ? fileId : filesIdsSelected)
+    onChange(fileId ? fileId : itemsIdsSelected)
     onClose()
   }
-  const fileTypesAccepted = getFileTypesAccepted(accept)
+  const itemTypesAccepted = getCompliantTypes(accept)
 
   return (
     <FixedDialog
@@ -73,10 +58,10 @@ const FilePicker = ({ onClose, onChange, accept, multiple }) => {
       content={
         <FilePickerBody
           navigateTo={navigateTo}
-          onSelectFileId={onSelectFileId}
-          filesIdsSelected={filesIdsSelected}
+          onSelectItemId={onSelectItemId}
+          itemsIdsSelected={itemsIdsSelected}
           folderId={folderId}
-          fileTypesAccepted={fileTypesAccepted}
+          itemTypesAccepted={itemTypesAccepted}
           multiple={multiple}
         />
       }
@@ -85,7 +70,7 @@ const FilePicker = ({ onClose, onChange, accept, multiple }) => {
           <FilePickerFooter
             onClose={onClose}
             onConfirm={handleConfirm}
-            disabledConfirm={filesIdsSelected.length === 0}
+            disabledConfirm={itemsIdsSelected.length === 0}
           />
         ) : null
       }
@@ -101,7 +86,7 @@ FilePicker.propTypes = {
 }
 
 FilePicker.defaultProps = {
-  accept: 'file',
+  accept: '',
   multiple: false
 }
 

package/react/Viewer/AudioViewer.jsx

@@ -1,16 +1,21 @@
 import React from 'react'
 import Icon from '../Icon'
+import FileTypeAudioIcon from '../Icons/FileTypeAudio'
 
 import withFileUrl from './withFileUrl'
 import styles from './styles.styl'
 
-import FileTypeAudioIcon from 'cozy-ui/transpiled/react/Icons/FileTypeAudio'
+import isTesting from '../../react/helpers/isTesting'
 
 const AudioViewer = ({ file, url }) => (
   <div className={styles['viewer-audioviewer']}>
     <Icon icon={FileTypeAudioIcon} width={160} height={140} />
     <p className={styles['viewer-filename']}>{file.name}</p>
-    <audio src={url} controls="controls" />
+    <audio
+      src={url}
+      controls="controls"
+      preload={isTesting() ? 'none' : 'auto'}
+    />
   </div>
 )
 

package/react/Viewer/Navigation.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import cx from 'classnames'
 
 import Icon from '../Icon'
-import { default as ArrowIcon } from 'cozy-ui/transpiled/react/Icons/DropdownClose'
+import { default as ArrowIcon } from '../Icons/DropdownClose'
 
 import styles from './styles.styl'
 

package/react/Viewer/__snapshots__/AudioViewer.spec.jsx.snap

@@ -35,6 +35,7 @@ exports[`AudioViewer should render a spinner then the audio viewer 1`] = `
     </p>
     <audio
       controls=""
+      preload="auto"
       src="https://viewerdemo.cozycloud.cc/Z.mp3"
     />
   </div>

package/react/helpers/acceptedTypes.js

@@ -0,0 +1,50 @@
+import mimeTypes from 'mime-types'
+
+import { models } from 'cozy-client'
+
+const {
+  file: { isDirectory, isFile }
+} = models
+
+/**
+ * @param {string} types - Types we wish to accept ("folder" and/or "extensions/mime" of file), separated by commas
+ * @returns {string[]} All the valid types, if the parameter is undefined or if no type is valid, return an empty array
+ */
+export const getCompliantTypes = types => {
+  if (types) {
+    return types
+      .replaceAll(' ', '')
+      .split(',')
+      .filter(type =>
+        type !== 'folder' ? !!mimeTypes.contentType(type) : true
+      )
+  }
+
+  return []
+}
+
+/**
+ * Check if Item is a file with accepted extension/mime
+ *
+ * @param {object} item - file or folder
+ * @param {string[]} validTypes - List of accepted types
+ * @returns {boolean}
+ */
+export const isValidFile = (item, validTypes) => {
+  const fileTypesAccepted =
+    validTypes.includes(`.${item.name.split('.').pop()}`) ||
+    validTypes.includes(item.mime)
+
+  return isFile(item) && (fileTypesAccepted || validTypes.length === 0)
+}
+
+/**
+ * Check if Item is a folder with accepted type
+ *
+ * @param {object} item - file or folder
+ * @param {string[]} validTypes - List of accepted types
+ * @returns {boolean}
+ */
+export const isValidFolder = (item, validTypes) => {
+  return isDirectory(item) && validTypes.includes(`folder`)
+}

package/react/helpers/acceptedTypes.spec.js

@@ -0,0 +1,86 @@
+import { isValidFile, isValidFolder, getCompliantTypes } from './acceptedTypes'
+
+const makeMockFile = ({
+  extension = '.pdf',
+  mime = 'application/pdf'
+} = {}) => ({
+  _id: '123',
+  type: 'file',
+  mime: mime,
+  name: `mockFile${extension}`
+})
+const makeMockFolder = () => ({
+  _id: '789',
+  type: 'directory',
+  name: 'mockDir'
+})
+
+describe('acceptedTypes', () => {
+  describe('getCompliantTypes', () => {
+    it('should an array with all valid types', () => {
+      const res = getCompliantTypes('.pdf, text/plain, .not')
+
+      expect(res).toStrictEqual(['.pdf', 'text/plain'])
+    })
+  })
+
+  describe('isValidFile', () => {
+    it('should be valid when item has no type providen', () => {
+      const item = makeMockFile()
+      const validTypesAccepted = []
+
+      expect(isValidFile(item, validTypesAccepted)).toBe(true)
+    })
+
+    it('should be valid when item has an accepted extension', () => {
+      const item = makeMockFile({ extension: '.png' })
+      const validTypesAccepted = ['.png', '.pdf']
+
+      expect(isValidFile(item, validTypesAccepted)).toBe(true)
+    })
+
+    it('should not be valid when item has not an accepted extension', () => {
+      const item = makeMockFile({ extension: '.png' })
+      const validTypesAccepted = ['.pdf']
+
+      expect(isValidFile(item, validTypesAccepted)).toBe(false)
+    })
+
+    it('should be valid when item has an accepted mime', () => {
+      const item = makeMockFile({ mime: 'image/png' })
+      const validTypesAccepted = ['application/pdf', 'image/png']
+
+      expect(isValidFile(item, validTypesAccepted)).toBe(true)
+    })
+
+    it('should not be valid when item has not an accepted mime', () => {
+      const item = makeMockFile({ mime: 'image/png' })
+      const validTypesAccepted = ['application/pdf']
+
+      expect(isValidFile(item, validTypesAccepted)).toBe(false)
+    })
+
+    it('should not be valid when item is not an file', () => {
+      const item = makeMockFolder()
+      const validTypesAccepted = []
+
+      expect(isValidFile(item, validTypesAccepted)).toBe(false)
+    })
+  })
+
+  describe('isValidFolder', () => {
+    it('should be valid when item is an folder', () => {
+      const item = makeMockFolder()
+      const validTypesAccepted = ['folder']
+
+      expect(isValidFolder(item, validTypesAccepted)).toBe(true)
+    })
+
+    it('should not be valid when item is not an folder', () => {
+      const item = makeMockFile()
+      const validTypesAccepted = ['folder']
+
+      expect(isValidFolder(item, validTypesAccepted)).toBe(false)
+    })
+  })
+})

package/react/helpers/makeStyles.js

@@ -0,0 +1,2 @@
+import { makeStyles } from '@material-ui/core/styles'
+export default makeStyles

package/react/index.js

@@ -28,6 +28,7 @@ export { default as AccordionSummary } from './MuiCozyTheme/AccordionSummary'
 export { default as AccordionDetails } from './MuiCozyTheme/AccordionDetails'
 export { default as Toggle } from './Toggle'
 export { default as withBreakpoints } from './helpers/withBreakpoints'
+export { default as makeStyles } from './helpers/makeStyles'
 export { default as useBreakpoints } from './hooks/useBreakpoints'
 export { default as useBrowserOffline } from './hooks/useBrowserOffline'
 export { Media, Img, Bd } from './Media'

package/transpiled/react/ContactsListModal/AddContactButton.js

@@ -39,7 +39,9 @@ var DumbAddContactButton = function DumbAddContactButton(props) {
   }
 
   return /*#__PURE__*/React.createElement(AppLinker, {
-    slug: installedApp ? installedApp.attributes.slug : 'store',
+    app: {
+      slug: installedApp ? installedApp.attributes.slug : 'store'
+    },
     href: href
   }, function (_ref) {
     var onClick = _ref.onClick,

package/transpiled/react/FilePicker/FilePickerBody.js

@@ -1,21 +1,20 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import React, { useCallback, memo } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { models, useQuery } from 'cozy-client';
 import List from "cozy-ui/transpiled/react/MuiCozyTheme/List";
 import LoadMore from "cozy-ui/transpiled/react/LoadMore";
 import { buildContentFolderQuery } from "cozy-ui/transpiled/react/FilePicker/queries";
 import FilePickerBodyItem from "cozy-ui/transpiled/react/FilePicker/FilePickerBodyItem";
-var _models$file = models.file,
-    isDirectory = _models$file.isDirectory,
-    isFile = _models$file.isFile;
+import { isValidFile } from "cozy-ui/transpiled/react/helpers/acceptedTypes";
+var isDirectory = models.file.isDirectory;
 
 var FilePickerBody = function FilePickerBody(_ref) {
   var navigateTo = _ref.navigateTo,
       folderId = _ref.folderId,
-      onSelectFileId = _ref.onSelectFileId,
-      filesIdsSelected = _ref.filesIdsSelected,
-      fileTypesAccepted = _ref.fileTypesAccepted,
+      onSelectItemId = _ref.onSelectItemId,
+      itemsIdsSelected = _ref.itemsIdsSelected,
+      itemTypesAccepted = _ref.itemTypesAccepted,
       multiple = _ref.multiple;
   var contentFolderQuery = buildContentFolderQuery(folderId);
 
@@ -24,50 +23,50 @@ var FilePickerBody = function FilePickerBody(_ref) {
       hasMore = _useQuery.hasMore,
       fetchMore = _useQuery.fetchMore;
 
-  var onCheck = useCallback(function (fileId) {
-    var isChecked = filesIdsSelected.some(function (fileIdSelected) {
-      return fileIdSelected === fileId;
+  var onCheck = useCallback(function (itemId) {
+    var isChecked = itemsIdsSelected.some(function (fileIdSelected) {
+      return fileIdSelected === itemId;
     });
 
     if (isChecked) {
-      onSelectFileId(filesIdsSelected.filter(function (fileIdSelected) {
-        return fileIdSelected !== fileId;
+      onSelectItemId(itemsIdsSelected.filter(function (fileIdSelected) {
+        return fileIdSelected !== itemId;
       }));
-    } else onSelectFileId(function (prev) {
-      return [].concat(_toConsumableArray(prev), [fileId]);
+    } else onSelectItemId(function (prev) {
+      return [].concat(_toConsumableArray(prev), [itemId]);
     });
-  }, [filesIdsSelected, onSelectFileId]); // When click on checkbox/radio area...
+  }, [itemsIdsSelected, onSelectItemId]); // When click on checkbox/radio area...
 
-  var handleChoiceClick = useCallback(function (file) {
+  var handleChoiceClick = useCallback(function (item) {
     return function () {
-      if (multiple) onCheck(file._id);else onSelectFileId(file._id);
+      if (multiple) onCheck(item._id);else onSelectItemId(item._id);
     };
-  }, [multiple, onCheck, onSelectFileId]); // ...when click anywhere on the rest of the line
+  }, [multiple, onCheck, onSelectItemId]); // ...when click anywhere on the rest of the line
 
-  var handleListItemClick = useCallback(function (file) {
+  var handleListItemClick = useCallback(function (item) {
     return function () {
-      if (isDirectory(file)) {
-        navigateTo(contentFolder.find(function (f) {
-          return f._id === file._id;
+      if (isDirectory(item)) {
+        navigateTo(contentFolder.find(function (it) {
+          return it._id === item._id;
         }));
       }
 
-      if (isFile(file) && fileTypesAccepted.file) {
-        if (multiple) onCheck(file._id);else onSelectFileId(file._id);
+      if (isValidFile(item, itemTypesAccepted)) {
+        if (multiple) onCheck(item._id);else onSelectItemId(item._id);
       }
     };
-  }, [contentFolder, fileTypesAccepted.file, multiple, navigateTo, onCheck, onSelectFileId]);
-  return /*#__PURE__*/React.createElement(List, null, contentFolder && contentFolder.map(function (file, idx) {
+  }, [contentFolder, itemTypesAccepted, multiple, navigateTo, onCheck, onSelectItemId]);
+  return /*#__PURE__*/React.createElement(List, null, contentFolder && contentFolder.map(function (item, idx) {
     var hasDivider = contentFolder ? idx !== contentFolder.length - 1 : false;
     return /*#__PURE__*/React.createElement(FilePickerBodyItem, {
-      key: file._id,
-      file: file,
-      fileTypesAccepted: fileTypesAccepted,
+      key: item._id,
+      item: item,
+      itemTypesAccepted: itemTypesAccepted,
       multiple: multiple,
       handleChoiceClick: handleChoiceClick,
       handleListItemClick: handleListItemClick,
       onCheck: onCheck,
-      filesIdsSelected: filesIdsSelected,
+      itemsIdsSelected: itemsIdsSelected,
       hasDivider: hasDivider
     });
   }), hasMore && /*#__PURE__*/React.createElement(LoadMore, {
@@ -77,13 +76,10 @@ var FilePickerBody = function FilePickerBody(_ref) {
 };
 
 FilePickerBody.propTypes = {
-  onSelectFileId: PropTypes.func.isRequired,
-  filesIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onSelectItemId: PropTypes.func.isRequired,
+  itemsIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
   folderId: PropTypes.string.isRequired,
   navigateTo: PropTypes.func.isRequired,
-  fileTypesAccepted: PropTypes.exact({
-    file: PropTypes.bool,
-    folder: PropTypes.bool
-  })
+  itemTypesAccepted: PropTypes.arrayOf(PropTypes.string).isRequired
 };
-export default /*#__PURE__*/memo(FilePickerBody);
+export default FilePickerBody;

package/transpiled/react/FilePicker/FilePickerBodyItem.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import filesize from 'filesize';
@@ -14,6 +14,7 @@ import FileTypeFolder from "cozy-ui/transpiled/react/Icons/FileTypeFolder";
 import Checkbox from "cozy-ui/transpiled/react/Checkbox";
 import Radio from "cozy-ui/transpiled/react/Radios";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import { isValidFile, isValidFolder } from "cozy-ui/transpiled/react/helpers/acceptedTypes";
 var styles = {
   "filePickerBreadcrumb-previousPath": "styles__filePickerBreadcrumb-previousPath___3LKJH",
   "filePickerBreadcrumb-icon": "styles__filePickerBreadcrumb-icon___3aFyd",
@@ -38,53 +39,55 @@ var useStyles = makeStyles(function () {
 });
 
 var FilePickerBodyItem = function FilePickerBodyItem(_ref) {
-  var file = _ref.file,
-      fileTypesAccepted = _ref.fileTypesAccepted,
+  var item = _ref.item,
+      itemTypesAccepted = _ref.itemTypesAccepted,
       multiple = _ref.multiple,
       handleChoiceClick = _ref.handleChoiceClick,
       handleListItemClick = _ref.handleListItemClick,
-      filesIdsSelected = _ref.filesIdsSelected,
+      itemsIdsSelected = _ref.itemsIdsSelected,
       hasDivider = _ref.hasDivider;
   var classes = useStyles();
 
   var _useI18n = useI18n(),
       f = _useI18n.f;
 
-  var hasChoice = fileTypesAccepted.file && isFile(file) || fileTypesAccepted.folder && isDirectory(file);
+  var hasChoice = isValidFile(item, itemTypesAccepted) || isValidFolder(item, itemTypesAccepted);
   var Input = multiple ? Checkbox : Radio;
-  var listItemSecondaryContent = isFile(file) ? "".concat(f(file.updated_at, 'DD MMM YYYY'), " - ").concat(filesize(file.size, {
+  var listItemSecondaryContent = isFile(item) ? "".concat(f(item.updated_at, 'DD MMM YYYY'), " - ").concat(filesize(item.size, {
     base: 10
   })) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+    disabled: !hasChoice && isFile(item),
     button: true,
-    className: "u-p-0"
+    className: "u-p-0",
+    "data-testid": "list-item"
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "listitem-onclick",
     className: styles['filePickerBreadcrumb-wrapper'],
-    onClick: handleListItemClick(file)
+    onClick: handleListItemClick(item)
   }, /*#__PURE__*/React.createElement(ListItemIcon, {
     className: classes.listItemIcon
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: isDirectory(file) ? FileTypeFolder : FileTypeText,
+    icon: isDirectory(item) ? FileTypeFolder : FileTypeText,
     width: "32",
     height: "32"
   })), /*#__PURE__*/React.createElement(ListItemText, {
-    primary: file.name,
+    primary: item.name,
     secondary: listItemSecondaryContent
-  })), isDirectory(file) && hasChoice && /*#__PURE__*/React.createElement(Divider, {
+  })), isDirectory(item) && hasChoice && /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
     className: classes.verticalDivider
   }), /*#__PURE__*/React.createElement("div", {
     "data-testid": "choice-onclick",
     className: "u-ph-1 u-pv-half u-h-2 u-flex u-flex-items-center",
-    onClick: hasChoice ? handleChoiceClick(file) : undefined
+    onClick: hasChoice ? handleChoiceClick(item) : undefined
   }, /*#__PURE__*/React.createElement(Input, {
     "data-testid": multiple ? 'checkbox-btn' : 'radio-btn',
     onChange: function onChange() {// handled by onClick on the container
     },
-    checked: filesIdsSelected.includes(file._id),
-    value: file._id,
+    checked: itemsIdsSelected.includes(item._id),
+    value: item._id,
     className: cx('u-p-0', {
       'u-o-100': hasChoice,
       'u-o-0': !hasChoice
@@ -96,15 +99,12 @@ var FilePickerBodyItem = function FilePickerBodyItem(_ref) {
 };
 
 FilePickerBodyItem.propTypes = {
-  file: PropTypes.object.isRequired,
-  fileTypesAccepted: PropTypes.exact({
-    file: PropTypes.bool,
-    folder: PropTypes.bool
-  }),
+  item: PropTypes.object.isRequired,
+  itemTypesAccepted: PropTypes.arrayOf(PropTypes.string).isRequired,
   multiple: PropTypes.bool,
   handleChoiceClick: PropTypes.func.isRequired,
   handleListItemClick: PropTypes.func.isRequired,
-  filesIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  itemsIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
   hasDivider: PropTypes.bool.isRequired
 };
-export default /*#__PURE__*/memo(FilePickerBodyItem);
+export default FilePickerBodyItem;

package/transpiled/react/FilePicker/index.js

@@ -7,20 +7,7 @@ import FilePickerHeader from "cozy-ui/transpiled/react/FilePicker/FilePickerHead
 import FilePickerFooter from "cozy-ui/transpiled/react/FilePicker/FilePickerFooter";
 import FilePickerBody from "cozy-ui/transpiled/react/FilePicker/FilePickerBody";
 import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
-/**
- * @param {string} fileType - Defines the file types that should be accepted ("file" and/or "folder"), separated by commas
- * @returns {{ file: boolean, folder: boolean }}
- */
-
-var getFileTypesAccepted = function getFileTypesAccepted(fileType) {
-  // If accept is falsy, set default to file
-  var acceptedFileType = fileType ? fileType.replaceAll(' ', '').split(',') : ['file'];
-  return {
-    file: acceptedFileType.includes('file'),
-    folder: acceptedFileType.includes('folder')
-  };
-};
-
+import { getCompliantTypes } from "cozy-ui/transpiled/react/helpers/acceptedTypes";
 var useStyles = makeStyles(function () {
   return {
     paper: {
@@ -48,14 +35,14 @@ var FilePicker = function FilePicker(_ref) {
 
   var _useState3 = useState([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      filesIdsSelected = _useState4[0],
-      setFilesIdsSelected = _useState4[1];
+      itemsIdsSelected = _useState4[0],
+      setItemsIdsSelected = _useState4[1];
 
-  var onSelectFileId = function onSelectFileId(fileId) {
+  var onSelectItemId = function onSelectItemId(fileId) {
     if (!multiple) {
       handleConfirm(null, fileId);
     } else {
-      setFilesIdsSelected(fileId);
+      setItemsIdsSelected(fileId);
     }
   };
 
@@ -64,11 +51,11 @@ var FilePicker = function FilePicker(_ref) {
   };
 
   var handleConfirm = function handleConfirm(_, fileId) {
-    onChange(fileId ? fileId : filesIdsSelected);
+    onChange(fileId ? fileId : itemsIdsSelected);
     onClose();
   };
 
-  var fileTypesAccepted = getFileTypesAccepted(accept);
+  var itemTypesAccepted = getCompliantTypes(accept);
   return /*#__PURE__*/React.createElement(FixedDialog, {
     open: true,
     disableGutters: true,
@@ -84,16 +71,16 @@ var FilePicker = function FilePicker(_ref) {
     }),
     content: /*#__PURE__*/React.createElement(FilePickerBody, {
       navigateTo: navigateTo,
-      onSelectFileId: onSelectFileId,
-      filesIdsSelected: filesIdsSelected,
+      onSelectItemId: onSelectItemId,
+      itemsIdsSelected: itemsIdsSelected,
       folderId: folderId,
-      fileTypesAccepted: fileTypesAccepted,
+      itemTypesAccepted: itemTypesAccepted,
       multiple: multiple
     }),
     actions: multiple ? /*#__PURE__*/React.createElement(FilePickerFooter, {
       onClose: onClose,
       onConfirm: handleConfirm,
-      disabledConfirm: filesIdsSelected.length === 0
+      disabledConfirm: itemsIdsSelected.length === 0
     }) : null
   });
 };
@@ -105,7 +92,7 @@ FilePicker.propTypes = {
   multiple: PropTypes.bool
 };
 FilePicker.defaultProps = {
-  accept: 'file',
+  accept: '',
   multiple: false
 };
 export default /*#__PURE__*/memo(FilePicker);

package/transpiled/react/Viewer/AudioViewer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Icon from "cozy-ui/transpiled/react/Icon";
+import FileTypeAudioIcon from "cozy-ui/transpiled/react/Icons/FileTypeAudio";
 import withFileUrl from "cozy-ui/transpiled/react/Viewer/withFileUrl";
 var styles = {
   "CozyTheme--inverted": "styles__CozyTheme--inverted___1II8o",
@@ -31,7 +32,7 @@ var styles = {
   "viewer-pdfMobile": "styles__viewer-pdfMobile___2V75t",
   "viewer-pdfMobile--image": "styles__viewer-pdfMobile--image___2xo_a"
 };
-import FileTypeAudioIcon from 'cozy-ui/transpiled/react/Icons/FileTypeAudio';
+import isTesting from "cozy-ui/transpiled/react/helpers/isTesting";
 
 var AudioViewer = function AudioViewer(_ref) {
   var file = _ref.file,
@@ -46,7 +47,8 @@ var AudioViewer = function AudioViewer(_ref) {
     className: styles['viewer-filename']
   }, file.name), /*#__PURE__*/React.createElement("audio", {
     src: url,
-    controls: "controls"
+    controls: "controls",
+    preload: isTesting() ? 'none' : 'auto'
   }));
 };
 

package/transpiled/react/Viewer/Navigation.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Icon from "cozy-ui/transpiled/react/Icon";
-import { default as ArrowIcon } from 'cozy-ui/transpiled/react/Icons/DropdownClose';
+import { default as ArrowIcon } from "cozy-ui/transpiled/react/Icons/DropdownClose";
 var styles = {
   "CozyTheme--inverted": "styles__CozyTheme--inverted___1II8o",
   "CozyTheme--normal": "styles__CozyTheme--normal___382qj",

package/transpiled/react/helpers/acceptedTypes.js

@@ -0,0 +1,42 @@
+import mimeTypes from 'mime-types';
+import { models } from 'cozy-client';
+var _models$file = models.file,
+    isDirectory = _models$file.isDirectory,
+    isFile = _models$file.isFile;
+/**
+ * @param {string} types - Types we wish to accept ("folder" and/or "extensions/mime" of file), separated by commas
+ * @returns {string[]} All the valid types, if the parameter is undefined or if no type is valid, return an empty array
+ */
+
+export var getCompliantTypes = function getCompliantTypes(types) {
+  if (types) {
+    return types.replaceAll(' ', '').split(',').filter(function (type) {
+      return type !== 'folder' ? !!mimeTypes.contentType(type) : true;
+    });
+  }
+
+  return [];
+};
+/**
+ * Check if Item is a file with accepted extension/mime
+ *
+ * @param {object} item - file or folder
+ * @param {string[]} validTypes - List of accepted types
+ * @returns {boolean}
+ */
+
+export var isValidFile = function isValidFile(item, validTypes) {
+  var fileTypesAccepted = validTypes.includes(".".concat(item.name.split('.').pop())) || validTypes.includes(item.mime);
+  return isFile(item) && (fileTypesAccepted || validTypes.length === 0);
+};
+/**
+ * Check if Item is a folder with accepted type
+ *
+ * @param {object} item - file or folder
+ * @param {string[]} validTypes - List of accepted types
+ * @returns {boolean}
+ */
+
+export var isValidFolder = function isValidFolder(item, validTypes) {
+  return isDirectory(item) && validTypes.includes("folder");
+};

package/transpiled/react/helpers/makeStyles.js

@@ -0,0 +1,2 @@
+import { makeStyles } from '@material-ui/core/styles';
+export default makeStyles;

package/transpiled/react/index.js

@@ -21,6 +21,7 @@ export { default as AccordionSummary } from './MuiCozyTheme/AccordionSummary';
 export { default as AccordionDetails } from './MuiCozyTheme/AccordionDetails';
 export { default as Toggle } from './Toggle';
 export { default as withBreakpoints } from './helpers/withBreakpoints';
+export { default as makeStyles } from './helpers/makeStyles';
 export { default as useBreakpoints } from './hooks/useBreakpoints';
 export { default as useBrowserOffline } from './hooks/useBrowserOffline';
 export { Media, Img, Bd } from './Media';