cozy-ui 111.5.0 → 111.7.0

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

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