@backstage/plugin-search-react 1.0.2-next.1 → 1.1.0

package/dist/index.esm.js

@@ -1,17 +1,20 @@
-import { createApiRef, useApi, AnalyticsContext, useAnalytics, configApiRef } from '@backstage/core-plugin-api';
-import React, { useMemo, useContext, useState, useCallback, useEffect, useRef } from 'react';
-import { makeStyles, TextField, Chip, FormControl, FormLabel, FormControlLabel, Checkbox, InputLabel, Select, MenuItem, Button, InputBase, InputAdornment, IconButton, ListItem, ListItemIcon, ListItemText, Box, Divider } from '@material-ui/core';
-import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
+import { createApiRef, AnalyticsContext, useApi, useAnalytics, configApiRef } from '@backstage/core-plugin-api';
+import React, { useMemo, useContext, useState, useCallback, useEffect, forwardRef, useRef } from 'react';
+import { makeStyles, InputBase, InputAdornment, IconButton, CircularProgress, ListItemIcon, ListItemText, TextField, Chip, FormControl, FormLabel, FormControlLabel, Checkbox, InputLabel, Select, MenuItem, Button, ListItem, Box, Divider, List, Typography, ListSubheader, Menu } 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 { isEqual } from 'lodash';
 import useAsync from 'react-use/lib/useAsync';
 import usePrevious from 'react-use/lib/usePrevious';
+import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
 import { Autocomplete } from '@material-ui/lab';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
-import useDebounce from 'react-use/lib/useDebounce';
 import { Progress, ResponseErrorPanel, EmptyState, Link } from '@backstage/core-components';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import SearchIcon from '@material-ui/icons/Search';
-import ClearButton from '@material-ui/icons/Clear';
+import qs from 'qs';
+import AddIcon from '@material-ui/icons/Add';
 
 const searchApiRef = createApiRef({
   id: "plugin.search.queryservice"
@@ -25,7 +28,7 @@ class MockSearchApi {
   }
 }
 
-const useStyles$2 = makeStyles(
+const useStyles$3 = makeStyles(
   () => ({
     highlight: {}
   }),
@@ -36,7 +39,7 @@ const HighlightedSearchResultText = ({
   preTag,
   postTag
 }) => {
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const terms = useMemo(
     () => text.split(new RegExp(`(${preTag}.+?${postTag})`)),
     [postTag, preTag, text]
@@ -71,17 +74,17 @@ const searchInitialState = {
   filters: {},
   types: []
 };
-const SearchContextProvider = (props) => {
+const useSearchContextValue = (initialValue = searchInitialState) => {
   var _a, _b, _c, _d;
-  const { initialState = searchInitialState, children } = props;
   const searchApi = useApi(searchApiRef);
+  const [term, setTerm] = useState(initialValue.term);
+  const [types, setTypes] = useState(initialValue.types);
+  const [filters, setFilters] = useState(initialValue.filters);
   const [pageCursor, setPageCursor] = useState(
-    initialState.pageCursor
+    initialValue.pageCursor
   );
-  const [filters, setFilters] = useState(initialState.filters);
-  const [term, setTerm] = useState(initialState.term);
-  const [types, setTypes] = useState(initialState.types);
   const prevTerm = usePrevious(term);
+  const prevFilters = usePrevious(filters);
   const result = useAsync(
     () => searchApi.query({
       term,
@@ -89,7 +92,7 @@ const SearchContextProvider = (props) => {
       pageCursor,
       types
     }),
-    [term, filters, types, pageCursor]
+    [term, types, filters, pageCursor]
   );
   const hasNextPage = !result.loading && !result.error && ((_a = result.value) == null ? void 0 : _a.nextPageCursor);
   const hasPreviousPage = !result.loading && !result.error && ((_b = result.value) == null ? void 0 : _b.previousPageCursor);
@@ -106,6 +109,11 @@ const SearchContextProvider = (props) => {
       setPageCursor(void 0);
     }
   }, [term, prevTerm, setPageCursor]);
+  useEffect(() => {
+    if (prevFilters !== void 0 && !isEqual(filters, prevFilters)) {
+      setPageCursor(void 0);
+    }
+  }, [filters, prevFilters, setPageCursor]);
   const value = {
     result,
     filters,
@@ -119,14 +127,248 @@ const SearchContextProvider = (props) => {
     fetchNextPage: hasNextPage ? fetchNextPage : void 0,
     fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : void 0
   };
-  const versionedValue = createVersionedValueMap({ 1: value });
+  return value;
+};
+const LocalSearchContext = (props) => {
+  const { initialState, children } = props;
+  const value = useSearchContextValue(initialState);
   return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: { searchTypes: types.sort().join(",") }
+    attributes: { searchTypes: value.types.sort().join(",") }
   }, /* @__PURE__ */ React.createElement(SearchContext.Provider, {
-    value: versionedValue,
-    children
+    value: createVersionedValueMap({ 1: value })
+  }, children));
+};
+const SearchContextProvider = (props) => {
+  const { initialState, inheritParentContextIfAvailable, children } = props;
+  const hasParentContext = useSearchContextCheck();
+  return hasParentContext && inheritParentContextIfAvailable ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement(LocalSearchContext, {
+    initialState
+  }, children);
+};
+
+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);
+};
+
+function withContext$1(Component) {
+  return forwardRef((props, ref) => /* @__PURE__ */ React.createElement(SearchContextProvider, {
+    inheritParentContextIfAvailable: true
+  }, /* @__PURE__ */ React.createElement(Component, {
+    ...props,
+    ref
+  })));
+}
+const SearchBarBase = withContext$1(
+  forwardRef((props, ref) => {
+    const {
+      onChange,
+      onKeyDown = () => {
+      },
+      onClear = () => {
+      },
+      onSubmit = () => {
+      },
+      debounceTime = 200,
+      clearButton = true,
+      fullWidth = true,
+      value: defaultValue,
+      placeholder: defaultPlaceholder,
+      inputProps: defaultInputProps = {},
+      endAdornment: defaultEndAdornment,
+      ...rest
+    } = props;
+    const configApi = useApi(configApiRef);
+    const [value, setValue] = useState("");
+    useEffect(() => {
+      setValue(
+        (prevValue) => prevValue !== defaultValue ? String(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("");
+      if (onClear) {
+        onClear();
+      }
+    }, [onChange, onClear]);
+    const placeholder = defaultPlaceholder != null ? defaultPlaceholder : `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
+    const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
+      position: "start"
+    }, /* @__PURE__ */ React.createElement(IconButton, {
+      "aria-label": "Query",
+      size: "small",
+      disabled: true
+    }, /* @__PURE__ */ React.createElement(SearchIcon, null)));
+    const endAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
+      position: "end"
+    }, /* @__PURE__ */ React.createElement(IconButton, {
+      "aria-label": "Clear",
+      size: "small",
+      onClick: handleClear
+    }, /* @__PURE__ */ React.createElement(ClearButton, null)));
+    return /* @__PURE__ */ React.createElement(TrackSearch, null, /* @__PURE__ */ React.createElement(InputBase, {
+      "data-testid": "search-bar-next",
+      ref,
+      value,
+      placeholder,
+      startAdornment,
+      endAdornment: clearButton ? endAdornment : defaultEndAdornment,
+      inputProps: { "aria-label": "Search", ...defaultInputProps },
+      fullWidth,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      ...rest
+    }));
+  })
+);
+const SearchBar = withContext$1(
+  forwardRef((props, ref) => {
+    const { value: initialValue = "", onChange, ...rest } = props;
+    const { term, setTerm } = useSearch();
+    useEffect(() => {
+      if (initialValue) {
+        setTerm(String(initialValue));
+      }
+    }, [initialValue, setTerm]);
+    const handleChange = useCallback(
+      (newValue) => {
+        if (onChange) {
+          onChange(newValue);
+        } else {
+          setTerm(newValue);
+        }
+      },
+      [onChange, setTerm]
+    );
+    return /* @__PURE__ */ React.createElement(AnalyticsContext, {
+      attributes: { pluginId: "search", extension: "SearchBar" }
+    }, /* @__PURE__ */ React.createElement(SearchBarBase, {
+      ...rest,
+      ref,
+      value: term,
+      onChange: handleChange
+    }));
+  })
+);
+
+const withContext = (Component) => {
+  return (props) => /* @__PURE__ */ React.createElement(SearchContextProvider, {
+    inheritParentContextIfAvailable: true
+  }, /* @__PURE__ */ React.createElement(Component, {
+    ...props
   }));
 };
+const SearchAutocomplete = withContext(
+  function SearchAutocompleteComponent(props) {
+    const {
+      loading,
+      value,
+      onChange = () => {
+      },
+      options = [],
+      getOptionLabel = (option) => String(option),
+      inputPlaceholder,
+      inputDebounceTime,
+      freeSolo = true,
+      fullWidth = true,
+      clearOnBlur = false,
+      "data-testid": dataTestId = "search-autocomplete",
+      ...rest
+    } = props;
+    const { setTerm } = useSearch();
+    const getInputValue = useCallback(
+      (option) => {
+        if (!option)
+          return "";
+        if (typeof option === "string")
+          return option;
+        return getOptionLabel(option);
+      },
+      [getOptionLabel]
+    );
+    const inputValue = useMemo(
+      () => getInputValue(value),
+      [value, getInputValue]
+    );
+    const handleChange = useCallback(
+      (event, option, reason, details) => {
+        setTerm(getInputValue(option));
+        onChange(event, option, reason, details);
+      },
+      [getInputValue, setTerm, onChange]
+    );
+    const renderInput = useCallback(
+      ({
+        InputProps: { ref, endAdornment },
+        InputLabelProps,
+        ...params
+      }) => /* @__PURE__ */ React.createElement(SearchBar, {
+        ...params,
+        ref,
+        clearButton: false,
+        value: inputValue,
+        placeholder: inputPlaceholder,
+        debounceTime: inputDebounceTime,
+        endAdornment: loading ? /* @__PURE__ */ React.createElement(CircularProgress, {
+          "data-testid": "search-autocomplete-progressbar",
+          color: "inherit",
+          size: 20
+        }) : endAdornment
+      }),
+      [loading, inputValue, inputPlaceholder, inputDebounceTime]
+    );
+    return /* @__PURE__ */ React.createElement(Autocomplete, {
+      ...rest,
+      "data-testid": dataTestId,
+      value,
+      onChange: handleChange,
+      options,
+      getOptionLabel,
+      renderInput,
+      freeSolo,
+      fullWidth,
+      clearOnBlur
+    });
+  }
+);
+
+const SearchAutocompleteDefaultOption = ({
+  icon,
+  primaryText,
+  primaryTextTypographyProps,
+  secondaryText,
+  secondaryTextTypographyProps,
+  disableTextTypography
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, icon ? /* @__PURE__ */ React.createElement(ListItemIcon, null, icon) : null, /* @__PURE__ */ React.createElement(ListItemText, {
+  primary: primaryText,
+  primaryTypographyProps: primaryTextTypographyProps,
+  secondary: secondaryText,
+  secondaryTypographyProps: secondaryTextTypographyProps,
+  disableTypography: disableTextTypography
+}));
 
 const useAsyncFilterValues = (fn, inputValue, defaultValues = [], debounce = 250) => {
   const valuesMemo = useRef({});
@@ -234,7 +476,7 @@ const AutocompleteFilter = (props) => {
   });
 };
 
-const useStyles$1 = makeStyles({
+const useStyles$2 = makeStyles({
   label: {
     textTransform: "capitalize"
   }
@@ -248,7 +490,7 @@ const CheckboxFilter = (props) => {
     values: givenValues = [],
     valuesDebounceMs
   } = props;
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const { filters, setFilters } = useSearch();
   useDefaultFilterValue(name, defaultValue);
   const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
@@ -303,7 +545,7 @@ const SelectFilter = (props) => {
     values: givenValues,
     valuesDebounceMs
   } = props;
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   useDefaultFilterValue(name, defaultValue);
   const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
   const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
@@ -362,39 +604,68 @@ SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(Searc
   component: AutocompleteFilter
 });
 
-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 SearchResultContext = (props) => {
+  const { children } = props;
+  const context = useSearch();
+  const state = context.result;
+  return children(state);
 };
-const HigherOrderSearchResult = (props) => {
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: {
-      pluginId: "search",
-      extension: "SearchResult"
+const SearchResultApi = (props) => {
+  const { query, children } = props;
+  const searchApi = useApi(searchApiRef);
+  const state = useAsync(
+    () => {
+      var _a, _b, _c;
+      return searchApi.query({
+        term: (_a = query.term) != null ? _a : "",
+        types: (_b = query.types) != null ? _b : [],
+        filters: (_c = query.filters) != null ? _c : {},
+        pageCursor: query.pageCursor
+      });
+    },
+    [query]
+  );
+  return children(state);
+};
+const SearchResultState = (props) => {
+  const { query, children } = props;
+  return query ? /* @__PURE__ */ React.createElement(SearchResultApi, {
+    query
+  }, children) : /* @__PURE__ */ React.createElement(SearchResultContext, null, children);
+};
+const SearchResultComponent = (props) => {
+  const { query, children } = props;
+  return /* @__PURE__ */ React.createElement(SearchResultState, {
+    query
+  }, ({ loading, error, value }) => {
+    if (loading) {
+      return /* @__PURE__ */ React.createElement(Progress, null);
     }
-  }, /* @__PURE__ */ React.createElement(SearchResultComponent, {
-    ...props
-  }));
+    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 children(value);
+  });
 };
+const SearchResult = (props) => /* @__PURE__ */ React.createElement(AnalyticsContext, {
+  attributes: {
+    pluginId: "search",
+    extension: "SearchResult"
+  }
+}, /* @__PURE__ */ React.createElement(SearchResultComponent, {
+  ...props
+}));
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   root: {
     display: "flex",
     justifyContent: "space-between",
@@ -404,12 +675,12 @@ const useStyles = makeStyles((theme) => ({
 }));
 const SearchResultPager = () => {
   const { fetchNextPage, fetchPreviousPage } = useSearch();
-  const classes = useStyles();
+  const classes = useStyles$1();
   if (!fetchNextPage && !fetchPreviousPage) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null);
   }
   return /* @__PURE__ */ React.createElement("nav", {
-    "arial-label": "pagination navigation",
+    "aria-label": "pagination navigation",
     className: classes.root
   }, /* @__PURE__ */ React.createElement(Button, {
     "aria-label": "previous page",
@@ -424,105 +695,6 @@ const SearchResultPager = () => {
   }, "Next"));
 };
 
-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 SearchBar = ({ onChange, ...props }) => {
-  const { term, setTerm } = useSearch();
-  const handleChange = useCallback(
-    (newValue) => {
-      if (onChange) {
-        onChange(newValue);
-      } else {
-        setTerm(newValue);
-      }
-    },
-    [onChange, setTerm]
-  );
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: { pluginId: "search", extension: "SearchBar" }
-  }, /* @__PURE__ */ React.createElement(SearchBarBase, {
-    value: term,
-    onChange: handleChange,
-    ...props
-  }));
-};
-
 const DefaultResultListItemComponent = ({
   result,
   highlight,
@@ -578,5 +750,277 @@ const HigherOrderDefaultResultListItem = (props) => {
   }));
 };
 
-export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, HighlightedSearchResultText, MockSearchApi, SearchBar, SearchBarBase, SearchContextProvider, SearchFilter, HigherOrderSearchResult as SearchResult, SearchResultComponent, SearchResultPager, SelectFilter, searchApiRef, useSearch, useSearchContextCheck };
+const SearchResultListLayout = (props) => {
+  const { loading, error, resultItems, renderResultItem, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(List, {
+    ...rest
+  }, loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
+    title: "Error encountered while fetching search results",
+    error
+  }) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map((resultItem) => {
+    var _a;
+    return (_a = renderResultItem == null ? void 0 : renderResultItem(resultItem)) != null ? _a : null;
+  }) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(EmptyState, {
+    missing: "data",
+    title: "Sorry, no results were found"
+  }) : null);
+};
+const SearchResultList = (props) => {
+  const {
+    query,
+    renderResultItem = ({ document }) => /* @__PURE__ */ React.createElement(HigherOrderDefaultResultListItem, {
+      key: document.location,
+      result: document
+    }),
+    ...rest
+  } = props;
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
+    attributes: {
+      pluginId: "search",
+      extension: "SearchResultList"
+    }
+  }, /* @__PURE__ */ React.createElement(SearchResultState, {
+    query
+  }, ({ loading, error, value }) => /* @__PURE__ */ React.createElement(SearchResultListLayout, {
+    ...rest,
+    loading,
+    error,
+    resultItems: value == null ? void 0 : value.results,
+    renderResultItem
+  })));
+};
+
+const useStyles = makeStyles((theme) => ({
+  listSubheader: {
+    display: "flex",
+    alignItems: "center"
+  },
+  listSubheaderName: {
+    marginLeft: theme.spacing(1),
+    textTransform: "uppercase"
+  },
+  listSubheaderChip: {
+    color: theme.palette.text.secondary,
+    margin: theme.spacing(0, 0, 0, 1.5)
+  },
+  listSubheaderFilter: {
+    display: "flex",
+    color: theme.palette.text.secondary,
+    margin: theme.spacing(0, 0, 0, 1.5)
+  },
+  listSubheaderLink: {
+    marginLeft: "auto",
+    display: "flex",
+    alignItems: "center"
+  },
+  listSubheaderLinkIcon: {
+    fontSize: "inherit",
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+const SearchResultGroupFilterFieldLayout = (props) => {
+  const classes = useStyles();
+  const { label, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Chip, {
+    ...rest,
+    className: classes.listSubheaderFilter,
+    variant: "outlined",
+    label: /* @__PURE__ */ React.createElement(React.Fragment, null, label, ": ", children)
+  });
+};
+const NullIcon = () => null;
+const useSearchResultGroupTextFilterStyles = makeStyles((theme) => ({
+  root: {
+    fontSize: "inherit",
+    "&:focus": {
+      outline: "none",
+      background: theme.palette.common.white
+    },
+    "&:not(:focus)": {
+      cursor: "pointer",
+      color: theme.palette.primary.main,
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    }
+  }
+}));
+const SearchResultGroupTextFilterField = (props) => {
+  const classes = useSearchResultGroupTextFilterStyles();
+  const { label, value = "None", onChange, onDelete } = props;
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, {
+    label,
+    onDelete
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    role: "textbox",
+    component: "span",
+    className: classes.root,
+    onChange: handleChange,
+    contentEditable: true,
+    suppressContentEditableWarning: true
+  }, value));
+};
+const useSearchResultGroupSelectFilterStyles = makeStyles((theme) => ({
+  root: {
+    fontSize: "inherit",
+    "&:not(:focus)": {
+      cursor: "pointer",
+      color: theme.palette.primary.main,
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&>div:first-child": {
+      padding: 0
+    }
+  }
+}));
+const SearchResultGroupSelectFilterField = (props) => {
+  const classes = useSearchResultGroupSelectFilterStyles();
+  const { label, value = "none", onChange, onDelete, children } = props;
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, {
+    label,
+    onDelete
+  }, /* @__PURE__ */ React.createElement(Select, {
+    className: classes.root,
+    value,
+    onChange: handleChange,
+    input: /* @__PURE__ */ React.createElement(InputBase, null),
+    IconComponent: NullIcon
+  }, /* @__PURE__ */ React.createElement(MenuItem, {
+    value: "none"
+  }, "None"), children));
+};
+function SearchResultGroupLayout(props) {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const {
+    loading,
+    error,
+    icon,
+    title,
+    titleProps = {},
+    link,
+    linkProps = {},
+    filterOptions,
+    renderFilterOption,
+    filterFields,
+    renderFilterField,
+    resultItems,
+    renderResultItem,
+    ...rest
+  } = props;
+  const handleClick = useCallback((e) => {
+    setAnchorEl(e.currentTarget);
+  }, []);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  return /* @__PURE__ */ React.createElement(List, {
+    ...rest
+  }, /* @__PURE__ */ React.createElement(ListSubheader, {
+    className: classes.listSubheader
+  }, icon, /* @__PURE__ */ React.createElement(Typography, {
+    className: classes.listSubheaderName,
+    component: "strong",
+    ...titleProps
+  }, title), filterOptions ? /* @__PURE__ */ React.createElement(Chip, {
+    className: classes.listSubheaderChip,
+    component: "button",
+    icon: /* @__PURE__ */ React.createElement(AddIcon, null),
+    variant: "outlined",
+    label: "Add filter",
+    "aria-controls": "filters-menu",
+    "aria-haspopup": "true",
+    onClick: handleClick
+  }) : null, filterOptions ? /* @__PURE__ */ React.createElement(Menu, {
+    id: "filters-menu",
+    anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleClose,
+    onClick: handleClose,
+    keepMounted: true
+  }, filterOptions.map(
+    (filterOption) => renderFilterOption ? renderFilterOption(filterOption) : /* @__PURE__ */ React.createElement(MenuItem, {
+      key: String(filterOption),
+      value: String(filterOption)
+    }, filterOption)
+  )) : null, filterFields == null ? void 0 : filterFields.map(
+    (filterField) => {
+      var _a;
+      return (_a = renderFilterField == null ? void 0 : renderFilterField(filterField)) != null ? _a : null;
+    }
+  ), /* @__PURE__ */ React.createElement(Link, {
+    className: classes.listSubheaderLink,
+    to: "/search",
+    ...linkProps
+  }, link != null ? link : /* @__PURE__ */ React.createElement(React.Fragment, null, "See all", /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, {
+    className: classes.listSubheaderLinkIcon
+  })))), loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
+    title: "Error encountered while fetching search results",
+    error
+  }) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map((resultItem) => {
+    var _a;
+    return (_a = renderResultItem == null ? void 0 : renderResultItem(resultItem)) != null ? _a : null;
+  }) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(EmptyState, {
+    missing: "data",
+    title: "Sorry, no results were found"
+  })) : null);
+}
+function SearchResultGroup(props) {
+  const {
+    query,
+    linkProps = {},
+    renderResultItem = ({ document }) => /* @__PURE__ */ React.createElement(HigherOrderDefaultResultListItem, {
+      key: document.location,
+      result: document
+    }),
+    ...rest
+  } = props;
+  const to = `/search?${qs.stringify(
+    {
+      query: query.term,
+      types: query.types,
+      filters: query.filters,
+      pageCursor: query.pageCursor
+    },
+    { arrayFormat: "brackets" }
+  )}`;
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
+    attributes: {
+      pluginId: "search",
+      extension: "SearchResultGroup"
+    }
+  }, /* @__PURE__ */ React.createElement(SearchResultState, {
+    query
+  }, ({ loading, error, value }) => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(SearchResultGroupLayout, {
+      ...rest,
+      loading,
+      error,
+      linkProps: { to, ...linkProps },
+      resultItems: value == null ? void 0 : value.results,
+      renderResultItem,
+      filterFields: Object.keys((_a = query.filters) != null ? _a : {})
+    });
+  }));
+}
+
+export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, HighlightedSearchResultText, MockSearchApi, SearchAutocomplete, SearchAutocompleteDefaultOption, SearchBar, SearchBarBase, SearchContextProvider, SearchFilter, SearchResult, SearchResultApi, SearchResultComponent, SearchResultContext, SearchResultGroup, SearchResultGroupFilterFieldLayout, SearchResultGroupLayout, SearchResultGroupSelectFilterField, SearchResultGroupTextFilterField, SearchResultList, SearchResultListLayout, SearchResultPager, SearchResultState, SelectFilter, searchApiRef, useSearch, useSearchContextCheck };
 //# sourceMappingURL=index.esm.js.map