@manuscripts/style-guide 1.3.6 → 1.3.7

package/dist/cjs/components/EditorHeader/EditorHeader.js

@@ -59,7 +59,6 @@ const MapUserRole = {
 };
 const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
     var _a, _b, _c, _d, _e;
-    const [confirmationDialog, toggleConfirmationDialog] = (0, react_1.useState)(false);
     const [noteValue, setNoteValue] = (0, react_1.useState)('');
     const [selectedTransitionIndex, setSelectedTransitionIndex] = (0, react_1.useState)();
     const { dialogData, submit } = submitProceed;
@@ -81,20 +80,13 @@ const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userR
     ]);
     const onTransitionClick = (0, react_1.useCallback)((event) => {
         updateState(DialogState.INIT);
-        toggleConfirmationDialog(true);
         setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
-    }, [setSelectedTransitionIndex, toggleConfirmationDialog, updateState]);
+    }, [setSelectedTransitionIndex, updateState]);
     const onCancelClick = (0, react_1.useCallback)(() => {
-        toggleConfirmationDialog(false);
         setSelectedTransitionIndex(undefined);
         clearError();
         updateState(DialogState.CLOSED);
-    }, [
-        toggleConfirmationDialog,
-        setSelectedTransitionIndex,
-        clearError,
-        updateState,
-    ]);
+    }, [setSelectedTransitionIndex, clearError, updateState]);
     const onNoteChange = (0, react_1.useCallback)((event) => setNoteValue(event.target.value), [setNoteValue]);
     const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
     const disable = !currentStepTransition || !canCompleteTask;
@@ -105,7 +97,7 @@ const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userR
             react_1.default.createElement("span", null, "Dashboard"))),
         handleSnapshot &&
             typeof hasPendingSuggestions == 'boolean' &&
-            submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
+            submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
         status && (react_1.default.createElement(ChildWrapper, null,
             react_1.default.createElement(__1.SaveStatus, { status: status }))),
         react_1.default.createElement(Spacer, null),

package/dist/cjs/components/EditorHeader/ProceedView.js

@@ -46,8 +46,11 @@ const StepDetails = ({ icon, label, description, role }) => (react_1.default.cre
         react_1.default.createElement(__1.SecondarySmallText, null,
             "Actor: ",
             role.label))));
-const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
-    const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions && !isAnnotator && !isProofer
+const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
+    const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions &&
+        !isAnnotator &&
+        !isProofer &&
+        dialogData.state !== __1.DialogState.SUCCESS
         ? {
             header: 'The task can not be transitioned to the next step',
             message: `There are still pending suggestions in the document.
@@ -57,6 +60,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
                     action: onCancelClick,
                     title: 'Ok',
                 },
+                onClose: onCancelClick,
             },
         }
         : dialogData.state === __1.DialogState.SUCCESS
@@ -68,6 +72,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
                         action: onCancelClick,
                         title: 'Close',
                     },
+                    onClose: onCancelClick,
                 },
             }
             : {
@@ -82,6 +87,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
                         action: onCancelClick,
                         title: 'Cancel',
                     },
+                    onClose: onCancelClick,
                 },
             }, [
         dialogData,
@@ -92,21 +98,34 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
         isAnnotator,
         isProofer,
     ]);
+    const prevDialogMsgs = (0, react_1.useRef)();
+    const prevDialogueState = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        prevDialogMsgs.current = dialogMessages;
+        prevDialogueState.current = dialogData.state;
+    }, [dialogData.state]);
+    const messages = dialogData.state === __1.DialogState.CLOSED && prevDialogMsgs.current
+        ? prevDialogMsgs.current
+        : dialogMessages;
+    const finalState = dialogData.state === __1.DialogState.CLOSED && prevDialogueState.current
+        ? prevDialogueState.current
+        : dialogData.state;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (react_1.default.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
             react_1.default.createElement(TaskDropdown, null, currentStepTransition &&
                 currentStepTransition.map((transition, index) => (react_1.default.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
                     react_1.default.createElement("strong", null, transition.type.label),
                     transition.type.description))))))) || (react_1.default.createElement(EditorHeader_1.PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
-        dialogData.state === __1.DialogState.LOADING && (react_1.default.createElement(__1.LoadingOverlay, null,
+        finalState === __1.DialogState.LOADING && (react_1.default.createElement(__1.LoadingOverlay, null,
             react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
-        !(dialogData.state === __1.DialogState.CLOSED) && (react_1.default.createElement(__1.Dialog, { isOpen: confirmationDialog && !(dialogData.state === __1.DialogState.LOADING), category: __1.Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
-            dialogData.state === __1.DialogState.SUCCESS && (react_1.default.createElement(Grid, null,
+        react_1.default.createElement(__1.Dialog, { isOpen: dialogData.state !== __1.DialogState.CLOSED &&
+                dialogData.state !== __1.DialogState.LOADING, category: __1.Category.confirmation, header: messages.header, message: messages.message, actions: messages.actions },
+            finalState === __1.DialogState.SUCCESS && (react_1.default.createElement(Grid, null,
                 previousStepType && (react_1.default.createElement(StepDetails, Object.assign({}, previousStepType, { icon: react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(__1.TaskStepDoneIcon, null),
                         react_1.default.createElement(Line, null)) }))),
                 react_1.default.createElement(StepDetails, Object.assign({}, currentStepType)))),
-            dialogData.state === __1.DialogState.ERROR && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.error, hideCloseButton: true }, dialogData.error))))));
+            finalState === __1.DialogState.ERROR && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.error, hideCloseButton: true }, dialogData.error)))));
 };
 exports.ProceedView = ProceedView;
 const TaskDropdown = styled_components_1.default.div `

package/dist/cjs/lib/capabilities.js

@@ -59,6 +59,7 @@ const getCapabilities = (project, profile, role, actions) => {
         editMetadata: !(isViewer() || isAnnotator() || isProofer()),
         editCitationsAndRefs: !(isViewer() || isAnnotator() || isProofer()),
         shareProject: isOwner(),
+        applySaveChanges: !(isAnnotator() || isProofer()),
     };
 };
 exports.getCapabilities = getCapabilities;

package/dist/es/components/EditorHeader/EditorHeader.js

@@ -30,7 +30,6 @@ const MapUserRole = {
 };
 export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
     var _a, _b, _c, _d, _e;
-    const [confirmationDialog, toggleConfirmationDialog] = useState(false);
     const [noteValue, setNoteValue] = useState('');
     const [selectedTransitionIndex, setSelectedTransitionIndex] = useState();
     const { dialogData, submit } = submitProceed;
@@ -52,20 +51,13 @@ export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions
     ]);
     const onTransitionClick = useCallback((event) => {
         updateState(DialogState.INIT);
-        toggleConfirmationDialog(true);
         setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
-    }, [setSelectedTransitionIndex, toggleConfirmationDialog, updateState]);
+    }, [setSelectedTransitionIndex, updateState]);
     const onCancelClick = useCallback(() => {
-        toggleConfirmationDialog(false);
         setSelectedTransitionIndex(undefined);
         clearError();
         updateState(DialogState.CLOSED);
-    }, [
-        toggleConfirmationDialog,
-        setSelectedTransitionIndex,
-        clearError,
-        updateState,
-    ]);
+    }, [setSelectedTransitionIndex, clearError, updateState]);
     const onNoteChange = useCallback((event) => setNoteValue(event.target.value), [setNoteValue]);
     const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
     const disable = !currentStepTransition || !canCompleteTask;
@@ -76,7 +68,7 @@ export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions
             React.createElement("span", null, "Dashboard"))),
         handleSnapshot &&
             typeof hasPendingSuggestions == 'boolean' &&
-            submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
+            submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
         status && (React.createElement(ChildWrapper, null,
             React.createElement(SaveStatus, { status: status }))),
         React.createElement(Spacer, null),

package/dist/es/components/EditorHeader/ProceedView.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import styled from 'styled-components';
 import { Category, Dialog, DialogState, LoadingOverlay, NavDropdown, NavDropdownButton, NavDropdownContainer, PrimaryBoldHeading, PrimaryButton, SecondarySmallText, TaskStepDoneIcon, useDropdown, } from '../..';
 import { AlertMessage, AlertMessageType } from '../AlertMessage';
@@ -17,8 +17,11 @@ const StepDetails = ({ icon, label, description, role }) => (React.createElement
         React.createElement(SecondarySmallText, null,
             "Actor: ",
             role.label))));
-export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
-    const dialogMessages = useMemo(() => hasPendingSuggestions && !isAnnotator && !isProofer
+export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
+    const dialogMessages = useMemo(() => hasPendingSuggestions &&
+        !isAnnotator &&
+        !isProofer &&
+        dialogData.state !== DialogState.SUCCESS
         ? {
             header: 'The task can not be transitioned to the next step',
             message: `There are still pending suggestions in the document.
@@ -28,6 +31,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
                     action: onCancelClick,
                     title: 'Ok',
                 },
+                onClose: onCancelClick,
             },
         }
         : dialogData.state === DialogState.SUCCESS
@@ -39,6 +43,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
                         action: onCancelClick,
                         title: 'Close',
                     },
+                    onClose: onCancelClick,
                 },
             }
             : {
@@ -53,6 +58,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
                         action: onCancelClick,
                         title: 'Cancel',
                     },
+                    onClose: onCancelClick,
                 },
             }, [
         dialogData,
@@ -63,21 +69,34 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
         isAnnotator,
         isProofer,
     ]);
+    const prevDialogMsgs = useRef();
+    const prevDialogueState = useRef();
+    useEffect(() => {
+        prevDialogMsgs.current = dialogMessages;
+        prevDialogueState.current = dialogData.state;
+    }, [dialogData.state]);
+    const messages = dialogData.state === DialogState.CLOSED && prevDialogMsgs.current
+        ? prevDialogMsgs.current
+        : dialogMessages;
+    const finalState = dialogData.state === DialogState.CLOSED && prevDialogueState.current
+        ? prevDialogueState.current
+        : dialogData.state;
     return (React.createElement(React.Fragment, null,
         (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (React.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
             React.createElement(TaskDropdown, null, currentStepTransition &&
                 currentStepTransition.map((transition, index) => (React.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
                     React.createElement("strong", null, transition.type.label),
                     transition.type.description))))))) || (React.createElement(PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
-        dialogData.state === DialogState.LOADING && (React.createElement(LoadingOverlay, null,
+        finalState === DialogState.LOADING && (React.createElement(LoadingOverlay, null,
             React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
-        !(dialogData.state === DialogState.CLOSED) && (React.createElement(Dialog, { isOpen: confirmationDialog && !(dialogData.state === DialogState.LOADING), category: Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
-            dialogData.state === DialogState.SUCCESS && (React.createElement(Grid, null,
+        React.createElement(Dialog, { isOpen: dialogData.state !== DialogState.CLOSED &&
+                dialogData.state !== DialogState.LOADING, category: Category.confirmation, header: messages.header, message: messages.message, actions: messages.actions },
+            finalState === DialogState.SUCCESS && (React.createElement(Grid, null,
                 previousStepType && (React.createElement(StepDetails, Object.assign({}, previousStepType, { icon: React.createElement(React.Fragment, null,
                         React.createElement(TaskStepDoneIcon, null),
                         React.createElement(Line, null)) }))),
                 React.createElement(StepDetails, Object.assign({}, currentStepType)))),
-            dialogData.state === DialogState.ERROR && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, dialogData.error))))));
+            finalState === DialogState.ERROR && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, dialogData.error)))));
 };
 const TaskDropdown = styled.div `
   display: flex;

package/dist/es/lib/capabilities.js

@@ -53,6 +53,7 @@ export const getCapabilities = (project, profile, role, actions) => {
         editMetadata: !(isViewer() || isAnnotator() || isProofer()),
         editCitationsAndRefs: !(isViewer() || isAnnotator() || isProofer()),
         shareProject: isOwner(),
+        applySaveChanges: !(isAnnotator() || isProofer()),
     };
 };
 export const getAllPermitted = () => {

package/dist/types/components/EditorHeader/ProceedView.d.ts

@@ -14,7 +14,6 @@ export declare const ProceedView: React.FC<{
     previousStepType: SubmissionStepType | undefined;
     currentStepType: SubmissionStepType;
     nextStepType: SubmissionStepType;
-    confirmationDialog: boolean;
     onCancelClick: () => void;
     continueDialogAction: () => Promise<void>;
     message: React.FC<{

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

@@ -38,6 +38,7 @@ export type Capabilities = {
     editMetadata: boolean;
     shareProject: boolean;
     editCitationsAndRefs: boolean;
+    applySaveChanges: boolean;
 };
 export interface ProviderProps {
     project?: Project;

package/package.json

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