cozy-ui 60.9.1 → 60.12.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [60.12.0](https://github.com/cozy/cozy-ui/compare/v60.11.0...v60.12.0) (2022-02-07)
+
+
+### Features
+
+* Use new Radio button for FilePicker and NestedSelect ([a602dca](https://github.com/cozy/cozy-ui/commit/a602dca))
+
+# [60.11.0](https://github.com/cozy/cozy-ui/compare/v60.10.1...v60.11.0) (2022-02-02)
+
+
+### Features
+
+* BottomSheet settings accept `mediumHeight` new prop ([0e2b254](https://github.com/cozy/cozy-ui/commit/0e2b254))
+
+## [60.10.1](https://github.com/cozy/cozy-ui/compare/v60.10.0...v60.10.1) (2022-02-02)
+
+
+### Bug Fixes
+
+* Radios and Checkbox css to use correct primary/secondary colors ([a81e5e3](https://github.com/cozy/cozy-ui/commit/a81e5e3))
+
+# [60.10.0](https://github.com/cozy/cozy-ui/compare/v60.9.1...v60.10.0) (2022-01-31)
+
+
+### Bug Fixes
+
+* Update cozy-intent and device helper ([87d612c](https://github.com/cozy/cozy-ui/commit/87d612c))
+
+
+### Features
+
+* Inject webviewService into BarContext ([b6c269f](https://github.com/cozy/cozy-ui/commit/b6c269f))
+* Update BarContext testing ([15803f4](https://github.com/cozy/cozy-ui/commit/15803f4))
+* Upgrade cozy-intent to latest ([8653ad1](https://github.com/cozy/cozy-ui/commit/8653ad1))
+
 ## [60.9.1](https://github.com/cozy/cozy-ui/compare/v60.9.0...v60.9.1) (2022-01-27)
 
 
@@ -162,6 +197,7 @@
 
 * cozy-intent@1.1.2 or later is now required
 otherwise, AppLinker will crash
+* Wrap your App in the WebviewIntentProvider (via import { WebviewIntentProvider } from 'cozy-intent)
 
 ## [58.5.1](https://github.com/cozy/cozy-ui/compare/v58.5.0...v58.5.1) (2022-01-07)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "60.9.1",
+  "version": "60.12.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -89,10 +89,10 @@
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.1.1",
     "cozy-client": "^27.5.1",
-    "cozy-device-helper": "^1.16.0",
+    "cozy-device-helper": "^1.16.1",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "^1.3.0",
+    "cozy-intent": "^1.6.0",
     "cozy-sharing": "^3.10.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",

package/react/BarContextProvider/index.jsx

@@ -6,16 +6,29 @@ import { CozyProvider } from 'cozy-client'
 import { Provider } from 'react-redux'
 import { WebviewIntentProvider } from 'cozy-intent'
 
-const BarContextProvider = props => {
-  if (!props.children) return null
+const BarContextProvider = ({
+  children,
+  store,
+  client,
+  f,
+  t,
+  lang,
+  webviewService
+}) => {
+  if (!children) return null
+
   return (
-    <Provider store={props.store}>
-      <CozyProvider client={props.client}>
-        <I18nContext.Provider
-          value={{ f: props.f, t: props.t, lang: props.lang }}
-        >
+    <Provider store={store}>
+      <CozyProvider client={client}>
+        <I18nContext.Provider value={{ f, t, lang }}>
           <BreakpointsProvider>
-            <WebviewIntentProvider>{props.children}</WebviewIntentProvider>
+            {webviewService ? (
+              <WebviewIntentProvider webviewService={webviewService}>
+                {children}
+              </WebviewIntentProvider>
+            ) : (
+              children
+            )}
           </BreakpointsProvider>
         </I18nContext.Provider>
       </CozyProvider>

package/react/BarContextProvider/index.spec.jsx

@@ -1,21 +1,20 @@
 import React from 'react'
+import { Provider, useStore } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { render } from '@testing-library/react'
 
+import { useWebviewIntent } from 'cozy-intent'
 import CozyClient, {
   createMockClient,
   CozyProvider,
   useClient
 } from 'cozy-client'
-import configureStore from 'redux-mock-store'
-import { Provider, useStore } from 'react-redux'
-import { isFlagshipApp } from 'cozy-device-helper'
 
 import BarContextProvider from '.'
 import I18n, { useI18n, translate } from '../I18n'
 
-jest.mock('cozy-device-helper', () => ({
-  isFlagshipApp: jest.fn()
-}))
-
+const mockWebviewService = { foo: 'bar' }
+const mockVoidWebviewService = 'No context'
 const locales = { helloworld: 'Hello World !' }
 const localesBar = { a: 'b' }
 
@@ -29,6 +28,20 @@ const DumbHelloWorld = translate()(({ t, f, lang }) => (
   </div>
 ))
 
+const IntentComponent = () => {
+  let webviewIntent
+  let render
+
+  try {
+    webviewIntent = useWebviewIntent()
+    render = webviewIntent.foo
+  } catch {
+    render = mockVoidWebviewService
+  }
+
+  return <main>{render}</main>
+}
+
 const MockedBar = props => {
   const client = new CozyClient({})
   return (
@@ -40,53 +53,146 @@ const MockedBar = props => {
   )
 }
 
-const App = () => {
+const App = ({ children, webviewService }) => {
   const { t, f, lang } = useI18n()
   const client = useClient()
   const store = useStore()
+
   return (
     <MockedBar>
-      <BarContextProvider t={t} f={f} lang={lang} client={client} store={store}>
-        <DumbHelloWorld />
+      <BarContextProvider
+        t={t}
+        f={f}
+        lang={lang}
+        client={client}
+        store={store}
+        webviewService={webviewService}
+      >
+        {children}
       </BarContextProvider>
     </MockedBar>
   )
 }
 
 describe('BarContextProvider', () => {
+  afterAll(() => {
+    window.cozy = undefined
+  })
+
   it('should provide the right (aka app not the one from the bar) t/f/store/client to the DumbHelloWorld', () => {
     const client = createMockClient({})
     const mockStore = configureStore()
     const store = mockStore(x => x)
-    const root = mount(
+
+    const { queryByText } = render(
+      <Provider store={store}>
+        <CozyProvider client={client}>
+          <I18n lang="en" dictRequire={() => locales}>
+            <App>
+              <DumbHelloWorld />
+            </App>
+          </I18n>
+        </CozyProvider>
+      </Provider>
+    )
+
+    expect(queryByText('<div>Hello World !<br>6 Jan<br>en</div>')).toBeDefined()
+  })
+
+  it('should render nothing when no children is provided', () => {
+    const { container } = render(<BarContextProvider />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('should work without a cozy-intent context', () => {
+    // Set App Amirale context
+    window.cozy.isFlagshipApp = true
+
+    const client = createMockClient({})
+    const mockStore = configureStore()
+    const store = mockStore(x => x)
+
+    const { queryByText } = render(
       <Provider store={store}>
         <CozyProvider client={client}>
           <I18n lang="en" dictRequire={() => locales}>
-            <App />
+            <App>
+              <IntentComponent />
+            </App>
           </I18n>
         </CozyProvider>
       </Provider>
     )
-    expect(root.html()).toBe('<div>Hello World !<br>6 Jan<br>en</div>')
+
+    expect(queryByText(mockVoidWebviewService)).toBeInTheDocument()
   })
 
-  it('should try to provide a cozy-intent context', async () => {
+  it('should not try to provide a cozy-intent context if one is provided', () => {
+    // Set App Amirale context
+    window.cozy.isFlagshipApp = true
+
     const client = createMockClient({})
     const mockStore = configureStore()
     const store = mockStore(x => x)
-    mount(
+
+    const { queryByText } = render(
+      <Provider store={store}>
+        <CozyProvider client={client}>
+          <I18n lang="en" dictRequire={() => locales}>
+            <App webviewService={mockWebviewService}>
+              <IntentComponent />
+            </App>
+          </I18n>
+        </CozyProvider>
+      </Provider>
+    )
+
+    expect(queryByText(mockWebviewService.foo)).toBeInTheDocument()
+  })
+
+  it('should work without a cozy-intent context', () => {
+    // Set Web context
+    window.cozy.isFlagshipApp = false
+
+    const client = createMockClient({})
+    const mockStore = configureStore()
+    const store = mockStore(x => x)
+
+    const { queryByText } = render(
+      <Provider store={store}>
+        <CozyProvider client={client}>
+          <I18n lang="en" dictRequire={() => locales}>
+            <App>
+              <IntentComponent />
+            </App>
+          </I18n>
+        </CozyProvider>
+      </Provider>
+    )
+
+    expect(queryByText(mockVoidWebviewService)).toBeInTheDocument()
+  })
+
+  it('should not try to provide a cozy-intent context if one is provided', () => {
+    // Set Web context
+    window.cozy.isFlagshipApp = false
+
+    const client = createMockClient({})
+    const mockStore = configureStore()
+    const store = mockStore(x => x)
+
+    const { queryByText } = render(
       <Provider store={store}>
         <CozyProvider client={client}>
           <I18n lang="en" dictRequire={() => locales}>
-            <App />
+            <App webviewService={mockWebviewService}>
+              <IntentComponent />
+            </App>
           </I18n>
         </CozyProvider>
       </Provider>
     )
 
-    // Currently only the WebviewProvider should call this function in BarContext
-    // This is an easy way to test that the provider is working, albeit brittle
-    // A full test would need to mock cozy-intent, post-me and react-native
-    expect(isFlagshipApp).toHaveBeenCalled()
+    expect(queryByText(mockWebviewService.foo)).not.toBeInTheDocument()
   })
 })

package/react/BottomSheet/BottomSheet.jsx

@@ -37,7 +37,8 @@ export const defaultBottomSheetSpringConfig = {
 }
 
 const defaultSettings = {
-  mediumHeightRatio: 0.33
+  mediumHeightRatio: 0.33,
+  mediumHeight: null
 }
 
 const computeMaxHeight = toolbarProps => {
@@ -54,17 +55,22 @@ const computeMaxHeight = toolbarProps => {
 }
 
 const BottomSheet = ({ toolbarProps, settings, children }) => {
+  const { mediumHeightRatio, mediumHeight } = useMemo(
+    () => ({
+      ...defaultSettings,
+      ...settings
+    }),
+    [settings]
+  )
+
   const innerContentRef = useRef()
   const headerRef = useRef()
   const headerContentRef = useRef()
   const [isTopPosition, setIsTopPosition] = useState(false)
   const [peekHeights, setPeekHeights] = useState(null)
-  const [initPos, setInitPos] = useState(null)
   const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
+  const [initPos, setInitPos] = useState(mediumHeight)
 
-  const { mediumHeightRatio } = useMemo(() => settings || defaultSettings, [
-    settings
-  ])
   const styles = useMemo(() => makeStyles({ isTopPosition }), [isTopPosition])
 
   // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
@@ -79,7 +85,8 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
   useEffect(() => {
     const headerContent = headerContentRef.current
     const maxHeight = computeMaxHeight(toolbarProps)
-    const mediumHeight = Math.round(maxHeight * mediumHeightRatio)
+    const computedMediumHeight =
+      mediumHeight || Math.round(maxHeight * mediumHeightRatio)
 
     const actionButtonsHeight = headerContent
       ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
@@ -98,14 +105,15 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
     // without stopping at the content height
     const bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight
 
-    setPeekHeights([minHeight, mediumHeight, maxHeight])
-    setInitPos(mediumHeight)
+    setPeekHeights([minHeight, computedMediumHeight, maxHeight])
+    setInitPos(computedMediumHeight)
     setBottomSpacerHeight(bottomSpacerHeight)
   }, [
     innerContentRef,
     headerContentRef.current,
     toolbarProps,
-    mediumHeightRatio
+    mediumHeightRatio,
+    mediumHeight
   ])
 
   const handleOnIndexChange = snapIndex => {

package/react/BottomSheet/README.md

@@ -1,4 +1,4 @@
-Displays content coming up from the bottom of the screen. The pane can be swiped to the top of the screen.
+Displays content coming up from the bottom of the screen. The pane can be swiped to the top of the screen. [API documentation is here](https://github.com/cozy/mui-bottom-sheet#props-options)
 
 ```jsx
 import BottomSheet, { BottomSheetItem, BottomSheetHeader } from 'cozy-ui/transpiled/react/BottomSheet'
@@ -8,7 +8,7 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 initialState = { isBottomSheetDisplayed: isTesting() }
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
 
-const settings = { mediumHeightRatio: isTesting() ? 0.90 : 0.33 }
+const settings = isTesting() ? { mediumHeight: 450 } : undefined
 // -->
 
 ;

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -14,7 +14,7 @@ import Icon from '../Icon'
 import FileTypeText from '../Icons/FileTypeText'
 import FileTypeFolder from '../Icons/FileTypeFolder'
 import Checkbox from '../Checkbox'
-import Radio from '../Radio'
+import Radio from '../Radios'
 import { useI18n } from '../I18n'
 
 import styles from './styles.styl'
@@ -93,7 +93,6 @@ const FilePickerBodyItem = ({
         >
           <Input
             data-testid={multiple ? 'checkbox-btn' : 'radio-btn'}
-            gutter={false}
             onChange={() => {
               // handled by onClick on the container
             }}

package/react/FilePicker/FilePickerBodyItem.spec.jsx

@@ -119,13 +119,14 @@ describe('FilePickerBodyItem components:', () => {
       })
       const radioBtn = getByTestId('radio-btn')
 
-      expect(radioBtn.getAttribute('disabled')).toBe('')
+      expect(radioBtn.getAttribute('disabled')).toBe(null)
     })
+
     it('should disable and not display the Radio button if it is a Folder and is not accepted', () => {
       const { getByTestId } = setup({ file: mockFolder01 })
       const radioBtn = getByTestId('radio-btn')
 
-      expect(radioBtn.getAttribute('disabled')).toBe('')
+      expect(radioBtn.getAttribute('disabled')).toBe(null)
     })
   })
 })

package/react/MuiCozyTheme/makeOverrides.js

@@ -633,28 +633,28 @@ const makeOverrides = theme => ({
   MuiRadio: {
     root: {
       padding: '12px',
-      '&.Mui-disabled svg': {
+      '&$disabled svg': {
         borderRadius: '50%',
         backgroundColor: theme.palette.background.default,
         fill: theme.palette.border.disabled
       },
-      '&:not(.Mui-checked) svg': {
+      '&:not($checked) svg': {
         fill: theme.palette.border.main
       }
     },
     colorPrimary: {
-      '&.Mui-checked svg': {
+      '&$checked svg': {
         fill: theme.palette.primary.main
       },
-      '&.Mui-disabled&.Mui-checked svg': {
+      '&$disabled&$checked svg': {
         fill: theme.palette.text.disabled
       }
     },
     colorSecondary: {
-      '&.Mui-checked svg': {
+      '&$checked svg': {
         fill: theme.palette.error.main
       },
-      '&.Mui-disabled&.Mui-checked svg': {
+      '&$disabled&$checked svg': {
         fill: theme.palette.text.disabled
       }
     }
@@ -710,12 +710,12 @@ const makeInvertedOverrides = invertedTheme => {
     },
     MuiCheckbox: {
       colorPrimary: {
-        '&.Mui-checked:not(.Mui-disabled)': {
+        '&$checked:not($disabled)': {
           color: invertedTheme.palette.success.main
         }
       },
       colorSecondary: {
-        '&.Mui-checked:not(.Mui-disabled)': {
+        '&$checked:not($disabled)': {
           color: invertedTheme.palette.error.main
         }
       }

package/react/NestedSelect/NestedSelect.jsx

@@ -1,9 +1,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core'
-import Icon from '../Icon'
-import UIRadio from '../Radio'
 import omit from 'lodash/omit'
+
+import Icon from '../Icon'
+import Radio from '../Radios'
 import ListItem from '../MuiCozyTheme/ListItem'
 import ListItemText from '../ListItemText'
 import Divider from '../MuiCozyTheme/Divider'
@@ -247,10 +248,6 @@ NestedSelect.propTypes = {
 
 export default NestedSelect
 
-export const Radio = ({ ...props }) => (
-  <UIRadio label="" gutter={false} {...props} />
-)
-
 const NestedSelectListItemText = withStyles({
   root: {
     padding: '0rem 0.5rem'

package/transpiled/react/BarContextProvider/index.js

@@ -5,19 +5,28 @@ import { CozyProvider } from 'cozy-client';
 import { Provider } from 'react-redux';
 import { WebviewIntentProvider } from 'cozy-intent';
 
-var BarContextProvider = function BarContextProvider(props) {
-  if (!props.children) return null;
+var BarContextProvider = function BarContextProvider(_ref) {
+  var children = _ref.children,
+      store = _ref.store,
+      client = _ref.client,
+      f = _ref.f,
+      t = _ref.t,
+      lang = _ref.lang,
+      webviewService = _ref.webviewService;
+  if (!children) return null;
   return React.createElement(Provider, {
-    store: props.store
+    store: store
   }, React.createElement(CozyProvider, {
-    client: props.client
+    client: client
   }, React.createElement(I18nContext.Provider, {
     value: {
-      f: props.f,
-      t: props.t,
-      lang: props.lang
+      f: f,
+      t: t,
+      lang: lang
     }
-  }, React.createElement(BreakpointsProvider, null, React.createElement(WebviewIntentProvider, null, props.children)))));
+  }, React.createElement(BreakpointsProvider, null, webviewService ? React.createElement(WebviewIntentProvider, {
+    webviewService: webviewService
+  }, children) : children))));
 };
 
 export default BarContextProvider;

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -39,7 +39,8 @@ export var defaultBottomSheetSpringConfig = {
   clamp: true
 };
 var defaultSettings = {
-  mediumHeightRatio: 0.33
+  mediumHeightRatio: 0.33,
+  mediumHeight: null
 };
 
 var computeMaxHeight = function computeMaxHeight(toolbarProps) {
@@ -60,6 +61,13 @@ var BottomSheet = function BottomSheet(_ref2) {
   var toolbarProps = _ref2.toolbarProps,
       settings = _ref2.settings,
       children = _ref2.children;
+
+  var _useMemo = useMemo(function () {
+    return _objectSpread({}, defaultSettings, settings);
+  }, [settings]),
+      mediumHeightRatio = _useMemo.mediumHeightRatio,
+      mediumHeight = _useMemo.mediumHeight;
+
   var innerContentRef = useRef();
   var headerRef = useRef();
   var headerContentRef = useRef();
@@ -74,20 +82,15 @@ var BottomSheet = function BottomSheet(_ref2) {
       peekHeights = _useState4[0],
       setPeekHeights = _useState4[1];
 
-  var _useState5 = useState(null),
+  var _useState5 = useState(0),
       _useState6 = _slicedToArray(_useState5, 2),
-      initPos = _useState6[0],
-      setInitPos = _useState6[1];
+      bottomSpacerHeight = _useState6[0],
+      setBottomSpacerHeight = _useState6[1];
 
-  var _useState7 = useState(0),
+  var _useState7 = useState(mediumHeight),
       _useState8 = _slicedToArray(_useState7, 2),
-      bottomSpacerHeight = _useState8[0],
-      setBottomSpacerHeight = _useState8[1];
-
-  var _useMemo = useMemo(function () {
-    return settings || defaultSettings;
-  }, [settings]),
-      mediumHeightRatio = _useMemo.mediumHeightRatio;
+      initPos = _useState8[0],
+      setInitPos = _useState8[1];
 
   var styles = useMemo(function () {
     return makeStyles({
@@ -105,17 +108,17 @@ var BottomSheet = function BottomSheet(_ref2) {
   useEffect(function () {
     var headerContent = headerContentRef.current;
     var maxHeight = computeMaxHeight(toolbarProps);
-    var mediumHeight = Math.round(maxHeight * mediumHeightRatio);
+    var computedMediumHeight = mediumHeight || Math.round(maxHeight * mediumHeightRatio);
     var actionButtonsHeight = headerContent ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height')) : 0;
     var actionButtonsBottomMargin = headerContent ? parseFloat(getComputedStyle(headerContent).getPropertyValue('padding-bottom')) : 0;
     var minHeight = headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin; // Used so that the bottomSheet can be opened to the top,
     // without stopping at the content height
 
     var bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight;
-    setPeekHeights([minHeight, mediumHeight, maxHeight]);
-    setInitPos(mediumHeight);
+    setPeekHeights([minHeight, computedMediumHeight, maxHeight]);
+    setInitPos(computedMediumHeight);
     setBottomSpacerHeight(bottomSpacerHeight);
-  }, [innerContentRef, headerContentRef.current, toolbarProps, mediumHeightRatio]);
+  }, [innerContentRef, headerContentRef.current, toolbarProps, mediumHeightRatio, mediumHeight]);
 
   var handleOnIndexChange = function handleOnIndexChange(snapIndex) {
     var maxHeightSnapIndex = peekHeights.length - 1;

package/transpiled/react/FilePicker/FilePickerBodyItem.js

@@ -12,7 +12,7 @@ import Icon from "cozy-ui/transpiled/react/Icon";
 import FileTypeText from "cozy-ui/transpiled/react/Icons/FileTypeText";
 import FileTypeFolder from "cozy-ui/transpiled/react/Icons/FileTypeFolder";
 import Checkbox from "cozy-ui/transpiled/react/Checkbox";
-import Radio from "cozy-ui/transpiled/react/Radio";
+import Radio from "cozy-ui/transpiled/react/Radios";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 var styles = {
   "filePickerBreadcrumb-previousPath": "styles__filePickerBreadcrumb-previousPath___3LKJH",
@@ -81,7 +81,6 @@ var FilePickerBodyItem = function FilePickerBodyItem(_ref) {
     onClick: hasChoice ? handleChoiceClick(file) : undefined
   }, React.createElement(Input, {
     "data-testid": multiple ? 'checkbox-btn' : 'radio-btn',
-    gutter: false,
     onChange: function onChange() {// handled by onClick on the container
     },
     checked: filesIdsSelected.includes(file._id),

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -595,28 +595,28 @@ var makeOverrides = function makeOverrides(theme) {
     MuiRadio: {
       root: {
         padding: '12px',
-        '&.Mui-disabled svg': {
+        '&$disabled svg': {
           borderRadius: '50%',
           backgroundColor: theme.palette.background.default,
           fill: theme.palette.border.disabled
         },
-        '&:not(.Mui-checked) svg': {
+        '&:not($checked) svg': {
           fill: theme.palette.border.main
         }
       },
       colorPrimary: {
-        '&.Mui-checked svg': {
+        '&$checked svg': {
           fill: theme.palette.primary.main
         },
-        '&.Mui-disabled&.Mui-checked svg': {
+        '&$disabled&$checked svg': {
           fill: theme.palette.text.disabled
         }
       },
       colorSecondary: {
-        '&.Mui-checked svg': {
+        '&$checked svg': {
           fill: theme.palette.error.main
         },
-        '&.Mui-disabled&.Mui-checked svg': {
+        '&$disabled&$checked svg': {
           fill: theme.palette.text.disabled
         }
       }
@@ -672,12 +672,12 @@ var makeInvertedOverrides = function makeInvertedOverrides(invertedTheme) {
     },
     MuiCheckbox: {
       colorPrimary: {
-        '&.Mui-checked:not(.Mui-disabled)': {
+        '&$checked:not($disabled)': {
           color: invertedTheme.palette.success.main
         }
       },
       colorSecondary: {
-        '&.Mui-checked:not(.Mui-disabled)': {
+        '&$checked:not($disabled)': {
           color: invertedTheme.palette.error.main
         }
       }

package/transpiled/react/NestedSelect/NestedSelect.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _toArray from "@babel/runtime/helpers/toArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -11,9 +10,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
-import Icon from "cozy-ui/transpiled/react/Icon";
-import UIRadio from "cozy-ui/transpiled/react/Radio";
 import omit from 'lodash/omit';
+import Icon from "cozy-ui/transpiled/react/Icon";
+import Radio from "cozy-ui/transpiled/react/Radios";
 import ListItem from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem";
 import ListItemText from "cozy-ui/transpiled/react/ListItemText";
 import Divider from "cozy-ui/transpiled/react/MuiCozyTheme/Divider";
@@ -267,14 +266,6 @@ NestedSelect.propTypes = {
   })
 };
 export default NestedSelect;
-export var Radio = function Radio(_ref) {
-  var props = _extends({}, _ref);
-
-  return React.createElement(UIRadio, _extends({
-    label: "",
-    gutter: false
-  }, props));
-};
 var NestedSelectListItemText = withStyles({
   root: {
     padding: '0rem 0.5rem'
@@ -292,11 +283,11 @@ var primaryTypographyProps = {
   className: 'u-ellipsis',
   variant: 'body1'
 };
-export var ItemRow = function ItemRow(_ref2) {
-  var item = _ref2.item,
-      _onClick = _ref2.onClick,
-      isSelected = _ref2.isSelected,
-      radioPosition = _ref2.radioPosition;
+export var ItemRow = function ItemRow(_ref) {
+  var item = _ref.item,
+      _onClick = _ref.onClick,
+      isSelected = _ref.isSelected,
+      radioPosition = _ref.radioPosition;
 
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;