@manuscripts/body-editor 2.6.37 → 2.6.38-LEAN-4186.2

package/dist/cjs/components/authors/RequiredFieldConfirmationDialog.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequiredFieldConfirmationDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledIcon = (0, styled_components_1.default)(style_guide_1.AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const MessageBox = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 90px;
+`;
+const Header = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(StyledIcon, null),
+    " Empty required field"));
+const Message = () => {
+    return (react_1.default.createElement(MessageBox, null,
+        react_1.default.createElement("div", null, "A required filed has been left empty. If you discard, any updates will not be saved!"),
+        react_1.default.createElement("div", null, "Would you like to discard or continue editing?")));
+};
+const RequiredFieldConfirmationDialog = ({ isOpen, onSave, onCancel }) => {
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.Category.confirmation, header: react_1.default.createElement(Header, null), message: react_1.default.createElement(Message, null), actions: {
+            secondary: {
+                action: onCancel,
+                title: 'Discard',
+            },
+            primary: {
+                action: onSave,
+                title: 'Continue editing',
+            },
+        } }));
+};
+exports.RequiredFieldConfirmationDialog = RequiredFieldConfirmationDialog;

package/dist/cjs/components/authors/SaveAuthorConfirmationDialog.js

@@ -6,8 +6,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SaveAuthorConfirmationDialog = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledIcon = (0, styled_components_1.default)(style_guide_1.AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const MessageBox = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 72px;
+`;
+const Header = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(StyledIcon, null),
+    " Unsaved changes"));
+const Message = () => {
+    return (react_1.default.createElement(MessageBox, null,
+        react_1.default.createElement("div", null, "You've made changes but not saved them!"),
+        react_1.default.createElement("div", null, "Would you like to save or discard your changes?")));
+};
 const SaveAuthorConfirmationDialog = ({ isOpen, onSave, onCancel }) => {
-    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.Category.confirmation, header: react_1.default.createElement(Header, null), message: react_1.default.createElement(Message, null), actions: {
             secondary: {
                 action: onCancel,
                 title: 'Discard',

package/dist/cjs/menus.js

@@ -104,10 +104,16 @@ const getEditorMenus = (editor) => {
                     },
                     {
                         id: 'insert-contributors',
-                        label: 'Authors & Affiliations',
+                        label: 'Authors',
                         isEnabled: isCommandValid(commands_1.insertContributors),
                         run: doCommand(commands_1.insertContributors),
                     },
+                    {
+                        id: 'insert-contributors',
+                        label: 'Affiliations',
+                        isEnabled: isCommandValid(commands_1.insertAffiliation),
+                        run: doCommand(commands_1.insertAffiliation),
+                    },
                     {
                         id: 'insert-keywords',
                         label: 'Keywords',

package/dist/cjs/plugins/cross-references.js

@@ -23,7 +23,7 @@ const objects_1 = require("./objects");
 exports.default = () => {
     return new prosemirror_state_1.Plugin({
         state: {
-            init(_, state) {
+            init() {
                 return prosemirror_view_1.DecorationSet.empty;
             },
             apply(tr, oldDecorationSet, oldState, newState) {

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '2.6.37';
+exports.VERSION = '2.6.38-LEAN-4186.2';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/contributors.js

@@ -115,16 +115,25 @@ class ContributorsView extends block_view_1.default {
             this.dom = document.createElement('div');
             this.dom.classList.add('block-container', `block-${this.node.type.name}`);
         };
-        this.createEditButton = () => {
+        this.authorContextMenu = () => {
             const can = this.props.getCapabilities();
-            const button = (0, ReactSubView_1.default)(this.props, style_guide_1.SecondaryButton, {
-                mini: true,
-                onClick: () => this.handleEdit(''),
-                className: 'edit-authors-button',
-                disabled: !can.editMetadata,
-                children: 'Edit Authors',
-            }, this.node, this.getPos, this.view);
-            this.container.appendChild(button);
+            const componentProps = {
+                actions: [],
+            };
+            if (can.editArticle) {
+                componentProps.actions.push({
+                    label: 'New Author',
+                    action: () => this.handleEdit('', true),
+                    icon: 'AddOutline',
+                });
+                componentProps.actions.push({
+                    label: 'Edit',
+                    action: () => this.handleEdit(''),
+                    icon: 'Edit',
+                });
+            }
+            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            return this.contextMenu;
         };
         this.createLegend = () => {
             const state = affiliations_1.affiliationsKey.getState(this.view.state);
@@ -184,7 +193,7 @@ class ContributorsView extends block_view_1.default {
             this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
             this.props.popper.show(element, this.contextMenu, 'right-start');
         };
-        this.handleEdit = (id) => {
+        this.handleEdit = (id, addNew) => {
             var _a;
             this.props.popper.destroy();
             const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
@@ -197,6 +206,7 @@ class ContributorsView extends block_view_1.default {
                 onSaveAuthor: this.handleSaveAuthor,
                 onDeleteAuthor: this.handleDeleteAuthor,
                 onSaveAffiliation: this.handleSaveAffiliation,
+                addNewAuthor: addNew,
             };
             (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
             this.popper = (0, ReactSubView_1.default)(this.props, AuthorsModal_1.AuthorsModal, componentProps, this.node, this.getPos, this.view);
@@ -226,11 +236,29 @@ class ContributorsView extends block_view_1.default {
             this.view.dispatch(tr.insert(parent.pos + 1, node));
         };
         this.insertAffiliationNode = (attrs) => {
-            const parent = (0, view_1.findChildByType)(this.view, transform_1.schema.nodes.affiliations);
-            const tr = this.view.state.tr;
-            const node = transform_1.schema.nodes.affiliation.create(attrs);
-            this.view.dispatch(tr.insert(parent.pos + 1, node));
+            const { view } = this;
+            const { dispatch } = view;
+            const affiliationsNodeType = transform_1.schema.nodes.affiliations;
+            const contributorsNodeType = transform_1.schema.nodes.contributors;
+            const affiliationNodeType = transform_1.schema.nodes.affiliation;
+            let affiliations = (0, view_1.findChildByType)(view, affiliationsNodeType);
+            if (!affiliations) {
+                const contributors = (0, view_1.findChildByType)(view, contributorsNodeType);
+                if (contributors) {
+                    const { tr } = this.view.state;
+                    const affiliationsNode = affiliationsNodeType.create();
+                    const insertPos = contributors.pos + contributors.node.nodeSize;
+                    dispatch(tr.insert(insertPos, affiliationsNode));
+                    affiliations = (0, view_1.findChildByType)(view, affiliationsNodeType);
+                }
+            }
+            if (affiliations) {
+                const { tr } = this.view.state;
+                const affiliationNode = affiliationNodeType.create(attrs);
+                dispatch(tr.insert(affiliations.pos + 1, affiliationNode));
+            }
         };
+        this.actionGutterButtons = () => [this.authorContextMenu()];
     }
     updateContents() {
         const affs = affiliations_1.affiliationsKey.getState(this.view.state);
@@ -244,7 +272,6 @@ class ContributorsView extends block_view_1.default {
         this.version = affs.version;
         this.container.innerHTML = '';
         this.buildAuthors(affs);
-        this.createEditButton();
         this.createLegend();
         this.updateSelection();
     }

package/dist/es/commands.js

@@ -587,9 +587,30 @@ export const insertContributors = (state, dispatch, view) => {
     const contributors = state.schema.nodes.contributors.create({
         id: '',
     });
-    const affiliations = state.schema.nodes.affiliations.create({ id: '' });
-    const fragment = Fragment.fromArray([contributors, affiliations]);
-    const tr = state.tr.insert(pos, fragment);
+    const tr = state.tr.insert(pos, contributors);
+    if (dispatch) {
+        const selection = NodeSelection.create(tr.doc, pos);
+        if (view) {
+            view.focus();
+        }
+        dispatch(tr.setSelection(selection).scrollIntoView());
+    }
+    return true;
+};
+export const insertAffiliation = (state, dispatch, view) => {
+    if (getChildOfType(state.doc, schema.nodes.affiliations, true)) {
+        return false;
+    }
+    const title = findChildrenByType(state.doc, state.schema.nodes.title)[0];
+    let pos = title.pos + title.node.nodeSize;
+    const contributors = findChildrenByType(state.doc, state.schema.nodes.contributors)[0];
+    if (contributors) {
+        pos = contributors.pos + contributors.node.nodeSize;
+    }
+    const affiliations = state.schema.nodes.affiliations.create({
+        id: '',
+    });
+    const tr = state.tr.insert(pos, affiliations);
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, pos);
         if (view) {

package/dist/es/components/authors/AuthorActions.js

@@ -1,31 +1,38 @@
-import { ButtonGroup, DeleteIcon, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
-import React, { useState } from 'react';
+import { ButtonGroup, IconButton, PlusIcon } from '@manuscripts/style-guide';
+import React from 'react';
 import styled from 'styled-components';
 import { DeleteAuthorConfirmationDialog } from './DeleteAuthorConfirmationDialog';
 const AuthorActionsContainer = styled.div `
   display: flex;
 `;
-const RemoveButton = styled.div `
-  display: flex;
-  align-items: center;
-
-  svg {
-    cursor: pointer;
-  }
-`;
 const StyledButtonGroup = styled(ButtonGroup) `
   flex: 1;
 `;
-export const AuthorActions = ({ author, onSave, onDelete, onCancel, }) => {
-    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+const StyledIconButton = styled(IconButton) `
+  color: #0d79d0;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  width: auto;
+  &:disabled {
+    color: #c9c9c9 !important;
+    background-color: unset !important;
+    border: unset;
+  }
+  svg {
+    margin-right: 4px;
+  }
+`;
+export const AuthorActions = ({ onSave, onDelete, showDeleteDialog, handleShowDeleteDialog, newAuthor, isDisableSave, }) => {
     return (React.createElement(AuthorActionsContainer, { "data-cy": "author-action" },
-        React.createElement(DeleteAuthorConfirmationDialog, { author: author, isOpen: showDeleteDialog, onDelete: () => {
-                setShowDeleteDialog(true);
+        React.createElement(DeleteAuthorConfirmationDialog, { isOpen: showDeleteDialog, onDelete: () => {
+                handleShowDeleteDialog();
                 onDelete();
-            }, onCancel: () => setShowDeleteDialog(false) }),
-        React.createElement(RemoveButton, { onClick: () => setShowDeleteDialog(true) },
-            React.createElement(DeleteIcon, null)),
+            }, onCancel: () => handleShowDeleteDialog() }),
         React.createElement(StyledButtonGroup, null,
-            React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
-            React.createElement(PrimaryButton, { onClick: onSave }, "Save"))));
+            React.createElement(StyledIconButton, { onClick: onSave, disabled: isDisableSave, type: "submit" },
+                React.createElement(PlusIcon, null),
+                newAuthor ? 'Save Details' : 'Update Details'))));
 };

package/dist/es/components/authors/AuthorDetailsForm.js

@@ -24,6 +24,9 @@ export const LabelText = styled.div `
     ${(props) => props.theme.font.family.sans};
   letter-spacing: -0.2px;
   color: ${(props) => props.theme.colors.text.primary};
+  &::before {
+    margin-right: 8px !important;
+  }
 `;
 export const Fieldset = styled.fieldset `
   padding: 0;
@@ -33,7 +36,17 @@ export const Fieldset = styled.fieldset `
 const OrcidContainer = styled.div `
   margin: 16px 0 0;
 `;
-export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, }) => {
+const TextFieldWithError = styled(TextField) `
+  &:required::placeholder {
+    color: ${(props) => props.theme.colors.text.error};
+  }
+`;
+const CheckboxContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 32px;
+`;
+export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, }) => {
     const formRef = useRef(null);
     if (actionsRef && !actionsRef.current) {
         actionsRef.current = {
@@ -43,22 +56,28 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, }) =>
             },
         };
     }
-    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: false, innerRef: formRef }, (formik) => {
+    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef }, (formik) => {
         const isAuthor = formik.values.role === 'author';
         return (React.createElement(ChangeHandlingForm, { onChange: onChange },
             React.createElement(Fieldset, null,
                 React.createElement(TextFieldGroupContainer, null,
                     React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(TextField, Object.assign({ id: 'given-name', placeholder: 'Given name' }, props.field)))),
                     React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(TextField, Object.assign({ id: 'family-name', placeholder: 'Family name' }, props.field))))),
-                React.createElement(Field, { name: 'email', type: 'email' }, (props) => (React.createElement(TextField, Object.assign({ id: 'email', placeholder: 'Email address' }, props.field)))),
-                React.createElement(CheckboxLabel, { disabled: !isAuthor },
-                    React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, Object.assign({ id: 'isCorresponding', checked: props.field.value, disabled: !isAuthor }, props.field)))),
-                    React.createElement(LabelText, null, "Corresponding Author")),
-                React.createElement(CheckboxLabel, null,
-                    React.createElement(Field, { name: 'role', type: 'checkbox' }, (props) => (React.createElement(CheckboxField, { name: 'role', checked: isAuthor, onChange: (e) => {
-                            formik.setFieldValue(props.field.name, e.target.checked ? 'author' : 'other', false);
-                        } }))),
-                    React.createElement(LabelText, null, "Include in Authors List")),
+                React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
+                    const placeholder = isEmailRequired
+                        ? '*Email address (required)'
+                        : 'Email address';
+                    return (React.createElement(TextFieldWithError, Object.assign({ required: isEmailRequired, id: 'email', placeholder: placeholder }, props.field)));
+                }),
+                React.createElement(CheckboxContainer, null,
+                    React.createElement(CheckboxLabel, { disabled: !isAuthor },
+                        React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, Object.assign({ id: 'isCorresponding', checked: props.field.value, disabled: !isAuthor }, props.field)))),
+                        React.createElement(LabelText, null, "Corresponding Author")),
+                    React.createElement(CheckboxLabel, null,
+                        React.createElement(Field, { name: 'role', type: 'checkbox' }, (props) => (React.createElement(CheckboxField, { name: 'role', checked: isAuthor, onChange: (e) => {
+                                formik.setFieldValue(props.field.name, e.target.checked ? 'author' : 'other', false);
+                            } }))),
+                        React.createElement(LabelText, null, "Include in Authors List"))),
                 React.createElement(OrcidContainer, null,
                     React.createElement(TextFieldLabel, null,
                         React.createElement(LabelText, null, "ORCID"),

package/dist/es/components/authors/AuthorList.js

@@ -22,9 +22,18 @@ const AuthorListContainer = styled.div `
   flex: 1;
   overflow-y: visible;
 `;
-export const AuthorList = ({ author, authors, onSelect, moveAuthor, }) => {
+const AuthorListTitle = styled.h2 `
+  color: #6e6e6e;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-left: 14px;
+  margin-top: 28px;
+`;
+export const AuthorList = ({ author, authors, onSelect, onDelete, moveAuthor, lastSavedAuthor, }) => {
     return (React.createElement(DndProvider, { backend: HTML5Backend },
+        React.createElement(AuthorListTitle, null, "Existing Authors"),
         React.createElement(AuthorListContainer, { "data-cy": "authors-list" }, authors.map((a) => {
-            return (React.createElement(DraggableAuthor, { key: a.id, author: a, isSelected: a.id === (author === null || author === void 0 ? void 0 : author.id), onClick: () => onSelect(a), moveAuthor: moveAuthor }));
+            return (React.createElement(DraggableAuthor, { key: a.id, author: a, isSelected: a.id === (author === null || author === void 0 ? void 0 : author.id), onClick: () => onSelect(a), onDelete: () => onDelete(), moveAuthor: moveAuthor, showSuccessIcon: lastSavedAuthor === a.id }));
         }))));
 };

package/dist/es/components/authors/AuthorsModal.js

@@ -16,7 +16,7 @@
 import { buildBibliographicName, generateID, ObjectTypes, } from '@manuscripts/json-schema';
 import { AddIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
 import { isEqual } from 'lodash';
-import React, { useReducer, useRef, useState } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { arrayReducer } from '../../lib/array-reducer';
 import { authorComparator, } from '../../lib/authors';
@@ -25,12 +25,13 @@ import { AuthorAffiliations } from './AuthorAffiliations';
 import { AuthorDetailsForm } from './AuthorDetailsForm';
 import { AuthorFormPlaceholder } from './AuthorFormPlaceholder';
 import { AuthorList } from './AuthorList';
+import { RequiredFieldConfirmationDialog } from './RequiredFieldConfirmationDialog';
 import { SaveAuthorConfirmationDialog } from './SaveAuthorConfirmationDialog';
 const AddAuthorButton = styled.div `
   display: flex;
   align-items: center;
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
-  margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  margin-left: ${(props) => props.theme.grid.unit * 4}px;
   cursor: pointer;
 `;
 const ActionTitle = styled.div `
@@ -50,6 +51,9 @@ const AuthorForms = styled.div `
   padding-left: ${(props) => props.theme.grid.unit * 3}px;
   padding-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
+const StyledSidebarContent = styled(SidebarContent) `
+  padding: 0;
+`;
 const authorsReducer = arrayReducer((a, b) => a.id === b.id);
 const affiliationsReducer = arrayReducer((a, b) => a.id === b.id);
 const normalize = (author) => ({
@@ -67,38 +71,97 @@ const normalize = (author) => ({
     footnote: author.footnote || [],
     corresp: author.corresp || [],
 });
-export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, }) => {
+export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, addNewAuthor = false, }) => {
     const [isOpen, setOpen] = useState(true);
+    const [isDisableSave, setDisableSave] = useState(false);
+    const [isEmailRequired, setEmailRequired] = useState(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
+    const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = useState(false);
+    const [lastSavedAuthor, setLastSavedAuthor] = useState(null);
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    const [newAuthor, setNewAuthor] = useState(false);
+    const [unSavedChanges, setUnSavedChanges] = useState(false);
+    const [nextAuthor, setNextAuthor] = useState(null);
     const valuesRef = useRef();
     const actionsRef = useRef();
     const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
     const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, $affiliations);
+    useEffect(() => {
+        if (addNewAuthor) {
+            handleAddAuthor();
+        }
+    }, [addNewAuthor]);
     const [selection, setSelection] = useState(author);
     const handleSelect = (author) => {
         const values = valuesRef.current;
-        if (values && selection && !isEqual(values, normalize(selection))) {
+        if (values &&
+            selection &&
+            !isEqual(values, normalize(selection)) &&
+            !isDisableSave) {
             setShowConfirmationDialog(true);
+            setNextAuthor(author);
+        }
+        else if (isDisableSave && unSavedChanges) {
+            setShowRequiredFieldConfirmationDialog(true);
+            setNextAuthor(author);
         }
         else {
             setSelection(author);
         }
     };
-    const handleClose = () => {
+    useEffect(() => {
         const values = valuesRef.current;
         if (values && selection && !isEqual(values, normalize(selection))) {
+            setUnSavedChanges(true);
+        }
+    }, [valuesRef.current]);
+    const handleClose = () => {
+        if (isDisableSave && unSavedChanges) {
+            setShowRequiredFieldConfirmationDialog(true);
+        }
+        else if (unSavedChanges) {
             setShowConfirmationDialog(true);
         }
         else {
+            setShowRequiredFieldConfirmationDialog(false);
+            setLastSavedAuthor(null);
             setOpen(false);
         }
     };
+    const handleSave = () => {
+        if (valuesRef.current && selection) {
+            handleSaveAuthor(valuesRef.current);
+        }
+        if (nextAuthor) {
+            setSelection(nextAuthor);
+            setNextAuthor(null);
+        }
+        else if (newAuthor) {
+            createNewAuthor();
+            setNewAuthor(false);
+        }
+        setShowConfirmationDialog(false);
+    };
+    const handleCancel = () => {
+        handleResetAuthor();
+        if (nextAuthor) {
+            setSelection(nextAuthor);
+            setNextAuthor(null);
+        }
+        else if (newAuthor) {
+            createNewAuthor();
+            setNewAuthor(false);
+        }
+        setShowConfirmationDialog(false);
+    };
     const handleSaveAuthor = (values) => {
         if (!values || !selection) {
             return;
         }
         const author = Object.assign(Object.assign({}, selection), values);
         onSaveAuthor(author);
+        setLastSavedAuthor(author.id);
+        setUnSavedChanges(false);
         setSelection(author);
         setShowConfirmationDialog(false);
         dispatchAuthors({
@@ -121,7 +184,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             state: copy,
         });
     };
-    const handleAddAuthor = () => {
+    const createNewAuthor = () => {
         const name = buildBibliographicName({ given: '', family: '' });
         const author = {
             id: generateID(ObjectTypes.Contributor),
@@ -138,12 +201,18 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             corresp: [],
             footnote: [],
         };
-        onSaveAuthor(author);
         setSelection(author);
-        dispatchAuthors({
-            type: 'update',
-            items: [author],
-        });
+    };
+    const handleAddAuthor = () => {
+        const values = valuesRef.current;
+        if (values && selection && !isEqual(values, normalize(selection))) {
+            setShowConfirmationDialog(true);
+            setNextAuthor(null);
+            setNewAuthor(true);
+        }
+        else {
+            createNewAuthor();
+        }
     };
     const handleDeleteAuthor = () => {
         if (!selection) {
@@ -183,9 +252,44 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         var _a;
         (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         setShowConfirmationDialog(false);
+        setShowRequiredFieldConfirmationDialog(false);
+        setUnSavedChanges(false);
+        if (!newAuthor && !nextAuthor) {
+            setLastSavedAuthor(null);
+            setOpen(false);
+        }
+        else {
+            setNewAuthor(false);
+            createNewAuthor();
+        }
     };
     const handleChangeAuthor = (values) => {
+        const isUnchanged = isEqual(normalize(selection), values);
         valuesRef.current = values;
+        const { given, family } = values.bibliographicName;
+        const { email, isCorresponding } = values;
+        const isNameFilled = (given === null || given === void 0 ? void 0 : given.length) && (family === null || family === void 0 ? void 0 : family.length);
+        if (isNameFilled && !isCorresponding && !isUnchanged) {
+            setDisableSave(false);
+        }
+        else if (isCorresponding &&
+            (email === null || email === void 0 ? void 0 : email.length) &&
+            isNameFilled &&
+            !isUnchanged) {
+            setDisableSave(false);
+        }
+        else {
+            setDisableSave(true);
+        }
+        if (isCorresponding && !(email === null || email === void 0 ? void 0 : email.length)) {
+            setEmailRequired(true);
+        }
+        else {
+            setEmailRequired(false);
+        }
+    };
+    const handleShowDeleteDialog = () => {
+        setShowDeleteDialog((prev) => !prev);
     };
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
         React.createElement(ModalContainer, null,
@@ -195,16 +299,17 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
                 React.createElement(ModalSidebar, { "data-cy": "authors-sidebar" },
                     React.createElement(ModalSidebarHeader, null,
                         React.createElement(ModalSidebarTitle, null, "Authors")),
-                    React.createElement(SidebarContent, null,
+                    React.createElement(StyledSidebarContent, null,
                         React.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor },
-                            React.createElement(AddIcon, { width: 40, height: 40 }),
-                            React.createElement(ActionTitle, null, "Add Author")),
-                        React.createElement(AuthorList, { author: selection, authors: authors, onSelect: handleSelect, moveAuthor: handleMoveAuthor }))),
+                            React.createElement(AddIcon, { width: 18, height: 18 }),
+                            React.createElement(ActionTitle, null, "New Author")),
+                        React.createElement(AuthorList, { author: selection, authors: authors, onSelect: handleSelect, onDelete: handleShowDeleteDialog, moveAuthor: handleMoveAuthor, lastSavedAuthor: lastSavedAuthor }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(AuthorForms, null,
-                    React.createElement(SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: () => handleSaveAuthor(valuesRef.current), onCancel: handleResetAuthor }),
-                    React.createElement(AuthorActions, { author: selection, onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, onCancel: () => setOpen(false) }),
+                    React.createElement(RequiredFieldConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onSave: () => setShowRequiredFieldConfirmationDialog(false), onCancel: handleCancel }),
+                    React.createElement(SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: handleSave, onCancel: handleCancel }),
+                    React.createElement(AuthorActions, { onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newAuthor: newAuthor, isDisableSave: isDisableSave }),
                     React.createElement(FormLabel, null, "Details"),
-                    React.createElement(AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef }),
+                    React.createElement(AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired }),
                     React.createElement(FormLabel, null, "Affiliations"),
                     React.createElement(AuthorAffiliations, { author: selection, affiliations: affiliations, onSave: handleSaveAffiliation, onAdd: handleAddAffiliation, onRemove: handleRemoveAffiliation }))) : (React.createElement(AuthorFormPlaceholder, null)))))));
 };

package/dist/es/components/authors/DeleteAuthorConfirmationDialog.js

@@ -1,9 +1,22 @@
-import { Category, Dialog } from '@manuscripts/style-guide';
+import { AttentionOrangeIcon, Category, Dialog } from '@manuscripts/style-guide';
 import React from 'react';
-import { authorLabel } from '../../lib/authors';
-export const DeleteAuthorConfirmationDialog = ({ isOpen, author, onDelete, onCancel }) => {
-    const label = authorLabel(author);
-    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: 'Remove author', message: `Are you sure you want to remove ${label} from the authors list?`, actions: {
+import styled from 'styled-components';
+const StyledIcon = styled(AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const P = styled.p `
+  margin-bottom: 4px;
+`;
+const Header = () => (React.createElement(React.Fragment, null,
+    React.createElement(StyledIcon, null),
+    " Delete author"));
+const Message = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("p", null, "Are you sure you want to remove this author from the authors list?"),
+        React.createElement(P, null, "Do you want to continue?")));
+};
+export const DeleteAuthorConfirmationDialog = ({ isOpen, onDelete, onCancel }) => {
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: React.createElement(Header, null), message: React.createElement(Message, null), actions: {
             secondary: {
                 action: onDelete,
                 title: 'Delete',