fix(deps): Upgrade few packages

package.json

@@ -69,6 +69,9 @@
   "devDependencies": {
     "@babel/cli": "7.11.5",
     "@babel/core": "7.16.12",
+    "@babel/helper-builder-react-jsx": "^7.16.7",
+    "@babel/helper-define-map": "^7.16.7",
+    "@babel/helper-regex": "^7.10.5",
     "@cozy/codemods": "^1.9.0",
     "@material-ui/core": "4.12.3",
     "@semantic-release/changelog": "5.0.1",
@@ -92,7 +95,7 @@
     "cozy-device-helper": "^1.16.1",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "^1.13.0",
+    "cozy-intent": "1.13.0",
     "cozy-sharing": "^3.10.0",
     "cozy-stack-client": "27.19.1",
     "css-loader": "0.28.11",

react/ActionMenu/index.spec.jsx

@@ -15,7 +15,7 @@ describe('ActionMenu', () => {
 
   beforeEach(() => {
     // eslint-disable-next-line no-console
-    console.error = function (msg, arg) {
+    console.error = function(msg, arg) {
       if (
         msg.includes('An update to %s inside a test was not wrapped in act') &&
         arg == 'ActionMenuWrapper'
@@ -43,7 +43,12 @@ describe('ActionMenu', () => {
     )
     // Remove an update was not wrapped in act() warning
     await act(async () => {})
-    expect(comp.find(ActionMenuItem).parent().getElement()).toMatchSnapshot()
+    expect(
+      comp
+        .find(ActionMenuItem)
+        .parent()
+        .getElement()
+    ).toMatchSnapshot()
   })
 
   it('should support auto-closing the menu', async () => {
@@ -67,13 +72,19 @@ describe('ActionMenu', () => {
     )
 
     await act(async () => {
-      comp.find(ActionMenuItem).at(1).simulate('click')
+      comp
+        .find(ActionMenuItem)
+        .at(1)
+        .simulate('click')
     })
     expect(menuAction2).toHaveBeenCalled()
     expect(closeMenu).not.toHaveBeenCalled()
 
     act(() => {
-      comp.find(ActionMenuItem).at(0).simulate('click')
+      comp
+        .find(ActionMenuItem)
+        .at(0)
+        .simulate('click')
     })
     expect(menuAction1).toHaveBeenCalled()
     expect(closeMenu).toHaveBeenCalled()

react/Alerter/alerter.spec.js

@@ -17,7 +17,12 @@ 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()
     })
   })
 
@@ -34,7 +39,12 @@ 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', () => {
@@ -54,7 +64,10 @@ 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)
   })

react/AppLinker/expiringMemoize.js

@@ -1,4 +1,4 @@
-export default function (fn, duration, keyFn) {
+export default function(fn, duration, keyFn) {
   const memo = {}
   return arg => {
     const key = keyFn(arg)

react/AppLinker/index.jsx

@@ -142,7 +142,7 @@ export class AppLinker extends React.Component {
     AppLinker.onAppSwitch(onAppSwitch)
     openDeeplinkOrRedirect(
       appInfo.uri + (nativePath === '/' ? '' : nativePath),
-      function () {
+      function() {
         window.location.href = href
       }
     )

react/AppTile/index.jsx

@@ -66,8 +66,9 @@ export const AppTile = ({
       type="button"
       onClick={onClick}
       className={cx({
-        [styles['AppTile-container-maintenance']]:
-          isInMaintenanceWithSpecificDisplay
+        [styles[
+          'AppTile-container-maintenance'
+        ]]: isInMaintenanceWithSpecificDisplay
       })}
       isSecondary={statusLabel === APP_STATUS.installed}
     >

react/BottomDrawer/index.jsx

@@ -49,8 +49,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.menuNode.current.getBoundingClientRect().height
+    const maximumGestureDistance = this.menuNode.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

react/BottomSheet/BottomSheet.jsx

@@ -108,13 +108,7 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
     setPeekHeights([minHeight, computedMediumHeight, maxHeight])
     setInitPos(computedMediumHeight)
     setBottomSpacerHeight(bottomSpacerHeight)
-  }, [
-    innerContentRef,
-    headerContentRef.current,
-    toolbarProps,
-    mediumHeightRatio,
-    mediumHeight
-  ])
+  }, [innerContentRef, toolbarProps, mediumHeightRatio, mediumHeight])
 
   const handleOnIndexChange = snapIndex => {
     const maxHeightSnapIndex = peekHeights.length - 1

react/Button/index.jsx

@@ -6,7 +6,7 @@ import Icon, { iconPropType } from '../Icon'
 
 import SpinnerIcon from 'cozy-ui/transpiled/react/Icons/Spinner'
 
-const btnClass = function (options) {
+const btnClass = function(options) {
   const { className, extension, size, theme, variant, round, align } = options
   return cx(
     styles['c-btn'],

react/ContactsList/Contacts/ContactName.jsx

@@ -4,8 +4,10 @@ import { Contact } from 'cozy-doctypes'
 
 const ContactName = ({ contact }) => {
   const name = contact.name || {}
-  const { givenName: firstname = contact.fullname, familyName: lastname = '' } =
-    name
+  const {
+    givenName: firstname = contact.fullname,
+    familyName: lastname = ''
+  } = name
 
   return (
     <div>

react/DateMonthPicker/index.jsx

@@ -86,7 +86,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 `' +

react/Field/index.jsx

@@ -270,7 +270,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') {

react/Figure/Figure.spec.jsx

@@ -30,10 +30,7 @@ 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])
     })

react/FilePicker/FilePickerBody.jsx

@@ -21,11 +21,10 @@ 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(
     fileId => {

react/FilePicker/FilePickerBreadcrumb.jsx

@@ -12,10 +12,9 @@ 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">

react/I18n/format.jsx

@@ -26,12 +26,13 @@ export const provideDateFnsLocale = (userLang, defaultLang = DEFAULT_LANG) => {
   return locales[lang]
 }
 
-export const initFormat =
-  (userLang, defaultLang = DEFAULT_LANG) =>
-  (date, formatStr) => {
-    const locale = provideDateFnsLocale(userLang, defaultLang)
-    return format(date, formatStr, { locale })
-  }
+export const initFormat = (userLang, defaultLang = DEFAULT_LANG) => (
+  date,
+  formatStr
+) => {
+  const locale = provideDateFnsLocale(userLang, defaultLang)
+  return format(date, formatStr, { locale })
+}
 
 export const formatLocallyDistanceToNow = date =>
   formatDistanceToNow(date, { locale: locales[lang] })

react/I18n/index.jsx

@@ -89,9 +89,8 @@ export const translate = () => WrappedComponent => {
       />
     )
   }
-  Wrapper.displayName = `withI18n(${
-    WrappedComponent.displayName || WrappedComponent.name
-  })`
+  Wrapper.displayName = `withI18n(${WrappedComponent.displayName ||
+    WrappedComponent.name})`
   return Wrapper
 }
 

react/I18n/withLocales.jsx

@@ -35,9 +35,8 @@ const withLocales = localesOrRequire => Component => {
     ...I18n.childContextTypes
   }
 
-  Wrapped.displayName = `withLocales(${
-    Component.displayName || Component.name
-  })`
+  Wrapped.displayName = `withLocales(${Component.displayName ||
+    Component.name})`
 
   // The outer component needs to receive lang
   return translate()(Wrapped)

react/Icon/index.jsx

@@ -42,10 +42,9 @@ function Icon(props) {
     ...restProps
   } = props
 
-  const Svg = useMemo(
-    () => (isFunction(icon) ? icon : getSvgObject(icon)),
-    [icon]
-  )
+  const Svg = useMemo(() => (isFunction(icon) ? icon : getSvgObject(icon)), [
+    icon
+  ])
 
   let style = props.style
   style = Object.assign({}, style)

react/Infos/index.jsx

@@ -68,8 +68,14 @@ 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'
     )

react/InfosCarrousel/index.jsx

@@ -14,11 +14,13 @@ import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
 const useClampedValue = (initialValue, min, max) => {
   const [value, setValue] = useState(initialValue)
 
-  const setClampedValue = newVal => setValue(clamp(newVal, min, max))
+  const setClampedValue = useCallback(newVal =>
+    setValue(clamp(newVal, min, max))
+  )
 
   useEffect(() => {
     setClampedValue(value)
-  }, [min, max])
+  }, [min, max, setClampedValue, value])
 
   return [clamp(value, min, max), setClampedValue]
 }
@@ -33,13 +35,19 @@ const InfosCarrousel = ({
 }) => {
   const count = React.Children.count(children)
   const [index, setIndex] = useClampedValue(0, 0, count - 1)
-  const goToNextInfos = useCallback(() => setIndex(index + 1), [index])
-  const goToPreviousInfos = useCallback(() => setIndex(index - 1), [index])
+  const goToNextInfos = useCallback(() => setIndex(index + 1), [
+    index,
+    setIndex
+  ])
+  const goToPreviousInfos = useCallback(() => setIndex(index - 1), [
+    index,
+    setIndex
+  ])
   const hasPreviousInfos = index === 0
   const hasNextInfos = index === count - 1
 
   const onChangeIndex = useCallback(
-    function (index) {
+    function(index) {
       const { onChangeIndex: onChangeIndexProp } = swipeableProps
       if (onChangeIndexProp) {
         onChangeIndexProp(index)

react/InfosCarrousel/index.spec.jsx

@@ -37,7 +37,10 @@ const getArrowsDisabledProps = root =>
 
 const simulateSwipeToSlideIndex = (root, slideIndex) => {
   act(() => {
-    root.find(SwipeableViews).props().onChangeIndex(slideIndex)
+    root
+      .find(SwipeableViews)
+      .props()
+      .onChangeIndex(slideIndex)
   })
   root.update()
 }

react/InputGroup/index.jsx

@@ -22,8 +22,14 @@ 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