@manuscripts/body-editor 3.12.2 → 3.12.4

package/dist/cjs/components/affiliations/AffiliationItem.js

@@ -40,7 +40,7 @@ exports.AffiliationItem = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const AffiliationContainer = styled_components_1.default.div `
+const AffiliationContainer = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div `
   padding: ${(props) => props.theme.grid.unit * 2}px 0
     ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
@@ -58,7 +58,7 @@ const AffiliationContainer = styled_components_1.default.div `
   &.active {
     border-color: ${(props) => props.theme.colors.border.primary};
   }
-`;
+`);
 const AffiliationName = styled_components_1.default.div `
   margin-left: 12px;
   flex: 1;
@@ -82,15 +82,11 @@ const AffiliationBox = styled_components_1.default.div `
   flex-direction: column;
   margin-left: 4px;
 `;
-const RemoveButton = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
+const RemoveButton = (0, styled_components_1.default)(style_guide_1.SecondaryIconButton) `
   svg {
-    cursor: pointer;
-  }
-  .icon_element {
-    fill: #6e6e6e;
+    path[fill='white'] {
+      fill: white;
+    }
   }
 `;
 const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSuccessIcon, }) => {
@@ -114,7 +110,7 @@ const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSucce
                     affiliation.country ? ', ' : '')),
                 affiliation.country && react_1.default.createElement(react_1.default.Fragment, null, affiliation.country))),
         showSuccessIcon && (react_1.default.createElement(style_guide_1.CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
-        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+        isSelected && (react_1.default.createElement(RemoveButton, { size: 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
             react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' })))));
 };
 exports.AffiliationItem = AffiliationItem;

package/dist/cjs/components/affiliations/AffiliationList.js

@@ -22,18 +22,16 @@ exports.AffiliationList = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AffiliationItem_1 = require("./AffiliationItem");
-const AffiliationListContainer = styled_components_1.default.div `
+const style_guide_1 = require("@manuscripts/style-guide");
+const AffiliationListContainer = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   flex: 1;
   overflow-y: visible;
-  margin-left: 16px;
-`;
+`);
 const AffiliationListTitle = styled_components_1.default.h2 `
   color: #6e6e6e;
   font-size: 18px;
   font-weight: 400;
   line-height: 24px;
-  margin-left: 14px;
-  margin-top: 20px;
 `;
 const AffiliationList = ({ affiliation, affiliations, onSelect, onDelete, lastSavedAffiliationId, }) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/cjs/components/affiliations/AffiliationsModal.js

@@ -367,7 +367,9 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
                         react_1.default.createElement(AffiliationList_1.AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
                 react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(AffiliationTabs, null,
-                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
+                        react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                                !(showConfirmationDialog ||
+                                    showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
                         react_1.default.createElement(style_guide_1.InspectorTabList, null,
                             react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
                             react_1.default.createElement(style_guide_1.InspectorTab, null, "Authors")),
@@ -403,9 +405,15 @@ function createEmptyAffiliation(priority) {
     };
 }
 const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
-  padding: 0;
+  padding: 8px;
 `;
-const AddAffiliationButton = styled_components_1.default.div `
+const AddAffiliationButton = styled_components_1.default.button `
+  background: none;
+  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 12px 8px 12px 12px;
@@ -416,6 +424,7 @@ const AddAffiliationButton = styled_components_1.default.div `
     border-left: 0;
     border-right: 0;
   }
+  ${style_guide_1.outlineStyle}
 `;
 const ActionTitle = styled_components_1.default.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
@@ -423,7 +432,7 @@ const ActionTitle = styled_components_1.default.div `
 const AffiliationTabs = (0, styled_components_1.default)(style_guide_1.InspectorTabs) `
   position: relative;
 `;
-const AffiliationTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ unmount: false }) `
+const AffiliationTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ tabIndex: -1, unmount: false }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
 `;
 const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `

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

@@ -24,10 +24,12 @@ const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 const styled_components_1 = __importDefault(require("styled-components"));
 const DraggableAuthor_1 = require("./DraggableAuthor");
-const AuthorListContainer = styled_components_1.default.div `
+const style_guide_1 = require("@manuscripts/style-guide");
+const AuthorListContainer = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   flex: 1;
   overflow-y: visible;
-`;
+  padding: 0 6px;
+`);
 const AuthorListTitle = styled_components_1.default.h2 `
   color: #6e6e6e;
   font-size: 18px;

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

@@ -386,7 +386,13 @@ function createEmptyAuthor(priority) {
         prefix: '',
     };
 }
-const AddAuthorButton = styled_components_1.default.div `
+const AddAuthorButton = styled_components_1.default.button `
+  background: none;
+  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 12px 8px 12px 12px;
@@ -397,6 +403,7 @@ const AddAuthorButton = styled_components_1.default.div `
     border-left: 0;
     border-right: 0;
   }
+  ${style_guide_1.outlineStyle}
 `;
 const ActionTitle = styled_components_1.default.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
@@ -404,11 +411,11 @@ const ActionTitle = styled_components_1.default.div `
 const AuthorTabs = (0, styled_components_1.default)(style_guide_1.InspectorTabs) `
   position: relative;
 `;
-const AuthorTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ unmount: false }) `
+const AuthorTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ tabIndex: -1, unmount: false }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
 `;
 const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
-  padding: 0;
+  padding: 8px;
 `;
 const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
   position: relative;

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

@@ -58,7 +58,7 @@ const react_dnd_1 = require("react-dnd");
 const styled_components_1 = __importDefault(require("styled-components"));
 const authors_1 = require("../../lib/authors");
 const dnd_1 = require("../../lib/dnd");
-const AuthorContainer = styled_components_1.default.div `
+const AuthorContainer = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div `
   padding: ${(props) => props.theme.grid.unit * 2}px 0
     ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
@@ -92,7 +92,7 @@ const AuthorContainer = styled_components_1.default.div `
     cursor: grabbing;
     border-bottom-color: ${(props) => props.theme.colors.brand.dark};
   }
-`;
+`);
 const AvatarContainer = styled_components_1.default.div `
   display: inline-flex;
   position: relative;
@@ -125,15 +125,11 @@ const DragHandle = (0, styled_components_1.default)(style_guide_1.DraggableIcon)
   margin-left: -4px;
   margin-right: -12px;
 `;
-const RemoveButton = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
+const RemoveButton = (0, styled_components_1.default)(style_guide_1.SecondaryIconButton) `
   svg {
-    cursor: pointer;
-  }
-  .icon_element {
-    fill: #6e6e6e;
+    path[fill='white'] {
+      fill: white;
+    }
   }
 `;
 const StyledCrclTickAnimation = (0, styled_components_1.default)(style_guide_1.CrclTickAnimation) `
@@ -201,6 +197,6 @@ exports.DraggableAuthor = react_1.default.memo(({ author, isSelected, onClick, o
             react_1.default.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (react_1.default.createElement(AuthorBadge, null,
                 react_1.default.createElement(style_guide_1.CorrespondingAuthorIcon, null))))),
         react_1.default.createElement(AuthorName, { "data-cy": "author-name" }, (0, authors_1.authorLabel)(author)),
-        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+        isSelected && (react_1.default.createElement(RemoveButton, { size: 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
             react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' })))));
 });

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

@@ -55,55 +55,46 @@ exports.AwardForm = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
-const use_debounce_1 = require("../hooks/use-debounce");
+const react_select_1 = require("react-select");
+const async_creatable_1 = __importDefault(require("react-select/async-creatable"));
+const use_debounce_1 = __importDefault(require("../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 [];
+    }
+};
 const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
-    const [funders, setFunders] = (0, react_1.useState)([]);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
     const formRef = (0, react_1.useRef)(null);
     const primaryButtonText = values.source ? 'Update funder' : 'Add funder';
-    const debouncedSearchQuery = (0, use_debounce_1.useDebounce)(searchQuery, 300);
-    (0, react_1.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 = (0, styled_components_1.useTheme)();
+    const customStyles = (0, react_1.useMemo)(() => getCustomStyles(themes), [themes]);
+    const handleOnLoadFunders = (0, use_debounce_1.default)(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) {
@@ -119,18 +110,14 @@ const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
             react_1.default.createElement(formik_1.Field, { type: "hidden", name: "id" }),
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(style_guide_1.Label, { htmlFor: 'source' }, "Funder name"),
-                react_1.default.createElement(SearchContainer, null,
-                    react_1.default.createElement(SearchIconContainer, null,
-                        react_1.default.createElement(style_guide_1.SearchIcon, null)),
-                    react_1.default.createElement(formik_1.Field, { name: "source" }, (props) => (react_1.default.createElement(StyledTextField, { id: "source", placeholder: "Search for funder...", onChange: (e) => {
-                            props.field.onChange(e);
-                            handleFunderSearch(e);
-                        }, value: props.field.value || '' }))),
-                    isLoading && react_1.default.createElement(LoadingText, null, "Loading..."),
-                    funders.length > 0 && (react_1.default.createElement(SearchResults, null, funders.map((funder) => (react_1.default.createElement(SearchResultItem, { key: funder.value, onClick: () => {
-                            formik.setFieldValue('source', funder.value);
-                            setFunders([]);
-                        } }, funder.label)))))),
+                react_1.default.createElement(formik_1.Field, { name: "source" }, (props) => (react_1.default.createElement(async_creatable_1.default, { 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_1.default.createElement(ErrorText, null, formik.errors.source))),
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(style_guide_1.Label, { htmlFor: 'code' }, "Grant number"),
@@ -141,69 +128,90 @@ const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
                 react_1.default.createElement(style_guide_1.Label, { htmlFor: 'recipient' }, "Recipient name"),
                 react_1.default.createElement(formik_1.Field, { name: "recipient" }, (props) => (react_1.default.createElement(style_guide_1.TextField, { id: "recipient", placeholder: "Enter full name", ...props.field })))),
             react_1.default.createElement(style_guide_1.FormRow, null,
-                react_1.default.createElement(style_guide_1.FormActionsBar, null,
+                react_1.default.createElement(FormActions, null,
                     react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: handleCancel }, "Cancel"),
                     react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText)))));
     }));
 };
 exports.AwardForm = AwardForm;
-const SearchContainer = styled_components_1.default.div `
-  position: relative;
-  width: 100%;
-`;
 const SearchIconContainer = styled_components_1.default.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_components_1.default.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 = (0, styled_components_1.default)(style_guide_1.TextField) `
-  padding-left: ${(props) => props.theme.grid.unit * 11}px;
-  &:hover,
-  &:focus {
-    background-color: ${(props) => props.theme.colors.background.fifth};
-  }
-`;
-const SearchResults = styled_components_1.default.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_components_1.default.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_components_1.default.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_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+};
+const Control = ({ children, ...props }) => {
+    return (react_1.default.createElement(react_select_1.components.Control, { ...props },
+        react_1.default.createElement(SearchIconContainer, { isFocused: props.isFocused },
+            react_1.default.createElement(style_guide_1.SearchIcon, null)),
+        children));
+};
+const Input = (props) => (react_1.default.createElement(react_select_1.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 = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
+  margin: ${(props) => props.theme.grid.unit * 2}px;
 `;
 const ErrorText = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.error};

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

@@ -16,6 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDebounce = void 0;
+exports.default = useDebounced;
 const react_1 = require("react");
 const useDebounce = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
@@ -30,3 +31,17 @@ const useDebounce = (value, delay) => {
     return debouncedValue;
 };
 exports.useDebounce = useDebounce;
+function useDebounced(fn, delay) {
+    const timeoutRef = (0, react_1.useRef)(null);
+    return (0, react_1.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/cjs/components/modal-drawer/GenericDrawerGroup.js

@@ -50,4 +50,5 @@ exports.AssignButton = styled_components_1.default.button `
   &:hover {
     opacity: 0.8;
   }
+  ${style_guide_1.outlineStyle}
 `;

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

@@ -48,6 +48,7 @@ const ImportBibliographyModal_1 = require("./ImportBibliographyModal");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ReferenceSearch_1 = require("./ReferenceSearch");
 const ReferencesModal_1 = require("./ReferencesModal");
+const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div ``);
 const CitedItemActions = styled_components_1.default.div `
   display: flex;
   align-items: center;
@@ -80,10 +81,10 @@ const ActionButton = (0, styled_components_1.default)(style_guide_1.IconButton).
 const EditReferenceButton = (0, styled_components_1.default)(ActionButton) `
   margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
-const Actions = styled_components_1.default.div `
+const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 const itemsReducer = (0, array_reducer_1.attrsReducer)();
@@ -171,7 +172,7 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
     if (!rids.length) {
         return (react_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: handleCite, onCancel: onCancel }));
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(Container, null,
         react_1.default.createElement(style_guide_1.Dialog, { isOpen: deleteDialog.show, category: style_guide_1.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: () => {
@@ -195,9 +196,7 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
                 react_1.default.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
                     react_1.default.createElement(style_guide_1.DeleteSolidIcon, { className: 'remove-icon' }))))))),
         react_1.default.createElement(Actions, null,
-            react_1.default.createElement(style_guide_1.IconTextButton, null),
-            react_1.default.createElement(style_guide_1.ButtonGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Done"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation")))));
+            react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Done"),
+            react_1.default.createElement(style_guide_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };
 exports.CitationEditor = CitationEditor;

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

@@ -58,6 +58,7 @@ const references_1 = require("../../lib/references");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ImportBibliographyForm = ({ onCancel, onSave, }) => {
     const [dragging, setDragging] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
     const formik = (0, formik_1.useFormik)({
         initialValues: {
             content: '',
@@ -116,13 +117,19 @@ const ImportBibliographyForm = ({ onCancel, onSave, }) => {
         };
         reader.readAsText(file);
     };
+    const handleOnKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            fileInputRef?.current?.click();
+        }
+    };
     return (react_1.default.createElement("form", { onSubmit: formik.handleSubmit, onReset: formik.handleReset },
         react_1.default.createElement(style_guide_1.FormRow, null,
-            react_1.default.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
+            react_1.default.createElement(DropContainer, { tabIndex: 0, role: "button", onDrop: handleDrop, onDragOver: (e) => {
                     e.preventDefault();
                     setDragging(true);
-                }, onDragLeave: () => setDragging(false), active: dragging },
-                react_1.default.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+                }, onDragLeave: () => setDragging(false), onKeyDown: handleOnKeyDown, active: dragging },
+                react_1.default.createElement("input", { id: "file", name: "file", type: "file", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }),
                 react_1.default.createElement(style_guide_1.Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file."))),
         react_1.default.createElement(style_guide_1.FormRow, null,
             react_1.default.createElement(style_guide_1.Label, { htmlFor: "content" }, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items."),
@@ -171,4 +178,6 @@ const DropContainer = styled_components_1.default.div `
     font-family: ${(props) => props.theme.font.family.Lato};
     color: ${(props) => props.theme.colors.text.onLight};
   }
+
+  ${style_guide_1.outlineStyle}
 `;

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

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

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

@@ -92,7 +92,7 @@ exports.ToggleButton = styled_components_1.default.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;
 
@@ -103,11 +103,20 @@ exports.ToggleButton = styled_components_1.default.button `
   svg {
     transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
   }
+  ${style_guide_1.outlineStyle}
 `;
-exports.RemoveButton = styled_components_1.default.button `
+exports.RemoveButton = (0, styled_components_1.default)(style_guide_1.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/cjs/components/references/ReferenceSearch.js

@@ -70,10 +70,10 @@ const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   justify-content: space-between;
   padding: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const Container = styled_components_1.default.div `
+const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div `
   flex: 1;
   font-family: ${(props) => props.theme.font.family.sans};
-`;
+`);
 const AddReferenceActions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   button {
     margin-right: ${(props) => props.theme.grid.unit * 8}px;