@manuscripts/style-guide 1.7.10-LEAN-3301 → 1.7.10-LEAN-3415-2

package/dist/cjs/components/{DragLayer.js → FileManager/DragLayer.js}

@@ -1,32 +1,40 @@
 "use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.DragLayer = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_dnd_1 = require("react-dnd");
 const styled_components_1 = __importDefault(require("styled-components"));
-const FileContainer_1 = require("./FileManager/FileContainer");
-const FileCreatedDate_1 = require("./FileManager/FileCreatedDate");
-const FileName_1 = require("./FileManager/FileName");
-const Container = styled_components_1.default.div `
-  position: fixed;
-  pointer-events: none;
-  z-index: 999;
-  left: 0;
-  top: 0;
-  max-width: 400px;
-`;
-const DraggableFileContainer = (0, styled_components_1.default)(FileContainer_1.FileContainer) `
-  padding: 16px 32px;
-  background: #f2fbfc;
-  border: 1px solid #bce7f6;
-  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-`;
-const getItemStyles = (currentOffset) => {
-    if (!currentOffset) {
+const FileContainer_1 = require("./FileContainer");
+const FileCreatedDate_1 = require("./FileCreatedDate");
+const FileName_1 = require("./FileName");
+function getItemStyles(initialOffset, currentOffset) {
+    if (!initialOffset || !currentOffset) {
         return {
             display: 'none',
         };
@@ -37,15 +45,16 @@ const getItemStyles = (currentOffset) => {
         transform,
         WebkitTransform: transform,
     };
-};
+}
 const DragLayer = () => {
-    const { itemType, isDragging, item, currentOffset } = (0, react_dnd_1.useDragLayer)((monitor) => ({
+    const { itemType, isDragging, item, initialOffset, currentOffset } = (0, react_dnd_1.useDragLayer)((monitor) => ({
         item: monitor.getItem(),
         itemType: monitor.getItemType(),
+        initialOffset: monitor.getInitialSourceClientOffset(),
         currentOffset: monitor.getSourceClientOffset(),
         isDragging: monitor.isDragging(),
     }));
-    const renderItem = () => {
+    const renderItem = (0, react_1.useCallback)(() => {
         switch (itemType) {
             case 'file':
                 return (react_1.default.createElement(DraggableFileContainer, null,
@@ -54,10 +63,25 @@ const DragLayer = () => {
             default:
                 return null;
         }
-    };
+    }, [itemType, item]);
     if (!isDragging) {
         return null;
     }
-    return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
+    return (react_1.default.createElement(Container, { style: getItemStyles(initialOffset, currentOffset) }, renderItem()));
 };
 exports.DragLayer = DragLayer;
+const Container = styled_components_1.default.div `
+  position: fixed;
+  pointer-events: none;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  max-width: 400px;
+`;
+const DraggableFileContainer = (0, styled_components_1.default)(FileContainer_1.FileContainer) `
+  padding: 16px 32px;
+  background: #f2fbfc;
+  border: 1px solid #bce7f6;
+  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+`;

package/dist/cjs/components/FileManager/FileManager.js

@@ -26,10 +26,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileManager = exports.PermissionsContext = void 0;
 const react_1 = __importStar(require("react"));
 const index_1 = require("../../index");
-const DragLayer_1 = require("../DragLayer");
 const Inspector_1 = require("../Inspector");
 const InspectorSection_1 = require("../InspectorSection");
 const Tooltip_1 = require("../Tooltip");
+const DragLayer_1 = require("./DragLayer");
 const FileManagerProvider_1 = require("./FileManagerProvider");
 const InlineFilesSection_1 = require("./InlineFilesSection");
 const OtherFilesSection_1 = require("./OtherFilesSection");

package/dist/cjs/components/References/CitationEditor.js

@@ -34,7 +34,6 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
 const Dialog_1 = require("../Dialog");
-const icons_1 = require("../icons");
 const CitationViewer_1 = require("./CitationViewer");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ReferenceSearch_1 = require("./ReferenceSearch");
@@ -136,9 +135,7 @@ const CitationEditor = ({ query, rids, items, citationCounts, sources, onCite, o
                     react_1.default.createElement(CloseIconDark_1.default, { className: 'remove-icon' }))))))),
         react_1.default.createElement(ReferencesModal_1.ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: onSave, onDelete: onDelete }),
         react_1.default.createElement(Actions, null,
-            react_1.default.createElement(Button_1.IconTextButton, { onClick: onComment },
-                react_1.default.createElement(icons_1.AddComment, null),
-                react_1.default.createElement(AddCommentButtonText, null, "Add Comment")),
+            react_1.default.createElement(Button_1.IconTextButton, null),
             react_1.default.createElement(Button_1.ButtonGroup, null,
                 react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Done"),
                 react_1.default.createElement(Button_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation")))));

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,8 +33,13 @@ 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/ContextMenu"), exports);
 __exportStar(require("./components/RadioButton"), exports);
 __exportStar(require("./components/AutoSaveInput"), exports);
 __exportStar(require("./components/Avatar"), exports);
@@ -47,8 +52,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 +78,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/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;