@backstage/plugin-search 0.5.4 → 0.6.0

package/dist/esm/{index-9ed6d72a.esm.js → index-19c51c5a.esm.js}

@@ -1,24 +1,24 @@
 import { createApiRef, useApi, AnalyticsContext, useAnalytics, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
-import * as React from 'react';
-import React__default, { createContext, useState, useCallback, useEffect, useContext, Fragment, cloneElement } from 'react';
+import React, { createContext, useState, useCallback, useEffect, useContext, useRef, Fragment, cloneElement } from 'react';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Chip } from '@material-ui/core';
+import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, TextField, Chip, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, useTheme, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab } from '@material-ui/core';
 import useDebounce from 'react-use/lib/useDebounce';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 import useAsync from 'react-use/lib/useAsync';
 import usePrevious from 'react-use/lib/usePrevious';
+import { Autocomplete, Alert } from '@material-ui/lab';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
+import LaunchIcon from '@material-ui/icons/Launch';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
-import { Link, Progress, ResponseErrorPanel, EmptyState, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
+import { Link, Progress, ResponseErrorPanel, EmptyState, useContent, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import { createSvgIcon } from '@material-ui/core/utils';
 import { useOutlet, useLocation } from 'react-router';
 import InputBase$1 from '@material-ui/core/InputBase';
 import IconButton$1 from '@material-ui/core/IconButton';
-import { Alert } from '@material-ui/lab';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
@@ -35,7 +35,7 @@ class SearchClient {
     this.identityApi = options.identityApi;
   }
   async query(query) {
-    const token = await this.identityApi.getIdToken();
+    const { token } = await this.identityApi.getCredentials();
     const queryString = qs.stringify(query);
     const url = `${await this.discoveryApi.getBaseUrl("search/query")}?${queryString}`;
     const response = await fetch(url, {
@@ -62,13 +62,13 @@ const FiltersButton$1 = ({
   handleToggleFilters
 }) => {
   const classes = useStyles$b();
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: classes.filters
-  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+  }, /* @__PURE__ */ React.createElement(IconButton, {
     className: classes.icon,
     "aria-label": "settings",
     onClick: handleToggleFilters
-  }, /* @__PURE__ */ React__default.createElement(FilterListIcon, null)), /* @__PURE__ */ React__default.createElement(Typography, {
+  }, /* @__PURE__ */ React.createElement(FilterListIcon, null)), /* @__PURE__ */ React.createElement(Typography, {
     variant: "h6"
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
@@ -93,21 +93,21 @@ const Filters$1 = ({
   updateChecked
 }) => {
   const classes = useStyles$a();
-  return /* @__PURE__ */ React__default.createElement(Card, {
+  return /* @__PURE__ */ React.createElement(Card, {
     className: classes.filters
-  }, /* @__PURE__ */ React__default.createElement(CardHeader, {
-    title: /* @__PURE__ */ React__default.createElement(Typography, {
+  }, /* @__PURE__ */ React.createElement(CardHeader, {
+    title: /* @__PURE__ */ React.createElement(Typography, {
       variant: "h6"
     }, "Filters"),
-    action: /* @__PURE__ */ React__default.createElement(Button, {
+    action: /* @__PURE__ */ React.createElement(Button, {
       color: "primary",
       onClick: () => resetFilters()
     }, "CLEAR ALL")
-  }), /* @__PURE__ */ React__default.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
+  }), /* @__PURE__ */ React.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2"
-  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
+  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2"
-  }, "Kind"), /* @__PURE__ */ React__default.createElement(Select, {
+  }, "Kind"), /* @__PURE__ */ React.createElement(Select, {
     id: "outlined-select",
     onChange: (e) => {
       var _a;
@@ -116,22 +116,22 @@ const Filters$1 = ({
     variant: "outlined",
     className: classes.dropdown,
     value: filters.selected
-  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React__default.createElement(MenuItem, {
+  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React.createElement(MenuItem, {
     selected: filter === "",
     dense: true,
     key: filter,
     value: filter
-  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
+  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2"
-  }, "Lifecycle"), /* @__PURE__ */ React__default.createElement(List, {
+  }, "Lifecycle"), /* @__PURE__ */ React.createElement(List, {
     disablePadding: true,
     dense: true
-  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React__default.createElement(ListItem, {
+  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React.createElement(ListItem, {
     key: filter,
     dense: true,
     button: true,
     onClick: () => updateChecked(filter)
-  }, /* @__PURE__ */ React__default.createElement(Checkbox, {
+  }, /* @__PURE__ */ React.createElement(Checkbox, {
     edge: "start",
     disableRipple: true,
     className: classes.checkbox,
@@ -140,7 +140,7 @@ const Filters$1 = ({
     tabIndex: -1,
     value: filter,
     name: filter
-  }), /* @__PURE__ */ React__default.createElement(ListItemText, {
+  }), /* @__PURE__ */ React.createElement(ListItemText, {
     id: filter,
     primary: filter
   }))))));
@@ -201,9 +201,9 @@ const SearchContextProvider = ({
     fetchNextPage: hasNextPage ? fetchNextPage : void 0,
     fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : void 0
   };
-  return /* @__PURE__ */ React__default.createElement(AnalyticsContext, {
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
     attributes: { searchTypes: types.sort().join(",") }
-  }, /* @__PURE__ */ React__default.createElement(SearchContext.Provider, {
+  }, /* @__PURE__ */ React.createElement(SearchContext.Provider, {
     value,
     children
   }));
@@ -224,7 +224,7 @@ const TrackSearch = ({ children }) => {
       analytics.captureEvent("search", term);
     }
   }, [analytics, term]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
 const useSearchContextCheck = () => {
@@ -264,19 +264,19 @@ const SearchBarBase = ({
     onChange("");
   }, [onChange]);
   const placeholder = `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
-  const startAdornment = /* @__PURE__ */ React__default.createElement(InputAdornment, {
+  const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
     position: "start"
-  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+  }, /* @__PURE__ */ React.createElement(IconButton, {
     "aria-label": "Query",
     disabled: true
-  }, /* @__PURE__ */ React__default.createElement(SearchIcon, null)));
-  const endAdornment = /* @__PURE__ */ React__default.createElement(InputAdornment, {
+  }, /* @__PURE__ */ React.createElement(SearchIcon, null)));
+  const endAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
     position: "end"
-  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+  }, /* @__PURE__ */ React.createElement(IconButton, {
     "aria-label": "Clear",
     onClick: handleClear
-  }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
-  const searchBar = /* @__PURE__ */ React__default.createElement(TrackSearch, null, /* @__PURE__ */ React__default.createElement(InputBase, {
+  }, /* @__PURE__ */ React.createElement(ClearButton, null)));
+  const searchBar = /* @__PURE__ */ React.createElement(TrackSearch, null, /* @__PURE__ */ React.createElement(InputBase, {
     "data-testid": "search-bar-next",
     value,
     placeholder,
@@ -288,7 +288,7 @@ const SearchBarBase = ({
     onKeyDown: handleKeyDown,
     ...props
   }));
-  return hasSearchContext ? searchBar : /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, searchBar);
+  return hasSearchContext ? searchBar : /* @__PURE__ */ React.createElement(SearchContextProvider, null, searchBar);
 };
 const SearchBar$1 = ({ onChange, ...props }) => {
   const { term, setTerm } = useSearch();
@@ -299,34 +299,130 @@ const SearchBar$1 = ({ onChange, ...props }) => {
       setTerm(newValue);
     }
   };
-  return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
+  return /* @__PURE__ */ React.createElement(SearchBarBase, {
     value: term,
     onChange: handleChange,
     ...props
   });
 };
 
-const useStyles$9 = makeStyles({
-  label: {
-    textTransform: "capitalize"
+const useAsyncFilterValues = (fn, inputValue, defaultValues = [], debounce = 250) => {
+  const valuesMemo = useRef({});
+  const definiteFn = fn || (() => Promise.resolve([]));
+  const [state, callback] = useAsyncFn(definiteFn, [inputValue], {
+    loading: true
+  });
+  useDebounce(() => {
+    if (valuesMemo.current[inputValue] === void 0) {
+      valuesMemo.current[inputValue] = callback(inputValue).then((values) => {
+        valuesMemo.current[inputValue] = values;
+        return values;
+      });
+    }
+  }, debounce, [callback, inputValue]);
+  if (defaultValues.length) {
+    return {
+      loading: false,
+      value: defaultValues
+    };
   }
-});
-const CheckboxFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = []
-}) => {
-  const classes = useStyles$9();
-  const { filters, setFilters } = useSearch();
+  const possibleValue = valuesMemo.current[inputValue];
+  if (Array.isArray(possibleValue)) {
+    return {
+      loading: false,
+      value: possibleValue
+    };
+  }
+  return state;
+};
+const useDefaultFilterValue = (name, defaultValue) => {
+  const { setFilters } = useSearch();
   useEffect(() => {
-    if (Array.isArray(defaultValue)) {
+    if (defaultValue && [defaultValue].flat().length > 0) {
       setFilters((prevFilters) => ({
         ...prevFilters,
         [name]: defaultValue
       }));
     }
   }, []);
+};
+
+const AutocompleteFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    name,
+    values: givenValues,
+    valuesDebounceMs,
+    label,
+    filterSelectedOptions,
+    limitTags,
+    multiple
+  } = props;
+  const [inputValue, setInputValue] = useState("");
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values, loading } = useAsyncFilterValues(asyncValues, inputValue, defaultValues, valuesDebounceMs);
+  const { filters, setFilters } = useSearch();
+  const filterValue = filters[name] || (multiple ? [] : null);
+  const handleChange = (_, newValue) => {
+    setFilters((prevState) => {
+      const { [name]: filter, ...others } = prevState;
+      if (newValue) {
+        return { ...others, [name]: newValue };
+      }
+      return { ...others };
+    });
+  };
+  const renderInput = (params) => /* @__PURE__ */ React.createElement(TextField, {
+    ...params,
+    name: "search",
+    variant: "outlined",
+    label,
+    fullWidth: true
+  });
+  const renderTags = (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ React.createElement(Chip, {
+    label: option,
+    color: "primary",
+    ...getTagProps({ index })
+  }));
+  return /* @__PURE__ */ React.createElement(Autocomplete, {
+    filterSelectedOptions,
+    limitTags,
+    multiple,
+    className,
+    id: `${multiple ? "multi-" : ""}select-filter-${name}--select`,
+    options: values || [],
+    loading,
+    value: filterValue,
+    onChange: handleChange,
+    onInputChange: (_, newValue) => setInputValue(newValue),
+    renderInput,
+    renderTags
+  });
+};
+
+const useStyles$9 = makeStyles({
+  label: {
+    textTransform: "capitalize"
+  }
+});
+const CheckboxFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues = [],
+    valuesDebounceMs
+  } = props;
+  const classes = useStyles$9();
+  const { filters, setFilters } = useSearch();
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values = [], loading } = useAsyncFilterValues(asyncValues, "", defaultValues, valuesDebounceMs);
   const handleChange = (e) => {
     const {
       target: { value, checked }
@@ -338,17 +434,18 @@ const CheckboxFilter = ({
       return items.length ? { ...others, [name]: items } : others;
     });
   };
-  return /* @__PURE__ */ React__default.createElement(FormControl, {
+  return /* @__PURE__ */ React.createElement(FormControl, {
     className,
+    disabled: loading,
     fullWidth: true,
     "data-testid": "search-checkboxfilter-next"
-  }, /* @__PURE__ */ React__default.createElement(FormLabel, {
+  }, label ? /* @__PURE__ */ React.createElement(FormLabel, {
     className: classes.label
-  }, name), values.map((value) => {
+  }, label) : null, values.map((value) => {
     var _a;
-    return /* @__PURE__ */ React__default.createElement(FormControlLabel, {
+    return /* @__PURE__ */ React.createElement(FormControlLabel, {
       key: value,
-      control: /* @__PURE__ */ React__default.createElement(Checkbox, {
+      control: /* @__PURE__ */ React.createElement(Checkbox, {
         color: "primary",
         tabIndex: -1,
         inputProps: { "aria-labelledby": value },
@@ -361,22 +458,21 @@ const CheckboxFilter = ({
     });
   }));
 };
-const SelectFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = []
-}) => {
+const SelectFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues,
+    valuesDebounceMs
+  } = props;
   const classes = useStyles$9();
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values = [], loading } = useAsyncFilterValues(asyncValues, "", defaultValues, valuesDebounceMs);
   const { filters, setFilters } = useSearch();
-  useEffect(() => {
-    if (typeof defaultValue === "string") {
-      setFilters((prevFilters) => ({
-        ...prevFilters,
-        [name]: defaultValue
-      }));
-    }
-  }, []);
   const handleChange = (e) => {
     const {
       target: { value }
@@ -386,58 +482,62 @@ const SelectFilter = ({
       return value ? { ...others, [name]: value } : others;
     });
   };
-  return /* @__PURE__ */ React__default.createElement(FormControl, {
+  return /* @__PURE__ */ React.createElement(FormControl, {
+    disabled: loading,
     className,
     variant: "filled",
     fullWidth: true,
     "data-testid": "search-selectfilter-next"
-  }, /* @__PURE__ */ React__default.createElement(InputLabel, {
+  }, label ? /* @__PURE__ */ React.createElement(InputLabel, {
     className: classes.label,
     margin: "dense"
-  }, name), /* @__PURE__ */ React__default.createElement(Select, {
+  }, label) : null, /* @__PURE__ */ React.createElement(Select, {
     variant: "outlined",
     value: filters[name] || "",
     onChange: handleChange
-  }, /* @__PURE__ */ React__default.createElement(MenuItem, {
+  }, /* @__PURE__ */ React.createElement(MenuItem, {
     value: ""
-  }, /* @__PURE__ */ React__default.createElement("em", null, "All")), values.map((value) => /* @__PURE__ */ React__default.createElement(MenuItem, {
+  }, /* @__PURE__ */ React.createElement("em", null, "All")), values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, {
     key: value,
     value
   }, value))));
 };
-const SearchFilter = ({ component: Element, ...props }) => /* @__PURE__ */ React__default.createElement(Element, {
+const SearchFilter = ({
+  component: Element,
+  ...props
+}) => /* @__PURE__ */ React.createElement(Element, {
   ...props
 });
-SearchFilter.Checkbox = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
+SearchFilter.Checkbox = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
   ...props,
   component: CheckboxFilter
 });
-SearchFilter.Select = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
+SearchFilter.Select = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
   ...props,
   component: SelectFilter
 });
+SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
+  ...props,
+  component: AutocompleteFilter
+});
 const SearchFilterNext = SearchFilter;
 
-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 DefaultResultListItem$1 = ({
   result,
   icon,
   secondaryAction
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Link, {
+  return /* @__PURE__ */ React.createElement(Link, {
     to: result.location
-  }, /* @__PURE__ */ React__default.createElement(ListItem, {
+  }, /* @__PURE__ */ React.createElement(ListItem, {
     alignItems: "center"
-  }, icon && /* @__PURE__ */ React__default.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React__default.createElement(ListItemText, {
+  }, icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React.createElement(ListItemText, {
     primaryTypographyProps: { variant: "h6" },
     primary: result.title,
     secondary: result.text
-  }), secondaryAction && /* @__PURE__ */ React__default.createElement(Box, {
+  }), secondaryAction && /* @__PURE__ */ React.createElement(Box, {
     alignItems: "flex-end"
-  }, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
+  }, secondaryAction)), /* @__PURE__ */ React.createElement(Divider, null));
 };
 
 const SearchResultComponent = ({ children }) => {
@@ -445,21 +545,21 @@ const SearchResultComponent = ({ children }) => {
     result: { loading, error, value }
   } = useSearch();
   if (loading) {
-    return /* @__PURE__ */ React__default.createElement(Progress, null);
+    return /* @__PURE__ */ React.createElement(Progress, null);
   }
   if (error) {
-    return /* @__PURE__ */ React__default.createElement(ResponseErrorPanel, {
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
       title: "Error encountered while fetching search results",
       error
     });
   }
   if (!(value == null ? void 0 : value.results.length)) {
-    return /* @__PURE__ */ React__default.createElement(EmptyState, {
+    return /* @__PURE__ */ React.createElement(EmptyState, {
       missing: "data",
       title: "Sorry, no results were found"
     });
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({ results: value.results }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ results: value.results }));
 };
 
 const useStyles$8 = makeStyles((theme) => ({
@@ -474,21 +574,21 @@ const SearchResultPager = () => {
   const { fetchNextPage, fetchPreviousPage } = useSearch();
   const classes = useStyles$8();
   if (!fetchNextPage && !fetchPreviousPage) {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
   }
-  return /* @__PURE__ */ React__default.createElement("nav", {
+  return /* @__PURE__ */ React.createElement("nav", {
     "arial-label": "pagination navigation",
     className: classes.root
-  }, /* @__PURE__ */ React__default.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     "aria-label": "previous page",
     disabled: !fetchPreviousPage,
     onClick: fetchPreviousPage,
-    startIcon: /* @__PURE__ */ React__default.createElement(ArrowBackIosIcon, null)
-  }, "Previous"), /* @__PURE__ */ React__default.createElement(Button, {
+    startIcon: /* @__PURE__ */ React.createElement(ArrowBackIosIcon, null)
+  }, "Previous"), /* @__PURE__ */ React.createElement(Button, {
     "aria-label": "next page",
     disabled: !fetchNextPage,
     onClick: fetchNextPage,
-    endIcon: /* @__PURE__ */ React__default.createElement(ArrowForwardIosIcon, null)
+    endIcon: /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, null)
   }, "Next"));
 };
 
@@ -516,54 +616,54 @@ const searchPlugin = createPlugin({
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-5842ad6f.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0cc5ccb8.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
 const SearchPageNext = searchPlugin.provide(createRoutableExtension({
   name: "SearchPageNext",
-  component: () => import('./index-5842ad6f.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0cc5ccb8.esm.js').then((m) => m.SearchPage),
   mountPoint: rootNextRouteRef
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchBar",
   component: {
-    lazy: () => import('./index-05b04684.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-1d0bef15.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchBarNext = searchPlugin.provide(createComponentExtension({
   name: "SearchBarNext",
   component: {
-    lazy: () => import('./index-05b04684.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-1d0bef15.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchResult$1 = searchPlugin.provide(createComponentExtension({
   name: "SearchResult",
   component: {
-    lazy: () => import('./index-53fbff6a.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-eaf72cdc.esm.js').then((m) => m.SearchResult)
   }
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchResultNext",
   component: {
-    lazy: () => import('./index-53fbff6a.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-eaf72cdc.esm.js').then((m) => m.SearchResult)
   }
 }));
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-82c9eaed.esm.js').then((m) => m.SidebarSearchModal)
+    lazy: () => import('./index-968bef26.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
 const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
   name: "DefaultResultListItem",
   component: {
-    lazy: () => import('./index-da49c2d7.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-b4cc532f.esm.js').then((m) => m.DefaultResultListItem)
   }
 }));
 const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-b090f4cf.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-792f3072.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
@@ -584,13 +684,16 @@ const Modal = ({ open = true, toggleModal }) => {
   const getSearchLink = useRouteRef(rootRouteRef);
   const classes = useStyles$7();
   const { term } = useSearch();
+  const { focusContent } = useContent();
+  const { transitions } = useTheme();
   const handleResultClick = () => {
     toggleModal();
+    setTimeout(focusContent, transitions.duration.leavingScreen);
   };
   const handleKeyPress = () => {
     handleResultClick();
   };
-  return /* @__PURE__ */ React__default.createElement(Dialog, {
+  return /* @__PURE__ */ React.createElement(Dialog, {
     classes: {
       paperFullWidth: classes.paperFullWidth
     },
@@ -599,45 +702,48 @@ const Modal = ({ open = true, toggleModal }) => {
     open,
     fullWidth: true,
     maxWidth: "lg"
-  }, /* @__PURE__ */ React__default.createElement(DialogTitle, null, /* @__PURE__ */ React__default.createElement(Paper, {
+  }, /* @__PURE__ */ React.createElement(DialogTitle, null, /* @__PURE__ */ React.createElement(Paper, {
     className: classes.container
-  }, /* @__PURE__ */ React__default.createElement(SearchBar$1, {
+  }, /* @__PURE__ */ React.createElement(SearchBar$1, {
     className: classes.input
-  }))), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(Grid, {
+  }))), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Grid, {
     container: true,
     direction: "row-reverse",
     justifyContent: "flex-start",
     alignItems: "center"
-  }, /* @__PURE__ */ React__default.createElement(Grid, {
+  }, /* @__PURE__ */ React.createElement(Grid, {
     item: true
-  }, /* @__PURE__ */ React__default.createElement(Link, {
-    onClick: toggleModal,
+  }, /* @__PURE__ */ React.createElement(Link, {
+    onClick: () => {
+      toggleModal();
+      setTimeout(focusContent, transitions.duration.leavingScreen);
+    },
     to: `${getSearchLink()}?query=${term}`
-  }, /* @__PURE__ */ React__default.createElement("span", {
+  }, /* @__PURE__ */ React.createElement("span", {
     className: classes.viewResultsLink
-  }, "View Full Results"), /* @__PURE__ */ React__default.createElement(Launch, {
+  }, "View Full Results"), /* @__PURE__ */ React.createElement(LaunchIcon, {
     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.createElement(Divider, null), /* @__PURE__ */ React.createElement(SearchResultComponent, null, ({ results }) => /* @__PURE__ */ React.createElement(List, null, results.map(({ document }) => /* @__PURE__ */ React.createElement("div", {
     role: "button",
     tabIndex: 0,
     key: `${document.location}-btn`,
     onClick: handleResultClick,
     onKeyPress: handleKeyPress
-  }, /* @__PURE__ */ React__default.createElement(DefaultResultListItem$1, {
+  }, /* @__PURE__ */ React.createElement(DefaultResultListItem$1, {
     key: document.location,
     result: document
-  })))))), /* @__PURE__ */ React__default.createElement(DialogActions, {
+  })))))), /* @__PURE__ */ React.createElement(DialogActions, {
     className: classes.dialogActionsContainer
-  }, /* @__PURE__ */ React__default.createElement(Grid, {
+  }, /* @__PURE__ */ React.createElement(Grid, {
     container: true,
     direction: "row"
-  }, /* @__PURE__ */ React__default.createElement(Grid, {
+  }, /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */ React__default.createElement(SearchResultPager, null)))));
+  }, /* @__PURE__ */ React.createElement(SearchResultPager, null)))));
 };
 const SearchModal = ({ open = true, toggleModal }) => {
-  return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(Modal, {
+  return /* @__PURE__ */ React.createElement(SearchContextProvider, null, /* @__PURE__ */ React.createElement(Modal, {
     open,
     toggleModal
   }));
@@ -658,24 +764,24 @@ const SearchBar = ({
   handleClearSearchBar
 }) => {
   const classes = useStyles$6();
-  return /* @__PURE__ */ React__default.createElement(Paper, {
+  return /* @__PURE__ */ React.createElement(Paper, {
     component: "form",
     onSubmit: (e) => handleSearch(e),
     className: classes.root
-  }, /* @__PURE__ */ React__default.createElement(IconButton$1, {
+  }, /* @__PURE__ */ React.createElement(IconButton$1, {
     disabled: true,
     type: "submit",
     "aria-label": "search"
-  }, /* @__PURE__ */ React__default.createElement(SearchIcon, null)), /* @__PURE__ */ React__default.createElement(InputBase$1, {
+  }, /* @__PURE__ */ React.createElement(SearchIcon, null)), /* @__PURE__ */ React.createElement(InputBase$1, {
     className: classes.input,
     placeholder: "Search in Backstage",
     value: searchQuery,
     onChange: (e) => handleSearch(e),
     inputProps: { "aria-label": "search backstage" }
-  }), /* @__PURE__ */ React__default.createElement(IconButton$1, {
+  }), /* @__PURE__ */ React.createElement(IconButton$1, {
     "aria-label": "search",
     onClick: () => handleClearSearchBar()
-  }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
+  }, /* @__PURE__ */ React.createElement(ClearButton, null)));
 };
 
 const useStyles$5 = makeStyles((theme) => ({
@@ -692,13 +798,13 @@ const FiltersButton = ({
   handleToggleFilters
 }) => {
   const classes = useStyles$5();
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: classes.filters
-  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+  }, /* @__PURE__ */ React.createElement(IconButton, {
     className: classes.icon,
     "aria-label": "settings",
     onClick: handleToggleFilters
-  }, /* @__PURE__ */ React__default.createElement(FilterListIcon, null)), /* @__PURE__ */ React__default.createElement(Typography, {
+  }, /* @__PURE__ */ React.createElement(FilterListIcon, null)), /* @__PURE__ */ React.createElement(Typography, {
     variant: "h6"
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
@@ -723,21 +829,21 @@ const Filters = ({
   updateChecked
 }) => {
   const classes = useStyles$4();
-  return /* @__PURE__ */ React__default.createElement(Card, {
+  return /* @__PURE__ */ React.createElement(Card, {
     className: classes.filters
-  }, /* @__PURE__ */ React__default.createElement(CardHeader, {
-    title: /* @__PURE__ */ React__default.createElement(Typography, {
+  }, /* @__PURE__ */ React.createElement(CardHeader, {
+    title: /* @__PURE__ */ React.createElement(Typography, {
       variant: "h6"
     }, "Filters"),
-    action: /* @__PURE__ */ React__default.createElement(Button, {
+    action: /* @__PURE__ */ React.createElement(Button, {
       color: "primary",
       onClick: () => resetFilters()
     }, "CLEAR ALL")
-  }), /* @__PURE__ */ React__default.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
+  }), /* @__PURE__ */ React.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2"
-  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
+  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2"
-  }, "Kind"), /* @__PURE__ */ React__default.createElement(Select, {
+  }, "Kind"), /* @__PURE__ */ React.createElement(Select, {
     id: "outlined-select",
     onChange: (e) => {
       var _a;
@@ -746,22 +852,22 @@ const Filters = ({
     variant: "outlined",
     className: classes.dropdown,
     value: filters.selected
-  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React__default.createElement(MenuItem, {
+  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React.createElement(MenuItem, {
     selected: filter === "",
     dense: true,
     key: filter,
     value: filter
-  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
+  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle2"
-  }, "Lifecycle"), /* @__PURE__ */ React__default.createElement(List, {
+  }, "Lifecycle"), /* @__PURE__ */ React.createElement(List, {
     disablePadding: true,
     dense: true
-  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React__default.createElement(ListItem, {
+  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React.createElement(ListItem, {
     key: filter,
     dense: true,
     button: true,
     onClick: () => updateChecked(filter)
-  }, /* @__PURE__ */ React__default.createElement(Checkbox, {
+  }, /* @__PURE__ */ React.createElement(Checkbox, {
     edge: "start",
     disableRipple: true,
     className: classes.checkbox,
@@ -770,7 +876,7 @@ const Filters = ({
     tabIndex: -1,
     value: filter,
     name: filter
-  }), /* @__PURE__ */ React__default.createElement(ListItemText, {
+  }), /* @__PURE__ */ React.createElement(ListItemText, {
     id: filter,
     primary: filter
   }))))));
@@ -797,7 +903,7 @@ const columns = [
     title: "Name",
     field: "name",
     highlight: true,
-    render: (result) => /* @__PURE__ */ React__default.createElement(Link, {
+    render: (result) => /* @__PURE__ */ React.createElement(Link, {
       to: result.url || ""
     }, result.name)
   },
@@ -825,22 +931,22 @@ const TableHeader = ({
   handleToggleFilters
 }) => {
   const classes = useStyles$3();
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: classes.tableHeader
-  }, /* @__PURE__ */ React__default.createElement(FiltersButton, {
+  }, /* @__PURE__ */ React.createElement(FiltersButton, {
     numberOfSelectedFilters,
     handleToggleFilters
-  }), /* @__PURE__ */ React__default.createElement(Divider, {
+  }), /* @__PURE__ */ React.createElement(Divider, {
     className: classes.divider,
     orientation: "vertical"
-  }), /* @__PURE__ */ React__default.createElement(Grid, {
+  }), /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 12
-  }, searchQuery ? /* @__PURE__ */ React__default.createElement(Typography, {
+  }, searchQuery ? /* @__PURE__ */ React.createElement(Typography, {
     variant: "h6"
-  }, `${numberOfResults} `, numberOfResults > 1 ? `results for ` : `result for `, /* @__PURE__ */ React__default.createElement("span", {
+  }, `${numberOfResults} `, numberOfResults > 1 ? `results for ` : `result for `, /* @__PURE__ */ React.createElement("span", {
     className: classes.searchQuery
-  }, '"', searchQuery, '"'), " ") : /* @__PURE__ */ React__default.createElement(Typography, {
+  }, '"', searchQuery, '"'), " ") : /* @__PURE__ */ React.createElement(Typography, {
     variant: "h6"
   }, `${numberOfResults} results`)));
 };
@@ -889,15 +995,15 @@ const SearchResult = ({ searchQuery }) => {
     }
   }, [selectedFilters, searchQuery, results]);
   if (loading) {
-    return /* @__PURE__ */ React__default.createElement(Progress, null);
+    return /* @__PURE__ */ React.createElement(Progress, null);
   }
   if (error) {
-    return /* @__PURE__ */ React__default.createElement(Alert, {
+    return /* @__PURE__ */ React.createElement(Alert, {
       severity: "error"
     }, "Error encountered while fetching search results. ", error.toString());
   }
   if (!results || results.length === 0) {
-    return /* @__PURE__ */ React__default.createElement(EmptyState, {
+    return /* @__PURE__ */ React.createElement(EmptyState, {
       missing: "data",
       title: "Sorry, no results were found"
     });
@@ -939,25 +1045,25 @@ const SearchResult = ({ searchQuery }) => {
     kind: [],
     lifecycle: []
   });
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, {
     container: true
-  }, showFilters && /* @__PURE__ */ React__default.createElement(Grid, {
+  }, showFilters && /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 3
-  }, /* @__PURE__ */ React__default.createElement(Filters, {
+  }, /* @__PURE__ */ React.createElement(Filters, {
     filters: selectedFilters,
     filterOptions,
     resetFilters,
     updateSelected,
     updateChecked
-  })), /* @__PURE__ */ React__default.createElement(Grid, {
+  })), /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: showFilters ? 9 : 12
-  }, /* @__PURE__ */ React__default.createElement(Table, {
+  }, /* @__PURE__ */ React.createElement(Table, {
     options: { paging: true, pageSize: 20, search: false },
     data: filteredResults,
     columns,
-    title: /* @__PURE__ */ React__default.createElement(TableHeader, {
+    title: /* @__PURE__ */ React.createElement(TableHeader, {
       searchQuery,
       numberOfResults: filteredResults.length,
       numberOfSelectedFilters: (selectedFilters.selected !== "" ? 1 : 0) + selectedFilters.checked.length,
@@ -980,24 +1086,24 @@ const LegacySearchPage = () => {
   const handleClearSearchBar = () => {
     setSearchQuery("");
   };
-  return /* @__PURE__ */ React__default.createElement(Page, {
+  return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
-  }, /* @__PURE__ */ React__default.createElement(Header, {
+  }, /* @__PURE__ */ React.createElement(Header, {
     title: "Search"
-  }), /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(Grid, {
+  }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, {
     container: true,
     direction: "row"
-  }, /* @__PURE__ */ React__default.createElement(Grid, {
+  }, /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */ React__default.createElement(SearchBar, {
+  }, /* @__PURE__ */ React.createElement(SearchBar, {
     handleSearch,
     handleClearSearchBar,
     searchQuery
-  })), /* @__PURE__ */ React__default.createElement(Grid, {
+  })), /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */ React__default.createElement(SearchResult, {
+  }, /* @__PURE__ */ React.createElement(SearchResult, {
     searchQuery: (queryString != null ? queryString : "").toLocaleLowerCase("en-US")
   })))));
 };
@@ -1047,7 +1153,7 @@ const UrlUpdater = () => {
 };
 const SearchPage = () => {
   const outlet = useOutlet();
-  return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React__default.createElement(LegacySearchPage, null));
+  return /* @__PURE__ */ React.createElement(SearchContextProvider, null, /* @__PURE__ */ React.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React.createElement(LegacySearchPage, null));
 };
 
 const useStyles$2 = makeStyles((theme) => ({
@@ -1108,48 +1214,48 @@ const SearchTypeAccordion = (props) => {
     {
       value: "",
       name: "All",
-      icon: /* @__PURE__ */ React__default.createElement(AllIcon, null)
+      icon: /* @__PURE__ */ React.createElement(AllIcon, null)
     },
     ...givenTypes
   ];
   const selected = types[0] || "";
-  return /* @__PURE__ */ React__default.createElement(Card, {
+  return /* @__PURE__ */ React.createElement(Card, {
     className: classes.card
-  }, /* @__PURE__ */ React__default.createElement(CardHeader, {
+  }, /* @__PURE__ */ React.createElement(CardHeader, {
     title: name,
     titleTypographyProps: { variant: "overline" }
-  }), /* @__PURE__ */ React__default.createElement(CardContent, {
+  }), /* @__PURE__ */ React.createElement(CardContent, {
     className: classes.cardContent
-  }, /* @__PURE__ */ React__default.createElement(Accordion, {
+  }, /* @__PURE__ */ React.createElement(Accordion, {
     className: classes.accordion,
     expanded,
     onChange: toggleExpanded
-  }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
+  }, /* @__PURE__ */ React.createElement(AccordionSummary, {
     classes: {
       root: classes.accordionSummary,
       content: classes.accordionSummaryContent
     },
-    expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, {
+    expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, {
       className: classes.icon
     }),
     IconButtonProps: { size: "small" }
-  }, expanded ? "Collapse" : definedTypes.filter((t) => t.value === selected)[0].name), /* @__PURE__ */ React__default.createElement(AccordionDetails, {
+  }, expanded ? "Collapse" : definedTypes.filter((t) => t.value === selected)[0].name), /* @__PURE__ */ React.createElement(AccordionDetails, {
     classes: { root: classes.accordionDetails }
-  }, /* @__PURE__ */ React__default.createElement(List, {
+  }, /* @__PURE__ */ React.createElement(List, {
     className: classes.list,
     component: "nav",
     "aria-label": "filter by type",
     disablePadding: true,
     dense: true
-  }, definedTypes.map((type) => /* @__PURE__ */ React__default.createElement(Fragment, {
+  }, definedTypes.map((type) => /* @__PURE__ */ React.createElement(Fragment, {
     key: type.value
-  }, /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.createElement(ListItem, {
+  }, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(ListItem, {
     selected: types[0] === type.value || types.length === 0 && type.value === "",
     onClick: handleClick(type.value),
     button: true
-  }, /* @__PURE__ */ React__default.createElement(ListItemIcon, null, cloneElement(type.icon, {
+  }, /* @__PURE__ */ React.createElement(ListItemIcon, null, cloneElement(type.icon, {
     className: classes.listItemIcon
-  })), /* @__PURE__ */ React__default.createElement(ListItemText, {
+  })), /* @__PURE__ */ React.createElement(ListItemText, {
     primary: type.name
   })))))))));
 };
@@ -1187,12 +1293,12 @@ const SearchTypeTabs = (props) => {
     },
     ...givenTypes
   ];
-  return /* @__PURE__ */ React__default.createElement(Tabs, {
+  return /* @__PURE__ */ React.createElement(Tabs, {
     className: classes.tabs,
     indicatorColor: "primary",
     value: types.length === 0 ? "" : types[0],
     onChange: changeTab
-  }, definedTypes.map((type) => /* @__PURE__ */ React__default.createElement(Tab, {
+  }, definedTypes.map((type) => /* @__PURE__ */ React.createElement(Tab, {
     className: classes.tab,
     disableRipple: true,
     label: type.name,
@@ -1230,56 +1336,58 @@ const SearchType = (props) => {
     const value = e.target.value;
     setTypes(value);
   };
-  return /* @__PURE__ */ React__default.createElement(FormControl, {
+  return /* @__PURE__ */ React.createElement(FormControl, {
     className,
     variant: "filled",
     fullWidth: true,
     "data-testid": "search-typefilter-next"
-  }, /* @__PURE__ */ React__default.createElement(InputLabel, {
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
     className: classes.label,
     margin: "dense"
-  }, name), /* @__PURE__ */ React__default.createElement(Select, {
+  }, name), /* @__PURE__ */ React.createElement(Select, {
     multiple: true,
     variant: "outlined",
     value: types,
     onChange: handleChange,
     placeholder: "All Results",
-    renderValue: (selected) => /* @__PURE__ */ React__default.createElement("div", {
+    renderValue: (selected) => /* @__PURE__ */ React.createElement("div", {
       className: classes.chips
-    }, selected.map((value) => /* @__PURE__ */ React__default.createElement(Chip, {
+    }, selected.map((value) => /* @__PURE__ */ React.createElement(Chip, {
       key: value,
       label: value,
       className: classes.chip,
       size: "small"
     })))
-  }, values.map((value) => /* @__PURE__ */ React__default.createElement(MenuItem, {
+  }, values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, {
     key: value,
     value
-  }, /* @__PURE__ */ React__default.createElement(Checkbox, {
+  }, /* @__PURE__ */ React.createElement(Checkbox, {
     checked: types.indexOf(value) > -1
-  }), /* @__PURE__ */ React__default.createElement(ListItemText, {
+  }), /* @__PURE__ */ React.createElement(ListItemText, {
     primary: value
   })))));
 };
 SearchType.Accordion = (props) => {
-  return /* @__PURE__ */ React__default.createElement(SearchTypeAccordion, {
+  return /* @__PURE__ */ React.createElement(SearchTypeAccordion, {
     ...props
   });
 };
 SearchType.Tabs = (props) => {
-  return /* @__PURE__ */ React__default.createElement(SearchTypeTabs, {
+  return /* @__PURE__ */ React.createElement(SearchTypeTabs, {
     ...props
   });
 };
 
 const SidebarSearch = (props) => {
   const searchRoute = useRouteRef(rootRouteRef);
+  const { focusContent } = useContent();
   const navigate = useNavigate();
   const handleSearch = useCallback((query) => {
     const queryString = qs.stringify({ query }, { addQueryPrefix: true });
+    focusContent();
     navigate(`${searchRoute()}${queryString}`);
-  }, [navigate, searchRoute]);
-  return /* @__PURE__ */ React__default.createElement(SidebarSearchField, {
+  }, [focusContent, navigate, searchRoute]);
+  return /* @__PURE__ */ React.createElement(SidebarSearchField, {
     icon: props.icon,
     onSearch: handleSearch,
     to: "/search"
@@ -1287,4 +1395,4 @@ const SidebarSearch = (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, 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-9ed6d72a.esm.js.map
+//# sourceMappingURL=index-19c51c5a.esm.js.map