cozy-ui 111.4.0 → 111.6.0

package/react/deprecated/Alerter/alerter.spec.js

@@ -1,8 +1,8 @@
 'use strict'
 /* eslint-env jest */
 
-import React from 'react'
 import { shallow } from 'enzyme'
+import React from 'react'
 
 import Alerter from '.'
 import Alert from './Alert'
@@ -17,12 +17,7 @@ describe('Alerter component', () => {
     it(`renders correctly an ${type} alert`, () => {
       const wrapper = shallow(<Alerter />)
       Alerter[type](`Test ${type} alert`)
-      expect(
-        wrapper
-          .find(Alert)
-          .dive()
-          .getElement()
-      ).toMatchSnapshot()
+      expect(wrapper.find(Alert).dive().getElement()).toMatchSnapshot()
     })
   })
 
@@ -39,12 +34,7 @@ describe('Alerter component', () => {
     Alerter.info(`Test alert with button`, {
       buttonText: 'BTN'
     })
-    expect(
-      wrapper
-        .find(Alert)
-        .dive()
-        .getElement()
-    ).toMatchSnapshot()
+    expect(wrapper.find(Alert).dive().getElement()).toMatchSnapshot()
   })
 
   it('handles dismiss provided to buttonAction', () => {
@@ -64,10 +54,7 @@ describe('Alerter component', () => {
     // we have to wait the same delay as in the Alerter didMount
     setTimeout(() => {
       expect(alert.state('hidden')).toBe(false)
-      alert
-        .children()
-        .find(Button)
-        .simulate('click')
+      alert.children().find(Button).simulate('click')
       expect(alert.state('hidden')).toBe(true)
     }, 20)
   })

package/react/deprecated/Alerter/index.jsx

@@ -1,7 +1,8 @@
-import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Portal from '../../Portal'
+import React, { Component } from 'react'
+
 import Alert from './Alert'
+import Portal from '../../Portal'
 
 const MINIMUM_ALERT_DURATION = 2000
 

package/react/deprecated/BottomDrawer/index.jsx

@@ -1,7 +1,7 @@
-import React, { Component, createRef } from 'react'
-import PropTypes from 'prop-types'
 import Hammer from 'hammerjs'
 import once from 'lodash/once'
+import PropTypes from 'prop-types'
+import React, { Component, createRef } from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 
 import styles from './styles.styl'
@@ -51,8 +51,8 @@ class BottomDrawer extends Component {
 
     // to be completely accurate, `maximumGestureDelta` should be the difference between the top of the menu and the
     // bottom of the page; but using the height is much easier to compute and accurate enough.
-    const maximumGestureDistance = this.menuRef.current.getBoundingClientRect()
-      .height
+    const maximumGestureDistance =
+      this.menuRef.current.getBoundingClientRect().height
     // between 0 and 1, how far down the gesture must be to be considered complete upon release
     const minimumCloseDistance = 0.6
     // a gesture faster than this will dismiss the menu, regardless of distance traveled

package/react/deprecated/Button/index.jsx

@@ -1,12 +1,12 @@
-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 SpinnerIcon from '../../Icons/Spinner'
 
-const btnClass = function(options) {
+const btnClass = function (options) {
   const { className, extension, size, theme, variant, round, align } = options
   return cx(
     styles['c-btn'],

package/react/deprecated/ButtonAction/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'
 import Icon from '../../Icon'
 

package/react/deprecated/Chip/index.jsx

@@ -1,5 +1,6 @@
 import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
 
 class Chip extends React.PureComponent {

package/react/deprecated/CompositeRow/index.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-
-import { Media, Bd, Img } from '../Media'
-import Typography from '../../Typography'
+import React from 'react'
 
 import styles from './styles.styl'
+import Typography from '../../Typography'
+import { Media, Bd, Img } from '../Media'
 
 const denseStyle = { height: '48px' }
 

package/react/deprecated/GridItem/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
-import Grid from '../../Grid'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
+import Grid from '../../Grid'
 
 const GridItem = ({ onClick, children }) => {
   return (

package/react/deprecated/Infos/index.jsx

@@ -1,7 +1,8 @@
-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'
 import Icon from '../../Icon'
 import IconButton from '../../IconButton'
 import CrossIcon from '../../Icons/Cross'
@@ -9,8 +10,6 @@ import Stack from '../../Stack'
 import Typography from '../../Typography'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
-import styles from './styles.styl'
-
 export const Infos = ({
   description,
   action,
@@ -70,14 +69,8 @@ const InfosMigration = React.memo(function InfosMigration(props) {
     props.text ||
     props.title
   if (isUsingDeprecatedProps) {
-    const {
-      title,
-      text,
-      icon,
-      actionButton,
-      isImportant,
-      ...otherProps
-    } = props
+    const { title, text, icon, actionButton, isImportant, ...otherProps } =
+      props
     logInfosDepecrated(
       'The Infos component API has changed, using any of the following props is deprecated: title, text, icon, actionButton, isImportant'
     )

package/react/deprecated/InfosCarrousel/index.jsx

@@ -1,14 +1,12 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
 import clamp from 'lodash/clamp'
+import PropTypes from 'prop-types'
+import React, { useState, useCallback, useEffect } from 'react'
 import SwipeableViews from 'react-swipeable-views'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import IconButton from '../../IconButton'
-
-import styles from './styles.styl'
-
 import LeftIcon from '../../Icons/Left'
 import RightIcon from '../../Icons/Right'
 
@@ -42,7 +40,7 @@ const InfosCarrousel = ({
   const hasNextInfos = index === count - 1
 
   const onChangeIndex = useCallback(
-    function(index) {
+    function (index) {
       const { onChangeIndex: onChangeIndexProp } = swipeableProps
       if (onChangeIndexProp) {
         onChangeIndexProp(index)

package/react/deprecated/InfosCarrousel/index.spec.jsx

@@ -2,12 +2,11 @@ import React from 'react'
 import { act } from 'react-dom/test-utils'
 import SwipeableViews from 'react-swipeable-views'
 
-import Button from '../Button'
+import InfosCarrousel from '.'
 import IconButton from '../../IconButton'
-import Infos from '../Infos'
 import Typography from '../../Typography'
-
-import InfosCarrousel from '.'
+import Button from '../Button'
+import Infos from '../Infos'
 
 // This is necessary for tests to be predictable
 const swipeableProps = { disableLazyLoading: true }
@@ -39,10 +38,7 @@ const getArrowsDisabledProps = root =>
 
 const simulateSwipeToSlideIndex = (root, slideIndex) => {
   act(() => {
-    root
-      .find(SwipeableViews)
-      .props()
-      .onChangeIndex(slideIndex)
+    root.find(SwipeableViews).props().onChangeIndex(slideIndex)
   })
   root.update()
 }

package/react/deprecated/InlineCard/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/deprecated/IntentModal/IntentModal.jsx

@@ -1,12 +1,11 @@
-import React, { Component } from 'react'
-import styles from './styles.styl'
-import PropTypes from 'prop-types'
-
 import once from 'lodash/once'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
+import styles from './styles.styl'
 import IntentIframe from '../../IntentIframe'
-import Modal from '../Modal'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
+import Modal from '../Modal'
 
 const logIntentModalDepecrated = createDepreciationLogger()
 

package/react/deprecated/IntentOpener/IntentOpener.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
-import IntentModal from '../IntentModal'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
+import IntentModal from '../IntentModal'
 
 const logIntentOpenerDepecrated = createDepreciationLogger()
 

package/react/deprecated/Media/Media.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 /**
  * Useful to align image/icon and content.

package/react/deprecated/Menus/index.js

@@ -2,13 +2,13 @@
 // Since the MuiMenu component doesn't allow another Popover positioning,
 // we have to recompose the Menu component ourselves with basic Mui component
 
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import Grow from '@material-ui/core/Grow'
-import Popper from '@material-ui/core/Popper'
-import Paper from '@material-ui/core/Paper'
 import MenuList from '@material-ui/core/MenuList'
+import Paper from '@material-ui/core/Paper'
+import Popper from '@material-ui/core/Popper'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import { withStyles } from '../../styles'
 import MenuButton from '../Button'

package/react/deprecated/Modal/ModalBackButton.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import cx from 'classnames'
-import Button from '../Button'
+import React from 'react'
+
 import styles from './styles.styl'
 import PreviousIcon from '../../Icons/Previous'
-
 import useBreakpoints from '../../providers/Breakpoints'
+import Button from '../Button'
 
 const DumbModalBackButton = props => {
   const { isMobile } = useBreakpoints()

package/react/deprecated/Modal/ModalButtons.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 import Button from '../Button'
 
 const ModalButtons = ({

package/react/deprecated/Modal/ModalContent.jsx

@@ -1,7 +1,8 @@
-import React, { Component } from 'react'
 import cx from 'classnames'
-import styles from './styles.styl'
+import React, { Component } from 'react'
+
 import AnimatedContentHeader from './AnimatedContentHeader'
+import styles from './styles.styl'
 
 function _getChildrenToRender(children) {
   return React.Children.map(children, child =>

package/react/deprecated/Modal/ModalCross.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import CrossIcon from '../../Icons/Cross'
-import useBreakpoints from '../../providers/Breakpoints'
 import palette from '../../palette'
-
-import styles from './styles.styl'
+import useBreakpoints from '../../providers/Breakpoints'
 
 export const ModalCrossIcon = props => {
   const { isMobile } = useBreakpoints()

package/react/deprecated/Modal/ModalEffects.ts

@@ -6,8 +6,8 @@ import { Theme, useTheme } from '@material-ui/core'
 
 import { isFlagshipApp } from 'cozy-device-helper'
 
-import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import { getFlagshipMetadata } from '../../hooks/useSetFlagshipUi/helpers'
+import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import { useCozyTheme } from '../../providers/CozyTheme'
 
 const getTopBackground = (theme: Theme, cozyBar: Element | null): string =>
@@ -35,10 +35,10 @@ const useHook = (): void => {
   useSetFlagshipUI(
     {
       bottomBackground: theme.palette.background.paper,
-      // @ts-ignore
+      // @ts-expect-error
       bottomTheme: isLight ? 'dark' : 'light',
       topBackground: theme.palette.background.paper,
-      // @ts-ignore
+      // @ts-expect-error
       topTheme: isLight ? 'dark' : 'light'
     },
     {

package/react/deprecated/Modal/ModalFooter.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 const ModalFooter = ({ children, className }) => (
   <div className={cx(styles['c-modal-footer'], className)}>{children}</div>

package/react/deprecated/Modal/ModalHeader.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 const ModalHeader = ({
   title,

package/react/deprecated/Modal/ModalSection.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 const ModalSection = ({ children, className }) => (
   <div

package/react/deprecated/Modal/index.jsx

@@ -1,21 +1,22 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
-import Overlay from '../Overlay'
-import migrateProps from '../../helpers/migrateProps'
-import Portal from '../../Portal'
 import uniqueId from 'lodash/uniqueId'
-import styles from './styles.styl'
-import ModalContent from './ModalContent'
-import ModalSection from './ModalSection'
-import { ModalHeader, ModalBrandedHeader } from './ModalHeader'
-import ModalCross from './ModalCross'
-import ModalFooter from './ModalFooter'
-import ModalButtons from './ModalButtons'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
 import AnimatedContentHeader from './AnimatedContentHeader'
 import ModalBackButton from './ModalBackButton'
+import ModalButtons from './ModalButtons'
+import ModalContent from './ModalContent'
+import ModalCross from './ModalCross'
 import { ModalEffects } from './ModalEffects'
+import ModalFooter from './ModalFooter'
+import { ModalHeader, ModalBrandedHeader } from './ModalHeader'
+import ModalSection from './ModalSection'
+import styles from './styles.styl'
+import Portal from '../../Portal'
+import migrateProps from '../../helpers/migrateProps'
 import { useCozyTheme } from '../../providers/CozyTheme'
+import Overlay from '../Overlay'
 
 const ModalDescription = ModalContent
 

package/react/deprecated/Modal/index.spec.jsx

@@ -1,6 +1,7 @@
+import { mount } from 'enzyme'
 import React, { useState } from 'react'
 import { act } from 'react-dom/test-utils'
-import { mount } from 'enzyme'
+
 import Modal, { BODY_CLASS } from '.'
 import { BreakpointsProvider } from '../../providers/Breakpoints'
 
@@ -21,11 +22,7 @@ describe('Modal', () => {
   }
 
   const clickNthButton = (root, n) =>
-    root
-      .find('button')
-      .at(n)
-      .props()
-      .onClick()
+    root.find('button').at(n).props().onClick()
 
   const mountFirstModal = root => clickNthButton(root, 0)
   const mountSecondModal = root => clickNthButton(root, 1)

package/react/deprecated/NarrowContent/index.jsx

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

package/react/deprecated/Overlay/index.jsx

@@ -1,10 +1,11 @@
-import React, { Component } from 'react'
-import styles from './styles.styl'
 import cx from 'classnames'
 import omit from 'lodash/omit'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 
+import styles from './styles.styl'
+
 const ESC_KEYCODE = 27
 
 const nonDOMProps = ['onEscape', 'children', 'className', 'innerRef']

package/react/deprecated/PercentageBar/index.jsx

@@ -1,7 +1,8 @@
+import cx from 'classnames'
 import React from 'react'
-import PercentageLine from '../PercentageLine'
+
 import styles from './styles.styl'
-import cx from 'classnames'
+import PercentageLine from '../PercentageLine'
 
 const PercentageBar = props => {
   const { value, color, className, ...rest } = props

package/react/deprecated/PercentageLine/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
 import cx from 'classnames'
-import styles from './PercentageLine.styl'
 import PropTypes from 'prop-types'
+import React from 'react'
+
+import styles from './PercentageLine.styl'
 
 /**
  * @deprecated Use [Progress](#/Progress)

package/react/deprecated/PushClientButton/index.jsx

@@ -1,12 +1,11 @@
-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'
 import Icon from '../../Icon'
 import DeviceLaptopIcon from '../../Icons/DeviceLaptop'
 
-import styles from './styles.styl'
-
 const ButtonClient = props => {
   const { label, href, onClick, className, icon } = props
 

package/react/deprecated/PushClientButton/index.spec.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import PushClientButton from '.'
 

package/react/deprecated/QuotaAlert/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 import { QuotaPaywall } from '../../Paywall'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
 const logDeprecatedComponent = createDepreciationLogger()
 

package/react/deprecated/Radio/index.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import { useRadioGroup } from '@material-ui/core/RadioGroup'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import styles from './styles.styl'
-import { useRadioGroup } from '@material-ui/core/RadioGroup'
+import React from 'react'
 
+import styles from './styles.styl'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
 const logRadioDepecrated = createDepreciationLogger()

package/react/deprecated/Radio/index.spec.jsx

@@ -1,10 +1,9 @@
-import React, { useState } from 'react'
-
 import { render, fireEvent } from '@testing-library/react'
+import React, { useState } from 'react'
 
 import Radio from '.'
-import RadioGroup from '../../RadioGroup'
 import FormControlLabel from '../../FormControlLabel'
+import RadioGroup from '../../RadioGroup'
 
 const RadioGroupComponent = ({ radioOnChange, radioName }) => {
   const [radioValue, setRadioValue] = useState('item1')
@@ -76,7 +75,7 @@ xdescribe('Radio', () => {
   })
 
   it(`should handle a 'name' prop`, async () => {
-    const { container } = render(<Radio name={'hello'} />)
+    const { container } = render(<Radio name="hello" />)
 
     const input = container.querySelector('input[type=radio]')
 

package/react/deprecated/RaisedList/index.js

@@ -1,6 +1,6 @@
-import React from 'react'
 import List from '@material-ui/core/List'
 import Paper from '@material-ui/core/Paper'
+import React from 'react'
 
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 

package/react/deprecated/Table/index.jsx

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

package/react/deprecated/ViewStack/ModalStack.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import Modal from '../Modal'
+
 import { ViewStackContext } from './context'
 import { useStack } from './hooks'
+import Modal from '../Modal'
 
 /**
  * Wraps children so that they can push views that will appear as modals.

package/react/deprecated/ViewStack/ViewStack.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import SwipeableViews from 'react-swipeable-views'
-import { useStack } from './hooks'
+
 import { ViewStackContext } from './context'
+import { useStack } from './hooks'
 
 // This is guessed, I could not see how to interface properly with
 // react-swipeable-views's onTransitionEnd

package/react/deprecated/ViewStack/example.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { useViewStack } from '.'
 import Button from '../Button'