@manuscripts/body-editor 3.12.1 → 3.12.3

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/AuthorDetailsForm.js

@@ -51,30 +51,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthorDetailsForm = exports.CheckboxContainer = exports.Fieldset = void 0;
+exports.CheckboxContainer = exports.Fieldset = exports.AuthorDetailsForm = 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 normalize_1 = require("../../lib/normalize");
 const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
-exports.Fieldset = styled_components_1.default.fieldset `
-  padding: 0;
-  margin: 0;
-  border: none;
-`;
-const OrcidContainer = styled_components_1.default.div `
-  margin: 16px 0 0;
-`;
-const TextFieldWithError = (0, styled_components_1.default)(style_guide_1.TextField) `
-  &:required::placeholder {
-    color: ${(props) => props.theme.colors.text.error};
-  }
-`;
-exports.CheckboxContainer = styled_components_1.default.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);
 const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequired, selectedAffiliations, selectedCreditRoles, authorFormRef, }) => {
     const formRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -96,17 +82,22 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
     }
     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_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
-        return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: (submitted) => onSave((0, normalize_1.normalizeAuthor)(submitted)), enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
+        return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: (next) => onChange((0, normalize_1.normalizeAuthor)(next)), id: "author-details-form", formRef: authorFormRef, noValidate: true },
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(formik_1.Field, { name: 'prefix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(style_guide_1.Label, { htmlFor: "prefix" }, "Prefix"),
@@ -134,16 +125,35 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
                         react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
                         hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'email')))));
                 })),
-            react_1.default.createElement(exports.CheckboxContainer, null,
-                react_1.default.createElement(style_guide_1.CheckboxLabel, null,
-                    react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
-                    react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author"))),
-            react_1.default.createElement(OrcidContainer, null,
-                react_1.default.createElement(style_guide_1.FormRow, null,
-                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
-                    react_1.default.createElement(formik_1.Field, { name: 'ORCID', type: 'text' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
-                        react_1.default.createElement(style_guide_1.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_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(exports.CheckboxContainer, { "data-cy": "corresponding-author-container" },
+                    react_1.default.createElement(style_guide_1.CheckboxLabel, null,
+                        react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
+                        react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author")))),
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(formik_1.Field, { name: 'ORCID', type: 'text' }, (props) => {
+                    const hasError = (0, formik_1.getIn)(formik.touched, 'ORCID') &&
+                        (0, formik_1.getIn)(formik.errors, 'ORCID');
+                    return (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
+                        react_1.default.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_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'ORCID')))));
+                }))));
     }));
 };
 exports.AuthorDetailsForm = AuthorDetailsForm;
+exports.Fieldset = styled_components_1.default.fieldset `
+  padding: 0;
+  margin: 0;
+  border: none;
+`;
+const TextFieldWithError = (0, styled_components_1.default)(style_guide_1.TextField) `
+  &:required::placeholder {
+    color: ${(props) => props.theme.colors.text.error};
+  }
+`;
+exports.CheckboxContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 32px;
+`;

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