@manuscripts/body-editor 3.12.33 → 3.12.35

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

@@ -51,36 +51,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxContainer = exports.Fieldset = exports.AuthorDetailsForm = void 0;
+exports.StyledFormRow = exports.StyledFormGroup = exports.CheckboxContainer = exports.Fieldset = exports.AuthorDetailsForm = exports.authorDetailsTabShowsErrorIndicator = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const normalize_1 = require("../../lib/normalize");
 const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
+const UnsavedLabel_1 = require("../form/UnsavedLabel");
+const useAuthorShowsErrorIndicator_1 = require("../hooks/useAuthorShowsErrorIndicator");
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const ORCID_URL_REGEX = /^https:\/\/orcid\.org\/\d{4}-\d{4}-\d{4}-\d{3}[0-9Xx]\/?$/;
 const ORCID_INPUT_PATTERN = ORCID_URL_REGEX.source.slice(1, -1);
-const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, selectedCreditRoles, authorFormRef, }) => {
-    const formRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (selectedAffiliations && formRef.current) {
-            formRef.current.setFieldValue('affiliationIDs', selectedAffiliations);
-        }
-    }, [selectedAffiliations]);
-    (0, react_1.useEffect)(() => {
-        if (selectedCreditRoles && formRef.current) {
-            formRef.current.setFieldValue('creditRoles', selectedCreditRoles);
-        }
-    }, [selectedCreditRoles]);
-    if (actionsRef) {
-        actionsRef.current = {
-            reset: () => formRef.current?.resetForm(),
-            submitForm: () => formRef.current?.submitForm(),
-        };
+const NAME_PAIR_REQUIRED_MESSAGE = 'Please enter Given Name or Family Name';
+function isAuthorFieldChanged(formik, key) {
+    const v = (0, normalize_1.normalizeAuthor)(formik.values);
+    const i = (0, normalize_1.normalizeAuthor)(formik.initialValues);
+    const va = (0, formik_1.getIn)(v, key);
+    const vb = (0, formik_1.getIn)(i, key);
+    if (key === 'affiliationIDs' || key === 'creditRoles' || key === 'degrees') {
+        return (va.length !== vb.length ||
+            va.some((item, i) => item !== vb[i]));
     }
+    return va !== vb;
+}
+var useAuthorShowsErrorIndicator_2 = require("../hooks/useAuthorShowsErrorIndicator");
+Object.defineProperty(exports, "authorDetailsTabShowsErrorIndicator", { enumerable: true, get: function () { return useAuthorShowsErrorIndicator_2.authorShowsErrorIndicator; } });
+const AuthorErrorEffect = ({ newEntity, requiredContinueActive, onChange }) => {
+    (0, useAuthorShowsErrorIndicator_1.useAuthorShowsErrorIndicator)(newEntity, requiredContinueActive, onChange);
+    return null;
+};
+const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, selectedCreditRoles, authorFormRef, newEntity, onAuthorDetailsTabErrorChange, unsavedContinueActive = false, requiredContinueActive = false, }) => {
     const validateAuthor = (values) => {
         const errors = {};
+        const given = values.given?.trim() ?? '';
+        const family = values.family?.trim() ?? '';
+        if (!given && !family) {
+            errors.given = NAME_PAIR_REQUIRED_MESSAGE;
+            errors.family = NAME_PAIR_REQUIRED_MESSAGE;
+        }
         const email = values.email?.trim();
         if (isEmailRequired && !email) {
             errors.email = 'Email address is required';
@@ -95,57 +104,93 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
         }
         return errors;
     };
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: (submitted) => onSave((0, normalize_1.normalizeAuthor)(submitted)), enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
-        return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: (next) => onChange((0, normalize_1.normalizeAuthor)(next)), id: "author-details-form", formRef: authorFormRef, noValidate: true },
-            react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(formik_1.Field, { name: 'prefix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "prefix" }, "Prefix"),
-                    react_1.default.createElement(style_guide_1.TextField, { id: 'prefix', ...props.field }))))),
-            react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(formik_1.Field, { name: 'given' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "given-name" }, "Given name"),
-                    react_1.default.createElement(style_guide_1.TextField, { id: 'given-name', ...props.field }))))),
-            react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(formik_1.Field, { name: 'family' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "family-name" }, "Family name"),
-                    react_1.default.createElement(style_guide_1.TextField, { id: 'family-name', ...props.field }))))),
-            react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(formik_1.Field, { name: 'suffix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "suffix" }, "Suffix"),
-                    react_1.default.createElement(style_guide_1.TextField, { id: 'suffix', ...props.field }))))),
+    const formik = (0, formik_1.useFormik)({
+        initialValues: values,
+        onSubmit: (submitted) => onSave((0, normalize_1.normalizeAuthor)(submitted)),
+        enableReinitialize: true,
+        validateOnChange: true,
+        validate: validateAuthor,
+    });
+    (0, react_1.useEffect)(() => {
+        if (selectedAffiliations) {
+            formik.setFieldValue('affiliationIDs', selectedAffiliations);
+        }
+    }, [selectedAffiliations]);
+    (0, react_1.useEffect)(() => {
+        if (selectedCreditRoles) {
+            formik.setFieldValue('creditRoles', selectedCreditRoles);
+        }
+    }, [selectedCreditRoles]);
+    if (actionsRef) {
+        actionsRef.current = {
+            reset: () => formik.resetForm(),
+            submitForm: () => formik.submitForm(),
+        };
+    }
+    const showNamePairError = (0, useAuthorShowsErrorIndicator_1.isNamePairError)(formik, newEntity, requiredContinueActive);
+    const showUnsavedDot = (key) => unsavedContinueActive && isAuthorFieldChanged(formik, key);
+    return (react_1.default.createElement(formik_1.FormikProvider, { value: formik },
+        react_1.default.createElement(AuthorErrorEffect, { newEntity: newEntity, requiredContinueActive: requiredContinueActive, onChange: onAuthorDetailsTabErrorChange }),
+        react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: (next) => onChange((0, normalize_1.normalizeAuthor)(next)), id: "author-details-form", formRef: authorFormRef, noValidate: true },
+            react_1.default.createElement(exports.StyledFormGroup, null,
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'prefix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "prefix", showDot: showUnsavedDot('prefix') }, "Prefix"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: 'prefix', ...props.field, placeholder: "E.g. Doctor" }))))),
+                react_1.default.createElement(exports.StyledFormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'given' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "given-name", showDot: showUnsavedDot('given') },
+                            "Given name",
+                            react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*")),
+                        react_1.default.createElement(TextFieldWithError, { id: 'given-name', ...props.field, error: showNamePairError }),
+                        showNamePairError && (react_1.default.createElement(style_guide_1.InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE))))))),
+            react_1.default.createElement(exports.StyledFormGroup, null,
+                react_1.default.createElement(exports.StyledFormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'family' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "family-name", showDot: showUnsavedDot('family') },
+                            "Family name",
+                            react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*")),
+                        react_1.default.createElement(TextFieldWithError, { id: 'family-name', ...props.field, error: showNamePairError }),
+                        showNamePairError && (react_1.default.createElement(style_guide_1.InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE)))))),
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'suffix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "suffix", showDot: showUnsavedDot('suffix') }, "Suffix"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: 'suffix', ...props.field, placeholder: "E.g. Junior" })))))),
             react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "role" }, "Job Title"),
-                    react_1.default.createElement(style_guide_1.TextField, { id: 'role', ...props.field }))))),
+                react_1.default.createElement(exports.CheckboxContainer, { "data-cy": "corresponding-author-container" },
+                    react_1.default.createElement(style_guide_1.CheckboxLabel, null,
+                        react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabelRow, null,
+                            showUnsavedDot('isCorresponding') ? (react_1.default.createElement(UnsavedLabel_1.FieldUnsavedDot, { "aria-hidden": true })) : null,
+                            react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author"))))),
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => {
-                    const hasError = (0, formik_1.getIn)(formik.touched, 'email') &&
+                    const hasError = ((0, formik_1.getIn)(formik.touched, 'email') || requiredContinueActive) &&
                         (0, formik_1.getIn)(formik.errors, 'email');
                     return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "email" }, isEmailRequired ? 'Email address*' : 'Email address'),
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "email", showDot: showUnsavedDot('email') }, isEmailRequired ? (react_1.default.createElement(style_guide_1.LabelText, null,
+                            "Email address",
+                            react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*"))) : ('Email address')),
                         react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
                         hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'email')))));
                 })),
             react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(exports.CheckboxContainer, { "data-cy": "corresponding-author-container" },
-                    react_1.default.createElement(style_guide_1.CheckboxLabel, null,
-                        react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
-                        react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author")))),
+                react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "role", showDot: showUnsavedDot('role') }, "Job Title"),
+                    react_1.default.createElement(style_guide_1.TextField, { id: 'role', ...props.field }))))),
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(formik_1.Field, { name: 'ORCID', type: 'text' }, (props) => {
-                    const hasError = (0, formik_1.getIn)(formik.touched, 'ORCID') &&
-                        (0, formik_1.getIn)(formik.errors, 'ORCID');
+                    const hasError = (0, formik_1.getIn)(formik.touched, 'ORCID') && (0, formik_1.getIn)(formik.errors, 'ORCID');
                     return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
-                        react_1.default.createElement(TextFieldWithError, { id: 'orcid', disabled: values.isAuthenticated, type: "url", placeholder: 'https://orcid.org/...', ...props.field, pattern: ORCID_INPUT_PATTERN, title: "Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx", error: hasError }),
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "orcid", showDot: showUnsavedDot('ORCID') }, "ORCID"),
+                        react_1.default.createElement(TextFieldWithError, { id: 'orcid', type: "url", placeholder: 'https://orcid.org/...', disabled: values.isAuthenticated, ...props.field, pattern: ORCID_INPUT_PATTERN, title: "Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx", error: hasError }),
                         hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'ORCID')))));
                 })),
             react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(style_guide_1.Label, { htmlFor: 'degrees' }, "Degrees"),
-                react_1.default.createElement(style_guide_1.MultiValueInput, { id: "degrees", inputType: "text", placeholder: "Enter degree and press enter", initialValues: values.degrees, onChange: (newValues) => {
-                        formik.setFieldValue('degrees', newValues);
-                    } }))));
-    }));
+                react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "degrees", showDot: showUnsavedDot('degrees') }, "Qualification"),
+                react_1.default.createElement(style_guide_1.MultiValueInput, { id: 'degrees', inputType: "text", placeholder: "E.g. Bsc Computer Science", initialValues: Array.isArray(formik.values.degrees) ? formik.values.degrees : [], onChange: (values) => {
+                        formik.setFieldValue('degrees', values);
+                    } })))));
 };
 exports.AuthorDetailsForm = AuthorDetailsForm;
 exports.Fieldset = styled_components_1.default.fieldset `
@@ -163,3 +208,14 @@ exports.CheckboxContainer = styled_components_1.default.div `
   align-items: center;
   gap: 32px;
 `;
+exports.StyledFormGroup = (0, styled_components_1.default)(style_guide_1.FormGroup) `
+  [name='prefix'] {
+    width: 180px;
+  }
+  [name='suffix'] {
+    width: 180px;
+  }
+`;
+exports.StyledFormRow = (0, styled_components_1.default)(style_guide_1.FormRow) `
+  flex: 1;
+`;

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

@@ -64,20 +64,25 @@ const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
 const FormFooter_1 = __importDefault(require("../form/FormFooter"));
 const FormPlaceholder_1 = require("../form/FormPlaceholder");
 const ModalFormActions_1 = require("../form/ModalFormActions");
-const GenericDrawerGroup_1 = require("../modal-drawer/GenericDrawerGroup");
+const ModalTabs_1 = require("../authors-affiliations/ModalTabs");
 const AffiliationsPanel_1 = require("../affiliations/AffiliationsPanel");
 const AuthorDetailsForm_1 = require("./AuthorDetailsForm");
 const AuthorList_1 = require("./AuthorList");
 const CreditDrawer_1 = require("./CreditDrawer");
 const useManageAffiliations_1 = require("./useManageAffiliations");
 const useManageCredit_1 = require("./useManageCredit");
+const MODAL_ON_CLOSE_NOTIFY_DELAY_MS = 220;
 exports.authorsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
 const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, onOpenAffiliationsModal, onClose, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
     const prevIsOpenRef = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
         if (prevIsOpenRef.current && !isOpen) {
-            onClose?.();
+            prevIsOpenRef.current = isOpen;
+            const id = window.setTimeout(() => {
+                onClose?.();
+            }, MODAL_ON_CLOSE_NOTIFY_DELAY_MS);
+            return () => window.clearTimeout(id);
         }
         prevIsOpenRef.current = isOpen;
     }, [isOpen, onClose]);
@@ -92,7 +97,10 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
     const [nextAuthor, setNextAuthor] = (0, react_1.useState)(null);
     const [isSwitchingAuthor, setIsSwitchingAuthor] = (0, react_1.useState)(false);
     const [isCreatingNewAuthor, setIsCreatingNewAuthor] = (0, react_1.useState)(false);
-    const [showCreditDrawer, setShowCreditDrawer] = (0, react_1.useState)(false);
+    const [authorHasError, setAuthorDetailsTabHasError] = (0, react_1.useState)(false);
+    const [authorDetailsUnsavedContinue, setAuthorDetailsUnsavedContinue] = (0, react_1.useState)(false);
+    const [authorDetailsRequiredContinue, setAuthorDetailsRequiredContinue] = (0, react_1.useState)(false);
+    const [authorTabIndex, setAuthorTabIndex] = (0, react_1.useState)(0);
     const valuesRef = (0, react_1.useRef)(undefined);
     const actionsRef = (0, react_1.useRef)(undefined);
     const authorFormRef = (0, react_1.useRef)(null);
@@ -109,6 +117,19 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         const relevantAffiliations = affiliations.filter((item) => currentAuthor?.affiliationIDs?.includes(item.id));
         setSelectedAffiliations(relevantAffiliations);
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (!unSavedChanges) {
+            setAuthorDetailsUnsavedContinue(false);
+            setAuthorDetailsRequiredContinue(false);
+        }
+    }, [unSavedChanges]);
+    (0, react_1.useEffect)(() => {
+        setAuthorDetailsUnsavedContinue(false);
+        setAuthorDetailsRequiredContinue(false);
+        if (selection?.id) {
+            setAuthorTabIndex(0);
+        }
+    }, [selection?.id]);
     const selectAuthor = (author) => {
         if (author.id === selection?.id) {
             return;
@@ -159,31 +180,6 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             setSelection(undefined);
         }
     };
-    const save = () => {
-        if (!authorFormRef.current?.checkValidity()) {
-            setShowConfirmationDialog(false);
-            setTimeout(() => {
-                authorFormRef.current?.reportValidity();
-            }, 830);
-        }
-        else {
-            if (valuesRef.current && selection) {
-                saveAuthor(valuesRef.current);
-            }
-            if (nextAuthor) {
-                setSelection(nextAuthor);
-                setNextAuthor(null);
-                setNewAuthor(false);
-                updateAffiliationSelection(nextAuthor);
-                setIsCreatingNewAuthor(false);
-            }
-            else if (isCreatingNewAuthor) {
-                createNewAuthor();
-                setIsCreatingNewAuthor(false);
-            }
-            setShowConfirmationDialog(false);
-        }
-    };
     const cancel = () => {
         resetAuthor();
         if (nextAuthor) {
@@ -332,7 +328,11 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         setEmailRequired(isCorresponding);
     };
-    const { removeCreditRole, selectCreditRole, selectedCreditRoles, setSelectedCreditRoles, vocabTermItems, } = (0, useManageCredit_1.useManageCredit)(selection);
+    const { selectCreditRole, selectedCreditRoles, setSelectedCreditRoles, vocabTermItems, } = (0, useManageCredit_1.useManageCredit)(selection);
+    const newEntity = newAuthor ||
+        (isCreatingNewAuthor &&
+            !showConfirmationDialog &&
+            !showRequiredFieldConfirmationDialog);
     return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => close(), shouldCloseOnOverlayClick: true },
         react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "authors-modal" },
             react_1.default.createElement(style_guide_1.ModalHeader, null,
@@ -340,35 +340,50 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             react_1.default.createElement(StyledModalBody, null,
                 react_1.default.createElement(style_guide_1.ModalSidebar, { "data-cy": "authors-sidebar" },
                     react_1.default.createElement(StyledModalSidebarHeader, null,
-                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Authors")),
+                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Manage Authors")),
                     react_1.default.createElement(StyledSidebarContent, null,
                         react_1.default.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: addAuthor, "data-active": isCreatingNewAuthor || newAuthor },
                             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: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
-                react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(AuthorTabs, null,
-                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { form: 'author-details-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
-                                (isCreatingNewAuthor &&
-                                    !showConfirmationDialog &&
-                                    !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
-                        react_1.default.createElement(style_guide_1.InspectorTabList, null,
-                            react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
-                            onOpenAffiliationsModal && (react_1.default.createElement(style_guide_1.InspectorTab, null, "Affiliations")),
-                            react_1.default.createElement(style_guide_1.InspectorTab, null, "Contributions (CRediT)")),
+                react_1.default.createElement(StyledScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(AuthorTabs, { selectedIndex: authorTabIndex, onChange: setAuthorTabIndex },
+                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev) }),
+                        react_1.default.createElement(ModalTabs_1.ModalTabs, { tabLabels: [
+                                'Author Details',
+                                ...(onOpenAffiliationsModal ? ['Affiliations'] : []),
+                                'Contributions',
+                            ], tabErrorIndicators: [
+                                authorHasError,
+                                ...(onOpenAffiliationsModal ? [false] : []),
+                                false,
+                            ], tabWarningIndicators: [
+                                authorDetailsUnsavedContinue && !authorHasError,
+                                ...(onOpenAffiliationsModal ? [false] : []),
+                                false,
+                            ] }),
                         react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
                             react_1.default.createElement(AuthorTabPanel, null,
-                                react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
+                                react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles, newEntity: newEntity, onAuthorDetailsTabErrorChange: setAuthorDetailsTabHasError, unsavedContinueActive: authorDetailsUnsavedContinue, requiredContinueActive: authorDetailsRequiredContinue })),
                             onOpenAffiliationsModal && (react_1.default.createElement(AuthorTabPanel, null,
                                 react_1.default.createElement(AffiliationsPanel_1.AffiliationsPanel, { items: affiliations, selectedItems: selectedAffiliations, onSelect: selectAffiliation, onOpenAffiliationsModal: onOpenAffiliationsModal }))),
                             react_1.default.createElement(AuthorTabPanel, null,
-                                react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: CreditDrawer_1.CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
+                                react_1.default.createElement(style_guide_1.FormSubtitle, null, "Contributions (CRediT)"),
+                                react_1.default.createElement(ContributionsDescriptionSubtitle, null, "Select the roles this author contributed to according to the CRediT taxonomy"),
+                                react_1.default.createElement(CreditDrawer_1.CreditContributionsCheckboxes, { items: vocabTermItems, selectedItems: selectedCreditRoles.map((r) => ({
                                         id: r.vocabTerm,
-                                        ...r,
-                                    })), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (CRediT)", buttonText: "Assign Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: react_1.default.createElement(style_guide_1.AddRoleIcon, { width: 16, height: 16 }) })))),
-                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
-                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) })))),
-            react_1.default.createElement(FormFooter_1.default, { onCancel: close }))));
+                                    })), onSelect: selectCreditRole })))),
+                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => {
+                            setShowRequiredFieldConfirmationDialog(false);
+                            setNextAuthor(null);
+                            setAuthorDetailsRequiredContinue(true);
+                        }, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
+                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: () => {
+                            setShowConfirmationDialog(false);
+                            setNextAuthor(null);
+                            setAuthorDetailsUnsavedContinue(true);
+                        }, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) })))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: close, primaryAction: selection ? (react_1.default.createElement(ModalFormActions_1.ModalFormSaveButton, { form: "author-details-form", newEntity: newEntity, isDisableSave: isDisableSave, onSubmitForm: () => actionsRef.current?.submitForm?.() })) : undefined }))));
 };
 exports.AuthorsModal = AuthorsModal;
 function createEmptyAuthor(priority) {
@@ -388,6 +403,7 @@ function createEmptyAuthor(priority) {
         correspIDs: [],
         footnoteIDs: [],
         prefix: '',
+        creditRoles: [],
     };
 }
 const AddAuthorButton = styled_components_1.default.button `
@@ -421,6 +437,10 @@ const AuthorTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorT
 }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
 `;
+const ContributionsDescriptionSubtitle = (0, styled_components_1.default)(style_guide_1.FormSubtitle) `
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: ${(props) => props.theme.font.lineHeight.normal};
+`;
 const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
   padding: 8px;
 `;
@@ -429,5 +449,8 @@ const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody
   height: calc(90vh - 40px);
 `;
 const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+`;
+const StyledScrollableModalContent = (0, styled_components_1.default)(style_guide_1.ScrollableModalContent) `
+  padding: 45px 16px 16px;
 `;

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

@@ -7,9 +7,9 @@ exports.AuthorsPanel = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
 const GenericPanel_1 = require("../authors-affiliations/GenericPanel");
-const AuthorsPanel = ({ items, selectedItems = [], onSelect, onOpenAuthorsModal, }) => {
+const AuthorsPanel = ({ items, selectedItems = [], onSelect, openAuthorsModal, }) => {
     const selectedIds = (0, GenericPanel_1.useListSelectedIds)(selectedItems);
-    return (react_1.default.createElement(GenericPanel_1.GenericPanel, { title: "Authors", createLabel: "Add New Author", onCreate: onOpenAuthorsModal, createDataCy: "add-authors-link", emptyDataCy: "authors-panel-empty", isEmpty: items.length === 0, emptyIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null), emptyMessage: react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(GenericPanel_1.GenericPanel, { title: "Authors", createLabel: "Add New Author", onCreate: openAuthorsModal, createDataCy: "add-authors-link", emptyDataCy: "authors-panel-empty", isEmpty: items.length === 0, emptyIcon: react_1.default.createElement(style_guide_1.InfoCircleIcon, null), emptyMessage: react_1.default.createElement(react_1.default.Fragment, null,
             "There are no authors attributed yet!",
             react_1.default.createElement("br", null),
             "Click \u2018Add New Author\u2019") },

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

@@ -0,0 +1,121 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.CreateAuthorModal = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
+const react_1 = __importStar(require("react"));
+const normalize_1 = require("../../lib/normalize");
+const CreateModalStyles_1 = require("../form/CreateModalStyles");
+const FormFooter_1 = __importDefault(require("../form/FormFooter"));
+const ModalFormActions_1 = require("../form/ModalFormActions");
+const AuthorDetailsForm_1 = require("./AuthorDetailsForm");
+const useManageAffiliations_1 = require("./useManageAffiliations");
+const useManageCredit_1 = require("./useManageCredit");
+const CreateAuthorModal = ({ authorsCount, affiliations: $affiliations, onSave, onClose, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(true);
+    const [isDisableSave, setDisableSave] = (0, react_1.useState)(true);
+    const [isEmailRequired, setEmailRequired] = (0, react_1.useState)(false);
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const actionsRef = (0, react_1.useRef)(undefined);
+    const authorFormRef = (0, react_1.useRef)(null);
+    const selection = (0, react_1.useMemo)(() => createEmptyAuthor(authorsCount), []);
+    const prevIsOpenRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            prevIsOpenRef.current = isOpen;
+            const id = window.setTimeout(() => {
+                onClose();
+            }, CreateModalStyles_1.MODAL_ON_CLOSE_NOTIFY_DELAY_MS);
+            return () => window.clearTimeout(id);
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
+    const { selectedAffiliations } = (0, useManageAffiliations_1.useManageAffiliations)(selection, $affiliations);
+    const { selectedCreditRoles } = (0, useManageCredit_1.useManageCredit)(selection);
+    const handleSave = (values) => {
+        onSave({ ...selection, ...values });
+        setIsOpen(false);
+    };
+    const handleChange = (values) => {
+        const { given, family, email, isCorresponding } = values;
+        const isNameFilled = given?.length || family?.length;
+        if (isNameFilled) {
+            if (isCorresponding) {
+                setDisableSave(!email?.length);
+            }
+            else {
+                setDisableSave(false);
+            }
+        }
+        else {
+            setDisableSave(true);
+        }
+        setEmailRequired(!!isCorresponding);
+    };
+    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => setIsOpen(false), shouldCloseOnOverlayClick: true },
+        react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "create-author-modal" },
+            react_1.default.createElement(style_guide_1.ModalHeader, null,
+                react_1.default.createElement(style_guide_1.CloseButton, { onClick: () => setIsOpen(false), "data-cy": "modal-close-button" })),
+            react_1.default.createElement(CreateModalStyles_1.StyledModalBody, null,
+                react_1.default.createElement(CreateModalStyles_1.StyledScrollableModalContent, null,
+                    react_1.default.createElement(CreateModalStyles_1.FormTitle, null, "Create New Author"),
+                    react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: handleChange, onSave: handleSave, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles, newEntity: true, onAuthorDetailsTabErrorChange: setHasError }))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: () => setIsOpen(false), primaryAction: react_1.default.createElement(ModalFormActions_1.ModalFormSaveButton, { form: "author-details-form", newEntity: true, isDisableSave: isDisableSave || hasError, createLabel: "Create New Author", onSubmitForm: () => actionsRef.current?.submitForm?.() }) }))));
+};
+exports.CreateAuthorModal = CreateAuthorModal;
+function createEmptyAuthor(priority) {
+    return {
+        id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.contributor),
+        role: '',
+        affiliationIDs: [],
+        degrees: [],
+        given: '',
+        family: '',
+        email: '',
+        suffix: '',
+        isCorresponding: false,
+        ORCID: '',
+        priority,
+        isJointContributor: false,
+        correspIDs: [],
+        footnoteIDs: [],
+        prefix: '',
+        creditRoles: [],
+    };
+}

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

@@ -3,25 +3,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreditDrawer = void 0;
+exports.CreditContributionsCheckboxes = 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 AuthorDetailsForm_1 = require("./AuthorDetailsForm");
-const CreditDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
-    return (react_1.default.createElement(style_guide_1.Drawer, { ...drawerProps },
-        react_1.default.createElement(TwoColumnContainer, null, items.map((item, i) => (react_1.default.createElement(TwoColumnCheckbox, { key: item.id },
-            react_1.default.createElement(style_guide_1.CheckboxLabel, null,
-                react_1.default.createElement(style_guide_1.CheckboxField, { id: 'credit-role-' + i, name: item.id, checked: selectedItems?.map((a) => a.id).includes(item.id), onChange: () => {
-                        onSelect(item.id);
-                    } }),
-                react_1.default.createElement(style_guide_1.LabelText, null, item.vocabTerm))))))));
+const CreditContributionsCheckboxes = ({ items, selectedItems = [], onSelect }) => {
+    const selectedIds = selectedItems.map((a) => a.id);
+    return (react_1.default.createElement(TwoColumnContainer, { "data-cy": "credit-taxnonomy", role: "group", "aria-label": "Contributions (CRediT)" }, items.map((item) => (react_1.default.createElement(TwoColumnCheckbox, { key: item.id },
+        react_1.default.createElement(style_guide_1.CheckboxLabel, null,
+            react_1.default.createElement(style_guide_1.CheckboxField, { name: item.id, checked: selectedIds.includes(item.id), onChange: () => {
+                    onSelect(item.id);
+                } }),
+            react_1.default.createElement(style_guide_1.LabelText, null, item.vocabTerm)))))));
 };
-exports.CreditDrawer = CreditDrawer;
-const TwoColumnContainer = (0, styled_components_1.default)(style_guide_1.DrawerItemsList) `
+exports.CreditContributionsCheckboxes = CreditContributionsCheckboxes;
+const TwoColumnContainer = styled_components_1.default.ul `
+  list-style: none;
+  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
+  margin: 0;
   display: flex;
   flex-flow: row wrap;
-  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
   position: relative;
 `;
 const TwoColumnCheckbox = (0, styled_components_1.default)(AuthorDetailsForm_1.CheckboxContainer) `