feat: Upgrade packages

package.json

@@ -77,7 +77,7 @@
     "@sentry/integrations": "7.88.0",
     "@sentry/react": "7.88.0",
     "classnames": "2.3.1",
-    "cozy-bar": "^25.0.0",
+    "cozy-bar": "^27.0.0",
     "cozy-client": "^60.14.0",
     "cozy-dataproxy-lib": "^4.11.0",
     "cozy-device-helper": "^3.8.0",
@@ -91,11 +91,12 @@
     "cozy-minilog": "^3.10.0",
     "cozy-pouch-link": "^54.0.0",
     "cozy-realtime": "^5.0.0",
-    "cozy-search": "^0.6.0",
+    "cozy-search": "^0.13.0",
     "cozy-sharing": "^25.4.0",
     "cozy-stack-client": "^60.1.0",
     "cozy-tsconfig": "^1.8.1",
-    "cozy-ui": "^130.6.1",
+    "cozy-ui": "^133.0.0",
+    "cozy-ui-plus": "^2.1.0",
     "cozy-vcard": "^0.2.18",
     "final-form": "4.20.9",
     "final-form-arrays": "3.1.0",

src/components/Actions/edit.js

@@ -4,13 +4,13 @@ import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
 
 import { getAppI18n } from '@/locales/index'
 
-export const edit = () => {
+export const edit = ({ client }) => {
   const { t } = getAppI18n()
 
   const name = 'edit'
   const icon = PenIcon
   const label = t('edit')
-  const action = (docs, { client }) => {
+  const action = docs => {
     const contactId = docs[0]._id
 
     const webLink = generateWebLink({

src/components/Actions/trash.jsx

@@ -19,11 +19,11 @@ import ConfirmDeleteActions from '../Common/ConfirmDeleteActions'
  * @param  {object} options.t - Translation function
  * @returns {object} Object with action
  */
-export const trash = ({ clearSelection, showModal, hideModal, t }) => {
+export const trash = ({ client, clearSelection, showModal, hideModal, t }) => {
   const name = 'trash'
   const label = t('SelectionBar.trash_action')
   const icon = TrashIcon
-  const action = (docs, { client }) => {
+  const action = docs => {
     const hasConnectedAccounts = doc => {
       return getConnectedAccounts(doc).length > 0
     }

src/components/Actions/view.js

@@ -4,13 +4,13 @@ import People from 'cozy-ui/transpiled/react/Icons/People'
 
 import { getAppI18n } from '@/locales/index'
 
-export const view = () => {
+export const view = ({ client }) => {
   const { t } = getAppI18n()
 
   const name = 'view'
   const icon = People
   const label = t('view-contact')
-  const action = (docs, { client }) => {
+  const action = docs => {
     const contactId = docs[0]._id
 
     const webLink = generateWebLink({

src/components/AppProviders.jsx

@@ -5,15 +5,15 @@ import { BarProvider } from 'cozy-bar'
 import { CozyProvider } from 'cozy-client'
 import { DataProxyProvider } from 'cozy-dataproxy-lib'
 import { WebviewIntentProvider } from 'cozy-intent'
-import SelectedGroupProvider from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import {
   StylesProvider,
   createGenerateClassName
 } from 'cozy-ui/transpiled/react/styles'
+import SelectedGroupProvider from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
+import CozyTheme from 'cozy-ui-plus/dist/providers/CozyTheme'
 
 import { ContactsDiplayedProvider } from './Contexts/ContactsDiplayed'
 import SearchProvider from './Contexts/Search'

src/components/Common/StoreButton.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
 import { useClient } from 'cozy-client'
-import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import AppIcon from 'cozy-ui-plus/dist/AppIcon'
 
 import { getFilteredStoreUrl } from '../../helpers/store'
 

src/components/ContactCard/ContactFields/helpers.js

@@ -1,4 +1,4 @@
-import { makeCustomLabel } from 'cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers'
+import { makeCustomLabel } from 'cozy-ui-plus/dist/Contacts/AddModal/ContactForm/helpers'
 
 const makeCustomOrSupportedLabel = ({ type, value, hasPrefix, t }) => {
   if (!value) return null

src/components/ContactsList/ContactListItem.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import React, { memo } from 'react'
 
 import { models } from 'cozy-client'
-import ContactCozy from 'cozy-ui/transpiled/react/ContactsList/Contacts/ContactCozy'
-import ContactEmail from 'cozy-ui/transpiled/react/ContactsList/Contacts/ContactEmail'
-import ContactIdentity from 'cozy-ui/transpiled/react/ContactsList/Contacts/ContactIdentity'
-import ContactPhone from 'cozy-ui/transpiled/react/ContactsList/Contacts/ContactPhone'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import ContactCozy from 'cozy-ui-plus/dist/ContactsList/Contacts/ContactCozy'
+import ContactEmail from 'cozy-ui-plus/dist/ContactsList/Contacts/ContactEmail'
+import ContactIdentity from 'cozy-ui-plus/dist/ContactsList/Contacts/ContactIdentity'
+import ContactPhone from 'cozy-ui-plus/dist/ContactsList/Contacts/ContactPhone'
 
 import ContactWithSelection from './ContactSelection'
 import { fullContactPropTypes } from '../ContactPropTypes'

src/components/ContactsList/ContactsEmptyList.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import { useSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
 import Empty from 'cozy-ui/transpiled/react/Empty'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import InfoIcon from 'cozy-ui/transpiled/react/Icons/Info'
@@ -12,6 +11,7 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
 import Infos from 'cozy-ui/transpiled/react/deprecated/Infos'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { useSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
 
 import EmptyIcon from '../../assets/icons/empty-contact-list.svg'
 import { hasSelectedGroup } from '../../helpers/groups'

src/components/ContactsList/Virtualized/Cell.jsx

@@ -1,12 +1,12 @@
 import React, { useRef, useState } from 'react'
 
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
-import ContactIdentity from 'cozy-ui/transpiled/react/ContactsList/Contacts/ContactIdentity'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import ContactIdentity from 'cozy-ui-plus/dist/ContactsList/Contacts/ContactIdentity'
 
 const Cell = ({ row, column, cell, actions }) => {
   const { t } = useI18n()

src/components/ContactsList/Virtualized/VirtualizedList.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useClient } from 'cozy-client'
+import { splitFilename } from 'cozy-client/dist/models/file'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import { addToFavorites } from 'cozy-ui/transpiled/react/ActionsMenu/Actions/addToFavorites'
 import { removeFromFavorites } from 'cozy-ui/transpiled/react/ActionsMenu/Actions/removeFromFavorites'
@@ -45,7 +46,16 @@ const VirtualizedList = ({
   const isSelectionEnabled = selection.length > 0
   const actions = makeActions(
     [view, edit, addToFavorites, removeFromFavorites, trash],
-    { selection, clearSelection, showModal, hideModal, client, t, isMobile }
+    {
+      selection,
+      clearSelection,
+      showModal,
+      hideModal,
+      client,
+      t,
+      isMobile,
+      splitFilename
+    }
   )
 
   return (

src/components/ContactsList/__snapshots__/ContactListItem.spec.js.snap

@@ -8,15 +8,15 @@ exports[`ContactListItem should match the contact snapshot 1`] = `
     className="styles__o-layout___3TSz9 styles__o-layout-main-2panes___3ickD"
   >
     <li
-      className="MuiListItem-root u-c-pointer medium MuiListItem-gutters makeStyles-gutters-41 makeStyles-gutters-43"
+      className="MuiListItem-root u-c-pointer medium MuiListItem-gutters makeStyles-gutters-49 makeStyles-gutters-51"
       data-testid="contact-listItem"
       disabled={false}
       onClick={[Function]}
       size="medium"
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-45 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-53 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -38,7 +38,7 @@ exports[`ContactListItem should match the contact snapshot 1`] = `
             aria-checked=""
             aria-label=""
             checked={false}
-            className="PrivateSwitchBase-input-48"
+            className="PrivateSwitchBase-input-56"
             data-indeterminate={false}
             onChange={[Function]}
             readOnly={true}
@@ -58,11 +58,11 @@ exports[`ContactListItem should match the contact snapshot 1`] = `
         </span>
       </span>
       <div
-        className="styles__TableCell___3vgVE styles__contact-identity___mL3IJ u-flex u-flex-items-center u-ellipsis u-p-0"
+        className="styles__TableCell___3vgVE styles__contact-identity___1PxJr u-flex u-flex-items-center u-ellipsis u-p-0"
         data-testid="ContactIdentity"
       >
         <div
-          className="MuiAvatar-root MuiAvatar-circular size-s displayInline MuiAvatar-colorDefault makeStyles-colorDefault-49 makeStyles-colorDefault-50"
+          className="MuiAvatar-root makeStyles-root-57 makeStyles-root-59 MuiAvatar-circular size-s displayInline MuiAvatar-colorDefault makeStyles-colorDefault-58 makeStyles-colorDefault-60"
         >
           JD
         </div>
@@ -84,19 +84,19 @@ exports[`ContactListItem should match the contact snapshot 1`] = `
         </p>
       </div>
       <div
-        className="styles__TableCell___3vgVE styles__contact-email___3n3q2 u-ellipsis u-p-0"
+        className="styles__TableCell___3vgVE styles__contact-email___2ol8_ u-ellipsis u-p-0"
         data-testid="ContactEmail"
       >
         johndoe@localhost
       </div>
       <div
-        className="styles__TableCell___3vgVE styles__contact-phone___1sA_m u-ellipsis u-p-0"
+        className="styles__TableCell___3vgVE styles__contact-phone___2fSrd u-ellipsis u-p-0"
         data-testid="ContactPhone"
       >
         0123456789
       </div>
       <div
-        className="styles__TableCell___3vgVE styles__contact-cozyurl___3kBp5 u-ellipsis u-p-0"
+        className="styles__TableCell___3vgVE styles__contact-cozyurl___V4Pb_ u-ellipsis u-p-0"
         data-testid="ContactCozy"
       >
         http://johndoe.mycozy.cloud

src/components/ContentResult.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types'
 import React, { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
-import { useSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
-import Header from 'cozy-ui/transpiled/react/Contacts/Header'
 import { Content } from 'cozy-ui/transpiled/react/Layout'
+import { useSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
+import Header from 'cozy-ui-plus/dist/Contacts/Header'
 
 import ContactsList from './ContactsList/ContactsList.jsx'
 import ContactsDiplayedContext from './Contexts/ContactsDiplayed'

src/components/ContentResult.spec.jsx

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
 import React from 'react'
 
-import { johnDoeContact } from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
+import { johnDoeContact } from 'cozy-ui-plus/dist/Contacts/AddModal/mocks'
 
 import ContentResult from './ContentResult'
 import { groups, contactWithGroup } from '../helpers/testData'

src/components/Intents/CreateContact.jsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { withClient } from 'cozy-client'
-import ContactForm from 'cozy-ui/transpiled/react/Contacts/AddModal/ContactForm'
 import IntentHeader from 'cozy-ui/transpiled/react/IntentHeader'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
+import ContactForm from 'cozy-ui-plus/dist/Contacts/AddModal/ContactForm'
 
 import IntentMain from './IntentMain'
 

src/components/Modals/ContactFormModal.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import { useClient, useQuery, useQueryAll } from 'cozy-client'
-import AddModal from 'cozy-ui/transpiled/react/Contacts/AddModal'
-import { useSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
+import AddModal from 'cozy-ui-plus/dist/Contacts/AddModal'
+import { useSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
 
 import { createOrUpdateContact } from '../../connections/allContacts'
 import { makeContactWithIdentitiesAddresses } from '../../helpers/contacts'

src/components/Modals/ContactFormModal/CreateModal.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useClient, useQueryAll } from 'cozy-client'
-import AddModal from 'cozy-ui/transpiled/react/Contacts/AddModal'
-import { useSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
+import AddModal from 'cozy-ui-plus/dist/Contacts/AddModal'
+import { useSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
 
 import { createOrUpdateContact } from '@/connections/allContacts'
 import { buildContactsQueryByFamilyNameGivenNameEmailCozyUrl } from '@/queries/queries'

src/components/Modals/ContactFormModal/EditModal.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
 import { useClient, useQuery, useQueryAll } from 'cozy-client'
-import AddModal from 'cozy-ui/transpiled/react/Contacts/AddModal'
-import { useSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
+import AddModal from 'cozy-ui-plus/dist/Contacts/AddModal'
+import { useSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
 
 import { createOrUpdateContact } from '@/connections/allContacts'
 import { makeContactWithIdentitiesAddresses } from '@/helpers/contacts'

src/components/Modals/ContactInfoTitle.jsx

@@ -7,8 +7,6 @@ import { useNavigate } from 'react-router-dom'
 import { useClient } from 'cozy-client'
 import minilog from 'cozy-minilog'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import GroupsSelect from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelect'
-import Control from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/SelectBox/Control'
 import Grid from 'cozy-ui/transpiled/react/Grid'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
@@ -17,6 +15,8 @@ import StarOutlineIcon from 'cozy-ui/transpiled/react/Icons/StarOutline'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import GroupsSelect from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelect'
+import Control from 'cozy-ui-plus/dist/Contacts/GroupsSelect/SelectBox/Control'
 
 import { updateContact } from '../../connections/allContacts'
 import { updateContactGroups } from '../../helpers/groups'

src/components/Modals/GroupDeleteConfirmationModal.jsx

@@ -4,13 +4,13 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { useClient } from 'cozy-client'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
-import { useSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
-import { translatedDefaultSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/helpers'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { useSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
+import { translatedDefaultSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/helpers'
 
 import {
   cancelTrashContactsByGroupId,

src/helpers/contacts.spec.js

@@ -3,7 +3,7 @@ import MockDate from 'mockdate'
 import {
   johnDoeContact,
   johnDoeContactWithRelated
-} from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
+} from 'cozy-ui-plus/dist/Contacts/AddModal/mocks'
 
 import {
   getConnectedAccounts,

src/helpers/fetches.spec.js

@@ -1,6 +1,6 @@
 import CozyClient from 'cozy-client'
 import { updateIndexFullNameAndDisplayName } from 'cozy-client/dist/models/contact'
-import { johnDoeContact } from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
+import { johnDoeContact } from 'cozy-ui-plus/dist/Contacts/AddModal/mocks'
 
 import {
   fetchContactsToUpdateAndUpdateWith,

src/helpers/groups.js

@@ -2,7 +2,7 @@ import differenceBy from 'lodash/differenceBy'
 import filter from 'lodash/filter'
 import get from 'lodash/get'
 
-import { defaultSelectedGroup } from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/helpers'
+import { defaultSelectedGroup } from 'cozy-ui-plus/dist/Contacts/GroupsSelect/helpers'
 
 export const updateContactGroups = (contact, nextGroups) => {
   const currentGroups = contact.groups.data

src/targets/browser/index.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/order */
 import 'cozy-ui/transpiled/react/stylesheet.css'
 import 'cozy-ui/dist/cozy-ui.utils.min.css'
+import 'cozy-ui-plus/dist/stylesheet.css'
 import 'cozy-bar/dist/stylesheet.css'
 
 import AppProviders from '@/components/AppProviders'

src/targets/intents/index.jsx

@@ -3,6 +3,7 @@ import '@babel/polyfill'
 
 import 'cozy-ui/transpiled/react/stylesheet.css'
 import 'cozy-ui/dist/cozy-ui.utils.min.css'
+import 'cozy-ui-plus/dist/stylesheet.css'
 import '../../styles/index.styl'
 import '../../styles/intent.styl'
 

src/tests/Applike.jsx

@@ -3,12 +3,12 @@ import { Provider } from 'react-redux'
 import { HashRouter } from 'react-router-dom'
 
 import { CozyProvider } from 'cozy-client'
-import SelectedGroupProvider from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
 import { Layout } from 'cozy-ui/transpiled/react/Layout'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import I18n from 'cozy-ui/transpiled/react/providers/I18n'
+import SelectedGroupProvider from 'cozy-ui-plus/dist/Contacts/GroupsSelect/GroupsSelectProvider'
+import CozyTheme from 'cozy-ui-plus/dist/providers/CozyTheme'
 
 import getCozyClient from './client'
 import { ContactsDiplayedProvider } from '../components/Contexts/ContactsDiplayed'