@manuscripts/body-editor 2.7.7 → 2.7.8-LEAN-4213.0

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

@@ -41,7 +41,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthorsModal = void 0;
+exports.AuthorsModal = exports.affiliationsReducer = exports.authorsReducer = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const style_guide_1 = require("@manuscripts/style-guide");
 const lodash_1 = require("lodash");
@@ -49,25 +49,28 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const array_reducer_1 = require("../../lib/array-reducer");
 const authors_1 = require("../../lib/authors");
-const AuthorActions_1 = require("./AuthorActions");
-const AuthorAffiliations_1 = require("./AuthorAffiliations");
+const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
+const FormFooter_1 = __importDefault(require("../form/FormFooter"));
+const FormPlaceholder_1 = require("../form/FormPlaceholder");
+const ModalFormActions_1 = require("../form/ModalFormActions");
 const AuthorDetailsForm_1 = require("./AuthorDetailsForm");
-const AuthorFormPlaceholder_1 = require("./AuthorFormPlaceholder");
 const AuthorList_1 = require("./AuthorList");
-const RequiredFieldConfirmationDialog_1 = require("./RequiredFieldConfirmationDialog");
-const SaveAuthorConfirmationDialog_1 = require("./SaveAuthorConfirmationDialog");
 const AddAuthorButton = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
-  margin-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding: 12px 8px 12px 12px;
   cursor: pointer;
+  &[data-active='true'] {
+    background: ${(props) => props.theme.colors.background.fifth};
+    border: 1px solid ${(props) => props.theme.colors.border.primary};
+    border-left: 0;
+    border-right: 0;
+  }
 `;
 const ActionTitle = styled_components_1.default.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
 `;
 const FormLabel = styled_components_1.default.legend `
-  margin-top: 12px;
   margin-bottom: 12px;
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.xlarge} /
@@ -79,28 +82,73 @@ const FormLabel = styled_components_1.default.legend `
 const AuthorForms = styled_components_1.default.div `
   padding-left: ${(props) => props.theme.grid.unit * 3}px;
   padding-right: ${(props) => props.theme.grid.unit * 3}px;
+  position: relative;
+  margin-top: 20px;
 `;
 const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
   padding: 0;
 `;
-const authorsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
-const affiliationsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
+const AuthorsSection = styled_components_1.default.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 4}px;
+  border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
+`;
+const AuthorsHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const AuthorsTitle = styled_components_1.default.h3 `
+  margin: 0;
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  font-size: ${(props) => props.theme.font.size.large};
+  font-family: ${(props) => props.theme.font.family.sans};
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const AffiliateButton = styled_components_1.default.button `
+  color: ${(props) => props.theme.colors.brand.default};
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal}
+    ${(props) => props.theme.font.family.sans};
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: ${(props) => props.theme.grid.unit * 2}px;
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
+  position: relative;
+  height: calc(90vh - 40px);
+`;
+const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
+  margin-bottom: 16px;
+`;
+exports.authorsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
+exports.affiliationsReducer = (0, array_reducer_1.arrayReducer)((a, b) => a.id === b.id);
 const normalize = (author) => ({
     id: author.id,
-    role: author.role,
-    affiliations: author.affiliations || [],
+    role: author.role || 'author',
+    affiliations: (author.affiliations || []).sort(),
     bibliographicName: author.bibliographicName,
     email: author.email || '',
     isCorresponding: author.isCorresponding || false,
     ORCIDIdentifier: author.ORCIDIdentifier || '',
-    priority: author.priority,
+    priority: author.priority || 0,
     isJointContributor: author.isJointContributor || false,
-    userID: '',
-    invitationID: '',
+    userID: author.userID || '',
+    invitationID: author.invitationID || '',
     footnote: author.footnote || [],
     corresp: author.corresp || [],
 });
-const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, addNewAuthor = false, }) => {
+const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, addNewAuthor = false, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
     const [isDisableSave, setDisableSave] = (0, react_1.useState)(true);
     const [isEmailRequired, setEmailRequired] = (0, react_1.useState)(false);
@@ -113,38 +161,74 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
     const [nextAuthor, setNextAuthor] = (0, react_1.useState)(null);
     const [isSwitchingAuthor, setIsSwitchingAuthor] = (0, react_1.useState)(false);
     const [isCreatingNewAuthor, setIsCreatingNewAuthor] = (0, react_1.useState)(false);
+    const [showAffiliationDrawer, setShowAffiliationDrawer] = (0, react_1.useState)(false);
+    const [selectedAffiliations, setSelectedAffiliations] = (0, react_1.useState)([]);
     const valuesRef = (0, react_1.useRef)();
     const actionsRef = (0, react_1.useRef)();
-    const [authors, dispatchAuthors] = (0, react_1.useReducer)(authorsReducer, $authors.sort(authors_1.authorComparator));
-    const [affiliations, dispatchAffiliations] = (0, react_1.useReducer)(affiliationsReducer, $affiliations);
+    const [authors, dispatchAuthors] = (0, react_1.useReducer)(exports.authorsReducer, $authors.sort(authors_1.authorComparator));
+    const [affiliations] = (0, react_1.useReducer)(exports.affiliationsReducer, $affiliations);
+    const affiliationItems = affiliations.map((affiliation) => ({
+        id: affiliation.id,
+        label: affiliation.institution,
+        country: affiliation.country,
+        city: affiliation.city,
+        state: affiliation.county,
+    }));
+    const [selectedAffiliationIds, setSelectedAffiliationIds] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         if (addNewAuthor) {
             handleAddAuthor();
         }
     }, [addNewAuthor]);
     const [selection, setSelection] = (0, react_1.useState)(author);
+    (0, react_1.useEffect)(() => {
+        const currentAuthor = selection;
+        const relevantAffiliations = affiliationItems.filter((item) => { var _a; return (_a = currentAuthor === null || currentAuthor === void 0 ? void 0 : currentAuthor.affiliations) === null || _a === void 0 ? void 0 : _a.includes(item.id); });
+        setSelectedAffiliations(relevantAffiliations);
+        setSelectedAffiliationIds(relevantAffiliations.map((item) => item.id));
+    }, []);
     const handleSelect = (author) => {
         const values = valuesRef.current;
         setIsCreatingNewAuthor(false);
-        if (values && selection && unSavedChanges && !isDisableSave) {
-            setShowConfirmationDialog(true);
-            setNextAuthor(author);
-        }
-        else if (isDisableSave && unSavedChanges) {
-            setShowRequiredFieldConfirmationDialog(true);
-            setNextAuthor(author);
+        if (values && selection) {
+            const normalizedSelection = normalize(selection);
+            const normalizedValues = normalize(values);
+            const hasChanges = !(0, lodash_1.isEqual)(normalizedSelection, normalizedValues);
+            if (hasChanges && !isDisableSave) {
+                setShowConfirmationDialog(true);
+                setNextAuthor(author);
+            }
+            else if (hasChanges && isDisableSave) {
+                setShowRequiredFieldConfirmationDialog(true);
+                setNextAuthor(author);
+            }
+            else {
+                updateAffiliationSelection(author);
+                setSelection(author);
+                setShowAffiliationDrawer(false);
+                setNewAuthor(false);
+            }
         }
         else {
+            setShowAffiliationDrawer(false);
+            updateAffiliationSelection(author);
             setSelection(author);
             setNewAuthor(false);
         }
     };
+    const updateAffiliationSelection = (author) => {
+        const relevantAffiliations = affiliationItems.filter((item) => { var _a; return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.includes(item.id); });
+        setSelectedAffiliations(relevantAffiliations);
+        setSelectedAffiliationIds(relevantAffiliations.map((item) => item.id));
+    };
     const handleClose = () => {
-        if (isDisableSave && unSavedChanges) {
-            setShowRequiredFieldConfirmationDialog(true);
-        }
-        else if (unSavedChanges) {
-            setShowConfirmationDialog(true);
+        if (unSavedChanges) {
+            if (isDisableSave) {
+                setShowRequiredFieldConfirmationDialog(true);
+            }
+            else {
+                setShowConfirmationDialog(true);
+            }
         }
         else {
             setShowRequiredFieldConfirmationDialog(false);
@@ -160,6 +244,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             setSelection(nextAuthor);
             setNextAuthor(null);
             setNewAuthor(false);
+            setShowAffiliationDrawer(false);
             setIsCreatingNewAuthor(false);
         }
         else if (isCreatingNewAuthor) {
@@ -171,10 +256,14 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
     const handleCancel = () => {
         handleResetAuthor();
         if (nextAuthor) {
+            const affiliations = nextAuthor.affiliations || [];
+            setSelectedAffiliationIds(affiliations);
+            setSelectedAffiliations(affiliationItems.filter((item) => affiliations.includes(item.id)));
             setSelection(nextAuthor);
             setNextAuthor(null);
             setNewAuthor(false);
             setIsCreatingNewAuthor(false);
+            setUnSavedChanges(false);
         }
         else if (newAuthor && unSavedChanges && !isSwitchingAuthor) {
             setNewAuthor(false);
@@ -186,6 +275,8 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             setIsCreatingNewAuthor(false);
         }
         setShowConfirmationDialog(false);
+        setShowRequiredFieldConfirmationDialog(false);
+        setShowAffiliationDrawer(false);
     };
     const handleSaveAuthor = (values) => {
         if (!values || !selection) {
@@ -201,6 +292,9 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         setSelection(author);
         setShowConfirmationDialog(false);
         setNewAuthor(false);
+        setSelectedAffiliationIds([]);
+        setSelectedAffiliations([]);
+        setShowAffiliationDrawer(false);
         setIsCreatingNewAuthor(false);
         dispatchAuthors({
             type: 'update',
@@ -240,6 +334,8 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
             footnote: [],
         };
         setIsSwitchingAuthor(!!selection);
+        setSelectedAffiliations([]);
+        setSelectedAffiliationIds([]);
         setSelection(author);
         setNewAuthor(true);
     };
@@ -247,7 +343,9 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         const values = valuesRef.current;
         setIsSwitchingAuthor(!!selection);
         setIsCreatingNewAuthor(true);
-        if (values && selection && !(0, lodash_1.isEqual)(values, normalize(selection))) {
+        if (values &&
+            selection &&
+            !(0, lodash_1.isEqual)(normalize(values), normalize(selection))) {
             if (isDisableSave) {
                 setShowRequiredFieldConfirmationDialog(true);
             }
@@ -258,6 +356,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         else {
             createNewAuthor();
+            setShowAffiliationDrawer(false);
         }
     };
     const handleDeleteAuthor = () => {
@@ -266,37 +365,26 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
         }
         onDeleteAuthor(selection);
         setSelection(undefined);
+        setUnSavedChanges(false);
         dispatchAuthors({
             type: 'delete',
             item: selection,
         });
     };
-    const handleSaveAffiliation = (affiliation) => {
-        onSaveAffiliation(affiliation);
-        dispatchAffiliations({
-            type: 'update',
-            items: [affiliation],
-        });
-    };
-    const handleAddAffiliation = (affiliation) => {
-        if (!valuesRef.current) {
-            return;
-        }
-        const values = valuesRef.current;
-        const affiliations = values.affiliations || [];
-        handleSaveAuthor(Object.assign(Object.assign({}, values), { affiliations: [...affiliations, affiliation.id] }));
-    };
-    const handleRemoveAffiliation = (affiliation) => {
-        var _a;
-        if (!valuesRef.current) {
+    const handleRemoveAffiliation = (affId) => {
+        if (!selection) {
             return;
         }
-        const values = valuesRef.current;
-        handleSaveAuthor(Object.assign(Object.assign({}, values), { affiliations: (_a = values.affiliations) === null || _a === void 0 ? void 0 : _a.filter((i) => i !== affiliation.id) }));
+        const newAffiliations = selectedAffiliationIds.filter((id) => id !== affId);
+        setSelectedAffiliationIds(newAffiliations);
+        setSelectedAffiliations(affiliationItems.filter((item) => newAffiliations.includes(item.id)));
     };
     const handleResetAuthor = () => {
         var _a;
         (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        const affiliations = (selection === null || selection === void 0 ? void 0 : selection.affiliations) || [];
+        setSelectedAffiliationIds(affiliations);
+        setSelectedAffiliations(affiliationItems.filter((item) => affiliations.includes(item.id)));
         setShowConfirmationDialog(false);
         setShowRequiredFieldConfirmationDialog(false);
         setUnSavedChanges(false);
@@ -311,61 +399,77 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
     };
     const handleChangeAuthor = (values) => {
         const normalized = (0, lodash_1.omit)(normalize(selection), 'priority');
-        const updatedValues = (0, lodash_1.omit)(values, 'priority');
-        if (updatedValues.id === normalized.id &&
-            !(0, lodash_1.isEqual)(updatedValues, normalized)) {
+        const updatedValues = (0, lodash_1.omit)(normalize(values), 'priority');
+        const isSameAuthor = updatedValues.id === normalized.id;
+        const hasChanges = !(0, lodash_1.isEqual)(updatedValues, normalized);
+        if (isSameAuthor && hasChanges) {
             setUnSavedChanges(true);
         }
-        const isUnchanged = (0, lodash_1.isEqual)(normalize(selection), values);
-        valuesRef.current = values;
+        else {
+            setUnSavedChanges(false);
+        }
+        valuesRef.current = Object.assign(Object.assign({}, updatedValues), { priority: values.priority });
         const { given, family } = values.bibliographicName;
         const { email, isCorresponding } = values;
         const isNameFilled = (given === null || given === void 0 ? void 0 : given.length) && (family === null || family === void 0 ? void 0 : family.length);
-        if (isNameFilled && !isCorresponding && !isUnchanged) {
-            setDisableSave(false);
-        }
-        else if (isCorresponding &&
-            (email === null || email === void 0 ? void 0 : email.length) &&
-            isNameFilled &&
-            !isUnchanged) {
-            setDisableSave(false);
+        if (hasChanges && isNameFilled) {
+            if (isCorresponding) {
+                setDisableSave(!(email === null || email === void 0 ? void 0 : email.length));
+            }
+            else {
+                setDisableSave(false);
+            }
         }
         else {
             setDisableSave(true);
         }
-        if (isCorresponding && !(email === null || email === void 0 ? void 0 : email.length)) {
-            setEmailRequired(true);
-        }
-        else {
-            setEmailRequired(false);
-        }
+        setEmailRequired(isCorresponding);
     };
     const handleShowDeleteDialog = () => {
         setShowDeleteDialog((prev) => !prev);
     };
+    const handleAffiliationSelect = (affiliationId) => {
+        if (!selection) {
+            return;
+        }
+        const currentAffiliations = selectedAffiliationIds || [];
+        const isAlreadySelected = currentAffiliations.includes(affiliationId);
+        const newAffiliations = isAlreadySelected
+            ? currentAffiliations.filter((id) => id !== affiliationId)
+            : [...currentAffiliations, affiliationId];
+        setSelectedAffiliationIds(newAffiliations);
+        setSelectedAffiliations(affiliationItems.filter((item) => newAffiliations.includes(item.id)));
+    };
     return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: true },
         react_1.default.createElement(style_guide_1.ModalContainer, null,
             react_1.default.createElement(style_guide_1.ModalHeader, null,
                 react_1.default.createElement(style_guide_1.CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
-            react_1.default.createElement(style_guide_1.ModalBody, null,
+            react_1.default.createElement(StyledModalBody, null,
                 react_1.default.createElement(style_guide_1.ModalSidebar, { "data-cy": "authors-sidebar" },
-                    react_1.default.createElement(style_guide_1.ModalSidebarHeader, null,
+                    react_1.default.createElement(StyledModalSidebarHeader, null,
                         react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Authors")),
                     react_1.default.createElement(StyledSidebarContent, null,
-                        react_1.default.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor },
+                        react_1.default.createElement(AddAuthorButton, { "data-cy": "add-author-button", onClick: handleAddAuthor, "data-active": isCreatingNewAuthor },
                             react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
                             react_1.default.createElement(ActionTitle, null, "New Author")),
                         react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: handleSelect, onDelete: handleShowDeleteDialog, moveAuthor: handleMoveAuthor, lastSavedAuthor: lastSavedAuthor }))),
                 react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(AuthorForms, null,
-                    react_1.default.createElement(RequiredFieldConfirmationDialog_1.RequiredFieldConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onSave: () => setShowRequiredFieldConfirmationDialog(false), onCancel: handleCancel }),
-                    react_1.default.createElement(SaveAuthorConfirmationDialog_1.SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: handleSave, onCancel: handleCancel }),
-                    react_1.default.createElement(AuthorActions_1.AuthorActions, { onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newAuthor: newAuthor ||
+                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleCancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
+                    react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleSave, onSecondary: handleCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }),
+                    react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: "author", onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, showDeleteDialog: showDeleteDialog, handleShowDeleteDialog: handleShowDeleteDialog, newEntity: newAuthor ||
                             (isCreatingNewAuthor &&
                                 !showConfirmationDialog &&
                                 !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
                     react_1.default.createElement(FormLabel, null, "Details"),
-                    react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired }),
-                    react_1.default.createElement(FormLabel, null, "Affiliations"),
-                    react_1.default.createElement(AuthorAffiliations_1.AuthorAffiliations, { author: selection, affiliations: affiliations, onSave: handleSaveAffiliation, onAdd: handleAddAffiliation, onRemove: handleRemoveAffiliation }))) : (react_1.default.createElement(AuthorFormPlaceholder_1.AuthorFormPlaceholder, null)))))));
+                    react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliationIds }),
+                    react_1.default.createElement(AuthorsSection, null,
+                        react_1.default.createElement(AuthorsHeader, null,
+                            react_1.default.createElement(AuthorsTitle, null, "Authors"),
+                            react_1.default.createElement(AffiliateButton, { onClick: () => setShowAffiliationDrawer(true), "data-cy": "affiliate-authors-button" },
+                                react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }),
+                                "Assign Institutions")),
+                        react_1.default.createElement(style_guide_1.SelectedItemsBox, { items: selectedAffiliations, onRemove: handleRemoveAffiliation, placeholder: "No institutions assigned" })),
+                    showAffiliationDrawer && (react_1.default.createElement(style_guide_1.Drawer, { items: affiliationItems, selectedIds: selectedAffiliationIds, title: "Authors", onSelect: handleAffiliationSelect, onBack: () => setShowAffiliationDrawer(false), width: "100%" })))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: 'Author Details', message: 'Select an author from the list to display their details here.', placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) })))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
 };
 exports.AuthorsModal = AuthorsModal;

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

@@ -62,9 +62,6 @@ const AuthorContainer = styled_components_1.default.div `
   &:hover,
   &.active {
     background: ${(props) => props.theme.colors.background.fifth};
-  }
-
-  &.active {
     border-color: ${(props) => props.theme.colors.border.primary};
   }
 

package/dist/cjs/components/dialog/ConfirmationDialog.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmationDialog = exports.DialogType = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledIcon = (0, styled_components_1.default)(style_guide_1.AttentionOrangeIcon) `
+  margin-right: 8px;
+`;
+const MessageBox = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 90px;
+`;
+var DialogType;
+(function (DialogType) {
+    DialogType["SAVE"] = "save";
+    DialogType["DELETE"] = "delete";
+    DialogType["REQUIRED"] = "required";
+})(DialogType = exports.DialogType || (exports.DialogType = {}));
+const getDialogConfig = (dialogType, entityType) => {
+    const configs = {
+        [DialogType.SAVE]: {
+            title: 'Unsaved changes',
+            message: {
+                primary: "You've made changes but not saved them!",
+                secondary: 'Would you like to save or discard your changes?',
+            },
+            buttons: {
+                primary: 'Save',
+                secondary: 'Discard',
+            },
+        },
+        [DialogType.DELETE]: {
+            title: `Delete ${entityType}`,
+            message: {
+                primary: entityType === 'affiliation'
+                    ? 'This action will delete the institution and any links to authors affiliated to it.'
+                    : `Are you sure you want to remove this ${entityType} from the list?`,
+                secondary: 'Do you want to continue?',
+            },
+            buttons: {
+                primary: 'Delete',
+                secondary: 'Cancel',
+            },
+        },
+        [DialogType.REQUIRED]: {
+            title: 'Empty required field',
+            message: {
+                primary: 'A required field has been left empty. If you discard, any updates will not be saved!',
+                secondary: 'Would you like to discard or continue editing?',
+            },
+            buttons: {
+                primary: 'Continue editing',
+                secondary: 'Discard',
+            },
+            minHeight: '90px',
+        },
+    };
+    return configs[dialogType];
+};
+const ConfirmationDialog = ({ isOpen, type, entityType, onPrimary, onSecondary, }) => {
+    const config = getDialogConfig(type, entityType);
+    const Header = () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledIcon, null),
+        " ",
+        config.title));
+    const Message = () => (react_1.default.createElement(MessageBox, null,
+        react_1.default.createElement("div", null, config.message.primary),
+        config.message.secondary && react_1.default.createElement("div", null, config.message.secondary)));
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.Category.confirmation, header: react_1.default.createElement(Header, null), message: react_1.default.createElement(Message, null), actions: {
+            primary: {
+                action: onPrimary,
+                title: config.buttons.primary,
+            },
+            secondary: {
+                action: onSecondary,
+                title: config.buttons.secondary,
+            },
+        } }));
+};
+exports.ConfirmationDialog = ConfirmationDialog;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Footer = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 16px 32px;
+  height: 40px;
+  box-shadow: 0px -2px 12px 0px rgba(216, 216, 216, 0.26);
+  border-radius: 0px 0px 8px 8px;
+`;
+const RemoveButton = styled_components_1.default.button `
+  background-color: #0d79d0;
+  color: ${(props) => props.theme.colors.text.onDark};
+  padding: 8px 32px;
+  border-radius: 4px;
+  border: 1px solid #0d79d0;
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.hover};
+  }
+  cursor: pointer;
+`;
+const FormFooter = ({ onCancel }) => {
+    return (react_1.default.createElement(Footer, null,
+        react_1.default.createElement(RemoveButton, { onClick: onCancel }, "Close")));
+};
+exports.default = FormFooter;

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

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormPlaceholder = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+`;
+const Placeholder = styled_components_1.default.div `
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+`;
+const Action = styled_components_1.default.div `
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  font-weight: ${(props) => props.theme.font.weight.medium};
+  letter-spacing: -0.5px;
+`;
+const Message = styled_components_1.default.div `
+  max-width: 400px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  margin-top: ${(props) => props.theme.grid.unit * 6}px;
+  font-weight: ${(props) => props.theme.font.weight.light};
+  color: ${(props) => props.theme.colors.text.secondary};
+  text-align: center;
+
+  @media (max-width: 850px) {
+    margin-right: ${(props) => props.theme.grid.unit * 5}px;
+    margin-left: ${(props) => props.theme.grid.unit * 5}px;
+    max-width: 350px;
+  }
+`;
+const FormPlaceholder = ({ type, title, message, placeholderIcon, }) => (react_1.default.createElement(Container, { "data-cy": `${type}-details` },
+    react_1.default.createElement(Placeholder, null, placeholderIcon),
+    react_1.default.createElement(Action, null, title),
+    react_1.default.createElement(Message, null, message)));
+exports.FormPlaceholder = FormPlaceholder;