cozy-ui 111.5.0 → 111.6.0

package/react/AppSections/index.spec.jsx

@@ -2,13 +2,13 @@
 
 /* eslint-env jest */
 
-import React from 'react'
 import { shallow } from 'enzyme'
-import { Sections } from './Sections'
+import React from 'react'
 
-import mockApps from '../mocks/apps'
-import { I18nContext } from '../jestLib/I18n'
+import { Sections } from './Sections'
 import en from './locales/en.json'
+import { I18nContext } from '../jestLib/I18n'
+import mockApps from '../mocks/apps'
 
 const i18nContext = I18nContext({ locale: en })
 const tMock = i18nContext.t

package/react/AppSections/search.js

@@ -1,6 +1,6 @@
-import overEvery from 'lodash/overEvery'
 import mapValues from 'lodash/mapValues'
 import matches from 'lodash/matches'
+import overEvery from 'lodash/overEvery'
 
 import { APP_TYPE } from './constants'
 

package/react/AppTile/AppTile.spec.jsx

@@ -2,15 +2,15 @@
 
 /* eslint-env jest */
 
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
+
 import CozyClient, { CozyProvider } from 'cozy-client'
 
+import AppTile from '.'
 import en from '../AppSections/locales/en.json'
 import I18n from '../providers/I18n'
 
-import AppTile from '.'
-
 const appMock = {
   slug: 'test',
   editor: 'cozy',

package/react/AppTile/index.jsx

@@ -1,7 +1,14 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
 import React from 'react'
 
+import { APP_STATUS, getCurrentStatusLabel } from './helpers'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import styles from './styles.styl'
 import AppIcon from '../AppIcon'
-import PropTypes from 'prop-types'
+import Icon from '../Icon'
+import WrenchCircleIcon from '../Icons/WrenchCircle'
 import Tile, {
   TileTitle,
   TileSubtitle,
@@ -9,18 +16,9 @@ import Tile, {
   TileIcon,
   TileDescription
 } from '../Tile'
-
-import { createUseI18n } from '../providers/I18n'
-import { AppDoctype } from '../proptypes'
-
-import { APP_STATUS, getCurrentStatusLabel } from './helpers'
-import styles from './styles.styl'
-import en from './locales/en.json'
-import fr from './locales/fr.json'
-import Icon from '../Icon'
-import WrenchCircleIcon from '../Icons/WrenchCircle'
 import palette from '../palette'
-import cx from 'classnames'
+import { AppDoctype } from '../proptypes'
+import { createUseI18n } from '../providers/I18n'
 
 const locales = { en, fr }
 
@@ -66,9 +64,8 @@ export const AppTile = ({
       type="button"
       onClick={onClick}
       className={cx({
-        [styles[
-          'AppTile-container-maintenance'
-        ]]: isInMaintenanceWithSpecificDisplay
+        [styles['AppTile-container-maintenance']]:
+          isInMaintenanceWithSpecificDisplay
       })}
       isSecondary={statusLabel === APP_STATUS.installed}
     >

package/react/AppTitle/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
-import cx from 'classnames'
 import Typography from '@material-ui/core/Typography'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 
 export const AppTitle = ({ children, tag, className, ...restProps }) => {

package/react/Avatar/index.jsx

@@ -1,13 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
-import PropTypes from 'prop-types'
 import assign from 'lodash/assign'
+import PropTypes from 'prop-types'
+import React from 'react'
 
+import { nameToColor } from './helpers'
 import styles from './styles.styl'
+import { createSizeStyle } from '../Circle'
 import Icon, { iconPropType } from '../Icon'
 import PeopleIcon from '../Icons/People'
-import { createSizeStyle } from '../Circle'
-import { nameToColor } from './helpers'
 
 const createBgColorStyle = ({ text, textId }) =>
   text ? { backgroundColor: `${nameToColor(textId || text)}` } : {}

package/react/Backdrop/index.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import MuiBackdrop from '@material-ui/core/Backdrop'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import { makeStyles } from '../styles'
 

package/react/Badge/index.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import MuiBadge from '@material-ui/core/Badge'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import MuiBadge from '@material-ui/core/Badge'
+import React from 'react'
 
 const Badge = ({
   classes = {},

package/react/Banner/index.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import Paper from '../Paper'
-import Grid from '../Grid'
+import styles from './styles.styl'
 import Divider from '../Divider'
+import Grid from '../Grid'
+import Paper from '../Paper'
 import Typography from '../Typography'
 
-import styles from './styles.styl'
-
 /**
  * A banner displays a prominent message and related optional actions.
  */

package/react/Banner/index.spec.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
+
 import Banner from '.'
 
 describe('Grid', () => {

package/react/BarButton/index.jsx

@@ -1,9 +1,8 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
 
 import styles from './styles.styl'
-
 import Icon from '../Icon'
 
 class MaybeLink extends PureComponent {

package/react/BarContextProvider/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { I18nContext } from '../providers/I18n'
-import { BreakpointsProvider } from '../providers/Breakpoints'
+import { Provider } from 'react-redux'
 
 import { CozyProvider } from 'cozy-client'
-import { Provider } from 'react-redux'
 import { WebviewIntentProvider } from 'cozy-intent'
 
+import { BreakpointsProvider } from '../providers/Breakpoints'
+import { I18nContext } from '../providers/I18n'
+
 const BarContextProvider = ({
   children,
   store,

package/react/BarContextProvider/index.spec.jsx

@@ -1,14 +1,14 @@
+import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider, useStore } from 'react-redux'
 import configureStore from 'redux-mock-store'
-import { render } from '@testing-library/react'
 
-import { useWebviewIntent } from 'cozy-intent'
 import CozyClient, {
   createMockClient,
   CozyProvider,
   useClient
 } from 'cozy-client'
+import { useWebviewIntent } from 'cozy-intent'
 
 import BarContextProvider from '.'
 import I18n, { useI18n, translate } from '../providers/I18n'

package/react/BarTitle/index.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-
-import Typography from '../Typography'
+import React from 'react'
 
 import styles from './styles.styl'
+import Typography from '../Typography'
 
 const BarTitle = ({ noWrap, children }) => {
   return (

package/react/BottomSheet/BottomSheet.jsx

@@ -1,3 +1,7 @@
+import Fade from '@material-ui/core/Fade'
+import Portal from '@material-ui/core/Portal'
+import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
+import PropTypes from 'prop-types'
 import React, {
   useState,
   useEffect,
@@ -7,19 +11,10 @@ import React, {
   memo,
   Fragment
 } from 'react'
-import PropTypes from 'prop-types'
-import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
 import { useMutationObserver, useTimeoutWhen } from 'rooks'
-import Fade from '@material-ui/core/Fade'
-import Portal from '@material-ui/core/Portal'
 
-import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
-
-import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
-import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
-import Stack from '../Stack'
-import Paper from '../Paper'
 import BackdropOrFragment from './BackdropOrFragment'
+import { ANIMATION_DURATION } from './constants'
 import {
   computeMaxHeight,
   computeMediumHeight,
@@ -31,8 +26,12 @@ import {
   computeBottomSpacer,
   getCssValue
 } from './helpers'
-import { ANIMATION_DURATION } from './constants'
 import stylescss from './styles.styl'
+import Paper from '../Paper'
+import Stack from '../Stack'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 
 const createContainerWrapperStyles = () => ({
   container: {

package/react/BottomSheet/BottomSheetHeader.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
 import { BottomSheetItem } from '../BottomSheet'
 

package/react/BottomSheet/BottomSheetItem.jsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import Paper from '../Paper'
 

package/react/BottomSheet/BottomSheetTitle.jsx

@@ -1,13 +1,13 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import { BottomSheetItem } from '../BottomSheet'
 import Icon, { iconPropType } from '../Icon'
-import ListItemText from '../ListItemText'
 import List from '../List'
 import ListItem from '../ListItem'
 import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
 import Typography from '../Typography'
 
 const BottomSheetTitle = forwardRef(({ className, label, icon }, ref) => {

package/react/Buttons/index.jsx

@@ -1,8 +1,7 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import cx from 'classnames'
-
 import MuiButton from '@material-ui/core/Button'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import Icon from '../Icon'
 import SpinnerIcon from '../Icons/Spinner'

package/react/Card/index.jsx

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

package/react/Checkbox/index.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-
 import MUICheckbox from '@material-ui/core/Checkbox'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import createDepreciationLogger from '../helpers/createDepreciationLogger'
 

package/react/Chips/index.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
+import MuiChip from '@material-ui/core/Chip'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import MuiChip from '@material-ui/core/Chip'
+import React, { forwardRef } from 'react'
 
 const Chips = forwardRef(
   (

package/react/CipherIcon/index.jsx

@@ -1,12 +1,13 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
-import AppIcon from '../AppIcon'
-import Icon from '../Icon'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 import { withClient } from 'cozy-client'
-import { AppDoctype } from '../proptypes'
 
+import AppIcon from '../AppIcon'
+import Icon from '../Icon'
 import KeychainIcon from '../Icons/Keychain'
+import { AppDoctype } from '../proptypes'
 
 class CipherIcon extends React.PureComponent {
   constructor(props) {

package/react/CipherIcon/index.spec.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
+import React from 'react'
+
 import CipherIcon from '.'
 
 jest.mock('cozy-client', () => ({

package/react/Circle/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 './styles.styl'
 

package/react/CircleButton/index.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { makeStyles } from '../styles'
+import { makeTypoColor, makeButtonShadow } from './helpers'
 import Box from '../Box'
 import IconButton from '../IconButton'
 import Typography from '../Typography'
-import { makeTypoColor, makeButtonShadow } from './helpers'
 import { getRandomUUID } from '../helpers/getRandomUUID'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   iconButton: {

package/react/CircularChart/CircularChartProgress.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import { makeStyles } from '../styles'
 import MuiCircularProgress from '../CircularProgress'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
   root: {

package/react/CircularChart/CircularProgressWithBackground.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import Box from '../Box'
 import CircularChartProgress from './CircularChartProgress'
+import Box from '../Box'
 
 const CircularProgressWithBackground = forwardRef(
   ({ value, color, backgroundColor, size, thickness, ...props }, ref) => {

package/react/CircularChart/index.jsx

@@ -1,16 +1,14 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import Box from '../Box'
 import CircularProgressWithBackground from './CircularProgressWithBackground'
 import { makeSizeAndThickness } from './helpers'
+import Box from '../Box'
 
 const CircularChart = forwardRef(
   ({ size, primaryProps, secondaryProps, children, ...props }, ref) => {
-    const {
-      primarySizeAndThickness,
-      secondarySizeAndThickness
-    } = makeSizeAndThickness(size, Boolean(secondaryProps))
+    const { primarySizeAndThickness, secondarySizeAndThickness } =
+      makeSizeAndThickness(size, Boolean(secondaryProps))
 
     return (
       <Box

package/react/ContactPicker/index.jsx

@@ -1,11 +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 { models } from 'cozy-client'
 const { getDisplayName } = models.contact
 
-import ContactsListModal from '../ContactsListModal'
 import styles from './styles.styl'
+import ContactsListModal from '../ContactsListModal'
 
 const SelectControl = props => {
   const { className, children, ...rest } = props

package/react/ContactPicker/index.spec.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import { render, fireEvent, waitFor } from '@testing-library/react'
-
-import DemoProvider from '../providers/DemoProvider'
-import mockClient from '../ContactsListModal/mockClient'
-import contacts from '../ContactsList/_mockContacts.json'
+import React from 'react'
 
 import ContactPicker from '.'
+import contacts from '../ContactsList/_mockContacts.json'
+import mockClient from '../ContactsListModal/mockClient'
+import DemoProvider from '../providers/DemoProvider'
 
 const Wrapper = ({ children }) => {
   return <DemoProvider client={mockClient}>{children}</DemoProvider>

package/react/ContactsList/ContactRow.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { models } from 'cozy-client'
 
-import ListItem from '../ListItem'
-import ContactPhone from './Contacts/ContactPhone'
-import ContactIdentity from './Contacts/ContactIdentity'
 import ContactCozy from './Contacts/ContactCozy'
 import ContactEmail from './Contacts/ContactEmail'
+import ContactIdentity from './Contacts/ContactIdentity'
+import ContactPhone from './Contacts/ContactPhone'
+import ListItem from '../ListItem'
 import useBreakpoints from '../providers/Breakpoints'
 
 const { getPrimaryCozy, getPrimaryPhone, getPrimaryEmail } = models.contact

package/react/ContactsList/ContactRow.spec.js

@@ -1,11 +1,12 @@
-import React from 'react'
 import { mount } from 'enzyme'
-
-import { BreakpointsProvider } from '../providers/Breakpoints'
-import ContactRow from './ContactRow'
+import React from 'react'
 import renderer from 'react-test-renderer'
+
 import logger from 'cozy-logger'
 
+import ContactRow from './ContactRow'
+import { BreakpointsProvider } from '../providers/Breakpoints'
+
 logger.setLevel('error')
 
 const makeContact = attrs => ({

package/react/ContactsList/Contacts/ContactCozy.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { TableCell } from '../../deprecated/Table'
 import styles from '../styles.styl'

package/react/ContactsList/Contacts/ContactEmail.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { TableCell } from '../../deprecated/Table'
 import styles from '../styles.styl'

package/react/ContactsList/Contacts/ContactIdentity.jsx

@@ -1,10 +1,11 @@
+import PropTypes from 'prop-types'
 import React from 'react'
+
 import { models } from 'cozy-client'
-import PropTypes from 'prop-types'
 
+import ContactName from './ContactName'
 import { Avatar } from '../../Avatar'
 import { TableCell } from '../../deprecated/Table'
-import ContactName from './ContactName'
 import styles from '../styles.styl'
 
 const { getDisplayName, getInitials } = models.contact
@@ -21,9 +22,7 @@ const ContactIdentity = ({ contact }) => {
   return (
     <TableCell
       data-testid="ContactIdentity" // used by a test in cozy-contacts
-      className={`${
-        styles['contact-identity']
-      } u-flex u-flex-items-center u-ellipsis u-p-0`}
+      className={`${styles['contact-identity']} u-flex u-flex-items-center u-ellipsis u-p-0`}
     >
       <Avatar text={getInitials(contact)} size="small" />
       <ContactName displayName={displayName} familyName={name.familyName} />

package/react/ContactsList/Contacts/ContactName.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 Typography from '../../Typography'
 

package/react/ContactsList/Contacts/ContactPhone.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { TableCell } from '../../deprecated/Table'
 import styles from '../styles.styl'

package/react/ContactsList/ContactsList.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { useI18n } from '../providers/I18n'
-import { Table } from '../deprecated/Table'
+import ContactRow from './ContactRow'
+import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
+import withContactsListLocales from './locales/withContactsListLocales'
 import List from '../List'
 import ListSubheader from '../ListSubheader'
-import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
-import ContactRow from './ContactRow'
+import { Table } from '../deprecated/Table'
 import useBreakpoints from '../providers/Breakpoints'
-import withContactsListLocales from './locales/withContactsListLocales'
+import { useI18n } from '../providers/I18n'
 
 const ContactsList = ({ contacts, onItemClick, ...rest }) => {
   const { t } = useI18n()

package/react/ContactsList/locales/withContactsListLocales.jsx

@@ -1,7 +1,6 @@
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
-
 import en from './en.json'
 import fr from './fr.json'
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 const locales = {
   en,