@manuscripts/style-guide 1.13.9-LEAN-3720.0 → 1.13.9-LEAN-3753.0

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

@@ -0,0 +1,210 @@
+"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 __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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediumTextArea = exports.PrimaryButtonSmall = exports.EditorHeader = exports.DialogState = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const __1 = require("../..");
+const ProceedView_1 = require("./ProceedView");
+var DialogState;
+(function (DialogState) {
+    DialogState[DialogState["INIT"] = 0] = "INIT";
+    DialogState[DialogState["LOADING"] = 1] = "LOADING";
+    DialogState[DialogState["ERROR"] = 2] = "ERROR";
+    DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
+    DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
+})(DialogState = exports.DialogState || (exports.DialogState = {}));
+const Editing = { label: 'Editing', icon: __1.EditIcon };
+const MapUserRole = {
+    Editor: Editing,
+    Owner: Editing,
+    Writer: Editing,
+    Annotator: { label: 'Suggesting', icon: __1.RoleAnnotatingIcon },
+    Viewer: { label: 'Reading', icon: __1.RoleReadingIcon },
+    Proofer: { label: 'Proofing', icon: __1.RoleAnnotatingIcon },
+};
+const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
+    var _a, _b, _c, _d, _e;
+    const [noteValue, setNoteValue] = (0, react_1.useState)('');
+    const [selectedTransitionIndex, setSelectedTransitionIndex] = (0, react_1.useState)();
+    const { dialogData, submit } = submitProceed;
+    const { updateState, clearError } = dialogData;
+    const continueDialogAction = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (submission && selectedTransitionIndex && handleSnapshot) {
+            const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
+            updateState(DialogState.LOADING);
+            yield handleSnapshot();
+            yield submit(status.id, noteValue);
+        }
+    }), [
+        submission,
+        selectedTransitionIndex,
+        handleSnapshot,
+        updateState,
+        submit,
+        noteValue,
+    ]);
+    const onTransitionClick = (0, react_1.useCallback)((event) => {
+        updateState(DialogState.INIT);
+        setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
+    }, [setSelectedTransitionIndex, updateState]);
+    const onCancelClick = (0, react_1.useCallback)(() => {
+        setSelectedTransitionIndex(undefined);
+        clearError();
+        updateState(DialogState.CLOSED);
+    }, [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;
+    const errorCode = (_d = (_c = (_b = (_a = dialogData.mutationError) === null || _a === void 0 ? void 0 : _a.graphQLErrors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.code.name;
+    return (react_1.default.createElement(Wrapper, null,
+        goBack && (react_1.default.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
+            react_1.default.createElement(__1.ArrowLeftIcon, null),
+            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, 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),
+        react_1.default.createElement(CurrentStepLabel, null, submission.currentStep.type.label),
+        react_1.default.createElement(CurrentActionLablel, null,
+            userRole &&
+                MapUserRole[userRole] &&
+                react_1.default.createElement(MapUserRole[userRole].icon),
+            react_1.default.createElement("span", null, userRole && MapUserRole[userRole].label)),
+        react_1.default.createElement(HelpDropdown, null),
+        errorCode && react_1.default.createElement(ExceptionDialog, { errorCode: errorCode })));
+};
+exports.EditorHeader = EditorHeader;
+const HelpDropdown = () => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, __1.useDropdown)();
+    return (react_1.default.createElement(HelpDropdownContainer, { ref: wrapperRef },
+        react_1.default.createElement(HelpDropdownButton, { onClick: toggleOpen },
+            react_1.default.createElement("span", null, "Help"),
+            react_1.default.createElement(__1.NavDropdownToggle, { className: isOpen ? 'open' : '' })),
+        isOpen && (react_1.default.createElement(__1.DropdownList, { top: 12, direction: "right" },
+            react_1.default.createElement(DropdownItem, null, "Documentation")))));
+};
+const SecondaryButtonSmall = (0, styled_components_1.default)(__1.SecondaryButton) `
+  font-size: inherit;
+  margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
+`;
+const HelpDropdownButton = styled_components_1.default.button `
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+const HelpDropdownContainer = (0, styled_components_1.default)(__1.DropdownContainer) `
+  border-left: 1px solid #f2f2f2;
+  margin: -${(props) => props.theme.grid.unit * 3}px ${(props) => props.theme.grid.unit * 2}px -${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 6}px;
+  padding: ${(props) => props.theme.grid.unit * 4.75}px 0
+    ${(props) => props.theme.grid.unit * 5}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`;
+const DropdownItem = styled_components_1.default.a `
+  color: inherit;
+  display: block;
+  cursor: pointer;
+  text-decoration: none;
+  padding: ${(props) => props.theme.grid.unit * 5}px;
+`;
+exports.PrimaryButtonSmall = (0, styled_components_1.default)(__1.PrimaryButton) `
+  padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
+  font-size: inherit;
+`;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  z-index: 6;
+  padding: ${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 8}px;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  border-bottom: 1px solid #f2f2f2;
+  font-size: 14px;
+  background: white;
+
+  ${__1.NavDropdownContainer} + ${__1.NavDropdownContainer} {
+    margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  }
+  ${exports.PrimaryButtonSmall} + ${__1.NavDropdownContainer} {
+    margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  }
+`;
+const CurrentStepLabel = styled_components_1.default.span `
+  background: #f2f2f2;
+  border-radius: ${(props) => props.theme.grid.unit * 1.5}px;
+  padding: ${(props) => props.theme.grid.unit}px;
+`;
+const CurrentActionLablel = styled_components_1.default.span `
+  display: flex;
+  padding: 0 ${(props) => props.theme.grid.unit * 6}px;
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2.5}px;
+  }
+`;
+const ChildWrapper = styled_components_1.default.div `
+  display: inline-flex;
+  margin: 0 2em;
+  flex-direction: row;
+  align-items: center;
+`;
+const Grid = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  background: ${(props) => props.theme.colors.background.secondary};
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const Line = styled_components_1.default.hr `
+  margin: 5px 0 0 0;
+  flex: 1;
+  border: 1px dashed #c9c9c9;
+`;
+const Spacer = styled_components_1.default.div `
+  flex: auto;
+`;
+exports.MediumTextArea = (0, styled_components_1.default)(__1.TextArea) `
+  padding: 8px;
+  font-size: 1em;
+`;

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

@@ -0,0 +1,195 @@
+"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 });
+exports.ProceedView = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const __1 = require("../..");
+const AlertMessage_1 = require("../AlertMessage");
+const EditorHeader_1 = require("./EditorHeader");
+const DropdownWrapper = ({ disabled, button, primary, children }) => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, __1.useDropdown)();
+    return (react_1.default.createElement(__1.NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
+        react_1.default.createElement(__1.NavDropdownButton, { as: (primary && __1.PrimaryButton) || undefined, disabled: disabled, isOpen: isOpen, onClick: toggleOpen }, button),
+        isOpen && react_1.default.createElement(__1.NavDropdown, { direction: "left" }, children)));
+};
+const StepDetails = ({ icon, label, description, role }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    icon && react_1.default.createElement(TaskStatus, null, icon),
+    react_1.default.createElement(TaskContainer, null,
+        react_1.default.createElement(__1.PrimaryBoldHeading, null, label),
+        react_1.default.createElement(__1.SecondarySmallText, null, description),
+        react_1.default.createElement(__1.SecondarySmallText, null,
+            "Actor: ",
+            role.label))));
+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.
+                It is not possible to complete the task without having them approved or rejected.`,
+            actions: {
+                primary: {
+                    action: onCancelClick,
+                    title: 'Ok',
+                },
+                onClose: onCancelClick,
+            },
+        }
+        : dialogData.state === __1.DialogState.SUCCESS
+            ? {
+                header: 'Content reassigned successfully',
+                message: `to the ${currentStepType.label}`,
+                actions: {
+                    primary: {
+                        action: onCancelClick,
+                        title: 'Close',
+                    },
+                    onClose: onCancelClick,
+                },
+            }
+            : {
+                header: 'Are you sure?',
+                message: 'You are about to complete your task. If you confirm, you will no longer be able to make any changes.',
+                actions: {
+                    primary: {
+                        action: continueDialogAction,
+                        title: 'Continue',
+                    },
+                    secondary: {
+                        action: onCancelClick,
+                        title: 'Cancel',
+                    },
+                    onClose: onCancelClick,
+                },
+            }, [
+        dialogData,
+        continueDialogAction,
+        onCancelClick,
+        currentStepType,
+        hasPendingSuggestions,
+        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")),
+        finalState === __1.DialogState.LOADING && (react_1.default.createElement(__1.LoadingOverlay, null,
+            react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
+        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)))),
+            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 `
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+`;
+const Task = styled_components_1.default.button `
+  background: transparent;
+  border: none;
+  color: ${(props) => props.theme.colors.text.secondary};
+  cursor: pointer;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.small} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+  order: 1;
+  outline: none;
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+  text-align: left;
+  width: ${(props) => props.theme.grid.unit * 66}px;
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    background-color: ${(props) => props.theme.colors.button.default.background.hover};
+  }
+
+  strong {
+    color: ${(props) => props.theme.colors.text.primary};
+    display: block;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.normal};
+  }
+
+  &.happyPath {
+    border-bottom: 1px solid ${(props) => props.theme.colors.border.tertiary};
+    order: 0;
+  }
+`;
+const TextAreaWrapper = styled_components_1.default.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Grid = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  background: ${(props) => props.theme.colors.background.secondary};
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const Line = styled_components_1.default.hr `
+  margin: 5px 0 0 0;
+  flex: 1;
+  border: 1px dashed #c9c9c9;
+`;
+const TaskStatus = styled_components_1.default.div `
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 5px;
+`;
+const TaskContainer = styled_components_1.default.div `
+  grid-column: 2;
+  margin-bottom: 8px;
+`;

package/dist/cjs/index.js

@@ -62,6 +62,7 @@ __exportStar(require("./components/Badge"), exports);
 __exportStar(require("./components/NavDropdown"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/LoadingOverlay"), exports);
+__exportStar(require("./components/EditorHeader/EditorHeader"), exports);
 __exportStar(require("./components/DatePicker"), exports);
 __exportStar(require("./components/Text"), exports);
 __exportStar(require("./components/RelativeDate"), exports);

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

@@ -0,0 +1,180 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { ArrowLeftIcon, DropdownContainer, DropdownList, EditIcon, NavDropdownContainer, NavDropdownToggle, PrimaryButton, RoleAnnotatingIcon, RoleReadingIcon, SaveStatus, SecondaryButton, TextArea, useDropdown, } from '../..';
+import { ProceedView } from './ProceedView';
+export var DialogState;
+(function (DialogState) {
+    DialogState[DialogState["INIT"] = 0] = "INIT";
+    DialogState[DialogState["LOADING"] = 1] = "LOADING";
+    DialogState[DialogState["ERROR"] = 2] = "ERROR";
+    DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
+    DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
+})(DialogState || (DialogState = {}));
+const Editing = { label: 'Editing', icon: EditIcon };
+const MapUserRole = {
+    Editor: Editing,
+    Owner: Editing,
+    Writer: Editing,
+    Annotator: { label: 'Suggesting', icon: RoleAnnotatingIcon },
+    Viewer: { label: 'Reading', icon: RoleReadingIcon },
+    Proofer: { label: 'Proofing', icon: RoleAnnotatingIcon },
+};
+export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
+    var _a, _b, _c, _d, _e;
+    const [noteValue, setNoteValue] = useState('');
+    const [selectedTransitionIndex, setSelectedTransitionIndex] = useState();
+    const { dialogData, submit } = submitProceed;
+    const { updateState, clearError } = dialogData;
+    const continueDialogAction = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (submission && selectedTransitionIndex && handleSnapshot) {
+            const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
+            updateState(DialogState.LOADING);
+            yield handleSnapshot();
+            yield submit(status.id, noteValue);
+        }
+    }), [
+        submission,
+        selectedTransitionIndex,
+        handleSnapshot,
+        updateState,
+        submit,
+        noteValue,
+    ]);
+    const onTransitionClick = useCallback((event) => {
+        updateState(DialogState.INIT);
+        setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
+    }, [setSelectedTransitionIndex, updateState]);
+    const onCancelClick = useCallback(() => {
+        setSelectedTransitionIndex(undefined);
+        clearError();
+        updateState(DialogState.CLOSED);
+    }, [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;
+    const errorCode = (_d = (_c = (_b = (_a = dialogData.mutationError) === null || _a === void 0 ? void 0 : _a.graphQLErrors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.code.name;
+    return (React.createElement(Wrapper, null,
+        goBack && (React.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
+            React.createElement(ArrowLeftIcon, null),
+            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, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
+        status && (React.createElement(ChildWrapper, null,
+            React.createElement(SaveStatus, { status: status }))),
+        React.createElement(Spacer, null),
+        React.createElement(CurrentStepLabel, null, submission.currentStep.type.label),
+        React.createElement(CurrentActionLablel, null,
+            userRole &&
+                MapUserRole[userRole] &&
+                React.createElement(MapUserRole[userRole].icon),
+            React.createElement("span", null, userRole && MapUserRole[userRole].label)),
+        React.createElement(HelpDropdown, null),
+        errorCode && React.createElement(ExceptionDialog, { errorCode: errorCode })));
+};
+const HelpDropdown = () => {
+    const { isOpen, toggleOpen, wrapperRef } = useDropdown();
+    return (React.createElement(HelpDropdownContainer, { ref: wrapperRef },
+        React.createElement(HelpDropdownButton, { onClick: toggleOpen },
+            React.createElement("span", null, "Help"),
+            React.createElement(NavDropdownToggle, { className: isOpen ? 'open' : '' })),
+        isOpen && (React.createElement(DropdownList, { top: 12, direction: "right" },
+            React.createElement(DropdownItem, null, "Documentation")))));
+};
+const SecondaryButtonSmall = styled(SecondaryButton) `
+  font-size: inherit;
+  margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
+`;
+const HelpDropdownButton = styled.button `
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+const HelpDropdownContainer = styled(DropdownContainer) `
+  border-left: 1px solid #f2f2f2;
+  margin: -${(props) => props.theme.grid.unit * 3}px ${(props) => props.theme.grid.unit * 2}px -${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 6}px;
+  padding: ${(props) => props.theme.grid.unit * 4.75}px 0
+    ${(props) => props.theme.grid.unit * 5}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`;
+const DropdownItem = styled.a `
+  color: inherit;
+  display: block;
+  cursor: pointer;
+  text-decoration: none;
+  padding: ${(props) => props.theme.grid.unit * 5}px;
+`;
+export const PrimaryButtonSmall = styled(PrimaryButton) `
+  padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
+  font-size: inherit;
+`;
+const Wrapper = styled.div `
+  display: flex;
+  z-index: 6;
+  padding: ${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 8}px;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  border-bottom: 1px solid #f2f2f2;
+  font-size: 14px;
+  background: white;
+
+  ${NavDropdownContainer} + ${NavDropdownContainer} {
+    margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  }
+  ${PrimaryButtonSmall} + ${NavDropdownContainer} {
+    margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  }
+`;
+const CurrentStepLabel = styled.span `
+  background: #f2f2f2;
+  border-radius: ${(props) => props.theme.grid.unit * 1.5}px;
+  padding: ${(props) => props.theme.grid.unit}px;
+`;
+const CurrentActionLablel = styled.span `
+  display: flex;
+  padding: 0 ${(props) => props.theme.grid.unit * 6}px;
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2.5}px;
+  }
+`;
+const ChildWrapper = styled.div `
+  display: inline-flex;
+  margin: 0 2em;
+  flex-direction: row;
+  align-items: center;
+`;
+const Grid = styled.div `
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  background: ${(props) => props.theme.colors.background.secondary};
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const Line = styled.hr `
+  margin: 5px 0 0 0;
+  flex: 1;
+  border: 1px dashed #c9c9c9;
+`;
+const Spacer = styled.div `
+  flex: auto;
+`;
+export const MediumTextArea = styled(TextArea) `
+  padding: 8px;
+  font-size: 1em;
+`;

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

@@ -0,0 +1,165 @@
+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';
+import { PrimaryButtonSmall, } from './EditorHeader';
+const DropdownWrapper = ({ disabled, button, primary, children }) => {
+    const { isOpen, toggleOpen, wrapperRef } = useDropdown();
+    return (React.createElement(NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
+        React.createElement(NavDropdownButton, { as: (primary && PrimaryButton) || undefined, disabled: disabled, isOpen: isOpen, onClick: toggleOpen }, button),
+        isOpen && React.createElement(NavDropdown, { direction: "left" }, children)));
+};
+const StepDetails = ({ icon, label, description, role }) => (React.createElement(React.Fragment, null,
+    icon && React.createElement(TaskStatus, null, icon),
+    React.createElement(TaskContainer, null,
+        React.createElement(PrimaryBoldHeading, null, label),
+        React.createElement(SecondarySmallText, null, description),
+        React.createElement(SecondarySmallText, null,
+            "Actor: ",
+            role.label))));
+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.
+                It is not possible to complete the task without having them approved or rejected.`,
+            actions: {
+                primary: {
+                    action: onCancelClick,
+                    title: 'Ok',
+                },
+                onClose: onCancelClick,
+            },
+        }
+        : dialogData.state === DialogState.SUCCESS
+            ? {
+                header: 'Content reassigned successfully',
+                message: `to the ${currentStepType.label}`,
+                actions: {
+                    primary: {
+                        action: onCancelClick,
+                        title: 'Close',
+                    },
+                    onClose: onCancelClick,
+                },
+            }
+            : {
+                header: 'Are you sure?',
+                message: 'You are about to complete your task. If you confirm, you will no longer be able to make any changes.',
+                actions: {
+                    primary: {
+                        action: continueDialogAction,
+                        title: 'Continue',
+                    },
+                    secondary: {
+                        action: onCancelClick,
+                        title: 'Cancel',
+                    },
+                    onClose: onCancelClick,
+                },
+            }, [
+        dialogData,
+        continueDialogAction,
+        onCancelClick,
+        currentStepType,
+        hasPendingSuggestions,
+        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")),
+        finalState === DialogState.LOADING && (React.createElement(LoadingOverlay, null,
+            React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
+        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)))),
+            finalState === DialogState.ERROR && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, dialogData.error)))));
+};
+const TaskDropdown = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+`;
+const Task = styled.button `
+  background: transparent;
+  border: none;
+  color: ${(props) => props.theme.colors.text.secondary};
+  cursor: pointer;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.small} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+  order: 1;
+  outline: none;
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+  text-align: left;
+  width: ${(props) => props.theme.grid.unit * 66}px;
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    background-color: ${(props) => props.theme.colors.button.default.background.hover};
+  }
+
+  strong {
+    color: ${(props) => props.theme.colors.text.primary};
+    display: block;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.normal};
+  }
+
+  &.happyPath {
+    border-bottom: 1px solid ${(props) => props.theme.colors.border.tertiary};
+    order: 0;
+  }
+`;
+const TextAreaWrapper = styled.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Grid = styled.div `
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  background: ${(props) => props.theme.colors.background.secondary};
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const Line = styled.hr `
+  margin: 5px 0 0 0;
+  flex: 1;
+  border: 1px dashed #c9c9c9;
+`;
+const TaskStatus = styled.div `
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 5px;
+`;
+const TaskContainer = styled.div `
+  grid-column: 2;
+  margin-bottom: 8px;
+`;

package/dist/es/index.js

@@ -42,6 +42,7 @@ export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
 export * from './components/LoadingOverlay';
+export * from './components/EditorHeader/EditorHeader';
 export * from './components/DatePicker';
 export * from './components/Text';
 export * from './components/RelativeDate';

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

@@ -0,0 +1,68 @@
+import React from 'react';
+export type PartialSubmission = {
+    id: string;
+    currentStep: SubmissionStep;
+    previousStep?: SubmissionStep | null | undefined;
+    nextStep?: SubmissionStep | null | undefined;
+};
+export type SubmissionStep = {
+    type: SubmissionStepType;
+};
+export type SubmissionStepTransition = {
+    status: {
+        id: string;
+        label: string;
+    };
+    type: SubmissionStepType;
+};
+export type SubmissionStepType = {
+    id: string;
+    label: string;
+    description: string;
+    transitions: Array<SubmissionStepTransition>;
+    role: {
+        label: string;
+    };
+};
+export declare enum DialogState {
+    INIT = 0,
+    LOADING = 1,
+    ERROR = 2,
+    SUCCESS = 3,
+    CLOSED = 4
+}
+export type ProceedDialogData = {
+    state: DialogState;
+    error?: string;
+    mutationError?: any;
+    updateState: (state: DialogState) => void;
+    clearError: () => void;
+};
+export declare const EditorHeader: React.FC<{
+    handleSnapshot?: () => Promise<void>;
+    submission: PartialSubmission;
+    hasPendingSuggestions?: boolean;
+    canCompleteTask: boolean;
+    exceptionDialog: React.FC<{
+        errorCode: string;
+    }>;
+    userRole: string;
+    submitProceed: {
+        dialogData: ProceedDialogData;
+        submit: (statusId: string, noteValue: string) => Promise<unknown>;
+    };
+    goBack?: () => void;
+    status?: 'saved' | 'saving' | 'offline' | 'failed';
+    isAnnotator: boolean;
+    isProofer: boolean;
+    message: React.FC;
+    disabelProceedNote?: boolean;
+}>;
+export declare const PrimaryButtonSmall: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    type: "button" | "submit" | "reset";
+} & {
+    danger?: boolean | undefined;
+    disabled?: boolean | undefined;
+    mini?: boolean | undefined;
+}, "type">;
+export declare const MediumTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, import("../Form").ErrorProps, never>;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ProceedDialogData } from '../..';
+import { SubmissionStepTransition, SubmissionStepType } from './EditorHeader';
+export declare const ProceedView: React.FC<{
+    isAnnotator: boolean;
+    isProofer: boolean;
+    disable: boolean;
+    onTransitionClick: (event: unknown) => void;
+    onNoteChange?: (event: unknown) => void;
+    hasPendingSuggestions: boolean;
+    dialogData: ProceedDialogData;
+    noteValue: string;
+    currentStepTransition: SubmissionStepTransition[];
+    previousStepType: SubmissionStepType | undefined;
+    currentStepType: SubmissionStepType;
+    nextStepType: SubmissionStepType;
+    onCancelClick: () => void;
+    continueDialogAction: () => Promise<void>;
+    message: React.FC<{
+        isCentered: boolean;
+    }>;
+}>;

package/dist/types/index.d.ts

@@ -43,6 +43,7 @@ export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
 export * from './components/LoadingOverlay';
+export * from './components/EditorHeader/EditorHeader';
 export * from './components/DatePicker';
 export * from './components/Text';
 export * from './components/RelativeDate';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.13.9-LEAN-3720.0",
+  "version": "1.13.9-LEAN-3753.0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@manuscripts/json-schema": "2.2.10",
-    "@manuscripts/transform": "2.3.15",
+    "@manuscripts/transform": "2.3.16-LEAN-3753.0",
     "@reach/tabs": "^0.18.0",
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",