cozy-ui 65.1.1 → 66.0.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [66.0.0](https://github.com/cozy/cozy-ui/compare/v65.1.3...v66.0.0) (2022-05-02)
+
+
+### Bug Fixes
+
+* Upgrade cozy-device-helper API ([45b22fa](https://github.com/cozy/cozy-ui/commit/45b22fa))
+
+
+### BREAKING CHANGES
+
+* This will use a more robust CDH API.
+In order to support the update, it is need to upgrade CDH to >=2.0.0
+
+## [65.1.3](https://github.com/cozy/cozy-ui/compare/v65.1.2...v65.1.3) (2022-04-29)
+
+
+### Bug Fixes
+
+* Export toolbarPropsPropType correctly ([ccf994f](https://github.com/cozy/cozy-ui/commit/ccf994f))
+
+## [65.1.2](https://github.com/cozy/cozy-ui/compare/v65.1.1...v65.1.2) (2022-04-29)
+
+
+### Bug Fixes
+
+* Use `circular | rectangular` on Badge overlap ([ae374ff](https://github.com/cozy/cozy-ui/commit/ae374ff))
+
 ## [65.1.1](https://github.com/cozy/cozy-ui/compare/v65.1.0...v65.1.1) (2022-04-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "65.1.1",
+  "version": "66.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -91,7 +91,7 @@
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.4.1",
     "cozy-client": "28.2.0",
-    "cozy-device-helper": "1.18.0",
+    "cozy-device-helper": "2.0.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": "1.16.1",
@@ -176,7 +176,7 @@
   "peerDependencies": {
     "@material-ui/core": ">=4.12",
     "cozy-client": ">=28.1.0",
-    "cozy-device-helper": "^1.18.0",
+    "cozy-device-helper": "^2.0.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": ">=1.3.0",

package/react/Badge/Readme.md

@@ -33,7 +33,7 @@ const initialVariants = [
         horizontal: variant.left ? "left" : "right",
       }}
       withBorder={variant.withBorder}
-      overlap={variant.overlap ? "circle" : "rectangle"}
+      overlap={variant.overlap ? "circular" : "rectangular"}
     >
       <Icon
         icon={CircleFilledIcon}

package/react/Badge/index.jsx

@@ -3,19 +3,35 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import MuiBadge from '@material-ui/core/Badge'
 
-const Badge = ({ classes = {}, size, withBorder, ...props }) => {
+const Badge = ({
+  classes = {},
+  size,
+  withBorder,
+  overlap: overlapProp,
+  ...props
+}) => {
   const sizeClasses = {
     small: 'badgeSizeSmall',
     medium: 'badgeSizeMedium',
     large: 'badgeSizeLarge'
   }
 
+  // due to deprecated prop circle and rectangle
+  // https://github.com/mui/material-ui/releases/tag/v4.12.4
+  const overlap =
+    overlapProp === 'circle'
+      ? 'circular'
+      : overlapProp === 'rectangle'
+      ? 'rectangular'
+      : overlapProp
+
   return (
     <MuiBadge
       classes={{
         badge: cx(sizeClasses[size], withBorder ? 'badgeBorder' : null),
         ...classes
       }}
+      overlap={overlap}
       {...props}
     />
   )
@@ -37,7 +53,7 @@ Badge.defaultProps = {
   size: 'medium',
   showZero: true,
   withBorder: true,
-  overlap: 'circle'
+  overlap: 'circular'
 }
 
 export default Badge

package/react/BottomSheet/BottomSheet.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
 
-import { flagshipMetadata } from 'cozy-device-helper'
+import { getFlagshipMetadata } from 'cozy-device-helper'
 
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Paper from 'cozy-ui/transpiled/react/Paper'
@@ -112,7 +112,7 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
       headerRef.current.offsetHeight +
       actionButtonsHeight +
       actionButtonsBottomMargin +
-      (flagshipMetadata.navbarHeight || 0)
+      (getFlagshipMetadata().navbarHeight || 0)
 
     // Used so that the bottomSheet can be opened to the top,
     // without stopping at the content height
@@ -154,7 +154,9 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
 
   return (
     <>
-      {flagshipMetadata.immersive && <span style={styles.flagshipImmersive} />}
+      {getFlagshipMetadata().immersive && (
+        <span style={styles.flagshipImmersive} />
+      )}
 
       <MuiBottomSheet
         peekHeights={peekHeights}

package/react/ContactPicker/Readme.md

@@ -1,6 +1,6 @@
-:warning: The app must have `POST` permission on `io.cozy.contacts` doctype to use `ContactPicker`.
+⚠️ The app must have `POST` permission on `io.cozy.contacts` doctype to use `ContactPicker`.
 
-:warning: Since this component use `ContactsListModal`, it does a request to fetch all contacts, it should be wrapped in a CozyProvider.
+⚠️ Since this component use `ContactsListModal`, it does a request to fetch all contacts, it should be wrapped in a CozyProvider.
 
 Also, to take advantage of realtime updates of the contacts, the CozyClient passed to the provider should have a realtime plugin initialized. The component will work without realtime initialized, but the list will not always be up-to-date.
 

package/react/ContactsListModal/Readme.md

@@ -2,9 +2,9 @@
 
 A filterable list of contacts shown in a modal.
 
-:warning: The app must have `POST` permission on `io.cozy.contacts` doctype to use `ContactsListModal`.
+⚠️ The app must have `POST` permission on `io.cozy.contacts` doctype to use `ContactsListModal`.
 
-:warning: Since this component does a request to fetch all contacts, it should be wrapped in a CozyProvider.
+⚠️ Since this component does a request to fetch all contacts, it should be wrapped in a CozyProvider.
 
 Also, to take advantage of realtime updates of the contacts, the CozyClient passed to the provider should have a realtime plugin initialized. The component will work without realtime initialized, but the list will not always be up-to-date.
 

package/react/Dialog/index.jsx

@@ -3,7 +3,7 @@ import { RemoveScroll } from 'react-remove-scroll'
 import { default as MUIDialog } from '@material-ui/core/Dialog'
 import { useTheme } from '@material-ui/core'
 
-import { flagshipMetadata } from 'cozy-device-helper'
+import { getFlagshipMetadata } from 'cozy-device-helper'
 
 import useBreakpoints from '../hooks/useBreakpoints'
 import { useCozyTheme } from '../CozyTheme'
@@ -49,13 +49,13 @@ const Dialog = props => {
         },
     {
       bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'],
-      bottomTheme: flagshipMetadata.immersive ? 'light' : 'dark',
+      bottomTheme: getFlagshipMetadata().immersive ? 'light' : 'dark',
       bottomOverlay: 'transparent',
       topOverlay: 'transparent',
       topBackground:
         cozBar && getComputedStyle(cozBar).getPropertyValue('background-color'),
       topTheme:
-        flagshipMetadata.immersive ||
+        getFlagshipMetadata().immersive ||
         (cozBar && cozBar.classList.contains('coz-theme-primary'))
           ? 'light'
           : 'dark'

package/react/MuiCozyTheme/makeOverrides.js

@@ -697,16 +697,16 @@ const makeOverrides = theme => ({
         fontSize: '.5rem'
       }
     },
-    anchorOriginTopRightRectangle: {
+    anchorOriginTopRightRectangular: {
       transform: 'scale(1) translate(37%, -37%)'
     },
-    anchorOriginBottomRightRectangle: {
+    anchorOriginBottomRightRectangular: {
       transform: 'scale(1) translate(37%, 37%)'
     },
-    anchorOriginBottomLeftRectangle: {
+    anchorOriginBottomLeftRectangular: {
       transform: 'scale(1) translate(-37%, 37%)'
     },
-    anchorOriginTopLeftRectangle: {
+    anchorOriginTopLeftRectangular: {
       transform: 'scale(1) translate(-37%, -37%)'
     },
     dot: {

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -27,11 +27,11 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-12 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-12 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
@@ -69,11 +69,11 @@ exports[`SquareAppIcon component should render an app correctly with the given n
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-6 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-6 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
@@ -111,11 +111,11 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-18 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-18 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
@@ -160,11 +160,11 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-42 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-42 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
@@ -200,7 +200,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle MuiBadge-colorError"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular MuiBadge-colorError"
       >
         <svg
           class="makeStyles-errorIcon-34 styles__icon___23x3R"
@@ -216,7 +216,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
       </span>
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-36 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-36 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
@@ -254,11 +254,11 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-30 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-30 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
@@ -296,11 +296,11 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-24 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-24 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
@@ -329,11 +329,11 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
         S
       </h2>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-48 MuiBadge-anchorOriginBottomRightRectangle"
+      class="MuiBadge-badge Component-qualifier-48 MuiBadge-anchorOriginBottomRightRectangular"
     >
       <svg
         class="styles__icon___23x3R"
@@ -384,11 +384,11 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangular"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-54 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-54 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6

package/react/SquareAppIcon/index.jsx

@@ -78,7 +78,7 @@ export const SquareAppIcon = ({
         badgeContent={
           variant === 'shortcut' ? <Icon size="10" icon={iconOut} /> : null
         }
-        overlap="rectangle"
+        overlap="rectangular"
         invisible={variant !== 'shortcut'}
       >
         <Badge
@@ -107,7 +107,7 @@ export const SquareAppIcon = ({
           color={variant === 'error' ? 'error' : undefined}
           withBorder={false}
           size="large"
-          overlap="rectangle"
+          overlap="rectangular"
           style={
             variant === 'shortcut'
               ? { backgroundColor: nameToColor(name) }

package/react/Viewer/Readme.md

@@ -4,7 +4,7 @@ Once rendered, the `Viewer` will take up all the available space in it's contain
 
 The `Viewer` can display an **information panel** to show additional information about the current file (e.g. whether a file is certified).
 
-:warning: Important :
+⚠️ Important :
 
 * To have the panels, the app need to have [cozy-harvest-lib](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-harvest-lib) installed
 
@@ -80,7 +80,7 @@ const files = [
     mime: 'text/plain',
     encrypted: true
   },
-  
+
   {
     _id: 'image',
     class: 'image',
@@ -208,6 +208,6 @@ The `Viewer` can be used only in a `React` Application. You can't use it with `P
 
 ### Special case: client-side encrypted files
 
-When a file is client-side encrypted, it is not possible to get the download link from the server anymore. 
+When a file is client-side encrypted, it is not possible to get the download link from the server anymore.
 Hence, an additional `currentURL` prop must be eventually given to the `<Viewer>`. This URL is the decrypted
 file, asynchronously provided by the app.

package/react/Viewer/index.jsx

@@ -2,7 +2,7 @@ import ViewerContainer from './ViewerContainer'
 
 export { default as Viewer } from './Viewer'
 export { default as ViewerContainer } from './ViewerContainer'
-export { toolbarPropsPropType } from './proptypes'
+export * as toolbarPropsPropType from './proptypes'
 export {
   default as ViewerWithCustomPanelAndFooter
 } from './ViewerWithCustomPanelAndFooter'

package/react/__snapshots__/examples.spec.jsx.snap

@@ -103,11 +103,11 @@ exports[`Badge should render examples: Badge 1`] = `
 "<div>
   <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
     <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">OVERLAP</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ERROR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBORDER</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LEFT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BOTTOM</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SMALL</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGE</span></label>
-  </div><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircle MuiBadge-colorPrimary\\">4</span></span>
+  </div><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span>
 </div>"
 `;
 
-exports[`Badge should render examples: Badge 2`] = `"<div><span class=\\"MuiBadge-root\\"><div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div><span class=\\"MuiBadge-badge Component-qualifier-5 MuiBadge-anchorOriginBottomRightCircle\\"><span class=\\"MuiBadge-root\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path></svg><span class=\\"MuiBadge-badge badgeSizeSmall badgeBorder MuiBadge-anchorOriginTopRightCircle MuiBadge-colorError MuiBadge-dot\\"></span></span></span></span></div>"`;
+exports[`Badge should render examples: Badge 2`] = `"<div><span class=\\"MuiBadge-root\\"><div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div><span class=\\"MuiBadge-badge Component-qualifier-5 MuiBadge-anchorOriginBottomRightCircular\\"><span class=\\"MuiBadge-root\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path></svg><span class=\\"MuiBadge-badge badgeSizeSmall badgeBorder MuiBadge-anchorOriginTopRightCircular MuiBadge-colorError MuiBadge-dot\\"></span></span></span></span></div>"`;
 
 exports[`Banner should render examples: Banner 1`] = `
 "<div>

package/transpiled/react/Badge/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classes", "size", "withBorder"];
+var _excluded = ["classes", "size", "withBorder", "overlap"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -17,17 +17,22 @@ var Badge = function Badge(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       size = _ref.size,
       withBorder = _ref.withBorder,
+      overlapProp = _ref.overlap,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var sizeClasses = {
     small: 'badgeSizeSmall',
     medium: 'badgeSizeMedium',
     large: 'badgeSizeLarge'
-  };
+  }; // due to deprecated prop circle and rectangle
+  // https://github.com/mui/material-ui/releases/tag/v4.12.4
+
+  var overlap = overlapProp === 'circle' ? 'circular' : overlapProp === 'rectangle' ? 'rectangular' : overlapProp;
   return /*#__PURE__*/React.createElement(MuiBadge, _extends({
     classes: _objectSpread({
       badge: cx(sizeClasses[size], withBorder ? 'badgeBorder' : null)
-    }, classes)
+    }, classes),
+    overlap: overlap
   }, props));
 };
 
@@ -49,6 +54,6 @@ Badge.defaultProps = {
   size: 'medium',
   showZero: true,
   withBorder: true,
-  overlap: 'circle'
+  overlap: 'circular'
 };
 export default Badge;

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet';
-import { flagshipMetadata } from 'cozy-device-helper';
+import { getFlagshipMetadata } from 'cozy-device-helper';
 import Stack from 'cozy-ui/transpiled/react/Stack';
 import Paper from 'cozy-ui/transpiled/react/Paper';
 
@@ -126,7 +126,7 @@ var BottomSheet = function BottomSheet(_ref2) {
     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 + (flagshipMetadata.navbarHeight || 0); // Used so that the bottomSheet can be opened to the top,
+    var minHeight = headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin + (getFlagshipMetadata().navbarHeight || 0); // Used so that the bottomSheet can be opened to the top,
     // without stopping at the content height
 
     var bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight;
@@ -157,7 +157,7 @@ var BottomSheet = function BottomSheet(_ref2) {
 
     return child;
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, flagshipMetadata.immersive && /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getFlagshipMetadata().immersive && /*#__PURE__*/React.createElement("span", {
     style: styles.flagshipImmersive
   }), /*#__PURE__*/React.createElement(MuiBottomSheet, {
     peekHeights: peekHeights,

package/transpiled/react/Dialog/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { default as MUIDialog } from '@material-ui/core/Dialog';
 import { useTheme } from '@material-ui/core';
-import { flagshipMetadata } from 'cozy-device-helper';
+import { getFlagshipMetadata } from 'cozy-device-helper';
 import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
 import { useCozyTheme } from "cozy-ui/transpiled/react/CozyTheme";
 var themesStyles = {
@@ -45,11 +45,11 @@ var Dialog = function Dialog(props) {
     topTheme: 'light'
   }, {
     bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'],
-    bottomTheme: flagshipMetadata.immersive ? 'light' : 'dark',
+    bottomTheme: getFlagshipMetadata().immersive ? 'light' : 'dark',
     bottomOverlay: 'transparent',
     topOverlay: 'transparent',
     topBackground: cozBar && getComputedStyle(cozBar).getPropertyValue('background-color'),
-    topTheme: flagshipMetadata.immersive || cozBar && cozBar.classList.contains('coz-theme-primary') ? 'light' : 'dark'
+    topTheme: getFlagshipMetadata().immersive || cozBar && cozBar.classList.contains('coz-theme-primary') ? 'light' : 'dark'
   }, 'cozy-ui/Dialog');
   return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(MUIDialog, _extends({
     className: themesStyles["CozyTheme--".concat(cozyTheme)]

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -637,16 +637,16 @@ var makeOverrides = function makeOverrides(theme) {
           fontSize: '.5rem'
         }
       },
-      anchorOriginTopRightRectangle: {
+      anchorOriginTopRightRectangular: {
         transform: 'scale(1) translate(37%, -37%)'
       },
-      anchorOriginBottomRightRectangle: {
+      anchorOriginBottomRightRectangular: {
         transform: 'scale(1) translate(37%, 37%)'
       },
-      anchorOriginBottomLeftRectangle: {
+      anchorOriginBottomLeftRectangular: {
         transform: 'scale(1) translate(-37%, 37%)'
       },
-      anchorOriginTopLeftRectangle: {
+      anchorOriginTopLeftRectangular: {
         transform: 'scale(1) translate(-37%, -37%)'
       },
       dot: {

package/transpiled/react/SquareAppIcon/index.js

@@ -92,7 +92,7 @@ export var SquareAppIcon = function SquareAppIcon(_ref) {
       size: "10",
       icon: iconOut
     }) : null,
-    overlap: "rectangle",
+    overlap: "rectangular",
     invisible: variant !== 'shortcut'
   }, /*#__PURE__*/React.createElement(Badge, {
     className: cx(styles['SquareAppIcon-wrapper'], styles["SquareAppIcon-wrapper-".concat(variant)], (_cx = {}, _defineProperty(_cx, "".concat(styles['SquareAppIcon-wrapper-fx']), ['ghost', 'add'].includes(variant)), _defineProperty(_cx, classes.shadow, !['add', 'ghost'].includes(variant)), _cx)),
@@ -104,7 +104,7 @@ export var SquareAppIcon = function SquareAppIcon(_ref) {
     color: variant === 'error' ? 'error' : undefined,
     withBorder: false,
     size: "large",
-    overlap: "rectangle",
+    overlap: "rectangular",
     style: variant === 'shortcut' ? {
       backgroundColor: nameToColor(name)
     } : null

package/transpiled/react/Viewer/index.js

@@ -1,6 +1,7 @@
 import ViewerContainer from "cozy-ui/transpiled/react/Viewer/ViewerContainer";
 export { default as Viewer } from './Viewer';
 export { default as ViewerContainer } from './ViewerContainer';
-export { toolbarPropsPropType } from './proptypes';
+import * as _toolbarPropsPropType from "cozy-ui/transpiled/react/Viewer/proptypes";
+export { _toolbarPropsPropType as toolbarPropsPropType };
 export { default as ViewerWithCustomPanelAndFooter } from './ViewerWithCustomPanelAndFooter';
 export default ViewerContainer;