cozy-ui 70.2.2 → 70.3.0

package/react/examples.spec.jsx

@@ -24,6 +24,7 @@ const testComponent = (ComponentName, options) => {
 }
 
 // Please keep the list sorted
+testComponent('Alert')
 testComponent('AppTitle')
 testComponent('Avatar')
 testComponent('Badge')

package/react/index.js

@@ -108,3 +108,5 @@ export { default as Chips } from './Chips'
 export { default as PieChart } from './PieChart'
 export { default as DropdownText } from './DropdownText'
 export { default as CircleButton } from './CircleButton'
+export { default as Alert } from './Alert'
+export { default as AlertTitle } from './AlertTitle'

package/transpiled/react/Alert/index.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "icon", "severity", "block", "color", "square", "action", "variant", "children"];
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import MuiAlert from '@material-ui/lab/Alert';
+import { makeStyles } from '@material-ui/core/styles';
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CheckCircleIcon from "cozy-ui/transpiled/react/Icons/CheckCircle";
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
+import WarningCircleIcon from "cozy-ui/transpiled/react/Icons/WarningCircle";
+import InfoIcon from "cozy-ui/transpiled/react/Icons/Info";
+var DEFAULT_ICON_SIZE = 16;
+var defaultIconMapping = {
+  success: /*#__PURE__*/React.createElement(Icon, {
+    icon: CheckCircleIcon
+  }),
+  warning: /*#__PURE__*/React.createElement(Icon, {
+    icon: WarningIcon
+  }),
+  error: /*#__PURE__*/React.createElement(Icon, {
+    icon: WarningCircleIcon
+  }),
+  info: /*#__PURE__*/React.createElement(Icon, {
+    icon: InfoIcon
+  })
+};
+
+var makeIcon = function makeIcon(icon, severity) {
+  // used to remove icon
+  if (icon === false) {
+    return false;
+  }
+
+  return icon || ['primary', 'secondary'].includes(severity) && /*#__PURE__*/React.createElement(Icon, {
+    icon: InfoIcon
+  }) || undefined;
+};
+
+var useStyles = makeStyles({
+  message: {
+    maxWidth: function maxWidth(_ref) {
+      var block = _ref.block,
+          iconSize = _ref.iconSize;
+      return block && "calc(100% - ".concat(iconSize + 16, "px)");
+    }
+  }
+});
+var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _icon$props;
+
+  var className = _ref2.className,
+      icon = _ref2.icon,
+      severity = _ref2.severity,
+      block = _ref2.block,
+      color = _ref2.color,
+      square = _ref2.square,
+      action = _ref2.action,
+      variant = _ref2.variant,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var madeSeverity = ['primary', 'secondary'].includes(severity) ? 'success' : severity;
+  var madeIcon = makeIcon(icon, severity);
+  var iconSize = (icon === null || icon === void 0 ? void 0 : (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.size) || DEFAULT_ICON_SIZE;
+  var styles = useStyles({
+    iconSize: iconSize,
+    block: block
+  });
+  return /*#__PURE__*/React.createElement(MuiAlert, _extends({
+    ref: ref,
+    style: {
+      backgroundColor: color,
+      borderRadius: square && 0
+    },
+    className: cx(className, "cozyAlert-".concat(severity, "-").concat(variant), {
+      block: block
+    }, {
+      action: Boolean(action)
+    }),
+    classes: styles,
+    variant: variant,
+    severity: madeSeverity,
+    iconMapping: defaultIconMapping,
+    icon: madeIcon,
+    action: action
+  }, props), children);
+});
+Alert.displayName = 'Alert';
+Alert.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+  severity: PropTypes.oneOf(['primary', 'secondary', 'success', 'error', 'warning', 'info']),
+  block: PropTypes.bool,
+  color: PropTypes.string,
+  square: PropTypes.bool,
+  variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
+};
+Alert.defaultProps = {
+  severity: 'primary',
+  block: false,
+  square: false,
+  variant: 'standard'
+};
+export default Alert;

package/transpiled/react/AlertTitle/index.js

@@ -0,0 +1,2 @@
+import MuiAlertTitle from '@material-ui/lab/AlertTitle';
+export default MuiAlertTitle;

package/transpiled/react/BottomSheet/BackdropOrFragment.js

@@ -3,13 +3,15 @@ import Backdrop from "cozy-ui/transpiled/react/Backdrop";
 
 var BackdropOrFragment = function BackdropOrFragment(_ref) {
   var showBackdrop = _ref.showBackdrop,
+      onClick = _ref.onClick,
       children = _ref.children;
   var Comp = showBackdrop ? Backdrop : Fragment;
   var props = showBackdrop ? {
     style: {
       zIndex: 'var(--zIndex-overlay)'
     },
-    open: showBackdrop
+    open: showBackdrop,
+    onClick: onClick
   } : undefined;
   return /*#__PURE__*/React.createElement(Comp, props, children);
 };

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -14,10 +14,9 @@ import Fade from '@material-ui/core/Fade';
 import { getFlagshipMetadata } from 'cozy-device-helper';
 import Stack from "cozy-ui/transpiled/react/Stack";
 import Paper from "cozy-ui/transpiled/react/Paper";
-import ClickAwayListener from "cozy-ui/transpiled/react/ClickAwayListener";
 import BackdropOrFragment from "cozy-ui/transpiled/react/BottomSheet/BackdropOrFragment";
-import { computeMaxHeight, computeMediumHeight, computeMinHeight, makeOverridenChildren, setTopPosition, setBottomPosition } from "cozy-ui/transpiled/react/BottomSheet/helpers";
-var ANIMATION_DURATION = 250;
+import { computeMaxHeight, computeMediumHeight, computeMinHeight, makeOverridenChildren, setTopPosition, setBottomPosition, minimizeAndClose } from "cozy-ui/transpiled/react/BottomSheet/helpers";
+import { ANIMATION_DURATION } from "cozy-ui/transpiled/react/BottomSheet/constants";
 
 var createStyles = function createStyles(_ref) {
   var squared = _ref.squared,
@@ -50,7 +49,8 @@ var createStyles = function createStyles(_ref) {
       position: 'fixed',
       bottom: 0,
       left: 0,
-      backgroundColor: 'var(--paperBackgroundColor)'
+      backgroundColor: 'var(--paperBackgroundColor)',
+      zIndex: 'var(--zIndex-overlay)'
     },
     flagshipImmersive: {
       backgroundColor: 'var(--paperBackgroundColor)',
@@ -148,13 +148,6 @@ var BottomSheet = function BottomSheet(_ref2) {
     onClose && onClose();
   }, [onClose]);
 
-  var handleMinimizeAndClose = function handleMinimizeAndClose() {
-    if (backdrop) {
-      setCurrentIndex(0);
-      setTimeout(handleClose, ANIMATION_DURATION);
-    }
-  };
-
   var handleOnIndexChange = function handleOnIndexChange(snapIndex) {
     var maxHeightSnapIndex = peekHeights.length - 1;
     setCurrentIndex(snapIndex);
@@ -217,8 +210,17 @@ var BottomSheet = function BottomSheet(_ref2) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, getFlagshipMetadata().immersive && /*#__PURE__*/React.createElement("span", {
     style: styles.flagshipImmersive
   }), /*#__PURE__*/React.createElement(BackdropOrFragment, {
-    showBackdrop: showBackdrop
-  }, /*#__PURE__*/React.createElement(MuiBottomSheet, {
+    showBackdrop: showBackdrop,
+    onClick: function onClick() {
+      return minimizeAndClose({
+        backdrop: backdrop,
+        setCurrentIndex: setCurrentIndex,
+        setIsTopPosition: setIsTopPosition,
+        setIsBottomPosition: setIsBottomPosition,
+        handleClose: handleClose
+      });
+    }
+  }), /*#__PURE__*/React.createElement(MuiBottomSheet, {
     peekHeights: peekHeights,
     defaultHeight: initPos,
     backdrop: false,
@@ -238,9 +240,7 @@ var BottomSheet = function BottomSheet(_ref2) {
     disabledClosing: !onClose,
     hidden: isHidden,
     snapPointSeekerMode: "next"
-  }, /*#__PURE__*/React.createElement(ClickAwayListener, {
-    onClickAway: handleMinimizeAndClose
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: innerContentRef
   }, /*#__PURE__*/React.createElement(Paper, {
     "data-testid": "bottomSheet-header",
@@ -258,12 +258,12 @@ var BottomSheet = function BottomSheet(_ref2) {
     style: {
       height: backdrop ? 0 : bottomSpacerHeight
     }
-  })))), !isBottomPosition && /*#__PURE__*/React.createElement(Fade, {
+  })), !isBottomPosition && /*#__PURE__*/React.createElement(Fade, {
     in: true,
     timeout: ANIMATION_DURATION
   }, /*#__PURE__*/React.createElement("div", {
     style: styles.bounceSafer
-  }))));
+  })));
 };
 
 BottomSheet.defaultProps = {

package/transpiled/react/BottomSheet/constants.js

@@ -0,0 +1 @@
+export var ANIMATION_DURATION = 250;

package/transpiled/react/BottomSheet/helpers.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { getFlagshipMetadata } from 'cozy-device-helper';
+import { ANIMATION_DURATION } from "cozy-ui/transpiled/react/BottomSheet/constants";
 export var computeMaxHeight = function computeMaxHeight(toolbarProps) {
   var ref = toolbarProps.ref,
       height = toolbarProps.height;
@@ -82,4 +83,18 @@ export var setBottomPosition = function setBottomPosition(_ref4) {
   if (snapIndex !== 0 && isBottomPosition) {
     setIsBottomPosition(false);
   }
+};
+export var minimizeAndClose = function minimizeAndClose(_ref5) {
+  var backdrop = _ref5.backdrop,
+      setCurrentIndex = _ref5.setCurrentIndex,
+      setIsTopPosition = _ref5.setIsTopPosition,
+      setIsBottomPosition = _ref5.setIsBottomPosition,
+      handleClose = _ref5.handleClose;
+
+  if (backdrop) {
+    setCurrentIndex(0);
+    setIsTopPosition(false);
+    setIsBottomPosition(true);
+    setTimeout(handleClose, ANIMATION_DURATION);
+  }
 };

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -4,13 +4,71 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { alpha } from '@material-ui/core/styles';
+import { alpha, lighten, darken } from '@material-ui/core/styles';
 var SWITCH_BAR_WIDTH = 25;
 export var makeThemeOverrides = function makeThemeOverrides(theme) {
   var createOverrides = theme.palette.type === 'dark' ? makeInvertedOverrides : makeOverrides;
   return createOverrides(theme);
 };
 
+var makeAlertColor = function makeAlertColor(theme, color) {
+  var themeColorByColor = {
+    primary: theme.palette[color].main,
+    secondary: theme.palette.text.primary
+  }; // same approach as Mui, see https://github.com/mui/material-ui/blob/v4.x/packages/material-ui-lab/src/Alert/Alert.js#L28
+
+  return {
+    '&-standard': {
+      color: darken(themeColorByColor[color], 0.6),
+      backgroundColor: lighten(themeColorByColor[color], 0.9),
+      '& $icon': {
+        color: themeColorByColor[color]
+      },
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette.text.secondary
+        }
+      }
+    },
+    '&-outlined': {
+      color: darken(themeColorByColor[color], 0.6),
+      border: "1px solid ".concat(themeColorByColor[color]),
+      '& $icon': {
+        color: themeColorByColor[color]
+      }
+    },
+    '&-filled': {
+      backgroundColor: color === 'secondary' ? theme.palette.grey[600] : themeColorByColor[color]
+    }
+  };
+};
+
+var makeAlertInvertedColor = function makeAlertInvertedColor(theme, color) {
+  return {
+    '&-standard': {
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.background.default,
+      '& $icon': {
+        color: theme.palette[color].main
+      }
+    },
+    '&-outlined': {
+      color: theme.palette.primary.main,
+      border: "1px solid ".concat(theme.palette.primary.main),
+      '& $icon': {
+        color: theme.palette[color].main
+      }
+    },
+    '&-filled': {
+      color: theme.palette[color].contrastText,
+      backgroundColor: color === 'secondary' ? theme.palette.grey[200] : theme.palette[color].main,
+      '& $icon': {
+        color: theme.palette[color].contrastText
+      }
+    }
+  };
+};
+
 var makeChipStyleByColor = function makeChipStyleByColor(theme, color) {
   return {
     color: theme.palette.text[color] || theme.palette[color].main,
@@ -755,6 +813,47 @@ var makeOverrides = function makeOverrides(theme) {
           '&-info': makeChipStyleByColor(theme, 'info')
         }
       }
+    },
+    MuiAlert: {
+      root: {
+        padding: '8px 16px',
+        '&.cozyAlert': {
+          '&-primary': makeAlertColor(theme, 'primary'),
+          '&-secondary': makeAlertColor(theme, 'secondary')
+        },
+        '& $icon': {
+          paddingTop: '9px'
+        },
+        '&.block': {
+          flexWrap: 'wrap',
+          '& $action': {
+            display: 'block',
+            width: '100%',
+            paddingLeft: 0,
+            textAlign: 'right'
+          }
+        }
+      },
+      message: {
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap'
+      },
+      action: {
+        marginRight: '-6px'
+      }
+    },
+    MuiAlertTitle: {
+      root: {
+        width: '100%',
+        fontWeight: 'bold'
+      }
+    },
+    MuiSnackbarContent: {
+      root: {
+        padding: '4px 12px',
+        backgroundColor: theme.palette.grey[600]
+      }
     }
   };
 };
@@ -816,7 +915,24 @@ var makeInvertedOverrides = function makeInvertedOverrides(invertedTheme) {
           color: invertedTheme.palette.error.main
         }
       }
-    }
+    },
+    MuiAlert: _objectSpread(_objectSpread({}, makeOverrides(invertedTheme).MuiAlert), {}, {
+      root: _objectSpread(_objectSpread({}, makeOverrides(invertedTheme).MuiAlert.root), {}, {
+        '&.cozyAlert': {
+          '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
+          '&-secondary': makeAlertInvertedColor(invertedTheme, 'secondary'),
+          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
+          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
+          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
+          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
+        }
+      })
+    }),
+    MuiSnackbarContent: _objectSpread(_objectSpread({}, makeOverrides(invertedTheme).MuiSnackbarContent), {}, {
+      root: _objectSpread(_objectSpread({}, makeOverrides(invertedTheme).MuiSnackbarContent.root), {}, {
+        backgroundColor: invertedTheme.palette.grey[200]
+      })
+    })
   });
 
   invertedOverrides.MuiSwitch = _objectSpread(_objectSpread({}, invertedOverrides.MuiSwitch), {}, {

package/transpiled/react/Snackbar/index.js

@@ -1,2 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { forwardRef } from 'react';
 import MuiSnackbar from '@material-ui/core/Snackbar';
-export default MuiSnackbar;
+var Snackbar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(MuiSnackbar, _extends({
+    ref: ref
+  }, props), children);
+});
+Snackbar.displayName = 'Snackbar';
+Snackbar.defaultProps = {
+  anchorOrigin: {
+    vertical: 'top',
+    horizontal: 'center'
+  }
+};
+export default Snackbar;

package/transpiled/react/index.js

@@ -85,4 +85,6 @@ export { default as FilePicker } from './FilePicker';
 export { default as Chips } from './Chips';
 export { default as PieChart } from './PieChart';
 export { default as DropdownText } from './DropdownText';
-export { default as CircleButton } from './CircleButton';
+export { default as CircleButton } from './CircleButton';
+export { default as Alert } from './Alert';
+export { default as AlertTitle } from './AlertTitle';