@backstage/plugin-search 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @backstage/plugin-search
 
+## 0.5.3
+
+### Patch Changes
+
+- 6d8e3a9651: Internal cleanup of the exports structure
+- 8b532a6c02: Introduces a `<SearchType.Accordion />` variant, which operates on the same part of a search query as the existing `<SearchType />`, but in a more opinionated way (as a single-select control surface suitable for faceted search UIs).
+
+  Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchtype--accordion) to see how it can be used.
+
+- af4980fb5d: Captures the search term entered in the SearchBarBase as a `search` event.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@0.6.9
+
 ## 0.5.2
 
 ### Patch Changes

package/dist/esm/{index-a71e930d.esm.js → index-00a7ba84.esm.js}

@@ -1,15 +1,15 @@
-export { H as HomePageSearchBar } from './index-655809db.esm.js';
+export { a as SearchBar, b as SearchBarBase } from './index-ee953592.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
 import 'react';
-import '@material-ui/core';
-import '@backstage/core-components';
 import '@material-ui/icons/FilterList';
+import '@material-ui/core';
 import 'react-use';
 import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
 import '@material-ui/core/styles';
+import '@backstage/core-components';
 import '@material-ui/icons/ArrowBackIos';
 import '@material-ui/icons/ArrowForwardIos';
 import '@material-ui/core/utils';
@@ -19,5 +19,7 @@ import '@material-ui/core/IconButton';
 import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
+import '@material-ui/icons/ExpandMore';
+import '@material-ui/icons/FontDownload';
 import 'react-router-dom';
-//# sourceMappingURL=index-a71e930d.esm.js.map
+//# sourceMappingURL=index-00a7ba84.esm.js.map

package/dist/esm/index-00a7ba84.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-00a7ba84.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/index-384f7bcf.esm.js

@@ -0,0 +1,66 @@
+import React__default, { useCallback, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { r as rootRouteRef, b as SearchBarBase } from './index-ee953592.esm.js';
+import qs from 'qs';
+import { useNavigate } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import '@backstage/errors';
+import '@material-ui/icons/FilterList';
+import '@material-ui/core';
+import 'react-use';
+import '@material-ui/icons/Search';
+import '@material-ui/icons/Clear';
+import '@backstage/core-components';
+import '@material-ui/icons/ArrowBackIos';
+import '@material-ui/icons/ArrowForwardIos';
+import '@material-ui/core/utils';
+import 'react-router';
+import '@material-ui/core/InputBase';
+import '@material-ui/core/IconButton';
+import '@material-ui/lab';
+import '@backstage/plugin-catalog-react';
+import '@backstage/catalog-model';
+import '@material-ui/icons/ExpandMore';
+import '@material-ui/icons/FontDownload';
+
+const useNavigateToQuery = () => {
+  const searchRoute = useRouteRef(rootRouteRef);
+  const navigate = useNavigate();
+  return useCallback(({ query }) => {
+    const queryString = qs.stringify({ query }, { addQueryPrefix: true });
+    navigate(`${searchRoute()}${queryString}`);
+  }, [navigate, searchRoute]);
+};
+
+const useStyles = makeStyles({
+  searchBar: {
+    border: "1px solid #555",
+    borderRadius: "6px",
+    fontSize: "1.5em"
+  }
+});
+const HomePageSearchBar = ({
+  className: defaultClassName,
+  ...props
+}) => {
+  const classes = useStyles();
+  const [query, setQuery] = useState("");
+  const handleSearch = useNavigateToQuery();
+  const className = defaultClassName ? `${classes.searchBar} ${defaultClassName}` : classes.searchBar;
+  const handleSubmit = () => {
+    handleSearch({ query });
+  };
+  const handleChange = useCallback((value) => {
+    setQuery(value);
+  }, [setQuery]);
+  return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
+    className,
+    value: query,
+    onSubmit: handleSubmit,
+    onChange: handleChange,
+    ...props
+  });
+};
+
+export { HomePageSearchBar };
+//# sourceMappingURL=index-384f7bcf.esm.js.map

package/dist/esm/index-384f7bcf.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-384f7bcf.esm.js","sources":["../../src/components/util.ts","../../src/components/HomePageComponent/HomePageSearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport qs from 'qs';\nimport { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { rootRouteRef } from '../plugin';\n\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nexport const useNavigateToQuery = () => {\n  const searchRoute = useRouteRef(rootRouteRef);\n  const navigate = useNavigate();\n  return useCallback(\n    ({ query }: { query: string }): void => {\n      const queryString = qs.stringify({ query }, { addQueryPrefix: true });\n\n      navigate(`${searchRoute()}${queryString}`);\n    },\n    [navigate, searchRoute],\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { SearchBarBase, SearchBarBaseProps } from '../SearchBar';\nimport { useNavigateToQuery } from '../util';\n\nconst useStyles = makeStyles({\n  searchBar: {\n    border: '1px solid #555',\n    borderRadius: '6px',\n    fontSize: '1.5em',\n  },\n});\n\n/**\n * Props for {@link HomePageSearchBar}.\n *\n * @public\n */\nexport type HomePageSearchBarProps = Partial<\n  Omit<SearchBarBaseProps, 'onChange' | 'onSubmit'>\n>;\n\n/**\n * The search bar created specifically for the composable home page\n *\n * @public\n */\nexport const HomePageSearchBar = ({\n  className: defaultClassName,\n  ...props\n}: HomePageSearchBarProps) => {\n  const classes = useStyles();\n  const [query, setQuery] = useState('');\n  const handleSearch = useNavigateToQuery();\n\n  const className = defaultClassName\n    ? `${classes.searchBar} ${defaultClassName}`\n    : classes.searchBar;\n\n  const handleSubmit = () => {\n    handleSearch({ query });\n  };\n\n  const handleChange = useCallback(\n    value => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <SearchBarBase\n      className={className}\n      value={query}\n      onSubmit={handleSubmit}\n      onChange={handleChange}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MAsBa,qBAAqB,MAAM;AACtC,QAAM,cAAc,YAAY;AAChC,QAAM,WAAW;AACjB,SAAO,YACL,CAAC,EAAE,YAAqC;AACtC,UAAM,cAAc,GAAG,UAAU,EAAE,SAAS,EAAE,gBAAgB;AAE9D,aAAS,GAAG,gBAAgB;AAAA,KAE9B,CAAC,UAAU;AAAA;;ACTf,MAAM,YAAY,WAAW;AAAA,EAC3B,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA;AAAA;MAkBD,oBAAoB,CAAC;AAAA,EAChC,WAAW;AAAA,KACR;AAAA,MACyB;AAC5B,QAAM,UAAU;AAChB,QAAM,CAAC,OAAO,YAAY,SAAS;AACnC,QAAM,eAAe;AAErB,QAAM,YAAY,mBACd,GAAG,QAAQ,aAAa,qBACxB,QAAQ;AAEZ,QAAM,eAAe,MAAM;AACzB,iBAAa,EAAE;AAAA;AAGjB,QAAM,eAAe,YACnB,WAAS;AACP,aAAS;AAAA,KAEX,CAAC;AAGH,sDACG,eAAD;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,OACN;AAAA;AAAA;;;;"}

package/dist/esm/{index-2a318193.esm.js → index-c6d67b32.esm.js}

@@ -1,15 +1,15 @@
-export { c as SearchResult } from './index-655809db.esm.js';
+export { c as SearchResult } from './index-ee953592.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
 import 'react';
-import '@material-ui/core';
-import '@backstage/core-components';
 import '@material-ui/icons/FilterList';
+import '@material-ui/core';
 import 'react-use';
 import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
 import '@material-ui/core/styles';
+import '@backstage/core-components';
 import '@material-ui/icons/ArrowBackIos';
 import '@material-ui/icons/ArrowForwardIos';
 import '@material-ui/core/utils';
@@ -19,5 +19,7 @@ import '@material-ui/core/IconButton';
 import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
+import '@material-ui/icons/ExpandMore';
+import '@material-ui/icons/FontDownload';
 import 'react-router-dom';
-//# sourceMappingURL=index-2a318193.esm.js.map
+//# sourceMappingURL=index-c6d67b32.esm.js.map

package/dist/esm/index-c6d67b32.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-c6d67b32.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/{index-af05ea86.esm.js → index-e62dadc4.esm.js}

@@ -1,12 +1,12 @@
 import React__default from 'react';
 import SearchIcon from '@material-ui/icons/Search';
 import { SidebarItem } from '@backstage/core-components';
-import { u as useSearch, d as SearchModal } from './index-655809db.esm.js';
+import { u as useSearch, d as SearchModal } from './index-ee953592.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
-import '@material-ui/core';
 import '@material-ui/icons/FilterList';
+import '@material-ui/core';
 import 'react-use';
 import '@material-ui/icons/Clear';
 import '@material-ui/core/styles';
@@ -19,6 +19,8 @@ import '@material-ui/core/IconButton';
 import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
+import '@material-ui/icons/ExpandMore';
+import '@material-ui/icons/FontDownload';
 import 'react-router-dom';
 
 const SidebarSearchModal = (props) => {
@@ -36,4 +38,4 @@ const SidebarSearchModal = (props) => {
 };
 
 export { SidebarSearchModal };
-//# sourceMappingURL=index-af05ea86.esm.js.map
+//# sourceMappingURL=index-e62dadc4.esm.js.map

package/dist/esm/{index-af05ea86.esm.js.map → index-e62dadc4.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-af05ea86.esm.js","sources":["../../src/components/SidebarSearchModal/SidebarSearchModal.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport SearchIcon from '@material-ui/icons/Search';\nimport { SidebarItem } from '@backstage/core-components';\nimport { IconComponent } from '@backstage/core-plugin-api';\nimport { SearchModal } from '../SearchModal';\nimport { useSearch } from '../SearchContext';\n\nexport type SidebarSearchModalProps = {\n  icon?: IconComponent;\n};\n\nexport const SidebarSearchModal = (props: SidebarSearchModalProps) => {\n  const { open, toggleModal } = useSearch();\n  const Icon = props.icon ? props.icon : SearchIcon;\n\n  return (\n    <>\n      <SidebarItem\n        className=\"search-icon\"\n        icon={Icon}\n        text=\"Search\"\n        onClick={toggleModal}\n      />\n      <SearchModal open={open} toggleModal={toggleModal} />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MA0Ba,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,MAAM,gBAAgB;AAC9B,QAAM,OAAO,MAAM,OAAO,MAAM,OAAO;AAEvC,kIAEK,aAAD;AAAA,IACE,WAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAS;AAAA,mDAEV,aAAD;AAAA,IAAa;AAAA,IAAY;AAAA;AAAA;;;;"}
+{"version":3,"file":"index-e62dadc4.esm.js","sources":["../../src/components/SidebarSearchModal/SidebarSearchModal.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport SearchIcon from '@material-ui/icons/Search';\nimport { SidebarItem } from '@backstage/core-components';\nimport { IconComponent } from '@backstage/core-plugin-api';\nimport { SearchModal } from '../SearchModal';\nimport { useSearch } from '../SearchContext';\n\nexport type SidebarSearchModalProps = {\n  icon?: IconComponent;\n};\n\nexport const SidebarSearchModal = (props: SidebarSearchModalProps) => {\n  const { open, toggleModal } = useSearch();\n  const Icon = props.icon ? props.icon : SearchIcon;\n\n  return (\n    <>\n      <SidebarItem\n        className=\"search-icon\"\n        icon={Icon}\n        text=\"Search\"\n        onClick={toggleModal}\n      />\n      <SearchModal open={open} toggleModal={toggleModal} />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MA0Ba,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,MAAM,gBAAgB;AAC9B,QAAM,OAAO,MAAM,OAAO,MAAM,OAAO;AAEvC,kIAEK,aAAD;AAAA,IACE,WAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAS;AAAA,mDAEV,aAAD;AAAA,IAAa;AAAA,IAAY;AAAA;AAAA;;;;"}

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

@@ -1,15 +1,15 @@
-import { createApiRef, useApi, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
+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 } from 'react';
-import { ListItem, ListItemIcon, ListItemText, Box, Divider, makeStyles, IconButton, Typography, Card, CardHeader, Button, CardContent, Select, MenuItem, List, Checkbox, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Chip } from '@material-ui/core';
-import { Link, Progress, ResponseErrorPanel, EmptyState, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
+import React__default, { createContext, useState, useCallback, useEffect, useContext, 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, Chip } from '@material-ui/core';
 import { usePrevious, useAsync, useDebounce, useEffectOnce } from 'react-use';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 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 ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import { createSvgIcon } from '@material-ui/core/utils';
@@ -19,6 +19,8 @@ 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 ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import AllIcon from '@material-ui/icons/FontDownload';
 import { useNavigate } from 'react-router-dom';
 
 const searchApiRef = createApiRef({
@@ -43,24 +45,6 @@ class SearchClient {
   }
 }
 
-const DefaultResultListItem$1 = ({
-  result,
-  icon,
-  secondaryAction
-}) => {
-  return /* @__PURE__ */ React__default.createElement(Link, {
-    to: result.location
-  }, /* @__PURE__ */ React__default.createElement(ListItem, {
-    alignItems: "center"
-  }, icon && /* @__PURE__ */ React__default.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React__default.createElement(ListItemText, {
-    primaryTypographyProps: { variant: "h6" },
-    primary: result.title,
-    secondary: result.text
-  }), secondaryAction && /* @__PURE__ */ React__default.createElement(Box, {
-    alignItems: "flex-end"
-  }, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
-};
-
 const useStyles$a = makeStyles((theme) => ({
   filters: {
     width: "250px",
@@ -214,10 +198,12 @@ const SearchContextProvider = ({
     fetchNextPage: hasNextPage ? fetchNextPage : void 0,
     fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : void 0
   };
-  return /* @__PURE__ */ React__default.createElement(SearchContext.Provider, {
+  return /* @__PURE__ */ React__default.createElement(AnalyticsContext, {
+    attributes: { searchTypes: types.sort().join(",") }
+  }, /* @__PURE__ */ React__default.createElement(SearchContext.Provider, {
     value,
     children
-  });
+  }));
 };
 const useSearch = () => {
   const context = useContext(SearchContext);
@@ -227,6 +213,17 @@ const useSearch = () => {
   return context;
 };
 
+const TrackSearch = ({ children }) => {
+  const analytics = useAnalytics();
+  const { term } = useSearch();
+  useEffect(() => {
+    if (term) {
+      analytics.captureEvent("search", term);
+    }
+  }, [analytics, term]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+};
+
 const SearchBarBase = ({
   onChange,
   onKeyDown,
@@ -271,7 +268,7 @@ const SearchBarBase = ({
     "aria-label": "Clear",
     onClick: handleClear
   }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
-  return /* @__PURE__ */ React__default.createElement(InputBase, {
+  return /* @__PURE__ */ React__default.createElement(TrackSearch, null, /* @__PURE__ */ React__default.createElement(InputBase, {
     "data-testid": "search-bar-next",
     value,
     placeholder,
@@ -282,14 +279,16 @@ const SearchBarBase = ({
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     ...props
-  });
+  }));
 };
 const SearchBar$1 = ({ onChange, ...props }) => {
   const { term, setTerm } = useSearch();
   const handleChange = (newValue) => {
-    setTerm(newValue);
-    if (onChange)
+    if (onChange) {
       onChange(newValue);
+    } else {
+      setTerm(newValue);
+    }
   };
   return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
     value: term,
@@ -414,6 +413,24 @@ 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, {
+    to: result.location
+  }, /* @__PURE__ */ React__default.createElement(ListItem, {
+    alignItems: "center"
+  }, icon && /* @__PURE__ */ React__default.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React__default.createElement(ListItemText, {
+    primaryTypographyProps: { variant: "h6" },
+    primary: result.title,
+    secondary: result.text
+  }), secondaryAction && /* @__PURE__ */ React__default.createElement(Box, {
+    alignItems: "flex-end"
+  }, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
+};
+
 const SearchResultComponent = ({ children }) => {
   const {
     result: { loading, error, value }
@@ -490,54 +507,54 @@ const searchPlugin = createPlugin({
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-0a2fab21.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-ff0c1c1c.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
 const SearchPageNext = searchPlugin.provide(createRoutableExtension({
   name: "SearchPageNext",
-  component: () => import('./index-0a2fab21.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-ff0c1c1c.esm.js').then((m) => m.SearchPage),
   mountPoint: rootNextRouteRef
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchBar",
   component: {
-    lazy: () => import('./index-d5ddea91.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-00a7ba84.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchBarNext = searchPlugin.provide(createComponentExtension({
   name: "SearchBarNext",
   component: {
-    lazy: () => import('./index-d5ddea91.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-00a7ba84.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchResult$1 = searchPlugin.provide(createComponentExtension({
   name: "SearchResult",
   component: {
-    lazy: () => import('./index-2a318193.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-c6d67b32.esm.js').then((m) => m.SearchResult)
   }
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchResultNext",
   component: {
-    lazy: () => import('./index-2a318193.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-c6d67b32.esm.js').then((m) => m.SearchResult)
   }
 }));
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-af05ea86.esm.js').then((m) => m.SidebarSearchModal)
+    lazy: () => import('./index-e62dadc4.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
 const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
   name: "DefaultResultListItem",
   component: {
-    lazy: () => import('./index-18219c65.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-fbbcf308.esm.js').then((m) => m.DefaultResultListItem)
   }
 }));
-const HomePageSearchBar$1 = searchPlugin.provide(createComponentExtension({
+const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-a71e930d.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-384f7bcf.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
@@ -1025,6 +1042,110 @@ const SearchPage = () => {
 };
 
 const useStyles$1 = makeStyles((theme) => ({
+  card: {
+    backgroundColor: "rgba(0, 0, 0, .11)"
+  },
+  cardContent: {
+    paddingTop: theme.spacing(1)
+  },
+  icon: {
+    color: theme.palette.common.black
+  },
+  list: {
+    width: "100%"
+  },
+  listItemIcon: {
+    width: "24px",
+    height: "24px"
+  },
+  accordion: {
+    backgroundColor: theme.palette.background.paper
+  },
+  accordionSummary: {
+    minHeight: "auto",
+    "&.Mui-expanded": {
+      minHeight: "auto"
+    }
+  },
+  accordionSummaryContent: {
+    margin: theme.spacing(2, 0),
+    "&.Mui-expanded": {
+      margin: theme.spacing(2, 0)
+    }
+  },
+  accordionDetails: {
+    padding: theme.spacing(0, 0, 1)
+  }
+}));
+const SearchTypeAccordion = (props) => {
+  const classes = useStyles$1();
+  const { setPageCursor, setTypes, types } = useSearch();
+  const [expanded, setExpanded] = useState(true);
+  const { defaultValue, name, types: givenTypes } = props;
+  const toggleExpanded = () => setExpanded((prevState) => !prevState);
+  const handleClick = (type) => {
+    return () => {
+      setTypes(type !== "" ? [type] : []);
+      setPageCursor(void 0);
+      setExpanded(false);
+    };
+  };
+  useEffect(() => {
+    if (defaultValue) {
+      setTypes([defaultValue]);
+    }
+  }, []);
+  const definedTypes = [
+    {
+      value: "",
+      name: "All",
+      icon: /* @__PURE__ */ React__default.createElement(AllIcon, null)
+    },
+    ...givenTypes
+  ];
+  const selected = types[0] || "";
+  return /* @__PURE__ */ React__default.createElement(Card, {
+    className: classes.card
+  }, /* @__PURE__ */ React__default.createElement(CardHeader, {
+    title: name,
+    titleTypographyProps: { variant: "overline" }
+  }), /* @__PURE__ */ React__default.createElement(CardContent, {
+    className: classes.cardContent
+  }, /* @__PURE__ */ React__default.createElement(Accordion, {
+    className: classes.accordion,
+    expanded,
+    onChange: toggleExpanded
+  }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
+    classes: {
+      root: classes.accordionSummary,
+      content: classes.accordionSummaryContent
+    },
+    expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, {
+      className: classes.icon
+    }),
+    IconButtonProps: { size: "small" }
+  }, expanded ? "Collapse" : definedTypes.filter((t) => t.value === selected)[0].name), /* @__PURE__ */ React__default.createElement(AccordionDetails, {
+    classes: { root: classes.accordionDetails }
+  }, /* @__PURE__ */ React__default.createElement(List, {
+    className: classes.list,
+    component: "nav",
+    "aria-label": "filter by type",
+    disablePadding: true,
+    dense: true
+  }, definedTypes.map((type) => /* @__PURE__ */ React__default.createElement(Fragment, {
+    key: type.value
+  }, /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.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, {
+    className: classes.listItemIcon
+  })), /* @__PURE__ */ React__default.createElement(ListItemText, {
+    primary: type.name
+  })))))))));
+};
+
+const useStyles = makeStyles((theme) => ({
   label: {
     textTransform: "capitalize"
   },
@@ -1037,13 +1158,9 @@ const useStyles$1 = makeStyles((theme) => ({
     margin: 2
   }
 }));
-const SearchType = ({
-  values = [],
-  className,
-  name,
-  defaultValue
-}) => {
-  const classes = useStyles$1();
+const SearchType = (props) => {
+  const { className, defaultValue, name, values = [] } = props;
+  const classes = useStyles();
   const { types, setTypes } = useSearch();
   useEffectOnce(() => {
     if (!types.length) {
@@ -1089,6 +1206,11 @@ const SearchType = ({
     primary: value
   })))));
 };
+SearchType.Accordion = (props) => {
+  return /* @__PURE__ */ React__default.createElement(SearchTypeAccordion, {
+    ...props
+  });
+};
 
 const SidebarSearch = (props) => {
   const searchRoute = useRouteRef(rootRouteRef);
@@ -1104,44 +1226,5 @@ const SidebarSearch = (props) => {
   });
 };
 
-const useNavigateToQuery = () => {
-  const searchRoute = useRouteRef(rootRouteRef);
-  const navigate = useNavigate();
-  return useCallback(({ query }) => {
-    const queryString = qs.stringify({ query }, { addQueryPrefix: true });
-    navigate(`${searchRoute()}${queryString}`);
-  }, [navigate, searchRoute]);
-};
-
-const useStyles = makeStyles$1({
-  searchBar: {
-    border: "1px solid #555",
-    borderRadius: "6px",
-    fontSize: "1.5em"
-  }
-});
-const HomePageSearchBar = ({
-  className: defaultClassName,
-  ...props
-}) => {
-  const classes = useStyles();
-  const [query, setQuery] = useState("");
-  const handleSearch = useNavigateToQuery();
-  const className = defaultClassName ? `${classes.searchBar} ${defaultClassName}` : classes.searchBar;
-  const handleSubmit = () => {
-    handleSearch({ query });
-  };
-  const handleChange = useCallback((value) => {
-    setQuery(value);
-  }, [setQuery]);
-  return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
-    className,
-    value: query,
-    onSubmit: handleSubmit,
-    onChange: handleChange,
-    ...props
-  });
-};
-
-export { DefaultResultListItem$1 as D, Filters$1 as F, HomePageSearchBar as H, SearchPage as S, SearchBar$1 as a, SearchBarBase as b, SearchResultComponent as c, SearchModal as d, FiltersButton$1 as e, SearchContextProvider as f, SearchFilter as g, SearchFilterNext as h, SearchResultPager as i, SearchType as j, SidebarSearch as k, DefaultResultListItem as l, HomePageSearchBar$1 as m, SearchBarNext as n, SearchPage$1 as o, SearchPageNext as p, searchPlugin as q, SearchResult$1 as r, searchApiRef as s, SidebarSearchModal as t, useSearch as u };
-//# sourceMappingURL=index-655809db.esm.js.map
+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-ee953592.esm.js.map