cozy-ui 111.5.0 → 111.6.0

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

package/react/CozyDialogs/DialogTransition.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import MuiSlide from '@material-ui/core/Slide'
 import MuiGrow from '@material-ui/core/Grow'
+import MuiSlide from '@material-ui/core/Slide'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 const DialogTransition = forwardRef(
   ({ fullScreen, isFullscreen, ...props }, ref) => {

package/react/CozyDialogs/FixedActionsDialog.jsx

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

package/react/CozyDialogs/FixedDialog.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 Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog'
 import Divider from '../Divider'
 
-import dialogPropTypes from './dialogPropTypes'
-import DialogBackButton from './DialogBackButton'
-import DialogCloseButton from './DialogCloseButton'
-
 const FixedDialog = props => {
   const { onClose, onBack, title, content, actions, actionsLayout } = props
   const {

package/react/CozyDialogs/IllustrationDialog.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 IllustrationDialog = props => {
   const { onClose, onBack, title, content, actions, actionsLayout } = props

package/react/CozyDialogs/PermissionDialog.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-import { makeStyles } from '../styles'
-import CozyTheme from '../providers/CozyTheme'
 import ConfirmDialog from './ConfirmDialog'
-import PropTypes from 'prop-types'
 import Icon from '../Icon'
 import Paper from '../Paper'
+import CozyTheme from '../providers/CozyTheme'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
   floatingIcon: {

package/react/CozyDialogs/SpecificDialogs/AllowLocationDialog.jsx

@@ -1,14 +1,13 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
+import CozyLocation from './icons/CozyLocation'
+import withSpecificDialogsLocales from './withSpecificDialogsLocales'
 import { IllustrationDialog } from '..'
-import { useI18n } from '../../providers/I18n'
+import Button from '../../Buttons'
 import Icon from '../../Icon'
 import Typography from '../../Typography'
-import Button from '../../Buttons'
-import CozyLocation from './icons/CozyLocation'
-
-import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+import { useI18n } from '../../providers/I18n'
 
 const createStyles = () => ({
   typography: {

package/react/CozyDialogs/SpecificDialogs/AuthentificationDialog.jsx

@@ -1,15 +1,15 @@
-import React, { useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useMemo, useState } from 'react'
 
-import PermissionDialog from '../PermissionDialog'
-import Buttons from '../../Buttons'
-import { useI18n } from '../../providers/I18n'
-import Typography from '../../Typography'
 import { useClient } from 'cozy-client'
-import CozyAuthentificationIcon from '../../Icons/CozyAuthentification'
-import PasswordField from '../../PasswordField'
 
 import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+import Buttons from '../../Buttons'
+import CozyAuthentificationIcon from '../../Icons/CozyAuthentification'
+import PasswordField from '../../PasswordField'
+import Typography from '../../Typography'
+import { useI18n } from '../../providers/I18n'
+import PermissionDialog from '../PermissionDialog'
 
 /**
  * Dialog used to authenticate a user in the cozy system.

package/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx

@@ -1,15 +1,14 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-
-import { IllustrationDialog } from '..'
-import { useI18n } from '../../providers/I18n'
-import Link from '../../Link'
-import Typography from '../../Typography'
+import React, { forwardRef } from 'react'
 
 import DefaultQRCode from './icons/QRCodeInstallFlagshipAppDialog.png'
 import appStoreIcon from './icons/appstore.png'
 import playStoreIcon from './icons/playstore.png'
 import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+import { IllustrationDialog } from '..'
+import Link from '../../Link'
+import Typography from '../../Typography'
+import { useI18n } from '../../providers/I18n'
 
 const InstallFlagshipAppDialog = forwardRef(
   ({ onClose, playStoreUrl, appStoreUrl, QRCode }, ref) => {
@@ -24,7 +23,7 @@ const InstallFlagshipAppDialog = forwardRef(
         componentsProps={{ dialogTitle: { className: 'u-pt-2-half' } }}
         title={
           <Link
-            href={`https://cozy.io/download`}
+            href="https://cozy.io/download"
             target="_blank"
             rel="noopener noreferrer"
           >

package/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx

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

package/react/CozyDialogs/TopAnchoredDialog.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { withStyles } from '../styles'
 import Dialog from '../Dialog'
+import { withStyles } from '../styles'
 
 /**
  * A Dialog that will not be centered vertically. Useful when

package/react/CozyDialogs/testing.spec.jsx

@@ -1,8 +1,7 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
 
 import Dialog from './Dialog'
-
 import {
   getDialog,
   getCloseButton,

package/react/CozyDialogs/useCozyDialog.js

@@ -1,11 +1,10 @@
-import { useState } from 'react'
 import cx from 'classnames'
+import { useState } from 'react'
 
+import DialogTransition from './DialogTransition'
 import useBreakpoints from '../providers/Breakpoints'
 import { makeStyles } from '../styles'
 
-import DialogTransition from './DialogTransition'
-
 let globalId = 0
 const modalSizes = ['small', 'medium', 'large']
 

package/react/DateMonthPicker/index.jsx

@@ -1,15 +1,14 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import range from 'lodash/range'
-import format from 'date-fns/format'
 import cx from 'classnames'
+import format from 'date-fns/format'
+import range from 'lodash/range'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
-import { useI18n } from '../providers/I18n'
+import styles from './styles.styl'
 import Icon from '../Icon'
 import LeftIcon from '../Icons/Left'
 import RightIcon from '../Icons/Right'
-
-import styles from './styles.styl'
+import { useI18n } from '../providers/I18n'
 
 const MonthButton = ({ monthNum, onClick, isSelected }) => {
   const { f } = useI18n()
@@ -86,7 +85,7 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
   )
 }
 
-const dateMonthProp = function(props, propName, componentName) {
+const dateMonthProp = function (props, propName, componentName) {
   if (!/^[0-9]{4}-[0-9]{2}$/.test(props[propName])) {
     return new Error(
       'Invalid prop `' +

package/react/DateMonthPicker/index.spec.jsx

@@ -1,11 +1,11 @@
 import { mount } from 'enzyme'
 import React from 'react'
-import DateMonthPicker from '.'
 import { act } from 'react-dom/test-utils'
 
-import I18n from '../providers/I18n'
+import DateMonthPicker from '.'
 import LeftIcon from '../Icons/Left'
 import RightIcon from '../Icons/Right'
+import I18n from '../providers/I18n'
 
 const findButtonWithLabel = (root, label) =>
   root.findWhere(n => n.type() == 'button' && n.props().children === label)

package/react/Dialog/DialogEffects.spec.tsx

@@ -1,14 +1,14 @@
 import '@testing-library/jest-dom'
-import React from 'react'
 import { Theme } from '@material-ui/core'
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import { WebviewIntentProvider, WebviewService } from 'cozy-intent'
 
 import Dialog from '.'
-import DemoProvider from '../providers/DemoProvider'
 import { DOMStrings, makeOnMount, makeOnUnmount } from './DialogEffects'
 import { ThemeColor } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import DemoProvider from '../providers/DemoProvider'
 
 const theme = {
   palette: {
@@ -29,7 +29,13 @@ const rootModal = document.createElement('div')
 const rootModalColor = 'rgba(29, 33, 42, 0.9)'
 rootModal.style.color = rootModalColor
 
-const Wrapper = ({ open, service }) => {
+const Wrapper = ({
+  open,
+  service
+}: {
+  open?: boolean
+  service: WebviewService
+}): JSX.Element => {
   return (
     <WebviewIntentProvider webviewService={service}>
       <DemoProvider>
@@ -269,7 +275,7 @@ it('should emit onMount() immediately and onUnmount() when the whole tree is del
   const caller = jest.fn<void, unknown[]>()
   const service = {
     call: (...args: unknown[]): void => caller(...args)
-  } as WebviewService
+  } as unknown as WebviewService
 
   const { unmount } = render(<Wrapper service={service} open={true} />)
 
@@ -294,7 +300,7 @@ it('should emit onMount() immediately and onUnmount() when Dialog is deleted fro
   const caller = jest.fn<void, unknown[]>()
   const service = {
     call: (...args: unknown[]): void => caller(...args)
-  } as WebviewService
+  } as unknown as WebviewService
 
   const { rerender } = render(<Wrapper service={service} open={true} />)
 
@@ -321,7 +327,7 @@ it('should not emit onMount() if mounted as open:false, then emit onMount() on o
   const caller = jest.fn<void, unknown[]>()
   const service = {
     call: (...args: unknown[]): void => caller(...args)
-  } as WebviewService
+  } as unknown as WebviewService
 
   const { rerender, unmount } = render(
     <Wrapper service={service} open={false} />
@@ -393,7 +399,7 @@ it('when provided with a faulty <Dialog /> that has no open prop, and then fixed
   const caller = jest.fn<void, unknown[]>()
   const service = {
     call: (...args: unknown[]): void => caller(...args)
-  } as WebviewService
+  } as unknown as WebviewService
 
   const { rerender, unmount } = render(<Wrapper service={service} />)
 

package/react/Dialog/DialogEffects.ts

@@ -4,13 +4,13 @@ import { useEffect } from 'react'
 import { isFlagshipApp } from 'cozy-device-helper'
 import { useWebviewIntent } from 'cozy-intent'
 
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
+import { isRsg } from '../hooks/useSetFlagshipUi/helpers'
 import {
   FlagshipUI,
   ThemeColor,
   parseArg
 } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
-import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
-import { isRsg } from '../hooks/useSetFlagshipUi/helpers'
 import { useCozyTheme } from '../providers/CozyTheme'
 
 interface DialogEffectsOptions {
@@ -43,8 +43,7 @@ export const makeOnMount = ({
   fullscreen,
   sidebar,
   rootModal,
-  theme,
-  isLight
+  theme
 }: DialogEffectsOptions): FlagshipUI => {
   const hasBottomBackground = !rootModal
   const hasTopBackground = cozybar && !rootModal
@@ -184,7 +183,7 @@ export const useDialogSetFlagshipUI = (
        *
        * Note that this will also handle abrupt unmounting, as in hiding the dialog without using the open prop.
        */
-      if (open === false || open === undefined) return
+      if (!open || open === undefined) return
 
       parseArg(
         webviewIntent,

package/react/Dialog/index.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { default as MUIDialog } from '@material-ui/core/Dialog'
+import React from 'react'
 
-import { useCozyTheme } from '../providers/CozyTheme'
 import { useDialogEffects } from './DialogEffects'
+import { useCozyTheme } from '../providers/CozyTheme'
 
 const Dialog = props => {
   const { type, variant } = useCozyTheme()

package/react/Divider/TextDivider/index.jsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-
-import Typography from '../../Typography'
+import React from 'react'
 
 import styles from './styles.styl'
+import Typography from '../../Typography'
 
 /**
  * @description This component is composing `<Typography />` and has access to the same props

package/react/Divider/index.jsx

@@ -1,9 +1,8 @@
-import React, { forwardRef } from 'react'
 import MuiDivider from '@material-ui/core/Divider'
-
-import { withStyles } from '../styles'
+import React, { forwardRef } from 'react'
 
 import TextDivider from './TextDivider'
+import { withStyles } from '../styles'
 
 /**
  * @desc If this component is provided a string children, it will render a `<TextDivider>` component