@manuscripts/style-guide 0.30.22 → 0.30.25

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

@@ -42,51 +42,34 @@ const DragLayer_1 = require("./FileSectionItem/DragLayer");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const FileSectionState_1 = require("./FileSectionState");
 const FilesSection_1 = require("./FilesSection");
+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, 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);
@@ -94,12 +77,12 @@ const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, hand
     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,
@@ -113,10 +96,10 @@ const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, hand
                 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;
@@ -147,7 +130,7 @@ const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, hand
                                 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(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: false, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.Inline, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Inline), state: state, 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

@@ -22,29 +22,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileName = exports.FileNameContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
+exports.FileDescription = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
 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 })),
-        react_1.default.createElement(FileNameTitleContainer, null,
-            react_1.default.createElement(FileTitle, null,
+            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,
                 showAttachmentName && ':'),
             showAttachmentName && (react_1.default.createElement(exports.FileNameContainer, null,
                 react_1.default.createElement(exports.FileName, null, fileName),
                 react_1.default.createElement("div", null,
                     ".",
-                    fileExtension)))),
-        description && react_1.default.createElement(FileDescription, null, description)));
+                    fileExtension))))));
 };
 exports.FileInfo = FileInfo;
 exports.FileInfoContainer = styled_components_1.default.div `
@@ -56,11 +55,11 @@ exports.FileInfoContainer = styled_components_1.default.div `
   align-items: start;
   width: 100%;
 `;
-const FileNameTitleContainer = styled_components_1.default.div `
+exports.FileNameTitleContainer = styled_components_1.default.div `
   display: flex;
   width: 100%;
 `;
-const FileTitle = styled_components_1.default.div `
+exports.FileTitle = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.primary};
   font-weight: bold;
   font-size: 16px;
@@ -82,7 +81,7 @@ exports.FileName = styled_components_1.default.div `
   white-space: nowrap;
   overflow: hidden;
 `;
-const FileDescription = styled_components_1.default.div `
+exports.FileDescription = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.secondary};
   font-size: 14px;
   line-height: 20px;

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/FileTypeIcon.js

@@ -7,46 +7,37 @@ exports.FileTypeIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const document_icon_with_dot_1 = __importDefault(require("../../icons/document-icon-with-dot"));
 const unknown_format_file_icon_1 = __importDefault(require("../../icons/unknown-format-file-icon"));
 const TooltipDiv_1 = require("../TooltipDiv");
 const util_1 = require("../util");
 const FileTypeIcon = ({ withDot, fileExtension, alt }) => {
     let fileIcon = react_1.default.createElement(unknown_format_file_icon_1.default, null);
+    if (withDot) {
+        return (react_1.default.createElement(Container, null,
+            react_1.default.createElement(document_icon_with_dot_1.default, null),
+            react_1.default.createElement(TooltipDiv_1.TooltipDiv, null,
+                react_1.default.createElement(react_tooltip_1.default, { id: "dot", place: "bottom", effect: "float", className: "tooltip" },
+                    react_1.default.createElement("div", null, "Main manuscript. Only one file per submission")))));
+    }
     if (fileExtension) {
         const fileType = util_1.extensionsWithFileTypesMap.get(fileExtension.toLowerCase());
         fileIcon = util_1.fileTypesWithIconMap.get(fileType);
     }
-    return (react_1.default.createElement(Container, null,
-        withDot && react_1.default.createElement(Dot, { "data-for": "dot", "data-tip": true }),
-        react_1.default.createElement(TooltipDiv_1.TooltipDiv, null,
-            react_1.default.createElement(react_tooltip_1.default, { id: "dot", place: "bottom", offset: { bottom: -7 }, effect: "solid", className: "tooltip" },
-                react_1.default.createElement("div", null, "Main manuscript. Only one file per submission"))),
-        fileIcon));
+    return react_1.default.createElement(Container, null, fileIcon);
 };
 exports.FileTypeIcon = FileTypeIcon;
 const Container = styled_components_1.default.div `
   width: 40px;
   min-width: 40px;
   height: 40px;
-  background-color: ${(props) => props.theme.colors.background.secondary};
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #f2f2f2;
   box-sizing: border-box;
   border-radius: 4px;
   position: relative;
 `;
-const Dot = styled_components_1.default.div `
-  width: 12px;
-  height: 12px;
-  background: #1a9bc7;
-  border: 2px solid #ffffff;
-  border-radius: 50%;
-  position: absolute;
-  top: -8px;
-  left: -8px;
-`;
 const Img = styled_components_1.default.img `
   width: 100%;
   height: 100%;

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, }) => {
+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();
         }
     };
@@ -46,7 +46,7 @@ const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, subm
             fileInputRef.current.click();
         }
     };
-    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', width: 125, height: 96, top: 5, onClick: hideActionList },
+    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 96, top: 5, onClick: hideActionList },
         react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),

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

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineFilesSection = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const use_dropdown_1 = require("../../hooks/use-dropdown");
+const inlineFiles_1 = __importDefault(require("../../lib/inlineFiles"));
+const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
+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, 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 },
+            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.externalFileReferences) === null || _a === void 0 ? void 0 : _a.map((externalFile, index) => (react_1.default.createElement(FileReference, { key: index, externalFile: externalFile.ref, submissionId: submissionId, handleReplace: handleReplace, 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,
+                    react_1.default.createElement(FileInfo_1.FileNameTitleContainer, null,
+                        react_1.default.createElement(FileInfo_1.FileTitle, null, file.label)),
+                    file.caption && (react_1.default.createElement(FileInfo_1.FileDescription, null, file.caption))))));
+    })));
+};
+exports.InlineFilesSection = InlineFilesSection;
+const FileReference = ({ externalFile, submissionId, handleReplace, handleDownload, dispatch, }) => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
+    if (!externalFile || !externalFile.filename) {
+        return null;
+    }
+    const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
+    return (react_1.default.createElement(FileReferenceItem, { key: externalFile._id },
+        react_1.default.createElement(Container, null,
+            util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
+            react_1.default.createElement(FileReferenceName, null, externalFile.filename)),
+        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: 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;
+  // this will allow us to select the previous sibling node,
+  // to change the background on the hover for adjacent node
+  flex-direction: column-reverse;
+  padding: 0;
+
+  :hover {
+    background: #f2fbfc;
+  }
+
+  .refItems:hover ~ .element {
+    background: white !important;
+  }
+
+  .refItems:hover {
+    background: white !important;
+  }
+
+  border-bottom: 1px dashed #f0f0f0;
+
+  :last-child {
+    border-bottom: 0;
+  }
+`;
+const Container = styled_components_1.default.div `
+  display: flex;
+`;
+const Element = styled_components_1.default.div `
+  display: flex;
+  padding: 20px 15px;
+`;
+const FileReferences = styled_components_1.default.div ``;
+const FileReferenceItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  svg {
+    width: 14px;
+    height: 17px;
+  }
+
+  path {
+    fill: #6e6e6e;
+  }
+
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+
+  :hover {
+    background: #f2fbfc;
+  }
+
+  .external_file_dropdown {
+    opacity: 0;
+  }
+  :hover .external_file_dropdown {
+    opacity: 1;
+  }
+
+  .ref_item_dropdown {
+    top: 65%;
+    right: 10px;
+    width: 180px;
+  }
+  :last-child {
+    margin-bottom: 25px;
+  }
+`;
+const FileReferenceName = styled_components_1.default.div `
+  font-family: ${(props) => props.theme.font.family.Lato};
+  font-size: ${(props) => props.theme.font.size.medium};
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  color: ${(props) => props.theme.colors.text.primary};
+  margin-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const DropdownContainer = styled_components_1.default.div `
+  position: relative;
+`;