@manuscripts/style-guide 0.31.10 → 0.31.13

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

@@ -33,10 +33,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileManager = exports.PermissionsContext = void 0;
 const manuscript_transform_1 = require("@manuscripts/manuscript-transform");
-const manuscripts_json_schema_1 = require("@manuscripts/manuscripts-json-schema");
 const react_1 = __importStar(require("react"));
 const react_tooltip_1 = __importDefault(require("react-tooltip"));
-const inlineFiles_1 = __importDefault(require("../../lib/inlineFiles"));
+const inlineFiles_1 = __importStar(require("../../lib/inlineFiles"));
 const AlertMessage_1 = require("../AlertMessage");
 const Inspector_1 = require("../Inspector");
 const InspectorSection_1 = require("../InspectorSection");
@@ -49,7 +48,7 @@ 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, attachments, modelMap, saveModel, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
+const FileManager = ({ submissionId, attachments, modelMap, saveModel, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, handleUpdateInline, }) => {
     const [state, dispatch] = (0, react_1.useReducer)(FileSectionState_1.reducer, (0, FileSectionState_1.getInitialState)());
     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());
@@ -86,34 +85,24 @@ const FileManager = ({ submissionId, attachments, modelMap, saveModel, enableDra
         return handleDownload(publicUrl);
     }, [handleDownload]);
     const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap, attachments), [modelMap.values(), attachments]);
-    const inlineAttachmentsIds = (0, react_1.useMemo)(() => {
+    const supplementFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.getSupplementFiles)(modelMap, attachments), [attachments, modelMap.size]);
+    const excludedAttachmentsIds = (0, react_1.useMemo)(() => {
         const attachmentsIDs = new Set();
         inlineFiles.map(({ attachments }) => {
             if (attachments) {
                 attachments.map((attachment) => attachmentsIDs.add(attachment.id));
             }
         });
+        supplementFiles.map(({ id }) => attachmentsIDs.add(id));
         return attachmentsIDs;
-    }, [inlineFiles]);
-    const supplementFiles = (0, react_1.useMemo)(() => {
-        const supplements = new Map((0, manuscript_transform_1.getModelsByType)(modelMap, manuscripts_json_schema_1.ObjectTypes.Supplement).map((supplement) => {
-            var _a;
-            return [
-                (_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''),
-                supplement,
-            ];
-        }));
-        return attachments.filter((attachment) => supplements.has(attachment.id));
-    }, [attachments, modelMap.size]);
+    }, [inlineFiles, supplementFiles]);
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === util_1.FileSectionType.Supplements ||
             fileSection === util_1.FileSectionType.OtherFile;
         const itemsData = (fileSection === util_1.FileSectionType.Supplements && supplementFiles) ||
             attachments.filter((element) => {
                 const designation = util_1.namesWithDesignationMap.get(element.type.label);
-                return (designation !== undefined &&
-                    util_1.designationWithFileSectionsMap.get(designation) === fileSection &&
-                    !inlineAttachmentsIds.has(element.id));
+                return (designation !== undefined && !excludedAttachmentsIds.has(element.id));
             });
         const itemsDataWithTitle = (0, util_1.generateAttachmentsTitles)(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
@@ -163,7 +152,7 @@ const FileManager = ({ submissionId, attachments, modelMap, saveModel, enableDra
                                 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, { inlineFiles: inlineFiles, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, 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/ItemActions.js

@@ -18,6 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemActions = void 0;
 const react_1 = __importStar(require("react"));
@@ -25,22 +34,40 @@ 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, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
+const util_1 = require("../util");
+const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, handleUpdateInline, submissionId, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
+    const attachmentDesignationName = attachmentDesignation !== 'undefined'
+        ? util_1.namesWithDesignationMap.get(attachmentDesignation)
+        : undefined;
+    const canBeReplaced = attachmentDesignationName == undefined ||
+        ![
+            util_1.Designation.MainManuscript,
+            util_1.Designation.SubmissionFile,
+            util_1.Designation.SubmissionPdf,
+        ].includes(attachmentDesignationName);
     const fileInputRef = (0, react_1.useRef)(null);
     const [selectedFile, setSelectedFile] = (0, react_1.useState)();
     const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
-    const handleChange = (event) => {
+    const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
         if (event && event.target && event.target.files) {
             const file = event.target.files[0];
             setSelectedFile(file);
             if (dispatch) {
-                dispatch(FileSectionState_1.actions.UPLOAD_FILE(file));
+                dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
+                dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(attachmentDesignationName || util_1.Designation.Document));
+            }
+            const result = yield replaceAttachmentHandler(submissionId, attachmentId, fileName, file, attachmentDesignation);
+            const { uploadAttachment } = result === null || result === void 0 ? void 0 : result.data;
+            if (uploadAttachment && handleUpdateInline) {
+                handleUpdateInline(uploadAttachment);
+            }
+            if (dispatch) {
+                dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
             }
-            replaceAttachmentHandler(submissionId, attachmentId, fileName, file, attachmentDesignation);
             hideActionList();
         }
-    };
+    });
     const openFileDialog = () => {
         if (fileInputRef && fileInputRef.current) {
             fileInputRef.current.click();
@@ -50,7 +77,7 @@ const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, subm
         react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
-        (can === null || can === void 0 ? void 0 : can.replaceFile) && (react_1.default.createElement(react_1.default.Fragment, null,
+        (can === null || can === void 0 ? void 0 : can.replaceFile) && canBeReplaced && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: openFileDialog }, "Replace"),
             react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' })))));
 };

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

@@ -31,7 +31,7 @@ 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, inlineFiles, isEditor, dispatch, }) => {
+const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, handleUpdateInline, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = (0, react_1.useCallback)((e) => {
         if (!isEditor) {
             return;
@@ -46,7 +46,7 @@ const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, inlin
     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 },
-            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })))),
+            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, submissionId: submissionId, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDownload: handleDownload, dispatch: dispatch })))),
             react_1.default.createElement(Element, { className: 'element' },
                 util_1.fileTypesWithIconMap.get(file.type),
                 react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
@@ -55,7 +55,7 @@ const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, inlin
     })));
 };
 exports.InlineFilesSection = InlineFilesSection;
-const FileReference = ({ attachment, submissionId, handleReplace, handleDownload, dispatch, }) => {
+const FileReference = ({ attachment, submissionId, handleReplace, handleDownload, handleUpdateInline, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
     if (!attachment || !attachment.name) {
         return null;
@@ -68,7 +68,9 @@ const FileReference = ({ attachment, submissionId, handleReplace, handleDownload
         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, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, handleUpdateInline: (uploadAttachment) => handleUpdateInline &&
+                    (attachment === null || attachment === void 0 ? void 0 : attachment.modelId) &&
+                    handleUpdateInline(attachment.modelId, uploadAttachment), downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   display: flex;

package/dist/cjs/index.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectDialogDesignation = exports.errorsDecoder = exports.PdfPreview = exports.inlineFiles = void 0;
+exports.SelectDialogDesignation = exports.errorsDecoder = exports.PdfPreview = exports.getSupplementFiles = exports.inlineFiles = void 0;
 __exportStar(require("./components/AffiliationsEditor"), exports);
 __exportStar(require("./components/AffiliationsList"), exports);
 __exportStar(require("./components/AuthorForm"), exports);
@@ -62,6 +62,7 @@ __exportStar(require("./components/Inspector"), exports);
 __exportStar(require("./components/InspectorSection"), exports);
 var inlineFiles_1 = require("./lib/inlineFiles");
 Object.defineProperty(exports, "inlineFiles", { enumerable: true, get: function () { return __importDefault(inlineFiles_1).default; } });
+Object.defineProperty(exports, "getSupplementFiles", { enumerable: true, get: function () { return inlineFiles_1.getSupplementFiles; } });
 var PdfPreview_1 = require("./components/PdfPreview");
 Object.defineProperty(exports, "PdfPreview", { enumerable: true, get: function () { return __importDefault(PdfPreview_1).default; } });
 __exportStar(require("./components/SubmissionInspector"), exports);

package/dist/cjs/lib/inlineFiles.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSupplementFiles = void 0;
 const manuscript_transform_1 = require("@manuscripts/manuscript-transform");
 const manuscripts_json_schema_1 = require("@manuscripts/manuscripts-json-schema");
 const util_1 = require("../components/FileManager/util");
@@ -17,13 +18,14 @@ const getAttachment = (externalFileRef, attachmentsMap) => {
 };
 const getFigureData = (element, modelMap, attachmentsMap) => {
     const attachments = [];
-    element.containedObjectIDs.map((e) => {
+    element.containedObjectIDs.map((id) => {
         var _a;
-        const object = modelMap.get(e);
+        const object = modelMap.get(id);
         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');
             const attachment = getAttachment(externalFileRef, attachmentsMap);
             if (attachment) {
+                attachment.modelId = id;
                 attachments.push(attachment);
             }
         }
@@ -119,3 +121,8 @@ const getAuxiliaryObjects = (modelMap) => {
 const sortAuxiliaryObject = (orderObject, auxiliaryObjectIds) => {
     return auxiliaryObjectIds.sort((a, b) => orderObject.elements.indexOf(a) - orderObject.elements.indexOf(b));
 };
+const getSupplementFiles = (modelMap, attachments) => {
+    const supplements = new Map((0, manuscript_transform_1.getModelsByType)(modelMap, manuscripts_json_schema_1.ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
+    return attachments.filter((attachment) => supplements.has(attachment.id));
+};
+exports.getSupplementFiles = getSupplementFiles;

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

@@ -7,11 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { buildSupplementaryMaterial, getModelsByType, } from '@manuscripts/manuscript-transform';
-import { ObjectTypes, } from '@manuscripts/manuscripts-json-schema';
+import { buildSupplementaryMaterial, } from '@manuscripts/manuscript-transform';
 import React, { createContext, useCallback, useMemo, useReducer } from 'react';
 import ReactTooltip from 'react-tooltip';
-import getInlineFiles from '../../lib/inlineFiles';
+import getInlineFiles, { getSupplementFiles } from '../../lib/inlineFiles';
 import { AlertMessage, AlertMessageType } from '../AlertMessage';
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
 import { InspectorSection } from '../InspectorSection';
@@ -22,9 +21,9 @@ import { actions, getInitialState, reducer } from './FileSectionState';
 import { FilesSection } from './FilesSection';
 import { InlineFilesSection } from './InlineFilesSection';
 import { TooltipDiv } from './TooltipDiv';
-import { Designation, designationWithFileSectionsMap, FileSectionType, generateAttachmentsTitles, namesWithDesignationMap, } from './util';
+import { Designation, FileSectionType, generateAttachmentsTitles, namesWithDesignationMap, } from './util';
 export const PermissionsContext = createContext(null);
-export const FileManager = ({ submissionId, attachments, modelMap, saveModel, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
+export const FileManager = ({ submissionId, attachments, modelMap, saveModel, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, handleUpdateInline, }) => {
     const [state, dispatch] = useReducer(reducer, getInitialState());
     const handleReplaceFile = useCallback((submissionId, attachmentId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(actions.HANDLE_UPLOAD_ACTION());
@@ -61,34 +60,24 @@ export const FileManager = ({ submissionId, attachments, modelMap, saveModel, en
         return handleDownload(publicUrl);
     }, [handleDownload]);
     const inlineFiles = useMemo(() => getInlineFiles(modelMap, attachments), [modelMap.values(), attachments]);
-    const inlineAttachmentsIds = useMemo(() => {
+    const supplementFiles = useMemo(() => getSupplementFiles(modelMap, attachments), [attachments, modelMap.size]);
+    const excludedAttachmentsIds = useMemo(() => {
         const attachmentsIDs = new Set();
         inlineFiles.map(({ attachments }) => {
             if (attachments) {
                 attachments.map((attachment) => attachmentsIDs.add(attachment.id));
             }
         });
+        supplementFiles.map(({ id }) => attachmentsIDs.add(id));
         return attachmentsIDs;
-    }, [inlineFiles]);
-    const supplementFiles = useMemo(() => {
-        const supplements = new Map(getModelsByType(modelMap, ObjectTypes.Supplement).map((supplement) => {
-            var _a;
-            return [
-                (_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''),
-                supplement,
-            ];
-        }));
-        return attachments.filter((attachment) => supplements.has(attachment.id));
-    }, [attachments, modelMap.size]);
+    }, [inlineFiles, supplementFiles]);
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === FileSectionType.Supplements ||
             fileSection === FileSectionType.OtherFile;
         const itemsData = (fileSection === FileSectionType.Supplements && supplementFiles) ||
             attachments.filter((element) => {
                 const designation = namesWithDesignationMap.get(element.type.label);
-                return (designation !== undefined &&
-                    designationWithFileSectionsMap.get(designation) === fileSection &&
-                    !inlineAttachmentsIds.has(element.id));
+                return (designation !== undefined && !excludedAttachmentsIds.has(element.id));
             });
         const itemsDataWithTitle = generateAttachmentsTitles(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
@@ -138,7 +127,7 @@ export const FileManager = ({ submissionId, attachments, modelMap, saveModel, en
                                 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, { inlineFiles: inlineFiles, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            React.createElement(InlineFilesSection, { inlineFiles: inlineFiles, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,

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

@@ -1,24 +1,51 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import React, { useContext, useRef, useState, } from 'react';
 import { DropdownList } from '../../Dropdown';
 import { PermissionsContext } from '../FileManager';
 import { actions } from '../FileSectionState';
 import { ActionsItem } from '../ItemsAction';
-export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
+import { Designation, namesWithDesignationMap } from '../util';
+export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, handleUpdateInline, submissionId, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
+    const attachmentDesignationName = attachmentDesignation !== 'undefined'
+        ? namesWithDesignationMap.get(attachmentDesignation)
+        : undefined;
+    const canBeReplaced = attachmentDesignationName == undefined ||
+        ![
+            Designation.MainManuscript,
+            Designation.SubmissionFile,
+            Designation.SubmissionPdf,
+        ].includes(attachmentDesignationName);
     const fileInputRef = useRef(null);
     const [selectedFile, setSelectedFile] = useState();
     const can = useContext(PermissionsContext);
-    const handleChange = (event) => {
+    const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
         if (event && event.target && event.target.files) {
             const file = event.target.files[0];
             setSelectedFile(file);
             if (dispatch) {
-                dispatch(actions.UPLOAD_FILE(file));
+                dispatch(actions.HANDLE_UPLOAD_ACTION());
+                dispatch(actions.SELECT_DESIGNATION(attachmentDesignationName || Designation.Document));
+            }
+            const result = yield replaceAttachmentHandler(submissionId, attachmentId, fileName, file, attachmentDesignation);
+            const { uploadAttachment } = result === null || result === void 0 ? void 0 : result.data;
+            if (uploadAttachment && handleUpdateInline) {
+                handleUpdateInline(uploadAttachment);
+            }
+            if (dispatch) {
+                dispatch(actions.HANDLE_FINISH_UPLOAD());
             }
-            replaceAttachmentHandler(submissionId, attachmentId, fileName, file, attachmentDesignation);
             hideActionList();
         }
-    };
+    });
     const openFileDialog = () => {
         if (fileInputRef && fileInputRef.current) {
             fileInputRef.current.click();
@@ -28,7 +55,7 @@ export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandle
         React.createElement(ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
-        (can === null || can === void 0 ? void 0 : can.replaceFile) && (React.createElement(React.Fragment, null,
+        (can === null || can === void 0 ? void 0 : can.replaceFile) && canBeReplaced && (React.createElement(React.Fragment, null,
             React.createElement(ActionsItem, { onClick: openFileDialog }, "Replace"),
             React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' })))));
 };

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

@@ -6,7 +6,7 @@ import { FileInfoContainer, FileNameTitleContainer, FileTitle, } from './FileSec
 import { ActionsIcon, Item, } from './FileSectionItem/FileSectionItem';
 import { ItemActions } from './FileSectionItem/ItemActions';
 import { extensionsWithFileTypesMap, fileTypesWithIconMap, } from './util';
-export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, inlineFiles, isEditor, dispatch, }) => {
+export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, handleUpdateInline, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = useCallback((e) => {
         if (!isEditor) {
             return;
@@ -21,7 +21,7 @@ export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload
     return (React.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })))),
+            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, submissionId: submissionId, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDownload: handleDownload, dispatch: dispatch })))),
             React.createElement(Element, { className: 'element' },
                 fileTypesWithIconMap.get(file.type),
                 React.createElement(FileInfoContainer, null,
@@ -29,7 +29,7 @@ export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload
                         React.createElement(FileTitle, null, file.label))))));
     })));
 };
-const FileReference = ({ attachment, submissionId, handleReplace, handleDownload, dispatch, }) => {
+const FileReference = ({ attachment, submissionId, handleReplace, handleDownload, handleUpdateInline, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     if (!attachment || !attachment.name) {
         return null;
@@ -42,7 +42,9 @@ const FileReference = ({ attachment, submissionId, handleReplace, handleDownload
         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, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, handleUpdateInline: (uploadAttachment) => handleUpdateInline &&
+                    (attachment === null || attachment === void 0 ? void 0 : attachment.modelId) &&
+                    handleUpdateInline(attachment.modelId, uploadAttachment), downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = styled(Item) `
   display: flex;

package/dist/es/index.js

@@ -44,7 +44,7 @@ export * from './components/Tip';
 export * from './components/icons';
 export * from './components/Inspector';
 export * from './components/InspectorSection';
-export { default as inlineFiles } from './lib/inlineFiles';
+export { default as inlineFiles, getSupplementFiles } from './lib/inlineFiles';
 export { default as PdfPreview } from './components/PdfPreview';
 export * from './components/SubmissionInspector';
 export * from './components/Dropdown';

package/dist/es/lib/inlineFiles.js

@@ -1,4 +1,4 @@
-import { hasObjectType } from '@manuscripts/manuscript-transform';
+import { getModelsByType, hasObjectType, } from '@manuscripts/manuscript-transform';
 import { ObjectTypes, } from '@manuscripts/manuscripts-json-schema';
 import { FileType } from '../components/FileManager/util';
 const getCaptionText = (caption) => caption &&
@@ -15,13 +15,14 @@ const getAttachment = (externalFileRef, attachmentsMap) => {
 };
 const getFigureData = (element, modelMap, attachmentsMap) => {
     const attachments = [];
-    element.containedObjectIDs.map((e) => {
+    element.containedObjectIDs.map((id) => {
         var _a;
-        const object = modelMap.get(e);
+        const object = modelMap.get(id);
         if (object && object.objectType === ObjectTypes.Figure) {
             const externalFileRef = (_a = object.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((figure) => figure.kind === 'imageRepresentation');
             const attachment = getAttachment(externalFileRef, attachmentsMap);
             if (attachment) {
+                attachment.modelId = id;
                 attachments.push(attachment);
             }
         }
@@ -117,3 +118,7 @@ const getAuxiliaryObjects = (modelMap) => {
 const sortAuxiliaryObject = (orderObject, auxiliaryObjectIds) => {
     return auxiliaryObjectIds.sort((a, b) => orderObject.elements.indexOf(a) - orderObject.elements.indexOf(b));
 };
+export const getSupplementFiles = (modelMap, attachments) => {
+    const supplements = new Map(getModelsByType(modelMap, ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
+    return attachments.filter((attachment) => supplements.has(attachment.id));
+};

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

@@ -15,4 +15,5 @@ export declare const FileManager: React.FC<{
     handleDownload: (url: string) => void;
     handleReplace: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<any>;
     handleChangeDesignation: (submissionId: string, attachmentId: string, typeId: string, name: string) => Promise<any>;
+    handleUpdateInline?: (modelId: string, attachment: SubmissionAttachment) => void;
 }>;

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

@@ -20,7 +20,11 @@ export interface FileSectionItemProps {
     showDesignationActions?: boolean;
     showActions?: boolean;
     handleDownload?: (url: string) => void;
-    handleReplace?: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<boolean>;
+    handleReplace?: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<{
+        data: {
+            uploadAttachment: SubmissionAttachment;
+        };
+    }>;
     handleChangeDesignation: (submissionId: string, attachmentId: string, typeId: string, name: string) => Promise<boolean>;
     dispatch?: Dispatch<Action>;
     dragRef?: DragElementWrapper<DragSourceOptions>;

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

@@ -1,9 +1,15 @@
 import React, { Dispatch } from 'react';
 import { Maybe } from '../../SubmissionInspector/types';
 import { Action } from '../FileSectionState';
+import { SubmissionAttachment } from './FileSectionItem';
 export declare const ItemActions: React.FC<{
     downloadAttachmentHandler: (url: string) => void;
-    replaceAttachmentHandler: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<boolean>;
+    replaceAttachmentHandler: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<{
+        data: {
+            uploadAttachment: SubmissionAttachment;
+        };
+    }>;
+    handleUpdateInline?: (attachment: SubmissionAttachment) => void;
     submissionId: string;
     attachmentId: string;
     fileName: string;

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

@@ -16,8 +16,13 @@ export declare const InlineFilesSection: React.FC<{
         caption?: string;
         attachments?: SubmissionAttachment[];
     }[];
-    handleReplace: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<boolean>;
+    handleReplace: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<{
+        data: {
+            uploadAttachment: SubmissionAttachment;
+        };
+    }>;
     handleDownload: (url: string) => void;
+    handleUpdateInline?: (modelId: string, attachment: SubmissionAttachment) => void;
     isEditor: boolean;
     dispatch: Dispatch<Action>;
 }>;

package/dist/types/index.d.ts

@@ -45,7 +45,7 @@ export * from './components/Tip';
 export * from './components/icons';
 export * from './components/Inspector';
 export * from './components/InspectorSection';
-export { default as inlineFiles } from './lib/inlineFiles';
+export { default as inlineFiles, getSupplementFiles } from './lib/inlineFiles';
 export { default as PdfPreview } from './components/PdfPreview';
 export * from './components/SubmissionInspector';
 export * from './components/Dropdown';

package/dist/types/lib/inlineFiles.d.ts

@@ -9,3 +9,4 @@ declare const _default: (modelMap: Map<string, Model>, attachments: SubmissionAt
     attachments?: SubmissionAttachment[] | undefined;
 }[];
 export default _default;
+export declare const getSupplementFiles: (modelMap: Map<string, Model>, attachments: SubmissionAttachment[]) => SubmissionAttachment[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "0.31.10",
+  "version": "0.31.13",
   "repository": "gitlab:atypon-opensource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",