cozy-ui 121.1.2 → 121.3.0

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -151,9 +151,16 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
     MuiButton: {
       root: {
         borderRadius: 2,
-        height: '2.5rem',
         lineHeight: 'normal',
         padding: '0 1rem',
+        '&.customSize': {
+          '&-default': {
+            height: '2.5rem'
+          },
+          '&-auto': {
+            minHeight: '2.5rem'
+          }
+        },
         '&.ghost': {
           borderStyle: 'dashed !important',
           // important needed to override disable state
@@ -164,15 +171,29 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
         }
       },
       sizeSmall: {
-        height: '2rem',
         padding: '0 0.75rem',
+        '&.customSize': {
+          '&-default': {
+            height: '2rem'
+          },
+          '&-auto': {
+            minHeight: '2rem'
+          }
+        },
         '&$text': {
           padding: '8px 6px'
         }
       },
       sizeLarge: {
-        height: '3rem',
         padding: '0 1.25rem',
+        '&.customSize': {
+          '&-default': {
+            height: '3rem'
+          },
+          '&-auto': {
+            minHeight: '3rem'
+          }
+        },
         '&$text': {
           padding: '14px 10px'
         }

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkInvertedOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
@@ -1621,6 +1642,14 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
             };
         };
     };
+    MuiLinearProgress: {
+        root: {
+            height: number;
+        };
+        colorPrimary: {
+            backgroundColor: any;
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;
@@ -1633,8 +1662,15 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkNormalOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
@@ -1621,6 +1642,14 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
             };
         };
     };
+    MuiLinearProgress: {
+        root: {
+            height: number;
+        };
+        colorPrimary: {
+            backgroundColor: any;
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;
@@ -1633,8 +1662,15 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
@@ -1621,6 +1642,14 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
             };
         };
     };
+    MuiLinearProgress: {
+        root: {
+            height: number;
+        };
+        colorPrimary: {
+            backgroundColor: any;
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;
@@ -1633,8 +1662,15 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeLightNormalTwakeOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeLightNormalTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
@@ -1621,6 +1642,14 @@ export function makeLightNormalTwakeOverrides(theme: any): {
             };
         };
     };
+    MuiLinearProgress: {
+        root: {
+            height: number;
+        };
+        colorPrimary: {
+            backgroundColor: any;
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;
@@ -1633,8 +1662,15 @@ export function makeLightNormalTwakeOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -63,6 +63,14 @@ export var makeLightNormalTwakeOverrides = function makeLightNormalTwakeOverride
           }
         }
       },
+      MuiLinearProgress: {
+        root: {
+          height: 3
+        },
+        colorPrimary: {
+          backgroundColor: theme.palette.divider
+        }
+      },
       MuiButton: {
         root: {
           borderRadius: 100,
@@ -75,8 +83,15 @@ export var makeLightNormalTwakeOverrides = function makeLightNormalTwakeOverride
           }
         },
         sizeSmall: {
-          height: '2.25rem',
           padding: '10px 16px',
+          '&.customSize': {
+            '&-default': {
+              height: '2.25rem'
+            },
+            '&-auto': {
+              minHeight: '2.25rem'
+            }
+          },
           '&$text': {
             padding: '8px 16px'
           }

package/transpiled/react/Sidebar/index.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"];
 import { useTheme } from '@material-ui/core';
@@ -6,8 +7,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 var styles = {
-  "o-sidebar": "styles__o-sidebar___1295j"
+  "o-sidebar": "styles__o-sidebar___1295j",
+  "o-sidebar--border": "styles__o-sidebar--border___32tfw",
+  "o-sidebar--large": "styles__o-sidebar--large___1mT8H"
 };
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
 import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 
@@ -29,7 +33,7 @@ var Sidebar = function Sidebar(_ref) {
   }, 'cozy-ui/Sidebar');
   return /*#__PURE__*/React.createElement("aside", _extends({
     id: "sidebar",
-    className: cx(styles['o-sidebar'], className)
+    className: cx(styles['o-sidebar'], _defineProperty({}, styles['o-sidebar--border'], !isTwakeTheme()), _defineProperty({}, styles['o-sidebar--large'], isTwakeTheme()), className)
   }, restProps), children);
 };
 

package/transpiled/react/UploadQueue/FileUploadProgress.js

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import LinearProgress from '@material-ui/core/LinearProgress';
+import React, { useState } from 'react';
+import { useIntervalWhen } from 'rooks';
+import RemainingTime from "cozy-ui/transpiled/react/UploadQueue/RemainingTime";
+var styles = {
+  "upload-queue": "styles__upload-queue___1VtNK",
+  "upload-queue__threshold-bar": "styles__upload-queue__threshold-bar___tTYal",
+  "upload-queue__progress-caption": "styles__upload-queue__progress-caption___1-vXY",
+  "upload-queue__upload-progress": "styles__upload-queue__upload-progress___1q-uS",
+  "upload-queue--popover": "styles__upload-queue--popover___2z1a4",
+  "upload-queue--visible": "styles__upload-queue--visible___DjVRs",
+  "upload-queue-header": "styles__upload-queue-header___c9Vf2",
+  "upload-queue-header-inner": "styles__upload-queue-header-inner___26wpB",
+  "upload-queue-progress": "styles__upload-queue-progress___1CmN-",
+  "upload-queue-content": "styles__upload-queue-content___3MPHo",
+  "upload-queue--collapsed": "styles__upload-queue--collapsed___3cchD",
+  "upload-queue-list": "styles__upload-queue-list___OVvJm",
+  "upload-queue-item--error": "styles__upload-queue-item--error___2sSeV",
+  "upload-queue-item--done": "styles__upload-queue-item--done___2PSJI",
+  "item-file": "styles__item-file___1kfDn",
+  "item-status": "styles__item-status___3FNcY",
+  "spin": "styles__spin___3GZIp",
+  "shake": "styles__shake___u1Pks"
+};
+import { withStyles } from "cozy-ui/transpiled/react/styles";
+var FileLinearProgress = withStyles(function (theme) {
+  return {
+    root: {
+      borderRadius: theme.shape.borderRadius
+    },
+    colorPrimary: {
+      backgroundColor: theme.palette.background.default
+    },
+    barColorPrimary: {
+      backgroundColor: 'var(--emerald)'
+    }
+  };
+})(LinearProgress);
+
+var FileUploadProgress = function FileUploadProgress(_ref) {
+  var progressProps = _ref.progress;
+
+  var _useState = useState(progressProps),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  useIntervalWhen(function () {
+    setProgress(progressProps);
+  }, 1000, true, true);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['upload-queue__upload-progress']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex-grow-1 u-pr-1"
+  }, /*#__PURE__*/React.createElement(FileLinearProgress, {
+    variant: "determinate",
+    value: progress.loaded / progress.total * 100
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "u-flex-shrink"
+  }, progress.remainingTime ? /*#__PURE__*/React.createElement(RemainingTime, {
+    durationInSec: progress.remainingTime
+  }) : null));
+};
+
+export default FileUploadProgress;

package/transpiled/react/UploadQueue/Item.js

@@ -0,0 +1,106 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import cx from 'classnames';
+import React from 'react';
+import { splitFilename } from 'cozy-client/dist/models/file';
+import FileUploadProgress from "cozy-ui/transpiled/react/UploadQueue/FileUploadProgress";
+import Pending from "cozy-ui/transpiled/react/UploadQueue/Pending";
+import { uploadStatus } from "cozy-ui/transpiled/react/UploadQueue/index";
+var styles = {
+  "upload-queue": "styles__upload-queue___1VtNK",
+  "upload-queue__threshold-bar": "styles__upload-queue__threshold-bar___tTYal",
+  "upload-queue__progress-caption": "styles__upload-queue__progress-caption___1-vXY",
+  "upload-queue__upload-progress": "styles__upload-queue__upload-progress___1q-uS",
+  "upload-queue--popover": "styles__upload-queue--popover___2z1a4",
+  "upload-queue--visible": "styles__upload-queue--visible___DjVRs",
+  "upload-queue-header": "styles__upload-queue-header___c9Vf2",
+  "upload-queue-header-inner": "styles__upload-queue-header-inner___26wpB",
+  "upload-queue-progress": "styles__upload-queue-progress___1CmN-",
+  "upload-queue-content": "styles__upload-queue-content___3MPHo",
+  "upload-queue--collapsed": "styles__upload-queue--collapsed___3cchD",
+  "upload-queue-list": "styles__upload-queue-list___OVvJm",
+  "upload-queue-item--error": "styles__upload-queue-item--error___2sSeV",
+  "upload-queue-item--done": "styles__upload-queue-item--done___2PSJI",
+  "item-file": "styles__item-file___1kfDn",
+  "item-status": "styles__item-status___3FNcY",
+  "spin": "styles__spin___3GZIp",
+  "shake": "styles__shake___u1Pks"
+};
+import { useStatusIcon } from "cozy-ui/transpiled/react/UploadQueue/useStatusIcon";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import ListItem from "cozy-ui/transpiled/react/ListItem";
+import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
+import ListItemText from "cozy-ui/transpiled/react/ListItemText";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { Img } from "cozy-ui/transpiled/react/deprecated/Media";
+import { translate } from "cozy-ui/transpiled/react/providers/I18n";
+
+var Item = function Item(_ref) {
+  var _cx;
+
+  var file = _ref.file,
+      status = _ref.status,
+      isDirectory = _ref.isDirectory,
+      progress = _ref.progress,
+      getMimeTypeIcon = _ref.getMimeTypeIcon;
+  var CANCEL = uploadStatus.CANCEL,
+      LOADING = uploadStatus.LOADING,
+      DONE_STATUSES = uploadStatus.DONE_STATUSES,
+      ERROR_STATUSES = uploadStatus.ERROR_STATUSES,
+      PENDING = uploadStatus.PENDING;
+
+  var _splitFilename = splitFilename(file),
+      filename = _splitFilename.filename,
+      extension = _splitFilename.extension;
+
+  var done = false;
+  var error = false;
+  /**
+   * Status came from the Upload Queue, but sometimes we're using
+   * manual upload without using the Upload Queue system but we're still
+   * using the UI component. When this is the case, the file handles on
+   * his own its status.
+   */
+
+  var statusToUse = file.status ? file.status : status;
+
+  if (statusToUse !== LOADING && statusToUse !== CANCEL) {
+    if (ERROR_STATUSES.includes(statusToUse)) {
+      error = true;
+    } else if (DONE_STATUSES.includes(statusToUse)) {
+      done = true;
+    }
+  }
+
+  var statusIcon = useStatusIcon(statusToUse, progress);
+  var isPending = statusToUse !== LOADING && statusToUse !== CANCEL && !ERROR_STATUSES.includes(statusToUse) && !DONE_STATUSES.includes(statusToUse) && statusToUse === PENDING;
+  return /*#__PURE__*/React.createElement(ListItem, {
+    divider: true,
+    "data-testid": "upload-queue-item",
+    className: cx((_cx = {}, _defineProperty(_cx, styles['upload-queue-item--done'], done), _defineProperty(_cx, styles['upload-queue-item--error'], error), _cx))
+  }, getMimeTypeIcon ? /*#__PURE__*/React.createElement(ListItemIcon, {
+    className: "u-ta-center"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: getMimeTypeIcon(isDirectory, file.name, file.type),
+    size: 32,
+    className: "u-mr-1"
+  })) : null, /*#__PURE__*/React.createElement(ListItemText, {
+    disableTypography: true,
+    primary: /*#__PURE__*/React.createElement("div", {
+      "data-testid": "upload-queue-item-name",
+      className: "u-ellipsis"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1",
+      className: "u-ellipsis"
+    }, filename, extension && /*#__PURE__*/React.createElement(Typography, {
+      component: "span",
+      variant: "body1",
+      color: "textSecondary",
+      className: "u-dib"
+    }, extension))),
+    secondary: progress ? /*#__PURE__*/React.createElement(FileUploadProgress, {
+      progress: progress
+    }) : null
+  }), statusIcon && /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Img, null, statusIcon)), isPending && /*#__PURE__*/React.createElement(Pending, null));
+};
+
+export default translate()(Item);

package/transpiled/react/UploadQueue/Pending.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { translate } from "cozy-ui/transpiled/react/providers/I18n";
+var Pending = translate()(function (props) {
+  return /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle1",
+    color: "primary"
+  }, props.t('item.pending'));
+});
+export default Pending;

package/transpiled/react/UploadQueue/RemainingTime.js

@@ -0,0 +1,43 @@
+import cx from 'classnames';
+import React from 'react';
+import { numberOfReferencesForPluralForm } from "cozy-ui/transpiled/react/UploadQueue/helpers";
+import { formatRemainingTime } from "cozy-ui/transpiled/react/UploadQueue/index";
+var styles = {
+  "upload-queue": "styles__upload-queue___1VtNK",
+  "upload-queue__threshold-bar": "styles__upload-queue__threshold-bar___tTYal",
+  "upload-queue__progress-caption": "styles__upload-queue__progress-caption___1-vXY",
+  "upload-queue__upload-progress": "styles__upload-queue__upload-progress___1q-uS",
+  "upload-queue--popover": "styles__upload-queue--popover___2z1a4",
+  "upload-queue--visible": "styles__upload-queue--visible___DjVRs",
+  "upload-queue-header": "styles__upload-queue-header___c9Vf2",
+  "upload-queue-header-inner": "styles__upload-queue-header-inner___26wpB",
+  "upload-queue-progress": "styles__upload-queue-progress___1CmN-",
+  "upload-queue-content": "styles__upload-queue-content___3MPHo",
+  "upload-queue--collapsed": "styles__upload-queue--collapsed___3cchD",
+  "upload-queue-list": "styles__upload-queue-list___OVvJm",
+  "upload-queue-item--error": "styles__upload-queue-item--error___2sSeV",
+  "upload-queue-item--done": "styles__upload-queue-item--done___2PSJI",
+  "item-file": "styles__item-file___1kfDn",
+  "item-status": "styles__item-status___3FNcY",
+  "spin": "styles__spin___3GZIp",
+  "shake": "styles__shake___u1Pks"
+};
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var RemainingTime = function RemainingTime(_ref) {
+  var durationInSec = _ref.durationInSec;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    className: cx(styles['upload-queue__progress-caption'], 'u-ellipsis')
+  }, t('item.remainingTime', {
+    time: formatRemainingTime(durationInSec),
+    smart_count: numberOfReferencesForPluralForm(durationInSec)
+  }));
+};
+
+export default RemainingTime;

package/transpiled/react/UploadQueue/helpers.js

@@ -0,0 +1,4 @@
+// https://date-fns.org/v2.28.0/docs/formatDistanceToNow
+export var numberOfReferencesForPluralForm = function numberOfReferencesForPluralForm(durationInSec) {
+  return durationInSec < 90 || durationInSec > 2670 && durationInSec < 5370 ? 1 : 2;
+};