cozy-ui 103.11.1 → 104.0.0

package/CHANGELOG.md

@@ -1,3 +1,57 @@
+# [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)
+
+
+### Features
+
+* **viewer:** Remove useless locales ([476fe37](https://github.com/cozy/cozy-ui/commit/476fe37))
+* **viewer:** Use pinchend & tap events on mobile for download file ([8f4b2e7](https://github.com/cozy/cozy-ui/commit/8f4b2e7))
+
 ## [103.11.1](https://github.com/cozy/cozy-ui/compare/v103.11.0...v103.11.1) (2024-03-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "103.11.1",
+  "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

@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import PropTypes from 'prop-types'
 
 import { useClient } from 'cozy-client'
-import { openFileWith } from 'cozy-client/dist/models/fsnative'
-import { isMobileApp } from 'cozy-device-helper'
 
-import Alerter from '../../deprecated/Alerter'
 import Spinner from '../../Spinner'
-import Button from '../../deprecated/Button'
 import FileImageLoader from '../../FileImageLoader'
 
-import { withViewerLocales } from '../hoc/withViewerLocales'
 import DownloadButton from '../NoViewer/DownloadButton'
 import NoViewer from '../NoViewer'
 
 import styles from './styles.styl'
+import { FileDoctype } from '../../proptypes'
+import { useAlert } from '../../providers/Alert'
+import { withViewerLocales } from '../hoc/withViewerLocales'
 
 export const PdfMobileViewer = ({ file, url, t, gestures }) => {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
   const imgRef = useRef(null)
+  const { showAlert } = useAlert()
 
   const client = useClient()
 
@@ -31,48 +31,42 @@ export const PdfMobileViewer = ({ file, url, t, gestures }) => {
     setLoading(false)
   }
 
-  const onFileOpen = async file => {
-    try {
-      await openFileWith(client, file)
-    } catch (error) {
-      Alerter.info(`Viewer.error.${error}`, { fileMime: file.mime })
-    }
-  }
-
-  const handleOnClick = file => {
-    !isMobileApp() && client.collection('io.cozy.files').download(file)
-  }
+  const handleOnClick = useCallback(
+    async file => {
+      try {
+        await client.collection('io.cozy.files').download(file)
+      } catch (error) {
+        showAlert({
+          message: t('Viewer.error.generic'),
+          severity: 'error',
+          variant: 'filled',
+          icon: false
+        })
+      }
+    },
+    [client, showAlert, t]
+  )
 
   useEffect(() => {
-    if (gestures && isMobileApp()) {
+    if (gestures) {
       gestures.get('pinch').set({ enable: true })
-      gestures.on('tap doubletap pinchend', e => {
-        if (e.target === imgRef.current) {
-          onFileOpen(file)
+      gestures.on('pinchend tap', evt => {
+        if (evt.tapCount === 1) {
+          handleOnClick(file)
         }
       })
 
       return () => {
-        gestures.off('tap doubletap pinchend')
+        gestures.off('pinchend tap')
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [gestures])
+  }, [client, gestures, file, handleOnClick])
 
   if (error) {
     return (
       <NoViewer
         file={file}
-        renderFallbackExtraContent={
-          isMobileApp()
-            ? file => (
-                <Button
-                  onClick={() => onFileOpen(file)}
-                  label={t('Viewer.openWith')}
-                />
-              )
-            : file => <DownloadButton file={file} />
-        }
+        renderFallbackExtraContent={file => <DownloadButton file={file} />}
       />
     )
   }
@@ -94,7 +88,6 @@ export const PdfMobileViewer = ({ file, url, t, gestures }) => {
               alt={file.name}
               src={src}
               onLoad={onImageLoad}
-              onClick={() => handleOnClick(file)}
             />
           )}
         />
@@ -103,4 +96,10 @@ export const PdfMobileViewer = ({ file, url, t, gestures }) => {
   )
 }
 
+PdfMobileViewer.prototype = {
+  file: FileDoctype.isRequired,
+  url: PropTypes.string,
+  gestures: PropTypes.object
+}
+
 export default withViewerLocales(PdfMobileViewer)

package/react/Viewer/ViewersByFile/PdfMobileViewer.spec.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { render, waitFor } from '@testing-library/react'
 
 import { CozyProvider, createMockClient } from 'cozy-client'
-import { isMobileApp } from 'cozy-device-helper'
 import logger from 'cozy-logger'
 
 import { I18n } from '../../providers/I18n'
@@ -12,11 +11,6 @@ import { PdfMobileViewer } from './PdfMobileViewer'
 
 logger.error = logger.warn = jest.fn()
 
-jest.mock('cozy-device-helper', () => ({
-  ...jest.requireActual('cozy-device-helper'),
-  isMobileApp: jest.fn()
-}))
-
 const client = createMockClient({})
 client.collection = jest.fn(() => ({
   getDownloadLinkById: jest.fn()
@@ -26,6 +20,9 @@ client.plugins.realtime = {
   unsubscribe: jest.fn(),
   unsubscribeAll: jest.fn()
 }
+jest.mock('../../providers/Alert', () => ({
+  useAlert: jest.fn().mockReturnValue({ showAlert: jest.fn() })
+}))
 
 const file = {
   _id: 'pdf',
@@ -67,8 +64,6 @@ describe('PdfMobileViewer', () => {
     })
 
     it('should show "download" button on browser', async () => {
-      isMobileApp.mockReturnValue(false)
-
       const { root } = setup({ file: fileWithoutLinks })
       const { getByText, queryByRole } = root
 
@@ -78,18 +73,5 @@ describe('PdfMobileViewer', () => {
         expect(getByText(file.name))
       })
     })
-
-    it('should show "open with" button on native app', async () => {
-      isMobileApp.mockReturnValue(true)
-
-      const { root } = setup({ file: fileWithoutLinks })
-      const { getByText, queryByRole } = root
-
-      await waitFor(() => {
-        expect(queryByRole('progressbar')).toBeFalsy()
-        expect(getByText('Viewer.openWith'))
-        expect(getByText(file.name))
-      })
-    })
   })
 })

package/react/Viewer/locales/en.json

@@ -15,9 +15,7 @@
       },
       "generic": "An error occurred when opening this file, please try again.",
       "missing": "This file is missing",
-      "network": "This file could not be loaded. Do you have a working internet connection right now?",
-      "noapp": "No application on your device can open this file with mime type: %{fileMime} ",
-      "offline": "You should be connected to open this file"
+      "network": "This file could not be loaded. Do you have a working internet connection right now?"
     },
     "goto": "Go to %{url}",
     "next": "Next",

package/react/Viewer/locales/fr.json

@@ -15,9 +15,7 @@
       },
       "generic": "Une erreur s'est produite lors de l'ouverture de ce fichier, veuillez réessayer.",
       "missing": "Le fichier est manquant",
-      "network": "Ce fichier n'a pas pu être chargé. Avez-vous une connexion internet qui fonctionne actuellement ?",
-      "noapp": "Aucune application de votre appareil ne peut ouvrir ce fichier avec le type mime : %{fileMime} ",
-      "offline": "Vous devez être connecté pour ouvrir ce fichier"
+      "network": "Ce fichier n'a pas pu être chargé. Avez-vous une connexion internet qui fonctionne actuellement ?"
     },
     "goto": "Ouvrir %{url}",
     "next": "Suivante",

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

@@ -1,15 +1,11 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { useClient } from 'cozy-client';
-import { openFileWith } from 'cozy-client/dist/models/fsnative';
-import { isMobileApp } from 'cozy-device-helper';
-import Alerter from "cozy-ui/transpiled/react/deprecated/Alerter";
 import Spinner from "cozy-ui/transpiled/react/Spinner";
-import Button from "cozy-ui/transpiled/react/deprecated/Button";
 import FileImageLoader from "cozy-ui/transpiled/react/FileImageLoader";
-import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/hoc/withViewerLocales";
 import DownloadButton from "cozy-ui/transpiled/react/Viewer/NoViewer/DownloadButton";
 import NoViewer from "cozy-ui/transpiled/react/Viewer/NoViewer";
 var styles = {
@@ -28,6 +24,9 @@ var styles = {
   "viewer-pdfMobile": "styles__viewer-pdfMobile___25FPg",
   "viewer-pdfMobile--image": "styles__viewer-pdfMobile--image___3gpFL"
 };
+import { FileDoctype } from "cozy-ui/transpiled/react/proptypes";
+import { useAlert } from "cozy-ui/transpiled/react/providers/Alert";
+import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/hoc/withViewerLocales";
 export var PdfMobileViewer = function PdfMobileViewer(_ref) {
   var file = _ref.file,
       url = _ref.url,
@@ -45,6 +44,10 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
       setError = _useState4[1];
 
   var imgRef = useRef(null);
+
+  var _useAlert = useAlert(),
+      showAlert = _useAlert.showAlert;
+
   var client = useClient();
 
   var onImageError = function onImageError() {
@@ -56,7 +59,7 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
     setLoading(false);
   };
 
-  var onFileOpen = /*#__PURE__*/function () {
+  var handleOnClick = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -64,7 +67,7 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
             case 0:
               _context.prev = 0;
               _context.next = 3;
-              return openFileWith(client, file);
+              return client.collection('io.cozy.files').download(file);
 
             case 3:
               _context.next = 8;
@@ -73,8 +76,11 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
             case 5:
               _context.prev = 5;
               _context.t0 = _context["catch"](0);
-              Alerter.info("Viewer.error.".concat(_context.t0), {
-                fileMime: file.mime
+              showAlert({
+                message: t('Viewer.error.generic'),
+                severity: 'error',
+                variant: 'filled',
+                icon: false
               });
 
             case 8:
@@ -85,43 +91,30 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
       }, _callee, null, [[0, 5]]);
     }));
 
-    return function onFileOpen(_x) {
+    return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }();
-
-  var handleOnClick = function handleOnClick(file) {
-    !isMobileApp() && client.collection('io.cozy.files').download(file);
-  };
-
+  }(), [client, showAlert, t]);
   useEffect(function () {
-    if (gestures && isMobileApp()) {
+    if (gestures) {
       gestures.get('pinch').set({
         enable: true
       });
-      gestures.on('tap doubletap pinchend', function (e) {
-        if (e.target === imgRef.current) {
-          onFileOpen(file);
+      gestures.on('pinchend tap', function (evt) {
+        if (evt.tapCount === 1) {
+          handleOnClick(file);
         }
       });
       return function () {
-        gestures.off('tap doubletap pinchend');
+        gestures.off('pinchend tap');
       };
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [gestures]);
+    }
+  }, [client, gestures, file, handleOnClick]);
 
   if (error) {
     return /*#__PURE__*/React.createElement(NoViewer, {
       file: file,
-      renderFallbackExtraContent: isMobileApp() ? function (file) {
-        return /*#__PURE__*/React.createElement(Button, {
-          onClick: function onClick() {
-            return onFileOpen(file);
-          },
-          label: t('Viewer.openWith')
-        });
-      } : function (file) {
+      renderFallbackExtraContent: function renderFallbackExtraContent(file) {
         return /*#__PURE__*/React.createElement(DownloadButton, {
           file: file
         });
@@ -147,12 +140,14 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
         className: styles['viewer-pdfMobile--image'],
         alt: file.name,
         src: src,
-        onLoad: onImageLoad,
-        onClick: function onClick() {
-          return handleOnClick(file);
-        }
+        onLoad: onImageLoad
       });
     }
   }));
 };
+PdfMobileViewer.prototype = {
+  file: FileDoctype.isRequired,
+  url: PropTypes.string,
+  gestures: PropTypes.object
+};
 export default withViewerLocales(PdfMobileViewer);

package/transpiled/react/Viewer/hoc/withViewerLocales.js

@@ -16,9 +16,7 @@ var en = {
       },
       generic: "An error occurred when opening this file, please try again.",
       missing: "This file is missing",
-      network: "This file could not be loaded. Do you have a working internet connection right now?",
-      noapp: "No application on your device can open this file with mime type: %{fileMime} ",
-      offline: "You should be connected to open this file"
+      network: "This file could not be loaded. Do you have a working internet connection right now?"
     },
     goto: "Go to %{url}",
     next: "Next",
@@ -166,9 +164,7 @@ var fr = {
       },
       generic: "Une erreur s'est produite lors de l'ouverture de ce fichier, veuillez r\xE9essayer.",
       missing: "Le fichier est manquant",
-      network: "Ce fichier n'a pas pu \xEAtre charg\xE9. Avez-vous une connexion internet qui fonctionne actuellement ?",
-      noapp: "Aucune application de votre appareil ne peut ouvrir ce fichier avec le type mime : %{fileMime} ",
-      offline: "Vous devez \xEAtre connect\xE9 pour ouvrir ce fichier"
+      network: "Ce fichier n'a pas pu \xEAtre charg\xE9. Avez-vous une connexion internet qui fonctionne actuellement ?"
     },
     goto: "Ouvrir %{url}",
     next: "Suivante",

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;