@manuscripts/body-editor 3.0.2 → 3.0.3-LEAN-4579.1

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

@@ -1,6 +1,6 @@
 "use strict";
 /*!
- * © 2024 Atypon Systems LLC
+ * © 2025 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -41,114 +41,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthorsModal = exports.affiliationsReducer = exports.authorsReducer = void 0;
+exports.AuthorsModal = exports.authorsReducer = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
 const lodash_1 = require("lodash");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const array_reducer_1 = require("../../lib/array-reducer");
 const authors_1 = require("../../lib/authors");
+const normalize_1 = require("../../lib/normalize");
 const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
 const FormFooter_1 = __importDefault(require("../form/FormFooter"));
 const FormPlaceholder_1 = require("../form/FormPlaceholder");
 const ModalFormActions_1 = require("../form/ModalFormActions");
+const GenericDrawerGroup_1 = require("../modal-drawer/GenericDrawerGroup");
+const AffiliationDrawer_1 = require("./AffiliationDrawer");
 const AuthorDetailsForm_1 = require("./AuthorDetailsForm");
 const AuthorList_1 = require("./AuthorList");
-const AddAuthorButton = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  padding: 12px 8px 12px 12px;
-  cursor: pointer;
-  &[data-active='true'] {
-    background: ${(props) => props.theme.colors.background.fifth};
-    border: 1px solid ${(props) => props.theme.colors.border.primary};
-    border-left: 0;
-    border-right: 0;
-  }
-`;
-const ActionTitle = styled_components_1.default.div `
-  padding-left: ${(props) => props.theme.grid.unit * 2}px;
-`;
-const FormLabel = styled_components_1.default.legend `
-  margin-bottom: 12px;
-  font: ${(props) => props.theme.font.weight.normal}
-    ${(props) => props.theme.font.size.xlarge} /
-    ${(props) => props.theme.font.lineHeight.large}
-    ${(props) => props.theme.font.family.sans};
-  letter-spacing: -0.4px;
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
-const AuthorForms = styled_components_1.default.div `
-  padding-left: ${(props) => props.theme.grid.unit * 3}px;
-  padding-right: ${(props) => props.theme.grid.unit * 3}px;
-  position: relative;
-  margin-top: 20px;
-`;
-const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
-  padding: 0;
-`;
-const AuthorsSection = styled_components_1.default.div `
-  margin-top: ${(props) => props.theme.grid.unit * 4}px;
-  padding-top: ${(props) => props.theme.grid.unit * 4}px;
-  border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
-`;
-const AuthorsHeader = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-direction: column;
-  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
-`;
-const AuthorsTitle = styled_components_1.default.h3 `
-  margin: 0;
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  font-size: ${(props) => props.theme.font.size.large};
-  font-family: ${(props) => props.theme.font.family.sans};
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
-const AffiliateButton = styled_components_1.default.button `
-  color: ${(props) => props.theme.colors.brand.default};
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  font: ${(props) => props.theme.font.weight.normal}
-    ${(props) => props.theme.font.size.normal}
-    ${(props) => props.theme.font.family.sans};
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: ${(props) => props.theme.grid.unit * 2}px;
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
-  position: relative;
-  height: calc(90vh - 40px);
-`;
-const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
-  margin-bottom: 16px;
-`;
+const CreditDrawer_1 = require("./CreditDrawer");
+const useManageAffiliations_1 = require("./useManageAffiliations");
+const useManageCredit_1 = require("./useManageCredit");
 exports.authorsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
-exports.affiliationsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
-const normalize = (author) => ({
-    id: author.id,
-    role: author.role || '',
-    affiliations: (author.affiliations || []).sort(),
-    bibliographicName: author.bibliographicName,
-    email: author.email || '',
-    isCorresponding: author.isCorresponding || false,
-    ORCIDIdentifier: author.ORCIDIdentifier || '',
-    priority: author.priority || 0,
-    isJointContributor: author.isJointContributor || false,
-    userID: author.userID || '',
-    invitationID: author.invitationID || '',
-    footnote: author.footnote || [],
-    corresp: author.corresp || [],
-    prefix: author.prefix || '',
-});
 const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
     const [isDisableSave, setDisableSave] = (0, react_1.useState)(true);
@@ -156,48 +70,38 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
     const [showConfirmationDialog, setShowConfirmationDialog] = (0, react_1.useState)(false);
     const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = (0, react_1.useState)(false);
     const [lastSavedAuthor, setLastSavedAuthor] = (0, react_1.useState)(null);
-    const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
+    const [showingDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
     const [newAuthor, setNewAuthor] = (0, react_1.useState)(false);
     const [unSavedChanges, setUnSavedChanges] = (0, react_1.useState)(false);
     const [nextAuthor, setNextAuthor] = (0, react_1.useState)(null);
     const [isSwitchingAuthor, setIsSwitchingAuthor] = (0, react_1.useState)(false);
     const [isCreatingNewAuthor, setIsCreatingNewAuthor] = (0, react_1.useState)(false);
-    const [showAffiliationDrawer, setShowAffiliationDrawer] = (0, react_1.useState)(false);
-    const [selectedAffiliations, setSelectedAffiliations] = (0, react_1.useState)([]);
+    const [showCreditDrawer, setShowCreditDrawer] = (0, react_1.useState)(false);
     const valuesRef = (0, react_1.useRef)();
     const actionsRef = (0, react_1.useRef)();
     const authorFormRef = (0, react_1.useRef)(null);
     const [authors, dispatchAuthors] = (0, react_1.useReducer)(exports.authorsReducer, $authors.sort(authors_1.authorComparator));
-    const [affiliations] = (0, react_1.useReducer)(exports.affiliationsReducer, $affiliations);
-    const affiliationItems = affiliations.map((affiliation) => ({
-        id: affiliation.id,
-        label: affiliation.institution,
-        country: affiliation.country,
-        city: affiliation.city,
-        state: affiliation.county,
-    }));
-    const [selectedAffiliationIds, setSelectedAffiliationIds] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         if (addNewAuthor) {
-            handleAddAuthor();
+            addAuthor();
         }
     }, [addNewAuthor]);
     const [selection, setSelection] = (0, react_1.useState)(author);
+    const { showAffiliationDrawer, setShowAffiliationDrawer, selectedAffiliations, setSelectedAffiliations, removeAffiliation, selectAffiliation, affiliations, } = (0, useManageAffiliations_1.useManageAffiliations)(selection, $affiliations);
     (0, react_1.useEffect)(() => {
         const currentAuthor = selection;
-        const relevantAffiliations = affiliationItems.filter((item) => currentAuthor?.affiliations?.includes(item.id));
+        const relevantAffiliations = affiliations.filter((item) => currentAuthor?.affiliations?.includes(item.id));
         setSelectedAffiliations(relevantAffiliations);
-        setSelectedAffiliationIds(relevantAffiliations.map((item) => item.id));
     }, []);
-    const handleSelect = (author) => {
+    const selectAuthor = (author) => {
         if (author.id === selection?.id) {
             return;
         }
         const values = valuesRef.current;
         setIsCreatingNewAuthor(false);
         if (values && selection) {
-            const normalizedSelection = normalize(selection);
-            const normalizedValues = normalize(values);
+            const normalizedSelection = (0, normalize_1.normalizeAuthor)(selection);
+            const normalizedValues = (0, normalize_1.normalizeAuthor)(values);
             const hasChanges = !(0, lodash_1.isEqual)(normalizedSelection, normalizedValues);
             if (hasChanges && !isDisableSave) {
                 setShowConfirmationDialog(true);
@@ -222,11 +126,10 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
     };
     const updateAffiliationSelection = (author) => {
-        const relevantAffiliations = affiliationItems.filter((item) => author.affiliations?.includes(item.id));
+        const relevantAffiliations = affiliations.filter((item) => author.affiliations?.includes(item.id));
         setSelectedAffiliations(relevantAffiliations);
-        setSelectedAffiliationIds(relevantAffiliations.map((item) => item.id));
     };
-    const handleClose = () => {
+    const close = () => {
         if (unSavedChanges) {
             if (isDisableSave) {
                 setShowRequiredFieldConfirmationDialog(true);
@@ -241,7 +144,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             setOpen(false);
         }
     };
-    const handleSave = () => {
+    const save = () => {
         if (!authorFormRef.current?.checkValidity()) {
             setShowConfirmationDialog(false);
             setTimeout(() => {
@@ -250,7 +153,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         else {
             if (valuesRef.current && selection) {
-                handleSaveAuthor(valuesRef.current);
+                saveAuthor(valuesRef.current);
             }
             if (nextAuthor) {
                 setSelection(nextAuthor);
@@ -267,12 +170,11 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             setShowConfirmationDialog(false);
         }
     };
-    const handleCancel = () => {
-        handleResetAuthor();
+    const cancel = () => {
+        resetAuthor();
         if (nextAuthor) {
-            const affiliations = nextAuthor.affiliations || [];
-            setSelectedAffiliationIds(affiliations);
-            setSelectedAffiliations(affiliationItems.filter((item) => affiliations.includes(item.id)));
+            const nextAuthorAffiliations = nextAuthor.affiliations || [];
+            setSelectedAffiliations(affiliations.filter((item) => nextAuthorAffiliations.includes(item.id)));
             setSelection(nextAuthor);
             setNextAuthor(null);
             setNewAuthor(false);
@@ -292,7 +194,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         setShowRequiredFieldConfirmationDialog(false);
         setShowAffiliationDrawer(false);
     };
-    const handleSaveAuthor = (values) => {
+    const saveAuthor = (values) => {
         if (!values || !selection) {
             return;
         }
@@ -316,7 +218,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             items: [author],
         });
     };
-    const handleMoveAuthor = (from, to, shift) => {
+    const moveAuthor = (0, react_1.useCallback)((from, to, shift) => {
         const copy = (0, lodash_1.cloneDeep)(authors);
         const order = copy.map((a, i) => {
             if (a.id === from.id) {
@@ -340,38 +242,23 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             type: 'set',
             state: copy,
         });
-    };
+    }, [authors, dispatchAuthors, onSaveAuthor]);
     const createNewAuthor = () => {
         const name = (0, json_schema_1.buildBibliographicName)({ given: '', family: '' });
-        const author = {
-            id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Contributor),
-            role: '',
-            affiliations: [],
-            bibliographicName: name,
-            email: '',
-            isCorresponding: false,
-            ORCIDIdentifier: '',
-            priority: authors.length,
-            isJointContributor: false,
-            userID: '',
-            invitationID: '',
-            corresp: [],
-            footnote: [],
-            prefix: '',
-        };
+        const author = createEmptyAuthor(name, authors.length);
         setIsSwitchingAuthor(!!selection);
         setSelectedAffiliations([]);
-        setSelectedAffiliationIds([]);
+        setSelectedCreditRoles([]);
         setSelection(author);
         setNewAuthor(true);
     };
-    const handleAddAuthor = () => {
+    const addAuthor = () => {
         const values = valuesRef.current;
         setIsSwitchingAuthor(!!selection);
         setIsCreatingNewAuthor(true);
         if (values &&
             selection &&
-            !(0, lodash_1.isEqual)(normalize(values), normalize(selection))) {
+            !(0, lodash_1.isEqual)((0, normalize_1.normalizeAuthor)(values), (0, normalize_1.normalizeAuthor)(selection))) {
             if (isDisableSave) {
                 setShowRequiredFieldConfirmationDialog(true);
             }
@@ -385,7 +272,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             setShowAffiliationDrawer(false);
         }
     };
-    const handleDeleteAuthor = () => {
+    const deleteAuthor = () => {
         if (!selection) {
             return;
         }
@@ -397,19 +284,10 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             item: selection,
         });
     };
-    const handleRemoveAffiliation = (affId) => {
-        if (!selection) {
-            return;
-        }
-        const newAffiliations = selectedAffiliationIds.filter((id) => id !== affId);
-        setSelectedAffiliationIds(newAffiliations);
-        setSelectedAffiliations(affiliationItems.filter((item) => newAffiliations.includes(item.id)));
-    };
-    const handleResetAuthor = () => {
+    const resetAuthor = () => {
         actionsRef.current?.reset();
-        const affiliations = selection?.affiliations || [];
-        setSelectedAffiliationIds(affiliations);
-        setSelectedAffiliations(affiliationItems.filter((item) => affiliations.includes(item.id)));
+        const selectedAffs = selection?.affiliations || [];
+        setSelectedAffiliations(affiliations.filter((item) => selectedAffs.includes(item.id)));
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
         setUnSavedChanges(false);
@@ -422,17 +300,12 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         setIsCreatingNewAuthor(false);
     };
-    const handleChangeAuthor = (values) => {
-        const normalized = (0, lodash_1.omit)(normalize(selection), 'priority');
-        const updatedValues = (0, lodash_1.omit)(normalize(values), 'priority');
+    const changeAuthor = (values) => {
+        const normalized = (0, lodash_1.omit)((0, normalize_1.normalizeAuthor)(selection), 'priority');
+        const updatedValues = (0, lodash_1.omit)((0, normalize_1.normalizeAuthor)(values), 'priority');
         const isSameAuthor = updatedValues.id === normalized.id;
         const hasChanges = !(0, lodash_1.isEqual)(updatedValues, normalized);
-        if (isSameAuthor && hasChanges) {
-            setUnSavedChanges(true);
-        }
-        else {
-            setUnSavedChanges(false);
-        }
+        setUnSavedChanges(isSameAuthor && hasChanges);
         valuesRef.current = { ...updatedValues, priority: values.priority };
         const { given, family } = values.bibliographicName;
         const { email, isCorresponding } = values;
@@ -450,51 +323,95 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         setEmailRequired(isCorresponding);
     };
-    const handleShowDeleteDialog = () => {
-        setShowDeleteDialog((prev) => !prev);
-    };
-    const handleAffiliationSelect = (affiliationId) => {
-        if (!selection) {
-            return;
-        }
-        const currentAffiliations = selectedAffiliationIds || [];
-        const isAlreadySelected = currentAffiliations.includes(affiliationId);
-        const newAffiliations = isAlreadySelected
-            ? currentAffiliations.filter((id) => id !== affiliationId)
-            : [...currentAffiliations, affiliationId];
-        setSelectedAffiliationIds(newAffiliations);
-        setSelectedAffiliations(affiliationItems.filter((item) => newAffiliations.includes(item.id)));
-    };
-    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
+    const { removeCreditRole, selectCreditRole, selectedCreditRoles, setSelectedCreditRoles, vocabTermItems, } = (0, useManageCredit_1.useManageCredit)(selection);
+    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => close(), shouldCloseOnOverlayClick: true },
         react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "authors-modal" },
             react_1.default.createElement(style_guide_1.ModalHeader, null,
-                react_1.default.createElement(style_guide_1.CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+                react_1.default.createElement(style_guide_1.CloseButton, { onClick: () => close(), "data-cy": "modal-close-button" })),
             react_1.default.createElement(StyledModalBody, null,
                 react_1.default.createElement(style_guide_1.ModalSidebar, { "data-cy": "authors-sidebar" },
                     react_1.default.createElement(StyledModalSidebarHeader, null,
                         react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Authors")),
                     react_1.default.createElement(StyledSidebarContent, null,
-                        react_1.default.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor, "data-active": isCreatingNewAuthor || newAuthor },
+                        react_1.default.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: addAuthor, "data-active": isCreatingNewAuthor || newAuthor },
                             react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
                             react_1.default.createElement(ActionTitle, null, "New Author")),
-                        react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: handleSelect, onDelete: handleShowDeleteDialog, moveAuthor: handleMoveAuthor, lastSavedAuthor: lastSavedAuthor }))),
-                react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(AuthorForms, null,
-                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleCancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
-                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleSave, onSecondary: handleCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }),
-                    react_1.default.createElement(ModalFormActions_1.ModalFormActions, { form: 'author-details-form', type: "author", onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newEntity: newAuthor ||
-                            (isCreatingNewAuthor &&
-                                !showConfirmationDialog &&
-                                !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
-                    react_1.default.createElement(FormLabel, null, "Details"),
-                    react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliationIds, authorFormRef: authorFormRef }),
-                    react_1.default.createElement(AuthorsSection, null,
-                        react_1.default.createElement(AuthorsHeader, null,
-                            react_1.default.createElement(AuthorsTitle, null, "Authors"),
-                            react_1.default.createElement(AffiliateButton, { onClick: () => setShowAffiliationDrawer(true), "data-cy": "affiliate-authors-button" },
-                                react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }),
-                                "Assign Institutions")),
-                        react_1.default.createElement(style_guide_1.SelectedItemsBox, { "data-cy": "author-affiliations", items: selectedAffiliations, onRemove: handleRemoveAffiliation, placeholder: "No institutions assigned" })),
-                    showAffiliationDrawer && (react_1.default.createElement(style_guide_1.Drawer, { items: affiliationItems, selectedIds: selectedAffiliationIds, title: "Authors", onSelect: handleAffiliationSelect, onBack: () => setShowAffiliationDrawer(false), width: "100%" })))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) })))),
-            react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
+                        react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
+                react_1.default.createElement(DrawerRelativeParent, null,
+                    react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(AuthorForms, null,
+                        react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
+                        react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }),
+                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
+                                (isCreatingNewAuthor &&
+                                    !showConfirmationDialog &&
+                                    !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
+                        react_1.default.createElement(FormLabel, null, "Details"),
+                        react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles }),
+                        react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: AffiliationDrawer_1.AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }) }),
+                        react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: CreditDrawer_1.CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
+                                id: r.vocabTerm,
+                                ...r,
+                            })), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (Credit)", buttonText: "Assign Credit Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: react_1.default.createElement(style_guide_1.AddRoleIcon, { width: 16, height: 16 }) }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) }))))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: close }))));
 };
 exports.AuthorsModal = AuthorsModal;
+function createEmptyAuthor(name, priority) {
+    return {
+        id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.contributor),
+        role: '',
+        affiliations: [],
+        bibliographicName: name,
+        email: '',
+        isCorresponding: false,
+        ORCIDIdentifier: '',
+        priority,
+        isJointContributor: false,
+        userID: '',
+        invitationID: '',
+        corresp: [],
+        footnote: [],
+        prefix: '',
+    };
+}
+const AddAuthorButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: 12px 8px 12px 12px;
+  cursor: pointer;
+  &[data-active='true'] {
+    background: ${(props) => props.theme.colors.background.fifth};
+    border: 1px solid ${(props) => props.theme.colors.border.primary};
+    border-left: 0;
+    border-right: 0;
+  }
+`;
+const ActionTitle = styled_components_1.default.div `
+  padding-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const FormLabel = styled_components_1.default.legend `
+  margin-bottom: 12px;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.xlarge} /
+    ${(props) => props.theme.font.lineHeight.large}
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.4px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const AuthorForms = styled_components_1.default.div `
+  padding-left: ${(props) => props.theme.grid.unit * 3}px;
+  padding-right: ${(props) => props.theme.grid.unit * 3}px;
+  margin-top: 20px;
+`;
+const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
+  padding: 0;
+`;
+const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
+  position: relative;
+  height: calc(90vh - 40px);
+`;
+const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
+  margin-bottom: 16px;
+`;
+const DrawerRelativeParent = styled_components_1.default.div `
+  position: relative;
+`;

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

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreditDrawer = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AuthorDetailsForm_1 = require("./AuthorDetailsForm");
+const CreditDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
+    return (react_1.default.createElement(style_guide_1.Drawer, { ...drawerProps },
+        react_1.default.createElement(TwoColumnContainer, null, items.map((item, i) => (react_1.default.createElement(TwoColumnCheckbox, { key: item.id },
+            react_1.default.createElement(style_guide_1.CheckboxLabel, null,
+                react_1.default.createElement(style_guide_1.CheckboxField, { id: 'credit-role-' + i, name: item.id, checked: selectedItems?.map((a) => a.id).includes(item.id), onChange: () => {
+                        onSelect(item.id);
+                    } }),
+                react_1.default.createElement(AuthorDetailsForm_1.LabelText, null, item.vocabTerm))))))));
+};
+exports.CreditDrawer = CreditDrawer;
+const TwoColumnContainer = (0, styled_components_1.default)(style_guide_1.DrawerItemsList) `
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    border-bottom: 1px solid #f0f0f0;
+    min-width: 100%;
+    padding-top: 16px;
+  }
+`;
+const TwoColumnCheckbox = (0, styled_components_1.default)(AuthorDetailsForm_1.CheckboxContainer) `
+  flex 1 0 50%;
+`;

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useManageAffiliations = exports.affiliationsReducer = void 0;
+const react_1 = require("react");
+const array_reducer_1 = require("../../lib/array-reducer");
+exports.affiliationsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
+const useManageAffiliations = (selection, $affiliations) => {
+    const [affiliations] = (0, react_1.useReducer)(exports.affiliationsReducer, $affiliations);
+    const [showAffiliationDrawer, setShowAffiliationDrawer] = (0, react_1.useState)(false);
+    const [selectedAffiliations, setSelectedAffiliations] = (0, react_1.useState)([]);
+    const removeAffiliation = (affId) => {
+        if (!selection) {
+            return;
+        }
+        const newAffiliations = selectedAffiliations
+            .map((a) => a.id)
+            .filter((id) => id !== affId);
+        setSelectedAffiliations(affiliations.filter((item) => newAffiliations.includes(item.id)));
+    };
+    const selectAffiliation = (affiliationId) => {
+        if (!selection) {
+            return;
+        }
+        const currentAffiliations = selectedAffiliations.map((a) => a.id);
+        const isAlreadySelected = currentAffiliations.includes(affiliationId);
+        const newAffiliations = isAlreadySelected
+            ? currentAffiliations.filter((id) => id !== affiliationId)
+            : [...currentAffiliations, affiliationId];
+        setSelectedAffiliations(affiliations.filter((item) => newAffiliations.includes(item.id)));
+    };
+    return {
+        showAffiliationDrawer,
+        setShowAffiliationDrawer,
+        selectedAffiliations,
+        setSelectedAffiliations,
+        removeAffiliation,
+        selectAffiliation,
+        affiliations,
+    };
+};
+exports.useManageAffiliations = useManageAffiliations;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useManageCredit = void 0;
+const transform_1 = require("@manuscripts/transform");
+const react_1 = require("react");
+const useManageCredit = (selection) => {
+    const vocabTermItems = (0, react_1.useMemo)(() => {
+        return Object.values(transform_1.CreditVocabTerm).map((c) => ({
+            vocabTerm: c,
+            id: c,
+        }));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setSelectedCreditRoles(selection?.creditRoles ? selection?.creditRoles : []);
+    }, [selection]);
+    const [selectedCreditRoles, setSelectedCreditRoles] = (0, react_1.useState)([]);
+    const selectCreditRole = (role) => {
+        setSelectedCreditRoles((prev) => {
+            const clear = prev.filter((t) => t.vocabTerm !== role);
+            if (clear.length !== prev.length) {
+                return clear;
+            }
+            const newTerm = vocabTermItems.find((t) => t.vocabTerm === role);
+            if (newTerm) {
+                return [...prev, { vocabTerm: newTerm.vocabTerm }];
+            }
+            return prev;
+        });
+    };
+    const removeCreditRole = (role) => {
+        setSelectedCreditRoles((prev) => {
+            return prev.filter((r) => r.vocabTerm !== role);
+        });
+    };
+    return {
+        removeCreditRole,
+        selectCreditRole,
+        selectedCreditRoles,
+        setSelectedCreditRoles,
+        vocabTermItems,
+    };
+};
+exports.useManageCredit = useManageCredit;

package/dist/cjs/components/form/FormFooter.js

@@ -13,6 +13,8 @@ const Footer = styled_components_1.default.div `
   height: 40px;
   box-shadow: 0px -2px 12px 0px rgba(216, 216, 216, 0.26);
   border-radius: 0px 0px 8px 8px;
+  position: relative;
+  z-index: 3;
 `;
 const RemoveButton = styled_components_1.default.button `
   background-color: #0d79d0;

package/dist/cjs/components/form/ModalFormActions.js

@@ -32,12 +32,12 @@ const StyledIconButton = (0, styled_components_1.default)(style_guide_1.IconButt
     margin-right: 4px;
   }
 `;
-const ModalFormActions = ({ type, form, onDelete, showDeleteDialog, handleShowDeleteDialog, newEntity, isDisableSave, }) => {
+const ModalFormActions = ({ type, form, onDelete, showingDeleteDialog, showDeleteDialog, newEntity, isDisableSave, }) => {
     return (react_1.default.createElement(ActionsContainer, { "data-cy": `${type}-action` },
-        react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showDeleteDialog, onPrimary: () => {
+        react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showingDeleteDialog, onPrimary: () => {
                 onDelete();
-                handleShowDeleteDialog();
-            }, onSecondary: handleShowDeleteDialog, type: ConfirmationDialog_1.DialogType.DELETE, entityType: type }),
+                showDeleteDialog();
+            }, onSecondary: showDeleteDialog, type: ConfirmationDialog_1.DialogType.DELETE, entityType: type }),
         react_1.default.createElement(StyledButtonGroup, null,
             react_1.default.createElement(StyledIconButton, { disabled: isDisableSave, type: "submit", form: form },
                 react_1.default.createElement(style_guide_1.PlusIcon, null),

package/dist/cjs/components/modal-drawer/GenericDrawer.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericDrawer = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const GenericDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
+    return (react_1.default.createElement(style_guide_1.Drawer, { ...drawerProps },
+        react_1.default.createElement(style_guide_1.DrawerItemsList, null, items.map((item) => (react_1.default.createElement(style_guide_1.DrawerListItem, { "data-cy": "item", key: item.id, selected: selectedItems?.map((a) => a.id).includes(item.id), onClick: () => onSelect(item.id) },
+            react_1.default.createElement(style_guide_1.DrawerIcon, null, selectedItems?.map((a) => a.id).includes(item.id) ? (react_1.default.createElement(style_guide_1.AddedIcon, { width: 22, height: 22 })) : (react_1.default.createElement(style_guide_1.AddIcon, { width: 22, height: 22 }))),
+            react_1.default.createElement(style_guide_1.DrawerLabelContainer, null,
+                react_1.default.createElement(style_guide_1.DrawerItemLabel, null, item.label))))))));
+};
+exports.GenericDrawer = GenericDrawer;