@manuscripts/style-guide 0.30.23 → 0.30.26

package/dist/cjs/components/FileManager/FileManager.js

@@ -46,48 +46,30 @@ const InlineFilesSection_1 = require("./InlineFilesSection");
 const TooltipDiv_1 = require("./TooltipDiv");
 const util_1 = require("./util");
 exports.PermissionsContext = (0, react_1.createContext)(null);
-const FileManager = ({ submissionId, externalFiles, modelMap, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
+const FileManager = ({ submissionId, attachments, modelMap, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
     const [state, dispatch] = (0, react_1.useReducer)(FileSectionState_1.reducer, (0, FileSectionState_1.getInitialState)());
-    const handleReplaceFile = (0, react_1.useCallback)((submissionId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleReplaceFile = (0, react_1.useCallback)((submissionId, attachmentId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
         dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(util_1.namesWithDesignationMap.get(typeId) || util_1.Designation.Document));
-        const res = yield handleReplace(submissionId, name, file, typeId);
-        if (res) {
-            dispatch(FileSectionState_1.actions.SHOW_FILE_UPLOADED_ALERT());
-        }
+        const res = yield handleReplace(submissionId, attachmentId, name, file, typeId);
         dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
         return res;
     }), [handleReplace]);
     const handleUploadFile = (0, react_1.useCallback)((submissionId, file, designation) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
-            if (util_1.namesWithDesignationMap.get(designation) == util_1.Designation.Supplementary) {
-                dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(util_1.Designation.Supplementary));
-            }
-            const res = yield handleUpload(submissionId, file, designation);
-            if (res) {
-                dispatch(FileSectionState_1.actions.SHOW_FILE_UPLOADED_ALERT());
-            }
-            dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
-            return res;
-        }
-        catch (e) {
-            console.error(e);
-            return false;
+        dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
+        if (util_1.namesWithDesignationMap.get(designation) == util_1.Designation.Supplementary) {
+            dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(util_1.Designation.Supplementary));
         }
+        const res = yield handleUpload(submissionId, file, designation);
+        dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
+        return res;
     }), [handleUpload]);
-    const handleChangeDesignationFile = (0, react_1.useCallback)((submissionId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            const res = yield handleChangeDesignation(submissionId, typeId, name);
-            if (res) {
-                dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE());
-            }
-            return res;
-        }
-        catch (e) {
-            console.log(e);
-            return false;
+    const handleChangeDesignationFile = (0, react_1.useCallback)((submissionId, attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
+        const res = yield handleChangeDesignation(submissionId, attachmentId, typeId, name);
+        if (res) {
+            dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE());
         }
+        return res;
     }), [handleChangeDesignation]);
     const handleDownloadFile = (0, react_1.useCallback)((publicUrl) => {
         return handleDownload(publicUrl);
@@ -95,12 +77,12 @@ const FileManager = ({ submissionId, externalFiles, modelMap, enableDragAndDrop,
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === util_1.FileSectionType.Supplements ||
             fileSection === util_1.FileSectionType.OtherFile;
-        const itemsData = externalFiles.filter((element) => {
-            const designation = util_1.namesWithDesignationMap.get(element.designation);
+        const itemsData = attachments.filter((element) => {
+            const designation = util_1.namesWithDesignationMap.get(element.type.label);
             return (designation !== undefined &&
                 util_1.designationWithFileSectionsMap.get(designation) === fileSection);
         });
-        const itemsDataWithTitle = (0, util_1.generateExternalFilesTitles)((0, util_1.sortExternalFiles)(itemsData), fileSection);
+        const itemsDataWithTitle = (0, util_1.generateAttachmentsTitles)(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
             const itemProps = {
                 submissionId: submissionId,
@@ -114,10 +96,10 @@ const FileManager = ({ submissionId, externalFiles, modelMap, enableDragAndDrop,
                 dispatch: dispatch,
             };
             if (enableDragAndDrop && isSupplementOrOtherFilesTab) {
-                return (react_1.default.createElement(DraggableFileSectionItem_1.DraggableFileSectionItem, Object.assign({}, itemProps, { key: element.externalFile._id })));
+                return (react_1.default.createElement(DraggableFileSectionItem_1.DraggableFileSectionItem, Object.assign({}, itemProps, { key: element.externalFile.id })));
             }
             else {
-                return (react_1.default.createElement(FileSectionItem_1.FileSectionItem, Object.assign({}, itemProps, { key: element.externalFile._id, isEditor: enableDragAndDrop })));
+                return (react_1.default.createElement(FileSectionItem_1.FileSectionItem, Object.assign({}, itemProps, { key: element.externalFile.id, isEditor: enableDragAndDrop })));
             }
         });
         return filesItems;
@@ -148,7 +130,7 @@ const FileManager = ({ submissionId, externalFiles, modelMap, enableDragAndDrop,
                                 react_1.default.createElement("div", null, "Files excluded from the final submission.")))),
                     react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
-                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { modelMap: modelMap, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })),
+                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { modelMap: modelMap, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,

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

@@ -29,7 +29,7 @@ const BottomArrowIcon_1 = __importDefault(require("../../icons/BottomArrowIcon")
 const ConfirmationPopUp_1 = require("../ConfirmationPopUp");
 const util_1 = require("../util");
 const DesignationActionsList_1 = require("./DesignationActionsList");
-const DesignationActions = ({ designation, fileExtension, handleChangeDesignation, submissionId, fileName, dispatch, }) => {
+const DesignationActions = ({ designation, attachmentId, fileExtension, handleChangeDesignation, submissionId, fileName, dispatch, }) => {
     const [isActionsShown, setIsActionsShown] = (0, react_1.useState)(false);
     const [confirmationPopUpData, setConfirmationPopUpData] = (0, react_1.useState)({
         isConfirmationPopUpOpen: false,
@@ -45,7 +45,7 @@ const DesignationActions = ({ designation, fileExtension, handleChangeDesignatio
     const hideActionsList = () => {
         setIsActionsShown(false);
     };
-    if (designation && fileExtension) {
+    if (designation !== undefined && fileExtension) {
         const designationActionsList = (0, util_1.getDesignationActionsList)(designation, fileExtension);
         if (!designationActionsList.length) {
             return null;
@@ -60,7 +60,7 @@ const DesignationActions = ({ designation, fileExtension, handleChangeDesignatio
         };
         const handleMoveAction = () => {
             handleChangeDesignation &&
-                handleChangeDesignation(submissionId, confirmationPopUpData.selectedDesignation, fileName);
+                handleChangeDesignation(submissionId, attachmentId, confirmationPopUpData.selectedDesignation, fileName);
             handleCloseAction();
         };
         const handleCloseAction = () => {
@@ -76,7 +76,7 @@ const DesignationActions = ({ designation, fileExtension, handleChangeDesignatio
                 react_1.default.createElement(SecondaryActionsText, null, util_1.designationWithReadableNamesMap.get(designation)),
                 react_1.default.createElement(BottomArrowIcon_1.default, null),
                 isActionsShown && (react_1.default.createElement(ActionsListContainer, null,
-                    react_1.default.createElement(DesignationActionsList_1.DesignationActionsList, { handleChangeDesignation: handleChangeDesignation, designationActionsList: designationActionsList, submissionId: submissionId, fileName: fileName, designation: designation, dispatch: dispatch, handleOpenConfirmationPopup: handleOpenConfirmationPopup })))),
+                    react_1.default.createElement(DesignationActionsList_1.DesignationActionsList, { handleChangeDesignation: handleChangeDesignation, designationActionsList: designationActionsList, submissionId: submissionId, fileName: fileName, designation: designation, attachmentId: attachmentId, dispatch: dispatch, handleOpenConfirmationPopup: handleOpenConfirmationPopup })))),
             confirmationPopUpData.isConfirmationPopUpOpen && (react_1.default.createElement(ConfirmationPopUp_1.ConfirmationPopUp, { popupHeader: confirmationPopUpData.confirmationPopUpHeader !== undefined
                     ? confirmationPopUpData.confirmationPopUpHeader
                     : '', popUpMessage: confirmationPopUpData.confirmationPopUpMessage !== undefined

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

@@ -8,17 +8,17 @@ const react_1 = __importDefault(require("react"));
 const FileSectionState_1 = require("../FileSectionState");
 const ItemsAction_1 = require("../ItemsAction");
 const util_1 = require("../util");
-const DesignationActionsList = ({ handleChangeDesignation, designationActionsList, submissionId, fileName, designation, dispatch, handleOpenConfirmationPopup, }) => {
+const DesignationActionsList = ({ handleChangeDesignation, designationActionsList, submissionId, fileName, designation, attachmentId, dispatch, handleOpenConfirmationPopup, }) => {
     const handleChangeOtherFilesTabDesignation = (designation, isMoveInOtherFileSection, confirmationPopupHeader, confirmationPopupMessage, successMoveMessage) => {
         if (isMoveInOtherFileSection) {
             if (dispatch) {
-                dispatch(FileSectionState_1.actions.MOVE_FILE(submissionId, (0, util_1.getDesignationName)(designation), fileName, successMoveMessage));
+                dispatch(FileSectionState_1.actions.MOVE_FILE(submissionId, attachmentId, (0, util_1.getDesignationName)(designation), fileName, successMoveMessage));
                 handleOpenConfirmationPopup(confirmationPopupHeader, confirmationPopupMessage, (0, util_1.getDesignationName)(designation));
             }
         }
         else {
             handleChangeDesignation &&
-                handleChangeDesignation(submissionId, (0, util_1.getDesignationName)(designation), fileName);
+                handleChangeDesignation(submissionId, attachmentId, (0, util_1.getDesignationName)(designation), fileName);
         }
     };
     const isSupplementaryActionIncluded = designationActionsList.indexOf(util_1.Designation.Supplementary) !== -1;
@@ -27,7 +27,7 @@ const DesignationActionsList = ({ handleChangeDesignation, designationActionsLis
         .map((value) => {
         return (react_1.default.createElement(ItemsAction_1.ActionsItem, { key: value, onClick: () => {
                 let isMoveToOtherFileSection = true;
-                if (designation) {
+                if (designation !== undefined) {
                     isMoveToOtherFileSection =
                         util_1.designationWithFileSectionsMap.get(designation) !==
                             util_1.FileSectionType.OtherFile;
@@ -43,7 +43,7 @@ const DesignationActionsList = ({ handleChangeDesignation, designationActionsLis
             react_1.default.createElement(ItemsAction_1.ActionsSeparator, null),
             react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => {
                     let isMoveToOtherFileSection = true;
-                    if (designation) {
+                    if (designation !== undefined) {
                         isMoveToOtherFileSection =
                             util_1.designationWithFileSectionsMap.get(designation) !==
                                 util_1.FileSectionType.Supplements;

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

@@ -27,14 +27,14 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FileManager_1 = require("../FileManager");
 const DesignationActions_1 = require("./DesignationActions");
-const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissionAttachmentName, fileExtension, designation, description, handleChangeDesignation, submissionId, dispatch, }) => {
+const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissionAttachmentName, fileExtension, designation, attachmentId, handleChangeDesignation, submissionId, dispatch, }) => {
     const fileName = submissionAttachmentName.substring(0, submissionAttachmentName.lastIndexOf('.'));
     const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
     return (react_1.default.createElement(exports.FileInfoContainer, null,
         (can === null || can === void 0 ? void 0 : can.changeDesignation) &&
             showDesignationActions &&
-            designation &&
-            submissionId && (react_1.default.createElement(DesignationActions_1.DesignationActions, { designation: designation, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, fileName: submissionAttachmentName, dispatch: dispatch })),
+            designation !== undefined &&
+            submissionId && (react_1.default.createElement(DesignationActions_1.DesignationActions, { designation: designation, attachmentId: attachmentId, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, fileName: submissionAttachmentName, dispatch: dispatch })),
         react_1.default.createElement(exports.FileNameTitleContainer, null,
             react_1.default.createElement(exports.FileTitle, null,
                 !showAttachmentName ? fileName : title,
@@ -43,8 +43,7 @@ const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissio
                 react_1.default.createElement(exports.FileName, null, fileName),
                 react_1.default.createElement("div", null,
                     ".",
-                    fileExtension)))),
-        description && react_1.default.createElement(exports.FileDescription, null, description)));
+                    fileExtension))))));
 };
 exports.FileInfo = FileInfo;
 exports.FileInfoContainer = styled_components_1.default.div `

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

@@ -16,20 +16,20 @@ const FileTypeIcon_1 = require("./FileTypeIcon");
 const ItemActions_1 = require("./ItemActions");
 const FileSectionItem = ({ submissionId, externalFile, title, showAttachmentName = false, showDesignationActions = false, handleDownload, handleReplace, handleChangeDesignation, dispatch, dragRef, className, style, onClose, isEditor, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
-    const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
-    const designation = util_1.namesWithDesignationMap.get(externalFile.designation);
+    const fileExtension = externalFile.name.substring(externalFile.name.lastIndexOf('.') + 1);
+    const designation = util_1.namesWithDesignationMap.get(externalFile.type.label);
     const isMainManuscript = designation === util_1.Designation.MainManuscript;
-    const isSelected = externalFile._id == window.location.hash.substr(1);
+    const isSelected = externalFile.id == window.location.hash.substr(1);
     return (react_1.default.createElement(exports.Item, { ref: dragRef, className: className, style: style },
         react_1.default.createElement(exports.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_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.filename }),
-            react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, showDesignationActions: showDesignationActions, submissionAttachmentName: externalFile.filename, title: title, designation: designation, description: externalFile.description, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, dispatch: dispatch })),
+            react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
+            react_1.default.createElement(FileInfo_1.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_1.default.createElement(IconCloseButton, { onClick: (e) => {
                 e.preventDefault();
                 onClose();
@@ -38,7 +38,7 @@ const FileSectionItem = ({ submissionId, externalFile, title, showAttachmentName
         handleDownload && handleReplace && submissionId && (react_1.default.createElement(Dropdown_1.DropdownContainer, { ref: wrapperRef },
             react_1.default.createElement(exports.ActionsIcon, { onClick: toggleOpen, type: "button", "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 react_1.default.createElement(dots_icon_1.default, null)),
-            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch }))))));
+            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: externalFile.id, fileName: externalFile.name, designation: externalFile.type.label, publicUrl: externalFile.link, hideActionList: toggleOpen, dispatch: dispatch }))))));
 };
 exports.FileSectionItem = FileSectionItem;
 const IconCloseButton = styled_components_1.default.button `

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

@@ -25,7 +25,7 @@ const Dropdown_1 = require("../../Dropdown");
 const FileManager_1 = require("../FileManager");
 const FileSectionState_1 = require("../FileSectionState");
 const ItemsAction_1 = require("../ItemsAction");
-const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
+const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const fileInputRef = (0, react_1.useRef)(null);
     const [selectedFile, setSelectedFile] = (0, react_1.useState)();
@@ -37,7 +37,7 @@ const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, subm
             if (dispatch) {
                 dispatch(FileSectionState_1.actions.UPLOAD_FILE(file));
             }
-            replaceAttachmentHandler(submissionId, fileName, file, attachmentDesignation);
+            replaceAttachmentHandler(submissionId, attachmentId, fileName, file, attachmentDesignation);
             hideActionList();
         }
     };

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

@@ -4,7 +4,6 @@ exports.actions = exports.reducer = exports.getInitialState = void 0;
 const getInitialState = () => ({
     uploadedFile: undefined,
     isUploadFile: false,
-    isFileUploaded: false,
     moveToOtherState: undefined,
     successMessage: '',
     isShowSuccessMessage: false,
@@ -21,8 +20,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 = {}));
 const reducer = (state, action) => {
     switch (action.type) {
@@ -48,15 +45,9 @@ 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;
 };
@@ -76,7 +67,7 @@ exports.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,
@@ -86,12 +77,6 @@ exports.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/cjs/components/FileManager/FilesSection.js

@@ -21,7 +21,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilesSection = void 0;
 const react_1 = __importStar(require("react"));
-const AlertMessage_1 = require("../AlertMessage");
 const DragItemArea_1 = require("./DragItemArea");
 const FileManager_1 = require("./FileManager");
 const FileSectionUploadItem_1 = require("./FileSectionItem/FileSectionUploadItem");
@@ -48,11 +47,7 @@ const FilesSection = ({ submissionId, enableDragAndDrop, handleUpload, fileSecti
             (isOtherFileTab || isSupplementFilesTab) && (react_1.default.createElement(UploadFileArea_1.UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, submissionId: submissionId, dispatch: dispatch })),
             state.isUploadFile &&
                 state.uploadedFile &&
-                state.selectDesignation !== undefined && (react_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })),
-            state.isFileUploaded && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.info, hideCloseButton: true, dismissButton: {
-                    action: () => dispatch(FileSectionState_1.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_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
         state.uploadedFile && isOtherFileTab && (react_1.default.createElement(SelectDialogDesignation_1.SelectDialogDesignation, { isOpen: state.isOpenSelectDesignationPopup, fileExtension: uploadedFileExtension, handleCancel: () => {
                 dispatch(FileSectionState_1.actions.HANDLE_CANCEL_UPLOAD());
             }, uploadFileHandler: () => handleUploadOtherFile(), dispatch: dispatch, fileSection: fileSection })),

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

@@ -32,16 +32,19 @@ const FileInfo_1 = require("./FileSectionItem/FileInfo");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const ItemActions_1 = require("./FileSectionItem/ItemActions");
 const util_1 = require("./util");
-const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, dispatch }) => {
+const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, isEditor, dispatch, }) => {
     const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap), [modelMap]);
     const onElementClick = (0, react_1.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_1.default.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
@@ -68,7 +71,7 @@ const FileReference = ({ externalFile, submissionId, handleReplace, handleDownlo
         handleDownload && handleReplace && submissionId && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
             react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 react_1.default.createElement(dots_icon_1.default, null)),
-            isOpen && (react_1.default.createElement(ItemActions_1.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_1.default.createElement(ItemActions_1.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 = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   display: flex;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFigure = exports.droppableSections = exports.getUploadFileDesignationList = exports.getDesignationByFileSection = exports.getDesignationName = exports.getDesignationActionsList = exports.sortExternalFiles = exports.generateExternalFilesTitles = exports.fileTypesWithIconMap = exports.fileTypesWithTitlesMap = exports.extensionsWithFileTypesMap = exports.designationWithAllowedDesignationsToTransitionMap = exports.designationWithAllowedMediaTypesMap = exports.designationWithReadableNamesMap = exports.namesWithDesignationMap = exports.designationWithFileSectionsMap = exports.Designation = exports.FileType = exports.FileSectionType = void 0;
+exports.droppableSections = exports.getUploadFileDesignationList = exports.getDesignationByFileSection = exports.getDesignationName = exports.getDesignationActionsList = exports.generateAttachmentsTitles = exports.fileTypesWithIconMap = exports.fileTypesWithTitlesMap = exports.extensionsWithFileTypesMap = exports.designationWithAllowedDesignationsToTransitionMap = exports.designationWithAllowedMediaTypesMap = exports.designationWithReadableNamesMap = exports.namesWithDesignationMap = exports.designationWithFileSectionsMap = exports.Designation = exports.FileType = exports.FileSectionType = void 0;
 const react_1 = __importDefault(require("react"));
 const audio_icon_1 = __importDefault(require("../icons/audio-icon"));
 const code_file_icon_1 = __importDefault(require("../icons/code-file-icon"));
@@ -56,8 +56,8 @@ var Designation;
     Designation[Designation["MainManuscript"] = 13] = "MainManuscript";
 })(Designation = exports.Designation || (exports.Designation = {}));
 exports.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],
@@ -352,15 +352,15 @@ exports.fileTypesWithIconMap = new Map([
     ],
     [undefined, react_1.default.createElement(unknown_format_file_icon_1.default, { key: undefined })],
 ]);
-const generateExternalFilesTitles = (externalFiles, fileSectionType) => {
+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 = exports.extensionsWithFileTypesMap.get(fileExtension.toLowerCase());
         const fileTitle = exports.fileTypesWithTitlesMap.get(fileType);
         if (fileSectionType === FileSectionType.Inline) {
-            externalFilesWithTitlesMap.set(element.filename, element);
+            externalFilesWithTitlesMap.set(element.name, element);
         }
         else {
             if (fileTitle !== undefined) {
@@ -383,15 +383,7 @@ const generateExternalFilesTitles = (externalFiles, fileSectionType) => {
     }));
     return result;
 };
-exports.generateExternalFilesTitles = generateExternalFilesTitles;
-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);
-exports.sortExternalFiles = sortExternalFiles;
+exports.generateAttachmentsTitles = generateAttachmentsTitles;
 const getDesignationActionsList = (designation, fileExtension) => {
     const allowedDesignationsToTransition = exports.designationWithAllowedDesignationsToTransitionMap.get(designation);
     if (allowedDesignationsToTransition) {
@@ -479,11 +471,3 @@ exports.droppableSections = [
     FileSectionType.Supplements,
     FileSectionType.OtherFile,
 ];
-const isOfDesignation = (file, designation) => {
-    const formats = exports.designationWithAllowedMediaTypesMap.get(designation);
-    return !!(formats === null || formats === void 0 ? void 0 : formats.find((type) => file.MIME.indexOf('/' + type) >= 0));
-};
-const isFigure = (file) => {
-    return isOfDesignation(file, Designation.Figure);
-};
-exports.isFigure = isFigure;

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

@@ -0,0 +1,26 @@
+"use strict";
+/*!
+ * © 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.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const AttachIcon = () => {
+    return (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.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" })));
+};
+exports.default = AttachIcon;

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

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
+exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthor", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_icon_active_1 = require("./add-icon-active");
@@ -57,3 +57,7 @@ var task_step_done_1 = require("./task-step-done");
 Object.defineProperty(exports, "TaskStepDoneIcon", { enumerable: true, get: function () { return __importDefault(task_step_done_1).default; } });
 var task_step_next_1 = require("./task-step-next");
 Object.defineProperty(exports, "TaskStepNextIcon", { enumerable: true, get: function () { return __importDefault(task_step_next_1).default; } });
+var attach_1 = require("./attach");
+Object.defineProperty(exports, "AttachIcon", { enumerable: true, get: function () { return __importDefault(attach_1).default; } });
+var upload_1 = require("./upload");
+Object.defineProperty(exports, "UploadIcon", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const UploadIcon = () => {
+    return (react_1.default.createElement("svg", { width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M8.5 12.5V1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+        react_1.default.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_1.default.createElement("path", { d: "M15.5 16.5H1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+exports.default = UploadIcon;

package/dist/cjs/lib/inlineFiles.js

@@ -7,14 +7,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 && (0, manuscript_transform_1.hasObjectType)(manuscripts_json_schema_1.ObjectTypes.Figure)(model);
+    const externalFileReferences = [];
+    element.containedObjectIDs.map((e) => {
+        var _a;
+        const object = modelMap.get(e);
+        if (object && object.objectType === manuscripts_json_schema_1.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,
@@ -36,25 +39,30 @@ exports.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 manuscripts_json_schema_1.ObjectTypes.FigureElement: {
+                    case manuscripts_json_schema_1.ObjectTypes.FigureElement:
+                    case manuscripts_json_schema_1.ObjectTypes.MultiGraphicFigureElement: {
                         files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap)), { label: `Figure`, type: util_1.FileType.Figure }));
                         break;
                     }
                     case manuscripts_json_schema_1.ObjectTypes.TableElement: {
                         const tableElement = element;
                         const table = modelMap.get(tableElement.containedObjectID);
-                        files.push({
-                            id: element._id,
-                            label: `Table`,
-                            type: util_1.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: util_1.FileType.SheetsWorkbooks,
+                                externalFileReferences: table.externalFileReferences,
+                                caption: getCaptionText(tableElement.caption),
+                            });
+                        }
                         break;
                     }
                 }