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

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

@@ -1,5 +1,5 @@
 /*!
- * © 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.
@@ -13,113 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { buildBibliographicName, generateID, ObjectTypes, } from '@manuscripts/json-schema';
-import { AddIcon, AddInstitutionIcon, AuthorPlaceholderIcon, CloseButton, Drawer, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SelectedItemsBox, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { buildBibliographicName, } from '@manuscripts/json-schema';
+import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { generateNodeID, schema } from '@manuscripts/transform';
 import { cloneDeep, isEqual, omit } from 'lodash';
-import React, { useEffect, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
 import styled from 'styled-components';
 import { arrayReducer } from '../../lib/array-reducer';
 import { authorComparator, } from '../../lib/authors';
+import { normalizeAuthor } from '../../lib/normalize';
 import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
 import FormFooter from '../form/FormFooter';
 import { FormPlaceholder } from '../form/FormPlaceholder';
 import { ModalFormActions } from '../form/ModalFormActions';
+import { DrawerGroup } from '../modal-drawer/GenericDrawerGroup';
+import { AffiliationsDrawer } from './AffiliationDrawer';
 import { AuthorDetailsForm } from './AuthorDetailsForm';
 import { AuthorList } from './AuthorList';
-const AddAuthorButton = styled.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.div `
-  padding-left: ${(props) => props.theme.grid.unit * 2}px;
-`;
-const FormLabel = styled.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.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 = styled(SidebarContent) `
-  padding: 0;
-`;
-const AuthorsSection = styled.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.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.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.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 = styled(ModalBody) `
-  position: relative;
-  height: calc(90vh - 40px);
-`;
-const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
-  margin-bottom: 16px;
-`;
+import { CreditDrawer } from './CreditDrawer';
+import { useManageAffiliations } from './useManageAffiliations';
+import { useManageCredit } from './useManageCredit';
 export const authorsReducer = arrayReducer((a, b) => a.id === b.id);
-export const affiliationsReducer = 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 || '',
-});
 export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, }) => {
     const [isOpen, setOpen] = useState(true);
     const [isDisableSave, setDisableSave] = useState(true);
@@ -127,48 +41,38 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
     const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
     const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = useState(false);
     const [lastSavedAuthor, setLastSavedAuthor] = useState(null);
-    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    const [showingDeleteDialog, setShowDeleteDialog] = useState(false);
     const [newAuthor, setNewAuthor] = useState(false);
     const [unSavedChanges, setUnSavedChanges] = useState(false);
     const [nextAuthor, setNextAuthor] = useState(null);
     const [isSwitchingAuthor, setIsSwitchingAuthor] = useState(false);
     const [isCreatingNewAuthor, setIsCreatingNewAuthor] = useState(false);
-    const [showAffiliationDrawer, setShowAffiliationDrawer] = useState(false);
-    const [selectedAffiliations, setSelectedAffiliations] = useState([]);
+    const [showCreditDrawer, setShowCreditDrawer] = useState(false);
     const valuesRef = useRef();
     const actionsRef = useRef();
     const authorFormRef = useRef(null);
     const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
-    const [affiliations] = useReducer(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] = useState([]);
     useEffect(() => {
         if (addNewAuthor) {
-            handleAddAuthor();
+            addAuthor();
         }
     }, [addNewAuthor]);
     const [selection, setSelection] = useState(author);
+    const { showAffiliationDrawer, setShowAffiliationDrawer, selectedAffiliations, setSelectedAffiliations, removeAffiliation, selectAffiliation, affiliations, } = useManageAffiliations(selection, $affiliations);
     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 = normalizeAuthor(selection);
+            const normalizedValues = normalizeAuthor(values);
             const hasChanges = !isEqual(normalizedSelection, normalizedValues);
             if (hasChanges && !isDisableSave) {
                 setShowConfirmationDialog(true);
@@ -193,11 +97,10 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
     };
     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);
@@ -212,7 +115,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             setOpen(false);
         }
     };
-    const handleSave = () => {
+    const save = () => {
         if (!authorFormRef.current?.checkValidity()) {
             setShowConfirmationDialog(false);
             setTimeout(() => {
@@ -221,7 +124,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         else {
             if (valuesRef.current && selection) {
-                handleSaveAuthor(valuesRef.current);
+                saveAuthor(valuesRef.current);
             }
             if (nextAuthor) {
                 setSelection(nextAuthor);
@@ -238,12 +141,11 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             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);
@@ -263,7 +165,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         setShowRequiredFieldConfirmationDialog(false);
         setShowAffiliationDrawer(false);
     };
-    const handleSaveAuthor = (values) => {
+    const saveAuthor = (values) => {
         if (!values || !selection) {
             return;
         }
@@ -287,7 +189,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             items: [author],
         });
     };
-    const handleMoveAuthor = (from, to, shift) => {
+    const moveAuthor = useCallback((from, to, shift) => {
         const copy = cloneDeep(authors);
         const order = copy.map((a, i) => {
             if (a.id === from.id) {
@@ -311,38 +213,23 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             type: 'set',
             state: copy,
         });
-    };
+    }, [authors, dispatchAuthors, onSaveAuthor]);
     const createNewAuthor = () => {
         const name = buildBibliographicName({ given: '', family: '' });
-        const author = {
-            id: generateID(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 &&
-            !isEqual(normalize(values), normalize(selection))) {
+            !isEqual(normalizeAuthor(values), normalizeAuthor(selection))) {
             if (isDisableSave) {
                 setShowRequiredFieldConfirmationDialog(true);
             }
@@ -356,7 +243,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             setShowAffiliationDrawer(false);
         }
     };
-    const handleDeleteAuthor = () => {
+    const deleteAuthor = () => {
         if (!selection) {
             return;
         }
@@ -368,19 +255,10 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             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);
@@ -393,17 +271,12 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         setIsCreatingNewAuthor(false);
     };
-    const handleChangeAuthor = (values) => {
-        const normalized = omit(normalize(selection), 'priority');
-        const updatedValues = omit(normalize(values), 'priority');
+    const changeAuthor = (values) => {
+        const normalized = omit(normalizeAuthor(selection), 'priority');
+        const updatedValues = omit(normalizeAuthor(values), 'priority');
         const isSameAuthor = updatedValues.id === normalized.id;
         const hasChanges = !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;
@@ -421,50 +294,94 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         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.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
+    const { removeCreditRole, selectCreditRole, selectedCreditRoles, setSelectedCreditRoles, vocabTermItems, } = useManageCredit(selection);
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => close(), shouldCloseOnOverlayClick: true },
         React.createElement(ModalContainer, { "data-cy": "authors-modal" },
             React.createElement(ModalHeader, null,
-                React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+                React.createElement(CloseButton, { onClick: () => close(), "data-cy": "modal-close-button" })),
             React.createElement(StyledModalBody, null,
                 React.createElement(ModalSidebar, { "data-cy": "authors-sidebar" },
                     React.createElement(StyledModalSidebarHeader, null,
                         React.createElement(ModalSidebarTitle, null, "Authors")),
                     React.createElement(StyledSidebarContent, null,
-                        React.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor, "data-active": isCreatingNewAuthor || newAuthor },
+                        React.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: addAuthor, "data-active": isCreatingNewAuthor || newAuthor },
                             React.createElement(AddIcon, { width: 18, height: 18 }),
                             React.createElement(ActionTitle, null, "New Author")),
-                        React.createElement(AuthorList, { author: selection, authors: authors, onSelect: handleSelect, onDelete: handleShowDeleteDialog, moveAuthor: handleMoveAuthor, lastSavedAuthor: lastSavedAuthor }))),
-                React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(AuthorForms, null,
-                    React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleCancel, type: DialogType.REQUIRED, entityType: "author" }),
-                    React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleSave, onSecondary: handleCancel, type: DialogType.SAVE, entityType: "author" }),
-                    React.createElement(ModalFormActions, { form: 'author-details-form', type: "author", onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newEntity: newAuthor ||
-                            (isCreatingNewAuthor &&
-                                !showConfirmationDialog &&
-                                !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
-                    React.createElement(FormLabel, null, "Details"),
-                    React.createElement(AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliationIds, authorFormRef: authorFormRef }),
-                    React.createElement(AuthorsSection, null,
-                        React.createElement(AuthorsHeader, null,
-                            React.createElement(AuthorsTitle, null, "Authors"),
-                            React.createElement(AffiliateButton, { onClick: () => setShowAffiliationDrawer(true), "data-cy": "affiliate-authors-button" },
-                                React.createElement(AddInstitutionIcon, { width: 16, height: 16 }),
-                                "Assign Institutions")),
-                        React.createElement(SelectedItemsBox, { "data-cy": "author-affiliations", items: selectedAffiliations, onRemove: handleRemoveAffiliation, placeholder: "No institutions assigned" })),
-                    showAffiliationDrawer && (React.createElement(Drawer, { items: affiliationItems, selectedIds: selectedAffiliationIds, title: "Authors", onSelect: handleAffiliationSelect, onBack: () => setShowAffiliationDrawer(false), width: "100%" })))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
-            React.createElement(FormFooter, { onCancel: handleClose }))));
+                        React.createElement(AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
+                React.createElement(DrawerRelativeParent, null,
+                    React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(AuthorForms, null,
+                        React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: DialogType.REQUIRED, entityType: "author" }),
+                        React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: DialogType.SAVE, entityType: "author" }),
+                        React.createElement(ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
+                                (isCreatingNewAuthor &&
+                                    !showConfirmationDialog &&
+                                    !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
+                        React.createElement(FormLabel, null, "Details"),
+                        React.createElement(AuthorDetailsForm, { values: normalizeAuthor(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles }),
+                        React.createElement(DrawerGroup, { Drawer: AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: React.createElement(AddInstitutionIcon, { width: 16, height: 16 }) }),
+                        React.createElement(DrawerGroup, { Drawer: 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.createElement(AddRoleIcon, { width: 16, height: 16 }) }))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) }))))),
+            React.createElement(FormFooter, { onCancel: close }))));
 };
+function createEmptyAuthor(name, priority) {
+    return {
+        id: generateNodeID(schema.nodes.contributor),
+        role: '',
+        affiliations: [],
+        bibliographicName: name,
+        email: '',
+        isCorresponding: false,
+        ORCIDIdentifier: '',
+        priority,
+        isJointContributor: false,
+        userID: '',
+        invitationID: '',
+        corresp: [],
+        footnote: [],
+        prefix: '',
+    };
+}
+const AddAuthorButton = styled.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.div `
+  padding-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const FormLabel = styled.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.div `
+  padding-left: ${(props) => props.theme.grid.unit * 3}px;
+  padding-right: ${(props) => props.theme.grid.unit * 3}px;
+  margin-top: 20px;
+`;
+const StyledSidebarContent = styled(SidebarContent) `
+  padding: 0;
+`;
+const StyledModalBody = styled(ModalBody) `
+  position: relative;
+  height: calc(90vh - 40px);
+`;
+const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
+  margin-bottom: 16px;
+`;
+const DrawerRelativeParent = styled.div `
+  position: relative;
+`;

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

@@ -0,0 +1,30 @@
+import { CheckboxField, CheckboxLabel, Drawer, DrawerItemsList, } from '@manuscripts/style-guide';
+import React from 'react';
+import styled from 'styled-components';
+import { CheckboxContainer, LabelText } from './AuthorDetailsForm';
+export const CreditDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
+    return (React.createElement(Drawer, { ...drawerProps },
+        React.createElement(TwoColumnContainer, null, items.map((item, i) => (React.createElement(TwoColumnCheckbox, { key: item.id },
+            React.createElement(CheckboxLabel, null,
+                React.createElement(CheckboxField, { id: 'credit-role-' + i, name: item.id, checked: selectedItems?.map((a) => a.id).includes(item.id), onChange: () => {
+                        onSelect(item.id);
+                    } }),
+                React.createElement(LabelText, null, item.vocabTerm))))))));
+};
+const TwoColumnContainer = styled(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 = styled(CheckboxContainer) `
+  flex 1 0 50%;
+`;

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

@@ -0,0 +1,37 @@
+import { useReducer, useState } from 'react';
+import { arrayReducer } from '../../lib/array-reducer';
+export const affiliationsReducer = arrayReducer((a, b) => a.id === b.id);
+export const useManageAffiliations = (selection, $affiliations) => {
+    const [affiliations] = useReducer(affiliationsReducer, $affiliations);
+    const [showAffiliationDrawer, setShowAffiliationDrawer] = useState(false);
+    const [selectedAffiliations, setSelectedAffiliations] = 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,
+    };
+};

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

@@ -0,0 +1,39 @@
+import { CreditVocabTerm } from '@manuscripts/transform';
+import { useEffect, useMemo, useState } from 'react';
+export const useManageCredit = (selection) => {
+    const vocabTermItems = useMemo(() => {
+        return Object.values(CreditVocabTerm).map((c) => ({
+            vocabTerm: c,
+            id: c,
+        }));
+    }, []);
+    useEffect(() => {
+        setSelectedCreditRoles(selection?.creditRoles ? selection?.creditRoles : []);
+    }, [selection]);
+    const [selectedCreditRoles, setSelectedCreditRoles] = 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,
+    };
+};

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

@@ -8,6 +8,8 @@ const Footer = styled.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.button `
   background-color: #0d79d0;

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

@@ -26,12 +26,12 @@ const StyledIconButton = styled(IconButton) `
     margin-right: 4px;
   }
 `;
-export const ModalFormActions = ({ type, form, onDelete, showDeleteDialog, handleShowDeleteDialog, newEntity, isDisableSave, }) => {
+export const ModalFormActions = ({ type, form, onDelete, showingDeleteDialog, showDeleteDialog, newEntity, isDisableSave, }) => {
     return (React.createElement(ActionsContainer, { "data-cy": `${type}-action` },
-        React.createElement(ConfirmationDialog, { isOpen: showDeleteDialog, onPrimary: () => {
+        React.createElement(ConfirmationDialog, { isOpen: showingDeleteDialog, onPrimary: () => {
                 onDelete();
-                handleShowDeleteDialog();
-            }, onSecondary: handleShowDeleteDialog, type: DialogType.DELETE, entityType: type }),
+                showDeleteDialog();
+            }, onSecondary: showDeleteDialog, type: DialogType.DELETE, entityType: type }),
         React.createElement(StyledButtonGroup, null,
             React.createElement(StyledIconButton, { disabled: isDisableSave, type: "submit", form: form },
                 React.createElement(PlusIcon, null),

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

@@ -0,0 +1,9 @@
+import { AddedIcon, AddIcon, Drawer, DrawerIcon, DrawerItemLabel, DrawerItemsList, DrawerLabelContainer, DrawerListItem, } from '@manuscripts/style-guide';
+import React from 'react';
+export const GenericDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
+    return (React.createElement(Drawer, { ...drawerProps },
+        React.createElement(DrawerItemsList, null, items.map((item) => (React.createElement(DrawerListItem, { "data-cy": "item", key: item.id, selected: selectedItems?.map((a) => a.id).includes(item.id), onClick: () => onSelect(item.id) },
+            React.createElement(DrawerIcon, null, selectedItems?.map((a) => a.id).includes(item.id) ? (React.createElement(AddedIcon, { width: 22, height: 22 })) : (React.createElement(AddIcon, { width: 22, height: 22 }))),
+            React.createElement(DrawerLabelContainer, null,
+                React.createElement(DrawerItemLabel, null, item.label))))))));
+};