@manuscripts/style-guide 0.30.23 → 0.30.26

package/dist/es/components/FileManager/FileManager.js

@@ -19,50 +19,32 @@ import { actions, getInitialState, reducer } from './FileSectionState';
 import { FilesSection } from './FilesSection';
 import { InlineFilesSection } from './InlineFilesSection';
 import { TooltipDiv } from './TooltipDiv';
-import { Designation, designationWithFileSectionsMap, FileSectionType, generateExternalFilesTitles, namesWithDesignationMap, sortExternalFiles, } from './util';
+import { Designation, designationWithFileSectionsMap, FileSectionType, generateAttachmentsTitles, namesWithDesignationMap, } from './util';
 export const PermissionsContext = createContext(null);
-export const FileManager = ({ submissionId, externalFiles, modelMap, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
+export const FileManager = ({ submissionId, attachments, modelMap, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
     const [state, dispatch] = useReducer(reducer, getInitialState());
-    const handleReplaceFile = useCallback((submissionId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleReplaceFile = useCallback((submissionId, attachmentId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(actions.HANDLE_UPLOAD_ACTION());
         dispatch(actions.SELECT_DESIGNATION(namesWithDesignationMap.get(typeId) || Designation.Document));
-        const res = yield handleReplace(submissionId, name, file, typeId);
-        if (res) {
-            dispatch(actions.SHOW_FILE_UPLOADED_ALERT());
-        }
+        const res = yield handleReplace(submissionId, attachmentId, name, file, typeId);
         dispatch(actions.HANDLE_FINISH_UPLOAD());
         return res;
     }), [handleReplace]);
     const handleUploadFile = useCallback((submissionId, file, designation) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            dispatch(actions.HANDLE_UPLOAD_ACTION());
-            if (namesWithDesignationMap.get(designation) == Designation.Supplementary) {
-                dispatch(actions.SELECT_DESIGNATION(Designation.Supplementary));
-            }
-            const res = yield handleUpload(submissionId, file, designation);
-            if (res) {
-                dispatch(actions.SHOW_FILE_UPLOADED_ALERT());
-            }
-            dispatch(actions.HANDLE_FINISH_UPLOAD());
-            return res;
-        }
-        catch (e) {
-            console.error(e);
-            return false;
+        dispatch(actions.HANDLE_UPLOAD_ACTION());
+        if (namesWithDesignationMap.get(designation) == Designation.Supplementary) {
+            dispatch(actions.SELECT_DESIGNATION(Designation.Supplementary));
         }
+        const res = yield handleUpload(submissionId, file, designation);
+        dispatch(actions.HANDLE_FINISH_UPLOAD());
+        return res;
     }), [handleUpload]);
-    const handleChangeDesignationFile = useCallback((submissionId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            const res = yield handleChangeDesignation(submissionId, typeId, name);
-            if (res) {
-                dispatch(actions.HANDLE_SUCCESS_MESSAGE());
-            }
-            return res;
-        }
-        catch (e) {
-            console.log(e);
-            return false;
+    const handleChangeDesignationFile = useCallback((submissionId, attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
+        const res = yield handleChangeDesignation(submissionId, attachmentId, typeId, name);
+        if (res) {
+            dispatch(actions.HANDLE_SUCCESS_MESSAGE());
         }
+        return res;
     }), [handleChangeDesignation]);
     const handleDownloadFile = useCallback((publicUrl) => {
         return handleDownload(publicUrl);
@@ -70,12 +52,12 @@ export const FileManager = ({ submissionId, externalFiles, modelMap, enableDragA
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === FileSectionType.Supplements ||
             fileSection === FileSectionType.OtherFile;
-        const itemsData = externalFiles.filter((element) => {
-            const designation = namesWithDesignationMap.get(element.designation);
+        const itemsData = attachments.filter((element) => {
+            const designation = namesWithDesignationMap.get(element.type.label);
             return (designation !== undefined &&
                 designationWithFileSectionsMap.get(designation) === fileSection);
         });
-        const itemsDataWithTitle = generateExternalFilesTitles(sortExternalFiles(itemsData), fileSection);
+        const itemsDataWithTitle = generateAttachmentsTitles(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
             const itemProps = {
                 submissionId: submissionId,
@@ -89,10 +71,10 @@ export const FileManager = ({ submissionId, externalFiles, modelMap, enableDragA
                 dispatch: dispatch,
             };
             if (enableDragAndDrop && isSupplementOrOtherFilesTab) {
-                return (React.createElement(DraggableFileSectionItem, Object.assign({}, itemProps, { key: element.externalFile._id })));
+                return (React.createElement(DraggableFileSectionItem, Object.assign({}, itemProps, { key: element.externalFile.id })));
             }
             else {
-                return (React.createElement(FileSectionItem, Object.assign({}, itemProps, { key: element.externalFile._id, isEditor: enableDragAndDrop })));
+                return (React.createElement(FileSectionItem, Object.assign({}, itemProps, { key: element.externalFile.id, isEditor: enableDragAndDrop })));
             }
         });
         return filesItems;
@@ -123,7 +105,7 @@ export const FileManager = ({ submissionId, externalFiles, modelMap, enableDragA
                                 React.createElement("div", null, "Files excluded from the final submission.")))),
                     React.createElement(InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         React.createElement(InspectorTabPanel, null,
-                            React.createElement(InlineFilesSection, { modelMap: modelMap, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })),
+                            React.createElement(InlineFilesSection, { modelMap: modelMap, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,

package/dist/es/components/FileManager/FileSectionItem/DesignationActions.js

@@ -4,7 +4,7 @@ import BottomArrowIcon from '../../icons/BottomArrowIcon';
 import { ConfirmationPopUp } from '../ConfirmationPopUp';
 import { designationWithReadableNamesMap, getDesignationActionsList, } from '../util';
 import { DesignationActionsList } from './DesignationActionsList';
-export const DesignationActions = ({ designation, fileExtension, handleChangeDesignation, submissionId, fileName, dispatch, }) => {
+export const DesignationActions = ({ designation, attachmentId, fileExtension, handleChangeDesignation, submissionId, fileName, dispatch, }) => {
     const [isActionsShown, setIsActionsShown] = useState(false);
     const [confirmationPopUpData, setConfirmationPopUpData] = useState({
         isConfirmationPopUpOpen: false,
@@ -20,7 +20,7 @@ export const DesignationActions = ({ designation, fileExtension, handleChangeDes
     const hideActionsList = () => {
         setIsActionsShown(false);
     };
-    if (designation && fileExtension) {
+    if (designation !== undefined && fileExtension) {
         const designationActionsList = getDesignationActionsList(designation, fileExtension);
         if (!designationActionsList.length) {
             return null;
@@ -35,7 +35,7 @@ export const DesignationActions = ({ designation, fileExtension, handleChangeDes
         };
         const handleMoveAction = () => {
             handleChangeDesignation &&
-                handleChangeDesignation(submissionId, confirmationPopUpData.selectedDesignation, fileName);
+                handleChangeDesignation(submissionId, attachmentId, confirmationPopUpData.selectedDesignation, fileName);
             handleCloseAction();
         };
         const handleCloseAction = () => {
@@ -51,7 +51,7 @@ export const DesignationActions = ({ designation, fileExtension, handleChangeDes
                 React.createElement(SecondaryActionsText, null, designationWithReadableNamesMap.get(designation)),
                 React.createElement(BottomArrowIcon, null),
                 isActionsShown && (React.createElement(ActionsListContainer, null,
-                    React.createElement(DesignationActionsList, { handleChangeDesignation: handleChangeDesignation, designationActionsList: designationActionsList, submissionId: submissionId, fileName: fileName, designation: designation, dispatch: dispatch, handleOpenConfirmationPopup: handleOpenConfirmationPopup })))),
+                    React.createElement(DesignationActionsList, { handleChangeDesignation: handleChangeDesignation, designationActionsList: designationActionsList, submissionId: submissionId, fileName: fileName, designation: designation, attachmentId: attachmentId, dispatch: dispatch, handleOpenConfirmationPopup: handleOpenConfirmationPopup })))),
             confirmationPopUpData.isConfirmationPopUpOpen && (React.createElement(ConfirmationPopUp, { popupHeader: confirmationPopUpData.confirmationPopUpHeader !== undefined
                     ? confirmationPopUpData.confirmationPopUpHeader
                     : '', popUpMessage: confirmationPopUpData.confirmationPopUpMessage !== undefined

package/dist/es/components/FileManager/FileSectionItem/DesignationActionsList.js

@@ -2,17 +2,17 @@ import React from 'react';
 import { actions } from '../FileSectionState';
 import { ActionsBox, ActionsItem, ActionsLabel, ActionsSeparator, } from '../ItemsAction';
 import { Designation, designationWithFileSectionsMap, designationWithReadableNamesMap, FileSectionType, getDesignationName, } from '../util';
-export const DesignationActionsList = ({ handleChangeDesignation, designationActionsList, submissionId, fileName, designation, dispatch, handleOpenConfirmationPopup, }) => {
+export const DesignationActionsList = ({ handleChangeDesignation, designationActionsList, submissionId, fileName, designation, attachmentId, dispatch, handleOpenConfirmationPopup, }) => {
     const handleChangeOtherFilesTabDesignation = (designation, isMoveInOtherFileSection, confirmationPopupHeader, confirmationPopupMessage, successMoveMessage) => {
         if (isMoveInOtherFileSection) {
             if (dispatch) {
-                dispatch(actions.MOVE_FILE(submissionId, getDesignationName(designation), fileName, successMoveMessage));
+                dispatch(actions.MOVE_FILE(submissionId, attachmentId, getDesignationName(designation), fileName, successMoveMessage));
                 handleOpenConfirmationPopup(confirmationPopupHeader, confirmationPopupMessage, getDesignationName(designation));
             }
         }
         else {
             handleChangeDesignation &&
-                handleChangeDesignation(submissionId, getDesignationName(designation), fileName);
+                handleChangeDesignation(submissionId, attachmentId, getDesignationName(designation), fileName);
         }
     };
     const isSupplementaryActionIncluded = designationActionsList.indexOf(Designation.Supplementary) !== -1;
@@ -21,7 +21,7 @@ export const DesignationActionsList = ({ handleChangeDesignation, designationAct
         .map((value) => {
         return (React.createElement(ActionsItem, { key: value, onClick: () => {
                 let isMoveToOtherFileSection = true;
-                if (designation) {
+                if (designation !== undefined) {
                     isMoveToOtherFileSection =
                         designationWithFileSectionsMap.get(designation) !==
                             FileSectionType.OtherFile;
@@ -37,7 +37,7 @@ export const DesignationActionsList = ({ handleChangeDesignation, designationAct
             React.createElement(ActionsSeparator, null),
             React.createElement(ActionsItem, { onClick: () => {
                     let isMoveToOtherFileSection = true;
-                    if (designation) {
+                    if (designation !== undefined) {
                         isMoveToOtherFileSection =
                             designationWithFileSectionsMap.get(designation) !==
                                 FileSectionType.Supplements;

package/dist/es/components/FileManager/FileSectionItem/FileInfo.js

@@ -2,14 +2,14 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { PermissionsContext } from '../FileManager';
 import { DesignationActions } from './DesignationActions';
-export const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissionAttachmentName, fileExtension, designation, description, handleChangeDesignation, submissionId, dispatch, }) => {
+export const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissionAttachmentName, fileExtension, designation, attachmentId, handleChangeDesignation, submissionId, dispatch, }) => {
     const fileName = submissionAttachmentName.substring(0, submissionAttachmentName.lastIndexOf('.'));
     const can = useContext(PermissionsContext);
     return (React.createElement(FileInfoContainer, null,
         (can === null || can === void 0 ? void 0 : can.changeDesignation) &&
             showDesignationActions &&
-            designation &&
-            submissionId && (React.createElement(DesignationActions, { designation: designation, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, fileName: submissionAttachmentName, dispatch: dispatch })),
+            designation !== undefined &&
+            submissionId && (React.createElement(DesignationActions, { designation: designation, attachmentId: attachmentId, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, fileName: submissionAttachmentName, dispatch: dispatch })),
         React.createElement(FileNameTitleContainer, null,
             React.createElement(FileTitle, null,
                 !showAttachmentName ? fileName : title,
@@ -18,8 +18,7 @@ export const FileInfo = ({ showAttachmentName, showDesignationActions, title, su
                 React.createElement(FileName, null, fileName),
                 React.createElement("div", null,
                     ".",
-                    fileExtension)))),
-        description && React.createElement(FileDescription, null, description)));
+                    fileExtension))))));
 };
 export const FileInfoContainer = styled.div `
   margin-left: 8px;

package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js

@@ -10,20 +10,20 @@ import { FileTypeIcon } from './FileTypeIcon';
 import { ItemActions } from './ItemActions';
 export const FileSectionItem = ({ submissionId, externalFile, title, showAttachmentName = false, showDesignationActions = false, handleDownload, handleReplace, handleChangeDesignation, dispatch, dragRef, className, style, onClose, isEditor, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
-    const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
-    const designation = namesWithDesignationMap.get(externalFile.designation);
+    const fileExtension = externalFile.name.substring(externalFile.name.lastIndexOf('.') + 1);
+    const designation = namesWithDesignationMap.get(externalFile.type.label);
     const isMainManuscript = designation === Designation.MainManuscript;
-    const isSelected = externalFile._id == window.location.hash.substr(1);
+    const isSelected = externalFile.id == window.location.hash.substr(1);
     return (React.createElement(Item, { ref: dragRef, className: className, style: style },
         React.createElement(ItemContainer, { onClick: () => {
                 window.location.hash =
-                    isEditor && !isSelected ? `#${externalFile._id}` : '#';
+                    isEditor && !isSelected ? `#${externalFile.id}` : '#';
                 if (isSelected) {
-                    window.location.hash = `#${externalFile._id}`;
+                    window.location.hash = `#${externalFile.id}`;
                 }
             } },
-            React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.filename }),
-            React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, showDesignationActions: showDesignationActions, submissionAttachmentName: externalFile.filename, title: title, designation: designation, description: externalFile.description, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, dispatch: dispatch })),
+            React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
+            React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, showDesignationActions: showDesignationActions, submissionAttachmentName: externalFile.name, title: title, designation: designation, attachmentId: externalFile.id, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, dispatch: dispatch })),
         onClose && (React.createElement(IconCloseButton, { onClick: (e) => {
                 e.preventDefault();
                 onClose();
@@ -32,7 +32,7 @@ export const FileSectionItem = ({ submissionId, externalFile, title, showAttachm
         handleDownload && handleReplace && submissionId && (React.createElement(DropdownContainer, { ref: wrapperRef },
             React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
-            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch }))))));
+            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: externalFile.id, fileName: externalFile.name, designation: externalFile.type.label, publicUrl: externalFile.link, hideActionList: toggleOpen, dispatch: dispatch }))))));
 };
 const IconCloseButton = styled.button `
   border: none;

package/dist/es/components/FileManager/FileSectionItem/ItemActions.js

@@ -3,7 +3,7 @@ import { DropdownList } from '../../Dropdown';
 import { PermissionsContext } from '../FileManager';
 import { actions } from '../FileSectionState';
 import { ActionsItem } from '../ItemsAction';
-export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
+export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const fileInputRef = useRef(null);
     const [selectedFile, setSelectedFile] = useState();
@@ -15,7 +15,7 @@ export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandle
             if (dispatch) {
                 dispatch(actions.UPLOAD_FILE(file));
             }
-            replaceAttachmentHandler(submissionId, fileName, file, attachmentDesignation);
+            replaceAttachmentHandler(submissionId, attachmentId, fileName, file, attachmentDesignation);
             hideActionList();
         }
     };

package/dist/es/components/FileManager/FileSectionState.js

@@ -1,7 +1,6 @@
 export const getInitialState = () => ({
     uploadedFile: undefined,
     isUploadFile: false,
-    isFileUploaded: false,
     moveToOtherState: undefined,
     successMessage: '',
     isShowSuccessMessage: false,
@@ -17,8 +16,6 @@ var ActionTypes;
     ActionTypes["HANDLE_UPLOAD_ACTION"] = "handleUpload";
     ActionTypes["HANDLE_FINISH_UPLOAD"] = "handleFinishUpload";
     ActionTypes["HANDLE_SUCCESS_MESSAGE"] = "handleSuccessMessage";
-    ActionTypes["SHOW_FILE_UPLOADED_ALERT"] = "showFileUploadedAlert";
-    ActionTypes["CLOSE_FILE_UPLOADED_ALERT"] = "closeFileUploadedAlert";
 })(ActionTypes || (ActionTypes = {}));
 export const reducer = (state, action) => {
     switch (action.type) {
@@ -44,15 +41,9 @@ export const reducer = (state, action) => {
         case ActionTypes.HANDLE_FINISH_UPLOAD: {
             return Object.assign(Object.assign({}, state), { isUploadFile: false, uploadedFile: undefined, selectDesignation: undefined });
         }
-        case ActionTypes.SHOW_FILE_UPLOADED_ALERT: {
-            return Object.assign(Object.assign({}, state), { isFileUploaded: true });
-        }
         case ActionTypes.HANDLE_SUCCESS_MESSAGE: {
             return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true });
         }
-        case ActionTypes.CLOSE_FILE_UPLOADED_ALERT: {
-            return Object.assign(Object.assign({}, state), { isFileUploaded: false });
-        }
     }
     return state;
 };
@@ -71,7 +62,7 @@ export const actions = {
         type: ActionTypes.SELECT_DESIGNATION,
         designation,
     }),
-    MOVE_FILE: (submissionId, typeId, name, successMoveMessage) => ({
+    MOVE_FILE: (submissionId, attachmentId, typeId, name, successMoveMessage) => ({
         type: ActionTypes.MOVE_FILE,
         submissionId,
         typeId,
@@ -81,12 +72,6 @@ export const actions = {
     HANDLE_FINISH_UPLOAD: () => ({
         type: ActionTypes.HANDLE_FINISH_UPLOAD,
     }),
-    SHOW_FILE_UPLOADED_ALERT: () => ({
-        type: ActionTypes.SHOW_FILE_UPLOADED_ALERT,
-    }),
-    CLOSE_FILE_UPLOADED_ALERT: () => ({
-        type: ActionTypes.CLOSE_FILE_UPLOADED_ALERT,
-    }),
     HANDLE_SUCCESS_MESSAGE: () => ({
         type: ActionTypes.HANDLE_SUCCESS_MESSAGE,
     }),

package/dist/es/components/FileManager/FilesSection.js

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import { AlertMessage, AlertMessageType } from '../AlertMessage';
 import { DragItemArea } from './DragItemArea';
 import { PermissionsContext } from './FileManager';
 import { FileSectionUploadItem } from './FileSectionItem/FileSectionUploadItem';
@@ -26,11 +25,7 @@ export const FilesSection = ({ submissionId, enableDragAndDrop, handleUpload, fi
             (isOtherFileTab || isSupplementFilesTab) && (React.createElement(UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, submissionId: submissionId, dispatch: dispatch })),
             state.isUploadFile &&
                 state.uploadedFile &&
-                state.selectDesignation !== undefined && (React.createElement(FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })),
-            state.isFileUploaded && (React.createElement(AlertMessage, { type: AlertMessageType.info, hideCloseButton: true, dismissButton: {
-                    action: () => dispatch(actions.CLOSE_FILE_UPLOADED_ALERT()),
-                    text: 'Close',
-                } }, "File uploaded successfully. It may take a few moments to show the new file in the Inspector.")))),
+                state.selectDesignation !== undefined && (React.createElement(FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
         state.uploadedFile && isOtherFileTab && (React.createElement(SelectDialogDesignation, { isOpen: state.isOpenSelectDesignationPopup, fileExtension: uploadedFileExtension, handleCancel: () => {
                 dispatch(actions.HANDLE_CANCEL_UPLOAD());
             }, uploadFileHandler: () => handleUploadOtherFile(), dispatch: dispatch, fileSection: fileSection })),

package/dist/es/components/FileManager/InlineFilesSection.js

@@ -7,16 +7,19 @@ import { FileDescription, FileInfoContainer, FileNameTitleContainer, FileTitle,
 import { ActionsIcon, Item } from './FileSectionItem/FileSectionItem';
 import { ItemActions } from './FileSectionItem/ItemActions';
 import { extensionsWithFileTypesMap, fileTypesWithIconMap } from './util';
-export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, dispatch }) => {
+export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, isEditor, dispatch, }) => {
     const inlineFiles = useMemo(() => getInlineFiles(modelMap), [modelMap]);
     const onElementClick = useCallback((e) => {
+        if (!isEditor) {
+            return;
+        }
         const { id } = e.currentTarget;
         const isSelected = id == window.location.hash.substr(1);
         window.location.hash = !isSelected ? `#${id}` : '#';
         if (isSelected) {
             window.location.hash = `#${id}`;
         }
-    }, []);
+    }, [isEditor]);
     return (React.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
@@ -42,7 +45,7 @@ const FileReference = ({ externalFile, submissionId, handleReplace, handleDownlo
         handleDownload && handleReplace && submissionId && (React.createElement(DropdownContainer, { ref: wrapperRef },
             React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
-            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: undefined, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = styled(Item) `
   display: flex;

package/dist/es/components/FileManager/util.js

@@ -50,8 +50,8 @@ export var Designation;
     Designation[Designation["MainManuscript"] = 13] = "MainManuscript";
 })(Designation || (Designation = {}));
 export const designationWithFileSectionsMap = new Map([
-    [Designation.Figure, FileSectionType.Inline],
-    [Designation.Table, FileSectionType.Inline],
+    [Designation.Figure, FileSectionType.OtherFile],
+    [Designation.Table, FileSectionType.OtherFile],
     [Designation.Supplementary, FileSectionType.Supplements],
     [Designation.ConflictOfInterest, FileSectionType.OtherFile],
     [Designation.Document, FileSectionType.OtherFile],
@@ -346,15 +346,15 @@ export const fileTypesWithIconMap = new Map([
     ],
     [undefined, React.createElement(UnknownFormatFileIcon, { key: undefined })],
 ]);
-export const generateExternalFilesTitles = (externalFiles, fileSectionType) => {
+export const generateAttachmentsTitles = (externalFiles, fileSectionType) => {
     const titleCountersMap = new Map();
     const externalFilesWithTitlesMap = new Map();
     externalFiles.forEach((element) => {
-        const fileExtension = element.filename.substring(element.filename.lastIndexOf('.') + 1);
+        const fileExtension = element.name.substring(element.name.lastIndexOf('.') + 1);
         const fileType = extensionsWithFileTypesMap.get(fileExtension.toLowerCase());
         const fileTitle = fileTypesWithTitlesMap.get(fileType);
         if (fileSectionType === FileSectionType.Inline) {
-            externalFilesWithTitlesMap.set(element.filename, element);
+            externalFilesWithTitlesMap.set(element.name, element);
         }
         else {
             if (fileTitle !== undefined) {
@@ -377,13 +377,6 @@ export const generateExternalFilesTitles = (externalFiles, fileSectionType) => {
     }));
     return result;
 };
-export const sortExternalFiles = (externalFile) => externalFile
-    .sort((a, b) => Number(a.createdAt) - Number(b.createdAt))
-    .sort((a, b) => b.designation === 'main-manuscript'
-    ? 1
-    : a.designation === 'main-manuscript'
-        ? -1
-        : 0);
 export const getDesignationActionsList = (designation, fileExtension) => {
     const allowedDesignationsToTransition = designationWithAllowedDesignationsToTransitionMap.get(designation);
     if (allowedDesignationsToTransition) {
@@ -467,10 +460,3 @@ export const droppableSections = [
     FileSectionType.Supplements,
     FileSectionType.OtherFile,
 ];
-const isOfDesignation = (file, designation) => {
-    const formats = designationWithAllowedMediaTypesMap.get(designation);
-    return !!(formats === null || formats === void 0 ? void 0 : formats.find((type) => file.MIME.indexOf('/' + type) >= 0));
-};
-export const isFigure = (file) => {
-    return isOfDesignation(file, Designation.Figure);
-};

package/dist/es/components/icons/attach.js

@@ -0,0 +1,21 @@
+/*!
+ * © 2022 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+const AttachIcon = () => {
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M8.85683 5.35715L5.85183 8.36215C5.16883 9.04515 5.16883 10.1531 5.85183 10.8371C6.53483 11.5201 7.64283 11.5201 8.32683 10.8371L12.3928 6.77115C13.7598 5.40415 13.7598 3.18815 12.3928 1.82115C11.0258 0.454148 8.80983 0.454148 7.44283 1.82115L3.02383 6.24115C0.973828 8.29115 0.973828 11.6151 3.02383 13.6661C5.07383 15.7161 8.39783 15.7161 10.4488 13.6661L14.5138 9.60015", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+export default AttachIcon;

package/dist/es/components/icons/index.js

@@ -32,3 +32,5 @@ export { default as ZoomOutIcon } from './zoom-out';
 export { default as TaskStepCurrentIcon } from './task-step-current';
 export { default as TaskStepDoneIcon } from './task-step-done';
 export { default as TaskStepNextIcon } from './task-step-next';
+export { default as AttachIcon } from './attach';
+export { default as UploadIcon } from './upload';

package/dist/es/components/icons/upload.js

@@ -0,0 +1,8 @@
+import React from 'react';
+const UploadIcon = () => {
+    return (React.createElement("svg", { width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M8.5 12.5V1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M13.5 6.5L8.5 1.5L3.5 6.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M15.5 16.5H1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+export default UploadIcon;

package/dist/es/lib/inlineFiles.js

@@ -5,14 +5,17 @@ const getCaptionText = (caption) => caption &&
     new DOMParser().parseFromString(caption, 'text/html').documentElement
         .innerText;
 const getFigureData = (element, modelMap) => {
-    const figureId = element.containedObjectIDs.find((e) => {
-        const model = modelMap.get(e);
-        return model && hasObjectType(ObjectTypes.Figure)(model);
+    const externalFileReferences = [];
+    element.containedObjectIDs.map((e) => {
+        var _a;
+        const object = modelMap.get(e);
+        if (object && object.objectType === ObjectTypes.Figure) {
+            const externalFileRef = (_a = object.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((figure) => figure.kind === 'imageRepresentation');
+            if (externalFileRef) {
+                externalFileReferences.push(externalFileRef);
+            }
+        }
     });
-    const { externalFileReferences } = (figureId &&
-        modelMap.get(figureId)) || {
-        externalFileReferences: undefined,
-    };
     return {
         id: element._id,
         externalFileReferences,
@@ -34,25 +37,30 @@ export default (modelMap) => {
         }
         else {
             (_b = section.elementIDs) === null || _b === void 0 ? void 0 : _b.map((elementId) => {
+                var _a;
                 const element = modelMap.get(elementId);
                 if (!element) {
                     return;
                 }
                 switch (element.objectType) {
-                    case ObjectTypes.FigureElement: {
+                    case ObjectTypes.FigureElement:
+                    case ObjectTypes.MultiGraphicFigureElement: {
                         files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap)), { label: `Figure`, type: FileType.Figure }));
                         break;
                     }
                     case ObjectTypes.TableElement: {
                         const tableElement = element;
                         const table = modelMap.get(tableElement.containedObjectID);
-                        files.push({
-                            id: element._id,
-                            label: `Table`,
-                            type: FileType.SheetsWorkbooks,
-                            externalFileReferences: table.externalFileReferences,
-                            caption: getCaptionText(tableElement.caption),
-                        });
+                        const externalFileReferences = (_a = table.externalFileReferences) === null || _a === void 0 ? void 0 : _a.filter((file) => file.kind === 'dataset' && file.ref);
+                        if (externalFileReferences && externalFileReferences.length > 0) {
+                            files.push({
+                                id: element._id,
+                                label: `Table`,
+                                type: FileType.SheetsWorkbooks,
+                                externalFileReferences: table.externalFileReferences,
+                                caption: getCaptionText(tableElement.caption),
+                            });
+                        }
                         break;
                     }
                 }

package/dist/types/components/FileManager/FileManager.d.ts

@@ -1,15 +1,16 @@
-import { ExternalFile, Model } from '@manuscripts/manuscripts-json-schema';
+import { Model } from '@manuscripts/manuscripts-json-schema';
 import React from 'react';
 import { Capabilities } from '../../lib/capabilities';
+import { SubmissionAttachment } from './FileSectionItem/FileSectionItem';
 export declare const PermissionsContext: React.Context<Capabilities | null>;
 export declare const FileManager: React.FC<{
     submissionId: string;
-    externalFiles: ExternalFile[];
+    attachments: SubmissionAttachment[];
     modelMap: Map<string, Model>;
     enableDragAndDrop: boolean;
     can: Capabilities;
-    handleUpload: (submissionId: string, file: File, designation: string) => Promise<boolean>;
+    handleUpload: (submissionId: string, file: File, designation: string) => Promise<any>;
     handleDownload: (url: string) => void;
-    handleReplace: (submissionId: string, name: string, file: File, typeId: string) => Promise<boolean>;
-    handleChangeDesignation: (submissionId: string, typeId: string, name: string) => Promise<boolean>;
+    handleReplace: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<any>;
+    handleChangeDesignation: (submissionId: string, attachmentId: string, typeId: string, name: string) => Promise<any>;
 }>;

package/dist/types/components/FileManager/FileSectionItem/DesignationActions.d.ts

@@ -3,8 +3,9 @@ import { Action } from '../FileSectionState';
 import { Designation } from '../util';
 export declare const DesignationActions: React.FC<{
     designation?: Designation;
+    attachmentId: string;
     fileExtension?: string;
-    handleChangeDesignation?: (submissionId: string, typeId: string, name: string) => Promise<boolean>;
+    handleChangeDesignation?: (submissionId: string, attachmentId: string, typeId: string, name: string) => Promise<boolean>;
     submissionId: string;
     fileName: string;
     dispatch?: Dispatch<Action>;

package/dist/types/components/FileManager/FileSectionItem/DesignationActionsList.d.ts

@@ -2,11 +2,12 @@ import React, { Dispatch } from 'react';
 import { Action } from '../FileSectionState';
 import { Designation } from '../util';
 export declare const DesignationActionsList: React.FC<{
-    handleChangeDesignation?: (submissionId: string, typeId: string, name: string) => Promise<boolean>;
+    handleChangeDesignation?: (submissionId: string, attachmentId: string, typeId: string, name: string) => Promise<boolean>;
     designationActionsList: Array<Designation>;
     submissionId: string;
     fileName: string;
     designation?: Designation;
+    attachmentId: string;
     dispatch?: Dispatch<Action>;
     handleOpenConfirmationPopup: (popupHeader: string, popupMessage: string, designation: string) => void;
 }>;

package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts

@@ -5,11 +5,11 @@ export declare const FileInfo: React.FC<{
     showAttachmentName: boolean;
     showDesignationActions: boolean;
     title: string;
-    description?: string;
     submissionAttachmentName: string;
     fileExtension: string;
     designation?: Designation;
-    handleChangeDesignation: (submissionId: string, typeId: string, name: string) => Promise<boolean>;
+    attachmentId: string;
+    handleChangeDesignation: (submissionId: string, attachmentId: string, typeId: string, name: string) => Promise<boolean>;
     submissionId?: string;
     dispatch?: Dispatch<Action>;
 }>;