@manuscripts/style-guide 1.0.6-LEAN-2237 → 1.0.7

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

@@ -51,10 +51,11 @@ 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, enableDragAndDrop, can, fileManagement: { getAttachments, changeDesignation, 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, 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 replace(attachmentId, name, file, typeId);
         dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
         if (res) {
@@ -64,6 +65,9 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
     }), [replace]);
     const handleUploadFile = (0, react_1.useCallback)((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
         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 upload(file, designation);
         dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
         if (res) {
@@ -83,6 +87,13 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
         }
         return response;
     }), [upload, saveModel]);
+    const handleChangeDesignationFile = (0, react_1.useCallback)((attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
+        const res = yield changeDesignation(attachmentId, typeId, name);
+        if (res) {
+            dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE(''));
+        }
+        return res;
+    }), [changeDesignation]);
     const handleDownload = (0, react_1.useCallback)((url) => {
         window.location.assign(url);
     }, []);
@@ -114,9 +125,11 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
                 externalFile: element.externalFile,
                 title: element.title,
                 showAttachmentName: isSupplementOrOtherFilesTab,
+                showDesignationActions: isSupplementOrOtherFilesTab,
                 showReplaceAction: !isOtherFilesTab,
                 handleDownload,
                 handleReplace: handleReplaceFile,
+                handleChangeDesignation: handleChangeDesignationFile,
                 dispatch: dispatch,
             };
             if (enableDragAndDrop && isSupplementOrOtherFilesTab) {

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

@@ -30,10 +30,12 @@ exports.FileDescription = exports.FileName = exports.FileNameContainer = exports
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FileManager_1 = require("../FileManager");
-const FileInfo = ({ showAttachmentName, title, submissionAttachmentName, fileExtension, attachmentId, dispatch, }) => {
+const DesignationActions_1 = require("./DesignationActions");
+const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissionAttachmentName, fileExtension, designation, attachmentId, handleChangeDesignation, 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,
+        showDesignationActions && designation !== undefined && (react_1.default.createElement(DesignationActions_1.DesignationActions, { designation: designation, attachmentId: attachmentId, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, fileName: submissionAttachmentName, dispatch: dispatch, can: can })),
         react_1.default.createElement(exports.FileNameTitleContainer, null,
             react_1.default.createElement(exports.FileTitle, null,
                 !showAttachmentName ? fileName : title,

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

@@ -14,7 +14,7 @@ const util_1 = require("../util");
 const FileInfo_1 = require("./FileInfo");
 const FileTypeIcon_1 = require("./FileTypeIcon");
 const ItemActions_1 = require("./ItemActions");
-const FileSectionItem = ({ externalFile, title, showAttachmentName = false, showReplaceAction = true, handleDownload, handleReplace, dispatch, dragRef, className, style, onClose, isEditor, }) => {
+const FileSectionItem = ({ externalFile, title, showAttachmentName = false, showDesignationActions = false, showReplaceAction = true, handleDownload, handleReplace, handleChangeDesignation, dispatch, dragRef, className, style, onClose, isEditor, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
     const fileExtension = externalFile.name.substring(externalFile.name.lastIndexOf('.') + 1);
     const designation = util_1.namesWithDesignationMap.get(externalFile.type.label);
@@ -29,7 +29,7 @@ const FileSectionItem = ({ externalFile, title, showAttachmentName = false, show
                 }
             } },
             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, submissionAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
+            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, dispatch: dispatch })),
         onClose && (react_1.default.createElement(IconCloseButton, { onClick: (e) => {
                 e.preventDefault();
                 onClose();

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

@@ -62,6 +62,7 @@ const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, deta
             setSelectedFile(file);
             if (dispatch) {
                 dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
+                dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(attachmentDesignationName || util_1.Designation.Document));
             }
             const result = yield replaceAttachmentHandler(attachmentId, fileName, file, attachmentDesignation);
             if (typeof result === 'object' && handleUpdateInline) {

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

@@ -30,6 +30,7 @@ const DragItemArea_1 = require("./DragItemArea");
 const FileManager_1 = require("./FileManager");
 const FileSectionUploadItem_1 = require("./FileSectionItem/FileSectionUploadItem");
 const FileSectionState_1 = require("./FileSectionState");
+const SelectDialogDesignation_1 = require("./SelectDialogDesignation");
 const UploadFileArea_1 = require("./UploadFileArea");
 const util_1 = require("./util");
 const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, filesItem, dispatch, state, }) => {
@@ -39,12 +40,13 @@ const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, filesItem,
     }
     const isSupplementFilesTab = fileSection === util_1.FileSectionType.Supplements;
     const isOtherFileTab = fileSection === util_1.FileSectionType.OtherFile;
-    const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
-    const EMPTY_DESIGNATION = '';
-    (0, react_1.useEffect)(() => {
+    const handleUploadOtherFile = () => {
         dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
-        state.uploadedFile && handleUpload(state.uploadedFile, EMPTY_DESIGNATION);
-    }, [state.uploadedFile, dispatch, handleUpload]);
+        state.uploadedFile &&
+            state.selectDesignation !== undefined &&
+            handleUpload(state.uploadedFile, (0, util_1.getDesignationName)(state.selectDesignation));
+    };
+    const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
     const handleSuccessMessage = () => {
         return (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.success, hideCloseButton: true, dismissButton: {
                 text: 'OK',
@@ -54,9 +56,14 @@ const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, filesItem,
     return (react_1.default.createElement("div", null,
         (can === null || can === void 0 ? void 0 : can.uploadFile) && (react_1.default.createElement(react_1.default.Fragment, null,
             (isOtherFileTab || isSupplementFilesTab) && (react_1.default.createElement(UploadFileArea_1.UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, dispatch: dispatch })),
-            state.isUploadFile && state.uploadedFile && (react_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
+            state.isUploadFile &&
+                state.uploadedFile &&
+                state.selectDesignation !== undefined && (react_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
         state.fileUploadedSuccessfullySection === fileSection &&
             handleSuccessMessage(),
+        react_1.default.createElement(SelectDialogDesignation_1.SelectDialogDesignation, { isOpen: state.showDesignationPopup === fileSection, fileExtension: uploadedFileExtension, handleCancel: () => {
+                dispatch(FileSectionState_1.actions.HANDLE_CANCEL_UPLOAD());
+            }, uploadFileHandler: handleUploadOtherFile, dispatch: dispatch, fileSection: fileSection }),
         filesItem,
         (can === null || can === void 0 ? void 0 : can.changeDesignation) &&
             enableDragAndDrop &&

package/dist/cjs/index.js

@@ -32,7 +32,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.useDeepCompareCallback = exports.useDeepCompareMemo = exports.useFiles = exports.PdfPreview = void 0;
+exports.SelectDialogDesignation = exports.errorsDecoder = exports.useDeepCompareCallback = exports.useDeepCompareMemo = exports.useFiles = void 0;
 __exportStar(require("./components/AffiliationsEditor"), exports);
 __exportStar(require("./components/AffiliationsList"), exports);
 __exportStar(require("./components/AuthorForm"), exports);
@@ -66,8 +66,6 @@ __exportStar(require("./components/Inspector"), exports);
 __exportStar(require("./components/InspectorSection"), exports);
 __exportStar(require("./components/Badge"), exports);
 __exportStar(require("./components/NavDropdown"), exports);
-var PdfPreview_1 = require("./components/PdfPreview");
-Object.defineProperty(exports, "PdfPreview", { enumerable: true, get: function () { return __importDefault(PdfPreview_1).default; } });
 __exportStar(require("./components/SubmissionInspector"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./hooks/use-dropdown"), exports);

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

@@ -20,12 +20,13 @@ import { actions, getInitialState, reducer } from './FileSectionState';
 import { FilesSection } from './FilesSection';
 import { InlineFilesSection } from './InlineFilesSection';
 import { TooltipDiv } from './TooltipDiv';
-import { generateAttachmentsTitles } from './util';
+import { Designation, generateAttachmentsTitles, namesWithDesignationMap, } from './util';
 export const PermissionsContext = createContext(null);
-export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, replace, upload }, addAttachmentToState, }) => {
+export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, changeDesignation, replace, upload }, addAttachmentToState, }) => {
     const [state, dispatch] = useReducer(reducer, getInitialState());
     const handleReplaceFile = useCallback((attachmentId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(actions.HANDLE_UPLOAD_ACTION());
+        dispatch(actions.SELECT_DESIGNATION(namesWithDesignationMap.get(typeId) || Designation.Document));
         const res = yield replace(attachmentId, name, file, typeId);
         dispatch(actions.HANDLE_FINISH_UPLOAD());
         if (res) {
@@ -35,6 +36,9 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
     }), [replace]);
     const handleUploadFile = useCallback((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(actions.HANDLE_UPLOAD_ACTION());
+        if (namesWithDesignationMap.get(designation) == Designation.Supplementary) {
+            dispatch(actions.SELECT_DESIGNATION(Designation.Supplementary));
+        }
         const res = yield upload(file, designation);
         dispatch(actions.HANDLE_FINISH_UPLOAD());
         if (res) {
@@ -54,6 +58,13 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
         }
         return response;
     }), [upload, saveModel]);
+    const handleChangeDesignationFile = useCallback((attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
+        const res = yield changeDesignation(attachmentId, typeId, name);
+        if (res) {
+            dispatch(actions.HANDLE_SUCCESS_MESSAGE(''));
+        }
+        return res;
+    }), [changeDesignation]);
     const handleDownload = useCallback((url) => {
         window.location.assign(url);
     }, []);
@@ -85,9 +96,11 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
                 externalFile: element.externalFile,
                 title: element.title,
                 showAttachmentName: isSupplementOrOtherFilesTab,
+                showDesignationActions: isSupplementOrOtherFilesTab,
                 showReplaceAction: !isOtherFilesTab,
                 handleDownload,
                 handleReplace: handleReplaceFile,
+                handleChangeDesignation: handleChangeDesignationFile,
                 dispatch: dispatch,
             };
             if (enableDragAndDrop && isSupplementOrOtherFilesTab) {

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

@@ -1,10 +1,12 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { PermissionsContext } from '../FileManager';
-export const FileInfo = ({ showAttachmentName, title, submissionAttachmentName, fileExtension, attachmentId, dispatch, }) => {
+import { DesignationActions } from './DesignationActions';
+export const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissionAttachmentName, fileExtension, designation, attachmentId, handleChangeDesignation, dispatch, }) => {
     const fileName = submissionAttachmentName.substring(0, submissionAttachmentName.lastIndexOf('.'));
     const can = useContext(PermissionsContext);
     return (React.createElement(FileInfoContainer, null,
+        showDesignationActions && designation !== undefined && (React.createElement(DesignationActions, { designation: designation, attachmentId: attachmentId, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, fileName: submissionAttachmentName, dispatch: dispatch, can: can })),
         React.createElement(FileNameTitleContainer, null,
             React.createElement(FileTitle, null,
                 !showAttachmentName ? fileName : title,

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

@@ -8,7 +8,7 @@ import { Designation, namesWithDesignationMap } from '../util';
 import { FileInfo } from './FileInfo';
 import { FileTypeIcon } from './FileTypeIcon';
 import { ItemActions } from './ItemActions';
-export const FileSectionItem = ({ externalFile, title, showAttachmentName = false, showReplaceAction = true, handleDownload, handleReplace, dispatch, dragRef, className, style, onClose, isEditor, }) => {
+export const FileSectionItem = ({ externalFile, title, showAttachmentName = false, showDesignationActions = false, showReplaceAction = true, handleDownload, handleReplace, handleChangeDesignation, dispatch, dragRef, className, style, onClose, isEditor, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     const fileExtension = externalFile.name.substring(externalFile.name.lastIndexOf('.') + 1);
     const designation = namesWithDesignationMap.get(externalFile.type.label);
@@ -23,7 +23,7 @@ export const FileSectionItem = ({ externalFile, title, showAttachmentName = fals
                 }
             } },
             React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
-            React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, submissionAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
+            React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, showDesignationActions: showDesignationActions, submissionAttachmentName: externalFile.name, title: title, designation: designation, attachmentId: externalFile.id, handleChangeDesignation: handleChangeDesignation, dispatch: dispatch })),
         onClose && (React.createElement(IconCloseButton, { onClick: (e) => {
                 e.preventDefault();
                 onClose();

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

@@ -36,6 +36,7 @@ export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandle
             setSelectedFile(file);
             if (dispatch) {
                 dispatch(actions.HANDLE_UPLOAD_ACTION());
+                dispatch(actions.SELECT_DESIGNATION(attachmentDesignationName || Designation.Document));
             }
             const result = yield replaceAttachmentHandler(attachmentId, fileName, file, attachmentDesignation);
             if (typeof result === 'object' && handleUpdateInline) {

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

@@ -1,11 +1,12 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { AlertMessage, AlertMessageType } from '../AlertMessage';
 import { DragItemArea } from './DragItemArea';
 import { PermissionsContext } from './FileManager';
 import { FileSectionUploadItem } from './FileSectionItem/FileSectionUploadItem';
 import { actions } from './FileSectionState';
+import { SelectDialogDesignation } from './SelectDialogDesignation';
 import { UploadFileArea } from './UploadFileArea';
-import { FileSectionType } from './util';
+import { FileSectionType, getDesignationName } from './util';
 export const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, filesItem, dispatch, state, }) => {
     let uploadedFileExtension = '';
     if (state.uploadedFile) {
@@ -13,12 +14,13 @@ export const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, fil
     }
     const isSupplementFilesTab = fileSection === FileSectionType.Supplements;
     const isOtherFileTab = fileSection === FileSectionType.OtherFile;
-    const can = useContext(PermissionsContext);
-    const EMPTY_DESIGNATION = '';
-    useEffect(() => {
+    const handleUploadOtherFile = () => {
         dispatch(actions.HANDLE_UPLOAD_ACTION());
-        state.uploadedFile && handleUpload(state.uploadedFile, EMPTY_DESIGNATION);
-    }, [state.uploadedFile, dispatch, handleUpload]);
+        state.uploadedFile &&
+            state.selectDesignation !== undefined &&
+            handleUpload(state.uploadedFile, getDesignationName(state.selectDesignation));
+    };
+    const can = useContext(PermissionsContext);
     const handleSuccessMessage = () => {
         return (React.createElement(AlertMessage, { type: AlertMessageType.success, hideCloseButton: true, dismissButton: {
                 text: 'OK',
@@ -28,9 +30,14 @@ export const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, fil
     return (React.createElement("div", null,
         (can === null || can === void 0 ? void 0 : can.uploadFile) && (React.createElement(React.Fragment, null,
             (isOtherFileTab || isSupplementFilesTab) && (React.createElement(UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, dispatch: dispatch })),
-            state.isUploadFile && state.uploadedFile && (React.createElement(FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
+            state.isUploadFile &&
+                state.uploadedFile &&
+                state.selectDesignation !== undefined && (React.createElement(FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
         state.fileUploadedSuccessfullySection === fileSection &&
             handleSuccessMessage(),
+        React.createElement(SelectDialogDesignation, { isOpen: state.showDesignationPopup === fileSection, fileExtension: uploadedFileExtension, handleCancel: () => {
+                dispatch(actions.HANDLE_CANCEL_UPLOAD());
+            }, uploadFileHandler: handleUploadOtherFile, dispatch: dispatch, fileSection: fileSection }),
         filesItem,
         (can === null || can === void 0 ? void 0 : can.changeDesignation) &&
             enableDragAndDrop &&

package/dist/es/index.js

@@ -46,7 +46,6 @@ export * from './components/Inspector';
 export * from './components/InspectorSection';
 export * from './components/Badge';
 export * from './components/NavDropdown';
-export { default as PdfPreview } from './components/PdfPreview';
 export * from './components/SubmissionInspector';
 export * from './components/Dropdown';
 export * from './hooks/use-dropdown';

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

@@ -10,6 +10,7 @@ export interface FileManagement {
     getAttachments: () => SubmissionAttachment[];
     upload: Upload;
     replace: Replace;
+    changeDesignation: ChangeDesignation;
 }
 export declare const PermissionsContext: React.Context<Capabilities | null>;
 export declare const FileManager: React.FC<{

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

@@ -1,11 +1,16 @@
 import React, { Dispatch } from 'react';
+import { ChangeDesignation } from '../FileManager';
 import { Action } from '../FileSectionState';
+import { Designation } from '../util';
 export declare const FileInfo: React.FC<{
     showAttachmentName: boolean;
+    showDesignationActions: boolean;
     title: string;
     submissionAttachmentName: string;
     fileExtension: string;
+    designation?: Designation;
     attachmentId: string;
+    handleChangeDesignation: ChangeDesignation;
     dispatch?: Dispatch<Action>;
 }>;
 export declare const FileInfoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,7 +1,7 @@
 import React, { CSSProperties, Dispatch } from 'react';
 import { DragElementWrapper, DragSourceOptions } from 'react-dnd';
 import { Maybe } from '../../SubmissionInspector/types';
-import { Replace } from '../FileManager';
+import { ChangeDesignation, Replace } from '../FileManager';
 import { Action } from '../FileSectionState';
 export type SubmissionAttachment = {
     id: string;
@@ -17,10 +17,12 @@ export interface FileSectionItemProps {
     externalFile: SubmissionAttachment;
     title: string;
     showAttachmentName?: boolean;
+    showDesignationActions?: boolean;
     showActions?: boolean;
     showReplaceAction?: boolean;
     handleDownload?: (url: string) => void;
     handleReplace?: Replace;
+    handleChangeDesignation: ChangeDesignation;
     dispatch?: Dispatch<Action>;
     dragRef?: DragElementWrapper<DragSourceOptions>;
     className?: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Capabilities } from '../../lib/capabilities';
 import { Maybe } from '../SubmissionInspector/types';
 import { SubmissionAttachment } from './FileSectionItem/FileSectionItem';

package/dist/types/components/icons/add-author.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const AddAuthor: (props: IconProps) => JSX.Element;
 export default AddAuthor;

package/dist/types/components/icons/add-comment-icon.d.ts

@@ -13,6 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 declare const AddComment: () => JSX.Element;
 export default AddComment;

package/dist/types/components/icons/add-icon-active.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const AddIconActive: (props: IconProps) => JSX.Element;
 export default AddIconActive;

package/dist/types/components/icons/add-icon-inverted.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const AddIconInverted: (props: IconProps) => JSX.Element;
 export default AddIconInverted;

package/dist/types/components/icons/back-arrow.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 export declare const BackArrow: (props: IconProps) => JSX.Element;
 export default BackArrow;

package/dist/types/components/icons/bookmark.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const Bookmark: (props: IconProps) => JSX.Element;
 export default Bookmark;

package/dist/types/components/icons/google.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const Google: (props: IconProps) => JSX.Element;
 export default Google;

package/dist/types/components/icons/orcid.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const Orcid: (props: IconProps) => JSX.Element;
 export default Orcid;

package/dist/types/components/icons/plus-icon.d.ts

@@ -13,6 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 export declare const PlusIcon: () => JSX.Element;
 export default PlusIcon;

package/dist/types/components/icons/project-notification.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const ProjectNotification: (props: IconProps) => JSX.Element;
 export default ProjectNotification;

package/dist/types/components/icons/project.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const ProjectIcon: (props: IconProps) => JSX.Element;
 export default ProjectIcon;

package/dist/types/components/icons/projects-list.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const ProjectsList: (props: IconProps) => JSX.Element;
 export default ProjectsList;

package/dist/types/components/icons/search.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const SearchIcon: (props: IconProps) => JSX.Element;
 export default SearchIcon;

package/dist/types/components/icons/tick-mark.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const TickMark: (props: IconProps) => JSX.Element;
 export default TickMark;

package/dist/types/components/icons/user.d.ts

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/// <reference types="react" />
 import { IconProps } from './types';
 declare const User: (props: IconProps) => JSX.Element;
 export default User;

package/dist/types/index.d.ts

@@ -47,7 +47,6 @@ export * from './components/Inspector';
 export * from './components/InspectorSection';
 export * from './components/Badge';
 export * from './components/NavDropdown';
-export { default as PdfPreview } from './components/PdfPreview';
 export * from './components/SubmissionInspector';
 export * from './components/Dropdown';
 export * from './hooks/use-dropdown';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.0.6-LEAN-2237",
+  "version": "1.0.7",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,29 +32,51 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.3",
     "@formatjs/intl-relativetimeformat": "^4.5.9",
     "@formatjs/intl-utils": "^2.2.0",
+    "@manuscripts/assets": "^0.6.2",
+    "@manuscripts/transform": "^1.1.1",
+    "@manuscripts/json-schema": "^1.0.0",
+    "@manuscripts/title-editor": "^1.1.0",
+    "@manuscripts/comment-editor": "^1.0.1",
+    "@reach/tabs": "^0.11.2",
+    "formik": "^2.2.9",
     "date-fns": "^2.29.3",
     "lodash-es": "^4.17.21",
-    "pdfjs-dist": "^3.1.81",
     "tooltip.js": "^1.3.3",
-    "typeface-lato": "^1.1.13"
+    "typeface-lato": "^1.1.13",
+    "prosemirror-commands": "^1.5.0",
+    "prosemirror-history": "^1.3.0",
+    "prosemirror-inputrules": "^1.2.0",
+    "prosemirror-keymap": "^1.2.0",
+    "prosemirror-model": "^1.18.3",
+    "prosemirror-state": "^1.4.2",
+    "prosemirror-transform": "^1.7.0",
+    "prosemirror-view": "^1.29.1",
+    "react": "^17.0.2",
+    "react-color": "^2.19.3",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-dom": "^17.0.2",
+    "react-intl": "^3.12.0",
+    "react-modal": "^3.11.2",
+    "react-modern-calendar-datepicker": "^3.1.3",
+    "react-popper": "^1.3.11",
+    "react-router-dom": "^5.2.0",
+    "react-select": "^5.0.1",
+    "react-sizeme": "^2.6.12",
+    "react-tooltip": "^4.2.11",
+    "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@apollo/client": "^3.7.3",
     "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@manuscripts/assets": "^0.6.2",
-    "@manuscripts/comment-editor": "^1.0.0",
     "@manuscripts/data": "^0.1.0",
     "@manuscripts/eslint-config": "^0.5.1",
     "@manuscripts/examples": "^0.0.7",
-    "@manuscripts/json-schema": "^1.0.0",
-    "@manuscripts/title-editor": "^1.0.0",
-    "@manuscripts/transform": "^1.0.1",
-    "@reach/tabs": "^0.11.2",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addons": "^6.5.15",
     "@storybook/core": "^6.5.15",
@@ -84,36 +106,12 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "formik": "^2.2.9",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.1",
-    "prosemirror-commands": "^1.5.0",
-    "prosemirror-history": "^1.3.0",
-    "prosemirror-inputrules": "^1.2.0",
-    "prosemirror-keymap": "^1.2.0",
-    "prosemirror-model": "^1.18.3",
-    "prosemirror-state": "^1.4.2",
-    "prosemirror-transform": "^1.7.0",
-    "prosemirror-view": "^1.29.1",
-    "react": "^16.13.1",
-    "react-color": "^2.19.3",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^16.13.1",
-    "react-intl": "^3.12.0",
-    "react-is": "^16.13.1",
-    "react-modal": "^3.11.2",
-    "react-modern-calendar-datepicker": "^3.1.3",
-    "react-popper": "^1.3.11",
-    "react-router-dom": "^5.2.0",
-    "react-select": "^5.0.1",
-    "react-sizeme": "^2.6.12",
-    "react-tooltip": "^4.2.11",
     "rimraf": "^3.0.0",
-    "styled-components": "^5.2.0",
     "typescript": "^4.4.4"
   },
   "peerDependencies": {
@@ -133,11 +131,11 @@
     "prosemirror-state": "^1.4.2",
     "prosemirror-transform": "^1.7.0",
     "prosemirror-view": "^1.29.1",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-intl": "^3.12.0",
     "react-modal": "^3.11.2",
     "react-modern-calendar-datepicker": "^3.1.3",
@@ -148,6 +146,6 @@
     "react-tooltip": "^4.2.11"
   },
   "resolutions": {
-    "@types/react": "^16.9.52"
+    "@types/react": "^17.0.2"
   }
 }

package/dist/cjs/components/PdfPreview.js

@@ -1,111 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-require("pdfjs-dist/web/pdf_viewer.css");
-const pdf_1 = require("pdfjs-dist/build/pdf");
-const pdfjsWorker = __importStar(require("pdfjs-dist/build/pdf.worker.entry"));
-const pdf_viewer_1 = require("pdfjs-dist/web/pdf_viewer");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-pdf_1.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-const PdfPreview = ({ url, scale = 1, }) => {
-    const [pdfViewer, setPdfViewer] = (0, react_1.useState)({
-        currentScaleValue: scale,
-    });
-    const [error, setError] = (0, react_1.useState)(null);
-    const [progress, setProgress] = (0, react_1.useState)(null);
-    const [eventBus, setEventBus] = (0, react_1.useState)(null);
-    const nodeRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const container = nodeRef.current;
-        const eventBus = new pdf_viewer_1.EventBus();
-        const pdfViewer = new pdf_viewer_1.PDFViewer({
-            container,
-            eventBus,
-        });
-        setPdfViewer(pdfViewer);
-        setEventBus(eventBus);
-        const loadingTask = (0, pdf_1.getDocument)({
-            url,
-            withCredentials: true,
-        });
-        loadingTask.onProgress = (progressData) => setProgress(progressData);
-        loadingTask.promise
-            .then((pdfDocument) => {
-            pdfViewer.setDocument(pdfDocument);
-            return true;
-        }, (exception) => {
-            setError(exception);
-        })
-            .catch((err) => {
-            setError(err);
-        });
-    }, [url]);
-    (0, react_1.useEffect)(() => {
-        pdfViewer.currentScaleValue = scale;
-        if (eventBus) {
-            eventBus.on('pagesinit', () => (pdfViewer.currentScaleValue = scale));
-        }
-    }, [pdfViewer, eventBus, scale]);
-    if (error) {
-        return react_1.default.createElement(Error, null, "Unable to download PDF file");
-    }
-    return (react_1.default.createElement(ViewerContainer, { ref: nodeRef, id: 'viewerContainer' },
-        react_1.default.createElement("div", { id: "viewer", className: "pdfViewer" }),
-        progress != null ? (progress.total > progress.loaded && (react_1.default.createElement(Container, null,
-            react_1.default.createElement(ProgressContainer, null,
-                react_1.default.createElement(Progress, { progress: (progress.loaded / progress.total) * 100 },
-                    ((progress.loaded / progress.total) * 100).toFixed(),
-                    "%"))))) : (react_1.default.createElement(Container, null, 'Loading\u2026'))));
-};
-exports.default = PdfPreview;
-const ViewerContainer = styled_components_1.default.div `
-  position: absolute;
-  width: 100%;
-`;
-const Container = styled_components_1.default.div `
-  position: fixed;
-  top: 50%;
-  right: 50%;
-`;
-const ProgressContainer = styled_components_1.default.div `
-  width: ${(props) => props.theme.grid.unit * 50}px;
-  height: ${(props) => props.theme.grid.unit * 7}px;
-  overflow: hidden;
-  background: ${(props) => props.theme.colors.background.secondary};
-`;
-const Progress = styled_components_1.default.div `
-  height: 100%;
-  display: block;
-  width: ${(props) => props.progress}%;
-  background: ${(props) => props.theme.colors.background.success};
-  text-align: center;
-`;
-const Error = (0, styled_components_1.default)(Container) `
-  color: ${(props) => props.theme.colors.text.error};
-`;

package/dist/es/components/PdfPreview.js

@@ -1,83 +0,0 @@
-import 'pdfjs-dist/web/pdf_viewer.css';
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
-import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
-import { EventBus, PDFViewer } from 'pdfjs-dist/web/pdf_viewer';
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-GlobalWorkerOptions.workerSrc = pdfjsWorker;
-const PdfPreview = ({ url, scale = 1, }) => {
-    const [pdfViewer, setPdfViewer] = useState({
-        currentScaleValue: scale,
-    });
-    const [error, setError] = useState(null);
-    const [progress, setProgress] = useState(null);
-    const [eventBus, setEventBus] = useState(null);
-    const nodeRef = useRef(null);
-    useEffect(() => {
-        const container = nodeRef.current;
-        const eventBus = new EventBus();
-        const pdfViewer = new PDFViewer({
-            container,
-            eventBus,
-        });
-        setPdfViewer(pdfViewer);
-        setEventBus(eventBus);
-        const loadingTask = getDocument({
-            url,
-            withCredentials: true,
-        });
-        loadingTask.onProgress = (progressData) => setProgress(progressData);
-        loadingTask.promise
-            .then((pdfDocument) => {
-            pdfViewer.setDocument(pdfDocument);
-            return true;
-        }, (exception) => {
-            setError(exception);
-        })
-            .catch((err) => {
-            setError(err);
-        });
-    }, [url]);
-    useEffect(() => {
-        pdfViewer.currentScaleValue = scale;
-        if (eventBus) {
-            eventBus.on('pagesinit', () => (pdfViewer.currentScaleValue = scale));
-        }
-    }, [pdfViewer, eventBus, scale]);
-    if (error) {
-        return React.createElement(Error, null, "Unable to download PDF file");
-    }
-    return (React.createElement(ViewerContainer, { ref: nodeRef, id: 'viewerContainer' },
-        React.createElement("div", { id: "viewer", className: "pdfViewer" }),
-        progress != null ? (progress.total > progress.loaded && (React.createElement(Container, null,
-            React.createElement(ProgressContainer, null,
-                React.createElement(Progress, { progress: (progress.loaded / progress.total) * 100 },
-                    ((progress.loaded / progress.total) * 100).toFixed(),
-                    "%"))))) : (React.createElement(Container, null, 'Loading\u2026'))));
-};
-export default PdfPreview;
-const ViewerContainer = styled.div `
-  position: absolute;
-  width: 100%;
-`;
-const Container = styled.div `
-  position: fixed;
-  top: 50%;
-  right: 50%;
-`;
-const ProgressContainer = styled.div `
-  width: ${(props) => props.theme.grid.unit * 50}px;
-  height: ${(props) => props.theme.grid.unit * 7}px;
-  overflow: hidden;
-  background: ${(props) => props.theme.colors.background.secondary};
-`;
-const Progress = styled.div `
-  height: 100%;
-  display: block;
-  width: ${(props) => props.progress}%;
-  background: ${(props) => props.theme.colors.background.success};
-  text-align: center;
-`;
-const Error = styled(Container) `
-  color: ${(props) => props.theme.colors.text.error};
-`;

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

@@ -1,7 +0,0 @@
-import 'pdfjs-dist/web/pdf_viewer.css';
-import React from 'react';
-declare const PdfPreview: React.FC<{
-    scale?: number;
-    url: string;
-}>;
-export default PdfPreview;