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

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.autoComplete = exports.mergeCellsWithSpace = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertContributors = exports.insertAbstract = exports.insertBackmatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.autoComplete = exports.mergeCellsWithSpace = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAffiliation = exports.insertContributors = exports.insertAbstract = exports.insertBackmatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -619,9 +619,7 @@ const insertContributors = (state, dispatch, view) => {
     const contributors = state.schema.nodes.contributors.create({
         id: '',
     });
-    const affiliations = state.schema.nodes.affiliations.create({ id: '' });
-    const fragment = prosemirror_model_1.Fragment.fromArray([contributors, affiliations]);
-    const tr = state.tr.insert(pos, fragment);
+    const tr = state.tr.insert(pos, contributors);
     if (dispatch) {
         const selection = prosemirror_state_1.NodeSelection.create(tr.doc, pos);
         if (view) {
@@ -632,6 +630,30 @@ const insertContributors = (state, dispatch, view) => {
     return true;
 };
 exports.insertContributors = insertContributors;
+const insertAffiliation = (state, dispatch, view) => {
+    if ((0, utils_1.getChildOfType)(state.doc, transform_1.schema.nodes.affiliations, true)) {
+        return false;
+    }
+    const title = (0, prosemirror_utils_1.findChildrenByType)(state.doc, state.schema.nodes.title)[0];
+    let pos = title.pos + title.node.nodeSize;
+    const contributors = (0, prosemirror_utils_1.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 = prosemirror_state_1.NodeSelection.create(tr.doc, pos);
+        if (view) {
+            view.focus();
+        }
+        dispatch(tr.setSelection(selection).scrollIntoView());
+    }
+    return true;
+};
+exports.insertAffiliation = insertAffiliation;
 const insertKeywords = (state, dispatch, view) => {
     if ((0, utils_1.getChildOfType)(state.doc, transform_1.schema.nodes.keywords, true)) {
         return false;

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

@@ -1,61 +1,45 @@
 "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.AuthorActions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const DeleteAuthorConfirmationDialog_1 = require("./DeleteAuthorConfirmationDialog");
 const AuthorActionsContainer = styled_components_1.default.div `
   display: flex;
 `;
-const RemoveButton = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-
-  svg {
-    cursor: pointer;
-  }
-`;
 const StyledButtonGroup = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   flex: 1;
 `;
-const AuthorActions = ({ author, onSave, onDelete, onCancel, }) => {
-    const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
+const StyledIconButton = (0, styled_components_1.default)(style_guide_1.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;
+  }
+`;
+const AuthorActions = ({ onSave, onDelete, showDeleteDialog, handleShowDeleteDialog, newAuthor, isDisableSave, }) => {
     return (react_1.default.createElement(AuthorActionsContainer, { "data-cy": "author-action" },
-        react_1.default.createElement(DeleteAuthorConfirmationDialog_1.DeleteAuthorConfirmationDialog, { author: author, isOpen: showDeleteDialog, onDelete: () => {
-                setShowDeleteDialog(true);
+        react_1.default.createElement(DeleteAuthorConfirmationDialog_1.DeleteAuthorConfirmationDialog, { isOpen: showDeleteDialog, onDelete: () => {
+                handleShowDeleteDialog();
                 onDelete();
-            }, onCancel: () => setShowDeleteDialog(false) }),
-        react_1.default.createElement(RemoveButton, { onClick: () => setShowDeleteDialog(true) },
-            react_1.default.createElement(style_guide_1.DeleteIcon, null)),
+            }, onCancel: () => handleShowDeleteDialog() }),
         react_1.default.createElement(StyledButtonGroup, null,
-            react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
-            react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: onSave }, "Save"))));
+            react_1.default.createElement(StyledIconButton, { onClick: onSave, disabled: isDisableSave, type: "submit" },
+                react_1.default.createElement(style_guide_1.PlusIcon, null),
+                newAuthor ? 'Save Details' : 'Update Details'))));
 };
 exports.AuthorActions = AuthorActions;

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

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

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

@@ -28,10 +28,19 @@ const AuthorListContainer = styled_components_1.default.div `
   flex: 1;
   overflow-y: visible;
 `;
-const AuthorList = ({ author, authors, onSelect, moveAuthor, }) => {
+const AuthorListTitle = styled_components_1.default.h2 `
+  color: #6e6e6e;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-left: 14px;
+  margin-top: 28px;
+`;
+const AuthorList = ({ author, authors, onSelect, onDelete, moveAuthor, lastSavedAuthor, }) => {
     return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend },
+        react_1.default.createElement(AuthorListTitle, null, "Existing Authors"),
         react_1.default.createElement(AuthorListContainer, { "data-cy": "authors-list" }, authors.map((a) => {
-            return (react_1.default.createElement(DraggableAuthor_1.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_1.default.createElement(DraggableAuthor_1.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 }));
         }))));
 };
 exports.AuthorList = AuthorList;

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

@@ -54,12 +54,13 @@ const AuthorAffiliations_1 = require("./AuthorAffiliations");
 const AuthorDetailsForm_1 = require("./AuthorDetailsForm");
 const AuthorFormPlaceholder_1 = require("./AuthorFormPlaceholder");
 const AuthorList_1 = require("./AuthorList");
+const RequiredFieldConfirmationDialog_1 = require("./RequiredFieldConfirmationDialog");
 const SaveAuthorConfirmationDialog_1 = require("./SaveAuthorConfirmationDialog");
 const AddAuthorButton = styled_components_1.default.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_components_1.default.div `
@@ -79,6 +80,9 @@ const AuthorForms = styled_components_1.default.div `
   padding-left: ${(props) => props.theme.grid.unit * 3}px;
   padding-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
+const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
+  padding: 0;
+`;
 const authorsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
 const affiliationsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
 const normalize = (author) => ({
@@ -96,38 +100,97 @@ const normalize = (author) => ({
     footnote: author.footnote || [],
     corresp: author.corresp || [],
 });
-const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, }) => {
+const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, addNewAuthor = false, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const [isDisableSave, setDisableSave] = (0, react_1.useState)(false);
+    const [isEmailRequired, setEmailRequired] = (0, react_1.useState)(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = (0, react_1.useState)(false);
+    const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = (0, react_1.useState)(false);
+    const [lastSavedAuthor, setLastSavedAuthor] = (0, react_1.useState)(null);
+    const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
+    const [newAuthor, setNewAuthor] = (0, react_1.useState)(false);
+    const [unSavedChanges, setUnSavedChanges] = (0, react_1.useState)(false);
+    const [nextAuthor, setNextAuthor] = (0, react_1.useState)(null);
     const valuesRef = (0, react_1.useRef)();
     const actionsRef = (0, react_1.useRef)();
     const [authors, dispatchAuthors] = (0, react_1.useReducer)(authorsReducer, $authors.sort(authors_1.authorComparator));
     const [affiliations, dispatchAffiliations] = (0, react_1.useReducer)(affiliationsReducer, $affiliations);
+    (0, react_1.useEffect)(() => {
+        if (addNewAuthor) {
+            handleAddAuthor();
+        }
+    }, [addNewAuthor]);
     const [selection, setSelection] = (0, react_1.useState)(author);
     const handleSelect = (author) => {
         const values = valuesRef.current;
-        if (values && selection && !(0, lodash_1.isEqual)(values, normalize(selection))) {
+        if (values &&
+            selection &&
+            !(0, lodash_1.isEqual)(values, normalize(selection)) &&
+            !isDisableSave) {
             setShowConfirmationDialog(true);
+            setNextAuthor(author);
+        }
+        else if (isDisableSave && unSavedChanges) {
+            setShowRequiredFieldConfirmationDialog(true);
+            setNextAuthor(author);
         }
         else {
             setSelection(author);
         }
     };
-    const handleClose = () => {
+    (0, react_1.useEffect)(() => {
         const values = valuesRef.current;
         if (values && selection && !(0, lodash_1.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({
@@ -150,7 +213,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             state: copy,
         });
     };
-    const handleAddAuthor = () => {
+    const createNewAuthor = () => {
         const name = (0, json_schema_1.buildBibliographicName)({ given: '', family: '' });
         const author = {
             id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Contributor),
@@ -167,12 +230,18 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             corresp: [],
             footnote: [],
         };
-        onSaveAuthor(author);
         setSelection(author);
-        dispatchAuthors({
-            type: 'update',
-            items: [author],
-        });
+    };
+    const handleAddAuthor = () => {
+        const values = valuesRef.current;
+        if (values && selection && !(0, lodash_1.isEqual)(values, normalize(selection))) {
+            setShowConfirmationDialog(true);
+            setNextAuthor(null);
+            setNewAuthor(true);
+        }
+        else {
+            createNewAuthor();
+        }
     };
     const handleDeleteAuthor = () => {
         if (!selection) {
@@ -212,9 +281,44 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         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 = (0, lodash_1.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_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
         react_1.default.createElement(style_guide_1.ModalContainer, null,
@@ -224,16 +328,17 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
                 react_1.default.createElement(style_guide_1.ModalSidebar, { "data-cy": "authors-sidebar" },
                     react_1.default.createElement(style_guide_1.ModalSidebarHeader, null,
                         react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Authors")),
-                    react_1.default.createElement(style_guide_1.SidebarContent, null,
+                    react_1.default.createElement(StyledSidebarContent, null,
                         react_1.default.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor },
-                            react_1.default.createElement(style_guide_1.AddIcon, { width: 40, height: 40 }),
-                            react_1.default.createElement(ActionTitle, null, "Add Author")),
-                        react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: handleSelect, moveAuthor: handleMoveAuthor }))),
+                            react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
+                            react_1.default.createElement(ActionTitle, null, "New Author")),
+                        react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: handleSelect, onDelete: handleShowDeleteDialog, moveAuthor: handleMoveAuthor, lastSavedAuthor: lastSavedAuthor }))),
                 react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(AuthorForms, null,
-                    react_1.default.createElement(SaveAuthorConfirmationDialog_1.SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: () => handleSaveAuthor(valuesRef.current), onCancel: handleResetAuthor }),
-                    react_1.default.createElement(AuthorActions_1.AuthorActions, { author: selection, onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, onCancel: () => setOpen(false) }),
+                    react_1.default.createElement(RequiredFieldConfirmationDialog_1.RequiredFieldConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onSave: () => setShowRequiredFieldConfirmationDialog(false), onCancel: handleCancel }),
+                    react_1.default.createElement(SaveAuthorConfirmationDialog_1.SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: handleSave, onCancel: handleCancel }),
+                    react_1.default.createElement(AuthorActions_1.AuthorActions, { onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newAuthor: newAuthor, isDisableSave: isDisableSave }),
                     react_1.default.createElement(FormLabel, null, "Details"),
-                    react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef }),
+                    react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired }),
                     react_1.default.createElement(FormLabel, null, "Affiliations"),
                     react_1.default.createElement(AuthorAffiliations_1.AuthorAffiliations, { author: selection, affiliations: affiliations, onSave: handleSaveAffiliation, onAdd: handleAddAffiliation, onRemove: handleRemoveAffiliation }))) : (react_1.default.createElement(AuthorFormPlaceholder_1.AuthorFormPlaceholder, null)))))));
 };

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

@@ -6,10 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeleteAuthorConfirmationDialog = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
-const authors_1 = require("../../lib/authors");
-const DeleteAuthorConfirmationDialog = ({ isOpen, author, onDelete, onCancel }) => {
-    const label = (0, authors_1.authorLabel)(author);
-    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.Category.confirmation, header: 'Remove author', message: `Are you sure you want to remove ${label} from the authors list?`, actions: {
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledIcon = (0, styled_components_1.default)(style_guide_1.AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const P = styled_components_1.default.p `
+  margin-bottom: 4px;
+`;
+const Header = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(StyledIcon, null),
+    " Delete author"));
+const Message = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("p", null, "Are you sure you want to remove this author from the authors list?"),
+        react_1.default.createElement(P, null, "Do you want to continue?")));
+};
+const DeleteAuthorConfirmationDialog = ({ isOpen, onDelete, 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: onDelete,
                 title: 'Delete',

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

@@ -49,16 +49,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const authors_1 = require("../../lib/authors");
 const dnd_1 = require("../../lib/dnd");
 const AuthorContainer = styled_components_1.default.div `
-  padding: ${(props) => props.theme.grid.unit * 2}px;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0
+    ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  cursor: pointer;
   transition: background-color 0.25s;
   border: 1px solid transparent;
   border-left: 0;
   border-right: 0;
-
   &:hover,
   &.active {
     background: ${(props) => props.theme.colors.background.fifth};
@@ -69,20 +68,31 @@ const AuthorContainer = styled_components_1.default.div `
   }
 
   &.dragging {
-    visibility: hidden;
+    opacity: 1;
+    cursor: grabbing;
+  }
+
+  &.dragging * {
+    opacity: 0;
   }
 
   &.drop-before {
+    cursor: grabbing;
     border-top-color: ${(props) => props.theme.colors.brand.dark};
   }
 
   &.drop-after {
+    cursor: grabbing;
     border-bottom-color: ${(props) => props.theme.colors.brand.dark};
   }
 `;
 const AvatarContainer = styled_components_1.default.div `
   display: inline-flex;
   position: relative;
+  align-items: center;
+`;
+const Box = styled_components_1.default.div `
+  margin-left: 14px;
 `;
 const AuthorBadge = styled_components_1.default.div `
   display: inline-flex;
@@ -103,21 +113,40 @@ const AuthorName = styled_components_1.default.div `
   margin-left: 12px;
   flex: 1;
 `;
-const DragHandle = (0, styled_components_1.default)(style_guide_1.VerticalEllipsisIcon) `
+const DragHandle = (0, styled_components_1.default)(style_guide_1.DraggableIcon) `
   cursor: move;
+  margin-left: -4px;
+  margin-right: -12px;
 `;
-const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) => {
+const RemoveButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  svg {
+    cursor: pointer;
+  }
+  .icon_element {
+    fill: #6e6e6e;
+  }
+`;
+const StyledCrclTickAnimation = (0, styled_components_1.default)(style_guide_1.CrclTickAnimation) `
+  margin-left: 12px;
+`;
+exports.DraggableAuthor = react_1.default.memo(({ author, isSelected, onClick, onDelete, moveAuthor, showSuccessIcon }) => {
     const [dropSide, setDropSide] = (0, react_1.useState)();
     const ref = (0, react_1.useRef)(null);
-    const [{ isDragging }, dragRef] = (0, react_dnd_1.useDrag)({
+    const [{ isDragging }, dragRef, preview] = (0, react_dnd_1.useDrag)({
         type: 'author',
         item: {
             author,
         },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
+        collect: (monitor) => {
+            return {
+                isDragging: monitor.isDragging(),
+            };
+        },
     });
+    preview(ref);
     const [{ isOver }, dropRef] = (0, react_dnd_1.useDrop)({
         accept: 'author',
         hover: (item, monitor) => {
@@ -151,13 +180,31 @@ const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) => {
     }
     if (isSelected) {
         classes.push('active');
+        if (ref.current) {
+            ref.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+        }
     }
-    return (react_1.default.createElement(AuthorContainer, { ref: ref, className: classes.join(' '), onClick: onClick, "data-cy": "author-item" },
+    (0, react_1.useEffect)(() => {
+        if (isDragging || isOver) {
+            document.body.style.cursor = 'grabbing';
+        }
+        return () => {
+            document.body.style.cursor = 'default';
+        };
+    }, [isDragging, isOver]);
+    return (react_1.default.createElement(AuthorContainer, { ref: ref, className: classes.join(' '), onClick: onClick, "data-cy": "author-item", style: { cursor: isDragging ? 'grabbing' : 'default' } },
         react_1.default.createElement(AvatarContainer, { "data-cy": "author-avatar" },
-            react_1.default.createElement(style_guide_1.Avatar, { size: 36, color: '#6e6e6e' }),
+            isSelected && react_1.default.createElement(DragHandle, null),
+            react_1.default.createElement(Box, null,
+                showSuccessIcon && react_1.default.createElement(StyledCrclTickAnimation, { size: 36 }),
+                react_1.default.createElement(style_guide_1.Avatar, { size: 36, color: '#6e6e6e', opacity: showSuccessIcon ? 0.05 : 1 })),
             react_1.default.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (react_1.default.createElement(AuthorBadge, null,
                 react_1.default.createElement(style_guide_1.CorrespondingAuthorIcon, null))))),
         react_1.default.createElement(AuthorName, { "data-cy": "author-name" }, (0, authors_1.authorLabel)(author)),
-        isSelected && react_1.default.createElement(DragHandle, null)));
-};
-exports.DraggableAuthor = DraggableAuthor;
+        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-id": 'delete-button-tooltip' },
+            react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' }),
+            react_1.default.createElement(style_guide_1.Tooltip, { id: 'delete-button-tooltip', place: "bottom" }, 'Delete')))));
+});