cozy-viewer 26.5.1 → 26.6.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [26.6.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@26.5.2...cozy-viewer@26.6.0) (2026-01-28)
+
+### Features
+
+- Implement new UI of file viewer :sparkles: ([23ab4b2](https://github.com/cozy/cozy-libs/commit/23ab4b2c2859a8115d94dabbd30594fea00358e9))
+
+## [26.5.2](https://github.com/cozy/cozy-libs/compare/cozy-viewer@26.5.1...cozy-viewer@26.5.2) (2026-01-26)
+
+**Note:** Version bump only for package cozy-viewer
+
 ## [26.5.1](https://github.com/cozy/cozy-libs/compare/cozy-viewer@26.5.0...cozy-viewer@26.5.1) (2026-01-16)
 
 ### Bug Fixes

package/dist/Panel/AI/AIAssistantPanel.js

@@ -364,17 +364,15 @@ var AIAssistantPanel = function AIAssistantPanel(_ref) {
     className: "u-flex u-flex-items-center u-flex-justify-between u-h-3 u-ph-1 u-flex-shrink-0"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "h4"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icon: _Assistant.default
-  }), " ", t('Viewer.ai.panelTitle')), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }, t('Viewer.ai.panelTitle')), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-label": "Close AI Assistant",
     onClick: handleClose
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _CrossMedium.default
   }))), !isLoading && /*#__PURE__*/_react.default.createElement(_Stack.default, {
     spacing: "s",
-    className: "u-ph-1"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-p-1"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "u-flex u-flex-items-center u-flex-justify-between u-mb-1"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subtitle1"
@@ -382,12 +380,14 @@ var AIAssistantPanel = function AIAssistantPanel(_ref) {
     className: "u-flex"
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     size: "small",
-    onClick: handleRefresh
+    onClick: handleRefresh,
+    "aria-label": "Refresh"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _Refresh.default
   })), summary && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     size: "small",
-    onClick: handleCopy
+    onClick: handleCopy,
+    "aria-label": "Copy"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _Copy.default
   })))), /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -399,7 +399,7 @@ var AIAssistantPanel = function AIAssistantPanel(_ref) {
   }, error) : summary), !isLoading && summary && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "caption",
     color: "textSecondary"
-  }, t('Viewer.ai.footerText'))))), isLoading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, t('Viewer.ai.footerText')))), isLoading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: styles.loaderContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: styles.loaderBar

package/dist/Panel/ActionMenuDesktop.js

@@ -31,7 +31,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var styles = {
   "ActionMenuDesktop-ActionMenu": "styles__ActionMenuDesktop-ActionMenu___xxTwZ",
-  "ActionMenuDesktop-ActionMenu-link-disabled": "styles__ActionMenuDesktop-ActionMenu-link-disabled___93DWz"
+  "ActionMenuDesktop-ActionMenu-link-disabled": "styles__ActionMenuDesktop-ActionMenu-link-disabled___93DWz",
+  "Summary": "styles__Summary___3hpX6",
+  "Summary-Header": "styles__Summary-Header___3Q0T6"
 };
 var ActionMenuDesktop = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var actions = _ref.actions,

package/dist/Panel/PanelContent.js

@@ -11,10 +11,24 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactRouterDom = require("react-router-dom");
+
+var _twakeI18n = require("twake-i18n");
+
+var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _CrossMedium = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CrossMedium"));
+
 var _Paper = _interopRequireDefault(require("cozy-ui/transpiled/react/Paper"));
 
 var _Stack = _interopRequireDefault(require("cozy-ui/transpiled/react/Stack"));
 
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
 var _getPanelBlocks = _interopRequireWildcard(require("./getPanelBlocks"));
 
 var _withViewerLocales = require("../hoc/withViewerLocales");
@@ -30,16 +44,41 @@ var PanelContent = function PanelContent() {
       file = _useViewer.file,
       isPublic = _useViewer.isPublic,
       componentsProps = _useViewer.componentsProps,
-      isReadOnly = _useViewer.isReadOnly;
+      isReadOnly = _useViewer.isReadOnly,
+      setIsOpenFileViewerPanel = _useViewer.setIsOpenFileViewerPanel;
+
+  var _useI18n = (0, _twakeI18n.useI18n)(),
+      t = _useI18n.t;
 
+  var navigate = (0, _reactRouterDom.useNavigate)();
   var panelBlocks = (0, _getPanelBlocks.default)({
     panelBlocksSpecs: (0, _getPanelBlocks.getPanelBlocksSpecs)(isPublic, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.panel),
     file: file
   });
+
+  var closePanel = function closePanel() {
+    setIsOpenFileViewerPanel(false);
+    navigate('', {
+      state: {
+        showDetailPanel: false
+      }
+    });
+  };
+
   return /*#__PURE__*/_react.default.createElement(_Stack.default, {
     spacing: "s",
     className: (0, _classnames.default)('u-flex u-flex-column u-h-100')
-  }, panelBlocks.map(function (PanelBlock, index) {
+  }, (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    square: true,
+    className: "u-flex u-flex-items-center u-flex-justify-between u-h-3 u-ph-1 u-flex-shrink-0"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "h4"
+  }, t('Viewer.panel.header')), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-label": t('Viewer.close'),
+    onClick: closePanel
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _CrossMedium.default
+  }))), panelBlocks.map(function (PanelBlock, index) {
     return /*#__PURE__*/_react.default.createElement(_Paper.default, {
       key: index,
       className: (0, _classnames.default)({

package/dist/Panel/Qualifications/QualificationListItemText.js

@@ -28,9 +28,9 @@ var QualificationListItemText = function QualificationListItemText(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ListItemText.default, (0, _extends2.default)({}, props, {
     disableTypography: true,
-    primary: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    primary: primary ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
       variant: "caption"
-    }, primary),
+    }, primary) : null,
     secondary: /*#__PURE__*/_react.default.createElement(_Typography.default, {
       component: "div",
       variant: "body1",

package/dist/Panel/Sharing.js

@@ -11,8 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+
 var _cozySharing = require("cozy-sharing");
 
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _Right = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Right"));
@@ -51,13 +55,17 @@ var Sharing = function Sharing(_ref) {
 
   var _isOwner = isOwner(file._id);
 
+  var showModal = function showModal() {
+    if (!(0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled')) {
+      setShowShareModal(true);
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     size: "large",
     divider: true,
-    button: true,
-    onClick: function onClick() {
-      return setShowShareModal(true);
-    }
+    button: !(0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled'),
+    onClick: showModal
   }, /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
     primary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t('Viewer.panel.sharing'), !allLoaded && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
       className: "u-ml-half",
@@ -66,7 +74,7 @@ var Sharing = function Sharing(_ref) {
     primaryTypographyProps: {
       variant: 'h6'
     }
-  }), /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }), !(0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _Right.default,
     color: "var(--secondaryTextColor)"
   }))), /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(_cozySharing.LinkRecipientLite, {
@@ -78,7 +86,13 @@ var Sharing = function Sharing(_ref) {
       recipient: recipient,
       isOwner: _isOwner
     });
-  }) : /*#__PURE__*/_react.default.createElement(_cozySharing.OwnerRecipientDefaultLite, null)));
+  }) : /*#__PURE__*/_react.default.createElement(_cozySharing.OwnerRecipientDefaultLite, null), (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    variant: "secondary",
+    label: t('Viewer.panel.manage_access'),
+    onClick: function onClick() {
+      return setShowShareModal(true);
+    }
+  }))));
 };
 
 Sharing.propTypes = {

package/dist/Panel/Summary.js

@@ -13,10 +13,20 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+
+var _Accordion = _interopRequireDefault(require("cozy-ui/transpiled/react/Accordion"));
+
+var _AccordionDetails = _interopRequireDefault(require("cozy-ui/transpiled/react/AccordionDetails"));
+
+var _AccordionSummary = _interopRequireDefault(require("cozy-ui/transpiled/react/AccordionSummary"));
+
 var _ActionsMenu = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu"));
 
 var _Actions = require("cozy-ui/transpiled/react/ActionsMenu/Actions");
@@ -27,6 +37,8 @@ var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
 
+var _Bottom = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Bottom"));
+
 var _Dots = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Dots"));
 
 var _Right = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Right"));
@@ -43,18 +55,29 @@ var _ListItemSecondaryAction = _interopRequireDefault(require("cozy-ui/transpile
 
 var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
 
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
 var _Alert = require("cozy-ui/transpiled/react/providers/Alert");
 
 var _QualificationListItemText = _interopRequireDefault(require("./Qualifications/QualificationListItemText"));
 
 var _SummaryDialog = _interopRequireDefault(require("./SummaryDialog"));
 
+var _actions = require("../actions");
+
 var _withViewerLocales = require("../hoc/withViewerLocales");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var styles = {
+  "ActionMenuDesktop-ActionMenu": "styles__ActionMenuDesktop-ActionMenu___xxTwZ",
+  "ActionMenuDesktop-ActionMenu-link-disabled": "styles__ActionMenuDesktop-ActionMenu-link-disabled___93DWz",
+  "Summary": "styles__Summary___3hpX6",
+  "Summary-Header": "styles__Summary-Header___3Q0T6"
+};
+
 var Summary = function Summary(_ref) {
   var _file$metadata;
 
@@ -72,6 +95,11 @@ var Summary = function Summary(_ref) {
       showMenu = _useState4[0],
       setShowMenu = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isExpanded = _useState6[0],
+      setIsExpanded = _useState6[1];
+
   var anchorRef = (0, _react.useRef)();
 
   var _useAlert = (0, _Alert.useAlert)(),
@@ -79,7 +107,18 @@ var Summary = function Summary(_ref) {
 
   var label = t('Viewer.panel.summary');
   var value = (_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : _file$metadata.description;
-  var actions = (0, _Actions.makeActions)([_Actions.copyToClipboard, !isReadOnly && _Actions.editAttribute]);
+  var actions = (0, _Actions.makeActions)([_Actions.copyToClipboard, !isReadOnly && _Actions.editAttribute, (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && _Actions.divider, (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && _Actions.exportToText, (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && _Actions.divider, (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && _actions.shorter, (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') && _actions.expand], {
+    t: t,
+    exportedText: value,
+    makeShorter: function makeShorter() {
+      return setIsExpanded(false);
+    },
+    makeLonger: function makeLonger() {
+      return setIsExpanded(true);
+    },
+    isExpanded: isExpanded,
+    file: file
+  });
 
   var handleClick = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -126,7 +165,55 @@ var Summary = function Summary(_ref) {
     };
   }();
 
-  return /*#__PURE__*/_react.default.createElement(_List.default, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+  return /*#__PURE__*/_react.default.createElement(_List.default, null, (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') ? /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    elevation: 0,
+    className: (0, _classnames.default)('u-mb-0 u-bdw-0 u-w-100', styles.Summary),
+    expanded: isExpanded
+  }, /*#__PURE__*/_react.default.createElement(_AccordionSummary.default, {
+    className: (0, _classnames.default)('u-bg-transparent u-m-0', styles['Summary-Header']),
+    expandIcon: null
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "caption",
+    className: "u-mb-0"
+  }, label), value ? /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-label": t('Viewer.panel.more_menu'),
+    size: "small",
+    ref: anchorRef,
+    onClick: function onClick() {
+      return setShowMenu(function (v) {
+        return !v;
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Dots.default
+  })), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-label": t('Viewer.panel.collapse'),
+    size: "small",
+    onClick: function onClick() {
+      return setIsExpanded(function (v) {
+        return !v;
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Bottom.default,
+    rotate: isExpanded ? 180 : 0
+  }))) : !isReadOnly && /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "small",
+    onClick: function onClick() {
+      return setShowModal(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Right.default,
+    color: "var(--secondaryTextColor)"
+  })))), /*#__PURE__*/_react.default.createElement(_AccordionDetails.default, null, /*#__PURE__*/_react.default.createElement(_QualificationListItemText.default, {
+    className: "u-pv-1",
+    style: {
+      wordBreak: 'break-word'
+    },
+    secondary: value || label,
+    disabled: !value,
+    onClick: handleClick
+  })))) : /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     button: !isReadOnly,
     onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {

package/dist/Panel/SummaryDialog.js

@@ -21,6 +21,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _cozyClient = require("cozy-client");
 
+var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+
 var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
 
 var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
@@ -86,11 +88,11 @@ var SummaryDialog = function SummaryDialog(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_CozyDialogs.ConfirmDialog, {
     open: true,
-    title: t('Viewer.panel.summary'),
+    title: t('Viewer.panel.edit_summary'),
     content: /*#__PURE__*/_react.default.createElement(_TextField.default, {
       multiline: true,
       value: value,
-      rows: 4,
+      rows: (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') ? 10 : 4,
       autoFocus: true,
       fullWidth: true,
       required: true,
@@ -110,7 +112,8 @@ var SummaryDialog = function SummaryDialog(_ref) {
       busy: busy,
       onClick: handleSubmit
     })),
-    onClose: onClose
+    onClose: onClose,
+    size: (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') ? 'large' : 'medium'
   });
 };
 

package/dist/Panel/getPanelBlocks.js

@@ -9,6 +9,8 @@ exports.getPanelBlocksSpecs = exports.default = void 0;
 
 var _file = require("cozy-client/dist/models/file");
 
+var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+
 var _KonnectorBlock = _interopRequireDefault(require("cozy-harvest-lib/dist/components/KonnectorBlock"));
 
 var _Antivirus = _interopRequireDefault(require("./Antivirus"));
@@ -39,7 +41,7 @@ var _Summary = _interopRequireDefault(require("./Summary"));
 var getPanelBlocksSpecs = function getPanelBlocksSpecs() {
   var isPublic = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var panelProps = arguments.length > 1 ? arguments[1] : undefined;
-  return {
+  return (0, _cozyFlags.default)('drive.new-file-viewer-ui.enabled') ? {
     antivirus: {
       condition: function condition() {
         var _panelProps$antivirus;
@@ -48,13 +50,13 @@ var getPanelBlocksSpecs = function getPanelBlocksSpecs() {
       },
       component: _Antivirus.default
     },
-    qualifications: {
+    sharing: {
       condition: function condition() {
-        var _panelProps$qualifica;
+        var _panelProps$sharing;
 
-        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$qualifica = panelProps.qualifications) !== null && _panelProps$qualifica !== void 0 && _panelProps$qualifica.disabled);
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$sharing = panelProps.sharing) !== null && _panelProps$sharing !== void 0 && _panelProps$sharing.disabled) && !isPublic;
       },
-      component: _Qualification.default
+      component: _Sharing.default
     },
     summary: {
       condition: function condition() {
@@ -80,11 +82,60 @@ var getPanelBlocksSpecs = function getPanelBlocksSpecs() {
       },
       component: _Informations.default
     },
+    qualifications: {
+      condition: function condition() {
+        var _panelProps$qualifica;
+
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$qualifica = panelProps.qualifications) !== null && _panelProps$qualifica !== void 0 && _panelProps$qualifica.disabled);
+      },
+      component: _Qualification.default
+    }
+  } : {
+    antivirus: {
+      condition: function condition() {
+        var _panelProps$antivirus2;
+
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$antivirus2 = panelProps.antivirus) !== null && _panelProps$antivirus2 !== void 0 && _panelProps$antivirus2.disabled);
+      },
+      component: _Antivirus.default
+    },
+    qualifications: {
+      condition: function condition() {
+        var _panelProps$qualifica2;
+
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$qualifica2 = panelProps.qualifications) !== null && _panelProps$qualifica2 !== void 0 && _panelProps$qualifica2.disabled);
+      },
+      component: _Qualification.default
+    },
+    summary: {
+      condition: function condition() {
+        var _panelProps$summary2;
+
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$summary2 = panelProps.summary) !== null && _panelProps$summary2 !== void 0 && _panelProps$summary2.disabled);
+      },
+      component: _Summary.default
+    },
+    konnector: {
+      condition: function condition(file) {
+        var _panelProps$konnector2;
+
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$konnector2 = panelProps.konnector) !== null && _panelProps$konnector2 !== void 0 && _panelProps$konnector2.disabled) && (0, _file.isFromKonnector)(file) && !isPublic;
+      },
+      component: _KonnectorBlock.default
+    },
+    informations: {
+      condition: function condition() {
+        var _panelProps$informati2;
+
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$informati2 = panelProps.informations) !== null && _panelProps$informati2 !== void 0 && _panelProps$informati2.disabled);
+      },
+      component: _Informations.default
+    },
     sharing: {
       condition: function condition() {
-        var _panelProps$sharing;
+        var _panelProps$sharing2;
 
-        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$sharing = panelProps.sharing) !== null && _panelProps$sharing !== void 0 && _panelProps$sharing.disabled) && !isPublic;
+        return !(panelProps !== null && panelProps !== void 0 && (_panelProps$sharing2 = panelProps.sharing) !== null && _panelProps$sharing2 !== void 0 && _panelProps$sharing2.disabled) && !isPublic;
       },
       component: _Sharing.default
     }

package/dist/Viewer.d.ts

@@ -1,15 +1,5 @@
 export default Viewer;
-declare class Viewer extends React.Component<any, any, any> {
-    constructor();
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    onKeyUp: (e: any) => void;
-    onNext: () => void;
-    onPrevious: () => void;
-    onClose: () => void;
-    onChange(nextFile: any, nextIndex: any): void;
-    render(): JSX.Element;
-}
+declare function Viewer(props: any): JSX.Element;
 declare namespace Viewer {
     namespace propTypes {
         let hasNext: PropTypes.Requireable<boolean>;
@@ -37,5 +27,4 @@ declare namespace Viewer {
         }>>;
     }
 }
-import React from 'react';
 import PropTypes from 'prop-types';

package/dist/Viewer.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -31,6 +33,8 @@ var _ViewerControls = _interopRequireDefault(require("./components/ViewerControl
 
 var _proptypes = require("./proptypes");
 
+var _ViewerProvider = require("./providers/ViewerProvider");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -47,15 +51,15 @@ var KEY_CODE_LEFT = 37;
 var KEY_CODE_RIGHT = 39;
 var KEY_CODE_ESCAPE = 27;
 
-var Viewer = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Viewer, _Component);
+var ViewerClassComp = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ViewerClassComp, _Component);
 
-  var _super = _createSuper(Viewer);
+  var _super = _createSuper(ViewerClassComp);
 
-  function Viewer() {
+  function ViewerClassComp() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, Viewer);
+    (0, _classCallCheck2.default)(this, ViewerClassComp);
     _this = _super.call(this);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyUp", function (e) {
       if (e.keyCode === KEY_CODE_LEFT) _this.onPrevious();else if (e.keyCode === KEY_CODE_RIGHT) _this.onNext();else if (e.keyCode === KEY_CODE_ESCAPE) _this.onClose();
@@ -96,7 +100,7 @@ var Viewer = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(Viewer, [{
+  (0, _createClass2.default)(ViewerClassComp, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       document.addEventListener('keyup', this.onKeyUp, false);
@@ -124,7 +128,9 @@ var Viewer = /*#__PURE__*/function (_Component) {
           renderFallbackExtraContent = _this$props3.renderFallbackExtraContent,
           validForPanel = _this$props3.validForPanel,
           children = _this$props3.children,
-          componentsProps = _this$props3.componentsProps;
+          componentsProps = _this$props3.componentsProps,
+          viewer = _this$props3.viewer;
+      var isOpenFileViewerPanel = viewer.isOpenFileViewerPanel;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ViewerControls.default, {
         hasPrevious: hasPrevious,
         hasNext: hasNext,
@@ -135,7 +141,8 @@ var Viewer = /*#__PURE__*/function (_Component) {
         showInfoPanel: validForPanel,
         onPrevious: this.onPrevious,
         onNext: this.onNext,
-        onClose: this.onClose
+        onClose: this.onClose,
+        fullWidth: !isOpenFileViewerPanel
       }, children, /*#__PURE__*/_react.default.createElement(_ViewerByFile.default, {
         renderFallbackExtraContent: renderFallbackExtraContent,
         componentsProps: componentsProps,
@@ -143,9 +150,16 @@ var Viewer = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-  return Viewer;
+  return ViewerClassComp;
 }(_react.Component);
 
+var Viewer = function Viewer(props) {
+  var viewer = (0, _ViewerProvider.useViewer)();
+  return /*#__PURE__*/_react.default.createElement(ViewerClassComp, (0, _extends2.default)({}, props, {
+    viewer: viewer
+  }));
+};
+
 Viewer.propTypes = {
   hasNext: _propTypes.default.bool,
   hasPrevious: _propTypes.default.bool,

package/dist/ViewerInformationsWrapper.js

@@ -47,27 +47,33 @@ var ViewerInformationsWrapper = function ViewerInformationsWrapper(_ref) {
 
   var _useViewer = (0, _ViewerProvider.useViewer)(),
       isOpenAiAssistant = _useViewer.isOpenAiAssistant,
+      isOpenFileViewerPanel = _useViewer.isOpenFileViewerPanel,
+      setIsOpenFileViewerPanel = _useViewer.setIsOpenFileViewerPanel,
       setIsOpenAiAssistant = _useViewer.setIsOpenAiAssistant;
 
   var sidebar = document.querySelector('[class*="sidebar"]');
   var location = (0, _reactRouterDom.useLocation)();
   (0, _react.useEffect)(function () {
-    var _location$state;
+    var _location$state, _location$state2;
 
     if (location !== null && location !== void 0 && (_location$state = location.state) !== null && _location$state !== void 0 && _location$state.showAIAssistant) {
       setIsOpenAiAssistant(true);
     }
-  }, [location, setIsOpenAiAssistant]);
+
+    if (location !== null && location !== void 0 && (_location$state2 = location.state) !== null && _location$state2 !== void 0 && _location$state2.showDetailPanel) {
+      setIsOpenFileViewerPanel(true);
+    }
+  }, [location, setIsOpenAiAssistant, setIsOpenFileViewerPanel]);
   (0, _useSetFlagshipUI.useSetFlagshipUI)({
     bottomBackground: theme.palette.background.paper,
     bottomTheme: isLight ? 'dark' : 'light'
   }, {
     bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper']
   });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpenAiAssistant ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !disableFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_FooterContent.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpenAiAssistant && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !disableFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_FooterContent.default, {
     toolbarRef: toolbarRef,
     isDisplayChildrenDirectly: true
-  }, /*#__PURE__*/_react.default.createElement(_AIAssistantPanel.default, null))), validForPanel && /*#__PURE__*/_react.default.createElement(_InformationPanel.default, null, /*#__PURE__*/_react.default.createElement(_AIAssistantPanel.default, null))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !disableFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_FooterContent.default, {
+  }, /*#__PURE__*/_react.default.createElement(_AIAssistantPanel.default, null))), validForPanel && /*#__PURE__*/_react.default.createElement(_InformationPanel.default, null, /*#__PURE__*/_react.default.createElement(_AIAssistantPanel.default, null))), isOpenFileViewerPanel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !disableFooter && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_FooterContent.default, {
     toolbarRef: toolbarRef
   }, children)), validForPanel && /*#__PURE__*/_react.default.createElement(_InformationPanel.default, null, /*#__PURE__*/_react.default.createElement(_PanelContent.default, null))));
 };