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

package/dist/es/plugins/affiliations.js

@@ -18,8 +18,7 @@ import { isEqual } from 'lodash';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { authorComparator, } from '../lib/authors';
-import { isInit } from '../lib/plugins';
-import { isDeleted, isPendingInsert } from '../lib/track-changes-utils';
+import { isDeleted } from '../lib/track-changes-utils';
 export const affiliationsKey = new PluginKey('affiliations');
 let id = 1;
 export const buildPluginState = (doc, $old) => {
@@ -45,9 +44,12 @@ export const buildPluginState = (doc, $old) => {
         return $old;
     }
     const iAffiliations = new Set();
-    contributors.sort(authorComparator).forEach((attrs) => {
+    contributors
+        .filter((contrib) => !deletedContribId.has(contrib.id))
+        .sort(authorComparator)
+        .forEach((attrs) => {
         attrs.affiliations.forEach((aff) => {
-            !deletedContribId.has(attrs.id) && iAffiliations.add(aff);
+            iAffiliations.add(aff);
         });
     });
     const indexedAffiliationIds = new Map([...iAffiliations].map((id, i) => [id, i + 1]));
@@ -83,41 +85,6 @@ export default () => {
                 }
             },
         },
-        appendTransaction(transactions, oldState, newState) {
-            const affs = affiliationsKey.getState(newState);
-            if (!affs || !transactions.find((tr) => tr.docChanged || isInit(tr))) {
-                return;
-            }
-            const $old = affiliationsKey.getState(oldState);
-            const affiliations = new Map();
-            newState.doc.descendants((node, pos) => {
-                if (isAffiliationNode(node)) {
-                    affiliations.set(node.attrs.id, [node, pos]);
-                }
-            });
-            const deleteIDs = [];
-            for (const [id] of $old.indexedAffiliationIds.entries()) {
-                if (!affs.indexedAffiliationIds.has(id)) {
-                    deleteIDs.push(id);
-                }
-            }
-            if (!deleteIDs.length) {
-                return;
-            }
-            const tr = newState.tr;
-            tr.setMeta('origin', 'affiliations');
-            for (const id of deleteIDs) {
-                const affiliation = affiliations.get(id);
-                if (!affiliation) {
-                    continue;
-                }
-                const [node, pos] = affiliation;
-                if (node && !isPendingInsert(node)) {
-                    tr.delete(pos, pos + node.nodeSize);
-                }
-            }
-            return tr;
-        },
         props: {
             decorations: (state) => { var _a; return (_a = affiliationsKey.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations; },
         },

package/dist/es/useEditor.js

@@ -42,7 +42,6 @@ export const useEditor = (externalProps) => {
                 const localVersion = getVersion(view.current.state);
                 const since = yield collabProvider.stepsSince(localVersion);
                 if (since && since.version <= localVersion) {
-                    console.log('detected run away update of document');
                     return;
                 }
                 if ((since === null || since === void 0 ? void 0 : since.steps.length) && since.clientIDs.length) {

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.7.7';
+export const VERSION = '2.7.8-LEAN-4213.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/affiliations.js

@@ -13,19 +13,101 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ContextMenu } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
-import { affiliationName } from '../lib/authors';
-import { addTrackChangesAttributes } from '../lib/track-changes-utils';
-import { findChildByID } from '../lib/view';
+import { AffiliationsModal, } from '../components/affiliations/AffiliationsModal';
+import { affiliationName, } from '../lib/authors';
+import { addTrackChangesAttributes, isDeleted, } from '../lib/track-changes-utils';
+import { deleteNode, findChildByID, findChildrenAttrsByType, updateNodeAttrs, } from '../lib/view';
 import { affiliationsKey } from '../plugins/affiliations';
 import { selectedSuggestionKey } from '../plugins/selected-suggestion';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
 export class AffiliationsView extends BlockView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
         this.stopEvent = () => true;
+        this.handleClick = (event) => {
+            const element = event.target;
+            const item = element.closest('.affiliation');
+            if (item) {
+                const node = findChildByID(this.view, item.id);
+                if (!node) {
+                    return;
+                }
+                const view = this.view;
+                const tr = view.state.tr;
+                tr.setSelection(NodeSelection.create(view.state.doc, node.pos));
+                view.dispatch(tr);
+            }
+        };
+        this.insertAffiliationNode = (attrs) => {
+            const pos = this.getPos();
+            const tr = this.view.state.tr;
+            const node = schema.nodes.affiliation.create(attrs);
+            this.view.dispatch(tr.insert(pos + 1, node));
+        };
+        this.handleSaveAffiliation = (affiliation) => {
+            const update = updateNodeAttrs(this.view, schema.nodes.affiliation, affiliation);
+            if (!update) {
+                this.insertAffiliationNode(affiliation);
+            }
+        };
+        this.handleDeleteAffiliation = (affiliation) => {
+            deleteNode(this.view, affiliation.id);
+        };
+        this.handleEdit = (addNew) => {
+            var _a;
+            this.props.popper.destroy();
+            const contributors = findChildrenAttrsByType(this.view, schema.nodes.contributor);
+            const affiliations = findChildrenAttrsByType(this.view, schema.nodes.affiliation);
+            const componentProps = {
+                authors: contributors,
+                affiliations,
+                onSaveAffiliation: this.handleSaveAffiliation,
+                onDeleteAffiliation: this.handleDeleteAffiliation,
+                onUpdateAuthors: this.handleUpdateAuthors,
+                addNewAffiliation: addNew,
+            };
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
+            this.popper = ReactSubView(this.props, AffiliationsModal, componentProps, this.node, this.getPos, this.view);
+            this.container.appendChild(this.popper);
+        };
+        this.showContextMenu = () => {
+            const can = this.props.getCapabilities();
+            const componentProps = {
+                actions: [],
+            };
+            if (can.editArticle) {
+                componentProps.actions.push({
+                    label: 'New Affiliation',
+                    action: () => this.handleEdit(true),
+                    icon: 'AddOutline',
+                });
+                componentProps.actions.push({
+                    label: 'Edit',
+                    action: () => this.handleEdit(),
+                    icon: 'Edit',
+                });
+            }
+            this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            return this.contextMenu;
+        };
+        this.selectNode = () => {
+            this.dom.classList.add('ProseMirror-selectednode');
+            if (!isDeleted(this.node)) {
+                this.handleEdit(true);
+            }
+        };
+        this.actionGutterButtons = () => [this.showContextMenu()];
+        this.handleUpdateAuthors = (authors) => {
+            authors.forEach((author) => {
+                updateNodeAttrs(this.view, schema.nodes.contributor, author);
+            });
+        };
     }
     createElement() {
         this.container = document.createElement('div');
@@ -84,20 +166,6 @@ export class AffiliationsView extends BlockView {
         const index2 = aff2.index || 10000;
         return index1 - index2;
     }
-    handleClick(event) {
-        const element = event.target;
-        const item = element.closest('.affiliation');
-        if (item) {
-            const node = findChildByID(this.view, item.id);
-            if (!node) {
-                return;
-            }
-            const view = this.view;
-            const tr = view.state.tr;
-            tr.setSelection(NodeSelection.create(view.state.doc, node.pos));
-            view.dispatch(tr);
-        }
-    }
     updateSelection() {
         var _a;
         const state = this.view.state;

package/dist/es/views/contributors.js

@@ -199,11 +199,11 @@ export class ContributorsView extends BlockView {
                 affiliations,
                 onSaveAuthor: this.handleSaveAuthor,
                 onDeleteAuthor: this.handleDeleteAuthor,
-                onSaveAffiliation: this.handleSaveAffiliation,
                 addNewAuthor: addNew,
             };
             (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
             this.popper = ReactSubView(this.props, AuthorsModal, componentProps, this.node, this.getPos, this.view);
+            console.dir(this.popper);
             this.container.appendChild(this.popper);
         };
         this.handleSaveAuthor = (author) => {
@@ -215,14 +215,6 @@ export class ContributorsView extends BlockView {
         this.handleDeleteAuthor = (author) => {
             deleteNode(this.view, author.id);
         };
-        this.handleSaveAffiliation = (affiliation) => {
-            if (!findChildByID(this.view, affiliation.id)) {
-                this.insertAffiliationNode(affiliation);
-            }
-            else {
-                updateNodeAttrs(this.view, schema.nodes.affiliation, affiliation);
-            }
-        };
         this.insertAuthorNode = (attrs) => {
             const parent = findChildByType(this.view, schema.nodes.contributors);
             const tr = this.view.state.tr;

package/dist/types/components/{authors → affiliations}/AffiliationForm.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import { AffiliationAttrs } from '../../lib/authors';
+export interface FormActions {
+    reset: () => void;
+}
 export interface AffiliationFormProps {
     values: AffiliationAttrs;
     onSave: (values: AffiliationAttrs) => void;
+    onChange: (values: AffiliationAttrs) => void;
+    actionsRef?: React.MutableRefObject<FormActions | undefined>;
 }
 export declare const AffiliationForm: React.FC<AffiliationFormProps>;

package/dist/types/components/affiliations/AffiliationItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AffiliationAttrs } from '../../lib/authors';
+export interface AffiliationContainerProps {
+    affiliation: AffiliationAttrs;
+    isSelected: boolean;
+    onClick: () => void;
+    onDelete: () => void;
+    showSuccessIcon?: boolean;
+}
+export declare const AffiliationItem: React.FC<AffiliationContainerProps>;

package/dist/types/components/affiliations/AffiliationList.d.ts

@@ -0,0 +1,26 @@
+/*!
+ * © 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 from 'react';
+import { AffiliationAttrs } from '../../lib/authors';
+interface AffiliationListProps {
+    affiliation?: AffiliationAttrs;
+    affiliations: AffiliationAttrs[];
+    onSelect: (item: AffiliationAttrs) => void;
+    onDelete: () => void;
+    lastSavedAffiliationId?: string;
+}
+export declare const AffiliationList: React.FC<AffiliationListProps>;
+export {};

package/dist/types/components/affiliations/AffiliationsModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AffiliationAttrs, ContributorAttrs } from '../../lib/authors';
+export interface AffiliationsModalProps {
+    authors: ContributorAttrs[];
+    affiliations: AffiliationAttrs[];
+    onSaveAffiliation: (affiliation: AffiliationAttrs) => void;
+    onDeleteAffiliation: (affiliation: AffiliationAttrs) => void;
+    onUpdateAuthors: (authors: ContributorAttrs[]) => void;
+    addNewAffiliation?: boolean;
+}
+export declare const AffiliationsModal: React.FC<AffiliationsModalProps>;

package/dist/types/components/authors/AuthorDetailsForm.d.ts

@@ -26,6 +26,7 @@ interface AuthorDetailsFormProps {
     onSave: (values: ContributorAttrs) => void;
     actionsRef?: MutableRefObject<FormActions | undefined>;
     isEmailRequired?: boolean;
+    selectedAffiliations?: string[];
 }
 export declare const AuthorDetailsForm: React.FC<AuthorDetailsFormProps>;
 export {};

package/dist/types/components/authors/AuthorsModal.d.ts

@@ -15,13 +15,14 @@
  */
 import React from 'react';
 import { AffiliationAttrs, ContributorAttrs } from '../../lib/authors';
+export declare const authorsReducer: (state: ContributorAttrs[], action: import("../../lib/array-reducer").Action<ContributorAttrs>) => ContributorAttrs[];
+export declare const affiliationsReducer: (state: AffiliationAttrs[], action: import("../../lib/array-reducer").Action<AffiliationAttrs>) => AffiliationAttrs[];
 export interface AuthorsModalProps {
     author?: ContributorAttrs;
     authors: ContributorAttrs[];
     affiliations: AffiliationAttrs[];
     onSaveAuthor: (author: ContributorAttrs) => void;
     onDeleteAuthor: (author: ContributorAttrs) => void;
-    onSaveAffiliation: (affiliation: AffiliationAttrs) => void;
     addNewAuthor?: boolean;
 }
 export declare const AuthorsModal: React.FC<AuthorsModalProps>;

package/dist/types/components/dialog/ConfirmationDialog.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare enum DialogType {
+    SAVE = "save",
+    DELETE = "delete",
+    REQUIRED = "required"
+}
+interface ConfirmationDialogProps {
+    isOpen: boolean;
+    type: DialogType;
+    entityType: string;
+    onPrimary: () => void;
+    onSecondary: () => void;
+}
+export declare const ConfirmationDialog: React.FC<ConfirmationDialogProps>;
+export {};

package/dist/types/components/form/FormFooter.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const FormFooter: ({ onCancel }: {
+    onCancel: () => void;
+}) => React.JSX.Element;
+export default FormFooter;

package/dist/types/components/form/FormPlaceholder.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FormPlaceholderProps {
+    type: string;
+    title: string;
+    message: string;
+    placeholderIcon: React.ReactNode;
+}
+export declare const FormPlaceholder: React.FC<FormPlaceholderProps>;
+export {};

package/dist/types/components/{authors/AuthorActions.d.ts → form/ModalFormActions.d.ts}

@@ -1,10 +1,11 @@
 import React from 'react';
-export interface AuthorActionsProps {
+export interface FormActionsProps {
+    type: string;
     onSave: () => void;
     onDelete: () => void;
     showDeleteDialog: boolean;
     handleShowDeleteDialog: () => void;
-    newAuthor: boolean;
+    newEntity: boolean;
     isDisableSave: boolean;
 }
-export declare const AuthorActions: React.FC<AuthorActionsProps>;
+export declare const ModalFormActions: React.FC<FormActionsProps>;

package/dist/types/lib/dnd.d.ts

@@ -1,3 +1,3 @@
 import { DropTargetMonitor } from 'react-dnd';
 export type DropSide = 'before' | 'after';
-export declare const getDropSide: (element: Element, monitor: DropTargetMonitor) => "after" | "before";
+export declare const getDropSide: (element: Element, monitor: DropTargetMonitor) => "before" | "after";

package/dist/types/selection.d.ts

@@ -2,12 +2,18 @@ import { ManuscriptEditorState } from '@manuscripts/transform';
 import { Node, ResolvedPos } from 'prosemirror-model';
 import { Selection } from 'prosemirror-state';
 import { Mappable } from 'prosemirror-transform';
+interface NodesSelectionJSON {
+    type: 'inlineNodes';
+    startNode: ResolvedPos;
+    endNode: ResolvedPos;
+}
 export declare class NodesSelection extends Selection {
     $startNode: ResolvedPos;
     $endNode: ResolvedPos;
     constructor($from: ResolvedPos, $to: ResolvedPos);
     eq(selection: Selection): boolean;
     map(doc: Node, mapping: Mappable): Selection;
-    toJSON(): any;
+    toJSON(): NodesSelectionJSON;
 }
 export declare const getSelectionChangeGroup: (state: ManuscriptEditorState) => import("@manuscripts/track-changes-plugin").TrackedChange[] | undefined;
+export {};

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.7.7";
+export declare const VERSION = "2.7.8-LEAN-4213.0";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/affiliations.d.ts

@@ -14,11 +14,14 @@
  * limitations under the License.
  */
 import { AffiliationNode } from '@manuscripts/transform';
+import { AffiliationAttrs, ContributorAttrs } from '../lib/authors';
 import { Trackable } from '../types';
 import BlockView from './block_view';
 export declare class AffiliationsView extends BlockView<Trackable<AffiliationNode>> {
+    contextMenu: HTMLElement;
     version: string;
     container: HTMLElement;
+    popper?: HTMLElement;
     ignoreMutation: () => boolean;
     stopEvent: () => boolean;
     createElement(): void;
@@ -28,6 +31,14 @@ export declare class AffiliationsView extends BlockView<Trackable<AffiliationNod
     private sortAffiliations;
     private handleClick;
     private updateSelection;
+    insertAffiliationNode: (attrs: AffiliationAttrs) => void;
+    handleSaveAffiliation: (affiliation: AffiliationAttrs) => void;
+    handleDeleteAffiliation: (affiliation: AffiliationAttrs) => void;
+    handleEdit: (addNew?: boolean) => void;
+    showContextMenu: () => HTMLElement;
+    selectNode: () => void;
+    actionGutterButtons: () => HTMLElement[];
+    handleUpdateAuthors: (authors: ContributorAttrs[]) => void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<AffiliationsView>;
 export default _default;

package/dist/types/views/contributors.d.ts

@@ -42,7 +42,6 @@ export declare class ContributorsView extends BlockView<Trackable<ContributorsNo
     handleEdit: (id: string, addNew?: boolean) => void;
     handleSaveAuthor: (author: ContributorAttrs) => void;
     handleDeleteAuthor: (author: ContributorAttrs) => void;
-    handleSaveAffiliation: (affiliation: AffiliationAttrs) => void;
     insertAuthorNode: (attrs: ContributorAttrs) => void;
     insertAffiliationNode: (attrs: AffiliationAttrs) => void;
     actionGutterButtons: () => HTMLElement[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.7.7",
+  "version": "2.7.8-LEAN-4213.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.11",
-    "@manuscripts/style-guide": "2.0.29",
+    "@manuscripts/style-guide": "2.0.30-LEAN-4213.1",
     "@manuscripts/track-changes-plugin": "1.9.1",
     "@manuscripts/transform": "3.0.35",
     "@popperjs/core": "^2.11.8",

package/styles/AdvancedEditor.css

@@ -826,7 +826,8 @@ figure.block:has(.equation.set_attrs.selected-suggestion) {
 .contributors-list .separator {
   margin-right: 4px;
 }
-.block-contributors .tools-panel {
+.block-contributors .tools-panel,
+.block-affiliations .tools-panel {
   position: initial;
   display: flex;
   flex: 1;
@@ -1064,14 +1065,17 @@ th:hover > .table-context-menu-button,
   pointer-events: none;
 }
 
-.ProseMirror .block-contributors .context-menu > div {
+
+.ProseMirror .block-contributors .context-menu > div,
+.ProseMirror .block-affiliations .context-menu > div  {
   border-radius: 4px;
   border: 1px solid #c9c9c9;
   background: #fff;
   box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.3);
 }
 
-.ProseMirror .block-contributors .action-gutter {
-  right: 15px;
+.ProseMirror .block-contributors .action-gutter,
+.ProseMirror .block-affiliations .action-gutter {
+  right: 24px;
   pointer-events: none;
 }

package/styles/Editor.css

@@ -694,6 +694,13 @@
   z-index: 2;
 }
 
+.ProseMirror .block-container.block-affiliations:hover .action-gutter {
+    pointer-events: visible;
+  opacity: 1;
+  z-index: 2;
+}
+
+
 .ProseMirror .block-box_element:hover > .block-gutter {
   opacity: 1;
   z-index: 2;

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

@@ -1,104 +0,0 @@
-"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.AffiliationButton = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
-const lodash_1 = require("lodash");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const authors_1 = require("../../lib/authors");
-const AffiliationForm_1 = require("./AffiliationForm");
-const Container = styled_components_1.default.div `
-  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 AffiliationFormContainer = styled_components_1.default.div `
-  border: 1px solid ${(props) => props.theme.colors.border.field.default};
-  border-radius: ${(props) => props.theme.grid.radius.default};
-  margin: 6px 12px 12px;
-  overflow: hidden;
-`;
-const AffiliationLabel = styled_components_1.default.div `
-  margin: 0;
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  padding-right: 0.5rem;
-`;
-const DropdownIndicator = (0, styled_components_1.default)(style_guide_1.ArrowDownCircleIcon) `
-  border: 0;
-  border-radius: 50%;
-  margin-right: 0.6em;
-  min-width: 20px;
-`;
-const ToggleButton = styled_components_1.default.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;
-
-  &.open svg {
-    transform: rotateX(180deg);
-  }
-`;
-const RemoveButton = styled_components_1.default.div `
-  cursor: pointer;
-`;
-const AffiliationButton = ({ affiliation, onSave, onRemove, }) => {
-    const [isOpen, setOpen] = (0, react_1.useState)(false);
-    const toggleOpen = () => {
-        setOpen((o) => !o);
-    };
-    const handleSave = (values) => {
-        if ((0, lodash_1.isEqual)(values, affiliation)) {
-            return;
-        }
-        const copy = Object.assign(Object.assign({}, affiliation), values);
-        onSave(copy);
-    };
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(AffiliationLabel, null,
-            react_1.default.createElement(ToggleButton, { type: "button", className: isOpen ? 'open' : '', onClick: toggleOpen },
-                react_1.default.createElement(DropdownIndicator, null),
-                (0, authors_1.affiliationLabel)(affiliation)),
-            react_1.default.createElement(RemoveButton, { onClick: onRemove },
-                react_1.default.createElement(style_guide_1.DeleteIcon, null))),
-        isOpen && (react_1.default.createElement(AffiliationFormContainer, null,
-            react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: affiliation, onSave: handleSave })))));
-};
-exports.AffiliationButton = AffiliationButton;