cozy-ui 110.4.0 → 110.5.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [110.5.0](https://github.com/cozy/cozy-ui/compare/v110.4.0...v110.5.0) (2024-07-04)
+
+
+### Features
+
+* **Backdrop:** Add `isOver` props ([67e6de7](https://github.com/cozy/cozy-ui/commit/67e6de7))
+* **Empty:** Add `componentsProps.icon/title/text/childrenContainer` props ([8d50ee6](https://github.com/cozy/cozy-ui/commit/8d50ee6))
+* **IntentDialogOpener:** Add `Component` prop to replace Dialog ([01a4499](https://github.com/cozy/cozy-ui/commit/01a4499))
+* **IntentIframe:** Add `iframeProps.setIsLoading` prop to wind it up ([bf0db3d](https://github.com/cozy/cozy-ui/commit/bf0db3d))
+* **IntentProvider:** Add provider to deal with intents ([b00b893](https://github.com/cozy/cozy-ui/commit/b00b893))
+* **Viewer:** Add BlankPaperViewer view and plug it to blank papers ([41ee4fe](https://github.com/cozy/cozy-ui/commit/41ee4fe))
+
 # [110.4.0](https://github.com/cozy/cozy-ui/compare/v110.3.0...v110.4.0) (2024-07-04)
 
 

package/package.json

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

package/react/Backdrop/index.js

@@ -1,3 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
 import MuiBackdrop from '@material-ui/core/Backdrop'
+import cx from 'classnames'
 
-export default MuiBackdrop
+import { makeStyles } from '../styles'
+
+const useStyles = makeStyles({
+  isOver: {
+    zIndex: 'calc(var(--zIndex-modal-toolbar) + 1)' // to be over a modal if used inside it
+  }
+})
+
+const Backdrop = ({ isOver, ...props }) => {
+  const styles = useStyles()
+
+  return (
+    <MuiBackdrop
+      {...props}
+      className={cx({ [styles.isOver]: isOver }, props.className)}
+    />
+  )
+}
+
+Backdrop.propTypes = {
+  /** Whether the Backdrop is over modal */
+  isOver: PropTypes.bool
+}
+
+export default Backdrop

package/react/Empty/index.jsx

@@ -15,6 +15,7 @@ export const Empty = ({
   children,
   className,
   centered,
+  componentsProps,
   ...restProps
 }) => {
   const isReactIconElement = typeof icon === 'object' && !!icon.props
@@ -38,7 +39,8 @@ export const Empty = ({
               },
               icon.props?.className
             ),
-            size: icon.props?.size || (icon.type === Icon ? '100%' : undefined)
+            size: icon.props?.size || (icon.type === Icon ? '100%' : undefined),
+            ...componentsProps?.icon
           })
         ) : (
           <Icon
@@ -47,15 +49,30 @@ export const Empty = ({
             })}
             icon={icon}
             size="100%"
+            {...componentsProps?.icon}
           />
         ))}
       {title && (
-        <Typography gutterBottom variant="h3" color="textPrimary">
+        <Typography
+          gutterBottom
+          variant="h3"
+          color="textPrimary"
+          {...componentsProps?.title}
+        >
           {title}
         </Typography>
       )}
-      {text && <EmptySubTitle gutterBottom>{text}</EmptySubTitle>}
-      <div className={styles['c-empty-text']}>{children}</div>
+      {text && (
+        <EmptySubTitle gutterBottom {...componentsProps?.text}>
+          {text}
+        </EmptySubTitle>
+      )}
+      <div
+        className={styles['c-empty-text']}
+        {...componentsProps?.childrenContainer}
+      >
+        {children}
+      </div>
     </div>
   )
 }
@@ -68,6 +85,12 @@ Empty.propTypes = {
   /** Sets horizontal and vertical centring. The reference element is that of a fixed position */
   centered: PropTypes.bool,
   children: PropTypes.node,
+  componentsProps: PropTypes.shape({
+    icon: PropTypes.object,
+    title: PropTypes.object,
+    text: PropTypes.object,
+    childrenContainer: PropTypes.object
+  }),
   className: PropTypes.string
 }
 

package/react/IntentDialogOpener/IntentDialogOpener.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
-import IntentIframe from '../IntentIframe'
+import IntentIframe, { iframeProps } from '../IntentIframe'
 import { DialogCloseButton } from '../CozyDialogs'
 import Dialog from '../Dialog'
 
@@ -22,7 +22,8 @@ const IntentDialogOpener = props => {
     onComplete,
     onDismiss,
     iframeProps,
-    ...dialogProps
+    Component,
+    ...componentProps
   } = props
   const [modalOpened, setModalOpened] = useState(false)
 
@@ -50,11 +51,11 @@ const IntentDialogOpener = props => {
 
   if (modalOpened) {
     elements.push(
-      <Dialog
+      <Component
         key="intent-modal"
         open={modalOpened}
         onClose={closable && handleDismiss}
-        {...dialogProps}
+        {...componentProps}
       >
         {closable && showCloseButton && (
           <DialogCloseButton onClick={handleDismiss} />
@@ -68,7 +69,7 @@ const IntentDialogOpener = props => {
           onTerminate={handleComplete}
           iframeProps={iframeProps}
         />
-      </Dialog>
+      </Component>
     )
   }
 
@@ -92,16 +93,16 @@ IntentDialogOpener.propTypes = {
   showCloseButton: PropTypes.bool.isRequired,
   /** Tag used to wrap children */
   tag: PropTypes.string.isRequired,
+  /** Component to be used instead of the dialog */
+  Component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /** Props to be passed to the iframe */
-  iframeProps: PropTypes.shape({
-    wrapperProps: PropTypes.object,
-    spinnerProps: PropTypes.object
-  })
+  iframeProps: iframeProps
 }
 
 IntentDialogOpener.defaultProps = {
   tag: 'span',
   closable: true,
+  Component: Dialog,
   showCloseButton: true
 }
 

package/react/IntentDialogOpener/IntentDialogOpener.md

@@ -1,32 +1,25 @@
 ```jsx
-import { withStyles } from 'cozy-ui/transpiled/react/styles'
 import IntentDialogOpener from 'cozy-ui/transpiled/react/IntentDialogOpener'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 
-const customStyles = () => ({
-  paper: {
-    height: '100%'
-  }
-})
-
-const StyledIntentDialogOpener = withStyles(customStyles)(IntentDialogOpener)
-
 ;
 
 <DemoProvider>
-  <StyledIntentDialogOpener
-    onComplete={res => alert('intent has completed ! ' + JSON.stringify(res))}
-    onDismiss={() => alert('intent has been dismissed !')}
+  <IntentDialogOpener
     action='OPEN'
     doctype='io.cozy.files'
     // you would not pass create normally as it defaults to
     // cozy.client.intents.create
     create={utils.fakeIntentCreate}
-    //extra props will be passed to the dialog
-    fullWidth
-    maxWidth="md"
+    classes={{ paper: 'u-h-100' }} // extra props will be passed to the dialog
+    fullWidth // extra props will be passed to the dialog
+    maxWidth="md" // extra props will be passed to the dialog
+    iframeProps={{ spinnerProps: { middle: true } }}
+    onComplete={res => alert('intent has completed ! ' + JSON.stringify(res))}
+    onDismiss={() => alert('intent has been dismissed !')}
   >
-    <button>Launch Intent OPEN for doctype io.cozy.files</button>
-  </StyledIntentDialogOpener>
+    <Button label="Launch Intent OPEN for doctype io.cozy.files" />
+  </IntentDialogOpener>
 </DemoProvider>
 ```

package/react/IntentIframe/IntentIframe.jsx

@@ -57,13 +57,15 @@ class IntentIframe extends React.Component {
         result ? onTerminate && onTerminate(result) : onCancel()
       })
       .catch(error => {
-        ;(onError && onError(error)) ||
-          this.setState({ error: error, loading: false })
+        onError?.(error)
+        this.setState({ error: error, loading: false })
+        this.props.iframeProps?.setIsLoading?.(false)
       })
   }
 
   onFrameLoaded = () => {
     this.setState({ loading: false })
+    this.props.iframeProps?.setIsLoading?.(false)
   }
 
   render() {
@@ -89,6 +91,12 @@ class IntentIframe extends React.Component {
   }
 }
 
+export const iframeProps = PropTypes.shape({
+  wrapperProps: PropTypes.object,
+  spinnerProps: PropTypes.object,
+  setIsLoading: PropTypes.func
+})
+
 IntentIframe.propTypes = {
   action: PropTypes.string.isRequired,
   create: PropTypes.func,
@@ -97,10 +105,7 @@ IntentIframe.propTypes = {
   onCancel: PropTypes.func,
   onError: PropTypes.func,
   onTerminate: PropTypes.func.isRequired,
-  iframeProps: PropTypes.shape({
-    wrapperProps: PropTypes.object,
-    spinnerProps: PropTypes.object
-  }),
+  iframeProps: iframeProps,
   onHideCross: PropTypes.func,
   onShowCross: PropTypes.func
 }

package/react/IntentIframe/index.js

@@ -1 +1 @@
-export { default } from './IntentIframe'
+export { default, iframeProps } from './IntentIframe'

package/react/Viewer/ViewersByFile/BlankPaperViewer.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+
+import Button from '../../Buttons'
+import Empty from '../../Empty'
+import Backdrop from '../../Backdrop'
+import IntentDialogOpener from '../../IntentDialogOpener'
+
+import IlluGenericNewPage from '../assets/IlluGenericNewPage.svg'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+import styles from './styles.styl'
+
+const BlankPaperViewer = ({ file, t }) => {
+  const [isLoading, setIsLoading] = useState(true)
+
+  return (
+    <div className={styles['viewer-noviewer']}>
+      <Empty
+        icon={<img src={IlluGenericNewPage} />}
+        text={t('Viewer.noImage')}
+        componentsProps={{
+          text: { color: 'inherit' }
+        }}
+      >
+        <IntentDialogOpener
+          action="OPEN"
+          doctype="io.cozy.files.paper"
+          Component={Backdrop}
+          invisible={!isLoading}
+          isOver
+          options={{
+            fileId: file._id,
+            qualificationLabel: file.metadata?.qualification?.label
+          }}
+          showCloseButton={false}
+          iframeProps={{
+            spinnerProps: { className: 'u-m-0', middle: true, color: 'white' },
+            setIsLoading
+          }}
+        >
+          <Button className="u-mt-1" label={t('Viewer.complete')} />
+        </IntentDialogOpener>
+      </Empty>
+    </div>
+  )
+}
+
+export default withViewerLocales(BlankPaperViewer)

package/react/Viewer/assets/IlluGenericNewPage.svg

@@ -0,0 +1,10 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H29.3333C30.8061 0 32 1.19391 32 2.66667C32 4.13943 30.8061 5.33333 29.3333 5.33333L5.33333 5.33333V29.3333C5.33333 30.8061 4.13943 32 2.66667 32C1.19391 32 0 30.8061 0 29.3333V4Z" fill="#B3D3FF"/>
+<path d="M0 124C0 126.209 1.79086 128 4 128H29.3333C30.8061 128 32 126.806 32 125.333C32 123.861 30.8061 122.667 29.3333 122.667H5.33333V98.6667C5.33333 97.1939 4.13943 96 2.66667 96C1.19391 96 0 97.1939 0 98.6667V124Z" fill="#B3D3FF"/>
+<path d="M124 0C126.209 0 128 1.79086 128 4V29.3333C128 30.8061 126.806 32 125.333 32C123.861 32 122.667 30.8061 122.667 29.3333V5.33333L98.6667 5.33333C97.1939 5.33333 96 4.13943 96 2.66667C96 1.19391 97.1939 0 98.6667 0H124Z" fill="#B3D3FF"/>
+<path d="M128 98.6667V124C128 126.209 126.209 128 124 128H98.6667C97.1939 128 96 126.806 96 125.333C96 123.861 97.1939 122.667 98.6667 122.667H122.667V98.6667C122.667 97.1939 123.861 96 125.333 96C126.806 96 128 97.1939 128 98.6667Z" fill="#B3D3FF"/>
+<path d="M30.0876 89.1458C29.5095 91.8804 29.0759 94.471 29.5095 96.9177C30.2322 101.236 33.7011 102.963 38.0372 103.97C39.9162 104.402 42.0842 104.69 43.8187 104.834C52.4909 105.841 67.0892 106.273 75.906 107.136C78.6522 107.568 81.3985 107.712 84.0001 107.856C85.1564 107.856 86.1682 107.856 87.18 107.856C88.1917 108 89.2035 108 90.2152 108C95.1295 108 96.7194 104.978 97.2976 100.948C97.4421 100.372 97.5867 99.7963 97.7312 99.0766C97.7312 98.7888 97.7312 98.357 97.7312 98.0692C97.7312 97.6374 97.7312 97.2056 97.8757 96.9178C98.4539 94.1832 98.8875 91.4486 99.3211 88.714C99.3211 88.4262 99.4657 87.9944 99.4657 87.7065C100.333 83.3888 103.657 64.8224 105.103 50.8617C106.114 45.6803 108.861 36.0373 103.224 33.0149C99.8993 31.2878 47.7212 26.8261 45.5532 26.6822C42.8069 26.5383 41.217 27.4018 40.3498 28.985C39.6271 29.7046 39.338 30.7121 39.049 32.0074C37.8927 35.3177 30.3767 82.5252 30.0876 89.1458Z" fill="#B3D3FF"/>
+<path d="M28.2551 88.6304C27.9636 91.3461 27.8178 93.9187 28.4008 96.3485C29.5668 100.493 33.3563 101.923 37.7287 102.351C39.7692 102.637 41.8097 102.637 43.5586 102.637C52.3035 102.78 64.2549 102.351 73.1456 102.351C75.9148 102.494 78.684 102.494 81.4532 102.209C82.6192 102.209 83.7852 102.209 84.6597 102.066C85.6799 102.066 86.7002 102.066 87.7204 101.923C92.6759 101.494 93.8418 98.2066 93.9876 94.3475C94.1333 93.6329 94.2791 93.0612 94.2791 92.2036C94.2791 91.9178 94.2791 91.489 94.1333 91.2031C94.1333 90.7743 94.1333 90.3456 94.2791 90.0597C94.5706 87.3441 94.7163 84.6285 94.8621 81.7699C94.8621 81.4841 94.8621 81.0553 94.8621 80.7694C95.2993 76.4816 96.7568 57.7581 96.7568 43.7512C97.1941 38.7487 98.943 28.8867 92.9674 26.4569C89.4694 25.0277 39.4777 25.3135 37.1457 25.4565C34.3765 25.5994 32.919 26.5999 32.0445 28.1721C31.4615 28.8867 31.17 30.0301 31.0243 31.3165C30.587 34.7467 27.6721 82.0558 28.2551 88.6304Z" fill="#297EF2"/>
+<path d="M27.3492 89.0204C27.4924 91.7375 27.7789 94.3116 28.6383 96.5997C30.3572 100.604 34.2245 101.462 38.5215 101.319C40.5268 101.319 42.5321 101.033 44.2509 100.747C52.8451 99.6028 61.7256 99.3168 70.3197 98.0298C73.0412 97.7437 75.7627 97.3147 78.3409 96.7427C79.4868 96.4567 80.4894 96.3137 81.3488 96.0277C82.3515 95.8847 83.3541 95.7417 84.2135 95.4557C88.9403 94.3116 89.6565 91.0225 89.2268 87.0183C89.2268 86.4463 89.2268 85.7313 89.2268 85.0163C89.2268 84.7303 89.0835 84.3013 88.9403 84.1582C88.9403 83.7292 88.9403 83.3002 88.7971 83.0142C88.6538 80.2971 88.5106 77.58 88.0809 74.7199C88.0809 74.4339 88.0809 74.0049 87.9377 73.7189C87.6512 69.4287 86.3621 50.695 84.3568 36.8235C84.0703 31.6753 84.3568 21.6649 78.1977 20.0919C74.6168 19.2338 28.6383 24.668 26.3466 25.0971C23.7683 25.6691 22.336 26.8131 21.9063 28.5292C21.3333 29.3872 21.3333 30.3882 21.3333 31.8183C21.763 35.2504 25.9169 82.5852 27.3492 89.0204Z" fill="#B3D3FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7958 40.7716C41.1805 40.1972 46.6011 39.6587 52.0218 39.1203L52.0219 39.1203C57.4425 38.5818 62.8631 38.0433 68.2478 37.469C70.5453 37.1818 70.2581 33.592 67.9606 33.8791C57.1911 34.8843 46.2781 36.033 35.5086 37.1818C33.0675 37.3254 33.4983 40.9152 35.7958 40.7716ZM46.5729 47.3879L46.5729 47.3879L46.5728 47.3879C45.1604 47.5673 42.7233 47.8769 36.9445 48.5256C34.647 48.8128 34.3598 45.2229 36.5137 44.9358C38.5044 44.6789 40.0867 44.4731 41.3642 44.3069L41.3643 44.3069C45.1248 43.8178 46.2448 43.6721 47.3691 43.5787C47.846 43.5391 48.3237 43.5089 49.004 43.4658L49.0041 43.4658C49.8302 43.4136 50.9549 43.3425 52.7397 43.2127C55.0372 43.0691 55.468 46.6589 53.1705 46.8025L52.6398 46.8411L52.6396 46.8411C49.8467 47.0441 48.947 47.1095 48.0509 47.2076C47.625 47.2542 47.2 47.3082 46.5729 47.3879ZM43.4879 55.3257L43.4882 55.3257L43.4883 55.3257L43.4883 55.3257L43.4883 55.3257L43.4883 55.3257L43.4883 55.3257C47.2575 55.0107 51.066 54.6925 54.7501 54.1257C57.0476 53.8386 56.6168 50.2487 54.3193 50.5359C51.2189 51.0129 48.0305 51.2698 44.8514 51.526C42.2884 51.7325 39.7315 51.9385 37.2318 52.259C34.7907 52.4026 35.3651 56.136 37.6625 55.8489C39.5784 55.6524 41.5278 55.4895 43.4879 55.3257ZM62.2168 67.1927C54.3192 67.6235 52.5961 67.7671 38.524 69.0594C36.2265 69.3466 35.9393 65.7568 38.2368 65.4696C48.7943 64.2208 52.531 64.0491 57.5355 63.819L57.5365 63.819C58.8619 63.7581 60.2762 63.6931 61.9296 63.6029C64.2271 63.4593 64.5143 67.0491 62.2168 67.1927ZM41.4373 81.1075L41.4371 81.1075L40.2472 81.2648C37.9497 81.552 38.3805 85.1418 40.678 84.8546C49.1809 83.987 51.0257 83.7484 53.1498 83.4738L53.1499 83.4738C54.5411 83.2939 56.0521 83.0985 59.6323 82.7007C61.9298 82.4135 61.6426 78.8237 59.2015 79.1109C50.3738 79.9258 48.0971 80.2268 41.4373 81.1075ZM38.8112 73.5108C49.5806 72.362 60.4937 71.2133 71.2632 70.2082C73.5607 69.921 73.9914 73.5108 71.5504 73.798C66.1656 74.3724 60.745 74.9108 55.3244 75.4493C49.9037 75.9878 44.4831 76.5262 39.0984 77.1006C36.8009 77.3878 36.5137 73.798 38.8112 73.5108Z" fill="#297EF2"/>
+</svg>

package/react/Viewer/components/ViewerByFile.jsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 
 import { isMobile as isMobileDevice } from 'cozy-device-helper'
-import { models } from 'cozy-client'
+import { isPlainText } from 'cozy-client/dist/models/file'
 
 import { FileDoctype } from '../../proptypes'
 import withBreakpoints from '../../helpers/withBreakpoints'
@@ -11,6 +11,7 @@ import ImageViewer from '../ViewersByFile/ImageViewer'
 import AudioViewer from '../ViewersByFile/AudioViewer'
 import VideoViewer from '../ViewersByFile/VideoViewer'
 import PdfJsViewer from '../ViewersByFile/PdfJsViewer'
+import BlankPaperViewer from '../ViewersByFile/BlankPaperViewer'
 import TextViewer from '../ViewersByFile/TextViewer'
 import PdfMobileViewer from '../ViewersByFile/PdfMobileViewer'
 import NoViewer from '../NoViewer'
@@ -19,7 +20,7 @@ import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer'
 
 import { useEncrypted } from '../providers/EncryptedProvider'
 
-const { isPlainText } = models.file
+const isBlankPaper = doc => doc.metadata?.paperProps?.isBlank
 
 export const getViewerComponentName = ({
   file,
@@ -36,7 +37,11 @@ export const getViewerComponentName = ({
     case 'video':
       return isMobileDevice() ? NoViewer : VideoViewer
     case 'pdf':
-      return isDesktop ? PdfJsViewer : PdfMobileViewer
+      return isBlankPaper(file)
+        ? BlankPaperViewer
+        : isDesktop
+        ? PdfJsViewer
+        : PdfMobileViewer
     case 'text':
       return isPlainText(file.mime, file.name)
         ? TextViewer

package/react/Viewer/locales/en.json

@@ -9,6 +9,8 @@
     },
     "close": "close",
     "download": "Download",
+    "complete": "Complete the document",
+    "noImage": "No image",
     "error": {
       "downloadFile": {
         "offline": "You should be connected to download this file"

package/react/Viewer/locales/fr.json

@@ -9,6 +9,8 @@
     },
     "close": "Fermer",
     "download": "Télécharger",
+    "complete": "Compléter le document",
+    "noImage": "Aucune image",
     "error": {
       "downloadFile": {
         "offline": "Vous devez être connecté pour télécharger ce fichier"

package/react/providers/Intent/index.jsx

@@ -0,0 +1,83 @@
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  createContext,
+  useContext
+} from 'react'
+
+import { useClient } from 'cozy-client'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import Backdrop from 'cozy-ui/transpiled/react/Backdrop'
+
+export const IntentContext = createContext()
+
+export const useIntent = () => {
+  const context = useContext(IntentContext)
+
+  if (!context) {
+    throw new Error('useIntent must be used within a IntentProvider')
+  }
+  return context
+}
+
+const IntentProvider = ({ intentId, componentsProps, children }) => {
+  const client = useClient()
+  const [state, setState] = useState({
+    service: null,
+    intent: null,
+    data: null
+  })
+
+  const value = useMemo(
+    () => ({
+      service: state.service,
+      intent: state.intent,
+      data: state.data
+    }),
+    [state]
+  )
+
+  useEffect(() => {
+    const startService = async () => {
+      let service
+
+      try {
+        service = await client.intents.createService(intentId, window)
+        const intent = service.getIntent()
+        const data = service.getData()
+
+        setState({
+          service,
+          intent,
+          data
+        })
+      } catch (error) {
+        service.throw(error)
+      }
+    }
+
+    if (!state.service) {
+      startService()
+    }
+  }, [client, intentId, state.service])
+
+  if (!state.service) {
+    return (
+      <Backdrop open {...componentsProps?.backdrop}>
+        <Spinner
+          className="u-m-0"
+          size="xxlarge"
+          middle
+          {...componentsProps?.spinner}
+        />
+      </Backdrop>
+    )
+  }
+
+  return (
+    <IntentContext.Provider value={value}>{children}</IntentContext.Provider>
+  )
+}
+
+export default IntentProvider

package/transpiled/react/Backdrop/index.js

@@ -1,2 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isOver"];
+import React from 'react';
+import PropTypes from 'prop-types';
 import MuiBackdrop from '@material-ui/core/Backdrop';
-export default MuiBackdrop;
+import cx from 'classnames';
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  isOver: {
+    zIndex: 'calc(var(--zIndex-modal-toolbar) + 1)' // to be over a modal if used inside it
+
+  }
+});
+
+var Backdrop = function Backdrop(_ref) {
+  var isOver = _ref.isOver,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(MuiBackdrop, _extends({}, props, {
+    className: cx(_defineProperty({}, styles.isOver, isOver), props.className)
+  }));
+};
+
+Backdrop.propTypes = {
+  /** Whether the Backdrop is over modal */
+  isOver: PropTypes.bool
+};
+export default Backdrop;

package/transpiled/react/Empty/index.js

@@ -1,7 +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 = ["icon", "iconSize", "title", "text", "children", "className", "centered"];
+var _excluded = ["icon", "iconSize", "title", "text", "children", "className", "centered", "componentsProps"];
+
+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 from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -26,27 +31,28 @@ export var Empty = function Empty(_ref) {
       children = _ref.children,
       className = _ref.className,
       centered = _ref.centered,
+      componentsProps = _ref.componentsProps,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var isReactIconElement = typeof icon === 'object' && !!icon.props;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles['c-empty'], _defineProperty({}, styles['c-empty--centered'], centered), className)
-  }, restProps), icon && (isReactIconElement ? /*#__PURE__*/React.cloneElement(icon, {
+  }, restProps), icon && (isReactIconElement ? /*#__PURE__*/React.cloneElement(icon, _objectSpread({
     className: cx(styles['c-empty-img'], _defineProperty({}, styles["c-empty-img--".concat(iconSize)], iconSize !== 'normal'), (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.className),
     size: ((_icon$props2 = icon.props) === null || _icon$props2 === void 0 ? void 0 : _icon$props2.size) || (icon.type === Icon ? '100%' : undefined)
-  }) : /*#__PURE__*/React.createElement(Icon, {
+  }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.icon)) : /*#__PURE__*/React.createElement(Icon, _extends({
     className: cx(styles['c-empty-img'], _defineProperty({}, styles["c-empty-img--".concat(iconSize)], iconSize !== 'normal')),
     icon: icon,
     size: "100%"
-  })), title && /*#__PURE__*/React.createElement(Typography, {
+  }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.icon))), title && /*#__PURE__*/React.createElement(Typography, _extends({
     gutterBottom: true,
     variant: "h3",
     color: "textPrimary"
-  }, title), text && /*#__PURE__*/React.createElement(EmptySubTitle, {
+  }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.title), title), text && /*#__PURE__*/React.createElement(EmptySubTitle, _extends({
     gutterBottom: true
-  }, text), /*#__PURE__*/React.createElement("div", {
+  }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.text), text), /*#__PURE__*/React.createElement("div", _extends({
     className: styles['c-empty-text']
-  }, children));
+  }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.childrenContainer), children));
 };
 Empty.propTypes = {
   icon: iconPropType,
@@ -57,6 +63,12 @@ Empty.propTypes = {
   /** Sets horizontal and vertical centring. The reference element is that of a fixed position */
   centered: PropTypes.bool,
   children: PropTypes.node,
+  componentsProps: PropTypes.shape({
+    icon: PropTypes.object,
+    title: PropTypes.object,
+    text: PropTypes.object,
+    childrenContainer: PropTypes.object
+  }),
   className: PropTypes.string
 };
 Empty.defaultProps = {

package/transpiled/react/IntentDialogOpener/IntentDialogOpener.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["options", "action", "doctype", "children", "closable", "showCloseButton", "create", "tag", "onComplete", "onDismiss", "iframeProps"];
+var _excluded = ["options", "action", "doctype", "children", "closable", "showCloseButton", "create", "tag", "onComplete", "onDismiss", "iframeProps", "Component"];
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import IntentIframe from "cozy-ui/transpiled/react/IntentIframe";
+import IntentIframe, { iframeProps } from "cozy-ui/transpiled/react/IntentIframe";
 import { DialogCloseButton } from "cozy-ui/transpiled/react/CozyDialogs";
 import Dialog from "cozy-ui/transpiled/react/Dialog";
 /**
@@ -24,7 +24,8 @@ var IntentDialogOpener = function IntentDialogOpener(props) {
       onComplete = props.onComplete,
       onDismiss = props.onDismiss,
       iframeProps = props.iframeProps,
-      dialogProps = _objectWithoutProperties(props, _excluded);
+      Component = props.Component,
+      componentProps = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -59,11 +60,11 @@ var IntentDialogOpener = function IntentDialogOpener(props) {
   })];
 
   if (modalOpened) {
-    elements.push( /*#__PURE__*/React.createElement(Dialog, _extends({
+    elements.push( /*#__PURE__*/React.createElement(Component, _extends({
       key: "intent-modal",
       open: modalOpened,
       onClose: closable && handleDismiss
-    }, dialogProps), closable && showCloseButton && /*#__PURE__*/React.createElement(DialogCloseButton, {
+    }, componentProps), closable && showCloseButton && /*#__PURE__*/React.createElement(DialogCloseButton, {
       onClick: handleDismiss
     }), /*#__PURE__*/React.createElement(IntentIframe, {
       action: action,
@@ -104,15 +105,16 @@ IntentDialogOpener.propTypes = {
   /** Tag used to wrap children */
   tag: PropTypes.string.isRequired,
 
+  /** Component to be used instead of the dialog */
+  Component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /** Props to be passed to the iframe */
-  iframeProps: PropTypes.shape({
-    wrapperProps: PropTypes.object,
-    spinnerProps: PropTypes.object
-  })
+  iframeProps: iframeProps
 };
 IntentDialogOpener.defaultProps = {
   tag: 'span',
   closable: true,
+  Component: Dialog,
   showCloseButton: true
 };
 export default IntentDialogOpener;

package/transpiled/react/IntentIframe/IntentIframe.js

@@ -54,9 +54,13 @@ var IntentIframe = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFrameLoaded", function () {
+      var _this$props$iframePro, _this$props$iframePro2;
+
       _this.setState({
         loading: false
       });
+
+      (_this$props$iframePro = _this.props.iframeProps) === null || _this$props$iframePro === void 0 ? void 0 : (_this$props$iframePro2 = _this$props$iframePro.setIsLoading) === null || _this$props$iframePro2 === void 0 ? void 0 : _this$props$iframePro2.call(_this$props$iframePro, false);
     });
 
     return _this;
@@ -94,11 +98,16 @@ var IntentIframe = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line promise/always-return
         result ? onTerminate && onTerminate(result) : onCancel();
       }).catch(function (error) {
-        ;
-        onError && onError(error) || _this2.setState({
+        var _this2$props$iframePr, _this2$props$iframePr2;
+
+        onError === null || onError === void 0 ? void 0 : onError(error);
+
+        _this2.setState({
           error: error,
           loading: false
         });
+
+        (_this2$props$iframePr = _this2.props.iframeProps) === null || _this2$props$iframePr === void 0 ? void 0 : (_this2$props$iframePr2 = _this2$props$iframePr.setIsLoading) === null || _this2$props$iframePr2 === void 0 ? void 0 : _this2$props$iframePr2.call(_this2$props$iframePr, false);
       });
     }
   }, {
@@ -127,6 +136,11 @@ var IntentIframe = /*#__PURE__*/function (_React$Component) {
   return IntentIframe;
 }(React.Component);
 
+export var iframeProps = PropTypes.shape({
+  wrapperProps: PropTypes.object,
+  spinnerProps: PropTypes.object,
+  setIsLoading: PropTypes.func
+});
 IntentIframe.propTypes = {
   action: PropTypes.string.isRequired,
   create: PropTypes.func,
@@ -135,10 +149,7 @@ IntentIframe.propTypes = {
   onCancel: PropTypes.func,
   onError: PropTypes.func,
   onTerminate: PropTypes.func.isRequired,
-  iframeProps: PropTypes.shape({
-    wrapperProps: PropTypes.object,
-    spinnerProps: PropTypes.object
-  }),
+  iframeProps: iframeProps,
   onHideCross: PropTypes.func,
   onShowCross: PropTypes.func
 };

package/transpiled/react/IntentIframe/index.js

@@ -1 +1 @@
-export { default } from './IntentIframe';
+export { default, iframeProps } from './IntentIframe';

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

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import Button from "cozy-ui/transpiled/react/Buttons";
+import Empty from "cozy-ui/transpiled/react/Empty";
+import Backdrop from "cozy-ui/transpiled/react/Backdrop";
+import IntentDialogOpener from "cozy-ui/transpiled/react/IntentDialogOpener";
+import IlluGenericNewPage from "cozy-ui/transpiled/react/Viewer/assets/IlluGenericNewPage.svg";
+import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/hoc/withViewerLocales";
+var styles = {
+  "viewer-imageviewer": "styles__viewer-imageviewer___26k0p",
+  "viewer-noviewer": "styles__viewer-noviewer___auG-6",
+  "viewer-audioviewer": "styles__viewer-audioviewer___1OQPB",
+  "viewer-videoviewer": "styles__viewer-videoviewer___NhFoe",
+  "viewer-pdfviewer": "styles__viewer-pdfviewer___1gTP9",
+  "viewer-textviewer": "styles__viewer-textviewer___3u5Zw",
+  "viewer-canceled": "styles__viewer-canceled___pOA_O",
+  "viewer-textviewer-content": "styles__viewer-textviewer-content___PB-c3",
+  "viewer-filename": "styles__viewer-filename___3jZCt",
+  "viewer-pdfviewer-pdf": "styles__viewer-pdfviewer-pdf___16ID9",
+  "viewer-pdfviewer-page": "styles__viewer-pdfviewer-page___2RPuw",
+  "viewer-pdfviewer-toolbar": "styles__viewer-pdfviewer-toolbar___3NXOk",
+  "viewer-pdfMobile": "styles__viewer-pdfMobile___25FPg",
+  "viewer-pdfMobile--image": "styles__viewer-pdfMobile--image___3gpFL"
+};
+
+var BlankPaperViewer = function BlankPaperViewer(_ref) {
+  var _file$metadata, _file$metadata$qualif;
+
+  var file = _ref.file,
+      t = _ref.t;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['viewer-noviewer']
+  }, /*#__PURE__*/React.createElement(Empty, {
+    icon: /*#__PURE__*/React.createElement("img", {
+      src: IlluGenericNewPage
+    }),
+    text: t('Viewer.noImage'),
+    componentsProps: {
+      text: {
+        color: 'inherit'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(IntentDialogOpener, {
+    action: "OPEN",
+    doctype: "io.cozy.files.paper",
+    Component: Backdrop,
+    invisible: !isLoading,
+    isOver: true,
+    options: {
+      fileId: file._id,
+      qualificationLabel: (_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : (_file$metadata$qualif = _file$metadata.qualification) === null || _file$metadata$qualif === void 0 ? void 0 : _file$metadata$qualif.label
+    },
+    showCloseButton: false,
+    iframeProps: {
+      spinnerProps: {
+        className: 'u-m-0',
+        middle: true,
+        color: 'white'
+      },
+      setIsLoading: setIsLoading
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "u-mt-1",
+    label: t('Viewer.complete')
+  }))));
+};
+
+export default withViewerLocales(BlankPaperViewer);

package/transpiled/react/Viewer/assets/IlluGenericNewPage.svg

@@ -0,0 +1,10 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H29.3333C30.8061 0 32 1.19391 32 2.66667C32 4.13943 30.8061 5.33333 29.3333 5.33333L5.33333 5.33333V29.3333C5.33333 30.8061 4.13943 32 2.66667 32C1.19391 32 0 30.8061 0 29.3333V4Z" fill="#B3D3FF"/>
+<path d="M0 124C0 126.209 1.79086 128 4 128H29.3333C30.8061 128 32 126.806 32 125.333C32 123.861 30.8061 122.667 29.3333 122.667H5.33333V98.6667C5.33333 97.1939 4.13943 96 2.66667 96C1.19391 96 0 97.1939 0 98.6667V124Z" fill="#B3D3FF"/>
+<path d="M124 0C126.209 0 128 1.79086 128 4V29.3333C128 30.8061 126.806 32 125.333 32C123.861 32 122.667 30.8061 122.667 29.3333V5.33333L98.6667 5.33333C97.1939 5.33333 96 4.13943 96 2.66667C96 1.19391 97.1939 0 98.6667 0H124Z" fill="#B3D3FF"/>
+<path d="M128 98.6667V124C128 126.209 126.209 128 124 128H98.6667C97.1939 128 96 126.806 96 125.333C96 123.861 97.1939 122.667 98.6667 122.667H122.667V98.6667C122.667 97.1939 123.861 96 125.333 96C126.806 96 128 97.1939 128 98.6667Z" fill="#B3D3FF"/>
+<path d="M30.0876 89.1458C29.5095 91.8804 29.0759 94.471 29.5095 96.9177C30.2322 101.236 33.7011 102.963 38.0372 103.97C39.9162 104.402 42.0842 104.69 43.8187 104.834C52.4909 105.841 67.0892 106.273 75.906 107.136C78.6522 107.568 81.3985 107.712 84.0001 107.856C85.1564 107.856 86.1682 107.856 87.18 107.856C88.1917 108 89.2035 108 90.2152 108C95.1295 108 96.7194 104.978 97.2976 100.948C97.4421 100.372 97.5867 99.7963 97.7312 99.0766C97.7312 98.7888 97.7312 98.357 97.7312 98.0692C97.7312 97.6374 97.7312 97.2056 97.8757 96.9178C98.4539 94.1832 98.8875 91.4486 99.3211 88.714C99.3211 88.4262 99.4657 87.9944 99.4657 87.7065C100.333 83.3888 103.657 64.8224 105.103 50.8617C106.114 45.6803 108.861 36.0373 103.224 33.0149C99.8993 31.2878 47.7212 26.8261 45.5532 26.6822C42.8069 26.5383 41.217 27.4018 40.3498 28.985C39.6271 29.7046 39.338 30.7121 39.049 32.0074C37.8927 35.3177 30.3767 82.5252 30.0876 89.1458Z" fill="#B3D3FF"/>
+<path d="M28.2551 88.6304C27.9636 91.3461 27.8178 93.9187 28.4008 96.3485C29.5668 100.493 33.3563 101.923 37.7287 102.351C39.7692 102.637 41.8097 102.637 43.5586 102.637C52.3035 102.78 64.2549 102.351 73.1456 102.351C75.9148 102.494 78.684 102.494 81.4532 102.209C82.6192 102.209 83.7852 102.209 84.6597 102.066C85.6799 102.066 86.7002 102.066 87.7204 101.923C92.6759 101.494 93.8418 98.2066 93.9876 94.3475C94.1333 93.6329 94.2791 93.0612 94.2791 92.2036C94.2791 91.9178 94.2791 91.489 94.1333 91.2031C94.1333 90.7743 94.1333 90.3456 94.2791 90.0597C94.5706 87.3441 94.7163 84.6285 94.8621 81.7699C94.8621 81.4841 94.8621 81.0553 94.8621 80.7694C95.2993 76.4816 96.7568 57.7581 96.7568 43.7512C97.1941 38.7487 98.943 28.8867 92.9674 26.4569C89.4694 25.0277 39.4777 25.3135 37.1457 25.4565C34.3765 25.5994 32.919 26.5999 32.0445 28.1721C31.4615 28.8867 31.17 30.0301 31.0243 31.3165C30.587 34.7467 27.6721 82.0558 28.2551 88.6304Z" fill="#297EF2"/>
+<path d="M27.3492 89.0204C27.4924 91.7375 27.7789 94.3116 28.6383 96.5997C30.3572 100.604 34.2245 101.462 38.5215 101.319C40.5268 101.319 42.5321 101.033 44.2509 100.747C52.8451 99.6028 61.7256 99.3168 70.3197 98.0298C73.0412 97.7437 75.7627 97.3147 78.3409 96.7427C79.4868 96.4567 80.4894 96.3137 81.3488 96.0277C82.3515 95.8847 83.3541 95.7417 84.2135 95.4557C88.9403 94.3116 89.6565 91.0225 89.2268 87.0183C89.2268 86.4463 89.2268 85.7313 89.2268 85.0163C89.2268 84.7303 89.0835 84.3013 88.9403 84.1582C88.9403 83.7292 88.9403 83.3002 88.7971 83.0142C88.6538 80.2971 88.5106 77.58 88.0809 74.7199C88.0809 74.4339 88.0809 74.0049 87.9377 73.7189C87.6512 69.4287 86.3621 50.695 84.3568 36.8235C84.0703 31.6753 84.3568 21.6649 78.1977 20.0919C74.6168 19.2338 28.6383 24.668 26.3466 25.0971C23.7683 25.6691 22.336 26.8131 21.9063 28.5292C21.3333 29.3872 21.3333 30.3882 21.3333 31.8183C21.763 35.2504 25.9169 82.5852 27.3492 89.0204Z" fill="#B3D3FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7958 40.7716C41.1805 40.1972 46.6011 39.6587 52.0218 39.1203L52.0219 39.1203C57.4425 38.5818 62.8631 38.0433 68.2478 37.469C70.5453 37.1818 70.2581 33.592 67.9606 33.8791C57.1911 34.8843 46.2781 36.033 35.5086 37.1818C33.0675 37.3254 33.4983 40.9152 35.7958 40.7716ZM46.5729 47.3879L46.5729 47.3879L46.5728 47.3879C45.1604 47.5673 42.7233 47.8769 36.9445 48.5256C34.647 48.8128 34.3598 45.2229 36.5137 44.9358C38.5044 44.6789 40.0867 44.4731 41.3642 44.3069L41.3643 44.3069C45.1248 43.8178 46.2448 43.6721 47.3691 43.5787C47.846 43.5391 48.3237 43.5089 49.004 43.4658L49.0041 43.4658C49.8302 43.4136 50.9549 43.3425 52.7397 43.2127C55.0372 43.0691 55.468 46.6589 53.1705 46.8025L52.6398 46.8411L52.6396 46.8411C49.8467 47.0441 48.947 47.1095 48.0509 47.2076C47.625 47.2542 47.2 47.3082 46.5729 47.3879ZM43.4879 55.3257L43.4882 55.3257L43.4883 55.3257L43.4883 55.3257L43.4883 55.3257L43.4883 55.3257L43.4883 55.3257C47.2575 55.0107 51.066 54.6925 54.7501 54.1257C57.0476 53.8386 56.6168 50.2487 54.3193 50.5359C51.2189 51.0129 48.0305 51.2698 44.8514 51.526C42.2884 51.7325 39.7315 51.9385 37.2318 52.259C34.7907 52.4026 35.3651 56.136 37.6625 55.8489C39.5784 55.6524 41.5278 55.4895 43.4879 55.3257ZM62.2168 67.1927C54.3192 67.6235 52.5961 67.7671 38.524 69.0594C36.2265 69.3466 35.9393 65.7568 38.2368 65.4696C48.7943 64.2208 52.531 64.0491 57.5355 63.819L57.5365 63.819C58.8619 63.7581 60.2762 63.6931 61.9296 63.6029C64.2271 63.4593 64.5143 67.0491 62.2168 67.1927ZM41.4373 81.1075L41.4371 81.1075L40.2472 81.2648C37.9497 81.552 38.3805 85.1418 40.678 84.8546C49.1809 83.987 51.0257 83.7484 53.1498 83.4738L53.1499 83.4738C54.5411 83.2939 56.0521 83.0985 59.6323 82.7007C61.9298 82.4135 61.6426 78.8237 59.2015 79.1109C50.3738 79.9258 48.0971 80.2268 41.4373 81.1075ZM38.8112 73.5108C49.5806 72.362 60.4937 71.2133 71.2632 70.2082C73.5607 69.921 73.9914 73.5108 71.5504 73.798C66.1656 74.3724 60.745 74.9108 55.3244 75.4493C49.9037 75.9878 44.4831 76.5262 39.0984 77.1006C36.8009 77.3878 36.5137 73.798 38.8112 73.5108Z" fill="#297EF2"/>
+</svg>

package/transpiled/react/Viewer/components/ViewerByFile.js

@@ -1,20 +1,27 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isMobile as isMobileDevice } from 'cozy-device-helper';
-import { models } from 'cozy-client';
+import { isPlainText } from 'cozy-client/dist/models/file';
 import { FileDoctype } from "cozy-ui/transpiled/react/proptypes";
 import withBreakpoints from "cozy-ui/transpiled/react/helpers/withBreakpoints";
 import ImageViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/ImageViewer";
 import AudioViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/AudioViewer";
 import VideoViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/VideoViewer";
 import PdfJsViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/PdfJsViewer";
+import BlankPaperViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/BlankPaperViewer";
 import TextViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/TextViewer";
 import PdfMobileViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/PdfMobileViewer";
 import NoViewer from "cozy-ui/transpiled/react/Viewer/NoViewer";
 import ShortcutViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/ShortcutViewer";
 import OnlyOfficeViewer from "cozy-ui/transpiled/react/Viewer/ViewersByFile/OnlyOfficeViewer";
 import { useEncrypted } from "cozy-ui/transpiled/react/Viewer/providers/EncryptedProvider";
-var isPlainText = models.file.isPlainText;
+
+var isBlankPaper = function isBlankPaper(doc) {
+  var _doc$metadata, _doc$metadata$paperPr;
+
+  return (_doc$metadata = doc.metadata) === null || _doc$metadata === void 0 ? void 0 : (_doc$metadata$paperPr = _doc$metadata.paperProps) === null || _doc$metadata$paperPr === void 0 ? void 0 : _doc$metadata$paperPr.isBlank;
+};
+
 export var getViewerComponentName = function getViewerComponentName(_ref) {
   var file = _ref.file,
       isDesktop = _ref.isDesktop,
@@ -34,7 +41,7 @@ export var getViewerComponentName = function getViewerComponentName(_ref) {
       return isMobileDevice() ? NoViewer : VideoViewer;
 
     case 'pdf':
-      return isDesktop ? PdfJsViewer : PdfMobileViewer;
+      return isBlankPaper(file) ? BlankPaperViewer : isDesktop ? PdfJsViewer : PdfMobileViewer;
 
     case 'text':
       return isPlainText(file.mime, file.name) ? TextViewer : isOnlyOfficeEnabled ? OnlyOfficeViewer : NoViewer;

package/transpiled/react/Viewer/locales/index.js

@@ -9,6 +9,8 @@ var en = {
     },
     close: "close",
     download: "Download",
+    complete: "Complete the document",
+    noImage: "No image",
     error: {
       downloadFile: {
         offline: "You should be connected to download this file"
@@ -73,6 +75,8 @@ var fr = {
     },
     close: "Fermer",
     download: "T\xE9l\xE9charger",
+    complete: "Compl\xE9ter le document",
+    noImage: "Aucune image",
     error: {
       downloadFile: {
         offline: "Vous devez \xEAtre connect\xE9 pour t\xE9l\xE9charger ce fichier"

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

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useMemo, useState, createContext, useContext } from 'react';
+import { useClient } from 'cozy-client';
+import Spinner from 'cozy-ui/transpiled/react/Spinner';
+import Backdrop from 'cozy-ui/transpiled/react/Backdrop';
+export var IntentContext = /*#__PURE__*/createContext();
+export var useIntent = function useIntent() {
+  var context = useContext(IntentContext);
+
+  if (!context) {
+    throw new Error('useIntent must be used within a IntentProvider');
+  }
+
+  return context;
+};
+
+var IntentProvider = function IntentProvider(_ref) {
+  var intentId = _ref.intentId,
+      componentsProps = _ref.componentsProps,
+      children = _ref.children;
+  var client = useClient();
+
+  var _useState = useState({
+    service: null,
+    intent: null,
+    data: null
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var value = useMemo(function () {
+    return {
+      service: state.service,
+      intent: state.intent,
+      data: state.data
+    };
+  }, [state]);
+  useEffect(function () {
+    var startService = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var service, intent, data;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return client.intents.createService(intentId, window);
+
+              case 3:
+                service = _context.sent;
+                intent = service.getIntent();
+                data = service.getData();
+                setState({
+                  service: service,
+                  intent: intent,
+                  data: data
+                });
+                _context.next = 12;
+                break;
+
+              case 9:
+                _context.prev = 9;
+                _context.t0 = _context["catch"](0);
+                service.throw(_context.t0);
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 9]]);
+      }));
+
+      return function startService() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    if (!state.service) {
+      startService();
+    }
+  }, [client, intentId, state.service]);
+
+  if (!state.service) {
+    return /*#__PURE__*/React.createElement(Backdrop, _extends({
+      open: true
+    }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.backdrop), /*#__PURE__*/React.createElement(Spinner, _extends({
+      className: "u-m-0",
+      size: "xxlarge",
+      middle: true
+    }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.spinner)));
+  }
+
+  return /*#__PURE__*/React.createElement(IntentContext.Provider, {
+    value: value
+  }, children);
+};
+
+export default IntentProvider;