cozy-ui 111.5.0 → 111.7.0

package/react/PieChart/index.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cx from 'classnames'
-import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js'
-import { Doughnut } from 'react-chartjs-2'
 import { useTheme } from '@material-ui/core'
-import set from 'lodash/set'
+import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js'
+import cx from 'classnames'
 import cloneDeep from 'lodash/cloneDeep'
+import set from 'lodash/set'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Doughnut } from 'react-chartjs-2'
 
-import { makeStyles } from '../styles'
 import Typography from '../Typography'
 import isTesting from '../helpers/isTesting'
+import { makeStyles } from '../styles'
 
 ChartJS.register(ArcElement, Tooltip)
 

package/react/PointerAlert/index.jsx

@@ -1,12 +1,11 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import { makeStyles } from '../styles'
-import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
 import { AlertPropTypes, AlertDefaultProps } from '../Alert'
-
 import Alert from '../Alert'
+import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   topArrow: {

package/react/Popup/index.jsx

@@ -1,5 +1,5 @@
-import { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import { PureComponent } from 'react'
 
 import { isMobileApp } from 'cozy-device-helper'
 

package/react/Popup/index.spec.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { shallow } from 'enzyme'
+import React from 'react'
 
 import { isMobileApp } from 'cozy-device-helper'
 

package/react/PopupOpener/index.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 // customized function to center a popup window
 // source https://stackoverflow.com/a/16861050

package/react/ProgressionBanner/index.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import { withStyles } from '../styles'
 import Banner from '../Banner'
 import { LinearProgress } from '../Progress'
 import Typography from '../Typography'
+import { withStyles } from '../styles'
 
 const progressHeight = '0.125rem'
 

package/react/QualificationGrid/index.jsx

@@ -1,22 +1,21 @@
-import React, { Fragment, useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { Fragment, useState } from 'react'
 
+import { getThemesList } from './helpers'
+import withLocales from './locales/withLocales'
 import Grid from '../Grid'
-import QualificationItem from '../QualificationItem'
-import { useI18n } from '../providers/I18n'
+import BankIcon from '../Icons/Bank'
+import BillIcon from '../Icons/Bill'
+import CarIcon from '../Icons/Car'
+import ChessIcon from '../Icons/Chess'
+import DotsIcon from '../Icons/Dots'
+import HeartIcon from '../Icons/Heart'
 import PeopleIcon from '../Icons/People'
 import TeamIcon from '../Icons/Team'
 import WorkIcon from '../Icons/Work'
-import ChessIcon from '../Icons/Chess'
-import HeartIcon from '../Icons/Heart'
 import HomeIcon from '../Icons/Home'
-import CarIcon from '../Icons/Car'
-import BankIcon from '../Icons/Bank'
-import BillIcon from '../Icons/Bill'
-import DotsIcon from '../Icons/Dots'
-
-import withLocales from './locales/withLocales'
-import { getThemesList } from './helpers'
+import QualificationItem from '../QualificationItem'
+import { useI18n } from '../providers/I18n'
 
 const IconByName = {
   people: PeopleIcon,

package/react/QualificationGrid/locales/withLocales.jsx

@@ -1,7 +1,6 @@
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
-
 import en from './en.json'
 import fr from './fr.json'
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/QualificationItem/index.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import ButtonBase from '../ButtonBase'
 import Icon, { iconPropType } from '../Icon'
-import FileDuotoneIcon from '../Icons/FileDuotone'
 import IconStack from '../IconStack'
+import FileDuotoneIcon from '../Icons/FileDuotone'
 import Typography from '../Typography'
 import { makeStyles } from '../styles'
 

package/react/Radios/index.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
 import MuiRadio from '@material-ui/core/Radio'
+import React from 'react'
 
 import Icon from '../Icon'
 import RadioCheckedIcon from '../Icons/RadioChecked'

package/react/SearchBar/index.jsx

@@ -1,17 +1,17 @@
-import React, { forwardRef, useState, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
 import debounce from 'lodash/debounce'
+import PropTypes from 'prop-types'
+import React, { forwardRef, useState, useMemo } from 'react'
 
-import { useI18n } from '../providers/I18n'
 import withOnlyLocales from './locales/withOnlyLocales'
-import { makeStyles } from '../styles'
-import Paper from '../Paper'
-import InputBase from '../InputBase'
-import IconButton from '../IconButton'
 import Icon from '../Icon'
-import MagnifierIcon from '../Icons/Magnifier'
+import IconButton from '../IconButton'
 import CrossCircleIcon from '../Icons/CrossCircle'
+import MagnifierIcon from '../Icons/Magnifier'
+import InputBase from '../InputBase'
+import Paper from '../Paper'
+import { useI18n } from '../providers/I18n'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   root: {

package/react/SearchBar/locales/withOnlyLocales.jsx

@@ -1,7 +1,6 @@
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
-
 import en from './en.json'
 import fr from './fr.json'
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/SelectBox/ControlDefault.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-
+import React from 'react'
 import { components } from 'react-select'
 
 const ControlDefault = ({

package/react/SelectBox/SelectBox.jsx

@@ -1,18 +1,17 @@
-import React, { Component } from 'react'
+import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import ReactSelect, { components } from 'react-select'
-import classNames from 'classnames'
 
 import { isIOSApp } from 'cozy-device-helper'
 
+import ControlDefault from './ControlDefault'
+import styles from './styles.styl'
 import Icon from '../Icon'
+import BottomIcon from '../Icons/Bottom'
 import CheckIcon from '../Icons/Check'
-import withBreakpoints from '../helpers/withBreakpoints'
 import TopIcon from '../Icons/Top'
-import BottomIcon from '../Icons/Bottom'
-
-import styles from './styles.styl'
-import ControlDefault from './ControlDefault'
+import withBreakpoints from '../helpers/withBreakpoints'
 
 const heights = {
   tiny: '2rem',
@@ -131,16 +130,15 @@ const DropdownIndicator = props => {
   )
 }
 
-const reactSelectControl = CustomControl => ({
-  innerProps,
-  innerRef,
-  children
-}) => (
-  <div {...innerProps} ref={innerRef}>
-    {CustomControl}
-    <div className={styles['select-control__input']}>{children}</div>
-  </div>
-)
+const reactSelectControl =
+  CustomControl =>
+  ({ innerProps, innerRef, children }) =>
+    (
+      <div {...innerProps} ref={innerRef}>
+        {CustomControl}
+        <div className={styles['select-control__input']}>{children}</div>
+      </div>
+    )
 
 const Option = ({
   children,

package/react/SelectBox/SelectBoxWithFixedOptions.jsx

@@ -1,6 +1,6 @@
-import { components } from 'react-select'
-import React from 'react'
 import groupBy from 'lodash/groupBy'
+import React from 'react'
+import { components } from 'react-select'
 
 import SelectBox from './SelectBox'
 import styles from './styles.styl'

package/react/SelectBox/index.jsx

@@ -8,8 +8,6 @@ export {
   reactSelectControl
 } from './SelectBox'
 
-export {
-  default as SelectBoxWithFixedOptions
-} from './SelectBoxWithFixedOptions'
+export { default as SelectBoxWithFixedOptions } from './SelectBoxWithFixedOptions'
 
 export { default as ControlDefault } from './ControlDefault'

package/react/SelectionBar/SelectionBarAction.jsx

@@ -1,15 +1,14 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Button from '../Button'
-import useBreakpoints from '../providers/Breakpoints'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
+import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
 
-import styles from './styles.styl'
-
 const SelectionBarAction = ({ selectedCount, selected, action }) => {
   const { isDesktop } = useBreakpoints()
   const { t } = useI18n()

package/react/SelectionBar/SelectionBarMore.jsx

@@ -1,14 +1,13 @@
-import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
 
+import styles from './styles.styl'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import DotsIcon from '../Icons/Dots'
 import { ActionMenuWithClose, ActionMenuItem } from '../deprecated/ActionMenu'
 import { useI18n } from '../providers/I18n'
 
-import styles from './styles.styl'
-
 const SelectionBarMore = ({ actions, selectedCount, selected }) => {
   const { t } = useI18n()
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)

package/react/SelectionBar/index.jsx

@@ -1,19 +1,18 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
 import { useTheme } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
 
 import { useWebviewIntent } from 'cozy-intent'
 
-import { useI18n } from '../providers/I18n'
+import SelectionBarAction from './SelectionBarAction'
+import SelectionBarMore from './SelectionBarMore'
+import styles from './styles.styl'
+import useMaxActions from './useMaxActions'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import CrossIcon from '../Icons/Cross'
 import useBreakpoints from '../providers/Breakpoints'
-
-import styles from './styles.styl'
-import SelectionBarAction from './SelectionBarAction'
-import SelectionBarMore from './SelectionBarMore'
-import useMaxActions from './useMaxActions'
+import { useI18n } from '../providers/I18n'
 
 /*
 

package/react/SelectionBar/useMaxActions.jsx

@@ -1,9 +1,9 @@
-import { useState } from 'react'
 import throttle from 'lodash/throttle'
+import { useState } from 'react'
 
+import { computeMaxAction } from './helpers'
 import breakpointDefs, { getBreakpointsStatus } from '../helpers/breakpoints'
 import useEventListener from '../hooks/useEventListener'
-import { computeMaxAction } from './helpers'
 
 const huge = 1400
 const large = 1200

package/react/ShortcutTile/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import { IOCozyFile } from 'cozy-client/types/types'
+// @ts-expect-error - The following component is not typed
+import { nameToColor } from 'cozy-ui/react/Avatar/helpers'
+// @ts-expect-error - The following component is not typed
+import Typography from 'cozy-ui/react/Typography'
+
+import styles from '../AppTile/styles.styl'
+import { TileIcon } from '../Tile'
+import { makeStyles } from '../styles'
+
+interface ShortcutTileProps {
+  file: Partial<IOCozyFile> & {
+    name: string
+    attributes?: { metadata?: { icon?: string; iconMimeType?: string } }
+  }
+}
+
+const useStyles = makeStyles({
+  letter: {
+    color: 'white',
+    margin: 'auto'
+  },
+  letterWrapper: {
+    backgroundColor: ({ name }: { name: string }) =>
+      (nameToColor as (name: string) => string)(name)
+  }
+})
+
+export const ShortcutTile = ({ file }: ShortcutTileProps): JSX.Element => {
+  const classes = useStyles({ name: file.name })
+  const icon = file.attributes?.metadata?.icon
+  const iconMimeType = file.attributes?.metadata?.iconMimeType
+
+  if (icon) {
+    return (
+      <TileIcon>
+        <img
+          className={styles['AppTile-icon']}
+          src={
+            iconMimeType
+              ? `data:${iconMimeType};base64,${icon}`
+              : `data:image/svg+xml;base64,${window.btoa(icon)}`
+          }
+          width={48}
+          height={48}
+          alt={file.name}
+        />
+      </TileIcon>
+    )
+  }
+
+  return (
+    <TileIcon>
+      <div className={classes.letterWrapper}>
+        <Typography className={classes.letter} variant="h2" align="center">
+          {file.name[0].toUpperCase()}
+        </Typography>
+      </div>
+    </TileIcon>
+  )
+}

package/react/Sidebar/index.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import { useTheme } from '@material-ui/core'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import { useCozyTheme } from '../providers/CozyTheme'
-import { useTheme } from '@material-ui/core'
 
 const Sidebar = ({ children, className, ...restProps }) => {
   const theme = useTheme()

package/react/Skeletons/ListItemSkeleton.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import Divider from '../Divider'
 import ListItem from '../ListItem'
 import ListItemIcon from '../ListItemIcon'
 import ListItemText from '../ListItemText'
 import Skeleton from '../Skeleton'
-import Divider from '../Divider'
 
 const ListItemSkeleton = ({ hasSecondary, divider }) => {
   return (

package/react/Skeletons/ListSkeleton.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
+import ListItemSkeleton from './ListItemSkeleton'
 import List from '../List'
 import ListSubheader from '../ListSubheader'
 
-import ListItemSkeleton from './ListItemSkeleton'
-
 const ListSkeleton = ({ count, hasSecondary, withSubheader, divider }) => {
   return (
     <List

package/react/Snackbar/index.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
 import MuiSnackbar from '@material-ui/core/Snackbar'
+import React, { forwardRef } from 'react'
 
 const Snackbar = forwardRef(({ children, ...props }, ref) => {
   return (

package/react/Spinner/index.jsx

@@ -1,13 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../Icon'
+import SpinnerIcon from '../Icons/Spinner'
 import Typography from '../Typography'
 import { translate } from '../providers/I18n'
-import SpinnerIcon from '../Icons/Spinner'
-
-import styles from './styles.styl'
 
 export const Spinner = ({
   t,

package/react/SquareAppIcon/SquareAppIcon.spec.js

@@ -1,14 +1,14 @@
 /* eslint-env jest */
 
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import CozyClient from 'cozy-client'
 
+import SquareAppIcon from '.'
 import Icon from '../Icon'
 import CozyIcon from '../Icons/Cozy'
 import DemoProvider from '../providers/DemoProvider'
-import SquareAppIcon from '.'
 
 const appMock = {
   slug: 'test',

package/react/SquareAppIcon/index.jsx

@@ -1,25 +1,25 @@
-import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import PropTypes from 'prop-types'
 import get from 'lodash/get'
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
+import styles from './styles.styl'
 import AppIcon from '../AppIcon'
+import { nameToColor } from '../Avatar/helpers'
 import Badge from '../Badge'
 import Icon from '../Icon'
 import IconCheckAnimated from '../Icons/IconCheckAnimated'
-import InfosBadge from '../InfosBadge'
-import Spinner from '../Spinner'
 import SvgIconCrossAnimated from '../Icons/IconCrossAnimated'
-import Typography from '../Typography'
 import iconOut from '../Icons/LinkOut'
 import iconPlus from '../Icons/Plus'
 import iconWarning from '../Icons/WarningCircle'
-import { alpha, makeStyles } from '../styles'
-import { nameToColor } from '../Avatar/helpers'
+import InfosBadge from '../InfosBadge'
+import Spinner from '../Spinner'
+import Typography from '../Typography'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-
-import styles from './styles.styl'
+import { alpha, makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
   name: {

package/react/Stack/index.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 
 const Stack = ({ spacing, tag: Tag, ...props }) => {

package/react/Stepper/testing.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import { Stepper, Step, StepLabel, StepButton } from '../Stepper'
 

package/react/Tabs/index.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import MuiTabs from '@material-ui/core/Tabs'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import useBreakpoints from '../providers/Breakpoints'
 

package/react/TextField/MobileSelect.jsx

@@ -1,16 +1,16 @@
-import React, { forwardRef, useEffect, useState } from 'react'
-import merge from 'lodash/merge'
 import MuiTextField from '@material-ui/core/TextField'
+import merge from 'lodash/merge'
 import PropTypes from 'prop-types'
+import React, { forwardRef, useEffect, useState } from 'react'
 
+import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
+import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import InputAdornment from '../InputAdornment'
-import ListItemText from '../ListItemText'
 import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
 import Radio from '../Radios'
-import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
-import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
 
 const MobileSelect = forwardRef(
   (
@@ -31,11 +31,13 @@ const MobileSelect = forwardRef(
       onClick?.()
     }
 
-    const handleItemClick = ({ value, children, onClick }) => ev => {
-      onClick?.(merge({}, ev, { target: { value } }))
-      setState({ label: children, value })
-      onChange?.({ target: { value } })
-    }
+    const handleItemClick =
+      ({ value, children, onClick }) =>
+      ev => {
+        onClick?.(merge({}, ev, { target: { value } }))
+        setState({ label: children, value })
+        onChange?.({ target: { value } })
+      }
 
     const handleClose = () => {
       setShowDrawer(false)

package/react/TextField/index.jsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react'
 import MuiTextField from '@material-ui/core/TextField'
+import React, { forwardRef } from 'react'
 
+import MobileSelect from './MobileSelect'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import { getRandomUUID } from '../helpers/getRandomUUID'
 import { useBreakpoints } from '../providers/Breakpoints'
-import MobileSelect from './MobileSelect'
 
 const TextField = forwardRef(({ select, options, children, ...props }, ref) => {
   // A11Y, https://v4.mui.com/api/text-field/#props

package/react/Textarea/index.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 
 const Textarea = React.forwardRef((props, ref) => {

package/react/Thumbnail/index.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import styles from './Thumbnail.styl'
 

package/react/Tile/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
-import Typography from '../Typography'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
+import Typography from '../Typography'
 
 const Tile = ({ children, className, tag: Tag, isSecondary, ...props }) => {
   return (