@manuscripts/style-guide 1.7.8-LEAN-3301 → 1.7.8-LEAN-3278

package/dist/cjs/components/icons/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeleteIcon = exports.PlusIcon = exports.PullQuoteIcon = exports.BlockQuoteIcon = exports.LeftArrow = exports.AnnotatorIcon = exports.ReadingIcon = exports.EditIcon = exports.UnsupportedFormatFileIcon = exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.AddComment = exports.CloseOIcon = exports.CloseIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
+exports.PlusIcon = exports.PullQuoteIcon = exports.BlockQuoteIcon = exports.LeftArrow = exports.AnnotatorIcon = exports.ReadingIcon = exports.EditIcon = exports.UnsupportedFormatFileIcon = exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.AddComment = exports.CloseOIcon = exports.CloseIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthor", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_icon_active_1 = require("./add-icon-active");
@@ -83,5 +83,3 @@ var pull_quote_icon_1 = require("./pull-quote-icon");
 Object.defineProperty(exports, "PullQuoteIcon", { enumerable: true, get: function () { return __importDefault(pull_quote_icon_1).default; } });
 var plus_icon_1 = require("./plus-icon");
 Object.defineProperty(exports, "PlusIcon", { enumerable: true, get: function () { return __importDefault(plus_icon_1).default; } });
-var delete_icon_1 = require("./delete-icon");
-Object.defineProperty(exports, "DeleteIcon", { enumerable: true, get: function () { return delete_icon_1.DeleteIcon; } });

package/dist/cjs/index.js

@@ -33,6 +33,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorsDecoder = exports.useDeepCompareCallback = exports.useDeepCompareMemo = void 0;
+__exportStar(require("./components/AffiliationsEditor"), exports);
+__exportStar(require("./components/AuthorForm"), exports);
+__exportStar(require("./components/AuthorName"), exports);
+__exportStar(require("./components/AuthorsDND"), exports);
 __exportStar(require("./components/AlertMessage"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/RadioButton"), exports);
@@ -47,8 +51,6 @@ __exportStar(require("./components/Resizer"), exports);
 __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/StyledModal"), exports);
 __exportStar(require("./components/TableFootnotesSelector"), exports);
-__exportStar(require("./components/Sidebar"), exports);
-__exportStar(require("./components/DragLayer"), exports);
 __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/TextFieldContainer"), exports);
 __exportStar(require("./components/TextFieldError"), exports);
@@ -75,9 +77,11 @@ __exportStar(require("./hooks/use-menus"), exports);
 var use_deep_compare_1 = require("./hooks/use-deep-compare");
 Object.defineProperty(exports, "useDeepCompareMemo", { enumerable: true, get: function () { return use_deep_compare_1.useDeepCompareMemo; } });
 Object.defineProperty(exports, "useDeepCompareCallback", { enumerable: true, get: function () { return use_deep_compare_1.useDeepCompareCallback; } });
+__exportStar(require("./lib/authors"), exports);
 __exportStar(require("./lib/capabilities"), exports);
 __exportStar(require("./lib/files"), exports);
 __exportStar(require("./lib/comments"), exports);
 __exportStar(require("./lib/menus"), exports);
 var errors_decoder_1 = require("./lib/errors-decoder");
 Object.defineProperty(exports, "errorsDecoder", { enumerable: true, get: function () { return __importDefault(errors_decoder_1).default; } });
+__exportStar(require("./types"), exports);

package/dist/cjs/lib/authors.js

@@ -0,0 +1,110 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.affiliationsOptions = exports.affiliationLabel = exports.isJointFirstAuthor = exports.buildAuthorsAndAffiliations = exports.buildAffiliationsMap = exports.buildAuthorAffiliations = exports.buildAffiliationIDs = exports.buildAuthorPriority = exports.buildSortedAuthors = void 0;
+const json_schema_1 = require("@manuscripts/json-schema");
+const getModelsByType = (modelMap, objectType) => {
+    const output = [];
+    for (const model of modelMap.values()) {
+        if (model.objectType === objectType) {
+            output.push(model);
+        }
+    }
+    return output;
+};
+const buildSortedAuthors = (modelMap) => {
+    return getModelsByType(modelMap, json_schema_1.ObjectTypes.Contributor)
+        .filter((item) => item.role === 'author')
+        .sort((a, b) => Number(a.priority) - Number(b.priority));
+};
+exports.buildSortedAuthors = buildSortedAuthors;
+const buildAuthorPriority = (authors) => {
+    if (!authors.length) {
+        return 0;
+    }
+    const priorities = authors.map((author) => Number(author.priority));
+    return Math.max(...priorities) + 1;
+};
+exports.buildAuthorPriority = buildAuthorPriority;
+const buildAffiliationIDs = (authors) => {
+    const ids = [];
+    authors.forEach((author) => {
+        if (author.affiliations) {
+            author.affiliations.forEach((id) => {
+                ids.push(id);
+            });
+        }
+    });
+    return ids.filter((value, index) => ids.indexOf(value) === index);
+};
+exports.buildAffiliationIDs = buildAffiliationIDs;
+const buildAuthorAffiliations = (authors, affiliations, uniqueAffiliationIDs) => {
+    const items = new Map();
+    authors.forEach((author) => {
+        items.set(author._id, (author.affiliations || []).map((id) => {
+            return {
+                ordinal: uniqueAffiliationIDs.indexOf(id) + 1,
+                data: affiliations.get(id),
+            };
+        }));
+    });
+    return items;
+};
+exports.buildAuthorAffiliations = buildAuthorAffiliations;
+const buildAffiliationsMap = (affiliationIDs, modelMap) => new Map(affiliationIDs.map((id) => [
+    id,
+    modelMap.get(id),
+]));
+exports.buildAffiliationsMap = buildAffiliationsMap;
+const buildAuthorsAndAffiliations = (modelMap) => {
+    const authors = (0, exports.buildSortedAuthors)(modelMap);
+    const affiliationIDs = (0, exports.buildAffiliationIDs)(authors);
+    const affiliations = (0, exports.buildAffiliationsMap)(affiliationIDs, modelMap);
+    const authorAffiliations = (0, exports.buildAuthorAffiliations)(authors, affiliations, affiliationIDs);
+    return {
+        affiliations,
+        authors,
+        authorAffiliations,
+    };
+};
+exports.buildAuthorsAndAffiliations = buildAuthorsAndAffiliations;
+const isJointFirstAuthor = (authors, index) => {
+    const author = index === 0 ? authors[index] : authors[index - 1];
+    return Boolean(author.isJointContributor);
+};
+exports.isJointFirstAuthor = isJointFirstAuthor;
+const affiliationLabel = (affiliation) => {
+    const { department, institution = '' } = affiliation;
+    if (!institution) {
+        return '(unknown institution)';
+    }
+    return department ? `${institution} (${department})`.trim() : institution;
+};
+exports.affiliationLabel = affiliationLabel;
+const affiliationsOptions = (affiliations, authorAffiliations) => {
+    if (!authorAffiliations) {
+        return (0, exports.affiliationsOptions)(affiliations, []);
+    }
+    const authorAffiliationsIds = new Set(authorAffiliations.map((authorAffiliation) => authorAffiliation.data._id));
+    return Array.from(affiliations.values())
+        .filter((affiliation) => !authorAffiliationsIds.has(affiliation._id))
+        .map((affiliation) => ({
+        value: affiliation._id,
+        label: (0, exports.affiliationLabel)(affiliation) || '',
+    }));
+};
+exports.affiliationsOptions = affiliationsOptions;

package/dist/cjs/lib/capabilities.js

@@ -23,6 +23,7 @@ const getCapabilities = (project, profile, role, actions) => {
     const allowed = (action) => !!(actions === null || actions === void 0 ? void 0 : actions.includes(action));
     return {
         handleSuggestion: isOwner() || isEditor() || isWriter(),
+        editWithoutTracking: isWriter(),
         rejectOwnSuggestion: !isViewer(),
         createSuggestion: !isViewer(),
         viewSuggestion: true,
@@ -52,7 +53,6 @@ const getCapabilities = (project, profile, role, actions) => {
         putOnHoldTask: isProdEditor(),
         changeDueDate: isProdEditor() && allowed(Actions.updateDueDate),
         previewAccess: true,
-        editNotTracked: false,
         accessEditor: true,
         formatArticle: !isViewer(),
         editArticle: !isViewer(),

package/dist/cjs/lib/formatAddress.js

@@ -0,0 +1,31 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = (affiliation) => {
+    const { department, institution, addressLine1, city, county, country, postCode, } = affiliation;
+    return [
+        department,
+        institution,
+        addressLine1,
+        city,
+        county,
+        country,
+        postCode,
+    ]
+        .filter(Boolean)
+        .join(', ');
+};

package/dist/cjs/lib/name.js

@@ -0,0 +1,26 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initials = void 0;
+const initials = (name) => name.given
+    ? name.given
+        .trim()
+        .split(' ')
+        .map((part) => part.substr(0, 1).toUpperCase() + '.')
+        .join('')
+    : '';
+exports.initials = initials;

package/dist/cjs/types.js

@@ -0,0 +1,17 @@
+"use strict";
+/*!
+ * © 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/es/components/AffiliationsEditor/AffiliationsEditor.js

@@ -0,0 +1,34 @@
+/*!
+ * © 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 React, { useCallback, useState } from 'react';
+import { affiliationsOptions } from '../../lib/authors';
+import AffiliationsEditorView from './AffiliationsEditorView';
+const AffiliationsEditor = ({ affiliations, authorAffiliations, addAuthorAffiliation, updateAffiliation, removeAuthorAffiliation, components, styleOverrides, }) => {
+    const [searchText, setSearchText] = useState('');
+    const handleChoose = useCallback((value) => {
+        if (value) {
+            const selectedAffiliation = value;
+            addAuthorAffiliation(selectedAffiliation.value);
+        }
+        setSearchText('');
+    }, [addAuthorAffiliation]);
+    const options = affiliationsOptions(affiliations, authorAffiliations);
+    const active = authorAffiliations
+        ? authorAffiliations.map((item) => item.data)
+        : [];
+    return (React.createElement(AffiliationsEditorView, { options: options, selected: active, updateAffiliation: updateAffiliation, removeAuthorAffiliation: removeAuthorAffiliation, components: components, styleOverrides: styleOverrides, handleChoose: handleChoose, handleInputChange: setSearchText, inputValue: searchText }));
+};
+export default AffiliationsEditor;

package/dist/es/components/AffiliationsEditor/AffiliationsEditorItem.js

@@ -0,0 +1,146 @@
+/*!
+ * © 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 Trashcan from '@manuscripts/assets/react/AnnotationRemove';
+import ArrowDownBlue from '@manuscripts/assets/react/ArrowDownBlue';
+import { Field, Form, Formik } from 'formik';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { affiliationLabel } from '../../lib/authors';
+import { AutoSaveInput } from '../AutoSaveInput';
+import { TextField } from '../TextField';
+const Section = styled.section `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  background: ${(props) => props.theme.colors.background.primary};
+  margin-bottom: 2px;
+  overflow: hidden;
+`;
+const Title = styled.h4 `
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  padding-right: 0.5rem;
+  background: ${(props) => props.isInvalid ? props.theme.colors.background.warning : 'transparent'};
+  color: ${(props) => props.isInvalid ? props.theme.colors.text.warning : 'inherit'};
+`;
+const DropdownIndicator = styled(ArrowDownBlue) `
+  border: 0;
+  border-radius: 50%;
+  margin-right: 0.6em;
+  min-width: 20px;
+`;
+const ToggleButton = styled.button `
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 1rem;
+  padding: 0.6em 0.5em;
+
+  outline: none;
+
+  &:focus {
+    color: ${(props) => props.theme.colors.button.primary.border.hover};
+  }
+
+  svg {
+    transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
+  }
+`;
+const RemoveButton = styled.button `
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  outline: none;
+
+  &:focus path {
+    fill: ${(props) => props.theme.colors.button.primary.color.hover};
+  }
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+  }
+`;
+const AffiliationsForm = styled(Form) `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  margin: 0.4rem 0.71rem 0.71rem;
+  overflow: hidden;
+`;
+const AffiliationsTextField = styled(TextField) `
+  border-radius: 0;
+  border-bottom: none;
+  border-right: none;
+  border-left: none;
+  background: transparent;
+  &:first-child {
+    border-top: none;
+  }
+
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+const Columns = styled.div `
+  display: flex;
+`;
+const Column = styled.div `
+  flex: 1 1 auto;
+  max-width: 50%;
+  border-top: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-left: 1px solid ${(props) => props.theme.colors.border.field.default};
+  &:first-child {
+    border-left: none;
+  }
+`;
+export const AffiliationsEditorItem = ({ affiliation, requestToggle, isOpen, updateAffiliation, removeAuthorAffiliation, }) => {
+    const remove = useCallback(() => {
+        removeAuthorAffiliation(affiliation);
+    }, [affiliation, removeAuthorAffiliation]);
+    const vivifiedAffiliation = Object.assign({ institution: '', department: '', addressLine1: '', addressLine2: '', addressLine3: '', city: '', county: '', country: '', postCode: '' }, affiliation);
+    const isInvalid = !vivifiedAffiliation.institution;
+    return (React.createElement(Section, null,
+        React.createElement(Title, { isInvalid: isInvalid },
+            React.createElement(ToggleButton, { type: "button", onClick: requestToggle, isOpen: isOpen },
+                React.createElement(DropdownIndicator, null,
+                    React.createElement(ArrowDownBlue, null)),
+                affiliationLabel(affiliation)),
+            React.createElement(RemoveButton, { type: "button", "aria-label": "Delete this affiliation", onClick: remove },
+                React.createElement(Trashcan, null))),
+        isOpen && (React.createElement(Formik, { initialValues: vivifiedAffiliation, onSubmit: updateAffiliation }, () => (React.createElement(AffiliationsForm, null,
+            React.createElement(Field, { name: "institution" }, (props) => (React.createElement(AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Institution Name", isInvalid: isInvalid })))),
+            React.createElement(Field, { name: "department" }, (props) => (React.createElement(AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Department" })))),
+            React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Street Address" })))),
+            React.createElement(Columns, null,
+                React.createElement(Column, null,
+                    React.createElement(Field, { name: "city" }, (props) => (React.createElement(AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "City" })))),
+                    React.createElement(Field, { name: "county" }, (props) => (React.createElement(AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "State / Province" }))))),
+                React.createElement(Column, null,
+                    React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Postal Code" })))),
+                    React.createElement(Field, { name: "country" }, (props) => (React.createElement(AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Country" }))))))))))));
+};
+export default AffiliationsEditorItem;

package/dist/es/components/AffiliationsEditor/AffiliationsEditorProfile.js

@@ -0,0 +1,34 @@
+/*!
+ * © 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 { ObjectTypes } from '@manuscripts/json-schema';
+import React, { useCallback, useState } from 'react';
+import AffiliationsEditorView from './AffiliationsEditorView';
+const AffiliationsEditorProfile = ({ affiliations, addAffiliation, updateAffiliation, removeAffiliation, components, styleOverrides, }) => {
+    const [searchText, setSearchText] = useState('');
+    const handleChoose = useCallback((value) => {
+        if (value) {
+            const selectedAffiliation = value;
+            addAffiliation(selectedAffiliation.value);
+        }
+        setSearchText('');
+    }, [addAffiliation]);
+    const affiliationsArr = Array.from(affiliations.values());
+    const updateUserProfileAffiliation = useCallback((data) => {
+        updateAffiliation(Object.assign(Object.assign({}, data), { objectType: ObjectTypes.UserProfileAffiliation }));
+    }, [updateAffiliation]);
+    return (React.createElement(AffiliationsEditorView, { options: [], selected: affiliationsArr, updateAffiliation: updateUserProfileAffiliation, removeAuthorAffiliation: removeAffiliation, components: components, styleOverrides: styleOverrides, handleChoose: handleChoose, handleInputChange: setSearchText, inputValue: searchText }));
+};
+export default AffiliationsEditorProfile;

package/dist/es/components/AffiliationsEditor/AffiliationsEditorView.js

@@ -0,0 +1,52 @@
+/*!
+ * © 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 React, { useContext, useState } from 'react';
+import CreatableSelect from 'react-select/creatable';
+import { ThemeContext } from 'styled-components';
+import { defaultAuthorFormComponents, } from '../AuthorForm/AuthorFormComponents';
+import { AffiliationsEditorItem } from './AffiliationsEditorItem';
+import { AddAffiliationIndicator, Container, Field, List } from './styles';
+const reactSelectComponents = {
+    IndicatorsContainer: AddAffiliationIndicator,
+};
+const AffiliationsEditorView = ({ options, selected, updateAffiliation, removeAuthorAffiliation, handleChoose, handleInputChange, inputValue, components, styleOverrides, }) => {
+    const { Legend } = Object.assign(Object.assign({}, defaultAuthorFormComponents), components);
+    const [currentSection, setCurrentSection] = useState('');
+    const requestOpen = (id) => {
+        setCurrentSection(id === currentSection ? '' : id);
+    };
+    const theme = useContext(ThemeContext);
+    return (React.createElement(Container, null,
+        React.createElement(Legend, null, "Affiliations"),
+        React.createElement(Field, null,
+            React.createElement(List, null, selected &&
+                selected.map((affiliation) => {
+                    const { _id } = affiliation;
+                    return (React.createElement(AffiliationsEditorItem, { key: _id, affiliation: affiliation, isOpen: currentSection === _id, requestToggle: () => requestOpen(_id), updateAffiliation: updateAffiliation, removeAuthorAffiliation: removeAuthorAffiliation }));
+                })),
+            React.createElement(CreatableSelect, { isMulti: false, isClearable: false, options: options, onInputChange: (t) => handleInputChange(t), inputValue: inputValue, onChange: handleChoose, value: null, placeholder: "Begin typing to add affiliation", isValidNewOption: (currentText) => !!currentText, components: reactSelectComponents, noOptionsMessage: () => 'Type the name of an institution', styles: {
+                    control: (provided, state) => (Object.assign(Object.assign({}, provided), { backgroundColor: state.isFocused
+                            ? theme.colors.background.fifth
+                            : theme.colors.background.primary, borderColor: state.isFocused
+                            ? 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 })),
+                    menu: (provided) => (Object.assign(Object.assign({}, provided), { zIndex: (styleOverrides && styleOverrides.menuZIndex) ||
+                            provided.zIndex })),
+                } }))));
+};
+export default AffiliationsEditorView;

package/dist/es/components/AffiliationsEditor/index.js

@@ -0,0 +1,17 @@
+/*!
+ * © 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.
+ */
+export { default as AffiliationsEditor } from './AffiliationsEditor';
+export { default as AffiliationsEditorProfile } from './AffiliationsEditorProfile';

package/dist/es/components/AffiliationsEditor/styles.js

@@ -0,0 +1,49 @@
+/*!
+ * © 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 AddAuthor from '@manuscripts/assets/react/AddAuthor';
+import React from 'react';
+import styled from 'styled-components';
+export const Container = styled.div `
+  margin: 0 1.89rem 1rem;
+`;
+export const Field = styled.div `
+  margin: 1rem 0;
+`;
+export const List = styled.div `
+  margin-bottom: 0.5rem;
+`;
+export const AddAffiliationContainer = styled.div `
+  padding-right: 0.71rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  circle,
+  use {
+    fill: ${(props) => props.theme.colors.brand.default};
+  }
+
+  path {
+    mask: none;
+  }
+`;
+export const AddAffiliationIndicator = () => (React.createElement(AddAffiliationContainer, null,
+    React.createElement(AddAuthor, null)));