cozy-ui 111.5.0 → 111.7.0

package/react/ListItem/ListItemContact/index.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { getDisplayName } from 'cozy-client/dist/models/contact'
 
+import useActions from './useActions'
 import Filename from '../../Filename'
 import Icon from '../../Icon'
 import ContactsIcon from '../../Icons/Contacts'
-
 import ListItemBase from '../ListItemBase'
-import useActions from './useActions'
 
 const ListItemContact = ({
   contact,

package/react/ListItem/ListItemContact/useActions.jsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react'
 
-import { makeActions, modify, viewInContacts } from '../../ActionsMenu/Actions'
-
 import { makeOptionalActions } from './helpers'
+import { makeActions, modify, viewInContacts } from '../../ActionsMenu/Actions'
 
 const useActions = contact => {
   const optionalActions = useMemo(() => makeOptionalActions(contact), [contact])

package/react/ListItem/ListItemFile/ExpirationAnnotation.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   computeExpirationDate,
@@ -10,7 +10,6 @@ import {
 
 import Typography from '../../Typography'
 import { useI18n } from '../../providers/I18n'
-
 import withListItemLocales from '../hoc/withListItemLocales'
 
 const ExpirationAnnotation = ({ file }) => {

package/react/ListItem/ListItemFile/ItemIcon.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { useClient } from 'cozy-client'
 import { isNote } from 'cozy-client/dist/models/file'
 
+import FileImageLoader from '../../FileImageLoader'
 import Icon from '../../Icon'
-import FiletypeTextIcon from '../../Icons/FileTypeText'
 import FiletypeNoteIcon from '../../Icons/FileTypeNote'
-import FileImageLoader from '../../FileImageLoader'
-import Thumbnail from '../../Thumbnail'
+import FiletypeTextIcon from '../../Icons/FileTypeText'
 import Skeleton from '../../Skeleton'
+import Thumbnail from '../../Thumbnail'
 
 const ItemIcon = ({ icon, file }) => {
   const client = useClient()

package/react/ListItem/ListItemFile/PrimaryText.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 

package/react/ListItem/ListItemFile/SecondaryText.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { isExpired, isExpiringSoon } from 'cozy-client/dist/models/paper'
 
-import { useI18n } from '../../providers/I18n'
-
 import ExpirationAnnotation from './ExpirationAnnotation'
+import { useI18n } from '../../providers/I18n'
 
 const SecondaryText = ({ secondary, file }) => {
   const { f } = useI18n()

package/react/ListItem/ListItemFile/index.jsx

@@ -1,15 +1,14 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
 
-import Filename from '../../Filename'
-import FiletypePdfIcon from '../../Icons/FileTypePdf'
-
-import ListItemBase from '../ListItemBase'
 import ItemIcon from './ItemIcon'
 import PrimaryText from './PrimaryText'
 import SecondaryText from './SecondaryText'
+import Filename from '../../Filename'
+import FiletypePdfIcon from '../../Icons/FileTypePdf'
+import ListItemBase from '../ListItemBase'
 
 const ListItemFile = ({
   file,

package/react/ListItem/hoc/withListItemLocales.jsx

@@ -1,5 +1,4 @@
 import withLocales from '../../providers/I18n/withLocales'
-
 import en from '../locales/en.json'
 import fr from '../locales/fr.json'
 

package/react/ListItem/index.js

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import merge from 'lodash/merge'
 import MuiListItem from '@material-ui/core/ListItem'
 import isMuiElement from '@material-ui/core/utils/isMuiElement'
+import cx from 'classnames'
+import merge from 'lodash/merge'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import { makeStyles } from '../styles'
 import {

package/react/ListItemIcon/index.js

@@ -1,7 +1,6 @@
-import React, { forwardRef } from 'react'
 import MuiListItemIcon from '@material-ui/core/ListItemIcon'
-
 import cx from 'classnames'
+import React, { forwardRef } from 'react'
 
 export const smallSize = 16
 export const mediumSize = 24

package/react/ListItemText/index.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useEffect, useMemo } from 'react'
-import cx from 'classnames'
 import MUIListItemText from '@material-ui/core/ListItemText'
+import cx from 'classnames'
 import once from 'lodash/once'
+import React, { forwardRef, useEffect, useMemo } from 'react'
 
 const logDeprecatedWarning = once(() => {
   console.warn(

package/react/ListSubheader/index.js

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import merge from 'lodash/merge'
 import MuiListSubheader from '@material-ui/core/ListSubheader'
+import merge from 'lodash/merge'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import { makeStyles } from '../styles'
 

package/react/LoadMore/index.jsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
-import Button from '../deprecated/Button'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+
 import Spinner from '../Spinner'
+import Button from '../deprecated/Button'
 
 import 'intersection-observer' // polyfill for safari (mobile and desktop)
 

package/react/MenuItem/index.js

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
 import MuiMenuItem from '@material-ui/core/MenuItem'
+import React, { forwardRef } from 'react'
 
 import ListItem, { LitItemPropTypes } from '../ListItem'
 

package/react/MidEllipsis/index.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'
 
 /** The left-to-right mark (LRM) is a control character (an invisible formatting character)
  * used in computerized typesetting (including word processing in a program like Microsoft Word)

package/react/MuiCozyTheme/Divider/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import Divider from '../../Divider'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 

package/react/MuiCozyTheme/List/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import List from '../../List'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 

package/react/MuiCozyTheme/ListItem/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ListItem from '../../ListItem'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 

package/react/MuiCozyTheme/ListItemIcon/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ListItemIcon from '../../ListItemIcon'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 

package/react/MuiCozyTheme/ListItemSecondaryAction/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ListItemSecondaryAction from '../../ListItemSecondaryAction'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 

package/react/MuiCozyTheme/index.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { ThemeProvider } from '../styles'
 import { getTheme } from './theme'
+import { ThemeProvider } from '../styles'
 
 const MuiCozyTheme = ({ type, variant, children }) => {
   const theme = getTheme(type, variant)

package/react/MuiCozyTheme/makeTheme.jsx

@@ -1,14 +1,13 @@
-import { createTheme } from '../styles'
-import isTesting from '../helpers/isTesting'
-import { createNodeWithThemeCssVars } from '../utils/color'
-
 import { makeShadows } from './helpers'
 import { makePalette } from './makePalette'
 import { makeTypography } from './makeTypography'
-import { makeLightNormalOverrides } from './overrides/makeLightNormalOverrides'
-import { makeLightInvertedOverrides } from './overrides/makeLightInvertedOverrides'
-import { makeDarkNormalOverrides } from './overrides/makeDarkNormalOverrides'
 import { makeDarkInvertedOverrides } from './overrides/makeDarkInvertedOverrides'
+import { makeDarkNormalOverrides } from './overrides/makeDarkNormalOverrides'
+import { makeLightInvertedOverrides } from './overrides/makeLightInvertedOverrides'
+import { makeLightNormalOverrides } from './overrides/makeLightNormalOverrides'
+import isTesting from '../helpers/isTesting'
+import { createTheme } from '../styles'
+import { createNodeWithThemeCssVars } from '../utils/color'
 
 const makeOverridesByTheme = theme => ({
   light: {

package/react/MuiTabs/index.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import MuiTabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
+import MuiTabs from '@material-ui/core/Tabs'
+import React from 'react'
+
 import useBreakpoints from '../providers/Breakpoints'
 
 const Tabs = props => {

package/react/Nav/index.jsx

@@ -1,12 +1,13 @@
+import cx from 'classnames'
 import React, { Children, isValidElement, useState, forwardRef } from 'react'
-import Icon from '../Icon'
+
+import withNavLocales from './locales/withNavLocales'
 import styles from './styles.styl'
-import cx from 'classnames'
+import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import TopIcon from '../Icons/Top'
-import { useI18n } from '../providers/I18n'
-import withNavLocales from './locales/withNavLocales'
 import useBreakpoints from '../providers/Breakpoints'
+import { useI18n } from '../providers/I18n'
 
 export const NavItem = ({ children, secondary, ...restProps }) => (
   <li
@@ -30,16 +31,19 @@ export const NavLink = {
 }
 
 // Generates a styled NavLink for react-routeur v5 and older
-export const genNavLink = RRNavLink => ({ to, children, ...rest }) => (
-  <RRNavLink
-    to={to}
-    className={NavLink.className}
-    activeClassName={NavLink.activeClassName}
-    {...rest}
-  >
-    {children}
-  </RRNavLink>
-)
+export const genNavLink =
+  RRNavLink =>
+  ({ to, children, ...rest }) =>
+    (
+      <RRNavLink
+        to={to}
+        className={NavLink.className}
+        activeClassName={NavLink.activeClassName}
+        {...rest}
+      >
+        {children}
+      </RRNavLink>
+    )
 
 // Generates a styled NavLink for react-routeur v6
 export const genNavLinkForV6 = RRNavLink =>

package/react/Nav/locales/withNavLocales.jsx

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

package/react/NavigationList/index.jsx

@@ -1,12 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
+
+import styles from './styles.styl'
+import Card from '../Card'
 import List from '../List'
+import ListSubheader from '../ListSubheader'
 import Stack from '../Stack'
-import Card from '../Card'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
-import ListSubheader from '../ListSubheader'
-import styles from './styles.styl'
 
 const NavigationList = ({ children, style, className }) => {
   const { isMobile } = useBreakpoints()

package/react/NestedSelect/BottomSheet.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
+import NestedSelect from './NestedSelect'
+import BottomSheet, { BottomSheetHeader, BottomSheetItem } from '../BottomSheet'
+import Divider from '../Divider'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import ArrowUpIcon from '../Icons/ArrowUp'
-import BottomSheet, { BottomSheetHeader, BottomSheetItem } from '../BottomSheet'
 import Typography from '../Typography'
-import Divider from '../Divider'
-
-import NestedSelect from './NestedSelect'
 
 const HeaderComponent = ({ title, showBack, onClickBack }) => {
   if (!title) return null

package/react/NestedSelect/ItemRow.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import Divider from '../Divider'
 import Icon from '../Icon'
 import RightIcon from '../Icons/Right'
-import ListItemText from '../ListItemText'
-import Divider from '../Divider'
 import ListItem from '../ListItem'
 import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
 import Radio from '../Radios'
-import useBreakpoints from '../providers/Breakpoints'
 import Typography from '../Typography'
+import useBreakpoints from '../providers/Breakpoints'
 
 const infoStyle = { color: 'var(--secondaryTextColor)' }
 

package/react/NestedSelect/Modal.jsx

@@ -1,15 +1,14 @@
 import React from 'react'
 
+import NestedSelect from './NestedSelect'
+import styles from './styles.styl'
 import { useCozyDialog, DialogCloseButton } from '../CozyDialogs'
 import Dialog, { DialogTitle, DialogContent } from '../Dialog'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import LeftIcon from '../Icons/Left'
-import { Media, Bd, Img } from '../deprecated/Media'
-
-import NestedSelect from './NestedSelect'
-import styles from './styles.styl'
 import List from '../List'
+import { Media, Bd, Img } from '../deprecated/Media'
 
 const NestedSelectDialogHeader = ({ onClickBack, showBack, title }) => {
   const { dialogTitleProps } = useCozyDialog({
@@ -50,7 +49,7 @@ const NestedSelectModal = props => {
     <Dialog {...dialogProps} onClose={props.onClose}>
       <DialogCloseButton
         onClick={props.onClose}
-        data-testid={`modal-close-button-nested-select`}
+        data-testid="modal-close-button-nested-select"
       />
       <NestedSelect
         HeaderComponent={NestedSelectDialogHeader}

package/react/NestedSelect/NestedSelect.jsx

@@ -1,14 +1,14 @@
-import React, { useState, useRef } from 'react'
-import PropTypes from 'prop-types'
-import omit from 'lodash/omit'
 import cx from 'classnames'
+import omit from 'lodash/omit'
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
 
-import List from '../List'
-import Input from '../Input'
-import Typography from '../Typography'
 import ItemRow from './ItemRow'
 import { makeHistory } from './helpers'
 import styles from './styles.styl'
+import Input from '../Input'
+import List from '../List'
+import Typography from '../Typography'
 
 export { ItemRow }
 

package/react/NestedSelect/NestedSelectResponsive.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import useBreakpoints from '../providers/Breakpoints'
 import BottomSheet from './BottomSheet'
 import Modal from './Modal'
+import useBreakpoints from '../providers/Breakpoints'
 
 const NestedSelectResponsive = props => {
   const { isMobile } = useBreakpoints()

package/react/OrderedList/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
-import Stack from '../Stack'
 import cx from 'classnames'
+import React from 'react'
+
 import styles from './styles.styl'
+import Stack from '../Stack'
 
 export const OrderedList = props => {
   const { className, ...rest } = props

package/react/Page/index.jsx

@@ -8,6 +8,7 @@
  */
 
 import React from 'react'
+
 import { useKeyboardInfo } from './keyboard'
 import styles from './styles.styl'
 import useBreakpoints from '../providers/Breakpoints'

package/react/Panel/index.jsx

@@ -1,5 +1,5 @@
-import { mkComponent } from '../utils'
 import styles from './styles.styl'
+import { mkComponent } from '../utils'
 
 export const Group = mkComponent('div', { className: styles['Panel-group'] })
 export const Main = mkComponent('div', { className: styles['Panel-main'] })

package/react/PasswordExample/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
 import cx from 'classnames'
-import InlineCard from '../deprecated/InlineCard'
+import React from 'react'
+
 import styles from './styles.styl'
+import InlineCard from '../deprecated/InlineCard'
 
 const alphaRegexp = /^[a-z]$/i
 const numberRegexp = /^[0-9]$/

package/react/PasswordField/index.jsx

@@ -1,17 +1,16 @@
 import React, { useState } from 'react'
 
-import TextField from '../TextField'
-import IconButton from '../IconButton'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
 import Icon from '../Icon'
-import InputAdornment from '../InputAdornment'
+import IconButton from '../IconButton'
 import EyeIcon from '../Icons/Eye'
 import EyeClosedIcon from '../Icons/EyeClosed'
+import InputAdornment from '../InputAdornment'
+import TextField from '../TextField'
 import { useI18n } from '../providers/I18n'
 import withOnlyLocales from '../providers/I18n/withOnlyLocales'
 
-import en from './locales/en.json'
-import fr from './locales/fr.json'
-
 export const locales = {
   en,
   fr

package/react/Paywall/MaxAccountsByKonnectorPaywall.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Paywall from './Paywall'
 import withPaywallLocales from './locales/withPaywallLocales'

package/react/Paywall/MaxAccountsPaywall.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Paywall from './Paywall'
 import withPaywallLocales from './locales/withPaywallLocales'

package/react/Paywall/MaxDaysToCapturePaywall.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Paywall from './Paywall'
 import withPaywallLocales from './locales/withPaywallLocales'

package/react/Paywall/MaxPapersPaywall.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Paywall from './Paywall'
 import withPaywallLocales from './locales/withPaywallLocales'

package/react/Paywall/OnlyOfficePaywall.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Paywall from './Paywall'
 

package/react/Paywall/PasswordSharingPaywall.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Paywall from './Paywall'
 

package/react/Paywall/Paywall.jsx

@@ -1,22 +1,22 @@
+import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import PropTypes from 'prop-types'
 
-import { isFlagshipApp } from 'cozy-device-helper'
 import { useInstanceInfo } from 'cozy-client'
 import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+import { isFlagshipApp } from 'cozy-device-helper'
 import flag from 'cozy-flags'
 import { useWebviewIntent } from 'cozy-intent'
 
-import Spinner from '../Spinner'
+import { makeType } from './helpers'
+import withPaywallLocales from './locales/withPaywallLocales'
+import Button from '../Buttons'
 import { IllustrationDialog } from '../CozyDialogs'
 import Icon from '../Icon'
 import CozyUpgradeIcon from '../Icons/CozyUpgrade'
-import Button from '../Buttons'
+import Spinner from '../Spinner'
 import Typography from '../Typography'
-import { makeType } from './helpers'
 import { useI18n } from '../providers/I18n'
-import withPaywallLocales from './locales/withPaywallLocales'
 
 /**
  * Component with the core logic of the paywall, which is then declined in several variants to adapt to the user case

package/react/Paywall/Paywall.spec.jsx

@@ -1,13 +1,13 @@
-import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
 
 import { createMockClient, useInstanceInfo } from 'cozy-client'
 import { isFlagshipApp } from 'cozy-device-helper'
 import flag from 'cozy-flags'
 import { useWebviewIntent } from 'cozy-intent'
 
-import DemoProvider from '../providers/DemoProvider'
 import Paywall from './Paywall'
+import DemoProvider from '../providers/DemoProvider'
 
 jest.mock('cozy-device-helper', () => ({
   ...jest.requireActual('cozy-device-helper'),

package/react/Paywall/QuotaPaywall.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Paywall from './Paywall'
 

package/react/Paywall/index.jsx

@@ -1,8 +1,6 @@
 export { default as OnlyOfficePaywall } from './OnlyOfficePaywall'
 export { default as PasswordSharingPaywall } from './PasswordSharingPaywall'
-export {
-  default as MaxAccountsByKonnectorPaywall
-} from './MaxAccountsByKonnectorPaywall'
+export { default as MaxAccountsByKonnectorPaywall } from './MaxAccountsByKonnectorPaywall'
 export { default as MaxAccountsPaywall } from './MaxAccountsPaywall'
 export { default as MaxPapersPaywall } from './MaxPapersPaywall'
 export { default as QuotaPaywall } from './QuotaPaywall'

package/react/Paywall/locales/withPaywallLocales.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,