cozy-ui 111.5.0 → 111.7.0

package/react/BottomSheet/BottomSheet.jsx

@@ -1,3 +1,7 @@
+import Fade from '@material-ui/core/Fade'
+import Portal from '@material-ui/core/Portal'
+import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
+import PropTypes from 'prop-types'
 import React, {
   useState,
   useEffect,
@@ -7,19 +11,10 @@ import React, {
   memo,
   Fragment
 } from 'react'
-import PropTypes from 'prop-types'
-import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
 import { useMutationObserver, useTimeoutWhen } from 'rooks'
-import Fade from '@material-ui/core/Fade'
-import Portal from '@material-ui/core/Portal'
 
-import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
-
-import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
-import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
-import Stack from '../Stack'
-import Paper from '../Paper'
 import BackdropOrFragment from './BackdropOrFragment'
+import { ANIMATION_DURATION } from './constants'
 import {
   computeMaxHeight,
   computeMediumHeight,
@@ -31,8 +26,12 @@ import {
   computeBottomSpacer,
   getCssValue
 } from './helpers'
-import { ANIMATION_DURATION } from './constants'
 import stylescss from './styles.styl'
+import Paper from '../Paper'
+import Stack from '../Stack'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 
 const createContainerWrapperStyles = () => ({
   container: {

package/react/BottomSheet/BottomSheetHeader.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
 import { BottomSheetItem } from '../BottomSheet'
 

package/react/BottomSheet/BottomSheetItem.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'
 
 import Paper from '../Paper'
 

package/react/BottomSheet/BottomSheetTitle.jsx

@@ -1,13 +1,13 @@
-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 { BottomSheetItem } from '../BottomSheet'
 import Icon, { iconPropType } from '../Icon'
-import ListItemText from '../ListItemText'
 import List from '../List'
 import ListItem from '../ListItem'
 import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
 import Typography from '../Typography'
 
 const BottomSheetTitle = forwardRef(({ className, label, icon }, ref) => {

package/react/Buttons/index.jsx

@@ -1,8 +1,7 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import cx from 'classnames'
-
 import MuiButton from '@material-ui/core/Button'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import Icon from '../Icon'
 import SpinnerIcon from '../Icons/Spinner'

package/react/Card/index.jsx

@@ -1,6 +1,6 @@
-import React, { PureComponent } from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
 
 import styles from './styles.styl'
 

package/react/Checkbox/index.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-
 import MUICheckbox from '@material-ui/core/Checkbox'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import createDepreciationLogger from '../helpers/createDepreciationLogger'
 

package/react/Chips/index.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
+import MuiChip from '@material-ui/core/Chip'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import MuiChip from '@material-ui/core/Chip'
+import React, { forwardRef } from 'react'
 
 const Chips = forwardRef(
   (

package/react/CipherIcon/index.jsx

@@ -1,12 +1,13 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
-import AppIcon from '../AppIcon'
-import Icon from '../Icon'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 import { withClient } from 'cozy-client'
-import { AppDoctype } from '../proptypes'
 
+import AppIcon from '../AppIcon'
+import Icon from '../Icon'
 import KeychainIcon from '../Icons/Keychain'
+import { AppDoctype } from '../proptypes'
 
 class CipherIcon extends React.PureComponent {
   constructor(props) {

package/react/CipherIcon/index.spec.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
+import React from 'react'
+
 import CipherIcon from '.'
 
 jest.mock('cozy-client', () => ({

package/react/Circle/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/CircleButton/index.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { makeStyles } from '../styles'
+import { makeTypoColor, makeButtonShadow } from './helpers'
 import Box from '../Box'
 import IconButton from '../IconButton'
 import Typography from '../Typography'
-import { makeTypoColor, makeButtonShadow } from './helpers'
 import { getRandomUUID } from '../helpers/getRandomUUID'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   iconButton: {

package/react/CircularChart/CircularChartProgress.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import { makeStyles } from '../styles'
 import MuiCircularProgress from '../CircularProgress'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
   root: {

package/react/CircularChart/CircularProgressWithBackground.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import Box from '../Box'
 import CircularChartProgress from './CircularChartProgress'
+import Box from '../Box'
 
 const CircularProgressWithBackground = forwardRef(
   ({ value, color, backgroundColor, size, thickness, ...props }, ref) => {

package/react/CircularChart/index.jsx

@@ -1,16 +1,14 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import Box from '../Box'
 import CircularProgressWithBackground from './CircularProgressWithBackground'
 import { makeSizeAndThickness } from './helpers'
+import Box from '../Box'
 
 const CircularChart = forwardRef(
   ({ size, primaryProps, secondaryProps, children, ...props }, ref) => {
-    const {
-      primarySizeAndThickness,
-      secondarySizeAndThickness
-    } = makeSizeAndThickness(size, Boolean(secondaryProps))
+    const { primarySizeAndThickness, secondarySizeAndThickness } =
+      makeSizeAndThickness(size, Boolean(secondaryProps))
 
     return (
       <Box

package/react/ContactPicker/index.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 import { models } from 'cozy-client'
 const { getDisplayName } = models.contact
 
-import ContactsListModal from '../ContactsListModal'
 import styles from './styles.styl'
+import ContactsListModal from '../ContactsListModal'
 
 const SelectControl = props => {
   const { className, children, ...rest } = props

package/react/ContactPicker/index.spec.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import { render, fireEvent, waitFor } from '@testing-library/react'
-
-import DemoProvider from '../providers/DemoProvider'
-import mockClient from '../ContactsListModal/mockClient'
-import contacts from '../ContactsList/_mockContacts.json'
+import React from 'react'
 
 import ContactPicker from '.'
+import contacts from '../ContactsList/_mockContacts.json'
+import mockClient from '../ContactsListModal/mockClient'
+import DemoProvider from '../providers/DemoProvider'
 
 const Wrapper = ({ children }) => {
   return <DemoProvider client={mockClient}>{children}</DemoProvider>

package/react/ContactsList/ContactRow.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { models } from 'cozy-client'
 
-import ListItem from '../ListItem'
-import ContactPhone from './Contacts/ContactPhone'
-import ContactIdentity from './Contacts/ContactIdentity'
 import ContactCozy from './Contacts/ContactCozy'
 import ContactEmail from './Contacts/ContactEmail'
+import ContactIdentity from './Contacts/ContactIdentity'
+import ContactPhone from './Contacts/ContactPhone'
+import ListItem from '../ListItem'
 import useBreakpoints from '../providers/Breakpoints'
 
 const { getPrimaryCozy, getPrimaryPhone, getPrimaryEmail } = models.contact

package/react/ContactsList/ContactRow.spec.js

@@ -1,11 +1,12 @@
-import React from 'react'
 import { mount } from 'enzyme'
-
-import { BreakpointsProvider } from '../providers/Breakpoints'
-import ContactRow from './ContactRow'
+import React from 'react'
 import renderer from 'react-test-renderer'
+
 import logger from 'cozy-logger'
 
+import ContactRow from './ContactRow'
+import { BreakpointsProvider } from '../providers/Breakpoints'
+
 logger.setLevel('error')
 
 const makeContact = attrs => ({

package/react/ContactsList/Contacts/ContactCozy.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { TableCell } from '../../deprecated/Table'
 import styles from '../styles.styl'

package/react/ContactsList/Contacts/ContactEmail.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { TableCell } from '../../deprecated/Table'
 import styles from '../styles.styl'

package/react/ContactsList/Contacts/ContactIdentity.jsx

@@ -1,10 +1,11 @@
+import PropTypes from 'prop-types'
 import React from 'react'
+
 import { models } from 'cozy-client'
-import PropTypes from 'prop-types'
 
+import ContactName from './ContactName'
 import { Avatar } from '../../Avatar'
 import { TableCell } from '../../deprecated/Table'
-import ContactName from './ContactName'
 import styles from '../styles.styl'
 
 const { getDisplayName, getInitials } = models.contact
@@ -21,9 +22,7 @@ const ContactIdentity = ({ contact }) => {
   return (
     <TableCell
       data-testid="ContactIdentity" // used by a test in cozy-contacts
-      className={`${
-        styles['contact-identity']
-      } u-flex u-flex-items-center u-ellipsis u-p-0`}
+      className={`${styles['contact-identity']} u-flex u-flex-items-center u-ellipsis u-p-0`}
     >
       <Avatar text={getInitials(contact)} size="small" />
       <ContactName displayName={displayName} familyName={name.familyName} />

package/react/ContactsList/Contacts/ContactName.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 Typography from '../../Typography'
 

package/react/ContactsList/Contacts/ContactPhone.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { TableCell } from '../../deprecated/Table'
 import styles from '../styles.styl'

package/react/ContactsList/ContactsList.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { useI18n } from '../providers/I18n'
-import { Table } from '../deprecated/Table'
+import ContactRow from './ContactRow'
+import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
+import withContactsListLocales from './locales/withContactsListLocales'
 import List from '../List'
 import ListSubheader from '../ListSubheader'
-import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
-import ContactRow from './ContactRow'
+import { Table } from '../deprecated/Table'
 import useBreakpoints from '../providers/Breakpoints'
-import withContactsListLocales from './locales/withContactsListLocales'
+import { useI18n } from '../providers/I18n'
 
 const ContactsList = ({ contacts, onItemClick, ...rest }) => {
   const { t } = useI18n()

package/react/ContactsList/locales/withContactsListLocales.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/ContactsListModal/AddContact/AddContactContent.jsx

@@ -1,15 +1,14 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import PeopleIcon from '../../Icons/People'
-import { Media, Img, Bd } from '../../deprecated/Media'
 import TextField from '../../TextField'
 import Typography from '../../Typography'
+import { Media, Img, Bd } from '../../deprecated/Media'
 import { withContactsListLocales } from '../withContactsListLocales'
 
-import styles from './styles.styl'
-
 const AddContactContent = ({ t, setContactValues }) => {
   const handleChange = ev => {
     const { name, value } = ev.target
@@ -28,7 +27,7 @@ const AddContactContent = ({ t, setContactValues }) => {
             className="u-mt-1"
             variant="outlined"
             fullWidth
-            id={'givenName'}
+            id="givenName"
             name="givenName"
             label={t('givenName')}
             onChange={handleChange}
@@ -41,7 +40,7 @@ const AddContactContent = ({ t, setContactValues }) => {
             className="u-mt-1"
             variant="outlined"
             fullWidth
-            id={'familyName'}
+            id="familyName"
             name="familyName"
             label={t('familyName')}
             onChange={handleChange}

package/react/ContactsListModal/AddContact/AddContactDialog.jsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react'
 
 import { useClient } from 'cozy-client'
 
-import { FixedDialog } from '../../CozyDialogs'
-import AddContactTitle from './AddContactTitle'
-import AddContactContent from './AddContactContent'
 import AddContactActions from './AddContactActions'
+import AddContactContent from './AddContactContent'
+import AddContactTitle from './AddContactTitle'
 import { handleSubmit } from './helpers'
+import { FixedDialog } from '../../CozyDialogs'
 
 const AddContactDialog = ({ onListClose, onCreate, onClose }) => {
   const [contactValues, setContactValues] = useState({})

package/react/ContactsListModal/ContactsListContent.jsx

@@ -3,11 +3,11 @@ import React from 'react'
 import { models } from 'cozy-client'
 const { getDisplayName } = models.contact
 
+import EmptyMessage from './EmptyMessage'
+import { withContactsListLocales } from './withContactsListLocales'
 import ContactsList from '../ContactsList'
 import Spinner from '../Spinner'
 import { useI18n } from '../providers/I18n'
-import EmptyMessage from './EmptyMessage'
-import { withContactsListLocales } from './withContactsListLocales'
 
 const mkFilter = filterStr => contacts => {
   if (!filterStr) {

package/react/ContactsListModal/ContactsListModal.jsx

@@ -1,29 +1,28 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
 import { useClient } from 'cozy-client'
 
-import { DialogTitle, DialogContent } from '../Dialog'
-import CozyTheme from '../providers/CozyTheme'
+import AddContactDialog from './AddContact/AddContactDialog'
+import ContactsListContent from './ContactsListContent'
+import MobileHeader from './MobileHeader'
+import styles from './styles.styl'
+import Button from '../Buttons'
 import {
   TopAnchoredDialog,
   DialogCloseButton,
   useCozyDialog
 } from '../CozyDialogs'
-import useRealtime from '../hooks/useRealtime'
+import { DialogTitle, DialogContent } from '../Dialog'
+import Icon from '../Icon'
+import PlusIcon from '../Icons/Plus'
 import useEventListener from '../hooks/useEventListener'
+import useRealtime from '../hooks/useRealtime'
+import CozyTheme from '../providers/CozyTheme'
 import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
-import Button from '../Buttons'
-import PlusIcon from '../Icons/Plus'
-import Icon from '../Icon'
 import TextField from '../TextField'
-import MobileHeader from './MobileHeader'
-import ContactsListContent from './ContactsListContent'
-import AddContactDialog from './AddContact/AddContactDialog'
-
-import styles from './styles.styl'
 
 const ContactsListModal = ({
   onItemClick,

package/react/ContactsListModal/ContactsListModalWithQuery.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { useQueryAll } from 'cozy-client'
 
-import { buildContactsQuery } from './queries'
 import ContactsListModal from './ContactsListModal'
+import { buildContactsQuery } from './queries'
 
 const ContactsListModalWithQuery = props => {
   const contactsQuery = buildContactsQuery()

package/react/ContactsListModal/EmptyMessage.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
+
 import Typography from '../Typography'
 
 const EmptyMessage = props => {

package/react/ContactsListModal/MobileHeader.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import Input from '@material-ui/core/Input'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-import CozyTheme from '../providers/CozyTheme'
 import Icon from '../Icon'
+import IconButton from '../IconButton'
 import PreviousIcon from '../Icons/Previous'
 import Paper from '../Paper'
-import IconButton from '../IconButton'
+import CozyTheme from '../providers/CozyTheme'
 
 const barStyle = {
   height: 48

package/react/ContactsListModal/index.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { withContactsListLocales } from './withContactsListLocales'
 import ContactsListModal from './ContactsListModal'
 import ContactsListModalWithQuery from './ContactsListModalWithQuery'
+import { withContactsListLocales } from './withContactsListLocales'
 
 const ContactsListModalWrapper = ({ contacts, ...props }) => {
   if (contacts) {

package/react/ContactsListModal/withContactsListLocales.jsx

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

package/react/Counter/index.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 const Counter = ({ count, max }) => (
   <span>{count > max ? `${max}+` : count}</span>

package/react/CozyDialogs/ConfirmDialog.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import cx from 'classnames/dedupe'
+import React from 'react'
 
-import useCozyDialog from './useCozyDialog'
-import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog'
-
-import dialogPropTypes from './dialogPropTypes'
 import DialogBackButton from './DialogBackButton'
 import DialogCloseButton from './DialogCloseButton'
+import dialogPropTypes from './dialogPropTypes'
+import useCozyDialog from './useCozyDialog'
+import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog'
 
 const ConfirmDialog = props => {
   const { onClose, onBack, title, content, actions, actionsLayout } = props

package/react/CozyDialogs/Dialog.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
+import DialogBackButton from './DialogBackButton'
+import DialogCloseButton from './DialogCloseButton'
+import dialogPropTypes from './dialogPropTypes'
 import useCozyDialog from './useCozyDialog'
 import MUIDialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog'
 import Divider from '../Divider'
 
-import dialogPropTypes from './dialogPropTypes'
-import DialogBackButton from './DialogBackButton'
-import DialogCloseButton from './DialogCloseButton'
-
 const Dialog = props => {
   const { onClose, onBack, title, content, actions, actionsLayout } = props
   const {

package/react/CozyDialogs/DialogBackButton.jsx

@@ -1,13 +1,11 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import IconButton from '../IconButton'
+import locales from './locales'
+import styles from './styles.styl'
 import Icon from '../Icon'
-
+import IconButton from '../IconButton'
 import PreviousIcon from '../Icons/Previous'
-
-import styles from './styles.styl'
-import locales from './locales'
 import { createUseI18n } from '../providers/I18n'
 
 const useI18n = createUseI18n(locales)

package/react/CozyDialogs/DialogCloseButton.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import IconButton from '../IconButton'
+import locales from './locales'
+import styles from './styles.styl'
 import Icon from '../Icon'
+import IconButton from '../IconButton'
 import CrossMediumIcon from '../Icons/CrossMedium'
 import { createUseI18n } from '../providers/I18n'
 
-import styles from './styles.styl'
-import locales from './locales'
-
 const useI18n = createUseI18n(locales)
 
 const CloseButton = ({ onClick, ...props }) => {