cozy-ui 111.4.0 → 111.6.0

package/react/Labs/CollectionField/index.jsx

@@ -1,15 +1,14 @@
-import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { useRef } from 'react'
 
-import Button from '../../deprecated/Button'
+import styles from './styles.styl'
 import { FieldContainer } from '../../Field'
 import Icon from '../../Icon'
-import Label from '../../Label'
 import CrossSmallIcon from '../../Icons/CrossSmall'
 import PlusIcon from '../../Icons/Plus'
+import Label from '../../Label'
 import Stack from '../../Stack'
-
-import styles from './styles.styl'
+import Button from '../../deprecated/Button'
 
 /**
  * Handles a collection of form fields.

package/react/Labs/ExperimentalDialog/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Dialog from '../../Dialog'
-import DialogTitle from '../../Dialog/DialogTitle'
 import DialogActions from '../../Dialog/DialogActions'
+import DialogTitle from '../../Dialog/DialogTitle'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
 const logDepecratedExperimentalDialog = createDepreciationLogger()

package/react/Labs/IconGrid/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import styles from './styles.styl'
 
 const IconGrid = ({ children }) => (

package/react/Labs/PasswordInput/index.jsx

@@ -1,13 +1,14 @@
-import React, { useState } from 'react'
-import Icon from '../../Icon'
-import InputGroup from '../../InputGroup'
-import Input from '../../Input'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
 import { getStrength } from './helpers'
 import styles from './styles.styl'
-import PropTypes from 'prop-types'
+import Icon from '../../Icon'
 import EyeIcon from '../../Icons/Eye'
 import EyeClosedIcon from '../../Icons/EyeClosed'
+import Input from '../../Input'
+import InputGroup from '../../InputGroup'
 
 const HideShowButton = props => {
   const { hidden, className, ...rest } = props

package/react/Layout/Layout.jsx

@@ -1,7 +1,8 @@
-import React, { Component } from 'react'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 export const Layout = ({ children, className, monoColumn, ...rest }) => {
   return (

package/react/ListItem/ExpandedAttributes/ExpandedAttribute.jsx

@@ -1,16 +1,15 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import { copyToClipboard } from './helpers'
+import Icon from '../../Icon'
+import CopyIcon from '../../Icons/Copy'
 import ListItem from '../../ListItem'
-import ListItemText from '../../ListItemText'
 import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
 import Typography from '../../Typography'
-import Icon from '../../Icon'
-import CopyIcon from '../../Icons/Copy'
 import { useI18n } from '../../providers/I18n'
 
-import { copyToClipboard } from './helpers'
-
 const ExpandedAttribute = ({ label, value, setAlertProps }) => {
   const { t } = useI18n()
 

package/react/ListItem/ExpandedAttributes/helpers.js

@@ -69,22 +69,24 @@ export const makeDefaultExpandedAttributes = (doc, expandedAttributes) => {
     .filter(x => x)
 }
 
-export const copyToClipboard = ({ value, setAlertProps, t }) => async () => {
-  try {
-    await navigator.clipboard.writeText(value)
-    setAlertProps({
-      open: true,
-      severity: 'success',
-      message: t(`ListItem.snackbar.copyToClipboard.success`)
-    })
-  } catch (error) {
-    setAlertProps({
-      open: true,
-      severity: 'error',
-      message: t(`ListItem.snackbar.copyToClipboard.error`)
-    })
+export const copyToClipboard =
+  ({ value, setAlertProps, t }) =>
+  async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setAlertProps({
+        open: true,
+        severity: 'success',
+        message: t(`ListItem.snackbar.copyToClipboard.success`)
+      })
+    } catch (error) {
+      setAlertProps({
+        open: true,
+        severity: 'error',
+        message: t(`ListItem.snackbar.copyToClipboard.error`)
+      })
+    }
   }
-}
 
 export const isDate = value => {
   if (!isNaN(value)) return false

package/react/ListItem/ExpandedAttributes/index.jsx

@@ -1,13 +1,12 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
-import Snackbar from '../../Snackbar'
+import ExpandedAttribute from './ExpandedAttribute'
+import { makeAttrsLabelAndFormattedValue } from './helpers'
 import Alert from '../../Alert'
+import Snackbar from '../../Snackbar'
 import { useI18n } from '../../providers/I18n'
-
 import withListItemLocales from '../hoc/withListItemLocales'
-import ExpandedAttribute from './ExpandedAttribute'
-import { makeAttrsLabelAndFormattedValue } from './helpers'
 
 const ExpandedAttributes = ({ doc, expandedAttributes }) => {
   const { t, f, lang } = useI18n()

package/react/ListItem/ListItemBase/Renaming/RenameDialog.jsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Button from '../../../Buttons'
 import { ConfirmDialog } from '../../../CozyDialogs'
 import { useI18n } from '../../../providers/I18n'
-
 import withListItemLocales from '../../hoc/withListItemLocales'
 
 const RenameDialog = ({ onSubmit, onCancel }) => {

package/react/ListItem/ListItemBase/Renaming/RenameInput.jsx

@@ -1,16 +1,15 @@
-import React, { useEffect, useReducer, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useEffect, useReducer, useRef, useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import { splitFilename } from 'cozy-client/dist/models/file'
 
-import { makeStyles } from '../../../styles'
+import RenameDialog from './RenameDialog'
+import { renameFile } from './helpers'
 import Input from '../../../Input'
 import InputGroup from '../../../InputGroup'
 import Spinner from '../../../Spinner'
-
-import RenameDialog from './RenameDialog'
-import { renameFile } from './helpers'
+import { makeStyles } from '../../../styles'
 
 const KEYS = {
   ESCAPE: 'Escape',

package/react/ListItem/ListItemBase/index.jsx

@@ -1,20 +1,19 @@
-import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
 
+import RenameInput from './Renaming/RenameInput'
 import ListItem from '..'
-import ListItemText from '../../ListItemText'
-import ListItemIcon from '../../ListItemIcon'
-import ListItemSecondaryAction from '../../ListItemSecondaryAction'
-import IconButton from '../../IconButton'
-import Icon from '../../Icon'
-import DotsIcon from '../../Icons/Dots'
-import Checkbox from '../../Checkbox'
 import ActionsMenu from '../../ActionsMenu'
 import ActionsMenuMobileHeader from '../../ActionsMenu/ActionsMenuMobileHeader'
-
-import withListItemLocales from '../hoc/withListItemLocales'
+import Checkbox from '../../Checkbox'
+import Icon from '../../Icon'
+import IconButton from '../../IconButton'
+import DotsIcon from '../../Icons/Dots'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemSecondaryAction from '../../ListItemSecondaryAction'
+import ListItemText from '../../ListItemText'
 import ExpandedAttributes from '../ExpandedAttributes'
-import RenameInput from './Renaming/RenameInput'
+import withListItemLocales from '../hoc/withListItemLocales'
 
 const ListItemBase = ({
   doc,

package/react/ListItem/ListItemByDoc/index.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import ListItemFile from '../ListItemFile'
-import ListItemContact from '../ListItemContact'
 import { makeDefaultExpandedAttributes } from '../ExpandedAttributes/helpers'
+import ListItemContact from '../ListItemContact'
+import ListItemFile from '../ListItemFile'
 
 const ListItemByDoc = ({
   doc,

package/react/ListItem/ListItemContact/helpers.spec.js

@@ -1,6 +1,5 @@
-import { divider, emailTo, smsTo, call } from '../../ActionsMenu/Actions'
-
 import { makeOptionalActions } from './helpers'
+import { divider, emailTo, smsTo, call } from '../../ActionsMenu/Actions'
 
 describe('makeOptionalActions', () => {
   it('should return divider, call, smsTo, emailTo', () => {

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)' }