cozy-ui 111.4.0 → 111.6.0

package/react/Snackbar/index.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
 import MuiSnackbar from '@material-ui/core/Snackbar'
+import React, { forwardRef } from 'react'
 
 const Snackbar = forwardRef(({ children, ...props }, ref) => {
   return (

package/react/Spinner/index.jsx

@@ -1,13 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../Icon'
+import SpinnerIcon from '../Icons/Spinner'
 import Typography from '../Typography'
 import { translate } from '../providers/I18n'
-import SpinnerIcon from '../Icons/Spinner'
-
-import styles from './styles.styl'
 
 export const Spinner = ({
   t,

package/react/SquareAppIcon/SquareAppIcon.spec.js

@@ -1,14 +1,14 @@
 /* eslint-env jest */
 
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import CozyClient from 'cozy-client'
 
+import SquareAppIcon from '.'
 import Icon from '../Icon'
 import CozyIcon from '../Icons/Cozy'
 import DemoProvider from '../providers/DemoProvider'
-import SquareAppIcon from '.'
 
 const appMock = {
   slug: 'test',

package/react/SquareAppIcon/index.jsx

@@ -1,25 +1,25 @@
-import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import PropTypes from 'prop-types'
 import get from 'lodash/get'
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
+import styles from './styles.styl'
 import AppIcon from '../AppIcon'
+import { nameToColor } from '../Avatar/helpers'
 import Badge from '../Badge'
 import Icon from '../Icon'
 import IconCheckAnimated from '../Icons/IconCheckAnimated'
-import InfosBadge from '../InfosBadge'
-import Spinner from '../Spinner'
 import SvgIconCrossAnimated from '../Icons/IconCrossAnimated'
-import Typography from '../Typography'
 import iconOut from '../Icons/LinkOut'
 import iconPlus from '../Icons/Plus'
 import iconWarning from '../Icons/WarningCircle'
-import { alpha, makeStyles } from '../styles'
-import { nameToColor } from '../Avatar/helpers'
+import InfosBadge from '../InfosBadge'
+import Spinner from '../Spinner'
+import Typography from '../Typography'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-
-import styles from './styles.styl'
+import { alpha, makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   name: {

package/react/Stack/index.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 
 const Stack = ({ spacing, tag: Tag, ...props }) => {

package/react/Stepper/testing.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import { Stepper, Step, StepLabel, StepButton } from '../Stepper'
 

package/react/Tabs/index.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import MuiTabs from '@material-ui/core/Tabs'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import useBreakpoints from '../providers/Breakpoints'
 

package/react/TextField/MobileSelect.jsx

@@ -1,16 +1,16 @@
-import React, { forwardRef, useEffect, useState } from 'react'
-import merge from 'lodash/merge'
 import MuiTextField from '@material-ui/core/TextField'
+import merge from 'lodash/merge'
 import PropTypes from 'prop-types'
+import React, { forwardRef, useEffect, useState } from 'react'
 
+import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
+import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import InputAdornment from '../InputAdornment'
-import ListItemText from '../ListItemText'
 import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
 import Radio from '../Radios'
-import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
-import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
 
 const MobileSelect = forwardRef(
   (
@@ -31,11 +31,13 @@ const MobileSelect = forwardRef(
       onClick?.()
     }
 
-    const handleItemClick = ({ value, children, onClick }) => ev => {
-      onClick?.(merge({}, ev, { target: { value } }))
-      setState({ label: children, value })
-      onChange?.({ target: { value } })
-    }
+    const handleItemClick =
+      ({ value, children, onClick }) =>
+      ev => {
+        onClick?.(merge({}, ev, { target: { value } }))
+        setState({ label: children, value })
+        onChange?.({ target: { value } })
+      }
 
     const handleClose = () => {
       setShowDrawer(false)

package/react/TextField/index.jsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react'
 import MuiTextField from '@material-ui/core/TextField'
+import React, { forwardRef } from 'react'
 
+import MobileSelect from './MobileSelect'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import { getRandomUUID } from '../helpers/getRandomUUID'
 import { useBreakpoints } from '../providers/Breakpoints'
-import MobileSelect from './MobileSelect'
 
 const TextField = forwardRef(({ select, options, children, ...props }, ref) => {
   // A11Y, https://v4.mui.com/api/text-field/#props

package/react/Textarea/index.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 
 const Textarea = React.forwardRef((props, ref) => {

package/react/Thumbnail/index.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import styles from './Thumbnail.styl'
 

package/react/Tile/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
-import Typography from '../Typography'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
+import Typography from '../Typography'
 
 const Tile = ({ children, className, tag: Tag, isSecondary, ...props }) => {
   return (

package/react/Toggle/index.jsx

@@ -1,7 +1,7 @@
-import styles from './styles.styl'
-
-import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import styles from './styles.styl'
 
 class Toggle extends Component {
   componentDidMount() {

package/react/Typography/index.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
 import MuiTypography from '@material-ui/core/Typography'
+import React, { forwardRef } from 'react'
 
 const Typography = forwardRef(({ color, variant, children, ...props }, ref) => {
   const madeColor =

package/react/UnorderedList/index.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
+
 import styles from './styles.styl'
 import Stack from '../Stack'
 

package/react/UploadQueue/index.jsx

@@ -1,17 +1,18 @@
-import React, { Component, useState } from 'react'
-import cx from 'classnames'
 import LinearProgress from '@material-ui/core/LinearProgress'
+import cx from 'classnames'
+import React, { Component, useState } from 'react'
 import { useIntervalWhen } from 'rooks'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 
-import { withStyles } from '../styles'
+import localeEn from './locales/en.json'
+import localeEs from './locales/es.json'
+import localeFr from './locales/fr.json'
+import styles from './styles.styl'
+import Icon from '../Icon'
+import CheckIcon from '../Icons/Check'
 import CrossIcon from '../Icons/Cross'
 import WarningIcon from '../Icons/Warning'
-import CheckIcon from '../Icons/Check'
-import { translate, useI18n } from '../providers/I18n'
-import withLocales from '../providers/I18n/withLocales'
-import Icon from '../Icon'
 import Spinner from '../Spinner'
 import Typography from '../Typography'
 import List from '../List'
@@ -20,12 +21,10 @@ import ListItemText from '../ListItemText'
 import ListItemIcon from '../ListItemIcon'
 import { Img } from '../deprecated/Media'
 import Button from '../deprecated/Button'
-
-import styles from './styles.styl'
-import localeEn from './locales/en.json'
-import localeEs from './locales/es.json'
-import localeFr from './locales/fr.json'
+import { translate, useI18n } from '../providers/I18n'
 import { formatLocallyDistanceToNow } from '../providers/I18n/format'
+import withLocales from '../providers/I18n/withLocales'
+import { withStyles } from '../styles'
 
 const locales = {
   en: localeEn,

package/react/UploadQueue/index.spec.jsx

@@ -1,6 +1,7 @@
+import { render } from '@testing-library/react'
 import React from 'react'
+
 import { UploadQueue, formatRemainingTime } from '.'
-import { render } from '@testing-library/react'
 import { useI18n } from '../providers/I18n'
 
 jest.mock('../providers/I18n/withLocales', () =>

package/react/Viewer/Footer/BottomSheetContent.jsx

@@ -1,8 +1,7 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { BottomSheetItem } from '../../BottomSheet'
-
 import getPanelBlocks, { getPanelBlocksSpecs } from '../Panel/getPanelBlocks'
 
 const BottomSheetContent = ({ file, isPublic }) => {

package/react/Viewer/Footer/DownloadButton.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { useClient } from 'cozy-client'
 
-import { useI18n } from '../../providers/I18n'
+import Button from '../../Buttons'
 import Icon from '../../Icon'
 import IconButton from '../../IconButton'
 import DownloadIcon from '../../Icons/Download'
-import Button from '../../Buttons'
 import Alerter from '../../deprecated/Alerter'
+import { useI18n } from '../../providers/I18n'
 
 const DownloadButton = ({ file, variant }) => {
   const client = useClient()

package/react/Viewer/Footer/FooterActionButtons.jsx

@@ -1,5 +1,5 @@
-import { cloneElement } from 'react'
 import PropTypes from 'prop-types'
+import { cloneElement } from 'react'
 
 import { mapToAllChildren } from './helpers'
 

package/react/Viewer/Footer/FooterActionButtons.spec.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import FooterActionButtons from './FooterActionButtons'
 

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,13 +1,13 @@
-import React, { useMemo } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
 
+import BottomSheetContent from './BottomSheetContent'
+import { extractChildrenCompByName } from './helpers'
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 import { makeStyles } from '../../styles'
-import { isValidForPanel } from '../helpers'
 import PrintButton from '../components/PrintButton'
-import { extractChildrenCompByName } from './helpers'
-import BottomSheetContent from './BottomSheetContent'
+import { isValidForPanel } from '../helpers'
 
 const FooterButtons = ({
   file,

package/react/Viewer/Footer/ForwardButton.jsx

@@ -1,18 +1,18 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { useClient } from 'cozy-client'
+import { getSharingLink } from 'cozy-client/dist/models/sharing'
 import { isIOS, isMobileApp } from 'cozy-device-helper'
 
-import { useI18n } from '../../providers/I18n'
+import { exportFilesNative } from './helpers'
+import Button from '../../Buttons'
 import Icon from '../../Icon'
 import IconButton from '../../IconButton'
 import ReplyIcon from '../../Icons/Reply'
 import ShareIosIcon from '../../Icons/ShareIos'
-import Button from '../../Buttons'
 import Alerter from '../../deprecated/Alerter'
-import { exportFilesNative } from './helpers'
-import { getSharingLink } from 'cozy-client/dist/models/sharing'
+import { useI18n } from '../../providers/I18n'
 
 const ForwardIcon = isIOS() ? ShareIosIcon : ReplyIcon
 

package/react/Viewer/Footer/ForwardButton.spec.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
 
 import { getSharingLink } from 'cozy-client/dist/models/sharing'
 import { isMobileApp } from 'cozy-device-helper'
 
-import DemoProvider from '../docs/DemoProvider'
 import ForwardButton from './ForwardButton'
 import { exportFilesNative } from './helpers'
+import DemoProvider from '../docs/DemoProvider'
 
 jest.mock('cozy-device-helper')
 jest.mock('cozy-client/dist/models/sharing', () => ({

package/react/Viewer/Footer/ForwardOrDownloadButton.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { useClient } from 'cozy-client'
 
-import ForwardButton from './ForwardButton'
 import DownloadButton from './DownloadButton'
+import ForwardButton from './ForwardButton'
 import { shouldBeForwardButton } from './helpers'
 
 const ForwardOrDownloadButton = ({ file, ...props }) => {

package/react/Viewer/Footer/Sharing.jsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import { ShareModal, ShareButton } from 'cozy-sharing'
 import { SharingProvider } from 'cozy-sharing/dist/SharingProvider'
 
-import IconButton from '../../IconButton'
 import Icon from '../../Icon'
+import IconButton from '../../IconButton'
 import ShareIcon from '../../Icons/Share'
 
 const Sharing = ({ file, variant }) => {

package/react/Viewer/Footer/helpers.js

@@ -1,4 +1,5 @@
 import { isValidElement, Children, cloneElement } from 'react'
+
 import { saveFileWithCordova } from 'cozy-client/dist/models/fsnative'
 import { isIOS, isMobileApp } from 'cozy-device-helper'
 

package/react/Viewer/NoViewer/DownloadButton.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { withClient } from 'cozy-client'
 
-import { useI18n } from '../../providers/I18n'
-import { FileDoctype } from '../../proptypes'
 import Button from '../../deprecated/Button'
-
+import { FileDoctype } from '../../proptypes'
+import { useI18n } from '../../providers/I18n'
 import { downloadFile } from '../helpers'
 
 const DownloadButton = ({ client, file, url }) => {

package/react/Viewer/NoViewer/FileIcon.jsx

@@ -3,12 +3,12 @@ import React from 'react'
 import Icon from '../../Icon'
 import FileTypeBinIcon from '../../Icons/FileTypeBin'
 import FileTypeCodeIcon from '../../Icons/FileTypeCode'
+import FileTypeFilesIcon from '../../Icons/FileTypeFiles'
+import FileTypePdfIcon from '../../Icons/FileTypePdf'
 import FileTypeSheetIcon from '../../Icons/FileTypeSheet'
 import FileTypeSlideIcon from '../../Icons/FileTypeSlide'
 import FileTypeTextIcon from '../../Icons/FileTypeText'
 import FileTypeZipIcon from '../../Icons/FileTypeZip'
-import FileTypePdfIcon from '../../Icons/FileTypePdf'
-import FileTypeFilesIcon from '../../Icons/FileTypeFiles'
 
 const FileIcon = ({ type }) => {
   let icon

package/react/Viewer/NoViewer/NoViewer.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import FileIcon from './FileIcon'
+import React from 'react'
+
 import DownloadButton from './DownloadButton'
-import styles from '../ViewersByFile/styles.styl'
+import FileIcon from './FileIcon'
 import { FileDoctype } from '../../proptypes'
+import styles from '../ViewersByFile/styles.styl'
 
 const NoViewer = ({ file, url, renderFallbackExtraContent }) => (
   <div className={styles['viewer-noviewer']}>

package/react/Viewer/NoViewer/NoViewer.spec.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import { render } from '@testing-library/react'
-
-import DemoProvider from '../docs/DemoProvider'
+import React from 'react'
 
 import NoViewer from './NoViewer'
+import DemoProvider from '../docs/DemoProvider'
 
 const file = {
   _id: 'notSupported',

package/react/Viewer/Panel/ActionMenuDesktop.jsx

@@ -1,14 +1,14 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import styles from './styles.styl'
+import React, { forwardRef } from 'react'
 
+import styles from './styles.styl'
+import AppLinker from '../../AppLinker'
 import Icon from '../../Icon'
 import Copy from '../../Icons/Copy'
 import Edit from '../../Icons/Rename'
-import ActionMenu, { ActionMenuItem } from '../../deprecated/ActionMenu'
 import Typography from '../../Typography'
+import ActionMenu, { ActionMenuItem } from '../../deprecated/ActionMenu'
 import { useI18n } from '../../providers/I18n'
-import AppLinker from '../../AppLinker'
 
 const ActionMenuDesktop = forwardRef(
   ({ onClose, isEditable, actions, appLink, appSlug }, ref) => {

package/react/Viewer/Panel/ActionMenuMobile.jsx

@@ -1,16 +1,16 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import AppLinker from '../../AppLinker'
+import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
+import Icon from '../../Icon'
+import Copy from '../../Icons/Copy'
+import Edit from '../../Icons/Rename'
 import List from '../../List'
 import ListItem from '../../ListItem'
 import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
-import Icon from '../../Icon'
-import Copy from '../../Icons/Copy'
-import Edit from '../../Icons/Rename'
-import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
 import { useI18n } from '../../providers/I18n'
-import AppLinker from '../../AppLinker'
 
 const ActionMenuMobile = ({
   onClose,

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -1,19 +1,19 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
 
+import ActionMenuDesktop from './ActionMenuDesktop'
+import ActionMenuMobile from './ActionMenuMobile'
+import { useAlert } from '../../providers/Alert'
 import useBreakpoints from '../../providers/Breakpoints'
 import { useI18n } from '../../providers/I18n'
-import { useAlert } from '../../providers/Alert'
 import {
   buildEditAttributePath,
   isEditableAttribute,
   getCurrentModel
 } from '../helpers'
 import useActionMenuContext from '../providers/ActionMenuProvider'
-import ActionMenuMobile from './ActionMenuMobile'
-import ActionMenuDesktop from './ActionMenuDesktop'
 
 const mespapiersAppSlug = 'mespapiers'
 

package/react/Viewer/Panel/Certifications.jsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import has from 'lodash/has'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-import Typography from '../../Typography'
-import { Media, Img, Bd } from '../../deprecated/Media'
 import Icon, { iconPropType } from '../../Icon'
 import CarbonCopyIcon from '../../Icons/CarbonCopy'
 import SafeIcon from '../../Icons/Safe'
+import Typography from '../../Typography'
+import { Media, Img, Bd } from '../../deprecated/Media'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 
 const Certification = ({ icon, title, caption }) => {
   return (
-    <div className={'u-ph-2 u-pv-1'}>
+    <div className="u-ph-2 u-pv-1">
       <Media className="u-mb-half" align="top">
         <Img className="u-mr-half">
           <Icon icon={icon} />

package/react/Viewer/Panel/PanelContent.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-import Stack from '../../Stack'
+import getPanelBlocks, { getPanelBlocksSpecs } from './getPanelBlocks'
 import Paper from '../../Paper'
+import Stack from '../../Stack'
 import Typography from '../../Typography'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 
-import getPanelBlocks, { getPanelBlocksSpecs } from './getPanelBlocks'
-
 const PanelContent = ({ file, isPublic, t }) => {
   const panelBlocks = getPanelBlocks({
     panelBlocksSpecs: getPanelBlocksSpecs(isPublic),
@@ -33,7 +32,7 @@ const PanelContent = ({ file, isPublic, t }) => {
           elevation={2}
           square
         >
-          <Typography variant="h4" className={'u-pv-1'}>
+          <Typography variant="h4" className="u-pv-1">
             <PanelBlock file={file} />
           </Typography>
         </Paper>

package/react/Viewer/Panel/Qualification.jsx

@@ -1,5 +1,5 @@
-import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
 import PropTypes from 'prop-types'
+import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
 
 import {
   isExpiringSoon,
@@ -8,14 +8,14 @@ import {
   getMetadataQualificationType
 } from 'cozy-client/dist/models/paper'
 
-import List from '../../List'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-import ExpirationAlert from '../components/ExpirationAlert'
 import ActionMenuWrapper from './ActionMenuWrapper'
 import QualificationListItemContact from './QualificationListItemContact'
 import QualificationListItemDate from './QualificationListItemDate'
 import QualificationListItemInformation from './QualificationListItemInformation'
 import QualificationListItemOther from './QualificationListItemOther'
+import List from '../../List'
+import ExpirationAlert from '../components/ExpirationAlert'
+import { withViewerLocales } from '../hoc/withViewerLocales'
 
 const ComponentFromMetadataQualificationType = {
   contact: QualificationListItemContact,
@@ -76,7 +76,7 @@ const Qualification = ({ file }) => {
       {isExpiringSoon(file) && !isExpirationAlertHidden(file) && (
         <ExpirationAlert file={file} />
       )}
-      <List className={'u-pv-1'}>
+      <List className="u-pv-1">
         {formattedMetadataQualification.map((meta, idx) => {
           const { name } = meta
           const metadataQualificationType = getMetadataQualificationType(name)