@manuscripts/body-editor 3.12.33 → 3.12.35

package/dist/cjs/components/ChangeHandlingForm.js

@@ -50,8 +50,9 @@ const ChangeHandlingForm = (props) => {
 };
 exports.ChangeHandlingForm = ChangeHandlingForm;
 exports.FlexForm = (0, styled_components_1.default)(formik_1.Form) `
-  height: 100%;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
 `;

package/dist/cjs/components/affiliations/AffiliationForm.js

@@ -32,59 +32,92 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AffiliationForm = void 0;
+exports.AffiliationForm = exports.affiliationShowsErrorIndicator = 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 style_guide_2 = require("@manuscripts/style-guide");
+const normalize_1 = require("../../lib/normalize");
 const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
-const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
-    const formRef = (0, react_1.useRef)(null);
-    if (actionsRef) {
-        actionsRef.current = {
-            reset: () => formRef.current?.resetForm(),
-            submitForm: () => formRef.current?.submitForm(),
-        };
-    }
-    const validateAffiliation = (values) => {
+const UnsavedLabel_1 = require("../form/UnsavedLabel");
+const useAffiliationShowsErrorIndicator_1 = require("../hooks/useAffiliationShowsErrorIndicator");
+function isAffiliationFieldChanged(formik, key) {
+    const v = (0, normalize_1.normalizeAffiliation)(formik.values);
+    const i = (0, normalize_1.normalizeAffiliation)(formik.initialValues);
+    return (0, formik_1.getIn)(v, key) !== (0, formik_1.getIn)(i, key);
+}
+var useAffiliationShowsErrorIndicator_2 = require("../hooks/useAffiliationShowsErrorIndicator");
+Object.defineProperty(exports, "affiliationShowsErrorIndicator", { enumerable: true, get: function () { return useAffiliationShowsErrorIndicator_2.affiliationShowsErrorIndicator; } });
+const AffiliationForm = ({ values, onSave, onChange, actionsRef, newEntity = false, onAffiliationErrorChange, unsavedContinueActive = false, }) => {
+    const validateAffiliation = (vals) => {
         const errors = {};
-        if (!values.institution?.trim()) {
+        if (!vals.institution?.trim()) {
             errors.institution = 'Institution Name is required';
         }
         return errors;
     };
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: (attrs) => onSave(attrs), innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
-        react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => {
-                const hasError = formik.touched.institution && formik.errors.institution;
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "institution" }, "Institution Name*"),
-                    react_1.default.createElement(style_guide_1.TextField, { id: "institution", ...props.field, error: hasError }),
-                    hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, formik.errors.institution))));
-            })),
-        react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(formik_1.Field, { name: "department" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(style_guide_1.Label, { htmlFor: "department" }, "Department"),
-                react_1.default.createElement(style_guide_1.TextField, { id: "department", ...props.field }))))),
-        react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(style_guide_1.Label, { htmlFor: "addressLine1" }, "Street Address"),
-                react_1.default.createElement(style_guide_1.TextField, { id: "addressLine1", ...props.field }))))),
-        react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(style_guide_1.Label, { htmlFor: "city" }, "City"),
-                react_1.default.createElement(style_guide_1.TextField, { id: "city", ...props.field }))))),
-        react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(style_guide_1.Label, { htmlFor: "county" }, "State / Province"),
-                react_1.default.createElement(style_guide_1.TextField, { id: "county", ...props.field }))))),
-        react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(style_guide_1.Label, { htmlFor: "postCode" }, "Postal Code"),
-                react_1.default.createElement(style_guide_1.TextField, { id: "postCode", ...props.field }))))),
-        react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(formik_1.Field, { name: "country" }, ({ field }) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(style_guide_1.Label, { htmlFor: "country" }, "Country"),
-                react_1.default.createElement(style_guide_1.TextField, { id: "country", ...field })))))))));
+    const formik = (0, formik_1.useFormik)({
+        initialValues: values,
+        onSubmit: (attrs) => onSave(attrs),
+        enableReinitialize: true,
+        validate: validateAffiliation,
+        validateOnChange: true,
+    });
+    if (actionsRef) {
+        actionsRef.current = {
+            reset: () => formik.resetForm(),
+            submitForm: () => formik.submitForm(),
+        };
+    }
+    const showInstitutionError = (0, useAffiliationShowsErrorIndicator_1.isInstitutionError)(formik, newEntity);
+    (0, react_1.useEffect)(() => {
+        onAffiliationErrorChange?.(showInstitutionError);
+    }, [showInstitutionError, onAffiliationErrorChange]);
+    const showUnsavedDot = (key) => unsavedContinueActive && isAffiliationFieldChanged(formik, key);
+    return (react_1.default.createElement(formik_1.FormikProvider, { value: formik },
+        react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "institution", showDot: showUnsavedDot('institution') },
+                        "Institution Name",
+                        react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*")),
+                    react_1.default.createElement(style_guide_1.TextField, { id: "institution", ...props.field, error: showInstitutionError }),
+                    showInstitutionError && (react_1.default.createElement(style_guide_1.InputErrorText, null, formik.errors.institution)))))),
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(formik_1.Field, { name: "department", type: "textarea" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "department", showDot: showUnsavedDot('department') }, "Department"),
+                    react_1.default.createElement(style_guide_1.TextField, { id: "department", ...props.field, as: "textarea" }))))),
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "addressLine1", showDot: showUnsavedDot('addressLine1') }, "Street Address"),
+                    react_1.default.createElement(style_guide_1.TextField, { id: "addressLine1", ...props.field }))))),
+            react_1.default.createElement(StyledFormGroup, null,
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "country", showDot: showUnsavedDot('country') }, "Country"),
+                    react_1.default.createElement(formik_1.Field, { id: "country", name: "country", component: style_guide_1.SelectField, options: style_guide_2.COUNTRY_SELECT_OPTIONS, isSearchable: true, variant: "large", listMaxHeight: "140px" })),
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "city", showDot: showUnsavedDot('city') }, "City"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: "city", ...props.field })))))),
+            react_1.default.createElement(StyledFormGroup, null,
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "county", showDot: showUnsavedDot('county') }, "State / Province"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: "county", ...props.field }))))),
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "postCode", showDot: showUnsavedDot('postCode') }, "Postal Code"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: "postCode", ...props.field })))))))));
 };
 exports.AffiliationForm = AffiliationForm;
+const StyledFormGroup = (0, styled_components_1.default)(style_guide_1.FormGroup) `
+  > div {
+    flex: 1;
+    min-width: 0;
+  }
+`;

package/dist/cjs/components/affiliations/AffiliationsModal.js

@@ -50,16 +50,18 @@ 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 ModalTabs_1 = require("../authors-affiliations/ModalTabs");
 const AuthorsPanel_1 = require("../authors/AuthorsPanel");
 const AffiliationForm_1 = require("./AffiliationForm");
 const AffiliationList_1 = require("./AffiliationList");
+const MODAL_ON_CLOSE_NOTIFY_DELAY_MS = 220;
 function makeAuthorItems(authors) {
     return authors.map((author) => ({
         id: author.id,
         label: `${author.given} ${author.family}`,
     }));
 }
-const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, onClose, onOpenAuthorsModal, }) => {
+const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, onClose, openAuthorsModal, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(true);
     const [selection, setSelection] = (0, react_1.useState)(affiliation);
     const [showingDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
@@ -82,13 +84,31 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
     const [pendingAction, setPendingAction] = (0, react_1.useState)(null);
     const [savedAffiliationId, setSavedAffiliationId] = (0, react_1.useState)(undefined);
     const [affiliationAuthorMap, setAffiliationAuthorMap] = (0, react_1.useState)(new Map());
-    const prevIsOpenRef = (0, react_1.useRef)(isOpen);
+    const [affiliationTabHasError, setAffiliationTabHasError] = (0, react_1.useState)(false);
+    const [affiliationDetailsUnsavedContinue, setAffiliationDetailsUnsavedContinue,] = (0, react_1.useState)(false);
+    const [affiliationTabIndex, setAffiliationTabIndex] = (0, react_1.useState)(0);
+    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]);
+    (0, react_1.useEffect)(() => {
+        if (isDisableSave) {
+            setAffiliationDetailsUnsavedContinue(false);
+        }
+    }, [isDisableSave]);
+    (0, react_1.useEffect)(() => {
+        setAffiliationDetailsUnsavedContinue(false);
+        if (selection?.id) {
+            setAffiliationTabIndex(0);
+        }
+    }, [selection?.id]);
     (0, react_1.useEffect)(() => {
         if (!selection) {
             return;
@@ -192,6 +212,7 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
             newMap.set(affiliation.id, selectedAuthorIds);
             return newMap;
         });
+        setAffiliationDetailsUnsavedContinue(false);
         setSavedAffiliationId(affiliation.id);
         setTimeout(() => {
             setSavedAffiliationId(undefined);
@@ -292,70 +313,49 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
             setNewAffiliation(true);
         }
     }, [addNewAffiliation]);
-    const handleConfirmationSave = (0, react_1.useCallback)(() => {
-        handleSaveAffiliation(valuesRef.current);
+    const handleConfirmationCancel = () => {
+        const action = pendingAction;
+        const pending = pendingSelection;
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
-        if (pendingAction === 'new') {
-            setNewAffiliation(true);
-            setSelection(affiliation);
-            setSelectedAuthorIds([]);
-            setIsDisableSave(true);
+        if (action === 'close') {
+            setIsOpen(false);
+            setSelection(undefined);
+            valuesRef.current = undefined;
+            setPendingSelection(null);
+            setPendingAction(null);
+            return;
         }
-        else if (pendingAction === 'select' && pendingSelection) {
-            setSelection(pendingSelection);
+        if (action === 'select' && pending) {
+            setSelection(pending);
             setNewAffiliation(false);
             const affiliatedAuthorIds = authors
-                .filter((author) => author.affiliationIDs.some((aff) => aff === pendingSelection.id))
+                .filter((author) => author.affiliationIDs?.some((aff) => aff === pending.id))
                 .map((author) => author.id);
             setSelectedAuthorIds(affiliatedAuthorIds);
-            valuesRef.current = (0, normalize_1.checkID)(pendingSelection, 'affiliation');
-            setIsDisableSave(true);
+            valuesRef.current = (0, normalize_1.checkID)(pending, 'affiliation');
             setAffiliationAuthorMap((prevMap) => {
                 const newMap = new Map(prevMap);
-                newMap.set(pendingSelection.id, affiliatedAuthorIds);
+                newMap.set(pending.id, affiliatedAuthorIds);
                 return newMap;
             });
         }
-        if (pendingAction === 'close') {
-            setIsOpen(false);
-        }
-        setPendingSelection(null);
-        setPendingAction(null);
-    }, [
-        authors,
-        affiliation,
-        pendingAction,
-        pendingSelection,
-        handleSaveAffiliation,
-    ]);
-    const handleConfirmationCancel = () => {
-        setShowConfirmationDialog(false);
-        setShowRequiredFieldConfirmationDialog(false);
-        if (pendingAction === 'select' && pendingSelection) {
-            setSelection(pendingSelection);
-            setNewAffiliation(false);
-            const affiliatedAuthorIds = authors
-                .filter((author) => author.affiliationIDs?.some((aff) => aff === pendingSelection.id))
-                .map((author) => author.id);
-            setSelectedAuthorIds(affiliatedAuthorIds);
-        }
-        else if (pendingAction === 'new') {
+        else if (action === 'new') {
             setNewAffiliation(true);
             setSelection(affiliation);
             setSelectedAuthorIds([]);
+            valuesRef.current = affiliation
+                ? (0, normalize_1.checkID)(affiliation, 'affiliation')
+                : undefined;
         }
-        if (pendingSelection) {
-            valuesRef.current = (0, normalize_1.checkID)(pendingSelection, 'affiliation');
+        else if (pending) {
+            valuesRef.current = (0, normalize_1.checkID)(pending, 'affiliation');
         }
         else {
             valuesRef.current = undefined;
         }
         setPendingSelection(null);
         setPendingAction(null);
-        if (pendingAction === 'close') {
-            setIsOpen(false);
-        }
     };
     return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
         react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "affiliations-modal" },
@@ -364,28 +364,35 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
             react_1.default.createElement(StyledModalBody, null,
                 react_1.default.createElement(style_guide_1.ModalSidebar, null,
                     react_1.default.createElement(StyledModalSidebarHeader, null,
-                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Affiliations")),
+                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Institutional Affiliations")),
                     react_1.default.createElement(StyledSidebarContent, null,
                         react_1.default.createElement(AddAffiliationButton, { "data-cy": "add-affiliation-button", onClick: handleAddAffiliation, "data-active": newAffiliation },
                             react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
                             react_1.default.createElement(ActionTitle, null, "New Affiliation")),
                         react_1.default.createElement(AffiliationList_1.AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
-                react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(AffiliationTabs, null,
-                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                react_1.default.createElement(StyledScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(AffiliationTabs, { selectedIndex: affiliationTabIndex, onChange: setAffiliationTabIndex },
+                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: "affiliation", onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
                                 !(showConfirmationDialog ||
-                                    showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
-                        react_1.default.createElement(style_guide_1.InspectorTabList, null,
-                            react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
-                            onOpenAuthorsModal && react_1.default.createElement(style_guide_1.InspectorTab, null, "Authors")),
+                                    showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog }),
+                        react_1.default.createElement(ModalTabs_1.ModalTabs, { tabLabels: ['Affiliation Details', 'Authors'], tabErrorIndicators: [affiliationTabHasError, false], tabWarningIndicators: [
+                                affiliationDetailsUnsavedContinue &&
+                                    !affiliationTabHasError,
+                                false,
+                            ] }),
                         react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
                             react_1.default.createElement(AffiliationTabPanel, null,
-                                react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: (attrs) => handleSaveAffiliation(attrs), onChange: handleAffiliationChange, actionsRef: actionsRef })),
-                            onOpenAuthorsModal && (react_1.default.createElement(AffiliationTabPanel, null,
-                                react_1.default.createElement(AuthorsPanel_1.AuthorsPanel, { items: makeAuthorItems(authors), selectedItems: selectedAuthors, onSelect: selectAuthor, onOpenAuthorsModal: onOpenAuthorsModal }))))),
+                                react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: (attrs) => handleSaveAffiliation(attrs), onChange: handleAffiliationChange, actionsRef: actionsRef, newEntity: newAffiliation, onAffiliationErrorChange: setAffiliationTabHasError, unsavedContinueActive: affiliationDetailsUnsavedContinue })),
+                            openAuthorsModal && (react_1.default.createElement(AffiliationTabPanel, null,
+                                react_1.default.createElement(AuthorsPanel_1.AuthorsPanel, { items: makeAuthorItems(authors), selectedItems: selectedAuthors, onSelect: selectAuthor, openAuthorsModal: openAuthorsModal }))))),
                     react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "affiliation" }),
-                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "affiliation" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
-            react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
+                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: () => {
+                            setShowConfirmationDialog(false);
+                            setPendingSelection(null);
+                            setPendingAction(null);
+                            setAffiliationDetailsUnsavedContinue(true);
+                        }, onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "affiliation" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose, primaryAction: selection ? (react_1.default.createElement(ModalFormActions_1.ModalFormSaveButton, { form: "affiliation-form", newEntity: newAffiliation, isDisableSave: isDisableSave, onSubmitForm: () => actionsRef.current?.submitForm?.() })) : undefined }))));
 };
 exports.AffiliationsModal = AffiliationsModal;
 function createEmptyAffiliation(priority) {
@@ -440,6 +447,7 @@ const AffiliationTabPanel = (0, styled_components_1.default)(style_guide_1.Inspe
     unmount: false,
 }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  height: calc(100% - 16px);
 `;
 const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
   position: relative;
@@ -449,3 +457,6 @@ const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.
   margin-top: 8px;
   margin-bottom: 16px;
 `;
+const StyledScrollableModalContent = (0, styled_components_1.default)(style_guide_1.ScrollableModalContent) `
+  padding: 45px 16px 16px;
+`;

package/dist/cjs/components/affiliations/AffiliationsPanel.js

@@ -13,7 +13,7 @@ function affiliationSecondaryLine(item) {
 }
 const AffiliationsPanel = ({ items, selectedItems = [], onSelect, onOpenAffiliationsModal, }) => {
     const selectedIds = (0, GenericPanel_1.useListSelectedIds)(selectedItems);
-    return (react_1.default.createElement(GenericPanel_1.GenericPanel, { title: "Institutional Affiliations", createLabel: "Create New Affiliation", onCreate: onOpenAffiliationsModal, createDataCy: "add-affiliations-link", emptyDataCy: "affiliations-panel-empty", isEmpty: items.length === 0, emptyIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null), emptyMessage: react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(GenericPanel_1.GenericPanel, { title: "Institutional Affiliations", createLabel: "Create New Affiliation", onCreate: onOpenAffiliationsModal, createDataCy: "add-affiliations-link", emptyDataCy: "affiliations-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 affiliations attributed yet!",
             react_1.default.createElement("br", null),
             "Click \u2018Create New Affiliation\u2019") },

package/dist/cjs/components/affiliations/CreateAffiliationModal.js

@@ -0,0 +1,96 @@
+"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.CreateAffiliationModal = 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 AffiliationForm_1 = require("./AffiliationForm");
+const CreateAffiliationModal = ({ affiliationsCount, onSave, onClose, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(true);
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const [isDisableSave, setIsDisableSave] = (0, react_1.useState)(true);
+    const actionsRef = (0, react_1.useRef)(undefined);
+    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 selection = (0, react_1.useMemo)(() => ({
+        id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.affiliation),
+        institution: '',
+        department: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        postCode: '',
+        country: '',
+        county: '',
+        city: '',
+        email: { href: '', text: '' },
+        priority: affiliationsCount,
+    }), []);
+    const handleSave = (values) => {
+        onSave({ ...(0, normalize_1.checkID)(selection, 'affiliation'), ...values });
+        setIsOpen(false);
+    };
+    const handleChange = (values) => {
+        const isInstitutionEmpty = !values.institution?.trim();
+        setIsDisableSave(isInstitutionEmpty);
+    };
+    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-affiliation-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 Affiliation"),
+                    react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: handleSave, onChange: handleChange, actionsRef: actionsRef, newEntity: true, onAffiliationErrorChange: setHasError }))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: () => setIsOpen(false), primaryAction: react_1.default.createElement(ModalFormActions_1.ModalFormSaveButton, { form: "affiliation-form", newEntity: true, isDisableSave: isDisableSave || hasError, createLabel: "Create New Affiliation", onSubmitForm: () => actionsRef.current?.submitForm?.() }) }))));
+};
+exports.CreateAffiliationModal = CreateAffiliationModal;