@backstage/plugin-search 0.4.17 → 0.5.2

package/dist/esm/{index-17c9e868.esm.js → index-655809db.esm.js}

@@ -3,7 +3,7 @@ import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import * as React from 'react';
 import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
-import { ListItem, ListItemText, Divider, makeStyles, IconButton, Typography, Card, CardHeader, Button, CardContent, Select, MenuItem, List, Checkbox, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Chip } from '@material-ui/core';
+import { ListItem, ListItemIcon, ListItemText, Box, Divider, makeStyles, IconButton, Typography, Card, CardHeader, Button, CardContent, Select, MenuItem, List, Checkbox, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Chip } from '@material-ui/core';
 import { Link, Progress, ResponseErrorPanel, EmptyState, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import { usePrevious, useAsync, useDebounce, useEffectOnce } from 'react-use';
@@ -22,8 +22,7 @@ import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import { useNavigate } from 'react-router-dom';
 
 const searchApiRef = createApiRef({
-  id: "plugin.search.queryservice",
-  description: "Used to make requests against the search API"
+  id: "plugin.search.queryservice"
 });
 class SearchClient {
   constructor(options) {
@@ -35,7 +34,7 @@ class SearchClient {
     const queryString = qs.stringify(query);
     const url = `${await this.discoveryApi.getBaseUrl("search/query")}?${queryString}`;
     const response = await fetch(url, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!response.ok) {
       throw await ResponseError.fromResponse(response);
@@ -44,19 +43,25 @@ class SearchClient {
   }
 }
 
-const DefaultResultListItem$1 = ({result}) => {
+const DefaultResultListItem$1 = ({
+  result,
+  icon,
+  secondaryAction
+}) => {
   return /* @__PURE__ */ React__default.createElement(Link, {
     to: result.location
   }, /* @__PURE__ */ React__default.createElement(ListItem, {
-    alignItems: "flex-start"
-  }, /* @__PURE__ */ React__default.createElement(ListItemText, {
-    primaryTypographyProps: {variant: "h6"},
+    alignItems: "center"
+  }, icon && /* @__PURE__ */ React__default.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React__default.createElement(ListItemText, {
+    primaryTypographyProps: { variant: "h6" },
     primary: result.title,
     secondary: result.text
-  })), /* @__PURE__ */ React__default.createElement(Divider, null));
+  }), secondaryAction && /* @__PURE__ */ React__default.createElement(Box, {
+    alignItems: "flex-end"
+  }, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
 };
 
-const useStyles$9 = makeStyles((theme) => ({
+const useStyles$a = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -69,7 +74,7 @@ const FiltersButton$1 = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$9();
+  const classes = useStyles$a();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(IconButton, {
@@ -81,7 +86,7 @@ const FiltersButton$1 = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$8 = makeStyles((theme) => ({
+const useStyles$9 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -100,7 +105,7 @@ const Filters$1 = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$8();
+  const classes = useStyles$9();
   return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(CardHeader, {
@@ -170,6 +175,8 @@ const SearchContextProvider = ({
   const [filters, setFilters] = useState(initialState.filters);
   const [term, setTerm] = useState(initialState.term);
   const [types, setTypes] = useState(initialState.types);
+  const [open, setOpen] = useState(false);
+  const toggleModal = useCallback(() => setOpen((prevState) => !prevState), []);
   const prevTerm = usePrevious(term);
   const result = useAsync(() => searchApi.query({
     term,
@@ -196,6 +203,8 @@ const SearchContextProvider = ({
     result,
     filters,
     setFilters,
+    open,
+    toggleModal,
     term,
     setTerm,
     types,
@@ -219,70 +228,77 @@ const useSearch = () => {
 };
 
 const SearchBarBase = ({
-  value,
   onChange,
+  onKeyDown,
   onSubmit,
-  className,
-  placeholder: overridePlaceholder
+  debounceTime = 200,
+  clearButton = true,
+  fullWidth = true,
+  value: defaultValue,
+  inputProps: defaultInputProps = {},
+  endAdornment: defaultEndAdornment,
+  ...props
 }) => {
   const configApi = useApi(configApiRef);
-  const onKeyDown = React__default.useCallback((e) => {
+  const [value, setValue] = useState(defaultValue);
+  useEffect(() => {
+    setValue((prevValue) => prevValue !== defaultValue ? defaultValue : prevValue);
+  }, [defaultValue]);
+  useDebounce(() => onChange(value), debounceTime, [value]);
+  const handleChange = useCallback((e) => {
+    setValue(e.target.value);
+  }, [setValue]);
+  const handleKeyDown = useCallback((e) => {
+    if (onKeyDown)
+      onKeyDown(e);
     if (onSubmit && e.key === "Enter") {
       onSubmit();
     }
-  }, [onSubmit]);
-  const handleClear = React__default.useCallback(() => {
+  }, [onKeyDown, onSubmit]);
+  const handleClear = useCallback(() => {
     onChange("");
   }, [onChange]);
-  const placeholder = overridePlaceholder != null ? overridePlaceholder : `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
+  const placeholder = `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
+  const startAdornment = /* @__PURE__ */ React__default.createElement(InputAdornment, {
+    position: "start"
+  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+    "aria-label": "Query",
+    disabled: true
+  }, /* @__PURE__ */ React__default.createElement(SearchIcon, null)));
+  const endAdornment = /* @__PURE__ */ React__default.createElement(InputAdornment, {
+    position: "end"
+  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+    "aria-label": "Clear",
+    onClick: handleClear
+  }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
   return /* @__PURE__ */ React__default.createElement(InputBase, {
     "data-testid": "search-bar-next",
-    fullWidth: true,
-    placeholder,
     value,
-    onChange: (e) => onChange(e.target.value),
-    inputProps: {"aria-label": "Search"},
-    startAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, {
-      position: "start"
-    }, /* @__PURE__ */ React__default.createElement(IconButton, {
-      "aria-label": "Query",
-      disabled: true
-    }, /* @__PURE__ */ React__default.createElement(SearchIcon, null))),
-    endAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, {
-      position: "end"
-    }, /* @__PURE__ */ React__default.createElement(IconButton, {
-      "aria-label": "Clear",
-      onClick: handleClear
-    }, /* @__PURE__ */ React__default.createElement(ClearButton, null))),
-    ...className && {className},
-    ...onSubmit && {onKeyDown}
+    placeholder,
+    startAdornment,
+    endAdornment: clearButton ? endAdornment : defaultEndAdornment,
+    inputProps: { "aria-label": "Search", ...defaultInputProps },
+    fullWidth,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ...props
   });
 };
-const SearchBar$1 = ({
-  className,
-  debounceTime = 0,
-  placeholder
-}) => {
-  const {term, setTerm} = useSearch();
-  const [value, setValue] = useState(term);
-  useEffect(() => {
-    setValue((prevValue) => prevValue !== term ? term : prevValue);
-  }, [term]);
-  useDebounce(() => setTerm(value), debounceTime, [value]);
-  const handleQuery = (newValue) => {
-    setValue(newValue);
+const SearchBar$1 = ({ onChange, ...props }) => {
+  const { term, setTerm } = useSearch();
+  const handleChange = (newValue) => {
+    setTerm(newValue);
+    if (onChange)
+      onChange(newValue);
   };
-  const handleClear = () => setValue("");
   return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
-    className,
-    value,
-    onChange: handleQuery,
-    onClear: handleClear,
-    placeholder
+    value: term,
+    onChange: handleChange,
+    ...props
   });
 };
 
-const useStyles$7 = makeStyles({
+const useStyles$8 = makeStyles({
   label: {
     textTransform: "capitalize"
   }
@@ -293,8 +309,8 @@ const CheckboxFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$7();
-  const {filters, setFilters} = useSearch();
+  const classes = useStyles$8();
+  const { filters, setFilters } = useSearch();
   useEffect(() => {
     if (Array.isArray(defaultValue)) {
       setFilters((prevFilters) => ({
@@ -305,13 +321,13 @@ const CheckboxFilter = ({
   }, []);
   const handleChange = (e) => {
     const {
-      target: {value, checked}
+      target: { value, checked }
     } = e;
     setFilters((prevFilters) => {
-      const {[name]: filter, ...others} = prevFilters;
+      const { [name]: filter, ...others } = prevFilters;
       const rest = (filter || []).filter((i) => i !== value);
       const items = checked ? [...rest, value] : rest;
-      return items.length ? {...others, [name]: items} : others;
+      return items.length ? { ...others, [name]: items } : others;
     });
   };
   return /* @__PURE__ */ React__default.createElement(FormControl, {
@@ -327,7 +343,7 @@ const CheckboxFilter = ({
       control: /* @__PURE__ */ React__default.createElement(Checkbox, {
         color: "primary",
         tabIndex: -1,
-        inputProps: {"aria-labelledby": value},
+        inputProps: { "aria-labelledby": value },
         value,
         name: value,
         onChange: handleChange,
@@ -343,8 +359,8 @@ const SelectFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$7();
-  const {filters, setFilters} = useSearch();
+  const classes = useStyles$8();
+  const { filters, setFilters } = useSearch();
   useEffect(() => {
     if (typeof defaultValue === "string") {
       setFilters((prevFilters) => ({
@@ -355,11 +371,11 @@ const SelectFilter = ({
   }, []);
   const handleChange = (e) => {
     const {
-      target: {value}
+      target: { value }
     } = e;
     setFilters((prevFilters) => {
-      const {[name]: filter, ...others} = prevFilters;
-      return value ? {...others, [name]: value} : others;
+      const { [name]: filter, ...others } = prevFilters;
+      return value ? { ...others, [name]: value } : others;
     });
   };
   return /* @__PURE__ */ React__default.createElement(FormControl, {
@@ -381,7 +397,7 @@ const SelectFilter = ({
     value
   }, value))));
 };
-const SearchFilter = ({component: Element, ...props}) => /* @__PURE__ */ React__default.createElement(Element, {
+const SearchFilter = ({ component: Element, ...props }) => /* @__PURE__ */ React__default.createElement(Element, {
   ...props
 });
 SearchFilter.Checkbox = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
@@ -398,9 +414,9 @@ var Launch = createSvgIcon( /*#__PURE__*/React.createElement("path", {
   d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
 }), 'Launch');
 
-const SearchResultComponent = ({children}) => {
+const SearchResultComponent = ({ children }) => {
   const {
-    result: {loading, error, value}
+    result: { loading, error, value }
   } = useSearch();
   if (loading) {
     return /* @__PURE__ */ React__default.createElement(Progress, null);
@@ -417,20 +433,20 @@ const SearchResultComponent = ({children}) => {
       title: "Sorry, no results were found"
     });
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({results: value.results}));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({ results: value.results }));
 };
 
-const useStyles$6 = makeStyles((theme) => ({
+const useStyles$7 = makeStyles((theme) => ({
   root: {
     display: "flex",
     justifyContent: "space-between",
     gap: theme.spacing(2),
-    margin: theme.spacing(4)
+    margin: theme.spacing(2, 0)
   }
 }));
 const SearchResultPager = () => {
-  const {fetchNextPage, fetchPreviousPage} = useSearch();
-  const classes = useStyles$6();
+  const { fetchNextPage, fetchPreviousPage } = useSearch();
+  const classes = useStyles$7();
   if (!fetchNextPage && !fetchPreviousPage) {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
   }
@@ -441,33 +457,29 @@ const SearchResultPager = () => {
     "aria-label": "previous page",
     disabled: !fetchPreviousPage,
     onClick: fetchPreviousPage,
-    startIcon: /* @__PURE__ */ React__default.createElement(ArrowBackIosIcon, null),
-    size: "small"
-  }, "Back"), /* @__PURE__ */ React__default.createElement(Button, {
+    startIcon: /* @__PURE__ */ React__default.createElement(ArrowBackIosIcon, null)
+  }, "Previous"), /* @__PURE__ */ React__default.createElement(Button, {
     "aria-label": "next page",
     disabled: !fetchNextPage,
     onClick: fetchNextPage,
-    endIcon: /* @__PURE__ */ React__default.createElement(ArrowForwardIosIcon, null),
-    size: "small"
+    endIcon: /* @__PURE__ */ React__default.createElement(ArrowForwardIosIcon, null)
   }, "Next"));
 };
 
 const rootRouteRef = createRouteRef({
-  path: "/search",
-  title: "search"
+  id: "search"
 });
 const rootNextRouteRef = createRouteRef({
-  path: "/search-next",
-  title: "search"
+  id: "search:next"
 });
 const searchPlugin = createPlugin({
   id: "search",
   apis: [
     createApiFactory({
       api: searchApiRef,
-      deps: {discoveryApi: discoveryApiRef, identityApi: identityApiRef},
-      factory: ({discoveryApi, identityApi}) => {
-        return new SearchClient({discoveryApi, identityApi});
+      deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
+      factory: ({ discoveryApi, identityApi }) => {
+        return new SearchClient({ discoveryApi, identityApi });
       }
     })
   ],
@@ -478,58 +490,58 @@ const searchPlugin = createPlugin({
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-3b720a86.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0a2fab21.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
 const SearchPageNext = searchPlugin.provide(createRoutableExtension({
   name: "SearchPageNext",
-  component: () => import('./index-3b720a86.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0a2fab21.esm.js').then((m) => m.SearchPage),
   mountPoint: rootNextRouteRef
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchBar",
   component: {
-    lazy: () => import('./index-597d3990.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-d5ddea91.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchBarNext = searchPlugin.provide(createComponentExtension({
   name: "SearchBarNext",
   component: {
-    lazy: () => import('./index-597d3990.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-d5ddea91.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchResult$1 = searchPlugin.provide(createComponentExtension({
   name: "SearchResult",
   component: {
-    lazy: () => import('./index-022e0330.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-2a318193.esm.js').then((m) => m.SearchResult)
   }
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchResultNext",
   component: {
-    lazy: () => import('./index-022e0330.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-2a318193.esm.js').then((m) => m.SearchResult)
   }
 }));
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-226c47ca.esm.js').then((m) => m.SidebarSearchModal)
+    lazy: () => import('./index-af05ea86.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
 const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
   name: "DefaultResultListItem",
   component: {
-    lazy: () => import('./index-12477c15.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-18219c65.esm.js').then((m) => m.DefaultResultListItem)
   }
 }));
-const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
+const HomePageSearchBar$1 = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-b3bf028c.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-a71e930d.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
-const useStyles$5 = makeStyles$1((theme) => ({
+const useStyles$6 = makeStyles$1((theme) => ({
   container: {
     borderRadius: 30,
     display: "flex",
@@ -538,26 +550,16 @@ const useStyles$5 = makeStyles$1((theme) => ({
   input: {
     flex: 1
   },
-  paperFullWidth: {height: "calc(100% - 128px)"},
-  dialogActionsContainer: {padding: theme.spacing(1, 3)},
-  viewResultsLink: {verticalAlign: "0.5em"}
+  paperFullWidth: { height: "calc(100% - 128px)" },
+  dialogActionsContainer: { padding: theme.spacing(1, 3) },
+  viewResultsLink: { verticalAlign: "0.5em" }
 }));
-const Modal = ({open = true, toggleModal}) => {
+const Modal = ({ open = true, toggleModal }) => {
   const getSearchLink = useRouteRef(rootRouteRef);
-  const classes = useStyles$5();
-  const {term, setTerm} = useSearch();
-  const [value, setValue] = useState(term);
-  useEffect(() => {
-    setValue((prevValue) => prevValue !== term ? term : prevValue);
-  }, [term]);
-  useDebounce(() => setTerm(value), 1e3, [value]);
-  const handleQuery = (newValue) => {
-    setValue(newValue);
-  };
-  const handleClear = () => setValue("");
+  const classes = useStyles$6();
+  const { term } = useSearch();
   const handleResultClick = () => {
     toggleModal();
-    handleClear();
   };
   const handleKeyPress = () => {
     handleResultClick();
@@ -573,11 +575,8 @@ const Modal = ({open = true, toggleModal}) => {
     maxWidth: "lg"
   }, /* @__PURE__ */ React__default.createElement(DialogTitle, null, /* @__PURE__ */ React__default.createElement(Paper, {
     className: classes.container
-  }, /* @__PURE__ */ React__default.createElement(SearchBarBase, {
-    className: classes.input,
-    value,
-    onChange: handleQuery,
-    onClear: handleClear
+  }, /* @__PURE__ */ React__default.createElement(SearchBar$1, {
+    className: classes.input
   }))), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
     direction: "row-reverse",
@@ -586,12 +585,13 @@ const Modal = ({open = true, toggleModal}) => {
   }, /* @__PURE__ */ React__default.createElement(Grid, {
     item: true
   }, /* @__PURE__ */ React__default.createElement(Link, {
-    to: `${getSearchLink()}?query=${value}`
+    onClick: toggleModal,
+    to: `${getSearchLink()}?query=${term}`
   }, /* @__PURE__ */ React__default.createElement("span", {
     className: classes.viewResultsLink
   }, "View Full Results"), /* @__PURE__ */ React__default.createElement(Launch, {
     color: "primary"
-  })))), /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.createElement(SearchResultComponent, null, ({results}) => /* @__PURE__ */ React__default.createElement(List, null, results.map(({document}) => /* @__PURE__ */ React__default.createElement("div", {
+  })))), /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.createElement(SearchResultComponent, null, ({ results }) => /* @__PURE__ */ React__default.createElement(List, null, results.map(({ document }) => /* @__PURE__ */ React__default.createElement("div", {
     role: "button",
     tabIndex: 0,
     key: `${document.location}-btn`,
@@ -610,14 +610,14 @@ const Modal = ({open = true, toggleModal}) => {
     xs: 12
   }, /* @__PURE__ */ React__default.createElement(SearchResultPager, null)))));
 };
-const SearchModal = ({open = true, toggleModal}) => {
+const SearchModal = ({ open = true, toggleModal }) => {
   return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(Modal, {
     open,
     toggleModal
   }));
 };
 
-const useStyles$4 = makeStyles$1(() => ({
+const useStyles$5 = makeStyles$1(() => ({
   root: {
     display: "flex",
     alignItems: "center"
@@ -631,7 +631,7 @@ const SearchBar = ({
   handleSearch,
   handleClearSearchBar
 }) => {
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   return /* @__PURE__ */ React__default.createElement(Paper, {
     component: "form",
     onSubmit: (e) => handleSearch(e),
@@ -645,14 +645,14 @@ const SearchBar = ({
     placeholder: "Search in Backstage",
     value: searchQuery,
     onChange: (e) => handleSearch(e),
-    inputProps: {"aria-label": "search backstage"}
+    inputProps: { "aria-label": "search backstage" }
   }), /* @__PURE__ */ React__default.createElement(IconButton$1, {
     "aria-label": "search",
     onClick: () => handleClearSearchBar()
   }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
 };
 
-const useStyles$3 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -665,7 +665,7 @@ const FiltersButton = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(IconButton, {
@@ -677,7 +677,7 @@ const FiltersButton = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -696,7 +696,7 @@ const Filters = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(CardHeader, {
@@ -750,7 +750,7 @@ const Filters = ({
   }))))));
 };
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   searchQuery: {
     color: theme.palette.text.primary,
     background: theme.palette.background.default,
@@ -798,7 +798,7 @@ const TableHeader = ({
   numberOfResults,
   handleToggleFilters
 }) => {
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.tableHeader
   }, /* @__PURE__ */ React__default.createElement(FiltersButton, {
@@ -818,7 +818,7 @@ const TableHeader = ({
     variant: "h6"
   }, `${numberOfResults} results`)));
 };
-const SearchResult = ({searchQuery}) => {
+const SearchResult = ({ searchQuery }) => {
   const catalogApi = useApi(catalogApiRef);
   const [showFilters, toggleFilters] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState({
@@ -928,7 +928,7 @@ const SearchResult = ({searchQuery}) => {
     item: true,
     xs: showFilters ? 9 : 12
   }, /* @__PURE__ */ React__default.createElement(Table, {
-    options: {paging: true, pageSize: 20, search: false},
+    options: { paging: true, pageSize: 20, search: false },
     data: filteredResults,
     columns,
     title: /* @__PURE__ */ React__default.createElement(TableHeader, {
@@ -993,7 +993,7 @@ const UrlUpdater = () => {
     if (location.search === prevQueryParams) {
       return;
     }
-    const query = qs.parse(location.search.substring(1), {arrayLimit: 0}) || {};
+    const query = qs.parse(location.search.substring(1), { arrayLimit: 0 }) || {};
     if (query.filters) {
       setFilters(query.filters);
     }
@@ -1013,7 +1013,7 @@ const UrlUpdater = () => {
       types,
       pageCursor,
       filters
-    }, {arrayFormat: "brackets"});
+    }, { arrayFormat: "brackets" });
     const newUrl = `${window.location.pathname}?${newParams}`;
     window.history.replaceState(null, document.title, newUrl);
   }, [term, types, pageCursor, filters]);
@@ -1024,7 +1024,7 @@ const SearchPage = () => {
   return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React__default.createElement(LegacySearchPage, null));
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   label: {
     textTransform: "capitalize"
   },
@@ -1043,8 +1043,8 @@ const SearchType = ({
   name,
   defaultValue
 }) => {
-  const classes = useStyles();
-  const {types, setTypes} = useSearch();
+  const classes = useStyles$1();
+  const { types, setTypes } = useSearch();
   useEffectOnce(() => {
     if (!types.length) {
       if (defaultValue && Array.isArray(defaultValue)) {
@@ -1090,18 +1090,58 @@ const SearchType = ({
   })))));
 };
 
-const SidebarSearch = () => {
+const SidebarSearch = (props) => {
   const searchRoute = useRouteRef(rootRouteRef);
   const navigate = useNavigate();
   const handleSearch = useCallback((query) => {
-    const queryString = qs.stringify({query}, {addQueryPrefix: true});
+    const queryString = qs.stringify({ query }, { addQueryPrefix: true });
     navigate(`${searchRoute()}${queryString}`);
   }, [navigate, searchRoute]);
   return /* @__PURE__ */ React__default.createElement(SidebarSearchField, {
+    icon: props.icon,
     onSearch: handleSearch,
     to: "/search"
   });
 };
 
-export { DefaultResultListItem$1 as D, Filters$1 as F, HomePageSearchBar as H, SearchPage as S, SearchBar$1 as a, SearchBarBase as b, SearchResultComponent as c, SearchModal as d, FiltersButton$1 as e, SearchContextProvider as f, SearchFilter as g, SearchFilterNext as h, SearchResultPager as i, SearchType as j, SidebarSearch as k, DefaultResultListItem as l, SearchBarNext as m, SearchPage$1 as n, SearchPageNext as o, searchPlugin as p, SearchResult$1 as q, rootRouteRef as r, searchApiRef as s, SidebarSearchModal as t, useSearch as u };
-//# sourceMappingURL=index-17c9e868.esm.js.map
+const useNavigateToQuery = () => {
+  const searchRoute = useRouteRef(rootRouteRef);
+  const navigate = useNavigate();
+  return useCallback(({ query }) => {
+    const queryString = qs.stringify({ query }, { addQueryPrefix: true });
+    navigate(`${searchRoute()}${queryString}`);
+  }, [navigate, searchRoute]);
+};
+
+const useStyles = makeStyles$1({
+  searchBar: {
+    border: "1px solid #555",
+    borderRadius: "6px",
+    fontSize: "1.5em"
+  }
+});
+const HomePageSearchBar = ({
+  className: defaultClassName,
+  ...props
+}) => {
+  const classes = useStyles();
+  const [query, setQuery] = useState("");
+  const handleSearch = useNavigateToQuery();
+  const className = defaultClassName ? `${classes.searchBar} ${defaultClassName}` : classes.searchBar;
+  const handleSubmit = () => {
+    handleSearch({ query });
+  };
+  const handleChange = useCallback((value) => {
+    setQuery(value);
+  }, [setQuery]);
+  return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
+    className,
+    value: query,
+    onSubmit: handleSubmit,
+    onChange: handleChange,
+    ...props
+  });
+};
+
+export { DefaultResultListItem$1 as D, Filters$1 as F, HomePageSearchBar as H, SearchPage as S, SearchBar$1 as a, SearchBarBase as b, SearchResultComponent as c, SearchModal as d, FiltersButton$1 as e, SearchContextProvider as f, SearchFilter as g, SearchFilterNext as h, SearchResultPager as i, SearchType as j, SidebarSearch as k, DefaultResultListItem as l, HomePageSearchBar$1 as m, SearchBarNext as n, SearchPage$1 as o, SearchPageNext as p, searchPlugin as q, SearchResult$1 as r, searchApiRef as s, SidebarSearchModal as t, useSearch as u };
+//# sourceMappingURL=index-655809db.esm.js.map