cozy-ui 111.4.0 → 111.6.0

package/react/DropdownButton/index.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import Button from '@material-ui/core/Button'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import { makeStyles } from '../styles'
 import DropdownText from '../DropdownText'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
   root: {

package/react/DropdownText/index.jsx

@@ -1,10 +1,10 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import { makeStyles } from '../styles'
-import Typography from '../Typography'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
+import Typography from '../Typography'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   container: {

package/react/Empty/index.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon, { iconPropType } from '../Icon'
 import Typography from '../Typography'
 
-import styles from './styles.styl'
-
 export const Empty = ({
   icon,
   iconSize,

package/react/Fab/ExtendableFab.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
+import Fab from '.'
 import Icon from '../Icon'
 import useScroll from '../hooks/useScroll'
-import Fab from '.'
 
 const ExtendableFab = ({
   label,

package/react/Field/index.jsx

@@ -1,15 +1,15 @@
-import React, { useState } from 'react'
 import cx from 'classnames'
 import omit from 'lodash/omit'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
-import labelStyles from '../Label/styles.styl'
 import styles from './styles.styl'
-import Label from '../Label'
+import ContactPicker from '../ContactPicker'
 import Input from '../Input'
+import Label from '../Label'
+import labelStyles from '../Label/styles.styl'
 import SelectBox from '../SelectBox'
 import Textarea from '../Textarea'
-import ContactPicker from '../ContactPicker'
 
 /**
  * PropTypes to pass to Input but not to other components, like SelectBox
@@ -263,7 +263,7 @@ Field.propTypes = {
   name: PropTypes.string,
   type: PropTypes.oneOf(allowedTypes),
   // value should be an object for type=select and string for others
-  value: function(props, propName, componentName) {
+  value: function (props, propName, componentName) {
     // not a required props
     if (typeof props[propName] === 'undefined') return
     if (props.type === 'select' && typeof props[propName] !== 'object') {

package/react/Field/index.spec.js

@@ -1,6 +1,7 @@
+import { shallow } from 'enzyme'
 import React from 'react'
+
 import Field from '.'
-import { shallow } from 'enzyme'
 
 describe('Field component', () => {
   beforeEach(() => {

package/react/Figure/Figure.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import Types from 'prop-types'
 import cx from 'classnames'
+import Types from 'prop-types'
+import React from 'react'
+
 import styles from './Figure.styl'
 
 /**

package/react/Figure/Figure.spec.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
 import { shallow } from 'enzyme'
 import { flatten, merge } from 'lodash'
+import React from 'react'
+
 import Figure from './Figure'
 
 const combine = (...iterables) => {
@@ -30,7 +31,10 @@ describe('Figure', () => {
   ]
 
   const combinations = combine
-    .apply(null, coloredAttributes.map(x => [{ [x]: true }, { [x]: false }]))
+    .apply(
+      null,
+      coloredAttributes.map(x => [{ [x]: true }, { [x]: false }])
+    )
     .map(attrs => {
       return merge.apply(null, [{}, ...attrs])
     })

package/react/Figure/FigureBlock.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
-import Types from 'prop-types'
 import classNames from 'classnames'
+import Types from 'prop-types'
+import React from 'react'
+
 import Figure from './Figure'
-import Typography from '../Typography'
 import styles from './FigureBlock.styl'
+import Typography from '../Typography'
 
 /**
  * Shows a `Figure` with a label, useful for important numbers.

package/react/FileImageLoader/index.jsx

@@ -1,5 +1,6 @@
-import { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Component } from 'react'
+
 import { withClient } from 'cozy-client'
 import logger from 'cozy-logger'
 

package/react/FileImageLoader/index.spec.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render, waitFor } from '@testing-library/react'
+import React from 'react'
 
 import { createMockClient } from 'cozy-client'
 import logger from 'cozy-logger'

package/react/FileInput/index.jsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
-import React from 'react'
-import PropTypes from 'prop-types'
 import uniqueId from 'lodash/uniqueId'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import styles from './styles.styl'
 

package/react/FileInput/index.spec.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import uniqueId from 'lodash/uniqueId'
+import React from 'react'
 
 import FileInput from '.'
 

package/react/FilePath/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import MidEllipsis from '../MidEllipsis'
+
 import styles from './styles.styl'
+import MidEllipsis from '../MidEllipsis'
 
 const FilePath = ({ children, className }) => (
   <MidEllipsis className={`${className} ${styles['c-file-path']}`}>

package/react/FilePathLink/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import Link from '../Link'
+
 import FilePath from '../FilePath'
+import Link from '../Link'
 
 const FilePathLink = ({ children, ...props }) => (
   <Link color="textSecondary" underline="hover" {...props}>

package/react/FilePicker/FilePickerBody.jsx

@@ -1,12 +1,12 @@
-import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
+import React, { useCallback } from 'react'
 
 import { models, useQuery } from 'cozy-client'
-import List from '../List'
-import LoadMore from '../LoadMore'
 
-import { buildContentFolderQuery } from './queries'
 import FilePickerBodyItem from './FilePickerBodyItem'
+import { buildContentFolderQuery } from './queries'
+import List from '../List'
+import LoadMore from '../LoadMore'
 import { isValidFile } from '../helpers/acceptedTypes'
 
 const {
@@ -22,10 +22,11 @@ const FilePickerBody = ({
   multiple
 }) => {
   const contentFolderQuery = buildContentFolderQuery(folderId)
-  const { data: contentFolder, hasMore, fetchMore } = useQuery(
-    contentFolderQuery.definition,
-    contentFolderQuery.options
-  )
+  const {
+    data: contentFolder,
+    hasMore,
+    fetchMore
+  } = useQuery(contentFolderQuery.definition, contentFolderQuery.options)
 
   const onCheck = useCallback(
     itemId => {
@@ -94,7 +95,7 @@ const FilePickerBody = ({
             />
           )
         })}
-      {hasMore && <LoadMore label={'loadMore'} fetchMore={fetchMore} />}
+      {hasMore && <LoadMore label="loadMore" fetchMore={fetchMore} />}
     </List>
   )
 }

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 => {