@manuscripts/style-guide 1.1.8 → 1.1.9

package/dist/cjs/components/Dropdown.js

@@ -14,7 +14,7 @@ exports.DropdownList = styled_components_1.default.div `
   box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
   background: ${(props) => props.theme.colors.background.primary};
   width: ${(props) => (props.width ? props.width + 'px' : 'auto')};
-  ${(props) => props.height && `height: ${props.height}px`};
+  ${(props) => props.height && `max-height: ${props.height}px`};
   ${(props) => (props.direction === 'right' ? ' right: 0' : 'left : 0')};
   top: ${(props) => props.theme.grid.unit * (props.top || 3)}px;
   position: absolute;

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

@@ -1,11 +1,45 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __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.ConfirmationPopUp = void 0;
-const react_1 = __importDefault(require("react"));
+exports.MoveFilePopup = exports.ConfirmationPopUp = void 0;
+const json_schema_1 = require("@manuscripts/json-schema");
+const transform_1 = require("@manuscripts/transform");
+const react_1 = __importStar(require("react"));
 const Dialog_1 = require("../Dialog");
+const FileManagerProvider_1 = require("./FileManagerProvider");
+const FileSectionState_1 = require("./FileSectionState");
+const util_1 = require("./util");
 const ConfirmationPopUp = ({ popupHeader, popUpMessage, isOpen, handleClose, handleMove }) => {
     return (react_1.default.createElement(Dialog_1.Dialog, { isOpen: isOpen, category: Dialog_1.Category.confirmation, header: popupHeader, message: popUpMessage, actions: {
             primary: {
@@ -19,3 +53,38 @@ const ConfirmationPopUp = ({ popupHeader, popUpMessage, isOpen, handleClose, han
         } }));
 };
 exports.ConfirmationPopUp = ConfirmationPopUp;
+const MoveFilePopup = ({ dispatch, }) => {
+    const { moveFilePopup: { isOpen, fileSection, attachmentId }, saveModel, deleteModel, modelMap, getAttachments, setMoveFilePopupData, } = (0, react_1.useContext)(FileManagerProvider_1.FileManagerContext);
+    const isSupplement = fileSection === util_1.FileSectionType.Supplements;
+    const message = {
+        popupHeader: `Are you sure you want to move this file to “${(!isSupplement && 'Supplements') || 'Other files'}”?`,
+        popUpMessage: `The file will be removed from the “${(isSupplement && 'Supplements') || 'Other files'}” and added to “${(!isSupplement && 'Supplements') || 'Other files'}”.`,
+    };
+    const closePopup = (0, react_1.useCallback)(() => setMoveFilePopupData({
+        isOpen: false,
+        fileSection: fileSection,
+    }), [fileSection, setMoveFilePopupData]);
+    const showSuccessMessage = (0, react_1.useCallback)(() => dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE(`File moved to ${(isSupplement && 'Other files') || 'Supplements'}.`, fileSection)), [dispatch, fileSection, isSupplement]);
+    const moveToSupplement = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        closePopup();
+        const attachment = getAttachments().find(({ id }) => id === attachmentId);
+        if (!attachment) {
+            return;
+        }
+        const model = (0, transform_1.buildSupplementaryMaterial)(attachment.name, `attachment:${attachment.id}`);
+        yield saveModel(Object.assign(Object.assign({}, model), { title: attachment.name, href: `attachment:${attachment.id}` }));
+        showSuccessMessage();
+    }), [getAttachments, saveModel, showSuccessMessage, closePopup, attachmentId]);
+    const moveSupplementToOtherFiles = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        closePopup();
+        const model = (0, transform_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.Supplement).find(({ href }) => (href === null || href === void 0 ? void 0 : href.replace('attachment:', '')) === attachmentId);
+        if (!model) {
+            return;
+        }
+        yield deleteModel(model._id);
+        showSuccessMessage();
+    }), [attachmentId, closePopup, deleteModel, modelMap, showSuccessMessage]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(exports.ConfirmationPopUp, Object.assign({ isOpen: isOpen }, message, { handleMove: () => (!isSupplement && moveToSupplement()) || moveSupplementToOtherFiles(), handleClose: closePopup }))));
+};
+exports.MoveFilePopup = MoveFilePopup;

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

@@ -43,6 +43,8 @@ const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const index_1 = require("../../index");
 const Inspector_1 = require("../Inspector");
 const InspectorSection_1 = require("../InspectorSection");
+const ConfirmationPopUp_1 = require("./ConfirmationPopUp");
+const FileManagerProvider_1 = require("./FileManagerProvider");
 const DraggableFileSectionItem_1 = require("./FileSectionItem/DraggableFileSectionItem");
 const DragLayer_1 = require("./FileSectionItem/DragLayer");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
@@ -52,7 +54,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 = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, replace, upload }, addAttachmentToState, }) => {
+const FileManager = ({ modelMap, saveModel, deleteModel, enableDragAndDrop, can, fileManagement: { getAttachments, replace, upload }, addAttachmentToState, }) => {
     const [state, dispatch] = (0, react_1.useReducer)(FileSectionState_1.reducer, (0, FileSectionState_1.getInitialState)());
     const handleReplaceFile = (0, react_1.useCallback)((attachmentId, name, file) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
@@ -136,7 +138,7 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
         });
         return filesItems;
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(FileManagerProvider_1.FileManagerProvider, { saveModel: saveModel, modelMap: modelMap, deleteModel: deleteModel, getAttachments: getAttachments },
         react_1.default.createElement(DragLayer_1.DragLayer, null),
         react_1.default.createElement(exports.PermissionsContext.Provider, { value: can },
             react_1.default.createElement(InspectorSection_1.InspectorSection, { title: 'Files', contentStyles: { margin: '24px' } },
@@ -163,6 +165,7 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: index_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(index_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
-                            react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: index_1.FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(index_1.FileSectionType.OtherFile), state: state, dispatch: dispatch }))))))));
+                            react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: index_1.FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(index_1.FileSectionType.OtherFile), state: state, dispatch: dispatch }))))),
+            react_1.default.createElement(ConfirmationPopUp_1.MoveFilePopup, { dispatch: dispatch }))));
 };
 exports.FileManager = FileManager;

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

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileManagerProvider = exports.FileManagerContext = void 0;
+const react_1 = __importStar(require("react"));
+exports.FileManagerContext = (0, react_1.createContext)({
+    saveModel: () => '',
+    moveFilePopup: { isOpen: false },
+    setMoveFilePopupData: () => '',
+});
+const FileManagerProvider = ({ children, saveModel, deleteModel, modelMap, getAttachments }) => {
+    const [moveFilePopup, setMoveFilePopupData] = (0, react_1.useState)({ isOpen: false });
+    return (react_1.default.createElement(exports.FileManagerContext.Provider, { value: {
+            saveModel,
+            deleteModel,
+            modelMap,
+            getAttachments,
+            moveFilePopup,
+            setMoveFilePopupData,
+        } }, children));
+};
+exports.FileManagerProvider = FileManagerProvider;

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

@@ -36,7 +36,7 @@ const FileSectionItem = ({ fileSection, externalFile, title, showAttachmentName
         handleDownload && handleReplace && (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, { fileSection: fileSection, replaceAttachmentHandler: handleReplace, showReplaceAction: showReplaceAction, downloadAttachmentHandler: handleDownload, handleSupplementReplace: handleSupplementReplace, attachmentId: externalFile.id, fileName: externalFile.name, publicUrl: externalFile.link, hideActionList: toggleOpen, dispatch: dispatch }))))));
+            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { fileSection: fileSection, isMainManuscript: isMainManuscript, replaceAttachmentHandler: handleReplace, showReplaceAction: showReplaceAction, downloadAttachmentHandler: handleDownload, handleSupplementReplace: handleSupplementReplace, attachmentId: externalFile.id, fileName: externalFile.name, 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

@@ -36,11 +36,13 @@ exports.ItemActions = void 0;
 const react_1 = __importStar(require("react"));
 const Dropdown_1 = require("../../Dropdown");
 const FileManager_1 = require("../FileManager");
+const FileManagerProvider_1 = require("../FileManagerProvider");
 const FileSectionState_1 = require("../FileSectionState");
 const ItemsAction_1 = require("../ItemsAction");
 const util_1 = require("../util");
-const ItemActions = ({ fileSection, downloadAttachmentHandler, replaceAttachmentHandler, handleSupplementReplace, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
+const ItemActions = ({ fileSection, isMainManuscript, downloadAttachmentHandler, replaceAttachmentHandler, handleSupplementReplace, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
     const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
+    const { setMoveFilePopupData } = (0, react_1.useContext)(FileManagerProvider_1.FileManagerContext);
     const canBeReplaced = showReplaceAction == undefined || showReplaceAction;
     const fileInputRef = (0, react_1.useRef)(null);
     const [selectedFile, setSelectedFile] = (0, react_1.useState)();
@@ -71,13 +73,20 @@ const ItemActions = ({ fileSection, downloadAttachmentHandler, replaceAttachment
             fileInputRef.current.click();
         }
     };
-    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 120, top: 5, onClick: hideActionList },
+    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 200, height: 120, top: 5, onClick: hideActionList },
         react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
         (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: '' }))),
-        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach"))));
+        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach")),
+        !isMainManuscript &&
+            fileSection !== util_1.FileSectionType.Inline &&
+            (can === null || can === void 0 ? void 0 : can.moveFile) && (react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => setMoveFilePopupData({ isOpen: true, attachmentId, fileSection }) },
+            "Move to",
+            ' ',
+            (fileSection === util_1.FileSectionType.OtherFile && 'Supplements') ||
+                'Other files'))));
 };
 exports.ItemActions = ItemActions;

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

@@ -33,7 +33,7 @@ const reducer = (state, action) => {
                 }, successMessage: action.successMoveMessage, isShowSuccessMessage: false });
         }
         case ActionTypes.HANDLE_UPLOAD_ACTION: {
-            return Object.assign(Object.assign({}, state), { isUploadFile: true, isShowSuccessMessage: false, successMessage: '' });
+            return Object.assign(Object.assign({}, state), { isUploadFile: true, isShowSuccessMessage: false, fileUploadedSuccessfullySection: undefined, successMessage: '' });
         }
         case ActionTypes.HANDLE_CANCEL_UPLOAD: {
             return Object.assign({}, state);

package/dist/cjs/lib/capabilities.js

@@ -40,6 +40,7 @@ const getCapabilities = (project, profile, role, actions) => {
         downloadFiles: true,
         changeDesignation: (isOwner() || isEditor() || isWriter()) &&
             allowed(Actions.updateAttachment),
+        moveFile: isOwner() || isEditor() || isWriter(),
         replaceFile: isOwner() || isEditor() || isWriter(),
         uploadFile: isOwner() || isEditor() || isWriter(),
         handleQualityReport: isOwner() || isEditor() || isWriter(),

package/dist/es/components/Dropdown.js

@@ -8,7 +8,7 @@ export const DropdownList = styled.div `
   box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
   background: ${(props) => props.theme.colors.background.primary};
   width: ${(props) => (props.width ? props.width + 'px' : 'auto')};
-  ${(props) => props.height && `height: ${props.height}px`};
+  ${(props) => props.height && `max-height: ${props.height}px`};
   ${(props) => (props.direction === 'right' ? ' right: 0' : 'left : 0')};
   top: ${(props) => props.theme.grid.unit * (props.top || 3)}px;
   position: absolute;

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

@@ -1,5 +1,19 @@
-import React from 'react';
+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 { ObjectTypes } from '@manuscripts/json-schema';
+import { buildSupplementaryMaterial, getModelsByType, } from '@manuscripts/transform';
+import React, { useCallback, useContext } from 'react';
 import { Category, Dialog } from '../Dialog';
+import { FileManagerContext } from './FileManagerProvider';
+import { actions } from './FileSectionState';
+import { FileSectionType } from './util';
 export const ConfirmationPopUp = ({ popupHeader, popUpMessage, isOpen, handleClose, handleMove }) => {
     return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: popupHeader, message: popUpMessage, actions: {
             primary: {
@@ -12,3 +26,37 @@ export const ConfirmationPopUp = ({ popupHeader, popUpMessage, isOpen, handleClo
             },
         } }));
 };
+export const MoveFilePopup = ({ dispatch, }) => {
+    const { moveFilePopup: { isOpen, fileSection, attachmentId }, saveModel, deleteModel, modelMap, getAttachments, setMoveFilePopupData, } = useContext(FileManagerContext);
+    const isSupplement = fileSection === FileSectionType.Supplements;
+    const message = {
+        popupHeader: `Are you sure you want to move this file to “${(!isSupplement && 'Supplements') || 'Other files'}”?`,
+        popUpMessage: `The file will be removed from the “${(isSupplement && 'Supplements') || 'Other files'}” and added to “${(!isSupplement && 'Supplements') || 'Other files'}”.`,
+    };
+    const closePopup = useCallback(() => setMoveFilePopupData({
+        isOpen: false,
+        fileSection: fileSection,
+    }), [fileSection, setMoveFilePopupData]);
+    const showSuccessMessage = useCallback(() => dispatch(actions.HANDLE_SUCCESS_MESSAGE(`File moved to ${(isSupplement && 'Other files') || 'Supplements'}.`, fileSection)), [dispatch, fileSection, isSupplement]);
+    const moveToSupplement = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        closePopup();
+        const attachment = getAttachments().find(({ id }) => id === attachmentId);
+        if (!attachment) {
+            return;
+        }
+        const model = buildSupplementaryMaterial(attachment.name, `attachment:${attachment.id}`);
+        yield saveModel(Object.assign(Object.assign({}, model), { title: attachment.name, href: `attachment:${attachment.id}` }));
+        showSuccessMessage();
+    }), [getAttachments, saveModel, showSuccessMessage, closePopup, attachmentId]);
+    const moveSupplementToOtherFiles = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        closePopup();
+        const model = getModelsByType(modelMap, ObjectTypes.Supplement).find(({ href }) => (href === null || href === void 0 ? void 0 : href.replace('attachment:', '')) === attachmentId);
+        if (!model) {
+            return;
+        }
+        yield deleteModel(model._id);
+        showSuccessMessage();
+    }), [attachmentId, closePopup, deleteModel, modelMap, showSuccessMessage]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ConfirmationPopUp, Object.assign({ isOpen: isOpen }, message, { handleMove: () => (!isSupplement && moveToSupplement()) || moveSupplementToOtherFiles(), handleClose: closePopup }))));
+};

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

@@ -14,6 +14,8 @@ import ReactTooltip from 'react-tooltip';
 import { FileSectionType, useFiles } from '../../index';
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
 import { InspectorSection } from '../InspectorSection';
+import { MoveFilePopup } from './ConfirmationPopUp';
+import { FileManagerProvider } from './FileManagerProvider';
 import { DraggableFileSectionItem } from './FileSectionItem/DraggableFileSectionItem';
 import { DragLayer } from './FileSectionItem/DragLayer';
 import { FileSectionItem, } from './FileSectionItem/FileSectionItem';
@@ -23,7 +25,7 @@ import { InlineFilesSection } from './InlineFilesSection';
 import { TooltipDiv } from './TooltipDiv';
 import { generateAttachmentsTitles } from './util';
 export const PermissionsContext = createContext(null);
-export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, replace, upload }, addAttachmentToState, }) => {
+export const FileManager = ({ modelMap, saveModel, deleteModel, enableDragAndDrop, can, fileManagement: { getAttachments, replace, upload }, addAttachmentToState, }) => {
     const [state, dispatch] = useReducer(reducer, getInitialState());
     const handleReplaceFile = useCallback((attachmentId, name, file) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(actions.HANDLE_UPLOAD_ACTION());
@@ -107,7 +109,7 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
         });
         return filesItems;
     };
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(FileManagerProvider, { saveModel: saveModel, modelMap: modelMap, deleteModel: deleteModel, getAttachments: getAttachments },
         React.createElement(DragLayer, null),
         React.createElement(PermissionsContext.Provider, { value: can },
             React.createElement(InspectorSection, { title: 'Files', contentStyles: { margin: '24px' } },
@@ -134,5 +136,6 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
-                            React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(FileSectionType.OtherFile), state: state, dispatch: dispatch }))))))));
+                            React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(FileSectionType.OtherFile), state: state, dispatch: dispatch }))))),
+            React.createElement(MoveFilePopup, { dispatch: dispatch }))));
 };

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

@@ -0,0 +1,17 @@
+import React, { createContext, useState } from 'react';
+export const FileManagerContext = createContext({
+    saveModel: () => '',
+    moveFilePopup: { isOpen: false },
+    setMoveFilePopupData: () => '',
+});
+export const FileManagerProvider = ({ children, saveModel, deleteModel, modelMap, getAttachments }) => {
+    const [moveFilePopup, setMoveFilePopupData] = useState({ isOpen: false });
+    return (React.createElement(FileManagerContext.Provider, { value: {
+            saveModel,
+            deleteModel,
+            modelMap,
+            getAttachments,
+            moveFilePopup,
+            setMoveFilePopupData,
+        } }, children));
+};

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

@@ -30,7 +30,7 @@ export const FileSectionItem = ({ fileSection, externalFile, title, showAttachme
         handleDownload && handleReplace && (React.createElement(DropdownContainer, { ref: wrapperRef },
             React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
-            isOpen && (React.createElement(ItemActions, { fileSection: fileSection, replaceAttachmentHandler: handleReplace, showReplaceAction: showReplaceAction, downloadAttachmentHandler: handleDownload, handleSupplementReplace: handleSupplementReplace, attachmentId: externalFile.id, fileName: externalFile.name, publicUrl: externalFile.link, hideActionList: toggleOpen, dispatch: dispatch }))))));
+            isOpen && (React.createElement(ItemActions, { fileSection: fileSection, isMainManuscript: isMainManuscript, replaceAttachmentHandler: handleReplace, showReplaceAction: showReplaceAction, downloadAttachmentHandler: handleDownload, handleSupplementReplace: handleSupplementReplace, attachmentId: externalFile.id, fileName: externalFile.name, publicUrl: externalFile.link, hideActionList: toggleOpen, dispatch: dispatch }))))));
 };
 const IconCloseButton = styled.button `
   border: none;

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

@@ -10,11 +10,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React, { useContext, useRef, useState, } from 'react';
 import { DropdownList } from '../../Dropdown';
 import { PermissionsContext } from '../FileManager';
+import { FileManagerContext } from '../FileManagerProvider';
 import { actions } from '../FileSectionState';
 import { ActionsItem } from '../ItemsAction';
 import { FileSectionType } from '../util';
-export const ItemActions = ({ fileSection, downloadAttachmentHandler, replaceAttachmentHandler, handleSupplementReplace, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
+export const ItemActions = ({ fileSection, isMainManuscript, downloadAttachmentHandler, replaceAttachmentHandler, handleSupplementReplace, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
     const can = useContext(PermissionsContext);
+    const { setMoveFilePopupData } = useContext(FileManagerContext);
     const canBeReplaced = showReplaceAction == undefined || showReplaceAction;
     const fileInputRef = useRef(null);
     const [selectedFile, setSelectedFile] = useState();
@@ -45,12 +47,19 @@ export const ItemActions = ({ fileSection, downloadAttachmentHandler, replaceAtt
             fileInputRef.current.click();
         }
     };
-    return (React.createElement(DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 120, top: 5, onClick: hideActionList },
+    return (React.createElement(DropdownList, { direction: 'right', className: dropDownClassName, width: 200, height: 120, top: 5, onClick: hideActionList },
         React.createElement(ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
         (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: '' }))),
-        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (React.createElement(ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach"))));
+        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (React.createElement(ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach")),
+        !isMainManuscript &&
+            fileSection !== FileSectionType.Inline &&
+            (can === null || can === void 0 ? void 0 : can.moveFile) && (React.createElement(ActionsItem, { onClick: () => setMoveFilePopupData({ isOpen: true, attachmentId, fileSection }) },
+            "Move to",
+            ' ',
+            (fileSection === FileSectionType.OtherFile && 'Supplements') ||
+                'Other files'))));
 };

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

@@ -29,7 +29,7 @@ export const reducer = (state, action) => {
                 }, successMessage: action.successMoveMessage, isShowSuccessMessage: false });
         }
         case ActionTypes.HANDLE_UPLOAD_ACTION: {
-            return Object.assign(Object.assign({}, state), { isUploadFile: true, isShowSuccessMessage: false, successMessage: '' });
+            return Object.assign(Object.assign({}, state), { isUploadFile: true, isShowSuccessMessage: false, fileUploadedSuccessfullySection: undefined, successMessage: '' });
         }
         case ActionTypes.HANDLE_CANCEL_UPLOAD: {
             return Object.assign({}, state);

package/dist/es/lib/capabilities.js

@@ -34,6 +34,7 @@ export const getCapabilities = (project, profile, role, actions) => {
         downloadFiles: true,
         changeDesignation: (isOwner() || isEditor() || isWriter()) &&
             allowed(Actions.updateAttachment),
+        moveFile: isOwner() || isEditor() || isWriter(),
         replaceFile: isOwner() || isEditor() || isWriter(),
         uploadFile: isOwner() || isEditor() || isWriter(),
         handleQualityReport: isOwner() || isEditor() || isWriter(),

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { Dispatch } from 'react';
+import { Action } from './FileSectionState';
 export declare const ConfirmationPopUp: React.FC<{
     popupHeader: string;
     popUpMessage: string;
@@ -6,3 +7,6 @@ export declare const ConfirmationPopUp: React.FC<{
     handleClose: () => void;
     handleMove: () => void;
 }>;
+export declare const MoveFilePopup: React.FC<{
+    dispatch: Dispatch<Action>;
+}>;

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

@@ -15,6 +15,7 @@ export declare const FileManager: React.FC<{
     fileManagement: FileManagement;
     modelMap: Map<string, Model>;
     saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
+    deleteModel: (id: string) => Promise<string>;
     enableDragAndDrop: boolean;
     can: Capabilities;
     addAttachmentToState?: (a: FileAttachment) => void;

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

@@ -0,0 +1,25 @@
+import { Model } from '@manuscripts/json-schema';
+import { Build } from '@manuscripts/transform';
+import React, { Dispatch, SetStateAction } from 'react';
+import { FileAttachment } from './FileSectionItem/FileSectionItem';
+import { FileSectionType } from './util';
+type MoveFilePopup = {
+    isOpen: boolean;
+    fileSection?: FileSectionType;
+    attachmentId?: string;
+};
+export declare const FileManagerContext: React.Context<{
+    saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
+    deleteModel: (id: string) => Promise<string>;
+    modelMap: Map<string, Model>;
+    getAttachments: () => FileAttachment[];
+    moveFilePopup: MoveFilePopup;
+    setMoveFilePopupData: Dispatch<SetStateAction<MoveFilePopup>>;
+}>;
+export declare const FileManagerProvider: React.FC<{
+    saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
+    deleteModel: (id: string) => Promise<string>;
+    modelMap: Map<string, Model>;
+    getAttachments: () => FileAttachment[];
+}>;
+export {};

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

@@ -5,6 +5,7 @@ import { FileSectionType } from '../util';
 import { FileAttachment } from './FileSectionItem';
 export declare const ItemActions: React.FC<{
     fileSection: FileSectionType;
+    isMainManuscript?: boolean;
     downloadAttachmentHandler: (url: string) => void;
     replaceAttachmentHandler: Replace;
     detachAttachmnetHandler?: () => void;

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

@@ -20,6 +20,7 @@ export type Capabilities = {
     restoreVersion: boolean;
     downloadFiles: boolean;
     changeDesignation: boolean;
+    moveFile: boolean;
     replaceFile: boolean;
     uploadFile: boolean;
     handleQualityReport: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",