cozy-ui 67.0.4 → 68.0.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# [68.0.0](https://github.com/cozy/cozy-ui/compare/v67.0.4...v68.0.0) (2022-05-24)
+
+
+### Bug Fixes
+
+* Warning of proptypes ([7b2c464](https://github.com/cozy/cozy-ui/commit/7b2c464))
+
+
+### Features
+
+* Add FooterActionButtons component ([1c3efc1](https://github.com/cozy/cozy-ui/commit/1c3efc1))
+* Refactor the viewer to let the app handle the action buttons ([60084d6](https://github.com/cozy/cozy-ui/commit/60084d6))
+
+
+### BREAKING CHANGES
+
+* The management of action buttons
+should now be handled on the application side
+via the `FooterActionButtons` component.
+The `disableSharing` prop has also been removed, as it is no longer needed.
+
+Example:
+```
+<Viewer {...props}>
+   <FooterActionButtons>
+      <SharingButton />
+      <ForwardOrDownloadButton />
+   </FooterActionButtons>
+</Viewer>
+```
+You can use a codemods `transform-viewer.js` to automatically handle this breaking change.
+[See the codemods documentation](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-codemods).
+Using linter js auto-correction can be a good idea after that.
+Here a common example (don't forget to change `src` value):
+```
+jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-viewer.js src --parser babel --extensions js,jsx && yarn lint:js --fix
+```
+
 ## [67.0.4](https://github.com/cozy/cozy-ui/compare/v67.0.3...v67.0.4) (2022-05-20)
 
 

package/package.json

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

package/react/Viewer/Footer/DownloadButton.jsx

@@ -31,7 +31,7 @@ const DownloadButton = ({ file, t }) => {
 }
 
 DownloadButton.propTypes = {
-  file: PropTypes.object.isRequired
+  file: PropTypes.object
 }
 
 export default withViewerLocales(DownloadButton)

package/react/Viewer/Footer/FooterActionButtons.jsx

@@ -0,0 +1,20 @@
+import { cloneElement } from 'react'
+import PropTypes from 'prop-types'
+
+import { mapToAllChildren } from './helpers'
+
+const FooterActionButtons = ({ children, file }) => {
+  if (!children) return null
+
+  return mapToAllChildren(children, child => cloneElement(child, { file }))
+}
+
+FooterActionButtons.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ]),
+  file: PropTypes.object
+}
+
+export default FooterActionButtons

package/react/Viewer/Footer/FooterActionButtons.spec.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import FooterActionButtons from './FooterActionButtons'
+
+describe('FooterActionButtons', () => {
+  it('should not return children', () => {
+    const { container } = render(<FooterActionButtons />)
+
+    expect(container).toMatchInlineSnapshot('<div />')
+  })
+
+  it('should render all childrens', () => {
+    const { getByText } = render(
+      <FooterActionButtons>
+        <div>
+          <p>First child</p>
+          <div>
+            <p>Sub first children</p>
+          </div>
+        </div>
+        <div>Second child</div>
+      </FooterActionButtons>
+    )
+
+    expect(getByText('First child'))
+    expect(getByText('Sub first children'))
+    expect(getByText('Second child'))
+  })
+})

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,22 +1,12 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, Children, cloneElement } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 
-import { getReferencedBy, useQuery, models, useClient } from 'cozy-client'
-
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 
-import { buildContactByIdsQuery } from '../queries'
 import { isValidForPanel } from '../helpers'
-import Sharing from './Sharing'
-import ForwardButton from './ForwardButton'
-import DownloadButton from './DownloadButton'
 import BottomSheetContent from './BottomSheetContent'
-import { shouldBeForwardButton } from './helpers'
-
-const {
-  contact: { getDisplayName }
-} = models
+import useReferencedContactName from './useReferencedContactName'
 
 const useStyles = makeStyles(theme => ({
   footer: {
@@ -30,54 +20,49 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const FooterContent = ({ file, toolbarRef, disableSharing }) => {
+const FooterContent = ({ file, toolbarRef, children }) => {
   const styles = useStyles()
-  const client = useClient()
-  const FileActionButton = shouldBeForwardButton(client)
-    ? ForwardButton
-    : DownloadButton
+
   const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
 
-  const contactIds = getReferencedBy(file, 'io.cozy.contacts').map(
-    ref => ref.id
-  )
-  const contactByIdsQuery = buildContactByIdsQuery(contactIds)
-  const { data: contactList } = useQuery(contactByIdsQuery.definition, {
-    ...contactByIdsQuery.options,
-    enabled: contactIds.length > 0
+  const { contactName, isLoadingContacts } = useReferencedContactName(file)
+
+  const FooterActionButtons = Children.toArray(children).find(child => {
+    return (
+      child.type.name === 'FooterActionButtons' ||
+      child.type.displayName === 'FooterActionButtons'
+    )
   })
 
-  const contactsFullname = Array.isArray(contactList)
-    ? contactList.map(contact => `${getDisplayName(contact)}`).join(', ')
-    : ''
+  const FooterActionButtonsWithFile = cloneElement(FooterActionButtons, {
+    file
+  })
 
-  if (
-    isValidForPanel({ file }) &&
-    (contactsFullname || contactIds.length === 0)
-  ) {
+  // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
+  if (isValidForPanel({ file }) && !isLoadingContacts) {
     return (
       <BottomSheet toolbarProps={toolbarProps}>
         <BottomSheetHeader className="u-ph-1 u-pb-1">
-          {!disableSharing && <Sharing file={file} />}
-          <FileActionButton file={file} />
+          {FooterActionButtonsWithFile}
         </BottomSheetHeader>
-        <BottomSheetContent file={file} contactsFullname={contactsFullname} />
+        <BottomSheetContent file={file} contactsFullname={contactName} />
       </BottomSheet>
     )
   }
 
-  return (
-    <div className={styles.footer}>
-      {!disableSharing && <Sharing file={file} />}
-      <FileActionButton file={file} />
-    </div>
-  )
+  // If `FooterActionButtons` hasn't children
+  if (!FooterActionButtons) return null
+
+  return <div className={styles.footer}>{FooterActionButtonsWithFile}</div>
 }
 
 FooterContent.propTypes = {
   file: PropTypes.object.isRequired,
   toolbarRef: PropTypes.object,
-  disableSharing: PropTypes.bool
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ])
 }
 
 export default FooterContent

package/react/Viewer/Footer/ForwardOrDownloadButton.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useClient } from 'cozy-client'
+
+import ForwardButton from './ForwardButton'
+import DownloadButton from './DownloadButton'
+import { shouldBeForwardButton } from './helpers'
+
+const ForwardOrDownloadButton = ({ file }) => {
+  const client = useClient()
+
+  const FileActionButton = shouldBeForwardButton(client)
+    ? ForwardButton
+    : DownloadButton
+
+  return <FileActionButton file={file} />
+}
+
+ForwardOrDownloadButton.propTypes = {
+  file: PropTypes.object
+}
+
+export default ForwardOrDownloadButton

package/react/Viewer/Footer/Sharing.jsx

@@ -37,7 +37,7 @@ const Sharing = ({ file }) => {
 }
 
 Sharing.propTypes = {
-  file: PropTypes.object.isRequired
+  file: PropTypes.object
 }
 
 export default Sharing

package/react/Viewer/Footer/helpers.js

@@ -1,3 +1,4 @@
+import { isValidElement, Children, cloneElement } from 'react'
 import { saveFileWithCordova } from 'cozy-client/dist/models/fsnative'
 import { isIOS, isMobileApp } from 'cozy-device-helper'
 
@@ -73,3 +74,18 @@ export const exportFilesNative = async (client, files, filename) => {
     Alerter.error(downloadFileError(error))
   }
 }
+
+export const mapToAllChildren = (children, cb) => {
+  return Children.map(children, child => {
+    if (!isValidElement(child)) return child
+
+    const grandchildren = child.props.children
+    if (grandchildren) {
+      return cloneElement(child, {
+        children: mapToAllChildren(grandchildren, cb)
+      })
+    }
+
+    return cb(child)
+  })
+}

package/react/Viewer/Footer/useReferencedContactName.jsx

@@ -0,0 +1,32 @@
+import { getReferencedBy, useQuery, models, isQueryLoading } from 'cozy-client'
+
+import { buildContactByIdsQuery } from '../queries'
+
+const {
+  contact: { getDisplayName }
+} = models
+
+const useReferencedContactName = file => {
+  const contactIds = getReferencedBy(file, 'io.cozy.contacts').map(
+    ref => ref.id
+  )
+  const contactByIdsQuery = buildContactByIdsQuery(contactIds)
+  const { data: contacts, ...contactsQueryResult } = useQuery(
+    contactByIdsQuery.definition,
+    {
+      ...contactByIdsQuery.options,
+      enabled: contactIds.length > 0
+    }
+  )
+
+  const isLoadingContacts =
+    isQueryLoading(contactsQueryResult) || contactsQueryResult.hasMore
+
+  const contactName =
+    contacts && contacts.length > 0
+      ? contacts.map(contact => `${getDisplayName(contact)}`).join(', ')
+      : ''
+
+  return { contactName, isLoadingContacts }
+}
+export default useReferencedContactName

package/react/Viewer/Footer.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
-import withBreakpoints from '../helpers/withBreakpoints'
+import useBreakpoints from '../hooks/useBreakpoints'
 
 import styles from './styles.styl'
 
-const Footer = ({ children, breakpoints: { isDesktop } }) => {
+const Footer = ({ children }) => {
+  const { isDesktop } = useBreakpoints()
+
   if (isDesktop) return null
   return <div className={styles['viewer-footer']}>{children}</div>
 }
 
-export default withBreakpoints()(Footer)
+export default Footer

package/react/Viewer/Readme.md

@@ -28,11 +28,14 @@ import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy';
 // The DemoProvider inserts a fake cozy-client in the React context.
 import DemoProvider from './docs/DemoProvider';
 import Overlay from 'cozy-ui/transpiled/react/Overlay';
-import Button from 'cozy-ui/transpiled/react/Button';
+import Button from 'cozy-ui/transpiled/react/Buttons';
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download';
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share';
 import { isValidForPanel } from 'cozy-ui/transpiled/react/Viewer/helpers';
 import getPanelBlocks, { panelBlocksSpecs } from 'cozy-ui/transpiled/react/Viewer/Panel/getPanelBlocks';
+import FooterActionButtons from 'cozy-ui/transpiled/react/Viewer/Footer/FooterActionButtons';
+import ForwardOrDownloadButton from 'cozy-ui/transpiled/react/Viewer/Footer/ForwardOrDownloadButton';
+
 
 // We provide a collection of (fake) io.cozy.files to be rendered
 const files = [
@@ -95,6 +98,20 @@ const files = [
   }
 ];
 
+const ShareButtonFake = () => {
+  return (
+    <Button
+      label="Share"
+      className="u-w-100 u-ml-0 u-mr-half"
+      variant="secondary"
+      startIcon={<Icon icon={ShareIcon} />}
+      onClick={() => {
+        return alert("This is a demo, there's no actual Cozy to share the file from ¯\\_(ツ)_/¯")
+      }}
+    />
+  )
+};
+
 // The host app will usually need a small wrapper to display the Viewer. This is a very small example of such a wrapper that handles opening, closing, and navigating between files.
 initialState = {
   viewerOpened: isTesting(),
@@ -136,7 +153,7 @@ const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, cu
               />
             </Card>
           )}
-          <button onClick={toggleViewer}>Open viewer</button>
+          <Button label="Open viewer" variant="ghost" size="small" onClick={toggleViewer} />
           {state.viewerOpened && (
             <Overlay>
               <Viewer
@@ -154,7 +171,12 @@ const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, cu
                   showToolbar: variant.toolbar,
                   showClose: state.showToolbarCloseButton
                 }}
-              />
+              >
+                <FooterActionButtons>
+                  <ShareButtonFake />
+                  <ForwardOrDownloadButton />
+                </FooterActionButtons>
+              </Viewer>
             </Overlay>
           )}
         </>

package/react/Viewer/ViewerContainer.jsx

@@ -12,13 +12,7 @@ import ViewerInformationsWrapper from './ViewerInformationsWrapper'
 import EncryptedProvider from './EncryptedProvider'
 
 const ViewerContainer = props => {
-  const {
-    className,
-    disableFooter,
-    disablePanel,
-    disableSharing,
-    ...rest
-  } = props
+  const { className, disableFooter, disablePanel, children, ...rest } = props
   const { currentIndex, files, currentURL } = props
   const toolbarRef = createRef()
   const { isDesktop } = useBreakpoints()
@@ -43,11 +37,12 @@ const ViewerContainer = props => {
       </EncryptedProvider>
       <ViewerInformationsWrapper
         disableFooter={disableFooter}
-        disableSharing={disableSharing}
         validForPanel={validForPanel}
         currentFile={currentFile}
         toolbarRef={toolbarRef}
-      />
+      >
+        {children}
+      </ViewerInformationsWrapper>
     </ViewerWrapper>
   )
 }
@@ -79,9 +74,7 @@ ViewerContainer.propTypes = {
   /** Show/Hide the panel containing more information about the file only on Desktop */
   disablePanel: PropTypes.bool,
   /** Show/Hide the panel containing more information about the file only on Phone & Tablet devices */
-  disableFooter: PropTypes.bool,
-  /** Show/Hide cozy share button  */
-  disableSharing: PropTypes.bool
+  disableFooter: PropTypes.bool
 }
 
 ViewerContainer.defaultProps = {

package/react/Viewer/ViewerInformationsWrapper.jsx

@@ -13,9 +13,9 @@ import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 const ViewerInformationsWrapper = ({
   currentFile,
   disableFooter,
-  disableSharing,
   validForPanel,
-  toolbarRef
+  toolbarRef,
+  children
 }) => {
   const theme = useTheme()
   const sidebar = document.querySelector('[class*="sidebar"]')
@@ -34,11 +34,9 @@ const ViewerInformationsWrapper = ({
     <>
       {!disableFooter && (
         <Footer>
-          <FooterContent
-            file={currentFile}
-            toolbarRef={toolbarRef}
-            disableSharing={disableSharing}
-          />
+          <FooterContent file={currentFile} toolbarRef={toolbarRef}>
+            {children}
+          </FooterContent>
         </Footer>
       )}
       {validForPanel && (
@@ -53,9 +51,12 @@ const ViewerInformationsWrapper = ({
 ViewerInformationsWrapper.propTypes = {
   currentFile: FileDoctype.isRequired,
   disableFooter: PropTypes.bool,
-  disableSharing: PropTypes.bool,
   validForPanel: PropTypes.bool,
-  toolbarRef: PropTypes.object
+  toolbarRef: PropTypes.object,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ])
 }
 
 export default ViewerInformationsWrapper

package/react/Viewer/ViewerInformationsWrapper.spec.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import ViewerInformationsWrapper from './ViewerInformationsWrapper'
+
+/* eslint-disable react/display-name */
+jest.mock('./Footer', () => ({ children }) => (
+  <div data-testid="Footer">{children}</div>
+))
+jest.mock('./InformationPanel', () => ({ children }) => (
+  <div data-testid="InformationPanel">{children}</div>
+))
+jest.mock('./Panel/PanelContent', () => () => (
+  <div data-testid="PanelContent" />
+))
+jest.mock('./Footer/FooterContent', () => () => (
+  <div data-testid="FooterContent" />
+))
+/* eslint-enable react/display-name */
+
+const setup = ({ validForPanel, disableFooter } = {}) => {
+  return render(
+    <ViewerInformationsWrapper
+      currentFile={{}}
+      disableFooter={disableFooter}
+      validForPanel={validForPanel}
+    />
+  )
+}
+
+describe('ViewerInformationsWrapper', () => {
+  describe('disableFooter', () => {
+    it('should render FooterContent components', () => {
+      const { getByTestId } = setup({ disableFooter: false })
+
+      expect(getByTestId('Footer'))
+      expect(getByTestId('FooterContent'))
+    })
+
+    it('should not render FooterContent components', () => {
+      const { queryByTestId } = setup({ disableFooter: true })
+
+      expect(queryByTestId('Footer')).toBeNull()
+      expect(queryByTestId('FooterContent')).toBeNull()
+    })
+  })
+
+  describe('validForPanel', () => {
+    it('should render InformationPanel & PanelContent components', () => {
+      const { getByTestId } = setup({ validForPanel: true })
+
+      expect(getByTestId('InformationPanel'))
+      expect(getByTestId('PanelContent'))
+    })
+
+    it('should not render InformationPanel & PanelContent components', () => {
+      const { queryByTestId } = setup({ validForPanel: false })
+
+      expect(queryByTestId('InformationPanel')).toBeNull()
+      expect(queryByTestId('PanelContent')).toBeNull()
+    })
+  })
+})

package/react/Viewer/helpers.js

@@ -27,6 +27,16 @@ export const isFromKonnector = ({ file }) => {
   return has(file, 'cozyMetadata.sourceAccount')
 }
 
+/**
+ * Checks if the file matches one of the following conditions:
+ * - Is certified
+ * - Is Qualified
+ * - From a Connector
+ *
+ * @param {object} param
+ * @param {IOCozyFile} param.file
+ * @returns {boolean}
+ */
 export const isValidForPanel = ({ file }) => {
   return (
     hasCertifications({ file }) ||

package/transpiled/react/Viewer/Footer/DownloadButton.js

@@ -57,6 +57,6 @@ var DownloadButton = function DownloadButton(_ref) {
 };
 
 DownloadButton.propTypes = {
-  file: PropTypes.object.isRequired
+  file: PropTypes.object
 };
 export default withViewerLocales(DownloadButton);

package/transpiled/react/Viewer/Footer/FooterActionButtons.js

@@ -0,0 +1,20 @@
+import { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { mapToAllChildren } from "cozy-ui/transpiled/react/Viewer/Footer/helpers";
+
+var FooterActionButtons = function FooterActionButtons(_ref) {
+  var children = _ref.children,
+      file = _ref.file;
+  if (!children) return null;
+  return mapToAllChildren(children, function (child) {
+    return /*#__PURE__*/cloneElement(child, {
+      file: file
+    });
+  });
+};
+
+FooterActionButtons.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  file: PropTypes.object
+};
+export default FooterActionButtons;

package/transpiled/react/Viewer/Footer/FooterContent.js

@@ -1,22 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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, { useMemo } from 'react';
+import React, { useMemo, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
-import { getReferencedBy, useQuery, models, useClient } from 'cozy-client';
 import BottomSheet, { BottomSheetHeader } from "cozy-ui/transpiled/react/BottomSheet";
-import { buildContactByIdsQuery } from "cozy-ui/transpiled/react/Viewer/queries";
 import { isValidForPanel } from "cozy-ui/transpiled/react/Viewer/helpers";
-import Sharing from "cozy-ui/transpiled/react/Viewer/Footer/Sharing";
-import ForwardButton from "cozy-ui/transpiled/react/Viewer/Footer/ForwardButton";
-import DownloadButton from "cozy-ui/transpiled/react/Viewer/Footer/DownloadButton";
 import BottomSheetContent from "cozy-ui/transpiled/react/Viewer/Footer/BottomSheetContent";
-import { shouldBeForwardButton } from "cozy-ui/transpiled/react/Viewer/Footer/helpers";
-var getDisplayName = models.contact.getDisplayName;
+import useReferencedContactName from "cozy-ui/transpiled/react/Viewer/Footer/useReferencedContactName";
 var useStyles = makeStyles(function (theme) {
   return {
     footer: {
@@ -34,58 +22,48 @@ var useStyles = makeStyles(function (theme) {
 var FooterContent = function FooterContent(_ref) {
   var file = _ref.file,
       toolbarRef = _ref.toolbarRef,
-      disableSharing = _ref.disableSharing;
+      children = _ref.children;
   var styles = useStyles();
-  var client = useClient();
-  var FileActionButton = shouldBeForwardButton(client) ? ForwardButton : DownloadButton;
   var toolbarProps = useMemo(function () {
     return {
       ref: toolbarRef
     };
   }, [toolbarRef]);
-  var contactIds = getReferencedBy(file, 'io.cozy.contacts').map(function (ref) {
-    return ref.id;
-  });
-  var contactByIdsQuery = buildContactByIdsQuery(contactIds);
 
-  var _useQuery = useQuery(contactByIdsQuery.definition, _objectSpread(_objectSpread({}, contactByIdsQuery.options), {}, {
-    enabled: contactIds.length > 0
-  })),
-      contactList = _useQuery.data;
+  var _useReferencedContact = useReferencedContactName(file),
+      contactName = _useReferencedContact.contactName,
+      isLoadingContacts = _useReferencedContact.isLoadingContacts;
 
-  var contactsFullname = Array.isArray(contactList) ? contactList.map(function (contact) {
-    return "".concat(getDisplayName(contact));
-  }).join(', ') : '';
+  var FooterActionButtons = Children.toArray(children).find(function (child) {
+    return child.type.name === 'FooterActionButtons' || child.type.displayName === 'FooterActionButtons';
+  });
+  var FooterActionButtonsWithFile = /*#__PURE__*/cloneElement(FooterActionButtons, {
+    file: file
+  }); // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
 
   if (isValidForPanel({
     file: file
-  }) && (contactsFullname || contactIds.length === 0)) {
+  }) && !isLoadingContacts) {
     return /*#__PURE__*/React.createElement(BottomSheet, {
       toolbarProps: toolbarProps
     }, /*#__PURE__*/React.createElement(BottomSheetHeader, {
       className: "u-ph-1 u-pb-1"
-    }, !disableSharing && /*#__PURE__*/React.createElement(Sharing, {
-      file: file
-    }), /*#__PURE__*/React.createElement(FileActionButton, {
-      file: file
-    })), /*#__PURE__*/React.createElement(BottomSheetContent, {
+    }, FooterActionButtonsWithFile), /*#__PURE__*/React.createElement(BottomSheetContent, {
       file: file,
-      contactsFullname: contactsFullname
+      contactsFullname: contactName
     }));
-  }
+  } // If `FooterActionButtons` hasn't children
+
 
+  if (!FooterActionButtons) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.footer
-  }, !disableSharing && /*#__PURE__*/React.createElement(Sharing, {
-    file: file
-  }), /*#__PURE__*/React.createElement(FileActionButton, {
-    file: file
-  }));
+  }, FooterActionButtonsWithFile);
 };
 
 FooterContent.propTypes = {
   file: PropTypes.object.isRequired,
   toolbarRef: PropTypes.object,
-  disableSharing: PropTypes.bool
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 };
 export default FooterContent;

package/transpiled/react/Viewer/Footer/ForwardOrDownloadButton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClient } from 'cozy-client';
+import ForwardButton from "cozy-ui/transpiled/react/Viewer/Footer/ForwardButton";
+import DownloadButton from "cozy-ui/transpiled/react/Viewer/Footer/DownloadButton";
+import { shouldBeForwardButton } from "cozy-ui/transpiled/react/Viewer/Footer/helpers";
+
+var ForwardOrDownloadButton = function ForwardOrDownloadButton(_ref) {
+  var file = _ref.file;
+  var client = useClient();
+  var FileActionButton = shouldBeForwardButton(client) ? ForwardButton : DownloadButton;
+  return /*#__PURE__*/React.createElement(FileActionButton, {
+    file: file
+  });
+};
+
+ForwardOrDownloadButton.propTypes = {
+  file: PropTypes.object
+};
+export default ForwardOrDownloadButton;

package/transpiled/react/Viewer/Footer/Sharing.js

@@ -37,6 +37,6 @@ var Sharing = function Sharing(_ref) {
 };
 
 Sharing.propTypes = {
-  file: PropTypes.object.isRequired
+  file: PropTypes.object
 };
 export default Sharing;

package/transpiled/react/Viewer/Footer/helpers.js

@@ -1,5 +1,6 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { isValidElement, Children, cloneElement } from 'react';
 import { saveFileWithCordova } from 'cozy-client/dist/models/fsnative';
 import { isIOS, isMobileApp } from 'cozy-device-helper';
 import Alerter from "cozy-ui/transpiled/react/Alerter";
@@ -121,4 +122,18 @@ export var exportFilesNative = /*#__PURE__*/function () {
   return function exportFilesNative(_x, _x2, _x3) {
     return _ref.apply(this, arguments);
   };
-}();
+}();
+export var mapToAllChildren = function mapToAllChildren(children, cb) {
+  return Children.map(children, function (child) {
+    if (! /*#__PURE__*/isValidElement(child)) return child;
+    var grandchildren = child.props.children;
+
+    if (grandchildren) {
+      return /*#__PURE__*/cloneElement(child, {
+        children: mapToAllChildren(grandchildren, cb)
+      });
+    }
+
+    return cb(child);
+  });
+};

package/transpiled/react/Viewer/Footer/useReferencedContactName.js

@@ -0,0 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["data"];
+
+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 { getReferencedBy, useQuery, models, isQueryLoading } from 'cozy-client';
+import { buildContactByIdsQuery } from "cozy-ui/transpiled/react/Viewer/queries";
+var getDisplayName = models.contact.getDisplayName;
+
+var useReferencedContactName = function useReferencedContactName(file) {
+  var contactIds = getReferencedBy(file, 'io.cozy.contacts').map(function (ref) {
+    return ref.id;
+  });
+  var contactByIdsQuery = buildContactByIdsQuery(contactIds);
+
+  var _useQuery = useQuery(contactByIdsQuery.definition, _objectSpread(_objectSpread({}, contactByIdsQuery.options), {}, {
+    enabled: contactIds.length > 0
+  })),
+      contacts = _useQuery.data,
+      contactsQueryResult = _objectWithoutProperties(_useQuery, _excluded);
+
+  var isLoadingContacts = isQueryLoading(contactsQueryResult) || contactsQueryResult.hasMore;
+  var contactName = contacts && contacts.length > 0 ? contacts.map(function (contact) {
+    return "".concat(getDisplayName(contact));
+  }).join(', ') : '';
+  return {
+    contactName: contactName,
+    isLoadingContacts: isLoadingContacts
+  };
+};
+
+export default useReferencedContactName;

package/transpiled/react/Viewer/Footer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import withBreakpoints from "cozy-ui/transpiled/react/helpers/withBreakpoints";
+import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
 var styles = {
   "CozyTheme--inverted": "styles__CozyTheme--inverted___1II8o",
   "CozyTheme--normal": "styles__CozyTheme--normal___382qj",
@@ -32,12 +32,15 @@ var styles = {
 };
 
 var Footer = function Footer(_ref) {
-  var children = _ref.children,
-      isDesktop = _ref.breakpoints.isDesktop;
+  var children = _ref.children;
+
+  var _useBreakpoints = useBreakpoints(),
+      isDesktop = _useBreakpoints.isDesktop;
+
   if (isDesktop) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: styles['viewer-footer']
   }, children);
 };
 
-export default withBreakpoints()(Footer);
+export default Footer;

package/transpiled/react/Viewer/ViewerContainer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "disableFooter", "disablePanel", "disableSharing"];
+var _excluded = ["className", "disableFooter", "disablePanel", "children"];
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
@@ -16,7 +16,7 @@ var ViewerContainer = function ViewerContainer(props) {
   var className = props.className,
       disableFooter = props.disableFooter,
       disablePanel = props.disablePanel,
-      disableSharing = props.disableSharing,
+      children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
   var currentIndex = props.currentIndex,
@@ -46,11 +46,10 @@ var ViewerContainer = function ViewerContainer(props) {
     toolbarRef: toolbarRef
   }))), /*#__PURE__*/React.createElement(ViewerInformationsWrapper, {
     disableFooter: disableFooter,
-    disableSharing: disableSharing,
     validForPanel: validForPanel,
     currentFile: currentFile,
     toolbarRef: toolbarRef
-  }));
+  }, children));
 };
 
 ViewerContainer.propTypes = {
@@ -90,10 +89,7 @@ ViewerContainer.propTypes = {
   disablePanel: PropTypes.bool,
 
   /** Show/Hide the panel containing more information about the file only on Phone & Tablet devices */
-  disableFooter: PropTypes.bool,
-
-  /** Show/Hide cozy share button  */
-  disableSharing: PropTypes.bool
+  disableFooter: PropTypes.bool
 };
 ViewerContainer.defaultProps = {
   currentIndex: 0,

package/transpiled/react/Viewer/ViewerInformationsWrapper.js

@@ -11,9 +11,9 @@ import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipU
 var ViewerInformationsWrapper = function ViewerInformationsWrapper(_ref) {
   var currentFile = _ref.currentFile,
       disableFooter = _ref.disableFooter,
-      disableSharing = _ref.disableSharing,
       validForPanel = _ref.validForPanel,
-      toolbarRef = _ref.toolbarRef;
+      toolbarRef = _ref.toolbarRef,
+      children = _ref.children;
   var theme = useTheme();
   var sidebar = document.querySelector('[class*="sidebar"]');
   useSetFlagshipUI({
@@ -24,9 +24,8 @@ var ViewerInformationsWrapper = function ViewerInformationsWrapper(_ref) {
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, !disableFooter && /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContent, {
     file: currentFile,
-    toolbarRef: toolbarRef,
-    disableSharing: disableSharing
-  })), validForPanel && /*#__PURE__*/React.createElement(InformationPanel, null, /*#__PURE__*/React.createElement(PanelContent, {
+    toolbarRef: toolbarRef
+  }, children)), validForPanel && /*#__PURE__*/React.createElement(InformationPanel, null, /*#__PURE__*/React.createElement(PanelContent, {
     file: currentFile
   })));
 };
@@ -34,8 +33,8 @@ var ViewerInformationsWrapper = function ViewerInformationsWrapper(_ref) {
 ViewerInformationsWrapper.propTypes = {
   currentFile: FileDoctype.isRequired,
   disableFooter: PropTypes.bool,
-  disableSharing: PropTypes.bool,
   validForPanel: PropTypes.bool,
-  toolbarRef: PropTypes.object
+  toolbarRef: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 };
 export default ViewerInformationsWrapper;

package/transpiled/react/Viewer/helpers.js

@@ -27,6 +27,17 @@ export var isFromKonnector = function isFromKonnector(_ref3) {
   var file = _ref3.file;
   return has(file, 'cozyMetadata.sourceAccount');
 };
+/**
+ * Checks if the file matches one of the following conditions:
+ * - Is certified
+ * - Is Qualified
+ * - From a Connector
+ *
+ * @param {object} param
+ * @param {IOCozyFile} param.file
+ * @returns {boolean}
+ */
+
 export var isValidForPanel = function isValidForPanel(_ref4) {
   var file = _ref4.file;
   return hasCertifications({