@manuscripts/body-editor 1.7.19 → 1.7.21

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

@@ -0,0 +1,85 @@
+import AddAuthor from '@manuscripts/assets/react/AddAuthor';
+import { generateID, ObjectTypes } from '@manuscripts/json-schema';
+import React, { useContext, useMemo, useState } from 'react';
+import CreatableSelect from 'react-select/creatable';
+import styled, { ThemeContext } from 'styled-components';
+import { affiliationLabel, } from '../../lib/authors';
+import { AffiliationButton } from './AffiliationButton';
+const AddAffiliation = styled(AddAuthor) `
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+
+  circle,
+  use {
+    fill: ${(props) => props.theme.colors.brand.default};
+  }
+
+  path {
+    mask: none;
+  }
+`;
+export const AddAffiliationIndicator = () => React.createElement(AddAffiliation, null);
+const getSelectStyles = (focus, theme) => ({
+    backgroundColor: focus
+        ? theme.colors.background.fifth
+        : theme.colors.background.primary,
+    borderColor: focus
+        ? theme.colors.border.field.active
+        : theme.colors.border.field.default,
+    '&:hover': {
+        backgroundColor: theme.colors.background.fifth,
+    },
+    borderRadius: theme.grid.radius.default,
+    boxShadow: 'none',
+    fontFamily: theme.font.family.sans,
+});
+export const AuthorAffiliations = ({ author, affiliations, onSave, onAdd, onRemove, }) => {
+    const theme = useContext(ThemeContext);
+    const [searchText, setSearchText] = useState('');
+    const affiliationMap = useMemo(() => new Map(affiliations.map((a) => [a.id, a])), [affiliations]);
+    const authorAffiliations = useMemo(() => {
+        var _a;
+        return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.map((i) => affiliationMap.get(i));
+    }, [affiliationMap, author]);
+    const otherAffiliations = useMemo(() => {
+        var _a;
+        const copy = new Map(affiliationMap);
+        (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.forEach((i) => copy.delete(i));
+        return Array.from(copy.values());
+    }, [affiliationMap, author]);
+    const options = otherAffiliations.map((a) => ({
+        value: a.id,
+        label: affiliationLabel(a),
+    }));
+    const handleChange = (id) => {
+        const affiliation = affiliationMap.get(id);
+        if (!affiliation) {
+            return;
+        }
+        onAdd(affiliation);
+        setSearchText('');
+    };
+    const handleCreate = (institution) => {
+        const affiliation = {
+            id: generateID(ObjectTypes.Affiliation),
+            addressLine1: '',
+            city: '',
+            country: '',
+            county: '',
+            department: '',
+            institution: institution,
+            postCode: '',
+            priority: 0,
+        };
+        onSave(affiliation);
+        onAdd(affiliation);
+    };
+    return (React.createElement(React.Fragment, null,
+        authorAffiliations.map((a) => (React.createElement(AffiliationButton, { key: `${author.id}-${a.id}`, affiliation: a, onSave: onSave, onRemove: () => onRemove(a) }))),
+        React.createElement(CreatableSelect, { options: options, isMulti: false, isClearable: true, value: null, inputValue: searchText, components: {
+                IndicatorsContainer: AddAffiliationIndicator,
+            }, placeholder: "Begin typing to add affiliation", noOptionsMessage: () => 'Type the name of an institution', onChange: (i) => i && handleChange(i.value), onInputChange: setSearchText, onCreateOption: (v) => v && handleCreate(v), isValidNewOption: (t) => !!t, styles: {
+                control: (provided, state) => (Object.assign(Object.assign({}, provided), getSelectStyles(state.isFocused, theme))),
+            } })));
+};

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

@@ -0,0 +1,67 @@
+/*!
+ * © 2019 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.
+ */
+import { CheckboxField, CheckboxLabel, TextField, TextFieldGroupContainer, TextFieldLabel, } from '@manuscripts/style-guide';
+import { Field, Formik } from 'formik';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { ChangeHandlingForm } from './ChangeHandlingForm';
+export const LabelText = styled.div `
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} / 1
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.2px;
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+export const Fieldset = styled.fieldset `
+  padding: 0;
+  margin: 0;
+  border: none;
+`;
+const OrcidContainer = styled.div `
+  margin: 16px 0 0;
+`;
+export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, }) => {
+    const formRef = useRef(null);
+    if (actionsRef && !actionsRef.current) {
+        actionsRef.current = {
+            reset: () => {
+                var _a;
+                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+            },
+        };
+    }
+    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: false, innerRef: formRef }, (formik) => {
+        const isAuthor = formik.values.role === 'author';
+        return (React.createElement(ChangeHandlingForm, { onChange: onChange },
+            React.createElement(Fieldset, null,
+                React.createElement(TextFieldGroupContainer, null,
+                    React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(TextField, Object.assign({ id: 'given-name', placeholder: 'Given name' }, props.field)))),
+                    React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(TextField, Object.assign({ id: 'family-name', placeholder: 'Family name' }, props.field))))),
+                React.createElement(Field, { name: 'email', type: 'email' }, (props) => (React.createElement(TextField, Object.assign({ id: 'email', placeholder: 'Email address' }, props.field)))),
+                React.createElement(CheckboxLabel, { disabled: !isAuthor },
+                    React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, Object.assign({ id: 'isCorresponding', checked: props.field.value, disabled: !isAuthor }, props.field)))),
+                    React.createElement(LabelText, null, "Corresponding Author")),
+                React.createElement(CheckboxLabel, null,
+                    React.createElement(Field, { name: 'role', type: 'checkbox' }, (props) => (React.createElement(CheckboxField, { name: 'role', checked: isAuthor, onChange: (e) => {
+                            formik.setFieldValue(props.field.name, e.target.checked ? 'author' : 'other', false);
+                        } }))),
+                    React.createElement(LabelText, null, "Include in Authors List")),
+                React.createElement(OrcidContainer, null,
+                    React.createElement(TextFieldLabel, null,
+                        React.createElement(LabelText, null, "ORCID"),
+                        React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(TextField, Object.assign({ id: 'orcid', placeholder: 'https://orcid.org/...' }, props.field)))))))));
+    }));
+};

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

@@ -0,0 +1,50 @@
+import ContributorDetails from '@manuscripts/assets/react/ContributorDetailsPlaceholder';
+import React from 'react';
+import styled from 'styled-components';
+const OuterContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+`;
+const InnerContainer = styled.div `
+  text-align: center;
+  max-width: 480px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+`;
+const Placeholder = styled.div `
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+`;
+const Action = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  font-weight: ${(props) => props.theme.font.weight.medium};
+  letter-spacing: -0.5px;
+`;
+const Message = styled.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};
+
+  @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;
+  }
+`;
+export const AuthorFormPlaceholder = () => (React.createElement(OuterContainer, { "data-cy": 'author-details' },
+    React.createElement(InnerContainer, null,
+        React.createElement(Placeholder, null,
+            React.createElement(ContributorDetails, null)),
+        React.createElement(React.Fragment, null,
+            React.createElement(Action, null, "Author Details"),
+            React.createElement(Message, null, "Select an author from the list to display their details here.")))));

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

@@ -0,0 +1,33 @@
+/*!
+ * © 2019 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.
+ */
+import { DragLayer } from '@manuscripts/style-guide';
+import React from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import styled from 'styled-components';
+import { DraggableAuthor } from './DraggableAuthor';
+const AuthorListContainer = styled.div `
+  flex: 1;
+  overflow-y: visible;
+`;
+export const AuthorList = ({ author, authors, onSelect, moveAuthor, }) => {
+    return (React.createElement(DndProvider, { backend: HTML5Backend },
+        React.createElement(AuthorListContainer, null,
+            React.createElement(DragLayer, null),
+            authors.map((a) => {
+                return (React.createElement(DraggableAuthor, { key: a.id, author: a, isSelected: a.id === (author === null || author === void 0 ? void 0 : author.id), onClick: () => onSelect(a), moveAuthor: moveAuthor }));
+            }))));
+};

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

@@ -0,0 +1,196 @@
+/*!
+ * © 2024 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.
+ */
+import AddIcon from '@manuscripts/assets/react/AddIcon';
+import { buildBibliographicName, generateID, ObjectTypes, } from '@manuscripts/json-schema';
+import { CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { isEqual } from 'lodash';
+import React, { useReducer, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { arrayReducer } from '../../lib/array-reducer';
+import { authorComparator, } from '../../lib/authors';
+import { AuthorActions } from './AuthorActions';
+import { AuthorAffiliations } from './AuthorAffiliations';
+import { AuthorDetailsForm } from './AuthorDetailsForm';
+import { AuthorFormPlaceholder } from './AuthorFormPlaceholder';
+import { AuthorList } from './AuthorList';
+import { SaveAuthorConfirmationDialog } from './SaveAuthorConfirmationDialog';
+const AddAuthorButton = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
+  margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  cursor: pointer;
+`;
+const ActionTitle = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const FormLabel = styled.legend `
+  margin-top: 12px;
+  margin-bottom: 12px;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.xlarge} /
+    ${(props) => props.theme.font.lineHeight.large}
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.4px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const AuthorForms = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 3}px;
+  padding-right: ${(props) => props.theme.grid.unit * 3}px;
+`;
+const authorsReducer = arrayReducer((a, b) => a.id === b.id);
+const affiliationsReducer = arrayReducer((a, b) => a.id === b.id);
+const normalize = (author) => {
+    return {
+        id: author.id,
+        role: author.role,
+        affiliations: author.affiliations || [],
+        bibliographicName: author.bibliographicName,
+        email: author.email || '',
+        isCorresponding: author.isCorresponding || false,
+        ORCIDIdentifier: author.ORCIDIdentifier || '',
+        priority: author.priority,
+        isJointContributor: author.isJointContributor || false,
+    };
+};
+export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author, onSaveAuthor, onDeleteAuthor, onSaveAffiliation, }) => {
+    const [isOpen, setOpen] = useState(true);
+    const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
+    const valuesRef = useRef();
+    const actionsRef = useRef();
+    const [authors, dispatchAuthors] = useReducer(authorsReducer, $authors.sort(authorComparator));
+    const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, $affiliations);
+    const [selection, setSelection] = useState(author);
+    const handleSelect = (author) => {
+        const values = valuesRef.current;
+        if (values && selection && !isEqual(values, normalize(selection))) {
+            setShowConfirmationDialog(true);
+        }
+        else {
+            setSelection(author);
+        }
+    };
+    const handleSaveAuthor = (values) => {
+        if (!values || !selection) {
+            return;
+        }
+        const author = Object.assign(Object.assign({}, selection), values);
+        onSaveAuthor(author);
+        setSelection(author);
+        setShowConfirmationDialog(false);
+        dispatchAuthors({
+            type: 'update',
+            items: [author],
+        });
+    };
+    const handleMoveAuthor = (from, to) => {
+        const copy = [...authors];
+        const order = copy.map((_, i) => (i === from ? to : i));
+        copy.sort((a, b) => order[authors.indexOf(a)] - order[authors.indexOf(b)]);
+        copy.forEach((a, i) => {
+            if (a.priority !== i) {
+                a.priority = i;
+                onSaveAuthor(a);
+            }
+        });
+        dispatchAuthors({
+            type: 'set',
+            state: copy,
+        });
+    };
+    const handleAddAuthor = () => {
+        const name = buildBibliographicName({ given: '', family: '' });
+        const author = {
+            id: generateID(ObjectTypes.Contributor),
+            role: 'author',
+            affiliations: [],
+            bibliographicName: name,
+            email: '',
+            isCorresponding: false,
+            ORCIDIdentifier: '',
+            priority: authors.length,
+            isJointContributor: false,
+        };
+        onSaveAuthor(author);
+        setSelection(author);
+        dispatchAuthors({
+            type: 'update',
+            items: [author],
+        });
+    };
+    const handleDeleteAuthor = () => {
+        if (!selection) {
+            return;
+        }
+        onDeleteAuthor(selection);
+        setSelection(undefined);
+        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) {
+            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 handleResetAuthor = () => {
+        var _a;
+        (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        setShowConfirmationDialog(false);
+    };
+    const handleChangeAuthor = (values) => {
+        valuesRef.current = values;
+    };
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false), shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, null,
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: () => setOpen(false), "data-cy": 'modal-close-button' })),
+            React.createElement(ModalBody, null,
+                React.createElement(ModalSidebar, { "data-cy": 'authors-sidebar' },
+                    React.createElement(ModalSidebarHeader, null,
+                        React.createElement(ModalSidebarTitle, null, "Authors")),
+                    React.createElement(SidebarContent, null,
+                        React.createElement(AddAuthorButton, { onClick: handleAddAuthor },
+                            React.createElement(AddIcon, { width: 40, height: 40 }),
+                            React.createElement(ActionTitle, null, "Add Author")),
+                        React.createElement(AuthorList, { author: selection, authors: authors, onSelect: handleSelect, moveAuthor: handleMoveAuthor }))),
+                React.createElement(ScrollableModalContent, null, selection ? (React.createElement(AuthorForms, null,
+                    React.createElement(SaveAuthorConfirmationDialog, { isOpen: showConfirmationDialog, onSave: () => handleSaveAuthor(valuesRef.current), onCancel: handleResetAuthor }),
+                    React.createElement(AuthorActions, { author: selection, onSave: () => handleSaveAuthor(valuesRef.current), onDelete: handleDeleteAuthor, onCancel: () => setOpen(false) }),
+                    React.createElement(FormLabel, null, "Details"),
+                    React.createElement(AuthorDetailsForm, { values: normalize(selection), onChange: handleChangeAuthor, onSave: handleSaveAuthor, actionsRef: actionsRef }),
+                    React.createElement(FormLabel, null, "Affiliations"),
+                    React.createElement(AuthorAffiliations, { author: selection, affiliations: affiliations, onSave: handleSaveAffiliation, onAdd: handleAddAffiliation, onRemove: handleRemoveAffiliation }))) : (React.createElement(AuthorFormPlaceholder, null)))))));
+};

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

@@ -0,0 +1,10 @@
+import { Form, useFormikContext } from 'formik';
+import React, { useEffect } from 'react';
+export const ChangeHandlingForm = (props) => {
+    const { values } = useFormikContext();
+    useEffect(() => {
+        var _a;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values);
+    }, [props.onChange, values]);
+    return React.createElement(Form, null, props.children);
+};

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

@@ -0,0 +1,16 @@
+import { Category, Dialog } from '@manuscripts/style-guide';
+import React from 'react';
+import { authorLabel } from '../../lib/authors';
+export const DeleteAuthorConfirmationDialog = ({ isOpen, author, onDelete, onCancel }) => {
+    const label = authorLabel(author);
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: 'Remove author', message: `Are you sure you want to remove ${label} from the authors list?`, actions: {
+            secondary: {
+                action: onDelete,
+                title: 'Delete',
+            },
+            primary: {
+                action: onCancel,
+                title: 'Cancel',
+            },
+        } }));
+};

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

@@ -0,0 +1,140 @@
+/*!
+ * © 2019 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.
+ */
+import CorrespondingAuthorBadge from '@manuscripts/assets/react/CorrespondingAuthorBadge';
+import VerticalEllipsis from '@manuscripts/assets/react/VerticalEllipsis';
+import { Avatar } from '@manuscripts/style-guide';
+import React, { useRef, useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import styled from 'styled-components';
+import { authorLabel } from '../../lib/authors';
+const AuthorContainer = styled.div `
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.25s;
+  border: 1px solid transparent;
+  border-left: 0;
+  border-right: 0;
+
+  &:hover,
+  &.active {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+
+  &.active {
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+
+  &.dragging {
+    visibility: hidden;
+  }
+
+  &.drop-before {
+    border-top-color: ${(props) => props.theme.colors.brand.dark};
+  }
+
+  &.drop-after {
+    border-bottom-color: ${(props) => props.theme.colors.brand.dark};
+  }
+`;
+const AvatarContainer = styled.div `
+  display: inline-flex;
+  position: relative;
+`;
+const AuthorBadge = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+const AuthorNotes = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  & ${AuthorBadge}:not(:last-child) {
+    right: -20%;
+  }
+`;
+const AuthorName = styled.div `
+  margin-left: 12px;
+  flex: 1;
+`;
+const DragHandle = styled(VerticalEllipsis) `
+  cursor: move;
+`;
+const BEFORE = {
+    id: 'before',
+    diff: -0.5,
+};
+const AFTER = {
+    id: 'after',
+    diff: 0.5,
+};
+const getDropPosition = (element, monitor) => {
+    const rect = element.getBoundingClientRect();
+    const middle = (rect.bottom - rect.top) / 2;
+    const cursor = monitor.getClientOffset();
+    return cursor.y > middle + rect.top ? AFTER : BEFORE;
+};
+export const DraggableAuthor = ({ author, isSelected, onClick, moveAuthor, }) => {
+    const [dropPosition, setDropPosition] = useState();
+    const ref = useRef(null);
+    const [{ isDragging }, dragRef] = useDrag({
+        item: {
+            type: 'author',
+            author,
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const [{ isOver }, dropRef] = useDrop({
+        accept: 'author',
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+        hover: (item, monitor) => {
+            if (!ref.current) {
+                return;
+            }
+            const position = getDropPosition(ref.current, monitor);
+            setDropPosition(position);
+        },
+        drop: (item, monitor) => {
+            if (!ref.current) {
+                return;
+            }
+            const position = getDropPosition(ref.current, monitor);
+            const from = item.author.priority;
+            const to = author.priority;
+            moveAuthor(from, to + position.diff);
+        },
+    });
+    dragRef(dropRef(ref));
+    const dragClass = isDragging ? 'dragging' : '';
+    const dropClass = isOver && dropPosition ? `drop-${dropPosition.id}` : '';
+    const activeClass = isSelected ? 'active' : '';
+    return (React.createElement(AuthorContainer, { ref: ref, className: `${dragClass} ${dropClass} ${activeClass}`, onClick: onClick },
+        React.createElement(AvatarContainer, null,
+            React.createElement(Avatar, { size: 36, color: '#6e6e6e' }),
+            React.createElement(AuthorNotes, null, author.isCorresponding && (React.createElement(AuthorBadge, null,
+                React.createElement(CorrespondingAuthorBadge, null))))),
+        React.createElement(AuthorName, null, authorLabel(author)),
+        isSelected && React.createElement(DragHandle, null)));
+};

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

@@ -0,0 +1,14 @@
+import { Category, Dialog } from '@manuscripts/style-guide';
+import React from 'react';
+export const SaveAuthorConfirmationDialog = ({ isOpen, onSave, onCancel }) => {
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
+            secondary: {
+                action: onCancel,
+                title: 'Discard',
+            },
+            primary: {
+                action: onSave,
+                title: 'Save',
+            },
+        } }));
+};

package/dist/es/configs/editor-views.js

@@ -19,7 +19,7 @@ import bibliographyElement from '../views/bibliography_element_editable';
 import blockquoteElement from '../views/blockquote_element_editable';
 import bulletList from '../views/bullet_list_editable';
 import citation from '../views/citation_editable';
-import contributorsSection from '../views/contributors';
+import contributors from '../views/contributors';
 import crossReference from '../views/cross_reference_editable';
 import empty from '../views/empty';
 import equation from '../views/equation_editable';
@@ -54,7 +54,7 @@ export default (props, dispatch) => {
         bullet_list: bulletList(props),
         citation: citation(props, dispatch),
         cross_reference: crossReference(props, dispatch),
-        contributors: contributorsSection(props, dispatch),
+        contributors: contributors(props, dispatch),
         affiliations: affiliationsSection(props, dispatch),
         affiliation: affiliation(props, dispatch),
         equation: equation(props),

package/dist/es/lib/array-reducer.js

@@ -36,6 +36,8 @@ export const arrayReducer = (isEqual = (a, b) => a === b) => {
                 return handleUpdate(state, action.items);
             case 'delete':
                 return handleDelete(state, action.item);
+            case 'set':
+                return action.state;
         }
     };
 };