cozy-ui 111.5.0 → 111.6.0

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,

package/react/PieChart/index.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cx from 'classnames'
-import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js'
-import { Doughnut } from 'react-chartjs-2'
 import { useTheme } from '@material-ui/core'
-import set from 'lodash/set'
+import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js'
+import cx from 'classnames'
 import cloneDeep from 'lodash/cloneDeep'
+import set from 'lodash/set'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Doughnut } from 'react-chartjs-2'
 
-import { makeStyles } from '../styles'
 import Typography from '../Typography'
 import isTesting from '../helpers/isTesting'
+import { makeStyles } from '../styles'
 
 ChartJS.register(ArcElement, Tooltip)
 

package/react/PointerAlert/index.jsx

@@ -1,12 +1,11 @@
-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 { makeStyles } from '../styles'
-import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
 import { AlertPropTypes, AlertDefaultProps } from '../Alert'
-
 import Alert from '../Alert'
+import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   topArrow: {

package/react/Popup/index.jsx

@@ -1,5 +1,5 @@
-import { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import { PureComponent } from 'react'
 
 import { isMobileApp } from 'cozy-device-helper'
 

package/react/Popup/index.spec.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { shallow } from 'enzyme'
+import React from 'react'
 
 import { isMobileApp } from 'cozy-device-helper'
 

package/react/PopupOpener/index.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 // customized function to center a popup window
 // source https://stackoverflow.com/a/16861050

package/react/ProgressionBanner/index.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { withStyles } from '../styles'
 import Banner from '../Banner'
 import { LinearProgress } from '../Progress'
 import Typography from '../Typography'
+import { withStyles } from '../styles'
 
 const progressHeight = '0.125rem'
 

package/react/QualificationGrid/index.jsx

@@ -1,22 +1,21 @@
-import React, { Fragment, useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { Fragment, useState } from 'react'
 
+import { getThemesList } from './helpers'
+import withLocales from './locales/withLocales'
 import Grid from '../Grid'
-import QualificationItem from '../QualificationItem'
-import { useI18n } from '../providers/I18n'
+import BankIcon from '../Icons/Bank'
+import BillIcon from '../Icons/Bill'
+import CarIcon from '../Icons/Car'
+import ChessIcon from '../Icons/Chess'
+import DotsIcon from '../Icons/Dots'
+import HeartIcon from '../Icons/Heart'
 import PeopleIcon from '../Icons/People'
 import TeamIcon from '../Icons/Team'
 import WorkIcon from '../Icons/Work'
-import ChessIcon from '../Icons/Chess'
-import HeartIcon from '../Icons/Heart'
 import HomeIcon from '../Icons/Home'
-import CarIcon from '../Icons/Car'
-import BankIcon from '../Icons/Bank'
-import BillIcon from '../Icons/Bill'
-import DotsIcon from '../Icons/Dots'
-
-import withLocales from './locales/withLocales'
-import { getThemesList } from './helpers'
+import QualificationItem from '../QualificationItem'
+import { useI18n } from '../providers/I18n'
 
 const IconByName = {
   people: PeopleIcon,

package/react/QualificationGrid/locales/withLocales.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'
 
 export const locales = {
   en,

package/react/QualificationItem/index.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import ButtonBase from '../ButtonBase'
 import Icon, { iconPropType } from '../Icon'
-import FileDuotoneIcon from '../Icons/FileDuotone'
 import IconStack from '../IconStack'
+import FileDuotoneIcon from '../Icons/FileDuotone'
 import Typography from '../Typography'
 import { makeStyles } from '../styles'
 

package/react/Radios/index.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
 import MuiRadio from '@material-ui/core/Radio'
+import React from 'react'
 
 import Icon from '../Icon'
 import RadioCheckedIcon from '../Icons/RadioChecked'

package/react/SearchBar/index.jsx

@@ -1,17 +1,17 @@
-import React, { forwardRef, useState, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
 import debounce from 'lodash/debounce'
+import PropTypes from 'prop-types'
+import React, { forwardRef, useState, useMemo } from 'react'
 
-import { useI18n } from '../providers/I18n'
 import withOnlyLocales from './locales/withOnlyLocales'
-import { makeStyles } from '../styles'
-import Paper from '../Paper'
-import InputBase from '../InputBase'
-import IconButton from '../IconButton'
 import Icon from '../Icon'
-import MagnifierIcon from '../Icons/Magnifier'
+import IconButton from '../IconButton'
 import CrossCircleIcon from '../Icons/CrossCircle'
+import MagnifierIcon from '../Icons/Magnifier'
+import InputBase from '../InputBase'
+import Paper from '../Paper'
+import { useI18n } from '../providers/I18n'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   root: {

package/react/SearchBar/locales/withOnlyLocales.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'
 
 export const locales = {
   en,

package/react/SelectBox/ControlDefault.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-
+import React from 'react'
 import { components } from 'react-select'
 
 const ControlDefault = ({

package/react/SelectBox/SelectBox.jsx

@@ -1,18 +1,17 @@
-import React, { Component } from 'react'
+import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import ReactSelect, { components } from 'react-select'
-import classNames from 'classnames'
 
 import { isIOSApp } from 'cozy-device-helper'
 
+import ControlDefault from './ControlDefault'
+import styles from './styles.styl'
 import Icon from '../Icon'
+import BottomIcon from '../Icons/Bottom'
 import CheckIcon from '../Icons/Check'
-import withBreakpoints from '../helpers/withBreakpoints'
 import TopIcon from '../Icons/Top'
-import BottomIcon from '../Icons/Bottom'
-
-import styles from './styles.styl'
-import ControlDefault from './ControlDefault'
+import withBreakpoints from '../helpers/withBreakpoints'
 
 const heights = {
   tiny: '2rem',
@@ -131,16 +130,15 @@ const DropdownIndicator = props => {
   )
 }
 
-const reactSelectControl = CustomControl => ({
-  innerProps,
-  innerRef,
-  children
-}) => (
-  <div {...innerProps} ref={innerRef}>
-    {CustomControl}
-    <div className={styles['select-control__input']}>{children}</div>
-  </div>
-)
+const reactSelectControl =
+  CustomControl =>
+  ({ innerProps, innerRef, children }) =>
+    (
+      <div {...innerProps} ref={innerRef}>
+        {CustomControl}
+        <div className={styles['select-control__input']}>{children}</div>
+      </div>
+    )
 
 const Option = ({
   children,

package/react/SelectBox/SelectBoxWithFixedOptions.jsx

@@ -1,6 +1,6 @@
-import { components } from 'react-select'
-import React from 'react'
 import groupBy from 'lodash/groupBy'
+import React from 'react'
+import { components } from 'react-select'
 
 import SelectBox from './SelectBox'
 import styles from './styles.styl'

package/react/SelectBox/index.jsx

@@ -8,8 +8,6 @@ export {
   reactSelectControl
 } from './SelectBox'
 
-export {
-  default as SelectBoxWithFixedOptions
-} from './SelectBoxWithFixedOptions'
+export { default as SelectBoxWithFixedOptions } from './SelectBoxWithFixedOptions'
 
 export { default as ControlDefault } from './ControlDefault'

package/react/SelectionBar/SelectionBarAction.jsx

@@ -1,15 +1,14 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Button from '../Button'
-import useBreakpoints from '../providers/Breakpoints'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
+import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
 
-import styles from './styles.styl'
-
 const SelectionBarAction = ({ selectedCount, selected, action }) => {
   const { isDesktop } = useBreakpoints()
   const { t } = useI18n()

package/react/SelectionBar/SelectionBarMore.jsx

@@ -1,14 +1,13 @@
-import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
 
+import styles from './styles.styl'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import DotsIcon from '../Icons/Dots'
 import { ActionMenuWithClose, ActionMenuItem } from '../deprecated/ActionMenu'
 import { useI18n } from '../providers/I18n'
 
-import styles from './styles.styl'
-
 const SelectionBarMore = ({ actions, selectedCount, selected }) => {
   const { t } = useI18n()
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)

package/react/SelectionBar/index.jsx

@@ -1,19 +1,18 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
 import { useTheme } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
 
 import { useWebviewIntent } from 'cozy-intent'
 
-import { useI18n } from '../providers/I18n'
+import SelectionBarAction from './SelectionBarAction'
+import SelectionBarMore from './SelectionBarMore'
+import styles from './styles.styl'
+import useMaxActions from './useMaxActions'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import CrossIcon from '../Icons/Cross'
 import useBreakpoints from '../providers/Breakpoints'
-
-import styles from './styles.styl'
-import SelectionBarAction from './SelectionBarAction'
-import SelectionBarMore from './SelectionBarMore'
-import useMaxActions from './useMaxActions'
+import { useI18n } from '../providers/I18n'
 
 /*
 

package/react/SelectionBar/useMaxActions.jsx

@@ -1,9 +1,9 @@
-import { useState } from 'react'
 import throttle from 'lodash/throttle'
+import { useState } from 'react'
 
+import { computeMaxAction } from './helpers'
 import breakpointDefs, { getBreakpointsStatus } from '../helpers/breakpoints'
 import useEventListener from '../hooks/useEventListener'
-import { computeMaxAction } from './helpers'
 
 const huge = 1400
 const large = 1200

package/react/Sidebar/index.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import { useTheme } from '@material-ui/core'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import { useCozyTheme } from '../providers/CozyTheme'
-import { useTheme } from '@material-ui/core'
 
 const Sidebar = ({ children, className, ...restProps }) => {
   const theme = useTheme()

package/react/Skeletons/ListItemSkeleton.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import Divider from '../Divider'
 import ListItem from '../ListItem'
 import ListItemIcon from '../ListItemIcon'
 import ListItemText from '../ListItemText'
 import Skeleton from '../Skeleton'
-import Divider from '../Divider'
 
 const ListItemSkeleton = ({ hasSecondary, divider }) => {
   return (

package/react/Skeletons/ListSkeleton.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import ListItemSkeleton from './ListItemSkeleton'
 import List from '../List'
 import ListSubheader from '../ListSubheader'
 
-import ListItemSkeleton from './ListItemSkeleton'
-
 const ListSkeleton = ({ count, hasSecondary, withSubheader, divider }) => {
   return (
     <List