@manuscripts/body-editor 3.12.33 → 3.12.35

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

@@ -1,53 +1,82 @@
-import { FormRow, InputErrorText, Label, TextField, } from '@manuscripts/style-guide';
-import { Field, Formik } from 'formik';
-import React, { useRef } from 'react';
+import { FormGroup, FormRow, InputErrorText, RequiredIndicator, SelectField, TextField, } from '@manuscripts/style-guide';
+import { Field, FormikProvider, getIn, useFormik, } from 'formik';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { COUNTRY_SELECT_OPTIONS } from '@manuscripts/style-guide';
+import { normalizeAffiliation } from '../../lib/normalize';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
-export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
-    const formRef = useRef(null);
-    if (actionsRef) {
-        actionsRef.current = {
-            reset: () => formRef.current?.resetForm(),
-            submitForm: () => formRef.current?.submitForm(),
-        };
-    }
-    const validateAffiliation = (values) => {
+import { UnsavedLabel } from '../form/UnsavedLabel';
+import { isInstitutionError } from '../hooks/useAffiliationShowsErrorIndicator';
+function isAffiliationFieldChanged(formik, key) {
+    const v = normalizeAffiliation(formik.values);
+    const i = normalizeAffiliation(formik.initialValues);
+    return getIn(v, key) !== getIn(i, key);
+}
+export { affiliationShowsErrorIndicator } from '../hooks/useAffiliationShowsErrorIndicator';
+export 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.createElement(Formik, { initialValues: values, onSubmit: (attrs) => onSave(attrs), innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
-        React.createElement(FormRow, null,
-            React.createElement(Field, { name: "institution" }, (props) => {
-                const hasError = formik.touched.institution && formik.errors.institution;
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(Label, { htmlFor: "institution" }, "Institution Name*"),
-                    React.createElement(TextField, { id: "institution", ...props.field, error: hasError }),
-                    hasError && (React.createElement(InputErrorText, null, formik.errors.institution))));
-            })),
-        React.createElement(FormRow, null,
-            React.createElement(Field, { name: "department" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "department" }, "Department"),
-                React.createElement(TextField, { id: "department", ...props.field }))))),
-        React.createElement(FormRow, null,
-            React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "addressLine1" }, "Street Address"),
-                React.createElement(TextField, { id: "addressLine1", ...props.field }))))),
-        React.createElement(FormRow, null,
-            React.createElement(Field, { name: "city" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "city" }, "City"),
-                React.createElement(TextField, { id: "city", ...props.field }))))),
-        React.createElement(FormRow, null,
-            React.createElement(Field, { name: "county" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "county" }, "State / Province"),
-                React.createElement(TextField, { id: "county", ...props.field }))))),
-        React.createElement(FormRow, null,
-            React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "postCode" }, "Postal Code"),
-                React.createElement(TextField, { id: "postCode", ...props.field }))))),
-        React.createElement(FormRow, null,
-            React.createElement(Field, { name: "country" }, ({ field }) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "country" }, "Country"),
-                React.createElement(TextField, { id: "country", ...field })))))))));
+    const formik = 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 = isInstitutionError(formik, newEntity);
+    useEffect(() => {
+        onAffiliationErrorChange?.(showInstitutionError);
+    }, [showInstitutionError, onAffiliationErrorChange]);
+    const showUnsavedDot = (key) => unsavedContinueActive && isAffiliationFieldChanged(formik, key);
+    return (React.createElement(FormikProvider, { value: formik },
+        React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
+            React.createElement(FormRow, null,
+                React.createElement(Field, { name: "institution" }, (props) => (React.createElement(React.Fragment, null,
+                    React.createElement(UnsavedLabel, { htmlFor: "institution", showDot: showUnsavedDot('institution') },
+                        "Institution Name",
+                        React.createElement(RequiredIndicator, null, "*")),
+                    React.createElement(TextField, { id: "institution", ...props.field, error: showInstitutionError }),
+                    showInstitutionError && (React.createElement(InputErrorText, null, formik.errors.institution)))))),
+            React.createElement(FormRow, null,
+                React.createElement(Field, { name: "department", type: "textarea" }, (props) => (React.createElement(React.Fragment, null,
+                    React.createElement(UnsavedLabel, { htmlFor: "department", showDot: showUnsavedDot('department') }, "Department"),
+                    React.createElement(TextField, { id: "department", ...props.field, as: "textarea" }))))),
+            React.createElement(FormRow, null,
+                React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(React.Fragment, null,
+                    React.createElement(UnsavedLabel, { htmlFor: "addressLine1", showDot: showUnsavedDot('addressLine1') }, "Street Address"),
+                    React.createElement(TextField, { id: "addressLine1", ...props.field }))))),
+            React.createElement(StyledFormGroup, null,
+                React.createElement(FormRow, null,
+                    React.createElement(UnsavedLabel, { htmlFor: "country", showDot: showUnsavedDot('country') }, "Country"),
+                    React.createElement(Field, { id: "country", name: "country", component: SelectField, options: COUNTRY_SELECT_OPTIONS, isSearchable: true, variant: "large", listMaxHeight: "140px" })),
+                React.createElement(FormRow, null,
+                    React.createElement(Field, { name: "city" }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(UnsavedLabel, { htmlFor: "city", showDot: showUnsavedDot('city') }, "City"),
+                        React.createElement(TextField, { id: "city", ...props.field })))))),
+            React.createElement(StyledFormGroup, null,
+                React.createElement(FormRow, null,
+                    React.createElement(Field, { name: "county" }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(UnsavedLabel, { htmlFor: "county", showDot: showUnsavedDot('county') }, "State / Province"),
+                        React.createElement(TextField, { id: "county", ...props.field }))))),
+                React.createElement(FormRow, null,
+                    React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(UnsavedLabel, { htmlFor: "postCode", showDot: showUnsavedDot('postCode') }, "Postal Code"),
+                        React.createElement(TextField, { id: "postCode", ...props.field })))))))));
 };
+const StyledFormGroup = styled(FormGroup) `
+  > div {
+    flex: 1;
+    min-width: 0;
+  }
+`;

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

@@ -1,4 +1,4 @@
-import { AddIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -10,17 +10,19 @@ import { affiliationsReducer } from '../authors/useManageAffiliations';
 import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
 import FormFooter from '../form/FormFooter';
 import { FormPlaceholder } from '../form/FormPlaceholder';
-import { ModalFormActions } from '../form/ModalFormActions';
+import { ModalFormActions, ModalFormSaveButton } from '../form/ModalFormActions';
+import { ModalTabs } from '../authors-affiliations/ModalTabs';
 import { AuthorsPanel } from '../authors/AuthorsPanel';
 import { AffiliationForm } from './AffiliationForm';
 import { AffiliationList } from './AffiliationList';
+const MODAL_ON_CLOSE_NOTIFY_DELAY_MS = 220;
 function makeAuthorItems(authors) {
     return authors.map((author) => ({
         id: author.id,
         label: `${author.given} ${author.family}`,
     }));
 }
-export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, onClose, onOpenAuthorsModal, }) => {
+export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, onClose, openAuthorsModal, }) => {
     const [isOpen, setIsOpen] = useState(true);
     const [selection, setSelection] = useState(affiliation);
     const [showingDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -43,13 +45,31 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
     const [pendingAction, setPendingAction] = useState(null);
     const [savedAffiliationId, setSavedAffiliationId] = useState(undefined);
     const [affiliationAuthorMap, setAffiliationAuthorMap] = useState(new Map());
-    const prevIsOpenRef = useRef(isOpen);
+    const [affiliationTabHasError, setAffiliationTabHasError] = useState(false);
+    const [affiliationDetailsUnsavedContinue, setAffiliationDetailsUnsavedContinue,] = useState(false);
+    const [affiliationTabIndex, setAffiliationTabIndex] = useState(0);
+    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]);
+    useEffect(() => {
+        if (isDisableSave) {
+            setAffiliationDetailsUnsavedContinue(false);
+        }
+    }, [isDisableSave]);
+    useEffect(() => {
+        setAffiliationDetailsUnsavedContinue(false);
+        if (selection?.id) {
+            setAffiliationTabIndex(0);
+        }
+    }, [selection?.id]);
     useEffect(() => {
         if (!selection) {
             return;
@@ -153,6 +173,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             newMap.set(affiliation.id, selectedAuthorIds);
             return newMap;
         });
+        setAffiliationDetailsUnsavedContinue(false);
         setSavedAffiliationId(affiliation.id);
         setTimeout(() => {
             setSavedAffiliationId(undefined);
@@ -253,70 +274,49 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             setNewAffiliation(true);
         }
     }, [addNewAffiliation]);
-    const handleConfirmationSave = 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 = checkID(pendingSelection, 'affiliation');
-            setIsDisableSave(true);
+            valuesRef.current = 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
+                ? checkID(affiliation, 'affiliation')
+                : undefined;
         }
-        if (pendingSelection) {
-            valuesRef.current = checkID(pendingSelection, 'affiliation');
+        else if (pending) {
+            valuesRef.current = checkID(pending, 'affiliation');
         }
         else {
             valuesRef.current = undefined;
         }
         setPendingSelection(null);
         setPendingAction(null);
-        if (pendingAction === 'close') {
-            setIsOpen(false);
-        }
     };
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
         React.createElement(ModalContainer, { "data-cy": "affiliations-modal" },
@@ -325,28 +325,35 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             React.createElement(StyledModalBody, null,
                 React.createElement(ModalSidebar, null,
                     React.createElement(StyledModalSidebarHeader, null,
-                        React.createElement(ModalSidebarTitle, null, "Affiliations")),
+                        React.createElement(ModalSidebarTitle, null, "Institutional Affiliations")),
                     React.createElement(StyledSidebarContent, null,
                         React.createElement(AddAffiliationButton, { "data-cy": "add-affiliation-button", onClick: handleAddAffiliation, "data-active": newAffiliation },
                             React.createElement(AddIcon, { width: 18, height: 18 }),
                             React.createElement(ActionTitle, null, "New Affiliation")),
                         React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
-                React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
-                    React.createElement(AffiliationTabs, null,
-                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                React.createElement(StyledScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
+                    React.createElement(AffiliationTabs, { selectedIndex: affiliationTabIndex, onChange: setAffiliationTabIndex },
+                        React.createElement(ModalFormActions, { type: "affiliation", onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
                                 !(showConfirmationDialog ||
-                                    showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
-                        React.createElement(InspectorTabList, null,
-                            React.createElement(InspectorTab, null, "Details"),
-                            onOpenAuthorsModal && React.createElement(InspectorTab, null, "Authors")),
+                                    showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog }),
+                        React.createElement(ModalTabs, { tabLabels: ['Affiliation Details', 'Authors'], tabErrorIndicators: [affiliationTabHasError, false], tabWarningIndicators: [
+                                affiliationDetailsUnsavedContinue &&
+                                    !affiliationTabHasError,
+                                false,
+                            ] }),
                         React.createElement(InspectorTabPanels, null,
                             React.createElement(AffiliationTabPanel, null,
-                                React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: (attrs) => handleSaveAffiliation(attrs), onChange: handleAffiliationChange, actionsRef: actionsRef })),
-                            onOpenAuthorsModal && (React.createElement(AffiliationTabPanel, null,
-                                React.createElement(AuthorsPanel, { items: makeAuthorItems(authors), selectedItems: selectedAuthors, onSelect: selectAuthor, onOpenAuthorsModal: onOpenAuthorsModal }))))),
+                                React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: (attrs) => handleSaveAffiliation(attrs), onChange: handleAffiliationChange, actionsRef: actionsRef, newEntity: newAffiliation, onAffiliationErrorChange: setAffiliationTabHasError, unsavedContinueActive: affiliationDetailsUnsavedContinue })),
+                            openAuthorsModal && (React.createElement(AffiliationTabPanel, null,
+                                React.createElement(AuthorsPanel, { items: makeAuthorItems(authors), selectedItems: selectedAuthors, onSelect: selectAuthor, openAuthorsModal: openAuthorsModal }))))),
                     React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: DialogType.REQUIRED, entityType: "affiliation" }),
-                    React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
-            React.createElement(FormFooter, { onCancel: handleClose }))));
+                    React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: () => {
+                            setShowConfirmationDialog(false);
+                            setPendingSelection(null);
+                            setPendingAction(null);
+                            setAffiliationDetailsUnsavedContinue(true);
+                        }, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
+            React.createElement(FormFooter, { onCancel: handleClose, primaryAction: selection ? (React.createElement(ModalFormSaveButton, { form: "affiliation-form", newEntity: newAffiliation, isDisableSave: isDisableSave, onSubmitForm: () => actionsRef.current?.submitForm?.() })) : undefined }))));
 };
 function createEmptyAffiliation(priority) {
     return {
@@ -400,6 +407,7 @@ const AffiliationTabPanel = styled(InspectorTabPanel).attrs({
     unmount: false,
 }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  height: calc(100% - 16px);
 `;
 const StyledModalBody = styled(ModalBody) `
   position: relative;
@@ -409,3 +417,6 @@ const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
   margin-top: 8px;
   margin-bottom: 16px;
 `;
+const StyledScrollableModalContent = styled(ScrollableModalContent) `
+  padding: 45px 16px 16px;
+`;

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

@@ -1,4 +1,4 @@
-import { AffiliationPlaceholderIcon } from '@manuscripts/style-guide';
+import { InfoCircleIcon } from '@manuscripts/style-guide';
 import React from 'react';
 import { GenericPanel, ListItem, ListItems, useListSelectedIds, } from '../authors-affiliations/GenericPanel';
 function affiliationSecondaryLine(item) {
@@ -7,7 +7,7 @@ function affiliationSecondaryLine(item) {
 }
 export const AffiliationsPanel = ({ items, selectedItems = [], onSelect, onOpenAffiliationsModal, }) => {
     const selectedIds = useListSelectedIds(selectedItems);
-    return (React.createElement(GenericPanel, { title: "Institutional Affiliations", createLabel: "Create New Affiliation", onCreate: onOpenAffiliationsModal, createDataCy: "add-affiliations-link", emptyDataCy: "affiliations-panel-empty", isEmpty: items.length === 0, emptyIcon: React.createElement(AffiliationPlaceholderIcon, null), emptyMessage: React.createElement(React.Fragment, null,
+    return (React.createElement(GenericPanel, { title: "Institutional Affiliations", createLabel: "Create New Affiliation", onCreate: onOpenAffiliationsModal, createDataCy: "add-affiliations-link", emptyDataCy: "affiliations-panel-empty", isEmpty: items.length === 0, emptyIcon: React.createElement(InfoCircleIcon, null), emptyMessage: React.createElement(React.Fragment, null,
             "There are no affiliations attributed yet!",
             React.createElement("br", null),
             "Click \u2018Create New Affiliation\u2019") },

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

@@ -0,0 +1,56 @@
+import { CloseButton, ModalContainer, ModalHeader, StyledModal, } from '@manuscripts/style-guide';
+import { generateNodeID, schema } from '@manuscripts/transform';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { checkID } 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 { AffiliationForm } from './AffiliationForm';
+export const CreateAffiliationModal = ({ affiliationsCount, onSave, onClose, }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const [isDisableSave, setIsDisableSave] = useState(true);
+    const actionsRef = useRef(undefined);
+    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 selection = useMemo(() => ({
+        id: generateNodeID(schema.nodes.affiliation),
+        institution: '',
+        department: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        postCode: '',
+        country: '',
+        county: '',
+        city: '',
+        email: { href: '', text: '' },
+        priority: affiliationsCount,
+    }), []);
+    const handleSave = (values) => {
+        onSave({ ...checkID(selection, 'affiliation'), ...values });
+        setIsOpen(false);
+    };
+    const handleChange = (values) => {
+        const isInstitutionEmpty = !values.institution?.trim();
+        setIsDisableSave(isInstitutionEmpty);
+    };
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => setIsOpen(false), shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, { "data-cy": "create-affiliation-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 Affiliation"),
+                    React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: handleSave, onChange: handleChange, actionsRef: actionsRef, newEntity: true, onAffiliationErrorChange: setHasError }))),
+            React.createElement(FormFooter, { onCancel: () => setIsOpen(false), primaryAction: React.createElement(ModalFormSaveButton, { form: "affiliation-form", newEntity: true, isDisableSave: isDisableSave || hasError, createLabel: "Create New Affiliation", onSubmitForm: () => actionsRef.current?.submitForm?.() }) }))));
+};