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

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

@@ -0,0 +1,75 @@
+"use strict";
+/*!
+ * © 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerSection = exports.DrawerSectionHeader = exports.AssignButton = exports.DrawerGroup = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(exports.DrawerSection, null,
+            react_1.default.createElement(exports.DrawerSectionHeader, null,
+                react_1.default.createElement(DrawerSectionTitle, null, title),
+                react_1.default.createElement(exports.AssignButton, { onClick: () => setShowDrawer(true), "data-cy": cy + 'assign-button' },
+                    Icon,
+                    buttonText)),
+            react_1.default.createElement(style_guide_1.SelectedItemsBox, { "data-cy": cy + '-selected-items', items: selectedItems.map((i) => ({
+                    id: String(i.id),
+                    label: String(i[labelField] ?? ''),
+                })), onRemove: removeItem, placeholder: `No ${title}s assigned` })),
+        showDrawer && (react_1.default.createElement(Drawer, { items: items, selectedItems: selectedItems, title: title, onSelect: onSelect, onBack: () => setShowDrawer(false), width: "100%" }))));
+}
+exports.DrawerGroup = DrawerGroup;
+const DrawerSectionTitle = 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};
+`;
+exports.AssignButton = 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;
+  }
+`;
+exports.DrawerSectionHeader = 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;
+`;
+exports.DrawerSection = 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};
+`;

package/dist/cjs/lib/normalize.js

@@ -0,0 +1,49 @@
+"use strict";
+/*!
+ * © 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkID = exports.normalizeAuthor = void 0;
+const transform_1 = require("@manuscripts/transform");
+const normalizeAuthor = (author) => {
+    const basic = {
+        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 || '',
+    };
+    if (author.creditRoles && Array.isArray(author.creditRoles)) {
+        basic.creditRoles = author.creditRoles;
+    }
+    return basic;
+};
+exports.normalizeAuthor = normalizeAuthor;
+const checkID = (attrs, nodeType) => {
+    return {
+        ...attrs,
+        id: attrs.id || (0, transform_1.generateNodeID)(transform_1.schema.nodes[nodeType]),
+    };
+};
+exports.checkID = checkID;

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.0.2';
+exports.VERSION = '3.0.3-LEAN-4579.1';
 exports.MATHJAX_VERSION = '3.2.2';

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

@@ -1,102 +1,30 @@
-import { generateID, ObjectTypes } from '@manuscripts/json-schema';
-import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, Drawer, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SelectedItemsBox, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, 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';
 import styled from 'styled-components';
 import { authorComparator, } from '../../lib/authors';
-import { affiliationsReducer, authorsReducer } from '../authors/AuthorsModal';
+import { checkID } from '../../lib/normalize';
+import { authorsReducer } from '../authors/AuthorsModal';
+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 { GenericDrawer } from '../modal-drawer/GenericDrawer';
+import { DrawerGroup } from '../modal-drawer/GenericDrawerGroup';
 import { AffiliationForm } from './AffiliationForm';
 import { AffiliationList } from './AffiliationList';
-const StyledSidebarContent = styled(SidebarContent) `
-  padding: 0;
-`;
-const AddAffiliationButton = 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 AffiliationForms = 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 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-top: 8px;
-  margin-bottom: 16px;
-`;
-const normalize = (affiliation) => ({
-    id: affiliation.id || generateID(ObjectTypes.Affiliation),
-    institution: affiliation.institution,
-    department: affiliation.department,
-    addressLine1: affiliation.addressLine1,
-    addressLine2: affiliation.addressLine2,
-    addressLine3: affiliation.addressLine3,
-    postCode: affiliation.postCode,
-    country: affiliation.country,
-    county: affiliation.county,
-    city: affiliation.city,
-    email: affiliation.email,
-    priority: affiliation.priority,
-});
+function makeAuthorItems(authors) {
+    return authors.map((author) => ({
+        id: author.id,
+        label: `${author.bibliographicName.given} ${author.bibliographicName.family}`,
+    }));
+}
 export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
     const [isOpen, setIsOpen] = useState(true);
     const [selection, setSelection] = useState(affiliation);
-    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    const [showingDeleteDialog, setShowDeleteDialog] = useState(false);
     const valuesRef = useRef();
     const actionsRef = useRef();
     const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
@@ -128,7 +56,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
     }, []);
     const handleClose = () => {
         const values = valuesRef.current;
-        const hasAffiliationChanges = selection && !isEqual(values, normalize(selection));
+        const hasAffiliationChanges = selection && !isEqual(values, checkID(selection, 'affiliation'));
         const originalAuthors = selection
             ? affiliationAuthorMap.get(selection.id) ?? []
             : [];
@@ -150,7 +78,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
     };
     const handleSelect = (affiliation) => {
         const values = valuesRef.current;
-        const hasAffiliationChanges = selection && !isEqual(values, normalize(selection));
+        const hasAffiliationChanges = selection && !isEqual(values, checkID(selection, 'affiliation'));
         const originalAuthors = selection
             ? affiliationAuthorMap.get(selection.id) ?? []
             : [];
@@ -188,7 +116,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
         }
         setIsDisableSave(true);
         const affiliation = {
-            ...normalize(selection),
+            ...checkID(selection, 'affiliation'),
             ...values,
         };
         onSaveAffiliation(affiliation);
@@ -235,7 +163,8 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             return;
         }
         const isInstitutionEmpty = !values.institution?.trim();
-        const hasAffiliationChanges = selection && !isEqual(normalize(values), normalize(selection));
+        const hasAffiliationChanges = selection &&
+            !isEqual(checkID(values, 'affiliation'), checkID(selection, 'affiliation'));
         const originalAuthors = affiliationAuthorMap.get(selection.id) ?? [];
         const hasAuthorChanges = selection && !isEqual(originalAuthors.sort(), selectedAuthorIds.sort());
         const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
@@ -265,7 +194,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
         setSelectedAuthorIds([]);
         setSelection(undefined);
     };
-    const handleAuthorSelect = (authorId) => {
+    const selectAuthor = (authorId) => {
         if (!selection) {
             return;
         }
@@ -273,17 +202,13 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             ? selectedAuthorIds.filter((id) => id !== authorId)
             : [...selectedAuthorIds, authorId];
         setSelectedAuthorIds(newSelectedAuthorIds);
-        const hasAffiliationChanges = !isEqual(valuesRef.current, normalize(selection));
+        const hasAffiliationChanges = !isEqual(valuesRef.current, checkID(selection, 'affiliation'));
         const originalAuthors = affiliationAuthorMap.get(selection.id) ?? [];
         const hasAuthorChanges = !isEqual(originalAuthors.sort(), newSelectedAuthorIds.sort());
         const isInstitutionEmpty = !valuesRef.current?.institution?.trim();
         const shouldEnableSave = !isInstitutionEmpty && (hasAffiliationChanges || hasAuthorChanges);
         setIsDisableSave(!shouldEnableSave);
     };
-    const authorItems = authors.map((author) => ({
-        id: author.id,
-        label: `${author.bibliographicName.given} ${author.bibliographicName.family}`,
-    }));
     const selectedAuthors = selectedAuthorIds
         .map((authorId) => {
         const author = authors.find((a) => a.id === authorId);
@@ -299,23 +224,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
         const values = valuesRef.current;
         const hasChanges = !isDisableSave;
         const isInstitutionEmpty = values?.institution?.trim() === '';
-        const emptyAffiliation = {
-            id: generateID(ObjectTypes.Affiliation),
-            institution: '',
-            department: '',
-            addressLine1: '',
-            addressLine2: '',
-            addressLine3: '',
-            postCode: '',
-            country: '',
-            county: '',
-            city: '',
-            email: {
-                href: '',
-                text: '',
-            },
-            priority: affiliations.length,
-        };
+        const emptyAffiliation = createEmptyAffiliation(affiliations.length);
         if (hasChanges) {
             setPendingAction('new');
             if (isInstitutionEmpty) {
@@ -354,7 +263,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
                 .filter((author) => author.affiliations?.some((aff) => aff === pendingSelection.id))
                 .map((author) => author.id);
             setSelectedAuthorIds(affiliatedAuthorIds);
-            valuesRef.current = normalize(pendingSelection);
+            valuesRef.current = checkID(pendingSelection, 'affiliation');
             setIsDisableSave(true);
             setAffiliationAuthorMap((prevMap) => {
                 const newMap = new Map(prevMap);
@@ -392,7 +301,7 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             setSelectedAuthorIds([]);
         }
         if (pendingSelection) {
-            valuesRef.current = normalize(pendingSelection);
+            valuesRef.current = checkID(pendingSelection, 'affiliation');
         }
         else {
             valuesRef.current = undefined;
@@ -417,19 +326,63 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
                             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(AffiliationForms, null,
-                    React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
-                    React.createElement(AffiliationForm, { values: normalize(selection), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef }),
+                    React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
+                    React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef }),
                     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(AuthorsSection, null,
-                        React.createElement(AuthorsHeader, null,
-                            React.createElement(AuthorsTitle, null, "Authors"),
-                            React.createElement(AffiliateButton, { onClick: () => setShowAuthorDrawer(true), "data-cy": "affiliate-authors-button" },
-                                React.createElement(AddUserIcon, { width: 16, height: 16 }),
-                                "Affiliate Authors")),
-                        React.createElement(SelectedItemsBox, { "data-cy": "affiliation-authors", items: selectedAuthors, onRemove: (id) => {
-                                setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
-                            }, placeholder: "No authors assigned" })),
-                    showAuthorDrawer && (React.createElement(Drawer, { items: authorItems, selectedIds: selectedAuthorIds, title: "Authors", onSelect: handleAuthorSelect, onBack: () => setShowAuthorDrawer(false), width: "100%" })))) : (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(DrawerGroup, { Drawer: GenericDrawer, removeItem: (id) => {
+                            setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
+                        }, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: React.createElement(AddUserIcon, { width: 16, height: 16 }) }))) : (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 }))));
 };
+function createEmptyAffiliation(priority) {
+    return {
+        id: generateNodeID(schema.nodes.affiliation),
+        institution: '',
+        department: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        postCode: '',
+        country: '',
+        county: '',
+        city: '',
+        email: {
+            href: '',
+            text: '',
+        },
+        priority: priority,
+    };
+}
+const StyledSidebarContent = styled(SidebarContent) `
+  padding: 0;
+`;
+const AddAffiliationButton = 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 AffiliationForms = 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 StyledModalBody = styled(ModalBody) `
+  position: relative;
+  height: calc(90vh - 40px);
+`;
+const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
+  margin-top: 8px;
+  margin-bottom: 16px;
+`;

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

@@ -0,0 +1,17 @@
+import { AddedIcon, AddIcon, Drawer, DrawerIcon, DrawerItemLabel, DrawerItemMeta, DrawerItemsList, DrawerLabelContainer, DrawerListItem, } from '@manuscripts/style-guide';
+import React from 'react';
+export const AffiliationsDrawer = ({ 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.institution),
+                React.createElement(DrawerItemMeta, null,
+                    item.city && (React.createElement(React.Fragment, null,
+                        item.city,
+                        item.county || item.country ? ', ' : '')),
+                    item.county && (React.createElement(React.Fragment, null,
+                        item.county,
+                        item.country ? ', ' : '')),
+                    item.country && React.createElement(React.Fragment, null, item.country)))))))));
+};

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

@@ -1,5 +1,5 @@
 /*!
- * © 2019 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,18 +41,23 @@ const TextFieldWithError = styled(TextField) `
     color: ${(props) => props.theme.colors.text.error};
   }
 `;
-const CheckboxContainer = styled.div `
+export const CheckboxContainer = styled.div `
   display: flex;
   align-items: center;
   gap: 32px;
 `;
-export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, authorFormRef, }) => {
+export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, selectedCreditRoles, authorFormRef, }) => {
     const formRef = useRef(null);
     useEffect(() => {
         if (selectedAffiliations && formRef.current) {
             formRef.current.setFieldValue('affiliations', selectedAffiliations);
         }
     }, [selectedAffiliations]);
+    useEffect(() => {
+        if (selectedCreditRoles && formRef.current) {
+            formRef.current.setFieldValue('creditRoles', selectedCreditRoles);
+        }
+    }, [selectedCreditRoles]);
     if (actionsRef && !actionsRef.current) {
         actionsRef.current = {
             reset: () => {
@@ -81,9 +86,6 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
                 React.createElement(OrcidContainer, null,
                     React.createElement(TextFieldLabel, null,
                         React.createElement(LabelText, null, "ORCID"),
-                        React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{4}", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field }))))),
-                React.createElement(Field, { name: "affiliations", type: "hidden" }, (props) => {
-                    return (React.createElement(TextField, { type: "hidden", ...props.field, value: selectedAffiliations || [] }));
-                }))));
+                        React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{4}", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field }))))))));
     }));
 };