@manuscripts/body-editor 3.12.16 → 3.12.19

package/dist/cjs/components/authors-affiliations/GenericPanel.js

@@ -0,0 +1,136 @@
+"use strict";
+/*!
+ * © 2026 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = exports.GenericPanel = exports.ListItems = void 0;
+exports.useListSelectedIds = useListSelectedIds;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ListItems = style_guide_1.DrawerItemsList;
+const Panel = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const PanelHeader = styled_components_1.default.div `
+  display: flex;
+  align-items: flex-start;
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`;
+const PanelTitle = styled_components_1.default.span `
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: -0.37px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const PanelCreateButton = (0, styled_components_1.default)(style_guide_1.IconButton) `
+  color: #0d79d0;
+  font-size: 14px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1;
+  width: auto;
+  height: 24px;
+  margin-left: auto;
+  svg {
+    margin-right: 4px;
+  }
+`;
+const PanelEmpty = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: ${(props) => props.theme.grid.unit * 20}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`;
+const PanelEmptyIcon = styled_components_1.default.div `
+  width: 120px;
+  height: 120px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const PanelEmptyText = styled_components_1.default.p `
+  margin: 0;
+  font-size: 18px;
+  line-height: 24px;
+  text-align: center;
+  letter-spacing: -0.369px;
+`;
+const GenericPanel = ({ title, createLabel, onCreate, createDataCy, emptyDataCy, isEmpty, emptyIcon, emptyMessage, children, }) => (react_1.default.createElement(Panel, null,
+    react_1.default.createElement(PanelHeader, null,
+        react_1.default.createElement(PanelTitle, null, title),
+        react_1.default.createElement(PanelCreateButton, { onClick: onCreate, "data-cy": createDataCy },
+            react_1.default.createElement(style_guide_1.PlusIcon, null),
+            createLabel)),
+    isEmpty ? (react_1.default.createElement(PanelEmpty, { "data-cy": emptyDataCy },
+        react_1.default.createElement(PanelEmptyIcon, { "aria-hidden": true }, emptyIcon),
+        react_1.default.createElement(PanelEmptyText, null, emptyMessage))) : (children)));
+exports.GenericPanel = GenericPanel;
+const ListItem = ({ selected, onClick, primary, secondary, }) => (react_1.default.createElement(style_guide_1.DrawerListItem, { "data-cy": "item", selected: selected, onClick: onClick },
+    react_1.default.createElement(style_guide_1.DrawerIcon, null, selected ? (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, primary),
+        secondary != null && secondary !== '' ? (react_1.default.createElement(style_guide_1.DrawerItemMeta, null, secondary)) : null)));
+exports.ListItem = ListItem;
+function useListSelectedIds(selectedItems) {
+    return (0, react_1.useMemo)(() => new Set(selectedItems.map((x) => x.id)), [selectedItems]);
+}

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

@@ -35,15 +35,21 @@ const StyledIconButton = (0, styled_components_1.default)(style_guide_1.IconButt
     margin-right: 4px;
   }
 `;
-const ModalFormActions = ({ type, form, onDelete, showingDeleteDialog, showDeleteDialog, newEntity, isDisableSave, }) => {
+const ModalFormActions = ({ type, form, onDelete, showingDeleteDialog, showDeleteDialog, newEntity, isDisableSave, onSubmitForm, }) => {
+    const saveButton = onSubmitForm ? (react_1.default.createElement(StyledIconButton, { disabled: isDisableSave, type: "button", onClick: () => {
+            if (!isDisableSave) {
+                void onSubmitForm();
+            }
+        } },
+        react_1.default.createElement(style_guide_1.PlusIcon, null),
+        newEntity ? 'Save Details' : 'Update Details')) : (react_1.default.createElement(StyledIconButton, { disabled: isDisableSave, type: "submit", form: form },
+        react_1.default.createElement(style_guide_1.PlusIcon, null),
+        newEntity ? 'Save Details' : 'Update Details'));
     return (react_1.default.createElement(ActionsContainer, { "data-cy": `${type}-action` },
         react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showingDeleteDialog, onPrimary: () => {
                 onDelete();
                 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),
-                newEntity ? 'Save Details' : 'Update Details'))));
+        react_1.default.createElement(StyledButtonGroup, null, saveButton)));
 };
 exports.ModalFormActions = ModalFormActions;

package/dist/cjs/components/references/ReferenceForm/ReferenceForm.js

@@ -153,8 +153,8 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                             react_1.default.createElement(style_guide_1.AddAuthorIcon, { height: 17, width: 17 })),
                         react_1.default.createElement("div", null, formik.values.editor?.map((editor, index) => (react_1.default.createElement(PersonDropDown_1.PersonDropDown, { key: index, index: index, person: editor, isNew: newEditorIndex === index, remove: remove, onChange: formik.handleChange, type: "editor" })))))) })),
                 (0, utils_1.shouldRenderField)('issued', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "issued['date-parts'][0][0]" }, "Issued (Year)"),
-                    react_1.default.createElement(style_guide_1.YearField, { name: "issued['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
+                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "issued-year-field" }, "Issued (Year)"),
+                    react_1.default.createElement(style_guide_1.YearField, { name: "issued['date-parts'][0][0]", id: "issued-year-field", type: 'number', step: 1, onChange: (event) => {
                             const { value } = event.target;
                             if (value) {
                                 if (formik.values.issued) {

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.12.16';
+exports.VERSION = '3.12.19';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/affiliations.js

@@ -23,7 +23,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
-const AffiliationsModal_1 = require("../components/affiliations/AffiliationsModal");
+const AuthorsAndAffiliationsModals_1 = require("../components/authors-affiliations/AuthorsAndAffiliationsModals");
 const icons_1 = require("../icons");
 const authors_1 = require("../lib/authors");
 const comments_1 = require("../lib/comments");
@@ -58,22 +58,16 @@ class AffiliationsView extends block_view_1.default {
         };
         this.handleEdit = (id, addNew) => {
             this.props.popper.destroy();
-            const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
             const affiliations = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.affiliation);
-            const affiliation = id
-                ? affiliations.filter((a) => a.id === id)[0]
-                : undefined;
+            const affiliation = id ? affiliations.find((a) => a.id === id) : undefined;
             const componentProps = {
+                initialModal: 'affiliations',
+                view: this.view,
                 affiliation,
-                authors: contributors,
-                affiliations,
-                onSaveAffiliation: (affiliation) => (0, AffiliationsModal_1.handleSaveAffiliation)(this.view, affiliation, this.getPos()),
-                onDeleteAffiliation: (affiliation) => (0, AffiliationsModal_1.handleDeleteAffiliation)(this.view, affiliation),
-                onUpdateAuthors: (authors) => (0, AffiliationsModal_1.handleUpdateAuthors)(this.view, authors),
                 addNewAffiliation: addNew,
             };
             this.popper?.remove();
-            this.popper = (0, ReactSubView_1.default)(this.props, AffiliationsModal_1.AffiliationsModal, componentProps, this.node, this.getPos, this.view);
+            this.popper = (0, ReactSubView_1.default)(this.props, AuthorsAndAffiliationsModals_1.AuthorsAndAffiliationsModals, componentProps, this.node, this.getPos, this.view);
             this.container.appendChild(this.popper);
         };
         this.showGroupContextMenu = () => {

package/dist/cjs/views/contributors.js

@@ -23,7 +23,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
-const AuthorsModal_1 = require("../components/authors/AuthorsModal");
+const AuthorsAndAffiliationsModals_1 = require("../components/authors-affiliations/AuthorsAndAffiliationsModals");
 const authors_1 = require("../lib/authors");
 const comments_1 = require("../lib/comments");
 const navigation_utils_1 = require("../lib/navigation-utils");
@@ -216,18 +216,15 @@ class ContributorsView extends block_view_1.default {
         this.handleEdit = (id, addNew) => {
             this.props.popper.destroy();
             const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
-            const affiliations = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.affiliation);
             const author = id ? contributors.filter((a) => a.id === id)[0] : undefined;
             const componentProps = {
+                initialModal: 'authors',
+                view: this.view,
                 author,
-                authors: contributors,
-                affiliations,
-                onSaveAuthor: (contributor) => (0, AuthorsModal_1.handleSaveContributor)(this.view, contributor, this.getPos()),
-                onDeleteAuthor: (contributor) => (0, AuthorsModal_1.handleDeleteContributor)(this.view, contributor),
                 addNewAuthor: addNew,
             };
             this.popper?.remove();
-            this.popper = (0, ReactSubView_1.default)(this.props, AuthorsModal_1.AuthorsModal, componentProps, this.node, this.getPos, this.view);
+            this.popper = (0, ReactSubView_1.default)(this.props, AuthorsAndAffiliationsModals_1.AuthorsAndAffiliationsModals, componentProps, this.node, this.getPos, this.view);
             this.container.appendChild(this.popper);
         };
     }

package/dist/es/commands.js

@@ -33,8 +33,7 @@ import { getEditorProps } from './plugins/editor-props';
 import { searchReplaceKey } from './plugins/search-replace';
 import { checkForCompletion } from './plugins/section_title/autocompletion';
 import { persistentCursor } from './plugins/persistent-cursor';
-import { openAffiliationsModal } from './components/affiliations/AffiliationsModal';
-import { openAuthorsModal } from './components/authors/AuthorsModal';
+import { openAuthorsAndAffiliationsModals } from './components/authors-affiliations/AuthorsAndAffiliationsModals';
 export const addToStart = (state, dispatch) => {
     const { selection } = state;
     const props = getEditorProps(state);
@@ -713,7 +712,7 @@ export const insertContributors = (state, dispatch, view) => {
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, contributors.pos);
         dispatch(tr.setSelection(selection).scrollIntoView());
-        openAuthorsModal(contributors.pos, view);
+        openAuthorsAndAffiliationsModals(contributors.pos, view, 'authors');
     }
     return true;
 };
@@ -734,7 +733,7 @@ export const insertAffiliation = (state, dispatch, view) => {
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, affiliations.pos);
         dispatch(tr.setSelection(selection).scrollIntoView());
-        openAffiliationsModal(affiliations.pos, view);
+        openAuthorsAndAffiliationsModals(affiliations.pos, view, 'affiliations');
     }
     return true;
 };

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

@@ -3,14 +3,13 @@ import { Field, Formik } from 'formik';
 import React, { useRef } from 'react';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
 export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
-    if (actionsRef && !actionsRef.current) {
+    const formRef = useRef(null);
+    if (actionsRef) {
         actionsRef.current = {
-            reset: () => {
-                formRef.current?.resetForm();
-            },
+            reset: () => formRef.current?.resetForm(),
+            submitForm: () => formRef.current?.submitForm(),
         };
     }
-    const formRef = useRef(null);
     const validateAffiliation = (values) => {
         const errors = {};
         if (!values.institution?.trim()) {
@@ -18,7 +17,7 @@ export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
         }
         return errors;
     };
-    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
+    return (React.createElement(Formik, { initialValues: values, onSubmit: (attrs) => onSave(attrs), innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
         React.createElement(FormRow, null,
             React.createElement(Field, { name: "institution" }, (props) => {
                 const hasError = formik.touched.institution && formik.errors.institution;

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

@@ -1,4 +1,4 @@
-import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -11,37 +11,45 @@ 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 { AuthorsPanel } from '../authors/AuthorsPanel';
 import { AffiliationForm } from './AffiliationForm';
 import { AffiliationList } from './AffiliationList';
-import { getEditorProps } from '../../plugins/editor-props';
-import ReactSubView from '../../views/ReactSubView';
-import { deleteNode, findChildrenAttrsByType, updateNodeAttrs, } from '../../lib/view';
 function makeAuthorItems(authors) {
     return authors.map((author) => ({
         id: author.id,
         label: `${author.given} ${author.family}`,
     }));
 }
-export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, }) => {
+export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, affiliation, onSaveAffiliation, onDeleteAffiliation, onUpdateAuthors, addNewAffiliation = false, onClose, onOpenAuthorsModal, }) => {
     const [isOpen, setIsOpen] = useState(true);
     const [selection, setSelection] = useState(affiliation);
     const [showingDeleteDialog, setShowDeleteDialog] = useState(false);
     const valuesRef = useRef(undefined);
     const actionsRef = useRef(undefined);
     const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
+    useEffect(() => {
+        dispatchAuthors({
+            type: 'set',
+            state: [...$authors].sort(authorComparator),
+        });
+    }, [$authors]);
     const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, $affiliations);
     const [isDisableSave, setIsDisableSave] = useState(true);
     const [newAffiliation, setNewAffiliation] = useState(false);
     const [showRequiredFieldConfirmationDialog, setShowRequiredFieldConfirmationDialog,] = useState(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
-    const [showAuthorDrawer, setShowAuthorDrawer] = useState(false);
     const [selectedAuthorIds, setSelectedAuthorIds] = useState([]);
     const [pendingSelection, setPendingSelection] = useState(null);
     const [pendingAction, setPendingAction] = useState(null);
     const [savedAffiliationId, setSavedAffiliationId] = useState(undefined);
     const [affiliationAuthorMap, setAffiliationAuthorMap] = useState(new Map());
+    const prevIsOpenRef = useRef(isOpen);
+    useEffect(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            onClose?.();
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
     useEffect(() => {
         if (!selection) {
             return;
@@ -106,7 +114,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             setNewAffiliation(false);
             setSelection(affiliation);
             setSelectedAuthorIds(affiliatedAuthorIds);
-            setShowAuthorDrawer(false);
             setAffiliationAuthorMap((prevMap) => {
                 const newMap = new Map(prevMap);
                 newMap.set(affiliation.id, affiliatedAuthorIds);
@@ -146,7 +153,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
             newMap.set(affiliation.id, selectedAuthorIds);
             return newMap;
         });
-        setShowAuthorDrawer(false);
         setSavedAffiliationId(affiliation.id);
         setTimeout(() => {
             setSavedAffiliationId(undefined);
@@ -240,7 +246,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
         setNewAffiliation(true);
         setSelection(emptyAffiliation);
         setSelectedAuthorIds([]);
-        setShowAuthorDrawer(false);
     };
     useEffect(() => {
         if (addNewAffiliation) {
@@ -288,7 +293,6 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
     const handleConfirmationCancel = () => {
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
-        setShowAuthorDrawer(false);
         if (pendingAction === 'select' && pendingSelection) {
             setSelection(pendingSelection);
             setNewAffiliation(false);
@@ -329,19 +333,17 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
                         React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
                     React.createElement(AffiliationTabs, null,
-                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
                                 !(showConfirmationDialog ||
                                     showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
                         React.createElement(InspectorTabList, null,
                             React.createElement(InspectorTab, null, "Details"),
-                            React.createElement(InspectorTab, null, "Authors")),
+                            onOpenAuthorsModal && React.createElement(InspectorTab, null, "Authors")),
                         React.createElement(InspectorTabPanels, null,
                             React.createElement(AffiliationTabPanel, null,
-                                React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef })),
-                            React.createElement(AffiliationTabPanel, 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(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: (attrs) => handleSaveAffiliation(attrs), onChange: handleAffiliationChange, actionsRef: actionsRef })),
+                            onOpenAuthorsModal && (React.createElement(AffiliationTabPanel, null,
+                                React.createElement(AuthorsPanel, { items: makeAuthorItems(authors), selectedItems: selectedAuthors, onSelect: selectAuthor, onOpenAuthorsModal: onOpenAuthorsModal }))))),
                     React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: DialogType.REQUIRED, entityType: "affiliation" }),
                     React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
             React.createElement(FormFooter, { onCancel: handleClose }))));
@@ -407,37 +409,3 @@ const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
   margin-top: 8px;
   margin-bottom: 16px;
 `;
-export const openAffiliationsModal = (pos, view) => {
-    if (!view) {
-        return;
-    }
-    const { state } = view;
-    const props = getEditorProps(state);
-    const contributors = findChildrenAttrsByType(view, schema.nodes.contributor);
-    const componentProps = {
-        affiliations: [],
-        authors: contributors,
-        onSaveAffiliation: (affiliation) => handleSaveAffiliation(view, affiliation, pos),
-        onDeleteAffiliation: (affiliation) => handleDeleteAffiliation(view, affiliation),
-        onUpdateAuthors: (authors) => handleUpdateAuthors(view, authors),
-        addNewAffiliation: true,
-    };
-    const dialog = ReactSubView(props, AffiliationsModal, componentProps, state.doc, () => pos, view);
-    view.focus();
-    document.body.appendChild(dialog);
-};
-export const handleSaveAffiliation = (view, affiliation, affiliationsPos) => {
-    const update = updateNodeAttrs(view, schema.nodes.affiliation, affiliation);
-    if (!update) {
-        const node = schema.nodes.affiliation.create(affiliation);
-        view.dispatch(view.state.tr.insert(affiliationsPos + 1, node));
-    }
-};
-export const handleDeleteAffiliation = (view, affiliation) => {
-    deleteNode(view, affiliation.id);
-};
-export const handleUpdateAuthors = (view, authors) => {
-    authors.forEach((author) => {
-        updateNodeAttrs(view, schema.nodes.contributor, author);
-    });
-};

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

@@ -0,0 +1,15 @@
+import { AffiliationPlaceholderIcon } from '@manuscripts/style-guide';
+import React from 'react';
+import { GenericPanel, ListItem, ListItems, useListSelectedIds, } from '../authors-affiliations/GenericPanel';
+function affiliationSecondaryLine(item) {
+    const line = [item.city, item.county, item.country].filter(Boolean).join(', ');
+    return line || undefined;
+}
+export const AffiliationsPanel = ({ items, selectedItems = [], onSelect, onOpenAffiliationsModal, }) => {
+    const selectedIds = useListSelectedIds(selectedItems);
+    return (React.createElement(GenericPanel, { title: "Institutional Affiliations", createLabel: "Create New Affiliation", onCreate: onOpenAffiliationsModal, createDataCy: "add-affiliations-link", emptyDataCy: "affiliations-panel-empty", isEmpty: items.length === 0, emptyIcon: React.createElement(AffiliationPlaceholderIcon, null), emptyMessage: React.createElement(React.Fragment, null,
+            "There are no affiliations attributed yet!",
+            React.createElement("br", null),
+            "Click \u2018Create New Affiliation\u2019") },
+        React.createElement(ListItems, { "data-cy": "affiliations-panel" }, items.map((item) => (React.createElement(ListItem, { key: item.id, selected: selectedIds.has(item.id), onClick: () => onSelect(item.id), primary: item.institution, secondary: affiliationSecondaryLine(item) }))))));
+};

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

@@ -34,11 +34,10 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
             formRef.current.setFieldValue('creditRoles', selectedCreditRoles);
         }
     }, [selectedCreditRoles]);
-    if (actionsRef && !actionsRef.current) {
+    if (actionsRef) {
         actionsRef.current = {
-            reset: () => {
-                formRef.current?.resetForm();
-            },
+            reset: () => formRef.current?.resetForm(),
+            submitForm: () => formRef.current?.submitForm(),
         };
     }
     const validateAuthor = (values) => {

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, outlineStyle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
+import { AddIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, outlineStyle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { cloneDeep, isEqual, omit } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -26,18 +26,22 @@ 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 { AffiliationsPanel } from '../affiliations/AffiliationsPanel';
 import { AuthorDetailsForm } from './AuthorDetailsForm';
 import { AuthorList } from './AuthorList';
 import { CreditDrawer } from './CreditDrawer';
 import { useManageAffiliations } from './useManageAffiliations';
 import { useManageCredit } from './useManageCredit';
-import { getEditorProps } from '../../plugins/editor-props';
-import ReactSubView from '../../views/ReactSubView';
-import { deleteNode, findChildrenAttrsByType, updateNodeAttrs, } from '../../lib/view';
 export const authorsReducer = arrayReducer((a, b) => a.id === b.id);
-export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, }) => {
+export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, onOpenAffiliationsModal, onClose, }) => {
     const [isOpen, setOpen] = useState(true);
+    const prevIsOpenRef = useRef(true);
+    useEffect(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            onClose?.();
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose]);
     const [isDisableSave, setDisableSave] = useState(true);
     const [isEmailRequired, setEmailRequired] = useState(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
@@ -60,7 +64,7 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
     }, [addNewAuthor]);
     const [selection, setSelection] = useState(author);
-    const { showAffiliationDrawer, setShowAffiliationDrawer, selectedAffiliations, setSelectedAffiliations, removeAffiliation, selectAffiliation, affiliations, } = useManageAffiliations(selection, $affiliations);
+    const { selectedAffiliations, setSelectedAffiliations, selectAffiliation, affiliations, } = useManageAffiliations(selection, $affiliations);
     useEffect(() => {
         const currentAuthor = selection;
         const relevantAffiliations = affiliations.filter((item) => currentAuthor?.affiliationIDs?.includes(item.id));
@@ -87,12 +91,10 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
             else {
                 updateAffiliationSelection(author);
                 setSelection(author);
-                setShowAffiliationDrawer(false);
                 setNewAuthor(false);
             }
         }
         else {
-            setShowAffiliationDrawer(false);
             updateAffiliationSelection(author);
             setSelection(author);
             setNewAuthor(false);
@@ -133,7 +135,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
                 setSelection(nextAuthor);
                 setNextAuthor(null);
                 setNewAuthor(false);
-                setShowAffiliationDrawer(false);
                 updateAffiliationSelection(nextAuthor);
                 setIsCreatingNewAuthor(false);
             }
@@ -166,7 +167,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
-        setShowAffiliationDrawer(false);
     };
     const saveAuthor = (values) => {
         if (!values || !selection) {
@@ -185,7 +185,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         setSelection(author);
         setShowConfirmationDialog(false);
         setNewAuthor(false);
-        setShowAffiliationDrawer(false);
         setIsCreatingNewAuthor(false);
         dispatchAuthors({
             type: 'update',
@@ -242,7 +241,6 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
         }
         else {
             createNewAuthor();
-            setShowAffiliationDrawer(false);
         }
     };
     const deleteAuthor = () => {
@@ -311,19 +309,19 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
                         React.createElement(AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(React.Fragment, null,
                     React.createElement(AuthorTabs, null,
-                        React.createElement(ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
+                        React.createElement(ModalFormActions, { form: 'author-details-form', onSubmitForm: () => actionsRef.current?.submitForm?.(), type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
                                 (isCreatingNewAuthor &&
                                     !showConfirmationDialog &&
                                     !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
                         React.createElement(InspectorTabList, null,
                             React.createElement(InspectorTab, null, "Details"),
-                            React.createElement(InspectorTab, null, "Affiliations"),
+                            onOpenAffiliationsModal && (React.createElement(InspectorTab, null, "Affiliations")),
                             React.createElement(InspectorTab, null, "Contributions (CRediT)")),
                         React.createElement(InspectorTabPanels, null,
                             React.createElement(AuthorTabPanel, null,
                                 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(AuthorTabPanel, null,
-                                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 }) })),
+                            onOpenAffiliationsModal && (React.createElement(AuthorTabPanel, null,
+                                React.createElement(AffiliationsPanel, { items: affiliations, selectedItems: selectedAffiliations, onSelect: selectAffiliation, onOpenAffiliationsModal: onOpenAffiliationsModal }))),
                             React.createElement(AuthorTabPanel, null,
                                 React.createElement(DrawerGroup, { Drawer: CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
                                         id: r.vocabTerm,
@@ -391,31 +389,3 @@ const StyledModalBody = styled(ModalBody) `
 const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
   margin-bottom: 16px;
 `;
-export const openAuthorsModal = (pos, view) => {
-    if (!view) {
-        return;
-    }
-    const { state } = view;
-    const props = getEditorProps(state);
-    const affiliations = findChildrenAttrsByType(view, schema.nodes.affiliation);
-    const componentProps = {
-        authors: [],
-        affiliations,
-        onSaveAuthor: (contributor) => handleSaveContributor(view, contributor, pos),
-        onDeleteAuthor: (contributor) => handleDeleteContributor(view, contributor),
-        addNewAuthor: true,
-    };
-    const dialog = ReactSubView(props, AuthorsModal, componentProps, state.doc, () => pos, view);
-    view.focus();
-    document.body.appendChild(dialog);
-};
-export const handleSaveContributor = (view, contributor, contributorsPos) => {
-    const update = updateNodeAttrs(view, schema.nodes.contributor, contributor);
-    if (!update) {
-        const node = schema.nodes.contributor.create(contributor);
-        view.dispatch(view.state.tr.insert(contributorsPos + 1, node));
-    }
-};
-export const handleDeleteContributor = (view, contributor) => {
-    deleteNode(view, contributor.id);
-};