@manuscripts/style-guide 1.6.2 → 1.7.0-LEAN-3092-0

package/dist/es/components/References/ReferenceSearchSection.js

@@ -0,0 +1,88 @@
+/*!
+ * © 2023 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.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import ArrowDownUp from '@manuscripts/assets/react/ArrowDownUp';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { ReferenceSearchResults } from './ReferenceSearchResults';
+import { ReferenceSearchResultsPlaceholder } from './ReferenceSearchResultsPlaceholder';
+const SearchSourceLabel = styled.div `
+  margin: 0 ${(props) => props.theme.grid.unit * 4}px
+    ${(props) => props.theme.grid.unit * 2}px;
+  color: ${(props) => props.theme.colors.text.secondary};
+  cursor: pointer;
+
+  &:hover {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+export const Arrow = styled(ArrowDownUp) `
+  margin-right: 16px;
+  margin-left: 10px;
+
+  user-select: none;
+
+  transform: rotate(180deg);
+
+  &.open {
+    transform: rotate(0deg);
+  }
+`;
+export const ReferenceSearchSection = ({ query, source, isSelected, onSelect }) => {
+    const [expanded, setExpanded] = useState(true);
+    const [state, setState] = useState();
+    const [limit, setLimit] = useState(3);
+    const toggleExpanded = () => {
+        setExpanded((value) => !value);
+    };
+    useEffect(() => {
+        const search = () => __awaiter(void 0, void 0, void 0, function* () {
+            const job = source.search(query, limit);
+            setState((s) => {
+                if ((s === null || s === void 0 ? void 0 : s.type) === 'running' && s.job.cancel) {
+                    s.job.cancel();
+                }
+                return {
+                    type: 'running',
+                    job,
+                };
+            });
+            const response = yield job.response;
+            if (job.isCancelled) {
+                return;
+            }
+            setState(Object.assign({ type: 'completed' }, response));
+        });
+        search();
+    }, [source, query, limit]);
+    const handleShowMore = () => {
+        setLimit(25);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SearchSourceLabel, { onClick: toggleExpanded },
+            React.createElement(Arrow, { className: expanded ? 'open' : '' }),
+            source.label),
+        expanded && (state === null || state === void 0 ? void 0 : state.type) === 'running' && (React.createElement(ReferenceSearchResultsPlaceholder, null)),
+        expanded && (state === null || state === void 0 ? void 0 : state.type) === 'completed' && (React.createElement(ReferenceSearchResults, { items: state.items, total: state.total, isSelected: isSelected, onSelect: onSelect, onShowMore: handleShowMore }))));
+};

package/dist/es/components/References/ReferencesModal.js

@@ -0,0 +1,188 @@
+import ReferenceLibraryIcon from '@manuscripts/assets/react/ReferenceLibraryIcon';
+import { isEqual } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+import ReactTooltip from 'react-tooltip';
+import styled from 'styled-components';
+import { useScrollDetection } from '../../hooks/use-scroll-detection';
+import { Category, Dialog } from '../Dialog';
+import { SidebarContent } from '../Sidebar';
+import { CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, StyledModal, } from '../StyledModal';
+import { ReferenceForm, } from './ReferenceForm';
+import { ReferenceLine } from './ReferenceLine';
+const ReferencesModalContainer = styled(ModalContainer) `
+  min-width: 960px;
+`;
+const ReferencesSidebar = styled(ModalSidebar) `
+  width: 70%;
+`;
+const ReferencesSidebarContent = styled(SidebarContent) `
+  overflow-y: auto;
+`;
+const ReferencesInnerWrapper = styled.div `
+  width: 100%;
+`;
+const ReferenceButton = styled.div `
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+
+  path {
+    fill: #c9c9c9;
+  }
+
+  :hover {
+    background: ${(props) => props.theme.colors.background.info};
+  }
+
+  &.selected {
+    background: ${(props) => props.theme.colors.background.info};
+    border-top-color: #bce7f6;
+    border-bottom-color: #bce7f6;
+  }
+
+  .tooltip {
+    max-width: ${(props) => props.theme.grid.unit * 25}px;
+    padding: ${(props) => props.theme.grid.unit * 2}px;
+    border-radius: 6px;
+  }
+`;
+const IconContainer = styled.div `
+  padding-right: ${(props) => props.theme.grid.unit * 5}px;
+  position: relative;
+`;
+const CitationCount = styled.div `
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  color: #ffffff;
+  background-color: #bce7f6;
+  text-align: center;
+  vertical-align: top;
+  top: 0;
+  left: 16px;
+  font-size: 9px;
+
+  &.unused {
+    background-color: #fe8f1f;
+  }
+`;
+const selectionTopOffset = 10;
+const pageSize = 12;
+const topTrigger = 0.2;
+const bottomTrigger = 0.8;
+const dropLimit = 36;
+export const normalize = (item) => ({
+    _id: item._id,
+    title: item.title || '',
+    author: item.author || [],
+    DOI: item.DOI || '',
+    issued: item.issued,
+    type: item.type || '',
+    'container-title': item['container-title'] || '',
+    URL: item.URL || '',
+    issue: item.issue ? String(item.issue) : '',
+    volume: item.volume ? String(item.volume) : '',
+    supplement: item.supplement ? String(item.supplement) : '',
+    page: item.page ? String(item.page) : '',
+});
+export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave, onDelete, }) => {
+    const [confirm, setConfirm] = useState(false);
+    const valuesRef = useRef();
+    const [selection, setSelection] = useState();
+    const selectionRef = useRef(null);
+    const isSelected = (item) => {
+        return item._id === (selection === null || selection === void 0 ? void 0 : selection._id);
+    };
+    const selectionIndex = items.findIndex(isSelected);
+    useEffect(() => {
+        setSelection(item);
+    }, [item]);
+    useEffect(() => {
+        setTimeout(() => {
+            var _a;
+            (_a = selectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                block: 'center',
+                behavior: 'auto',
+            });
+        }, 100);
+    }, [selectionIndex]);
+    const { ref, triggers } = useScrollDetection(topTrigger, bottomTrigger);
+    const [startIndex, setStartIndex] = useState(Math.max(0, selectionIndex - selectionTopOffset));
+    const [endIndex, setEndIndex] = useState(pageSize);
+    useEffect(() => {
+        const base = Math.max(0, selectionIndex - selectionTopOffset);
+        setStartIndex(base);
+        setEndIndex(Math.min(items.length - 1, base + pageSize));
+    }, [selectionIndex, items]);
+    useEffect(() => {
+        if (triggers.top) {
+            const newFirst = Math.max(0, startIndex - pageSize);
+            setStartIndex(newFirst);
+            setEndIndex(Math.min(newFirst + dropLimit, endIndex));
+        }
+        if (triggers.bottom) {
+            const newLast = Math.min(items.length - 1, endIndex + pageSize);
+            setEndIndex(newLast);
+            setStartIndex(Math.max(newLast - dropLimit, startIndex));
+        }
+    }, [triggers, items]);
+    const actionsRef = useRef();
+    const reset = () => {
+        var _a;
+        (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        setConfirm(false);
+    };
+    const save = (values) => {
+        if (!values || !selection) {
+            return;
+        }
+        const item = Object.assign(Object.assign({}, selection), values);
+        onSave(item);
+        setSelection(item);
+        setConfirm(false);
+    };
+    const handleItemClick = (item) => {
+        const values = valuesRef.current;
+        if (values && selection && !isEqual(values, normalize(selection))) {
+            setConfirm(true);
+            return;
+        }
+        setSelection(item);
+    };
+    const handleChange = (values) => {
+        valuesRef.current = values;
+    };
+    if (items.length <= 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
+        React.createElement(Dialog, { isOpen: confirm, category: Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
+                secondary: {
+                    action: () => reset(),
+                    title: 'Discard',
+                },
+                primary: {
+                    action: () => save(valuesRef.current),
+                    title: 'Save',
+                },
+            } }),
+        React.createElement(ReferencesModalContainer, null,
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: onCancel })),
+            React.createElement(ModalBody, null,
+                React.createElement(ReferencesSidebar, null,
+                    React.createElement(ModalSidebarHeader, null,
+                        React.createElement(ModalSidebarTitle, null, "References")),
+                    React.createElement(ReferencesSidebarContent, { ref: ref },
+                        React.createElement(ReferencesInnerWrapper, null, items.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item._id, id: item._id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
+                            React.createElement(IconContainer, { "data-tip": true, "data-for": 'citation-count' },
+                                React.createElement(ReferenceLibraryIcon, null),
+                                React.createElement(CitationCount, { className: citationCounts.get(item._id) ? '' : 'unused' }, citationCounts.get(item._id) || 0),
+                                React.createElement(ReactTooltip, { disable: (citationCounts.get(item._id) || 0) < 1, id: "citation-count", place: "bottom", effect: "solid", offset: { top: 40 }, className: "tooltip" }, "Number of times used in the document")),
+                            React.createElement(ReferenceLine, { item: item }))))))),
+                React.createElement(ScrollableModalContent, null, selection && (React.createElement(ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection._id), onChange: handleChange, onCancel: onCancel, onDelete: () => onDelete(selection), onSave: save, actionsRef: actionsRef })))))));
+};

package/dist/es/components/References/SearchInput.js

@@ -0,0 +1,73 @@
+/*!
+ * © 2023 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 SearchIconNoBGc from '@manuscripts/assets/react/SearchIconNoBG';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { TextField } from '../TextField';
+const SearchContainer = styled.div `
+  align-items: center;
+  display: flex;
+  flex: 1 0 auto;
+  position: relative;
+  margin: 12px;
+`;
+const SearchIconContainer = styled.span `
+  display: flex;
+  left: ${(props) => props.theme.grid.unit * 4}px;
+  position: absolute;
+  z-index: 2;
+
+  path {
+    fill: ${(props) => props.theme.colors.text.primary};
+  }
+
+  &.active path {
+    fill: ${(props) => props.theme.colors.brand.medium};
+  }
+`;
+const SearchTextField = styled(TextField) `
+  -webkit-appearance: textfield;
+  padding-left: ${(props) => props.theme.grid.unit * 11}px;
+  &:hover,
+  &:focus {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+export const SearchWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
+`;
+export const SearchInput = (props) => {
+    const [hover, setHover] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const onFocus = () => {
+        setFocus(true);
+    };
+    const onBlur = () => {
+        setFocus(false);
+    };
+    const onMouseEnter = () => {
+        setHover(true);
+    };
+    const onMouseLeave = () => {
+        setHover(false);
+    };
+    return (React.createElement(SearchContainer, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur },
+        React.createElement(SearchIconContainer, { className: hover || focus ? 'active' : '' },
+            React.createElement(SearchIconNoBGc, null)),
+        React.createElement(SearchTextField, Object.assign({}, props, { type: "search", placeholder: "Search", autoComplete: "off" }))));
+};

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

@@ -0,0 +1,4 @@
+export * from './CitationEditor';
+export * from './CitationViewer';
+export * from './ReferencesModal';
+export * from './BibliographyItemSource';

package/dist/es/components/SelectField.js

@@ -0,0 +1,18 @@
+/*!
+ * © 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 React from 'react';
+import Select from 'react-select';
+export const SelectField = ({ id, options, field, form, }) => (React.createElement(Select, { inputId: id, options: options, name: field.name, value: options === null || options === void 0 ? void 0 : options.find((option) => option.value === field.value), onChange: (option) => form.setFieldValue(field.name, option === null || option === void 0 ? void 0 : option.value), onBlur: field.onBlur }));

package/dist/es/components/Sidebar.js

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components';
+export const SidebarStyles = css `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: ${(props) => props.theme.grid.unit * 4}px
+    ${(props) => props.theme.grid.unit * 2}px;
+  width: 100%;
+  overflow: hidden;
+`;
+export const SidebarContent = styled.div `
+  flex: 1;
+  padding: 0 ${(props) => props.theme.grid.unit * 3}px;
+  position: relative;
+  flex-shrink: 0;
+  overflow-y: auto;
+`;

package/dist/es/components/StyledModal.js

@@ -25,15 +25,93 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import Modal from 'react-modal';
+import ReactModal from 'react-modal';
 import styled from 'styled-components';
+import { RoundIconButton } from './Button';
+import { SidebarStyles } from './Sidebar';
 const totalTransitionTime = 800;
 const transitionDelay = 300;
 const delayedTransitionTime = totalTransitionTime - transitionDelay;
-export const ReactModalAdapter = (_a) => {
+const ReactModalAdapter = (_a) => {
     var { className, modalClassName } = _a, props = __rest(_a, ["className", "modalClassName"]);
-    return (React.createElement(Modal, Object.assign({ className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, appElement: document.getElementById('root') }, props)));
+    return (React.createElement(ReactModal, Object.assign({ className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, appElement: document.getElementById('root') }, props)));
 };
+export const ModalContainer = styled.div `
+  background: ${(props) => props.theme.colors.background.primary};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  box-shadow: ${(props) => props.theme.shadow.dropShadow};
+  font-family: ${(props) => props.theme.font.family.sans};
+  overflow: hidden;
+  margin: ${(props) => props.theme.grid.unit * 3}px;
+`;
+export const ModalHeader = styled.div `
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+`;
+export const CloseButton = styled(RoundIconButton) `
+  box-shadow: none;
+  text-indent: -99999px;
+
+  ::before,
+  ::after {
+    background-color: ${(props) => props.theme.colors.text.secondary};
+    border-radius: 2px;
+    content: ' ';
+    display: block;
+    height: 14px;
+    transform: rotate(-45deg);
+    width: 2px;
+    position: absolute;
+    top: calc(50% - 7px);
+    left: calc(50% - 1px);
+  }
+  ::after {
+    transform: rotate(45deg);
+  }
+`;
+export const ModalBody = styled.div `
+  align-items: stretch;
+  display: flex;
+  flex: 1;
+  height: 90vh;
+  max-height: 680px;
+`;
+export const ModalSidebar = styled.div `
+  ${SidebarStyles};
+  background-color: ${(props) => props.theme.colors.background.secondary};
+  border-top-left-radius: ${(props) => props.theme.grid.radius.default};
+  border-bottom-left-radius: ${(props) => props.theme.grid.radius.default};
+  max-width: 40vw;
+  overflow: auto;
+  width: 340px;
+`;
+export const ModalSidebarHeader = styled.div `
+  align-items: flex-start;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+  padding: 0 ${(props) => props.theme.grid.unit * 3}px;
+  margin-bottom: ${(props) => props.theme.grid.unit * 6}px;
+`;
+export const ModalSidebarTitle = styled.div `
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  font-weight: ${(props) => props.theme.font.weight.semibold};
+  color: ${(props) => props.theme.colors.text.primary};
+  user-select: none;
+  white-space: nowrap;
+  width: 100%;
+`;
+export const ModelContent = styled.div `
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  box-sizing: border-box;
+  max-width: 60vw;
+  width: 480px;
+`;
+export const ScrollableModalContent = styled(ModelContent) `
+  overflow-y: auto;
+`;
 export const StyledModal = styled(ReactModalAdapter).attrs({
     closeTimeoutMS: totalTransitionTime,
     overlayClassName: {

package/dist/es/components/icons/delete-icon.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const DeleteIcon = () => (React.createElement("svg", { width: "13", height: "16", viewBox: "0 0 13 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { className: "icon_element", fillRule: "evenodd", clipRule: "evenodd", d: "M2.00001 2.99995C2 3.0013 2 3.00265 2 3.00399V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00399C11 3.00265 11 3.0013 11 2.99995C11.5978 3.34576 12 3.99211 12 4.73239V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73239C1 3.99211 1.4022 3.34576 2.00001 2.99995Z", fill: "#F35143" }),
+    React.createElement("path", { className: "icon_element", fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z", fill: "#F35143" }),
+    React.createElement("rect", { className: "icon_element", y: "2", width: "13", height: "3", rx: "1.5", fill: "#F35143" }),
+    React.createElement("path", { className: "icon_element", fillRule: "evenodd", clipRule: "evenodd", d: "M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z", fill: "#F35143" }),
+    React.createElement("path", { className: "icon_element", fillRule: "evenodd", clipRule: "evenodd", d: "M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z", fill: "#F35143" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z", fill: "white" })));

package/dist/es/components/icons/link-icon.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const LinkIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M6.63317 12.1949L4.74782 14.0803C3.9662 14.8619 2.70042 14.8619 1.91945 14.0804C1.13832 13.2993 1.13832 12.0334 1.91929 11.2524L5.69063 7.48109C6.4716 6.70009 7.73751 6.70009 8.51848 7.48109C8.77882 7.74143 9.20095 7.74143 9.46129 7.48109C9.72163 7.22075 9.72163 6.79862 9.46129 6.53828C8.1596 5.23659 6.04951 5.23659 4.74782 6.53828L0.97651 10.3096C-0.325178 11.6113 -0.325178 13.7214 0.97651 15.0231C2.27804 16.3254 4.38829 16.3254 5.69067 15.0231L7.57601 13.1377C7.83635 12.8774 7.83635 12.4552 7.57601 12.1949C7.31567 11.9346 6.89351 11.9346 6.63317 12.1949Z", fill: "#6E6E6E" }),
+    React.createElement("path", { d: "M15.0235 0.976266C13.7218 -0.325422 11.6111 -0.325422 10.3094 0.976266L8.04737 3.23827C7.78702 3.49861 7.78702 3.92073 8.04737 4.18108C8.30771 4.44142 8.72984 4.44142 8.99018 4.18108L11.2522 1.91908C12.0331 1.13808 13.2997 1.13808 14.0807 1.91908C14.8617 2.70005 14.8617 3.96595 14.0807 4.74692L9.93271 8.89495C9.15171 9.67595 7.88584 9.67595 7.10487 8.89495C6.84452 8.63461 6.4224 8.63461 6.16205 8.89495C5.90171 9.1553 5.90171 9.57742 6.16205 9.83777C7.46374 11.1395 9.57384 11.1395 10.8755 9.83777L15.0235 5.68977C16.3252 4.38808 16.3252 2.27795 15.0235 0.976266Z", fill: "#6E6E6E" })));

package/dist/es/components/icons/template-icon.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const TemplateIcon = () => (React.createElement("svg", { width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("rect", { x: "1.25", y: "1.25", width: "13.5", height: "15.5", rx: "1.75", fill: "white", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 6.5C9 6.08579 8.66421 5.75 8.25 5.75H7.25V4.75C7.25 4.33579 6.91421 4 6.5 4C6.08579 4 5.75 4.33579 5.75 4.75V5.75H4.75C4.33579 5.75 4 6.08579 4 6.5C4 6.91421 4.33579 7.25 4.75 7.25H5.75V8.25C5.75 8.66421 6.08579 9 6.5 9C6.91421 9 7.25 8.66421 7.25 8.25V7.25H8.25C8.66421 7.25 9 6.91421 9 6.5Z", fill: "#6E6E6E" })));

package/dist/es/hooks/use-scroll-detection.js

@@ -0,0 +1,49 @@
+/*!
+ * © 2023 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 { useRef, useState } from 'react';
+export const useScrollDetection = (topTrigger, bottomTrigger) => {
+    const refRoot = useRef();
+    const observer = useRef();
+    const [triggers, setTriggers] = useState({ bottom: false, top: false });
+    const ref = (node) => {
+        if (!node) {
+            return;
+        }
+        refRoot.current = node;
+        if (refRoot.current && !observer.current) {
+            const listener = () => {
+                if (!refRoot.current) {
+                    return;
+                }
+                const node = refRoot.current;
+                if (node.scrollTop == 0) {
+                    node.scrollTop = 1;
+                }
+                const topRatio = node.scrollTop / node.offsetHeight;
+                const bottomRatio = 1 -
+                    (node.scrollHeight - node.offsetHeight - node.scrollTop) /
+                        node.offsetHeight;
+                const newVal = { top: false, bottom: false };
+                newVal.top = topRatio <= topTrigger;
+                newVal.bottom = Math.round(bottomRatio * 100) / 100 >= bottomTrigger;
+                setTriggers(newVal);
+            };
+            refRoot.current.addEventListener('scroll', listener);
+            observer.current = listener;
+        }
+    };
+    return { ref, triggers };
+};

package/dist/es/index.js

@@ -33,7 +33,6 @@ export * from './components/FileManager';
 export * from './components/FileManager/util';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
-export * from './components/SimpleModal';
 export * from './components/StyledModal';
 export * from './components/TextField';
 export * from './components/TextFieldContainer';
@@ -53,6 +52,7 @@ export * from './components/Text';
 export * from './components/ManuscriptNoteList';
 export * from './components/Comments';
 export * from './components/RelativeDate';
+export * from './components/References';
 export * from './components/Menus';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-files';

package/dist/types/components/Dialog.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-export declare const ModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DialogModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const MessageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface DialogState {
     primaryActionDisabled: boolean;

package/dist/types/components/References/BibliographyItemSource.d.ts

@@ -0,0 +1,38 @@
+/*!
+ * © 2023 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 { BibliographyItem } from '@manuscripts/json-schema';
+export interface BibliographyItemSource {
+    id: string;
+    label: string;
+    search: (query: string, limit: number) => Job<BibliographyItemSearchResponse>;
+    find?: () => Job<BibliographyItem>;
+}
+export type Job<T> = {
+    response: Promise<T>;
+    cancel?: () => void;
+    isCancelled?: boolean;
+};
+export type BibliographyItemSearchResponse = {
+    items: BibliographyItem[];
+    total: number;
+};
+export declare class DocumentReferenceSource implements BibliographyItemSource {
+    id: string;
+    label: string;
+    private items;
+    constructor(items: BibliographyItem[]);
+    search(query: string, limit: number): Job<BibliographyItemSearchResponse>;
+}

package/dist/types/components/References/CitationEditor.d.ts

@@ -0,0 +1,18 @@
+import { BibliographyItem } from '@manuscripts/json-schema';
+import React from 'react';
+import { BibliographyItemSource } from './BibliographyItemSource';
+export interface CitationEditorProps {
+    query?: string;
+    rids: string[];
+    items: BibliographyItem[];
+    citationCounts: Map<string, number>;
+    sources: BibliographyItemSource[];
+    onCite: (items: BibliographyItem[]) => void;
+    onUncite: (id: string) => void;
+    onSave: (item: BibliographyItem) => void;
+    onDelete: (item: BibliographyItem) => void;
+    onComment: () => void;
+    onCancel: () => void;
+    canEdit: boolean;
+}
+export declare const CitationEditor: React.FC<CitationEditorProps>;