cozy-ui 60.11.0 → 61.1.1

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [61.1.1](https://github.com/cozy/cozy-ui/compare/v61.1.0...v61.1.1) (2022-02-10)
+
+
+### Bug Fixes
+
+* **deps:** update dependency handlebars to v4.7.7 [security] ([3df65a0](https://github.com/cozy/cozy-ui/commit/3df65a0))
+
+# [61.1.0](https://github.com/cozy/cozy-ui/compare/v61.0.0...v61.1.0) (2022-02-10)
+
+
+### Features
+
+* **import-cost:** Decrease size of import of date-fns ([9f2dc1f](https://github.com/cozy/cozy-ui/commit/9f2dc1f))
+
+# [61.0.0](https://github.com/cozy/cozy-ui/compare/v60.12.0...v61.0.0) (2022-02-09)
+
+
+### Features
+
+* Upgrade mui to 4.12.3 ([b1b83d8](https://github.com/cozy/cozy-ui/commit/b1b83d8))
+
+
+### BREAKING CHANGES
+
+* Use must have `@material-ui/core` version `>= 4.12` in your application
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "60.11.0",
+  "version": "61.1.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -70,7 +70,7 @@
     "@babel/cli": "7.11.5",
     "@babel/core": "7.11.5",
     "@cozy/codemods": "^1.9.0",
-    "@material-ui/core": "4.11.4",
+    "@material-ui/core": "4.12.3",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "7.0.18",
     "@semantic-release/npm": "5.3.4",
@@ -167,7 +167,7 @@
     "react-swipeable-views": "^0.13.3"
   },
   "peerDependencies": {
-    "@material-ui/core": "4",
+    "@material-ui/core": ">=4.12",
     "cozy-client": ">=27.5.1",
     "cozy-device-helper": "^1.16.0",
     "cozy-doctypes": "^1.69.0",

package/react/DateMonthPicker/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import range from 'lodash/range'
-import { format } from 'date-fns'
+import format from 'date-fns/format'
 import cx from 'classnames'
 
 import { useI18n } from '../I18n'
@@ -13,7 +13,7 @@ import styles from './styles.styl'
 
 const MonthButton = ({ monthNum, onClick, isSelected }) => {
   const { f } = useI18n()
-  // We do not care care about year and day since we are creating the date
+  // We do not care about year and day since we are creating the date
   // only to be able to format it into a monthName
   const d = new Date(2019, monthNum, 15)
   const handleClick = () => {

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

@@ -1,4 +1,4 @@
-import { fade as alpha } from '@material-ui/core/styles'
+import { alpha } from '@material-ui/core/styles'
 
 const SWITCH_BAR_WIDTH = 25
 

package/react/MuiCozyTheme/makeTheme.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { createMuiTheme } from '@material-ui/core/styles'
+import { createTheme } from '@material-ui/core/styles'
 
 import { getCssVariableValue } from '../utils/color'
 import isTesting from '../helpers/isTesting'
@@ -50,7 +50,7 @@ const themesCommonConfig = {
 
 export const makeTheme = type => {
   const palette = makePalette(type)
-  const theme = createMuiTheme({
+  const theme = createTheme({
     ...themesCommonConfig,
     typography: makeTypography(palette),
     palette

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/react/__snapshots__/examples.spec.jsx.snap

@@ -201,7 +201,7 @@ exports[`Banner should render examples: Banner 1`] = `
   </div>
   <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
     <div class=\\"styles__c-banner-wrapper___3KlaG\\">
-      <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-xs-space-between\\">
+      <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-content-xs-space-between\\">
         <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-align-items-xs-center MuiGrid-grid-xs-12 MuiGrid-grid-lg-8\\">
           <div class=\\"MuiGrid-root MuiGrid-item\\">
             <div class=\\"styles__c-banner-icon___1f_LM\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
@@ -216,7 +216,7 @@ exports[`Banner should render examples: Banner 1`] = `
             <p class=\\"MuiTypography-root MuiTypography-body2\\">Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.</p>
           </div>
         </div>
-        <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-align-items-xs-center MuiGrid-justify-xs-flex-end MuiGrid-grid-xs-12 MuiGrid-grid-lg-4\\">
+        <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-flex-end MuiGrid-grid-xs-12 MuiGrid-grid-lg-4\\">
           <div class=\\"MuiGrid-root styles__c-banner-buttons___3sLgG MuiGrid-item\\"><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path></svg><span>Download</span></span></button><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh\\"><span><span>No, thanks!</span></span></button></div>
         </div>
       </div>
@@ -7744,7 +7744,7 @@ exports[`ProgressionBanner should render examples: ProgressionBanner 1`] = `
   </div>
   <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
     <div class=\\"styles__c-banner-wrapper___3KlaG Component-banner-18\\">
-      <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-xs-space-between\\">
+      <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-content-xs-space-between\\">
         <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-align-items-xs-center MuiGrid-grid-xs-12 MuiGrid-grid-lg-8\\">
           <div class=\\"MuiGrid-root MuiGrid-item\\">
             <div class=\\"styles__c-banner-icon___1f_LM\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">

package/transpiled/react/DateMonthPicker/index.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import range from 'lodash/range';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import cx from 'classnames';
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 import Icon from "cozy-ui/transpiled/react/Icon";
@@ -23,7 +23,7 @@ var MonthButton = function MonthButton(_ref) {
       isSelected = _ref.isSelected;
 
   var _useI18n = useI18n(),
-      f = _useI18n.f; // We do not care care about year and day since we are creating the date
+      f = _useI18n.f; // We do not care about year and day since we are creating the date
   // only to be able to format it into a monthName
 
 

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

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { fade as alpha } from '@material-ui/core/styles';
+import { alpha } from '@material-ui/core/styles';
 var SWITCH_BAR_WIDTH = 25;
 export var makeThemeOverrides = function makeThemeOverrides(theme) {
   var createOverrides = theme.palette.type === 'dark' ? makeInvertedOverrides : makeOverrides;

package/transpiled/react/MuiCozyTheme/makeTheme.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { getCssVariableValue } from "cozy-ui/transpiled/react/utils/color";
 import isTesting from "cozy-ui/transpiled/react/helpers/isTesting";
 import AccordionExpandIcon from "cozy-ui/transpiled/react/MuiCozyTheme/AccordionExpandIcon";
@@ -55,7 +55,7 @@ var themesCommonConfig = _objectSpread({
 
 export var makeTheme = function makeTheme(type) {
   var palette = makePalette(type);
-  var theme = createMuiTheme(_objectSpread({}, themesCommonConfig, {
+  var theme = createTheme(_objectSpread({}, themesCommonConfig, {
     typography: makeTypography(palette),
     palette: palette
   }));

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;