@manuscripts/body-editor 2.8.40 → 2.8.41

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

@@ -56,14 +56,25 @@ const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
+const use_debounce_1 = require("../hooks/use-debounce");
 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 fetchFunders = () => __awaiter(void 0, void 0, void 0, function* () {
+        const searchFunders = () => __awaiter(void 0, void 0, void 0, function* () {
+            const query = debouncedSearchQuery;
+            if (!query) {
+                setFunders([]);
+                return;
+            }
+            setIsLoading(true);
             try {
-                const response = yield fetch('https://api.crossref.org/funders');
+                const formattedQuery = query.replace(/\s+/g, '+');
+                const response = yield fetch(`https://api.crossref.org/funders?query=${encodeURIComponent(formattedQuery)}`);
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
@@ -73,21 +84,21 @@ const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
                     label: funder.name,
                 }));
                 funderOptions.sort((a, b) => a.label.localeCompare(b.label));
-                sessionStorage.setItem('funders', JSON.stringify(funderOptions));
                 setFunders(funderOptions);
             }
             catch (error) {
                 console.error('Error fetching funders:', error);
+                setFunders([]);
+            }
+            finally {
+                setIsLoading(false);
             }
         });
-        const storedFunders = sessionStorage.getItem('funders');
-        if (storedFunders) {
-            setFunders(JSON.parse(storedFunders));
-        }
-        else {
-            fetchFunders();
-        }
-    }, []);
+        searchFunders();
+    }, [debouncedSearchQuery]);
+    const handleFunderSearch = (event) => {
+        setSearchQuery(event.target.value);
+    };
     const handleCancel = () => {
         var _a;
         (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
@@ -100,9 +111,7 @@ const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
         }
         return errors;
     };
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: Object.assign(Object.assign({}, values), { source: funders.some((funder) => funder.value === values.source)
-                ? values.source
-                : '' }), onSubmit: (values, { setSubmitting }) => {
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: (values, { setSubmitting }) => {
             onSave(values);
             setSubmitting(false);
         }, enableReinitialize: true, validate: validate, validateOnChange: false, innerRef: formRef }, (formik) => {
@@ -110,8 +119,19 @@ const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
             react_1.default.createElement(formik_1.Field, { type: "hidden", name: "id" }),
             react_1.default.createElement(LabelContainer, null,
                 react_1.default.createElement(Label, { htmlFor: 'source' }, "Funder name")),
-            react_1.default.createElement(formik_1.Field, { name: "source", component: style_guide_1.SelectField, options: funders, value: funders.find((funder) => funder.value === formik.values.source) || '' }),
-            formik.errors.source && formik.touched.source && (react_1.default.createElement("div", { style: { color: 'red' } }, formik.errors.source)),
+            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 || '', autoFocus: true }))),
+                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)))))),
+            formik.errors.source && formik.touched.source && (react_1.default.createElement(ErrorText, null, formik.errors.source)),
             react_1.default.createElement(LabelContainer, null,
                 react_1.default.createElement(Label, { htmlFor: 'code' }, "Grant number")),
             react_1.default.createElement(style_guide_1.MultiValueInput, { id: "code", inputType: "text", placeholder: "Enter grant number and press enter", initialValues: values.code ? values.code.split(';') : [], onChange: (newValues) => {
@@ -119,7 +139,7 @@ const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
                 } }),
             react_1.default.createElement(LabelContainer, null,
                 react_1.default.createElement(Label, { htmlFor: 'recipient' }, "Recipient name")),
-            react_1.default.createElement(formik_1.Field, { name: "recipient" }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: "recipient", placeholder: "Enter full name " }, props.field)))),
+            react_1.default.createElement(formik_1.Field, { name: "recipient" }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: "recipient", placeholder: "Enter full name" }, props.field)))),
             react_1.default.createElement(ButtonContainer, 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))));
@@ -145,3 +165,66 @@ const ButtonContainer = styled_components_1.default.div `
   margin-top: 16px;
   gap: 8px;
 `;
+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;
+
+  path {
+    stroke: ${(props) => props.theme.colors.text.primary};
+  }
+
+  ${SearchContainer}:hover &,
+  ${SearchContainer}:focus-within & {
+    path {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+  }
+`;
+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;
+  &: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 ErrorText = styled_components_1.default.div `
+  color: ${(props) => props.theme.colors.text.error};
+  font-size: ${(props) => props.theme.font.size.small};
+  margin-top: 4px;
+`;

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '2.8.40';
+exports.VERSION = '2.8.41';
 exports.MATHJAX_VERSION = '3.2.2';

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

@@ -22,19 +22,30 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { MultiValueInput, PrimaryButton, SecondaryButton, SelectField, TextField, } from '@manuscripts/style-guide';
+import { MultiValueInput, PrimaryButton, SearchIcon, SecondaryButton, TextField, } from '@manuscripts/style-guide';
 import { Field, Formik } from 'formik';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
+import { useDebounce } from '../hooks/use-debounce';
 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 fetchFunders = () => __awaiter(void 0, void 0, void 0, function* () {
+        const searchFunders = () => __awaiter(void 0, void 0, void 0, function* () {
+            const query = debouncedSearchQuery;
+            if (!query) {
+                setFunders([]);
+                return;
+            }
+            setIsLoading(true);
             try {
-                const response = yield fetch('https://api.crossref.org/funders');
+                const formattedQuery = query.replace(/\s+/g, '+');
+                const response = yield fetch(`https://api.crossref.org/funders?query=${encodeURIComponent(formattedQuery)}`);
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
@@ -44,21 +55,21 @@ export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
                     label: funder.name,
                 }));
                 funderOptions.sort((a, b) => a.label.localeCompare(b.label));
-                sessionStorage.setItem('funders', JSON.stringify(funderOptions));
                 setFunders(funderOptions);
             }
             catch (error) {
                 console.error('Error fetching funders:', error);
+                setFunders([]);
+            }
+            finally {
+                setIsLoading(false);
             }
         });
-        const storedFunders = sessionStorage.getItem('funders');
-        if (storedFunders) {
-            setFunders(JSON.parse(storedFunders));
-        }
-        else {
-            fetchFunders();
-        }
-    }, []);
+        searchFunders();
+    }, [debouncedSearchQuery]);
+    const handleFunderSearch = (event) => {
+        setSearchQuery(event.target.value);
+    };
     const handleCancel = () => {
         var _a;
         (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
@@ -71,9 +82,7 @@ export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
         }
         return errors;
     };
-    return (React.createElement(Formik, { initialValues: Object.assign(Object.assign({}, values), { source: funders.some((funder) => funder.value === values.source)
-                ? values.source
-                : '' }), onSubmit: (values, { setSubmitting }) => {
+    return (React.createElement(Formik, { initialValues: values, onSubmit: (values, { setSubmitting }) => {
             onSave(values);
             setSubmitting(false);
         }, enableReinitialize: true, validate: validate, validateOnChange: false, innerRef: formRef }, (formik) => {
@@ -81,8 +90,19 @@ export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
             React.createElement(Field, { type: "hidden", name: "id" }),
             React.createElement(LabelContainer, null,
                 React.createElement(Label, { htmlFor: 'source' }, "Funder name")),
-            React.createElement(Field, { name: "source", component: SelectField, options: funders, value: funders.find((funder) => funder.value === formik.values.source) || '' }),
-            formik.errors.source && formik.touched.source && (React.createElement("div", { style: { color: 'red' } }, formik.errors.source)),
+            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 || '', autoFocus: true }))),
+                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)))))),
+            formik.errors.source && formik.touched.source && (React.createElement(ErrorText, null, formik.errors.source)),
             React.createElement(LabelContainer, null,
                 React.createElement(Label, { htmlFor: 'code' }, "Grant number")),
             React.createElement(MultiValueInput, { id: "code", inputType: "text", placeholder: "Enter grant number and press enter", initialValues: values.code ? values.code.split(';') : [], onChange: (newValues) => {
@@ -90,7 +110,7 @@ export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
                 } }),
             React.createElement(LabelContainer, null,
                 React.createElement(Label, { htmlFor: 'recipient' }, "Recipient name")),
-            React.createElement(Field, { name: "recipient" }, (props) => (React.createElement(TextField, Object.assign({ id: "recipient", placeholder: "Enter full name " }, props.field)))),
+            React.createElement(Field, { name: "recipient" }, (props) => (React.createElement(TextField, Object.assign({ id: "recipient", placeholder: "Enter full name" }, props.field)))),
             React.createElement(ButtonContainer, null,
                 React.createElement(SecondaryButton, { onClick: handleCancel }, "Cancel"),
                 React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText))));
@@ -115,3 +135,66 @@ const ButtonContainer = styled.div `
   margin-top: 16px;
   gap: 8px;
 `;
+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;
+
+  path {
+    stroke: ${(props) => props.theme.colors.text.primary};
+  }
+
+  ${SearchContainer}:hover &,
+  ${SearchContainer}:focus-within & {
+    path {
+      stroke: ${(props) => props.theme.colors.brand.medium};
+    }
+  }
+`;
+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;
+  &: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 ErrorText = styled.div `
+  color: ${(props) => props.theme.colors.text.error};
+  font-size: ${(props) => props.theme.font.size.small};
+  margin-top: 4px;
+`;

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.8.40';
+export const VERSION = '2.8.41';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/components/toolbar/type-selector/styles.d.ts

@@ -6,6 +6,7 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     options?: import("react-select").OptionsOrGroups<Option, import("react-select").GroupBase<Option>> | undefined;
     tabIndex?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
@@ -20,7 +21,6 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
     getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
     isDisabled?: boolean | undefined;
-    isLoading?: boolean | undefined;
     isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
     isMulti?: false | undefined;
     isRtl?: boolean | undefined;
@@ -52,6 +52,7 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     options?: import("react-select").OptionsOrGroups<Option, import("react-select").GroupBase<Option>> | undefined;
     tabIndex?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
@@ -66,7 +67,6 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
     getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
     isDisabled?: boolean | undefined;
-    isLoading?: boolean | undefined;
     isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
     isMulti?: false | undefined;
     isRtl?: boolean | undefined;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.40";
+export declare const VERSION = "2.8.41";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.40",
+  "version": "2.8.41",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",