cozy-ui 135.2.0 → 135.4.0

package/transpiled/react/ActionsBar/index.js

@@ -19,7 +19,6 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import Toolbar from "cozy-ui/transpiled/react/Toolbar";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
-import CozyTheme, { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
   appBar: function appBar(_ref) {
@@ -78,9 +77,17 @@ var useStyles = makeStyles({
   }
 });
 
+var DefaultIcon = function DefaultIcon() {
+  return /*#__PURE__*/React.createElement(Icon, {
+    className: "u-mr-1",
+    icon: CheckCircleIcon
+  });
+};
+
 var SelectedCount = function SelectedCount(_ref4) {
   var docs = _ref4.docs,
-      onClose = _ref4.onClose;
+      onClose = _ref4.onClose,
+      IconComponent = _ref4.IconComponent;
 
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
@@ -88,11 +95,12 @@ var SelectedCount = function SelectedCount(_ref4) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var SelectedIcon = IconComponent || DefaultIcon;
   if (isMobile) return /*#__PURE__*/React.createElement(Box, {
     className: "u-flex u-flex-items-center u-h-100 u-pr-1",
     borderRadius: "15px 0 0 0",
-    bgcolor: "primary.main",
-    color: "primary.contrastText"
+    bgcolor: "background.paper",
+    color: "text.primary"
   }, /*#__PURE__*/React.createElement(IconButton, {
     color: "inherit",
     onClick: onClose
@@ -101,13 +109,10 @@ var SelectedCount = function SelectedCount(_ref4) {
   })), docs.length);
   return /*#__PURE__*/React.createElement("div", {
     className: "u-flex u-flex-items-center u-h-100 u-ph-1"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: "u-mr-1",
-    icon: CheckCircleIcon,
-    color: "var(--iconTextColor)"
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(SelectedIcon, null), /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
-    component: "span"
+    component: "span",
+    color: "inherit"
   }, t('selected_light', docs.length)));
 };
 
@@ -116,14 +121,13 @@ var ActionsBar = function ActionsBar(_ref5) {
       docs = _ref5.docs,
       autoClose = _ref5.autoClose,
       maxDesktopActions = _ref5.maxDesktopActions,
-      onClose = _ref5.onClose;
+      onClose = _ref5.onClose,
+      color = _ref5.color,
+      IconComponent = _ref5.IconComponent;
 
   var _useBreakpoints2 = useBreakpoints(),
       isMobile = _useBreakpoints2.isMobile;
 
-  var _useCozyTheme = useCozyTheme(),
-      type = _useCozyTheme.type;
-
   var anchorRef = useRef();
 
   var _useState = useState(false),
@@ -149,25 +153,24 @@ var ActionsBar = function ActionsBar(_ref5) {
     autoClose && (onClose === null || onClose === void 0 ? void 0 : onClose());
   };
 
-  return /*#__PURE__*/React.createElement(CozyTheme, {
-    type: type,
-    variant: "inverted"
-  }, /*#__PURE__*/React.createElement(AppBar, {
+  return /*#__PURE__*/React.createElement(AppBar, {
     className: styles.appBar,
     position: "fixed",
-    color: "inherit"
+    color: color
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: styles.toolbar,
     variant: isMobile ? 'regular' : 'dense',
     disableGutters: true
   }, showDesktopCloseButton && /*#__PURE__*/React.createElement(IconButton, {
     className: styles.desktopCloseButton,
-    onClick: onClose
+    onClick: onClose,
+    color: "inherit"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: CrossIcon
   })), /*#__PURE__*/React.createElement(SelectedCount, {
     docs: docs,
-    onClose: onClose
+    onClose: onClose,
+    IconComponent: IconComponent
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.actionsContainer
   }, /*#__PURE__*/React.createElement(ActionsItems, {
@@ -183,6 +186,7 @@ var ActionsBar = function ActionsBar(_ref5) {
       return setShowMenu(true);
     }
   }) : /*#__PURE__*/React.createElement(IconButton, {
+    color: "inherit",
     ref: anchorRef,
     onClick: function onClick() {
       return setShowMenu(true);
@@ -206,7 +210,7 @@ var ActionsBar = function ActionsBar(_ref5) {
     onClose: function onClose() {
       return setShowMenu(false);
     }
-  }))))));
+  })))));
 };
 
 ActionsBar.propTypes = {
@@ -216,10 +220,19 @@ ActionsBar.propTypes = {
    * Only works on desktop since maximum number is forced in mobile
    */
   maxDesktopActions: PropTypes.number,
-  autoClose: PropTypes.bool
+  autoClose: PropTypes.bool,
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'warning', 'info', 'success']),
+
+  /**
+   * Custom React component to replace the default Icon with CheckCircleIcon
+   * displayed next to the selection count on desktop.
+   * The component will be rendered as-is, giving full control over the icon styling.
+   */
+  IconComponent: PropTypes.elementType
 };
 ActionsBar.defaultProps = {
   maxDesktopActions: 5,
-  autoClose: true
+  autoClose: true,
+  color: 'default'
 };
 export default withActionsLocales(ActionsBar);

package/transpiled/react/AppBar/index.d.ts

@@ -1,2 +1,3 @@
-export default MuiAppBar;
-import MuiAppBar from "@material-ui/core/AppBar";
+export default AppBar;
+declare const AppBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/transpiled/react/AppBar/index.js

@@ -1,2 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["color", "className"];
 import MuiAppBar from '@material-ui/core/AppBar';
-export default MuiAppBar;
+import PropTypes from 'prop-types';
+import React from 'react';
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles(function (theme) {
+  return {
+    colorError: {
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText
+    },
+    colorWarning: {
+      backgroundColor: theme.palette.warning.main,
+      color: theme.palette.warning.contrastText
+    },
+    colorInfo: {
+      backgroundColor: theme.palette.info.main,
+      color: theme.palette.info.contrastText
+    },
+    colorSuccess: {
+      backgroundColor: theme.palette.success.main,
+      color: theme.palette.success.contrastText
+    }
+  };
+});
+var CUSTOM_COLOR_CLASSES = {
+  error: 'colorError',
+  warning: 'colorWarning',
+  info: 'colorInfo',
+  success: 'colorSuccess'
+};
+var AppBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var styles = useStyles();
+  var appBarColor = CUSTOM_COLOR_CLASSES[color] ? 'default' : color;
+  var customColorClass = CUSTOM_COLOR_CLASSES[color] ? styles[CUSTOM_COLOR_CLASSES[color]] : undefined;
+  return /*#__PURE__*/React.createElement(MuiAppBar, _extends({}, props, {
+    ref: ref,
+    color: appBarColor,
+    className: "".concat(className || '', " ").concat(customColorClass || '')
+  }));
+});
+AppBar.propTypes = {
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'warning', 'info', 'success'])
+};
+AppBar.defaultProps = {
+  color: 'default'
+};
+export default AppBar;