cozy-ui 103.12.0 → 104.0.0

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+# [104.0.0](https://github.com/cozy/cozy-ui/compare/v103.12.0...v104.0.0) (2024-03-12)
+
+
+### Bug Fixes
+
+* Color & square props are ignored ([c37ad2f](https://github.com/cozy/cozy-ui/commit/c37ad2f)), closes [/github.com/mui/material-ui/blob/bda562b435a70e3e8f6d7fb04581c6816a5ba0c7/packages/material-ui/src/Snackbar/Snackbar.js#L235](https://github.com//github.com/mui/material-ui/blob/bda562b435a70e3e8f6d7fb04581c6816a5ba0c7/packages/material-ui/src/Snackbar/Snackbar.js/issues/L235) [#L193](https://github.com/cozy/cozy-ui/issues/L193)
+
+
+### Features
+
+* Add typedef to Alert component ([16f2097](https://github.com/cozy/cozy-ui/commit/16f2097))
+* Improve AlertProvider ([723a627](https://github.com/cozy/cozy-ui/commit/723a627))
+* Replace ViewerSnackbarProvider by AlertProvider ([374537a](https://github.com/cozy/cozy-ui/commit/374537a))
+
+
+### BREAKING CHANGES
+
+* The `showAlert` function returned by the `useAlert` hook changes signature.
+
+Also, the `variant` was set to `filled`,
+it now takes the default value of `Alert`, i.e. `standard`.
+
+Before:
+```
+const { showAlert } = useAlert()
+showAlert(t('foo.bar'), 'error',)
+```
+
+Now:
+```
+const { showAlert } = useAlert()
+showAlert({ message: t('foo.bar'), severity: 'error' })
+```
+
+Its options now support Alert component props.
+Example:
+```
+showAlert({
+   message: t('foo.bar'),
+   severity: 'info',
+   icon: [secure],
+   color: 'blue',
+   square: true
+})
+```
+
 # [103.12.0](https://github.com/cozy/cozy-ui/compare/v103.11.1...v103.12.0) (2024-03-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "103.12.0",
+  "version": "104.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Alert/index.jsx

@@ -52,6 +52,7 @@ const Alert = forwardRef(
       square,
       action,
       variant,
+      style,
       children,
       ...props
     },
@@ -65,10 +66,22 @@ const Alert = forwardRef(
     const iconSize = icon?.props?.size || DEFAULT_ICON_SIZE
     const styles = useStyles({ iconSize, block })
 
+    /*
+    When this component is the child of Snackbar, MUI injects a `style` prop
+    (https://github.com/mui/material-ui/blob/bda562b435a70e3e8f6d7fb04581c6816a5ba0c7/packages/material-ui/src/Snackbar/Snackbar.js#L235
+    =>
+    https://github.com/mui/material-ui/blob/1e80616d3dde536227af56d49f91b28f830bd33c/packages/mui-material/src/Grow/Grow.js #L193), our styles are overwritten.
+    */
+    const computedStyles = {
+      backgroundColor: color,
+      borderRadius: square && 0,
+      ...style
+    }
+
     return (
       <MuiAlert
         ref={ref}
-        style={{ backgroundColor: color, borderRadius: square && 0 }}
+        style={computedStyles}
         className={cx(
           className,
           `cozyStyles-${severity}-${variant}`,
@@ -91,6 +104,17 @@ const Alert = forwardRef(
 
 Alert.displayName = 'Alert'
 
+/**
+ * @typedef {Object} AlertProps
+ * @property {string} className - Classname of the alert
+ * @property {React.FC<PropTypes.InferProps<typeof Icon.propTypes>>|false} icon - Icon component to display in the alert (or false to hide it)
+ * @property {'primary'|'secondary'|'success'|'error'|'warning'|'info'} severity - Severity of the alert (default: primary)
+ * @property {boolean} block - Block the alert to the full width of its container (default: false)
+ * @property {string} color - Background color of the alert
+ * @property {boolean} square - Square the alert corners (default: false)
+ * @property {'standard'|'outlined'|'filled'} variant - Variant of the alert (default: standard)
+ */
+
 export const AlertPropTypes = {
   className: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),

package/react/Empty/Readme.md

@@ -65,4 +65,4 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
     text="Try adding some content to this list"
   />
 </>
-```
+```

package/react/Icon/Readme.md

@@ -7,7 +7,6 @@ to load your SVG (either explicitly or, better, implicitly in your `webpack.conf
 
 Be aware that Icon forwards unknown props to the underlying `<svg />` element, such as onClick prop.
 
-
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import People from 'cozy-ui/transpiled/react/Icons/People'

package/react/Paywall/howto.md

@@ -3,6 +3,7 @@
 A new variant is essentially a set of translations adapted to a specific context of use.
 
 To create a new one, add your translation to the `src/react/Paywall/locales` directory. The translations for each case (default, premium or public) are grouped together under the name of your variant. A case includes a title, content and a label for the action.
+
 ```static
 "variantNamePaywall": {
     "premium": {
@@ -15,6 +16,7 @@ To create a new one, add your translation to the `src/react/Paywall/locales` dir
 ```
 
 Next, we create a new component returning the `Paywall`, specifying the name of the new variant. You can also use `contentInterpolation` to insert variables into the content translation.
+
 ```js static
 <Paywall
   variant="variantName"

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -5,7 +5,7 @@ import { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
 
 import useBreakpoints from '../../providers/Breakpoints'
 import { useI18n } from '../../providers/I18n'
-import useViewerSnackbar from '../providers/ViewerSnackbarProvider'
+import { useAlert } from '../../providers/Alert'
 import {
   buildEditAttributePath,
   isEditableAttribute,
@@ -22,7 +22,7 @@ const ActionMenuWrapper = forwardRef(({ onClose, file, optionFile }, ref) => {
   const editPathByModelProps = useActionMenuContext()
   const { isMobile } = useBreakpoints()
   const { t } = useI18n()
-  const { showViewerSnackbar } = useViewerSnackbar()
+  const { showAlert } = useAlert()
   const client = useClient()
 
   const currentModel = getCurrentModel(name)
@@ -42,12 +42,19 @@ const ActionMenuWrapper = forwardRef(({ onClose, file, optionFile }, ref) => {
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(value)
-      showViewerSnackbar(
-        'success',
-        t(`Viewer.snackbar.copiedToClipboard.success`)
-      )
+      showAlert({
+        message: t(`Viewer.snackbar.copiedToClipboard.success`),
+        severity: 'success',
+        variant: 'filled',
+        icon: false
+      })
     } catch (error) {
-      showViewerSnackbar('error', t(`Viewer.snackbar.copiedToClipboard.error`))
+      showAlert({
+        message: t(`Viewer.snackbar.copiedToClipboard.error`),
+        severity: 'error',
+        variant: 'filled',
+        icon: false
+      })
     }
     onClose()
   }

package/react/Viewer/Readme.md

@@ -38,7 +38,6 @@ The `Viewer` can display an **information panel** to show additional information
     * **showClose** : `<boolean>` – Whether to show close button in toolbar
     * **showFilePath** : `<boolean>` – Whether to show file path below his name
 
-
 ### Demo
 
 ```jsx

package/react/Viewer/ViewerContainer.jsx

@@ -12,8 +12,7 @@ import { isValidForPanel } from './helpers'
 import Viewer from './Viewer'
 import ViewerInformationsWrapper from './ViewerInformationsWrapper'
 import EncryptedProvider from './providers/EncryptedProvider'
-import { ViewerSnackbarProvider } from './providers/ViewerSnackbarProvider'
-import ViewerSnackbar from './snackbar/ViewerSnackbar'
+import AlertProvider from '../providers/Alert'
 import { ActionMenuProvider } from './providers/ActionMenuProvider'
 
 import styles from './styles.styl'
@@ -49,7 +48,7 @@ const ViewerContainer = props => {
   }
 
   return (
-    <ViewerSnackbarProvider>
+    <AlertProvider>
       <ActionMenuProvider editPathByModelProps={editPathByModelProps}>
         <div
           id="viewer-wrapper"
@@ -76,9 +75,8 @@ const ViewerContainer = props => {
             {children}
           </ViewerInformationsWrapper>
         </div>
-        <ViewerSnackbar />
       </ActionMenuProvider>
-    </ViewerSnackbarProvider>
+    </AlertProvider>
   )
 }
 

package/react/Viewer/ViewersByFile/PdfMobileViewer.jsx

@@ -36,7 +36,12 @@ export const PdfMobileViewer = ({ file, url, t, gestures }) => {
       try {
         await client.collection('io.cozy.files').download(file)
       } catch (error) {
-        showAlert(t('Viewer.error.generic'), 'error')
+        showAlert({
+          message: t('Viewer.error.generic'),
+          severity: 'error',
+          variant: 'filled',
+          icon: false
+        })
       }
     },
     [client, showAlert, t]

package/react/deprecated/readme.md

@@ -1 +1 @@
-<!-- For styleguidist, a .md file is needed in directories -->
+<!-- For styleguidist, a .md file is needed in directories -->

package/react/legacy/readme.md

@@ -1 +1 @@
-<!-- For styleguidist, a .md file is needed in directories -->
+<!-- For styleguidist, a .md file is needed in directories -->

package/react/providers/Alert/Readme.md

@@ -3,23 +3,60 @@ import Variants from 'cozy-ui/docs/components/Variants'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import AlertProvider, { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 
-const initialVariants = [{ primary: true, secondary: false, success: false, error: false, warning: false, info: false }]
+const initialVariants = [{
+  title: false,
+  block: false,
+  color: false,
+  largeIcon: false,
+  noIcon: false,
+  square: false,
+  filled: false,
+  outlined: false,
+  close: true
+}]
 
 const Component = ({ variant }) => {
   const { showAlert } = useAlert()
 
-  return <Button label="show alert" onClick={() => showAlert('Alert message', variant)}/>
+  return (
+    <Button
+      label="show alert"
+      onClick={() =>
+        showAlert({
+          title: variant.title ? 'Alert title' : undefined,
+          severity: 'success',
+          message: 'Alert message',
+          color: variant.color ? "#EFA82D" : undefined,
+          variant: variant.filled
+            ? 'filled'
+            : variant.outlined
+            ? 'outlined'
+            : undefined,
+          block: variant.block,
+          square: variant.square,
+          icon: variant.noIcon
+            ? false
+            : variant.largeIcon
+            ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} />
+            : undefined,
+          onClose: variant.close ? () => {} : undefined
+        })
+      }
+    />
+  )
 }
 
 ;
 
 <BreakpointsProvider>
   <AlertProvider>
-    <Variants initialVariants={initialVariants} radio>
+    <Variants initialVariants={initialVariants}>
       {variant => (
         <>
-          <Component variant={Object.keys(variant).find(key => variant[key])} />
+          <Component variant={variant} />
         </>
       )}
     </Variants>

package/react/providers/Alert/index.jsx

@@ -2,9 +2,21 @@ import React, { createContext, useState, useContext, useMemo } from 'react'
 
 import Snackbar from '../../Snackbar'
 import Alert from '../../Alert'
+import AlertTitle from '../../AlertTitle'
+
+/**
+ * @typedef {import('../../Alert').AlertProps & { message: string, title: string }} ShowAlertArgs
+ */
+/**
+ * @typedef {object} UseAlertReturn
+ * @property {(args: ShowAlertArgs) => void} showAlert
+ */
 
 export const AlertContext = createContext()
 
+/**
+ * @returns {UseAlertReturn}
+ */
 export const useAlert = () => {
   const context = useContext(AlertContext)
 
@@ -14,18 +26,26 @@ export const useAlert = () => {
   return context
 }
 
-const defaultState = { message: '', severity: 'primary', open: false }
+const defaultState = {
+  title: '',
+  message: '',
+  open: false
+}
 const handleClose = (state, setState) => () => {
   return setState({ ...state, open: false })
 }
 
 const AlertProvider = ({ children }) => {
   const [state, setState] = useState(defaultState)
+  const { open, message, title, ...alertProps } = state
 
   const value = useMemo(
     () => ({
-      showAlert: (message, severity) => {
-        setState({ message, severity, open: true })
+      /**
+       * @param {ShowAlertArgs} args
+       */
+      showAlert: args => {
+        setState({ open: true, ...args })
       }
     }),
     []
@@ -34,14 +54,14 @@ const AlertProvider = ({ children }) => {
   return (
     <AlertContext.Provider value={value}>
       {children}
-      <Snackbar open={state.open} onClose={handleClose(state, setState)}>
+      <Snackbar open={open} onClose={handleClose(state, setState)}>
         <Alert
-          variant="filled"
           elevation={6}
-          severity={state.severity}
           onClose={handleClose(state, setState)}
+          {...alertProps}
         >
-          {state.message}
+          {title && <AlertTitle>{title}</AlertTitle>}
+          {message}
         </Alert>
       </Snackbar>
     </AlertContext.Provider>

package/react/providers/Readme.md

@@ -1 +1 @@
-<!-- For styleguidist, a .md file is needed in directories -->
+<!-- For styleguidist, a .md file is needed in directories -->

package/transpiled/react/Alert/index.js

@@ -1,6 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "classes", "icon", "severity", "block", "color", "square", "action", "variant", "children"];
+var _excluded = ["className", "classes", "icon", "severity", "block", "color", "square", "action", "variant", "style", "children"];
+
+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; }
+
+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 React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -60,6 +66,7 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       square = _ref2.square,
       action = _ref2.action,
       variant = _ref2.variant,
+      style = _ref2.style,
       children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded);
 
@@ -71,12 +78,21 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     iconSize: iconSize,
     block: block
   });
+  /*
+  When this component is the child of Snackbar, MUI injects a `style` prop
+  (https://github.com/mui/material-ui/blob/bda562b435a70e3e8f6d7fb04581c6816a5ba0c7/packages/material-ui/src/Snackbar/Snackbar.js#L235
+  =>
+  https://github.com/mui/material-ui/blob/1e80616d3dde536227af56d49f91b28f830bd33c/packages/mui-material/src/Grow/Grow.js #L193), our styles are overwritten.
+  */
+
+  var computedStyles = _objectSpread({
+    backgroundColor: color,
+    borderRadius: square && 0
+  }, style);
+
   return /*#__PURE__*/React.createElement(MuiAlert, _extends({
     ref: ref,
-    style: {
-      backgroundColor: color,
-      borderRadius: square && 0
-    },
+    style: computedStyles,
     className: cx(className, "cozyStyles-".concat(severity, "-").concat(variant), {
       block: block
     }, {
@@ -91,6 +107,17 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, props), children);
 });
 Alert.displayName = 'Alert';
+/**
+ * @typedef {Object} AlertProps
+ * @property {string} className - Classname of the alert
+ * @property {React.FC<PropTypes.InferProps<typeof Icon.propTypes>>|false} icon - Icon component to display in the alert (or false to hide it)
+ * @property {'primary'|'secondary'|'success'|'error'|'warning'|'info'} severity - Severity of the alert (default: primary)
+ * @property {boolean} block - Block the alert to the full width of its container (default: false)
+ * @property {string} color - Background color of the alert
+ * @property {boolean} square - Square the alert corners (default: false)
+ * @property {'standard'|'outlined'|'filled'} variant - Variant of the alert (default: standard)
+ */
+
 export var AlertPropTypes = {
   className: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),

package/transpiled/react/Viewer/Panel/ActionMenuWrapper.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { useAppLinkWithStoreFallback, useClient } from 'cozy-client';
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
-import useViewerSnackbar from "cozy-ui/transpiled/react/Viewer/providers/ViewerSnackbarProvider";
+import { useAlert } from "cozy-ui/transpiled/react/providers/Alert";
 import { buildEditAttributePath, isEditableAttribute, getCurrentModel } from "cozy-ui/transpiled/react/Viewer/helpers";
 import useActionMenuContext from "cozy-ui/transpiled/react/Viewer/providers/ActionMenuProvider";
 import ActionMenuMobile from "cozy-ui/transpiled/react/Viewer/Panel/ActionMenuMobile";
@@ -25,8 +25,8 @@ var ActionMenuWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
-  var _useViewerSnackbar = useViewerSnackbar(),
-      showViewerSnackbar = _useViewerSnackbar.showViewerSnackbar;
+  var _useAlert = useAlert(),
+      showAlert = _useAlert.showAlert;
 
   var client = useClient();
   var currentModel = getCurrentModel(name);
@@ -49,14 +49,24 @@ var ActionMenuWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
               return navigator.clipboard.writeText(value);
 
             case 3:
-              showViewerSnackbar('success', t("Viewer.snackbar.copiedToClipboard.success"));
+              showAlert({
+                message: t("Viewer.snackbar.copiedToClipboard.success"),
+                severity: 'success',
+                variant: 'filled',
+                icon: false
+              });
               _context.next = 9;
               break;
 
             case 6:
               _context.prev = 6;
               _context.t0 = _context["catch"](0);
-              showViewerSnackbar('error', t("Viewer.snackbar.copiedToClipboard.error"));
+              showAlert({
+                message: t("Viewer.snackbar.copiedToClipboard.error"),
+                severity: 'error',
+                variant: 'filled',
+                icon: false
+              });
 
             case 9:
               onClose();

package/transpiled/react/Viewer/ViewerContainer.js

@@ -20,8 +20,7 @@ import { isValidForPanel } from "cozy-ui/transpiled/react/Viewer/helpers";
 import Viewer from "cozy-ui/transpiled/react/Viewer/Viewer";
 import ViewerInformationsWrapper from "cozy-ui/transpiled/react/Viewer/ViewerInformationsWrapper";
 import EncryptedProvider from "cozy-ui/transpiled/react/Viewer/providers/EncryptedProvider";
-import { ViewerSnackbarProvider } from "cozy-ui/transpiled/react/Viewer/providers/ViewerSnackbarProvider";
-import ViewerSnackbar from "cozy-ui/transpiled/react/Viewer/snackbar/ViewerSnackbar";
+import AlertProvider from "cozy-ui/transpiled/react/providers/Alert";
 import { ActionMenuProvider } from "cozy-ui/transpiled/react/Viewer/providers/ActionMenuProvider";
 var styles = {
   "viewer-wrapper": "styles__viewer-wrapper___2GIXH",
@@ -61,7 +60,7 @@ var ViewerContainer = function ViewerContainer(props) {
     }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbarProps)
   });
 
-  return /*#__PURE__*/React.createElement(ViewerSnackbarProvider, null, /*#__PURE__*/React.createElement(ActionMenuProvider, {
+  return /*#__PURE__*/React.createElement(AlertProvider, null, /*#__PURE__*/React.createElement(ActionMenuProvider, {
     editPathByModelProps: editPathByModelProps
   }, /*#__PURE__*/React.createElement("div", {
     id: "viewer-wrapper",
@@ -81,7 +80,7 @@ var ViewerContainer = function ViewerContainer(props) {
     validForPanel: validForPanel,
     currentFile: currentFile,
     toolbarRef: toolbarRef
-  }, children)), /*#__PURE__*/React.createElement(ViewerSnackbar, null)));
+  }, children))));
 };
 
 ViewerContainer.propTypes = {

package/transpiled/react/Viewer/ViewersByFile/PdfMobileViewer.js

@@ -76,7 +76,12 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
             case 5:
               _context.prev = 5;
               _context.t0 = _context["catch"](0);
-              showAlert(t('Viewer.error.generic'), 'error');
+              showAlert({
+                message: t('Viewer.error.generic'),
+                severity: 'error',
+                variant: 'filled',
+                icon: false
+              });
 
             case 8:
             case "end":

package/transpiled/react/providers/Alert/index.js

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["open", "message", "title"];
 
 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; }
 
@@ -8,7 +11,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { createContext, useState, useContext, useMemo } from 'react';
 import Snackbar from "cozy-ui/transpiled/react/Snackbar";
 import Alert from "cozy-ui/transpiled/react/Alert";
+import AlertTitle from "cozy-ui/transpiled/react/AlertTitle";
+/**
+ * @typedef {import('../../Alert').AlertProps & { message: string, title: string }} ShowAlertArgs
+ */
+
+/**
+ * @typedef {object} UseAlertReturn
+ * @property {(args: ShowAlertArgs) => void} showAlert
+ */
+
 export var AlertContext = /*#__PURE__*/createContext();
+/**
+ * @returns {UseAlertReturn}
+ */
+
 export var useAlert = function useAlert() {
   var context = useContext(AlertContext);
 
@@ -19,8 +36,8 @@ export var useAlert = function useAlert() {
   return context;
 };
 var defaultState = {
+  title: '',
   message: '',
-  severity: 'primary',
   open: false
 };
 
@@ -40,28 +57,32 @@ var AlertProvider = function AlertProvider(_ref) {
       state = _useState2[0],
       setState = _useState2[1];
 
+  var open = state.open,
+      message = state.message,
+      title = state.title,
+      alertProps = _objectWithoutProperties(state, _excluded);
+
   var value = useMemo(function () {
     return {
-      showAlert: function showAlert(message, severity) {
-        setState({
-          message: message,
-          severity: severity,
+      /**
+       * @param {ShowAlertArgs} args
+       */
+      showAlert: function showAlert(args) {
+        setState(_objectSpread({
           open: true
-        });
+        }, args));
       }
     };
   }, []);
   return /*#__PURE__*/React.createElement(AlertContext.Provider, {
     value: value
   }, children, /*#__PURE__*/React.createElement(Snackbar, {
-    open: state.open,
+    open: open,
     onClose: handleClose(state, setState)
-  }, /*#__PURE__*/React.createElement(Alert, {
-    variant: "filled",
+  }, /*#__PURE__*/React.createElement(Alert, _extends({
     elevation: 6,
-    severity: state.severity,
     onClose: handleClose(state, setState)
-  }, state.message)));
+  }, alertProps), title && /*#__PURE__*/React.createElement(AlertTitle, null, title), message)));
 };
 
 export default /*#__PURE__*/React.memo(AlertProvider);

package/react/Viewer/providers/ViewerSnackbarProvider.jsx

@@ -1,64 +0,0 @@
-import React, { createContext, useContext, useState } from 'react'
-
-/**
- * @typedef {('primary'|'secondary'|'success'|'error'|'warning'|'info')} enumSeverity
- */
-/**
- * @typedef {object} useViewerSnackbarReturn
- * @property {boolean} isViewerSnackbarOpen
- * @property {string} viewerSnackbarMessage
- * @property {enumSeverity} viewerSnackbarSeverity
- * @property {(severity: enumSeverity, message: string) => void} showViewerSnackbar
- * @property {(message: string) => void} hideViewerSnackbar
- */
-
-const ViewerSnackbarContext = createContext()
-
-const ViewerSnackbarProvider = ({ children }) => {
-  const [isViewerSnackbarOpen, setIsViewerSnackbarOpen] = useState(false)
-  const [viewerSnackbarMessage, setViewerSnackbarMessage] = useState('')
-  const [viewerSnackbarSeverity, setViewerSnackbarSeverity] = useState(
-    'primary'
-  )
-
-  const showViewerSnackbar = (severity, message) => {
-    setIsViewerSnackbarOpen(true)
-    setViewerSnackbarMessage(message)
-    setViewerSnackbarSeverity(severity)
-  }
-  const hideViewerSnackbar = () => {
-    setIsViewerSnackbarOpen(false)
-  }
-
-  const result = {
-    isViewerSnackbarOpen,
-    viewerSnackbarMessage,
-    viewerSnackbarSeverity,
-    showViewerSnackbar,
-    hideViewerSnackbar
-  }
-
-  return (
-    <ViewerSnackbarContext.Provider value={result}>
-      {children}
-    </ViewerSnackbarContext.Provider>
-  )
-}
-
-/**
- * @returns {useViewerSnackbarReturn}
- */
-const useViewerSnackbar = () => {
-  const viewerSnackbar = useContext(ViewerSnackbarContext)
-  if (!viewerSnackbar) {
-    throw new Error(
-      'ViewerSnackbarContext must be used within a ViewerSnackbarProvider'
-    )
-  }
-
-  return viewerSnackbar
-}
-
-export default useViewerSnackbar
-
-export { ViewerSnackbarProvider }

package/react/Viewer/snackbar/ViewerSnackbar.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import Snackbar from '../../Snackbar'
-import Alert from '../../Alert'
-import useViewerSnackbar from '../providers/ViewerSnackbarProvider'
-
-const ViewerSnackbar = () => {
-  const {
-    isViewerSnackbarOpen,
-    viewerSnackbarMessage,
-    viewerSnackbarSeverity,
-    hideViewerSnackbar
-  } = useViewerSnackbar()
-
-  return (
-    <Snackbar open={isViewerSnackbarOpen} onClose={hideViewerSnackbar}>
-      <Alert
-        variant="filled"
-        elevation={6}
-        onClose={hideViewerSnackbar}
-        severity={viewerSnackbarSeverity}
-        icon={false}
-      >
-        {viewerSnackbarMessage}
-      </Alert>
-    </Snackbar>
-  )
-}
-
-export default ViewerSnackbar

package/transpiled/react/Viewer/providers/ViewerSnackbarProvider.js

@@ -1,73 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { createContext, useContext, useState } from 'react';
-/**
- * @typedef {('primary'|'secondary'|'success'|'error'|'warning'|'info')} enumSeverity
- */
-
-/**
- * @typedef {object} useViewerSnackbarReturn
- * @property {boolean} isViewerSnackbarOpen
- * @property {string} viewerSnackbarMessage
- * @property {enumSeverity} viewerSnackbarSeverity
- * @property {(severity: enumSeverity, message: string) => void} showViewerSnackbar
- * @property {(message: string) => void} hideViewerSnackbar
- */
-
-var ViewerSnackbarContext = /*#__PURE__*/createContext();
-
-var ViewerSnackbarProvider = function ViewerSnackbarProvider(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isViewerSnackbarOpen = _useState2[0],
-      setIsViewerSnackbarOpen = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      viewerSnackbarMessage = _useState4[0],
-      setViewerSnackbarMessage = _useState4[1];
-
-  var _useState5 = useState('primary'),
-      _useState6 = _slicedToArray(_useState5, 2),
-      viewerSnackbarSeverity = _useState6[0],
-      setViewerSnackbarSeverity = _useState6[1];
-
-  var showViewerSnackbar = function showViewerSnackbar(severity, message) {
-    setIsViewerSnackbarOpen(true);
-    setViewerSnackbarMessage(message);
-    setViewerSnackbarSeverity(severity);
-  };
-
-  var hideViewerSnackbar = function hideViewerSnackbar() {
-    setIsViewerSnackbarOpen(false);
-  };
-
-  var result = {
-    isViewerSnackbarOpen: isViewerSnackbarOpen,
-    viewerSnackbarMessage: viewerSnackbarMessage,
-    viewerSnackbarSeverity: viewerSnackbarSeverity,
-    showViewerSnackbar: showViewerSnackbar,
-    hideViewerSnackbar: hideViewerSnackbar
-  };
-  return /*#__PURE__*/React.createElement(ViewerSnackbarContext.Provider, {
-    value: result
-  }, children);
-};
-/**
- * @returns {useViewerSnackbarReturn}
- */
-
-
-var useViewerSnackbar = function useViewerSnackbar() {
-  var viewerSnackbar = useContext(ViewerSnackbarContext);
-
-  if (!viewerSnackbar) {
-    throw new Error('ViewerSnackbarContext must be used within a ViewerSnackbarProvider');
-  }
-
-  return viewerSnackbar;
-};
-
-export default useViewerSnackbar;
-export { ViewerSnackbarProvider };

package/transpiled/react/Viewer/snackbar/ViewerSnackbar.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import Snackbar from "cozy-ui/transpiled/react/Snackbar";
-import Alert from "cozy-ui/transpiled/react/Alert";
-import useViewerSnackbar from "cozy-ui/transpiled/react/Viewer/providers/ViewerSnackbarProvider";
-
-var ViewerSnackbar = function ViewerSnackbar() {
-  var _useViewerSnackbar = useViewerSnackbar(),
-      isViewerSnackbarOpen = _useViewerSnackbar.isViewerSnackbarOpen,
-      viewerSnackbarMessage = _useViewerSnackbar.viewerSnackbarMessage,
-      viewerSnackbarSeverity = _useViewerSnackbar.viewerSnackbarSeverity,
-      hideViewerSnackbar = _useViewerSnackbar.hideViewerSnackbar;
-
-  return /*#__PURE__*/React.createElement(Snackbar, {
-    open: isViewerSnackbarOpen,
-    onClose: hideViewerSnackbar
-  }, /*#__PURE__*/React.createElement(Alert, {
-    variant: "filled",
-    elevation: 6,
-    onClose: hideViewerSnackbar,
-    severity: viewerSnackbarSeverity,
-    icon: false
-  }, viewerSnackbarMessage));
-};
-
-export default ViewerSnackbar;