@manuscripts/body-editor 3.12.33 → 3.12.34

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

@@ -13,35 +13,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { CheckboxField, CheckboxLabel, TextField, InputErrorText, Label, FormRow, LabelText, MultiValueInput, } from '@manuscripts/style-guide';
-import { Field, Formik, getIn, } from 'formik';
-import React, { useEffect, useRef } from 'react';
+import { CheckboxField, CheckboxLabel, TextField, InputErrorText, FormRow, FormGroup, LabelText, RequiredIndicator, MultiValueInput, } from '@manuscripts/style-guide';
+import { Field, FormikProvider, getIn, useFormik, } from 'formik';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { normalizeAuthor } from '../../lib/normalize';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
+import { UnsavedLabel, UnsavedLabelRow, FieldUnsavedDot, } from '../form/UnsavedLabel';
+import { isNamePairError, useAuthorShowsErrorIndicator, } from '../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);
-export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, selectedCreditRoles, authorFormRef, }) => {
-    const formRef = useRef(null);
-    useEffect(() => {
-        if (selectedAffiliations && formRef.current) {
-            formRef.current.setFieldValue('affiliationIDs', selectedAffiliations);
-        }
-    }, [selectedAffiliations]);
-    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 = normalizeAuthor(formik.values);
+    const i = normalizeAuthor(formik.initialValues);
+    const va = getIn(v, key);
+    const vb = 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;
+}
+export { authorShowsErrorIndicator as authorDetailsTabShowsErrorIndicator } from '../hooks/useAuthorShowsErrorIndicator';
+const AuthorErrorEffect = ({ newEntity, requiredContinueActive, onChange }) => {
+    useAuthorShowsErrorIndicator(newEntity, requiredContinueActive, onChange);
+    return null;
+};
+export 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';
@@ -56,57 +64,93 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
         }
         return errors;
     };
-    return (React.createElement(Formik, { initialValues: values, onSubmit: (submitted) => onSave(normalizeAuthor(submitted)), enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
-        return (React.createElement(ChangeHandlingForm, { onChange: (next) => onChange(normalizeAuthor(next)), id: "author-details-form", formRef: authorFormRef, noValidate: true },
-            React.createElement(FormRow, null,
-                React.createElement(Field, { name: 'prefix' }, (props) => (React.createElement(React.Fragment, null,
-                    React.createElement(Label, { htmlFor: "prefix" }, "Prefix"),
-                    React.createElement(TextField, { id: 'prefix', ...props.field }))))),
-            React.createElement(FormRow, null,
-                React.createElement(Field, { name: 'given' }, (props) => (React.createElement(React.Fragment, null,
-                    React.createElement(Label, { htmlFor: "given-name" }, "Given name"),
-                    React.createElement(TextField, { id: 'given-name', ...props.field }))))),
-            React.createElement(FormRow, null,
-                React.createElement(Field, { name: 'family' }, (props) => (React.createElement(React.Fragment, null,
-                    React.createElement(Label, { htmlFor: "family-name" }, "Family name"),
-                    React.createElement(TextField, { id: 'family-name', ...props.field }))))),
-            React.createElement(FormRow, null,
-                React.createElement(Field, { name: 'suffix' }, (props) => (React.createElement(React.Fragment, null,
-                    React.createElement(Label, { htmlFor: "suffix" }, "Suffix"),
-                    React.createElement(TextField, { id: 'suffix', ...props.field }))))),
+    const formik = useFormik({
+        initialValues: values,
+        onSubmit: (submitted) => onSave(normalizeAuthor(submitted)),
+        enableReinitialize: true,
+        validateOnChange: true,
+        validate: validateAuthor,
+    });
+    useEffect(() => {
+        if (selectedAffiliations) {
+            formik.setFieldValue('affiliationIDs', selectedAffiliations);
+        }
+    }, [selectedAffiliations]);
+    useEffect(() => {
+        if (selectedCreditRoles) {
+            formik.setFieldValue('creditRoles', selectedCreditRoles);
+        }
+    }, [selectedCreditRoles]);
+    if (actionsRef) {
+        actionsRef.current = {
+            reset: () => formik.resetForm(),
+            submitForm: () => formik.submitForm(),
+        };
+    }
+    const showNamePairError = isNamePairError(formik, newEntity, requiredContinueActive);
+    const showUnsavedDot = (key) => unsavedContinueActive && isAuthorFieldChanged(formik, key);
+    return (React.createElement(FormikProvider, { value: formik },
+        React.createElement(AuthorErrorEffect, { newEntity: newEntity, requiredContinueActive: requiredContinueActive, onChange: onAuthorDetailsTabErrorChange }),
+        React.createElement(ChangeHandlingForm, { onChange: (next) => onChange(normalizeAuthor(next)), id: "author-details-form", formRef: authorFormRef, noValidate: true },
+            React.createElement(StyledFormGroup, null,
+                React.createElement(FormRow, null,
+                    React.createElement(Field, { name: 'prefix' }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(UnsavedLabel, { htmlFor: "prefix", showDot: showUnsavedDot('prefix') }, "Prefix"),
+                        React.createElement(TextField, { id: 'prefix', ...props.field, placeholder: "E.g. Doctor" }))))),
+                React.createElement(StyledFormRow, null,
+                    React.createElement(Field, { name: 'given' }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(UnsavedLabel, { htmlFor: "given-name", showDot: showUnsavedDot('given') },
+                            "Given name",
+                            React.createElement(RequiredIndicator, null, "*")),
+                        React.createElement(TextFieldWithError, { id: 'given-name', ...props.field, error: showNamePairError }),
+                        showNamePairError && (React.createElement(InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE))))))),
+            React.createElement(StyledFormGroup, null,
+                React.createElement(StyledFormRow, null,
+                    React.createElement(Field, { name: 'family' }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(UnsavedLabel, { htmlFor: "family-name", showDot: showUnsavedDot('family') },
+                            "Family name",
+                            React.createElement(RequiredIndicator, null, "*")),
+                        React.createElement(TextFieldWithError, { id: 'family-name', ...props.field, error: showNamePairError }),
+                        showNamePairError && (React.createElement(InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE)))))),
+                React.createElement(FormRow, null,
+                    React.createElement(Field, { name: 'suffix' }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(UnsavedLabel, { htmlFor: "suffix", showDot: showUnsavedDot('suffix') }, "Suffix"),
+                        React.createElement(TextField, { id: 'suffix', ...props.field, placeholder: "E.g. Junior" })))))),
             React.createElement(FormRow, null,
-                React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
-                    React.createElement(Label, { htmlFor: "role" }, "Job Title"),
-                    React.createElement(TextField, { id: 'role', ...props.field }))))),
+                React.createElement(CheckboxContainer, { "data-cy": "corresponding-author-container" },
+                    React.createElement(CheckboxLabel, null,
+                        React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
+                        React.createElement(UnsavedLabelRow, null,
+                            showUnsavedDot('isCorresponding') ? (React.createElement(FieldUnsavedDot, { "aria-hidden": true })) : null,
+                            React.createElement(LabelText, null, "Corresponding Author"))))),
             React.createElement(FormRow, null,
                 React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
-                    const hasError = getIn(formik.touched, 'email') &&
+                    const hasError = (getIn(formik.touched, 'email') || requiredContinueActive) &&
                         getIn(formik.errors, 'email');
                     return (React.createElement(React.Fragment, null,
-                        React.createElement(Label, { htmlFor: "email" }, isEmailRequired ? 'Email address*' : 'Email address'),
+                        React.createElement(UnsavedLabel, { htmlFor: "email", showDot: showUnsavedDot('email') }, isEmailRequired ? (React.createElement(LabelText, null,
+                            "Email address",
+                            React.createElement(RequiredIndicator, null, "*"))) : ('Email address')),
                         React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
                         hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'email')))));
                 })),
             React.createElement(FormRow, null,
-                React.createElement(CheckboxContainer, { "data-cy": "corresponding-author-container" },
-                    React.createElement(CheckboxLabel, null,
-                        React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
-                        React.createElement(LabelText, null, "Corresponding Author")))),
+                React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
+                    React.createElement(UnsavedLabel, { htmlFor: "role", showDot: showUnsavedDot('role') }, "Job Title"),
+                    React.createElement(TextField, { id: 'role', ...props.field }))))),
             React.createElement(FormRow, null,
                 React.createElement(Field, { name: 'ORCID', type: 'text' }, (props) => {
-                    const hasError = getIn(formik.touched, 'ORCID') &&
-                        getIn(formik.errors, 'ORCID');
+                    const hasError = getIn(formik.touched, 'ORCID') && getIn(formik.errors, 'ORCID');
                     return (React.createElement(React.Fragment, null,
-                        React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
-                        React.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.createElement(UnsavedLabel, { htmlFor: "orcid", showDot: showUnsavedDot('ORCID') }, "ORCID"),
+                        React.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.createElement(InputErrorText, null, getIn(formik.errors, 'ORCID')))));
                 })),
             React.createElement(FormRow, null,
-                React.createElement(Label, { htmlFor: 'degrees' }, "Degrees"),
-                React.createElement(MultiValueInput, { id: "degrees", inputType: "text", placeholder: "Enter degree and press enter", initialValues: values.degrees, onChange: (newValues) => {
-                        formik.setFieldValue('degrees', newValues);
-                    } }))));
-    }));
+                React.createElement(UnsavedLabel, { htmlFor: "degrees", showDot: showUnsavedDot('degrees') }, "Qualification"),
+                React.createElement(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);
+                    } })))));
 };
 export const Fieldset = styled.fieldset `
   padding: 0;
@@ -123,3 +167,14 @@ export const CheckboxContainer = styled.div `
   align-items: center;
   gap: 32px;
 `;
+export const StyledFormGroup = styled(FormGroup) `
+  [name='prefix'] {
+    width: 180px;
+  }
+  [name='suffix'] {
+    width: 180px;
+  }
+`;
+export const StyledFormRow = styled(FormRow) `
+  flex: 1;
+`;

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, outlineStyle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
+import { AddIcon, AuthorPlaceholderIcon, CloseButton, FormSubtitle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, outlineStyle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabPanels, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { cloneDeep, isEqual, omit } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -24,21 +24,26 @@ import { normalizeAuthor } from '../../lib/normalize';
 import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
 import FormFooter from '../form/FormFooter';
 import { FormPlaceholder } from '../form/FormPlaceholder';
-import { ModalFormActions } from '../form/ModalFormActions';
-import { DrawerGroup } from '../modal-drawer/GenericDrawerGroup';
+import { ModalFormActions, ModalFormSaveButton } from '../form/ModalFormActions';
+import { ModalTabs } from '../authors-affiliations/ModalTabs';
 import { AffiliationsPanel } from '../affiliations/AffiliationsPanel';
 import { AuthorDetailsForm } from './AuthorDetailsForm';
 import { AuthorList } from './AuthorList';
-import { CreditDrawer } from './CreditDrawer';
+import { CreditContributionsCheckboxes } from './CreditDrawer';
 import { useManageAffiliations } from './useManageAffiliations';
 import { useManageCredit } from './useManageCredit';
+const MODAL_ON_CLOSE_NOTIFY_DELAY_MS = 220;
 export const authorsReducer = arrayReducer((a, b) => a.id === b.id);
 export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, onOpenAffiliationsModal, onClose, }) => {
     const [isOpen, setOpen] = useState(true);
     const prevIsOpenRef = useRef(true);
     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]);
@@ -53,7 +58,10 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
     const [nextAuthor, setNextAuthor] = useState(null);
     const [isSwitchingAuthor, setIsSwitchingAuthor] = useState(false);
     const [isCreatingNewAuthor, setIsCreatingNewAuthor] = useState(false);
-    const [showCreditDrawer, setShowCreditDrawer] = useState(false);
+    const [authorHasError, setAuthorDetailsTabHasError] = useState(false);
+    const [authorDetailsUnsavedContinue, setAuthorDetailsUnsavedContinue] = useState(false);
+    const [authorDetailsRequiredContinue, setAuthorDetailsRequiredContinue] = useState(false);
+    const [authorTabIndex, setAuthorTabIndex] = useState(0);
     const valuesRef = useRef(undefined);
     const actionsRef = useRef(undefined);
     const authorFormRef = useRef(null);
@@ -70,6 +78,19 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         const relevantAffiliations = affiliations.filter((item) => currentAuthor?.affiliationIDs?.includes(item.id));
         setSelectedAffiliations(relevantAffiliations);
     }, []);
+    useEffect(() => {
+        if (!unSavedChanges) {
+            setAuthorDetailsUnsavedContinue(false);
+            setAuthorDetailsRequiredContinue(false);
+        }
+    }, [unSavedChanges]);
+    useEffect(() => {
+        setAuthorDetailsUnsavedContinue(false);
+        setAuthorDetailsRequiredContinue(false);
+        if (selection?.id) {
+            setAuthorTabIndex(0);
+        }
+    }, [selection?.id]);
     const selectAuthor = (author) => {
         if (author.id === selection?.id) {
             return;
@@ -120,31 +141,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             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) {
@@ -293,7 +289,11 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         setEmailRequired(isCorresponding);
     };
-    const { removeCreditRole, selectCreditRole, selectedCreditRoles, setSelectedCreditRoles, vocabTermItems, } = useManageCredit(selection);
+    const { selectCreditRole, selectedCreditRoles, setSelectedCreditRoles, vocabTermItems, } = useManageCredit(selection);
+    const newEntity = newAuthor ||
+        (isCreatingNewAuthor &&
+            !showConfirmationDialog &&
+            !showRequiredFieldConfirmationDialog);
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => close(), shouldCloseOnOverlayClick: true },
         React.createElement(ModalContainer, { "data-cy": "authors-modal" },
             React.createElement(ModalHeader, null,
@@ -301,35 +301,50 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             React.createElement(StyledModalBody, null,
                 React.createElement(ModalSidebar, { "data-cy": "authors-sidebar" },
                     React.createElement(StyledModalSidebarHeader, null,
-                        React.createElement(ModalSidebarTitle, null, "Authors")),
+                        React.createElement(ModalSidebarTitle, null, "Manage Authors")),
                     React.createElement(StyledSidebarContent, null,
                         React.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: addAuthor, "data-active": isCreatingNewAuthor || newAuthor },
                             React.createElement(AddIcon, { width: 18, height: 18 }),
                             React.createElement(ActionTitle, null, "New Author")),
                         React.createElement(AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
-                React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(React.Fragment, null,
-                    React.createElement(AuthorTabs, null,
-                        React.createElement(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.createElement(InspectorTabList, null,
-                            React.createElement(InspectorTab, null, "Details"),
-                            onOpenAffiliationsModal && (React.createElement(InspectorTab, null, "Affiliations")),
-                            React.createElement(InspectorTab, null, "Contributions (CRediT)")),
+                React.createElement(StyledScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(React.Fragment, null,
+                    React.createElement(AuthorTabs, { selectedIndex: authorTabIndex, onChange: setAuthorTabIndex },
+                        React.createElement(ModalFormActions, { type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev) }),
+                        React.createElement(ModalTabs, { tabLabels: [
+                                'Author Details',
+                                ...(onOpenAffiliationsModal ? ['Affiliations'] : []),
+                                'Contributions',
+                            ], tabErrorIndicators: [
+                                authorHasError,
+                                ...(onOpenAffiliationsModal ? [false] : []),
+                                false,
+                            ], tabWarningIndicators: [
+                                authorDetailsUnsavedContinue && !authorHasError,
+                                ...(onOpenAffiliationsModal ? [false] : []),
+                                false,
+                            ] }),
                         React.createElement(InspectorTabPanels, null,
                             React.createElement(AuthorTabPanel, null,
-                                React.createElement(AuthorDetailsForm, { values: normalizeAuthor(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
+                                React.createElement(AuthorDetailsForm, { values: 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.createElement(AuthorTabPanel, null,
                                 React.createElement(AffiliationsPanel, { items: affiliations, selectedItems: selectedAffiliations, onSelect: selectAffiliation, onOpenAffiliationsModal: onOpenAffiliationsModal }))),
                             React.createElement(AuthorTabPanel, null,
-                                React.createElement(DrawerGroup, { Drawer: CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
+                                React.createElement(FormSubtitle, null, "Contributions (CRediT)"),
+                                React.createElement(ContributionsDescriptionSubtitle, null, "Select the roles this author contributed to according to the CRediT taxonomy"),
+                                React.createElement(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.createElement(AddRoleIcon, { width: 16, height: 16 }) })))),
-                    React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: DialogType.REQUIRED, entityType: "author" }),
-                    React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: DialogType.SAVE, entityType: "author" }))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
-            React.createElement(FormFooter, { onCancel: close }))));
+                                    })), onSelect: selectCreditRole })))),
+                    React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => {
+                            setShowRequiredFieldConfirmationDialog(false);
+                            setNextAuthor(null);
+                            setAuthorDetailsRequiredContinue(true);
+                        }, onSecondary: cancel, type: DialogType.REQUIRED, entityType: "author" }),
+                    React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: () => {
+                            setShowConfirmationDialog(false);
+                            setNextAuthor(null);
+                            setAuthorDetailsUnsavedContinue(true);
+                        }, onSecondary: cancel, type: DialogType.SAVE, entityType: "author" }))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
+            React.createElement(FormFooter, { onCancel: close, primaryAction: selection ? (React.createElement(ModalFormSaveButton, { form: "author-details-form", newEntity: newEntity, isDisableSave: isDisableSave, onSubmitForm: () => actionsRef.current?.submitForm?.() })) : undefined }))));
 };
 function createEmptyAuthor(priority) {
     return {
@@ -348,6 +363,7 @@ function createEmptyAuthor(priority) {
         correspIDs: [],
         footnoteIDs: [],
         prefix: '',
+        creditRoles: [],
     };
 }
 const AddAuthorButton = styled.button `
@@ -381,6 +397,10 @@ const AuthorTabPanel = styled(InspectorTabPanel).attrs({
 }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
 `;
+const ContributionsDescriptionSubtitle = styled(FormSubtitle) `
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: ${(props) => props.theme.font.lineHeight.normal};
+`;
 const StyledSidebarContent = styled(SidebarContent) `
   padding: 8px;
 `;
@@ -389,5 +409,8 @@ const StyledModalBody = styled(ModalBody) `
   height: calc(90vh - 40px);
 `;
 const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+`;
+const StyledScrollableModalContent = styled(ScrollableModalContent) `
+  padding: 45px 16px 16px;
 `;

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

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

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

@@ -0,0 +1,81 @@
+import { CloseButton, ModalContainer, ModalHeader, StyledModal, } from '@manuscripts/style-guide';
+import { generateNodeID, schema } from '@manuscripts/transform';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { normalizeAuthor } from '../../lib/normalize';
+import { MODAL_ON_CLOSE_NOTIFY_DELAY_MS, FormTitle, StyledModalBody, StyledScrollableModalContent, } from '../form/CreateModalStyles';
+import FormFooter from '../form/FormFooter';
+import { ModalFormSaveButton } from '../form/ModalFormActions';
+import { AuthorDetailsForm } from './AuthorDetailsForm';
+import { useManageAffiliations } from './useManageAffiliations';
+import { useManageCredit } from './useManageCredit';
+export const CreateAuthorModal = ({ authorsCount, affiliations: $affiliations, onSave, onClose, }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const [isDisableSave, setDisableSave] = useState(true);
+    const [isEmailRequired, setEmailRequired] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    const actionsRef = useRef(undefined);
+    const authorFormRef = useRef(null);
+    const selection = useMemo(() => createEmptyAuthor(authorsCount), []);
+    const prevIsOpenRef = useRef(true);
+    useEffect(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            prevIsOpenRef.current = isOpen;
+            const id = window.setTimeout(() => {
+                onClose();
+            }, MODAL_ON_CLOSE_NOTIFY_DELAY_MS);
+            return () => window.clearTimeout(id);
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
+    const { selectedAffiliations } = useManageAffiliations(selection, $affiliations);
+    const { selectedCreditRoles } = 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.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => setIsOpen(false), shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, { "data-cy": "create-author-modal" },
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: () => setIsOpen(false), "data-cy": "modal-close-button" })),
+            React.createElement(StyledModalBody, null,
+                React.createElement(StyledScrollableModalContent, null,
+                    React.createElement(FormTitle, null, "Create New Author"),
+                    React.createElement(AuthorDetailsForm, { values: 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.createElement(FormFooter, { onCancel: () => setIsOpen(false), primaryAction: React.createElement(ModalFormSaveButton, { form: "author-details-form", newEntity: true, isDisableSave: isDisableSave || hasError, createLabel: "Create New Author", onSubmitForm: () => actionsRef.current?.submitForm?.() }) }))));
+};
+function createEmptyAuthor(priority) {
+    return {
+        id: generateNodeID(schema.nodes.contributor),
+        role: '',
+        affiliationIDs: [],
+        degrees: [],
+        given: '',
+        family: '',
+        email: '',
+        suffix: '',
+        isCorresponding: false,
+        ORCID: '',
+        priority,
+        isJointContributor: false,
+        correspIDs: [],
+        footnoteIDs: [],
+        prefix: '',
+        creditRoles: [],
+    };
+}

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

@@ -1,20 +1,22 @@
-import { CheckboxField, CheckboxLabel, Drawer, DrawerItemsList, LabelText, } from '@manuscripts/style-guide';
+import { CheckboxField, CheckboxLabel, LabelText, } from '@manuscripts/style-guide';
 import React from 'react';
 import styled from 'styled-components';
 import { CheckboxContainer } from './AuthorDetailsForm';
-export const CreditDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
-    return (React.createElement(Drawer, { ...drawerProps },
-        React.createElement(TwoColumnContainer, null, items.map((item, i) => (React.createElement(TwoColumnCheckbox, { key: item.id },
-            React.createElement(CheckboxLabel, null,
-                React.createElement(CheckboxField, { id: 'credit-role-' + i, name: item.id, checked: selectedItems?.map((a) => a.id).includes(item.id), onChange: () => {
-                        onSelect(item.id);
-                    } }),
-                React.createElement(LabelText, null, item.vocabTerm))))))));
+export const CreditContributionsCheckboxes = ({ items, selectedItems = [], onSelect }) => {
+    const selectedIds = selectedItems.map((a) => a.id);
+    return (React.createElement(TwoColumnContainer, { "data-cy": "credit-taxnonomy", role: "group", "aria-label": "Contributions (CRediT)" }, items.map((item) => (React.createElement(TwoColumnCheckbox, { key: item.id },
+        React.createElement(CheckboxLabel, null,
+            React.createElement(CheckboxField, { name: item.id, checked: selectedIds.includes(item.id), onChange: () => {
+                    onSelect(item.id);
+                } }),
+            React.createElement(LabelText, null, item.vocabTerm)))))));
 };
-const TwoColumnContainer = styled(DrawerItemsList) `
+const TwoColumnContainer = styled.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 = styled(CheckboxContainer) `

package/dist/es/components/authors-affiliations/AuthorsAndAffiliationsModals.js

@@ -13,32 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { schema, } from '@manuscripts/transform';
+import { schema } from '@manuscripts/transform';
 import React, { useState } from 'react';
+import { upsertAuthor, upsertAffiliation, } from '../../lib/authors-and-affiliations';
 import { getEditorProps } from '../../plugins/editor-props';
 import ReactSubView from '../../views/ReactSubView';
-import { deleteNode, findChildByType, findChildrenAttrsByType, updateNodeAttrs, } from '../../lib/view';
+import { deleteNode, findChildrenAttrsByType, updateNodeAttrs, } from '../../lib/view';
 import { AffiliationsModal, } from '../affiliations/AffiliationsModal';
+import { CreateAffiliationModal } from '../affiliations/CreateAffiliationModal';
 import { AuthorsModal } from '../authors/AuthorsModal';
-function insertNode(parentType, childType) {
-    return (view, attrs) => {
-        const parent = findChildByType(view, parentType);
-        if (parent) {
-            view.dispatch(view.state.tr.insert(parent.pos + 1, childType.create(attrs)));
-        }
-    };
-}
-function upsertNode(nodeType, insertFn) {
-    return (view, attrs) => {
-        if (!updateNodeAttrs(view, nodeType, attrs)) {
-            insertFn(view, attrs);
-        }
-    };
-}
-const insertAuthorNode = insertNode(schema.nodes.contributors, schema.nodes.contributor);
-const insertAffiliationNode = insertNode(schema.nodes.affiliations, schema.nodes.affiliation);
-const upsertAuthor = upsertNode(schema.nodes.contributor, insertAuthorNode);
-const upsertAffiliation = upsertNode(schema.nodes.affiliation, insertAffiliationNode);
+import { CreateAuthorModal } from '../authors/CreateAuthorModal';
 export const AuthorsAndAffiliationsModals = ({ initialModal, view, author, affiliation, addNewAuthor, addNewAffiliation, }) => {
     const [showOverlay, setShowOverlay] = useState(false);
     const [authors, setAuthors] = useState(() => findChildrenAttrsByType(view, schema.nodes.contributor));
@@ -69,11 +53,11 @@ export const AuthorsAndAffiliationsModals = ({ initialModal, view, author, affil
     if (initialModal === 'authors') {
         return (React.createElement(React.Fragment, null,
             React.createElement(AuthorsModal, { ...authorsProps, onOpenAffiliationsModal: handleOpenOverlay }),
-            showOverlay && (React.createElement(AffiliationsModal, { ...affiliationsProps, addNewAffiliation: true, onClose: handleOverlayClose }))));
+            showOverlay && (React.createElement(CreateAffiliationModal, { affiliationsCount: affiliations.length, onSave: (a) => upsertAffiliation(view, a), onClose: handleOverlayClose }))));
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(AffiliationsModal, { ...affiliationsProps, onOpenAuthorsModal: handleOpenOverlay }),
-        showOverlay && (React.createElement(AuthorsModal, { ...authorsProps, addNewAuthor: true, onClose: handleOverlayClose }))));
+        React.createElement(AffiliationsModal, { ...affiliationsProps, openAuthorsModal: handleOpenOverlay }),
+        showOverlay && (React.createElement(CreateAuthorModal, { authorsCount: authors.length, affiliations: affiliations, onSave: (a) => upsertAuthor(view, a), onClose: handleOverlayClose }))));
 };
 export const openAuthorsAndAffiliationsModals = (pos, view, initialModal) => {
     if (!view) {

package/dist/es/components/authors-affiliations/GenericPanel.js

@@ -57,8 +57,8 @@ const PanelEmpty = styled.div `
     ${(props) => props.theme.grid.unit * 4}px;
 `;
 const PanelEmptyIcon = styled.div `
-  width: 120px;
-  height: 120px;
+  width: 80px;
+  height: 80px;
   flex-shrink: 0;
   display: flex;
   align-items: center;