cozy-ui 111.5.0 → 111.7.0

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -1,25 +1,23 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
 import filesize from 'filesize'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import { models } from 'cozy-client'
 
-import { makeStyles } from '../styles'
-import ListItem from '../ListItem'
-import ListItemIcon from '../ListItemIcon'
-import ListItemText from '../ListItemText'
+import styles from './styles.styl'
+import Checkbox from '../Checkbox'
 import Divider from '../Divider'
 import Icon from '../Icon'
-import FileTypeText from '../Icons/FileTypeText'
 import FileTypeFolder from '../Icons/FileTypeFolder'
-import Checkbox from '../Checkbox'
+import FileTypeText from '../Icons/FileTypeText'
+import ListItem from '../ListItem'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
 import Radio from '../Radios'
-import { useI18n } from '../providers/I18n'
-
 import { isValidFile, isValidFolder } from '../helpers/acceptedTypes'
-
-import styles from './styles.styl'
+import { useI18n } from '../providers/I18n'
+import { makeStyles } from '../styles'
 
 const {
   file: { isDirectory, isFile }

package/react/FilePicker/FilePickerBodyItem.spec.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import filesize from 'filesize'
+import React from 'react'
 
-import DemoProvider from './docs/DemoProvider'
 import FilePickerBodyItem from './FilePickerBodyItem'
+import DemoProvider from './docs/DemoProvider'
 import { isValidFile, isValidFolder } from '../helpers/acceptedTypes'
 
 const mockFile01 = {

package/react/FilePicker/FilePickerBreadcrumb.jsx

@@ -1,20 +1,20 @@
-import React, { Fragment, useCallback, memo } from 'react'
 import PropTypes from 'prop-types'
+import React, { Fragment, useCallback, memo } from 'react'
 
-import Typography from '../Typography'
+import styles from './styles.styl'
 import Icon from '../Icon'
 import RightIcon from '../Icons/Right'
+import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
 
-import styles from './styles.styl'
-
 const FilePickerBreadcrumb = ({ path, onBreadcrumbClick }) => {
   const { isMobile } = useBreakpoints()
   const hasPath = path && path.length > 0
 
-  const navigateTo = useCallback(folder => () => onBreadcrumbClick(folder), [
-    onBreadcrumbClick
-  ])
+  const navigateTo = useCallback(
+    folder => () => onBreadcrumbClick(folder),
+    [onBreadcrumbClick]
+  )
 
   return (
     <Typography variant="h4" className="u-flex u-flex-items-center">

package/react/FilePicker/FilePickerFooter.jsx

@@ -1,11 +1,10 @@
-import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-
-import Button from '../deprecated/Button'
-import { createUseI18n } from '../providers/I18n'
+import React, { memo } from 'react'
 
 import en from './locales/en.json'
 import fr from './locales/fr.json'
+import Button from '../deprecated/Button'
+import { createUseI18n } from '../providers/I18n'
 
 const locales = { en, fr }
 const useI18n = createUseI18n(locales)

package/react/FilePicker/FilePickerFooter.spec.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
 
-import DemoProvider from './docs/DemoProvider'
 import FilePickerFooter from './FilePickerFooter'
+import DemoProvider from './docs/DemoProvider'
 
 describe('FilePickerFooter components:', () => {
   const mockOnConfirm = jest.fn()

package/react/FilePicker/FilePickerHeader.jsx

@@ -1,18 +1,17 @@
-import React, { useCallback, memo } from 'react'
-import PropTypes from 'prop-types'
-import uniqBy from 'lodash/uniqBy'
 import get from 'lodash/get'
+import uniqBy from 'lodash/uniqBy'
+import PropTypes from 'prop-types'
+import React, { useCallback, memo } from 'react'
 
 import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
 
-import useBreakpoints from '../providers/Breakpoints'
-import IconButton from '../IconButton'
-import Icon from '../Icon'
-import Previous from '../Icons/Previous'
-
+import { ROOT_DIR_ID } from '.'
 import FilePickerBreadcrumb from './FilePickerBreadcrumb'
 import { buildCurrentFolderQuery } from './queries'
-import { ROOT_DIR_ID } from '.'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import Previous from '../Icons/Previous'
+import useBreakpoints from '../providers/Breakpoints'
 
 /**
  * @param {IOCozyFolder} displayedFolder - An io.cozy.files folder

package/react/FilePicker/index.jsx

@@ -1,13 +1,13 @@
-import React, { useState, memo } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState, memo } from 'react'
 
-import { makeStyles } from '../styles'
-import { FixedDialog } from '../CozyDialogs'
-import FilePickerHeader from './FilePickerHeader'
-import FilePickerFooter from './FilePickerFooter'
 import FilePickerBody from './FilePickerBody'
-import useBreakpoints from '../providers/Breakpoints'
+import FilePickerFooter from './FilePickerFooter'
+import FilePickerHeader from './FilePickerHeader'
+import { FixedDialog } from '../CozyDialogs'
 import { getCompliantTypes } from '../helpers/acceptedTypes'
+import useBreakpoints from '../providers/Breakpoints'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(() => ({
   paper: {

package/react/Filename/index.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import Icon, { iconPropType } from '../Icon'
-import Typography from '../Typography'
 import MidEllipsis from '../MidEllipsis'
+import Typography from '../Typography'
 
 const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
   return (

package/react/GhostFileBadge/index.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
 import Badge from '../Badge'
 import { withStyles } from '../styles'

package/react/Hero/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import BaseIcon from '../Icon'
+
 import styles from './styles.styl'
+import BaseIcon from '../Icon'
 import { mkComponent } from '../utils'
 
 // Cannot use mkComponent since it is not picked up by styleguidist

package/react/HistoryRow/index.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Circle from '../Circle'
 import Icon from '../Icon'
 import DownloadIcon from '../Icons/Download'
 import FileIcon from '../Icons/File'
-import { Media, Bd, Img } from '../deprecated/Media'
 import Typography from '../Typography'
-
-import styles from './styles.styl'
+import { Media, Bd, Img } from '../deprecated/Media'
 
 /**
  *

package/react/I18n/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import DeprecatedI18n, { useI18n as deprecatedUseI18n } from '../providers/I18n'
+
 import createDepreciationLogger from '../helpers/createDepreciationLogger'
+import DeprecatedI18n, { useI18n as deprecatedUseI18n } from '../providers/I18n'
 
 const logDeprecatedFunc = createDepreciationLogger()
 const logDeprecatedComp = createDepreciationLogger()

package/react/I18n/withLocales.js

@@ -1,5 +1,5 @@
-import withLocales from '../providers/I18n/withLocales'
 import createDepreciationLogger from '../helpers/createDepreciationLogger'
+import withLocales from '../providers/I18n/withLocales'
 
 const logDeprecatedWithLocale = createDepreciationLogger()
 

package/react/Icon/Sprite.jsx

@@ -1,6 +1,7 @@
-import IconSprintContent from './icons-sprite'
 import React from 'react'
 
+import IconSprintContent from './icons-sprite'
+
 const displayNone = { display: 'none' }
 
 const Sprite = () => {

package/react/Icon/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/IconButton/index.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import cx from 'classnames'
 import MuiIconButton from '@material-ui/core/IconButton'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 const muiSupportedColors = ['default', 'inherit', 'primary', 'secondary']
 

package/react/IconStack/index.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import migrateProps from '../helpers/migrateProps'
 import styles from './styles.styl'
+import migrateProps from '../helpers/migrateProps'
 
 const IconStack = ({
   backgroundClassName,

package/react/InfosBadge/index.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
 import Badge from '../Badge'
 import { withStyles } from '../styles'

package/react/Input/index.jsx

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

package/react/InputGroup/index.jsx

@@ -1,6 +1,7 @@
-import React, { Component } from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
 import styles from './styles.styl'
 
 class InputGroup extends Component {
@@ -22,14 +23,8 @@ class InputGroup extends Component {
   }
 
   render() {
-    const {
-      children,
-      prepend,
-      append,
-      error,
-      fullwidth,
-      className
-    } = this.props
+    const { children, prepend, append, error, fullwidth, className } =
+      this.props
     const { focused } = this.state
     return (
       <div

package/react/IntentDialogOpener/IntentDialogOpener.jsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
-import IntentIframe, { iframeProps } from '../IntentIframe'
 import { DialogCloseButton } from '../CozyDialogs'
 import Dialog from '../Dialog'
+import IntentIframe, { iframeProps } from '../IntentIframe'
 
 /**
  * Wrapper that adds an `onClick` handler to its children that opens a dialog

package/react/IntentHeader/index.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
-import styles from './styles.styl'
+import React from 'react'
 
-import cx from 'classnames'
+import styles from './styles.styl'
 
 export const IntentHeader = ({ appName, appEditor, appIcon, className }) => (
   <div className={cx(styles['intentHeader'], className)}>

package/react/IntentIframe/IntentIframe.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import get from 'lodash/get'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-import { Intents } from 'cozy-interapp'
 import { withClient } from 'cozy-client'
+import { Intents } from 'cozy-interapp'
 
-import Spinner from '../Spinner'
 import styles from './styles.styl'
+import Spinner from '../Spinner'
 
 const DEFAULT_DATA = {
   // TODO remove `closeable` since it is only there for backward compatibility
@@ -19,15 +19,8 @@ class IntentIframe extends React.Component {
   state = { loading: false }
 
   componentDidMount() {
-    const {
-      action,
-      data,
-      type,
-      onCancel,
-      onError,
-      onTerminate,
-      client
-    } = this.props
+    const { action, data, type, onCancel, onError, onTerminate, client } =
+      this.props
 
     console.warn(
       'Be carful to use `withBreakpoints()` and not `useBreakpoints()` in intents. See https://github.com/cozy/cozy-ui/issues/1807'

package/react/IntentWrapper/index.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
-import styles from './styles.styl'
+import React from 'react'
 
-import cx from 'classnames'
+import styles from './styles.styl'
 import { ModalHeader, ModalContent } from '../deprecated/Modal'
 
 export const IntentWrapper = ({

package/react/Label/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 Label = props => {

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', () => {