@manuscripts/body-editor 3.12.1 → 3.12.3

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

@@ -1,7 +1,7 @@
-import { AffiliationIcon, CrclTickAnimation, DeleteIcon, } from '@manuscripts/style-guide';
+import { AffiliationIcon, CrclTickAnimation, DeleteIcon, SecondaryIconButton, withNavigableListItem, } from '@manuscripts/style-guide';
 import React, { useRef } from 'react';
 import styled from 'styled-components';
-const AffiliationContainer = styled.div `
+const AffiliationContainer = withNavigableListItem(styled.div `
   padding: ${(props) => props.theme.grid.unit * 2}px 0
     ${(props) => props.theme.grid.unit * 2}px;
   display: flex;
@@ -19,7 +19,7 @@ const AffiliationContainer = styled.div `
   &.active {
     border-color: ${(props) => props.theme.colors.border.primary};
   }
-`;
+`);
 const AffiliationName = styled.div `
   margin-left: 12px;
   flex: 1;
@@ -43,15 +43,11 @@ const AffiliationBox = styled.div `
   flex-direction: column;
   margin-left: 4px;
 `;
-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;
+    }
   }
 `;
 export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSuccessIcon, }) => {
@@ -75,6 +71,6 @@ export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, sh
                     affiliation.country ? ', ' : '')),
                 affiliation.country && React.createElement(React.Fragment, null, affiliation.country))),
         showSuccessIcon && (React.createElement(CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
-        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/affiliations/AffiliationList.js

@@ -16,18 +16,16 @@
 import React from 'react';
 import styled from 'styled-components';
 import { AffiliationItem } from './AffiliationItem';
-const AffiliationListContainer = styled.div `
+import { withListNavigation } from '@manuscripts/style-guide';
+const AffiliationListContainer = withListNavigation(styled.div `
   flex: 1;
   overflow-y: visible;
-  margin-left: 16px;
-`;
+`);
 const AffiliationListTitle = styled.h2 `
   color: #6e6e6e;
   font-size: 18px;
   font-weight: 400;
   line-height: 24px;
-  margin-left: 14px;
-  margin-top: 20px;
 `;
 export const AffiliationList = ({ affiliation, affiliations, onSelect, onDelete, lastSavedAffiliationId, }) => {
     return (React.createElement(React.Fragment, null,

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

@@ -1,4 +1,4 @@
-import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, outlineStyle, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -328,7 +328,9 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
                         React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
                 React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
                     React.createElement(AffiliationTabs, null,
-                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
+                        React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog &&
+                                !(showConfirmationDialog ||
+                                    showRequiredFieldConfirmationDialog), showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
                         React.createElement(InspectorTabList, null,
                             React.createElement(InspectorTab, null, "Details"),
                             React.createElement(InspectorTab, null, "Authors")),
@@ -363,9 +365,15 @@ function createEmptyAffiliation(priority) {
     };
 }
 const StyledSidebarContent = styled(SidebarContent) `
-  padding: 0;
+  padding: 8px;
 `;
-const AddAffiliationButton = styled.div `
+const AddAffiliationButton = styled.button `
+  background: none;
+  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 12px 8px 12px 12px;
@@ -376,6 +384,7 @@ const AddAffiliationButton = styled.div `
     border-left: 0;
     border-right: 0;
   }
+  ${outlineStyle}
 `;
 const ActionTitle = styled.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
@@ -383,7 +392,7 @@ const ActionTitle = styled.div `
 const AffiliationTabs = styled(InspectorTabs) `
   position: relative;
 `;
-const AffiliationTabPanel = styled(InspectorTabPanel).attrs({ unmount: false }) `
+const AffiliationTabPanel = styled(InspectorTabPanel).attrs({ tabIndex: -1, unmount: false }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
 `;
 const StyledModalBody = styled(ModalBody) `

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

@@ -17,25 +17,11 @@ import { CheckboxField, CheckboxLabel, TextField, InputErrorText, Label, FormRow
 import { Field, Formik, getIn, } from 'formik';
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
+import { normalizeAuthor } from '../../lib/normalize';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
-export const Fieldset = styled.fieldset `
-  padding: 0;
-  margin: 0;
-  border: none;
-`;
-const OrcidContainer = styled.div `
-  margin: 16px 0 0;
-`;
-const TextFieldWithError = styled(TextField) `
-  &:required::placeholder {
-    color: ${(props) => props.theme.colors.text.error};
-  }
-`;
-export const CheckboxContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 32px;
-`;
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const ORCID_URL_REGEX = /^https:\/\/orcid\.org\/\d{4}-\d{4}-\d{4}-\d{3}[0-9Xx]\/?$/;
+const ORCID_INPUT_PATTERN = ORCID_URL_REGEX.source.slice(1, -1);
 export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, selectedCreditRoles, authorFormRef, }) => {
     const formRef = useRef(null);
     useEffect(() => {
@@ -57,17 +43,22 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
     }
     const validateAuthor = (values) => {
         const errors = {};
-        if (isEmailRequired && !values.email) {
+        const email = values.email?.trim();
+        if (isEmailRequired && !email) {
             errors.email = 'Email address is required';
         }
-        else if (values.email &&
-            !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
+        else if (email && !EMAIL_REGEX.test(email)) {
             errors.email = 'Invalid email address';
         }
+        const orcid = values.ORCID?.trim();
+        if (orcid && !ORCID_URL_REGEX.test(orcid)) {
+            errors.ORCID =
+                'Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx';
+        }
         return errors;
     };
-    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
-        return (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
+    return (React.createElement(Formik, { initialValues: values, onSubmit: (submitted) => onSave(normalizeAuthor(submitted)), enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
+        return (React.createElement(ChangeHandlingForm, { onChange: (next) => onChange(normalizeAuthor(next)), id: "author-details-form", formRef: authorFormRef, noValidate: true },
             React.createElement(FormRow, null,
                 React.createElement(Field, { name: 'prefix' }, (props) => (React.createElement(React.Fragment, null,
                     React.createElement(Label, { htmlFor: "prefix" }, "Prefix"),
@@ -95,15 +86,34 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
                         React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
                         hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'email')))));
                 })),
-            React.createElement(CheckboxContainer, null,
-                React.createElement(CheckboxLabel, null,
-                    React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
-                    React.createElement(LabelText, null, "Corresponding Author"))),
-            React.createElement(OrcidContainer, null,
-                React.createElement(FormRow, null,
-                    React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
-                    React.createElement(Field, { name: 'ORCID', type: 'text' }, (props) => (React.createElement(React.Fragment, null,
-                        React.createElement(Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
-                        React.createElement(TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field }))))))));
+            React.createElement(FormRow, null,
+                React.createElement(CheckboxContainer, { "data-cy": "corresponding-author-container" },
+                    React.createElement(CheckboxLabel, null,
+                        React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
+                        React.createElement(LabelText, null, "Corresponding Author")))),
+            React.createElement(FormRow, null,
+                React.createElement(Field, { name: 'ORCID', type: 'text' }, (props) => {
+                    const hasError = getIn(formik.touched, 'ORCID') &&
+                        getIn(formik.errors, 'ORCID');
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
+                        React.createElement(TextFieldWithError, { id: 'orcid', type: "url", placeholder: 'https://orcid.org/...', ...props.field, pattern: ORCID_INPUT_PATTERN, title: "Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx", error: hasError }),
+                        hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'ORCID')))));
+                }))));
     }));
 };
+export const Fieldset = styled.fieldset `
+  padding: 0;
+  margin: 0;
+  border: none;
+`;
+const TextFieldWithError = styled(TextField) `
+  &:required::placeholder {
+    color: ${(props) => props.theme.colors.text.error};
+  }
+`;
+export const CheckboxContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 32px;
+`;

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

@@ -18,10 +18,12 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import styled from 'styled-components';
 import { DraggableAuthor } from './DraggableAuthor';
-const AuthorListContainer = styled.div `
+import { withListNavigation } from '@manuscripts/style-guide';
+const AuthorListContainer = withListNavigation(styled.div `
   flex: 1;
   overflow-y: visible;
-`;
+  padding: 0 6px;
+`);
 const AuthorListTitle = styled.h2 `
   color: #6e6e6e;
   font-size: 18px;

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
+import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, outlineStyle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
 import { generateNodeID, schema, } from '@manuscripts/transform';
 import { cloneDeep, isEqual, omit } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -346,7 +346,13 @@ function createEmptyAuthor(priority) {
         prefix: '',
     };
 }
-const AddAuthorButton = styled.div `
+const AddAuthorButton = styled.button `
+  background: none;
+  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
   display: flex;
   align-items: center;
   padding: 12px 8px 12px 12px;
@@ -357,6 +363,7 @@ const AddAuthorButton = styled.div `
     border-left: 0;
     border-right: 0;
   }
+  ${outlineStyle}
 `;
 const ActionTitle = styled.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
@@ -364,11 +371,11 @@ const ActionTitle = styled.div `
 const AuthorTabs = styled(InspectorTabs) `
   position: relative;
 `;
-const AuthorTabPanel = styled(InspectorTabPanel).attrs({ unmount: false }) `
+const AuthorTabPanel = styled(InspectorTabPanel).attrs({ tabIndex: -1, unmount: false }) `
   margin-top: ${(props) => props.theme.grid.unit * 4}px;
 `;
 const StyledSidebarContent = styled(SidebarContent) `
-  padding: 0;
+  padding: 8px;
 `;
 const StyledModalBody = styled(ModalBody) `
   position: relative;

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}
 `;