@backstage/plugin-search 0.8.2-next.2 → 0.9.0

package/dist/esm/{index-c59424ea.esm.js → index-8388a95e.esm.js}

@@ -1,34 +1,33 @@
-import React, { useEffect, useState, useCallback, useRef, useContext, Fragment, cloneElement } from 'react';
+import React, { useCallback, useContext, useState, useEffect, 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, TextField, Chip, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, Dialog, useTheme, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab } from '@material-ui/core';
-import useDebounce from 'react-use/lib/useDebounce';
-import { useAnalytics, useApi, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
-import SearchIcon from '@material-ui/icons/Search';
-import ClearButton from '@material-ui/icons/Clear';
-import { useSearch, useSearchContextCheck, SearchContextProvider, HighlightedSearchResultText, searchApiRef } from '@backstage/plugin-search-react';
-import { Autocomplete, Alert } from '@material-ui/lab';
-import useAsyncFn from 'react-use/lib/useAsyncFn';
+import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, Dialog, useTheme, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, ListItemIcon, Tabs, Tab, FormControl, InputLabel, Chip } from '@material-ui/core';
+import { SearchBarBase as SearchBarBase$1, useSearch, CheckboxFilter, SelectFilter, AutocompleteFilter, searchApiRef, SearchResult as SearchResult$2, DefaultResultListItem as DefaultResultListItem$1, SearchContextProvider, SearchBar as SearchBar$2, SearchResultPager as SearchResultPager$1 } from '@backstage/plugin-search-react';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
-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 { createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef, useApi } from '@backstage/core-plugin-api';
+import { useContent, Link, Progress, EmptyState, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
 import usePrevious from 'react-use/lib/usePrevious';
 import { useOutlet, useLocation } from 'react-router';
-import InputBase$1 from '@material-ui/core/InputBase';
+import useDebounce from 'react-use/lib/useDebounce';
+import InputBase from '@material-ui/core/InputBase';
 import IconButton$1 from '@material-ui/core/IconButton';
+import SearchIcon from '@material-ui/icons/Search';
+import ClearButton from '@material-ui/icons/Clear';
+import { Alert } from '@material-ui/lab';
 import useAsync from 'react-use/lib/useAsync';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import AllIcon from '@material-ui/icons/FontDownload';
 import { useNavigate } from 'react-router-dom';
 
-const useStyles$b = makeStyles((theme) => ({
+const useStyles$a = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -41,7 +40,7 @@ const FiltersButton$1 = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$b();
+  const classes = useStyles$a();
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React.createElement(IconButton, {
@@ -53,7 +52,7 @@ const FiltersButton$1 = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$a = makeStyles((theme) => ({
+const useStyles$9 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -72,7 +71,7 @@ const Filters$1 = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$a();
+  const classes = useStyles$9();
   return /* @__PURE__ */ React.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React.createElement(CardHeader, {
@@ -126,76 +125,7 @@ const Filters$1 = ({
   }))))));
 };
 
-const TrackSearch = ({ children }) => {
-  const analytics = useAnalytics();
-  const { term } = useSearch();
-  useEffect(() => {
-    if (term) {
-      analytics.captureEvent("search", term);
-    }
-  }, [analytics, term]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-};
-
-const SearchBarBase = ({
-  onChange,
-  onKeyDown,
-  onSubmit,
-  debounceTime = 200,
-  clearButton = true,
-  fullWidth = true,
-  value: defaultValue,
-  inputProps: defaultInputProps = {},
-  endAdornment: defaultEndAdornment,
-  ...props
-}) => {
-  const configApi = useApi(configApiRef);
-  const [value, setValue] = useState(defaultValue);
-  const hasSearchContext = useSearchContextCheck();
-  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();
-    }
-  }, [onKeyDown, onSubmit]);
-  const handleClear = useCallback(() => {
-    onChange("");
-  }, [onChange]);
-  const placeholder = `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
-  const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
-    position: "start"
-  }, /* @__PURE__ */ React.createElement(IconButton, {
-    "aria-label": "Query",
-    disabled: true
-  }, /* @__PURE__ */ React.createElement(SearchIcon, null)));
-  const endAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
-    position: "end"
-  }, /* @__PURE__ */ React.createElement(IconButton, {
-    "aria-label": "Clear",
-    onClick: handleClear
-  }, /* @__PURE__ */ React.createElement(ClearButton, null)));
-  const searchBar = /* @__PURE__ */ React.createElement(TrackSearch, null, /* @__PURE__ */ React.createElement(InputBase, {
-    "data-testid": "search-bar-next",
-    value,
-    placeholder,
-    startAdornment,
-    endAdornment: clearButton ? endAdornment : defaultEndAdornment,
-    inputProps: { "aria-label": "Search", ...defaultInputProps },
-    fullWidth,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    ...props
-  }));
-  return hasSearchContext ? searchBar : /* @__PURE__ */ React.createElement(SearchContextProvider, null, searchBar);
-};
+const SearchBarBase = SearchBarBase$1;
 const SearchBar$1 = ({ onChange, ...props }) => {
   const { term, setTerm } = useSearch();
   const handleChange = useCallback((newValue) => {
@@ -212,202 +142,6 @@ const SearchBar$1 = ({ onChange, ...props }) => {
   });
 };
 
-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 possibleValue = valuesMemo.current[inputValue];
-  if (Array.isArray(possibleValue)) {
-    return {
-      loading: false,
-      value: possibleValue
-    };
-  }
-  return state;
-};
-const useDefaultFilterValue = (name, defaultValue) => {
-  const { setFilters } = useSearch();
-  useEffect(() => {
-    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 }
-    } = e;
-    setFilters((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 /* @__PURE__ */ React.createElement(FormControl, {
-    className,
-    disabled: loading,
-    fullWidth: true,
-    "data-testid": "search-checkboxfilter-next"
-  }, label ? /* @__PURE__ */ React.createElement(FormLabel, {
-    className: classes.label
-  }, label) : null, values.map((value) => {
-    var _a;
-    return /* @__PURE__ */ React.createElement(FormControlLabel, {
-      key: value,
-      control: /* @__PURE__ */ React.createElement(Checkbox, {
-        color: "primary",
-        tabIndex: -1,
-        inputProps: { "aria-labelledby": value },
-        value,
-        name: value,
-        onChange: handleChange,
-        checked: ((_a = filters[name]) != null ? _a : []).includes(value)
-      }),
-      label: value
-    });
-  }));
-};
-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();
-  const handleChange = (e) => {
-    const {
-      target: { value }
-    } = e;
-    setFilters((prevFilters) => {
-      const { [name]: filter, ...others } = prevFilters;
-      return value ? { ...others, [name]: value } : others;
-    });
-  };
-  return /* @__PURE__ */ React.createElement(FormControl, {
-    disabled: loading,
-    className,
-    variant: "filled",
-    fullWidth: true,
-    "data-testid": "search-selectfilter-next"
-  }, label ? /* @__PURE__ */ React.createElement(InputLabel, {
-    className: classes.label,
-    margin: "dense"
-  }, label) : null, /* @__PURE__ */ React.createElement(Select, {
-    variant: "outlined",
-    value: filters[name] || "",
-    onChange: handleChange
-  }, /* @__PURE__ */ React.createElement(MenuItem, {
-    value: ""
-  }, /* @__PURE__ */ React.createElement("em", null, "All")), values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, {
-    key: value,
-    value
-  }, value))));
-};
 const SearchFilter = ({
   component: Element,
   ...props
@@ -426,94 +160,6 @@ SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(Searc
   ...props,
   component: AutocompleteFilter
 });
-const SearchFilterNext = SearchFilter;
-
-const DefaultResultListItem$1 = ({
-  result,
-  highlight,
-  icon,
-  secondaryAction,
-  lineClamp = 5
-}) => {
-  return /* @__PURE__ */ React.createElement(Link, {
-    to: result.location
-  }, /* @__PURE__ */ React.createElement(ListItem, {
-    alignItems: "center"
-  }, icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React.createElement(ListItemText, {
-    primaryTypographyProps: { variant: "h6" },
-    primary: (highlight == null ? void 0 : highlight.fields.title) ? /* @__PURE__ */ React.createElement(HighlightedSearchResultText, {
-      text: highlight.fields.title,
-      preTag: highlight.preTag,
-      postTag: highlight.postTag
-    }) : result.title,
-    secondary: /* @__PURE__ */ React.createElement("span", {
-      style: {
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: lineClamp,
-        overflow: "hidden"
-      }
-    }, (highlight == null ? void 0 : highlight.fields.text) ? /* @__PURE__ */ React.createElement(HighlightedSearchResultText, {
-      text: highlight.fields.text,
-      preTag: highlight.preTag,
-      postTag: highlight.postTag
-    }) : result.text)
-  }), secondaryAction && /* @__PURE__ */ React.createElement(Box, {
-    alignItems: "flex-end"
-  }, secondaryAction)), /* @__PURE__ */ React.createElement(Divider, null));
-};
-
-const SearchResultComponent = ({ children }) => {
-  const {
-    result: { loading, error, value }
-  } = useSearch();
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (error) {
-    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
-      title: "Error encountered while fetching search results",
-      error
-    });
-  }
-  if (!(value == null ? void 0 : value.results.length)) {
-    return /* @__PURE__ */ React.createElement(EmptyState, {
-      missing: "data",
-      title: "Sorry, no results were found"
-    });
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ results: value.results }));
-};
-
-const useStyles$8 = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    justifyContent: "space-between",
-    gap: theme.spacing(2),
-    margin: theme.spacing(2, 0)
-  }
-}));
-const SearchResultPager = () => {
-  const { fetchNextPage, fetchPreviousPage } = useSearch();
-  const classes = useStyles$8();
-  if (!fetchNextPage && !fetchPreviousPage) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null);
-  }
-  return /* @__PURE__ */ React.createElement("nav", {
-    "arial-label": "pagination navigation",
-    className: classes.root
-  }, /* @__PURE__ */ React.createElement(Button, {
-    "aria-label": "previous page",
-    disabled: !fetchPreviousPage,
-    onClick: fetchPreviousPage,
-    startIcon: /* @__PURE__ */ React.createElement(ArrowBackIosIcon, null)
-  }, "Previous"), /* @__PURE__ */ React.createElement(Button, {
-    "aria-label": "next page",
-    disabled: !fetchNextPage,
-    onClick: fetchNextPage,
-    endIcon: /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, null)
-  }, "Next"));
-};
 
 class SearchClient {
   constructor(options) {
@@ -537,9 +183,6 @@ class SearchClient {
 const rootRouteRef = createRouteRef({
   id: "search"
 });
-const rootNextRouteRef = createRouteRef({
-  id: "search:next"
-});
 const searchPlugin = createPlugin({
   id: "search",
   apis: [
@@ -552,64 +195,30 @@ const searchPlugin = createPlugin({
     })
   ],
   routes: {
-    root: rootRouteRef,
-    nextRoot: rootNextRouteRef
+    root: rootRouteRef
   }
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-b9062edb.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-5aaf3de8.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
-const SearchPageNext = searchPlugin.provide(createRoutableExtension({
-  name: "SearchPageNext",
-  component: () => import('./index-b9062edb.esm.js').then((m) => m.SearchPage),
-  mountPoint: rootNextRouteRef
-}));
-searchPlugin.provide(createComponentExtension({
-  name: "SearchBar",
-  component: {
-    lazy: () => import('./index-b4559d0a.esm.js').then((m) => m.SearchBar)
-  }
-}));
-const SearchBarNext = searchPlugin.provide(createComponentExtension({
-  name: "SearchBarNext",
-  component: {
-    lazy: () => import('./index-b4559d0a.esm.js').then((m) => m.SearchBar)
-  }
-}));
-const SearchResult$1 = searchPlugin.provide(createComponentExtension({
-  name: "SearchResult",
-  component: {
-    lazy: () => import('./index-ff98c685.esm.js').then((m) => m.SearchResult)
-  }
-}));
-searchPlugin.provide(createComponentExtension({
-  name: "SearchResultNext",
-  component: {
-    lazy: () => import('./index-ff98c685.esm.js').then((m) => m.SearchResult)
-  }
-}));
+const SearchResult$1 = SearchResult$2;
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-1c96b52b.esm.js').then((m) => m.SidebarSearchModal)
-  }
-}));
-const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
-  name: "DefaultResultListItem",
-  component: {
-    lazy: () => import('./index-763c3ecb.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-8a1f0d37.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
+const DefaultResultListItem = DefaultResultListItem$1;
 const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-c08cd99a.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-2180028e.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
-const useStyles$7 = makeStyles$1((theme) => ({
+const useStyles$8 = makeStyles$1((theme) => ({
   container: {
     borderRadius: 30,
     display: "flex",
@@ -624,7 +233,7 @@ const useStyles$7 = makeStyles$1((theme) => ({
 }));
 const Modal = ({ toggleModal }) => {
   const getSearchLink = useRouteRef(rootRouteRef);
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   const { term } = useSearch();
   const { focusContent } = useContent();
   const { transitions } = useTheme();
@@ -637,7 +246,7 @@ const Modal = ({ toggleModal }) => {
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogTitle, null, /* @__PURE__ */ React.createElement(Paper, {
     className: classes.container
-  }, /* @__PURE__ */ React.createElement(SearchBar$1, {
+  }, /* @__PURE__ */ React.createElement(SearchBar$2, {
     className: classes.input
   }))), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Grid, {
     container: true,
@@ -656,7 +265,7 @@ const Modal = ({ toggleModal }) => {
     className: classes.viewResultsLink
   }, "View Full Results"), /* @__PURE__ */ React.createElement(LaunchIcon, {
     color: "primary"
-  })))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(SearchResultComponent, null, ({ results }) => /* @__PURE__ */ React.createElement(List, null, results.map(({ document, highlight }) => /* @__PURE__ */ React.createElement("div", {
+  })))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(SearchResult$2, null, ({ results }) => /* @__PURE__ */ React.createElement(List, null, results.map(({ document, highlight }) => /* @__PURE__ */ React.createElement("div", {
     role: "button",
     tabIndex: 0,
     key: `${document.location}-btn`,
@@ -674,7 +283,7 @@ const Modal = ({ toggleModal }) => {
   }, /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */ React.createElement(SearchResultPager, null)))));
+  }, /* @__PURE__ */ React.createElement(SearchResultPager$1, null)))));
 };
 const SearchModal = ({
   open = true,
@@ -683,7 +292,7 @@ const SearchModal = ({
   children
 }) => {
   var _a;
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   return /* @__PURE__ */ React.createElement(Dialog, {
     classes: {
       paperFullWidth: classes.paperFullWidth
@@ -728,7 +337,7 @@ function useSearchModal(initialState = false) {
   return (parentContextValue == null ? void 0 : parentContextValue.state) ? parentContextValue : { state, toggleModal, setOpen };
 }
 
-const useStyles$6 = makeStyles$1(() => ({
+const useStyles$7 = makeStyles$1(() => ({
   root: {
     display: "flex",
     alignItems: "center"
@@ -742,7 +351,7 @@ const SearchBar = ({
   handleSearch,
   handleClearSearchBar
 }) => {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   return /* @__PURE__ */ React.createElement(Paper, {
     component: "form",
     onSubmit: (e) => handleSearch(e),
@@ -751,7 +360,7 @@ const SearchBar = ({
     disabled: true,
     type: "submit",
     "aria-label": "search"
-  }, /* @__PURE__ */ React.createElement(SearchIcon, null)), /* @__PURE__ */ React.createElement(InputBase$1, {
+  }, /* @__PURE__ */ React.createElement(SearchIcon, null)), /* @__PURE__ */ React.createElement(InputBase, {
     className: classes.input,
     placeholder: "Search in Backstage",
     value: searchQuery,
@@ -763,7 +372,7 @@ const SearchBar = ({
   }, /* @__PURE__ */ React.createElement(ClearButton, null)));
 };
 
-const useStyles$5 = makeStyles((theme) => ({
+const useStyles$6 = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -776,7 +385,7 @@ const FiltersButton = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$5();
+  const classes = useStyles$6();
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React.createElement(IconButton, {
@@ -788,7 +397,7 @@ const FiltersButton = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -807,7 +416,7 @@ const Filters = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   return /* @__PURE__ */ React.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React.createElement(CardHeader, {
@@ -861,7 +470,7 @@ const Filters = ({
   }))))));
 };
 
-const useStyles$3 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   searchQuery: {
     color: theme.palette.text.primary,
     background: theme.palette.background.default,
@@ -909,7 +518,7 @@ const TableHeader = ({
   numberOfResults,
   handleToggleFilters
 }) => {
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.tableHeader
   }, /* @__PURE__ */ React.createElement(FiltersButton, {
@@ -1135,6 +744,36 @@ const SearchPage = () => {
   return /* @__PURE__ */ React.createElement(SearchContextProvider, null, /* @__PURE__ */ React.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React.createElement(LegacySearchPage, null));
 };
 
+const useStyles$3 = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: theme.spacing(2),
+    margin: theme.spacing(2, 0)
+  }
+}));
+const SearchResultPager = () => {
+  const { fetchNextPage, fetchPreviousPage } = useSearch();
+  const classes = useStyles$3();
+  if (!fetchNextPage && !fetchPreviousPage) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  }
+  return /* @__PURE__ */ React.createElement("nav", {
+    "arial-label": "pagination navigation",
+    className: classes.root
+  }, /* @__PURE__ */ React.createElement(Button, {
+    "aria-label": "previous page",
+    disabled: !fetchPreviousPage,
+    onClick: fetchPreviousPage,
+    startIcon: /* @__PURE__ */ React.createElement(ArrowBackIosIcon, null)
+  }, "Previous"), /* @__PURE__ */ React.createElement(Button, {
+    "aria-label": "next page",
+    disabled: !fetchNextPage,
+    onClick: fetchNextPage,
+    endIcon: /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, null)
+  }, "Next"));
+};
+
 const useStyles$2 = makeStyles((theme) => ({
   card: {
     backgroundColor: "rgba(0, 0, 0, .11)"
@@ -1374,5 +1013,5 @@ 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, SearchModalProvider as d, SearchModal as e, FiltersButton$1 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, SearchResult$1 as p, SidebarSearchModal as q, rootRouteRef as r, searchPlugin as s, useSearchModal as u };
-//# sourceMappingURL=index-c59424ea.esm.js.map
+export { DefaultResultListItem as D, Filters$1 as F, HomePageSearchBar as H, SearchPage as S, SearchModalProvider as a, SearchModal as b, FiltersButton$1 as c, SearchBar$1 as d, SearchBarBase as e, SearchFilter as f, SearchResultPager as g, SearchType as h, SidebarSearch as i, SearchPage$1 as j, SearchResult$1 as k, SidebarSearchModal as l, rootRouteRef as r, searchPlugin as s, useSearchModal as u };
+//# sourceMappingURL=index-8388a95e.esm.js.map