@manuscripts/body-editor 3.12.2 → 3.12.3

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

@@ -13,13 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Avatar, CorrespondingAuthorIcon, CrclTickAnimation, DeleteIcon, DraggableIcon, } from '@manuscripts/style-guide';
+import { Avatar, CorrespondingAuthorIcon, CrclTickAnimation, DeleteIcon, DraggableIcon, SecondaryIconButton, withNavigableListItem, } from '@manuscripts/style-guide';
 import React, { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import styled from 'styled-components';
 import { authorLabel } from '../../lib/authors';
 import { getDropSide } from '../../lib/dnd';
-const AuthorContainer = styled.div `
+const AuthorContainer = withNavigableListItem(styled.div `
   padding: ${(props) => props.theme.grid.unit * 2}px 0
     ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
@@ -53,7 +53,7 @@ const AuthorContainer = styled.div `
     cursor: grabbing;
     border-bottom-color: ${(props) => props.theme.colors.brand.dark};
   }
-`;
+`);
 const AvatarContainer = styled.div `
   display: inline-flex;
   position: relative;
@@ -86,15 +86,11 @@ const DragHandle = styled(DraggableIcon) `
   margin-left: -4px;
   margin-right: -12px;
 `;
-const RemoveButton = styled.div `
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
+const RemoveButton = styled(SecondaryIconButton) `
   svg {
-    cursor: pointer;
-  }
-  .icon_element {
-    fill: #6e6e6e;
+    path[fill='white'] {
+      fill: white;
+    }
   }
 `;
 const StyledCrclTickAnimation = styled(CrclTickAnimation) `
@@ -162,6 +158,6 @@ export const DraggableAuthor = React.memo(({ author, isSelected, onClick, onDele
             React.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (React.createElement(AuthorBadge, null,
                 React.createElement(CorrespondingAuthorIcon, null))))),
         React.createElement(AuthorName, { "data-cy": "author-name" }, authorLabel(author)),
-        isSelected && (React.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+        isSelected && (React.createElement(RemoveButton, { size: 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
             React.createElement(DeleteIcon, { fill: '#6E6E6E' })))));
 });

package/dist/es/components/awards/AwardForm.js

@@ -13,58 +13,49 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { MultiValueInput, PrimaryButton, SearchIcon, SecondaryButton, TextField, FormRow, Label, FormActionsBar, } from '@manuscripts/style-guide';
+import { MultiValueInput, PrimaryButton, SearchIcon, SecondaryButton, TextField, FormRow, Label, ButtonGroup, } from '@manuscripts/style-guide';
 import { Field, Formik } from 'formik';
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import React, { useMemo, useRef } from 'react';
+import styled, { useTheme } from 'styled-components';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
-import { useDebounce } from '../hooks/use-debounce';
+import { components, } from 'react-select';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+import useDebounced from '../hooks/use-debounce';
+const loadOptions = async (inputValue) => {
+    try {
+        const formattedQuery = inputValue.replace(/\s+/g, '+');
+        const response = await fetch(`https://api.crossref.org/funders?query=${encodeURIComponent(formattedQuery)}`);
+        if (!response.ok) {
+            console.log(`HTTP error! status: ${response.status}`);
+            return [];
+        }
+        const data = await response.json();
+        const funderOptions = data.message.items.map((funder) => ({
+            value: funder.name,
+            label: funder.name,
+        }));
+        return funderOptions.sort((a, b) => a.label.localeCompare(b.label));
+    }
+    catch (e) {
+        console.error('Error fetching funders:', e);
+        return [];
+    }
+};
 export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
-    const [funders, setFunders] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
     const formRef = useRef(null);
     const primaryButtonText = values.source ? 'Update funder' : 'Add funder';
-    const debouncedSearchQuery = useDebounce(searchQuery, 300);
-    useEffect(() => {
-        const searchFunders = async () => {
-            const query = debouncedSearchQuery;
-            if (!query) {
-                setFunders([]);
-                return;
-            }
-            setIsLoading(true);
-            try {
-                const formattedQuery = query.replace(/\s+/g, '+');
-                const response = await fetch(`https://api.crossref.org/funders?query=${encodeURIComponent(formattedQuery)}`);
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const data = await response.json();
-                const funderOptions = data.message.items.map((funder) => ({
-                    value: funder.name,
-                    label: funder.name,
-                }));
-                funderOptions.sort((a, b) => a.label.localeCompare(b.label));
-                setFunders(funderOptions);
-            }
-            catch (error) {
-                console.error('Error fetching funders:', error);
-                setFunders([]);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        searchFunders();
-    }, [debouncedSearchQuery]);
-    const handleFunderSearch = (event) => {
-        setSearchQuery(event.target.value);
-    };
+    const themes = useTheme();
+    const customStyles = useMemo(() => getCustomStyles(themes), [themes]);
+    const handleOnLoadFunders = useDebounced(async (inputValue) => loadOptions(inputValue), 300);
     const handleCancel = () => {
         formRef.current?.resetForm();
         onCancel();
     };
+    const handleInputChange = (value, action) => {
+        if (action.action === 'input-change') {
+            formRef.current?.setFieldValue('source', value);
+        }
+    };
     const validate = (values) => {
         const errors = {};
         if (!values.source) {
@@ -80,18 +71,14 @@ export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
             React.createElement(Field, { type: "hidden", name: "id" }),
             React.createElement(FormRow, null,
                 React.createElement(Label, { htmlFor: 'source' }, "Funder name"),
-                React.createElement(SearchContainer, null,
-                    React.createElement(SearchIconContainer, null,
-                        React.createElement(SearchIcon, null)),
-                    React.createElement(Field, { name: "source" }, (props) => (React.createElement(StyledTextField, { id: "source", placeholder: "Search for funder...", onChange: (e) => {
-                            props.field.onChange(e);
-                            handleFunderSearch(e);
-                        }, value: props.field.value || '' }))),
-                    isLoading && React.createElement(LoadingText, null, "Loading..."),
-                    funders.length > 0 && (React.createElement(SearchResults, null, funders.map((funder) => (React.createElement(SearchResultItem, { key: funder.value, onClick: () => {
-                            formik.setFieldValue('source', funder.value);
-                            setFunders([]);
-                        } }, funder.label)))))),
+                React.createElement(Field, { name: "source" }, (props) => (React.createElement(AsyncCreatableSelect, { inputId: 'source', loadOptions: handleOnLoadFunders, onInputChange: handleInputChange, autoFocus: true, onChange: (option) => option &&
+                        formRef.current?.setFieldValue('source', option.value), inputValue: props.field.value, value: null, isValidNewOption: () => false, components: {
+                        Input,
+                        Control,
+                        Option,
+                        DropdownIndicator: null,
+                        IndicatorSeparator: null,
+                    }, styles: customStyles, placeholder: "Search for funder..." }))),
                 formik.errors.source && formik.touched.source && (React.createElement(ErrorText, null, formik.errors.source))),
             React.createElement(FormRow, null,
                 React.createElement(Label, { htmlFor: 'code' }, "Grant number"),
@@ -102,68 +89,89 @@ export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
                 React.createElement(Label, { htmlFor: 'recipient' }, "Recipient name"),
                 React.createElement(Field, { name: "recipient" }, (props) => (React.createElement(TextField, { id: "recipient", placeholder: "Enter full name", ...props.field })))),
             React.createElement(FormRow, null,
-                React.createElement(FormActionsBar, null,
+                React.createElement(FormActions, null,
                     React.createElement(SecondaryButton, { onClick: handleCancel }, "Cancel"),
                     React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText)))));
     }));
 };
-const SearchContainer = styled.div `
-  position: relative;
-  width: 100%;
-`;
 const SearchIconContainer = styled.span `
   display: flex;
-  left: ${(props) => props.theme.grid.unit * 4}px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
+  align-items: center;
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-right: ${(props) => props.theme.grid.unit * 2}px;
 
   path {
-    stroke: ${(props) => props.theme.colors.text.primary};
+    stroke: ${(props) => props.isFocused
+    ? props.theme.colors.brand.medium
+    : props.theme.colors.text.primary};
   }
+`;
+const OptionWrapper = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 2}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
-  ${SearchContainer}:hover &,
-  ${SearchContainer}:focus-within & {
-    path {
-      stroke: ${(props) => props.theme.colors.brand.medium};
+  background-color: ${(props) => {
+    if (props.selected) {
+        return props.theme.colors.background.selected;
     }
-  }
-`;
-const StyledTextField = styled(TextField) `
-  padding-left: ${(props) => props.theme.grid.unit * 11}px;
-  &:hover,
-  &:focus {
-    background-color: ${(props) => props.theme.colors.background.fifth};
-  }
-`;
-const SearchResults = styled.div `
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  max-height: 200px;
-  overflow-y: auto;
-  background: white;
-  border: 1px solid ${(props) => props.theme.colors.border.secondary};
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-`;
-const SearchResultItem = styled.div `
-  padding: 8px 12px;
-  cursor: pointer;
+    if (props.focused) {
+        return props.theme.colors.background.fifth;
+    }
+    return 'transparent';
+}};
+
   &:hover {
     background-color: ${(props) => props.theme.colors.background.fifth};
   }
 `;
-const LoadingText = styled.div `
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: ${(props) => props.theme.colors.text.secondary};
-  font-size: ${(props) => props.theme.font.size.small};
+const Option = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
+    return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+};
+const Control = ({ children, ...props }) => {
+    return (React.createElement(components.Control, { ...props },
+        React.createElement(SearchIconContainer, { isFocused: props.isFocused },
+            React.createElement(SearchIcon, null)),
+        children));
+};
+const Input = (props) => (React.createElement(components.Input, { ...props, isHidden: false }));
+const getCustomStyles = (theme) => ({
+    control: (provided, state) => ({
+        ...provided,
+        minHeight: '40px',
+        borderRadius: '4px',
+        border: `${state.isFocused ? '2px' : '1px'} solid ${state.isFocused ? theme.colors.brand.default : theme.colors.border.secondary}`,
+        backgroundColor: state.isFocused || state.menuIsOpen
+            ? theme.colors.background.fifth
+            : theme.colors.background.primary,
+        boxShadow: 'none',
+        cursor: 'text',
+        transition: 'background-color 0.2s',
+        '&:hover': {
+            backgroundColor: theme.colors.background.fifth,
+        },
+    }),
+    input: (provided) => ({
+        ...provided,
+        margin: 0,
+        padding: 0,
+        color: theme.colors.text.primary,
+        fontSize: theme.font.size.normal,
+        fontFamily: theme.font.family.sans,
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        margin: 0,
+        fontStyle: 'italic',
+        color: state.isFocused ? '#c9c9c9' : theme.colors.text.secondary,
+        fontSize: theme.font.size.medium,
+        fontFamily: theme.font.family.sans,
+        fontWeight: theme.font.weight.normal,
+        lineHeight: theme.font.lineHeight.large,
+    }),
+});
+const FormActions = styled(ButtonGroup) `
+  margin: ${(props) => props.theme.grid.unit * 2}px;
 `;
 const ErrorText = styled.div `
   color: ${(props) => props.theme.colors.text.error};

package/dist/es/components/hooks/use-debounce.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 export const useDebounce = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
@@ -26,3 +26,17 @@ export const useDebounce = (value, delay) => {
     }, [value, delay]);
     return debouncedValue;
 };
+export default function useDebounced(fn, delay) {
+    const timeoutRef = useRef(null);
+    return useCallback((arg) => {
+        const timeout = timeoutRef.current;
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        return new Promise((resolve) => {
+            timeoutRef.current = setTimeout(async () => {
+                resolve(await fn(arg));
+            }, delay);
+        });
+    }, [fn, delay]);
+}

package/dist/es/components/modal-drawer/GenericDrawerGroup.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SelectedItemsBox } from '@manuscripts/style-guide';
+import { outlineStyle, SelectedItemsBox, } from '@manuscripts/style-guide';
 import React from 'react';
 import styled from 'styled-components';
 export function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }) {
@@ -43,4 +43,5 @@ export const AssignButton = styled.button `
   &:hover {
     opacity: 0.8;
   }
+  ${outlineStyle}
 `;

package/dist/es/components/references/CitationEditor.js

@@ -1,4 +1,4 @@
-import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, IconButton, IconTextButton, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
+import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, IconButton, PrimaryButton, SecondaryButton, withFocusTrap, } from '@manuscripts/style-guide';
 import { generateNodeID, schema, } from '@manuscripts/transform';
 import React, { useMemo, useReducer, useState } from 'react';
 import styled from 'styled-components';
@@ -9,6 +9,7 @@ import { ImportBibliographyModal } from './ImportBibliographyModal';
 import { ReferenceLine } from './ReferenceLine';
 import { ReferenceSearch } from './ReferenceSearch';
 import { ReferencesModal } from './ReferencesModal';
+const Container = withFocusTrap(styled.div ``);
 const CitedItemActions = styled.div `
   display: flex;
   align-items: center;
@@ -41,10 +42,10 @@ const ActionButton = styled(IconButton).attrs({
 const EditReferenceButton = styled(ActionButton) `
   margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
-const Actions = styled.div `
+const Actions = styled(ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 const itemsReducer = attrsReducer();
@@ -132,7 +133,7 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
     if (!rids.length) {
         return (React.createElement(ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: handleCite, onCancel: onCancel }));
     }
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(Container, null,
         React.createElement(Dialog, { isOpen: deleteDialog.show, category: Category.confirmation, header: "Remove cited item", message: "Are you sure you want to remove this cited item? It will still exist in the reference list.", actions: {
                 secondary: {
                     action: () => {
@@ -156,8 +157,6 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
                 React.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
                     React.createElement(DeleteSolidIcon, { className: 'remove-icon' }))))))),
         React.createElement(Actions, null,
-            React.createElement(IconTextButton, null),
-            React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: onCancel }, "Done"),
-                React.createElement(PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation")))));
+            React.createElement(SecondaryButton, { onClick: onCancel }, "Done"),
+            React.createElement(PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };

package/dist/es/components/references/ImportBibliographyForm.js

@@ -13,15 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FormActionsBar, FormRow, Label, PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
+import { FormActionsBar, FormRow, Label, outlineStyle, PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
 import { useFormik } from 'formik';
 import { debounce } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import styled, { css } from 'styled-components';
 import { importBibliographyItems } from '../../lib/references';
 import { ReferenceLine } from './ReferenceLine';
 export const ImportBibliographyForm = ({ onCancel, onSave, }) => {
     const [dragging, setDragging] = useState(false);
+    const fileInputRef = useRef(null);
     const formik = useFormik({
         initialValues: {
             content: '',
@@ -80,13 +81,19 @@ export const ImportBibliographyForm = ({ onCancel, onSave, }) => {
         };
         reader.readAsText(file);
     };
+    const handleOnKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            fileInputRef?.current?.click();
+        }
+    };
     return (React.createElement("form", { onSubmit: formik.handleSubmit, onReset: formik.handleReset },
         React.createElement(FormRow, null,
-            React.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
+            React.createElement(DropContainer, { tabIndex: 0, role: "button", onDrop: handleDrop, onDragOver: (e) => {
                     e.preventDefault();
                     setDragging(true);
-                }, onDragLeave: () => setDragging(false), active: dragging },
-                React.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+                }, onDragLeave: () => setDragging(false), onKeyDown: handleOnKeyDown, active: dragging },
+                React.createElement("input", { id: "file", name: "file", type: "file", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }),
                 React.createElement(Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file."))),
         React.createElement(FormRow, null,
             React.createElement(Label, { htmlFor: "content" }, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items."),
@@ -134,4 +141,6 @@ const DropContainer = styled.div `
     font-family: ${(props) => props.theme.font.family.Lato};
     color: ${(props) => props.theme.colors.text.onLight};
   }
+
+  ${outlineStyle}
 `;

package/dist/es/components/references/ReferenceForm/PersonDropDown.js

@@ -13,7 +13,7 @@ export const PersonDropDown = (props) => {
             React.createElement(ToggleButton, { type: "button", onClick: () => setIsOpen(!isOpen), isOpen: isOpen },
                 React.createElement(DropdownIndicator, null),
                 title),
-            React.createElement(RemoveButton, { type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
+            React.createElement(RemoveButton, { size: 13, type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
                 React.createElement(DeleteIcon, null))),
         isOpen && (React.createElement(PersonForm, null,
             React.createElement(FormRow, null,

package/dist/es/components/references/ReferenceForm/styled-components.js

@@ -1,4 +1,4 @@
-import { ArrowDownIcon, IconButton, TextArea, TextField, } from '@manuscripts/style-guide';
+import { ArrowDownIcon, IconButton, outlineStyle, SecondaryIconButton, TextArea, TextField, } from '@manuscripts/style-guide';
 import styled from 'styled-components';
 export const Button = styled(IconButton).attrs({
     defaultColor: true,
@@ -86,7 +86,7 @@ export const ToggleButton = styled.button `
   text-align: left;
   font-family: ${(props) => props.theme.font.family.sans};
   font-size: 1rem;
-  padding: 0.6em 0.5em;
+  margin: 0.6em;
 
   outline: none;
 
@@ -97,11 +97,20 @@ export const ToggleButton = styled.button `
   svg {
     transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
   }
+  ${outlineStyle}
 `;
-export const RemoveButton = styled.button `
+export const RemoveButton = styled(SecondaryIconButton) `
   border: none;
   background: transparent;
   padding: 0;
-
   outline: none;
+  svg {
+    path[fill='white'] {
+      fill: white;
+    }
+    rect[fill],
+    path:not([fill='white']) {
+      fill: #f35143;
+    }
+  }
 `;

package/dist/es/components/references/ReferenceSearch.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, UploadIcon, } from '@manuscripts/style-guide';
+import { AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, UploadIcon, withFocusTrap, } from '@manuscripts/style-guide';
 import { debounce } from 'lodash';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -31,10 +31,10 @@ const Actions = styled(ButtonGroup) `
   justify-content: space-between;
   padding: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const Container = styled.div `
+const Container = withFocusTrap(styled.div `
   flex: 1;
   font-family: ${(props) => props.theme.font.family.sans};
-`;
+`);
 const AddReferenceActions = styled(ButtonGroup) `
   button {
     margin-right: ${(props) => props.theme.grid.unit * 8}px;

package/dist/es/components/references/ReferenceSearchResults.js

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddedIcon, AddIcon, SecondaryButton } from '@manuscripts/style-guide';
-import React from 'react';
+import { AddedIcon, AddIcon, SecondaryButton, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 import { ReferenceLine } from './ReferenceLine';
 const StatusIcon = styled.div `
@@ -36,12 +36,14 @@ const MoreButton = styled(SecondaryButton) `
   margin-left: ${(props) => props.theme.grid.unit * 4}px;
   color: ${(props) => props.theme.colors.button.default.color.default};
 `;
-export const ReferenceSearchResultsContainer = styled.div `
-  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
+export const ReferenceSearchResultsContainer = withListNavigation(styled.div `
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
   flex: 1;
   overflow-y: auto;
-`;
-export const ReferenceSearchResult = styled.div `
+  outline: none;
+`);
+export const ReferenceSearchResult = withNavigableListItem(styled.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 2}px 0;
   display: flex;
@@ -49,9 +51,21 @@ export const ReferenceSearchResult = styled.div `
   &:not(:last-of-type) {
     border-bottom: 1px solid #f6f6f6;
   }
-`;
-export const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => (React.createElement(ReferenceSearchResultsContainer, null,
-    items.map((item) => (React.createElement(ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
-        React.createElement(StatusIcon, null, isSelected(item) ? (React.createElement(AddedIcon, { width: 24, height: 24 })) : (React.createElement(AddIcon, { width: 24, height: 24 }))),
-        React.createElement(ReferenceLine, { item: item })))),
-    items.length < 25 && total > items.length ? (React.createElement(MoreButton, { onClick: onShowMore, "data-cy": 'more-button' }, "Show more")) : undefined));
+`);
+export const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => {
+    const list = useRef(null);
+    const onExpandReferenceList = () => {
+        const element = list.current;
+        if (element) {
+            element.setAttribute('tabindex', '0');
+            element.focus();
+            element.setAttribute('tabindex', '-1');
+        }
+        onShowMore();
+    };
+    return (React.createElement(ReferenceSearchResultsContainer, { ref: list },
+        items.map((item) => (React.createElement(ReferenceSearchResult, { onClick: () => onSelect(item), key: item.id, "data-cy": `${isSelected(item) ? 'selected-reference' : 'reference'}` },
+            React.createElement(StatusIcon, null, isSelected(item) ? (React.createElement(AddedIcon, { width: 24, height: 24 })) : (React.createElement(AddIcon, { width: 24, height: 24 }))),
+            React.createElement(ReferenceLine, { item: item })))),
+        items.length < 25 && total > items.length ? (React.createElement(MoreButton, { onClick: onExpandReferenceList, "data-cy": 'more-button' }, "Show more")) : undefined));
+};

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

@@ -13,24 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TriangleCollapsedIcon, TriangleExpandedIcon, } from '@manuscripts/style-guide';
+import { IconTextButton, TriangleCollapsedIcon, TriangleExpandedIcon, } from '@manuscripts/style-guide';
 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
+const SearchSourceLabel = styled(IconTextButton) `
+  margin: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px
     ${(props) => props.theme.grid.unit * 2}px;
   color: ${(props) => props.theme.colors.text.secondary};
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-
-  .icon {
-    margin-left: 8px;
-    margin-right: 13px;
-  }
 
   &:hover {
     color: ${(props) => props.theme.colors.text.muted};

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

@@ -1,4 +1,4 @@
-import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, } from '@manuscripts/style-guide';
+import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import { isEqual } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -13,10 +13,11 @@ const ReferencesSidebar = styled(ModalSidebar) `
 const ReferencesSidebarContent = styled(SidebarContent) `
   overflow-y: auto;
 `;
-const ReferencesInnerWrapper = styled.div `
+const ReferencesInnerWrapper = withListNavigation(styled.div `
   width: 100%;
-`;
-const ReferenceButton = styled.div `
+  padding: 12px 0;
+`);
+const ReferenceButton = withNavigableListItem(styled.div `
   cursor: pointer;
   display: flex;
   justify-content: flex-start;
@@ -43,7 +44,7 @@ const ReferenceButton = styled.div `
     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;