@backstage/plugin-search 0.9.1-next.2 → 1.0.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @backstage/plugin-search
 
+## 1.0.1-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.5-next.0
+  - @backstage/plugin-catalog-react@1.1.3-next.0
+  - @backstage/core-components@0.10.1-next.0
+  - @backstage/plugin-search-react@1.0.1-next.0
+
+## 1.0.0
+
+### Major Changes
+
+- 7bd7d336b2: This package has been promoted to 1.0. Read more about what it means in [New release: Backstage Search 1.0 blog](https://backstage.io/blog/2022/07/19/releasing-backstage-search-1.0)
+
+### Patch Changes
+
+- a70869e775: Updated dependency `msw` to `^0.43.0`.
+- 8006d0f9bf: Updated dependency `msw` to `^0.44.0`.
+- 509c4092f0: To allow people to use a global search context in the search modal, the code for the search modal has been changed to only create a local search context if there is no parent context already defined.
+
+  If you want to continue using a local context even if you define a global one, you will have to wrap the modal in a new local context manually:
+
+  ```tsx
+  <SearchContextProvider>
+    <SearchModal toggleModal={toggleModal} />
+  </SearchContextProvider>
+  ```
+
+- Updated dependencies
+  - @backstage/core-components@0.10.0
+  - @backstage/catalog-model@1.1.0
+  - @backstage/plugin-search-react@1.0.0
+  - @backstage/plugin-search-common@1.0.0
+  - @backstage/core-plugin-api@1.0.4
+  - @backstage/plugin-catalog-react@1.1.2
+  - @backstage/theme@0.2.16
+  - @backstage/errors@1.1.0
+
+## 0.9.1-next.3
+
+### Patch Changes
+
+- a70869e775: Updated dependency `msw` to `^0.43.0`.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.4-next.0
+  - @backstage/core-components@0.10.0-next.3
+  - @backstage/catalog-model@1.1.0-next.3
+  - @backstage/plugin-catalog-react@1.1.2-next.3
+  - @backstage/plugin-search-react@0.2.2-next.3
+
 ## 0.9.1-next.2
 
 ### Patch Changes

package/dist/esm/{index-30f1f9c5.esm.js → index-2cf5b862.esm.js}

@@ -1,28 +1,17 @@
 import React from 'react';
 import SearchIcon from '@material-ui/icons/Search';
 import { SidebarItem } from '@backstage/core-components';
-import { a as SearchModalProvider, u as useSearchModal, b as SearchModal } from './index-5187be91.esm.js';
-import '@material-ui/icons/FilterList';
+import { a as SearchModalProvider, u as useSearchModal, b as SearchModal } from './index-7063ba2d.esm.js';
 import '@material-ui/core';
-import '@backstage/plugin-search-react';
 import '@material-ui/icons/Launch';
 import '@material-ui/core/styles';
+import '@backstage/plugin-search-react';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
 import '@backstage/version-bridge';
 import 'react-use/lib/usePrevious';
 import 'react-router';
-import 'react-use/lib/useDebounce';
-import '@material-ui/core/InputBase';
-import '@material-ui/core/IconButton';
-import '@material-ui/icons/Clear';
-import '@material-ui/lab';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-catalog-react';
-import '@backstage/catalog-model';
-import '@material-ui/icons/ArrowBackIos';
-import '@material-ui/icons/ArrowForwardIos';
 import 'react-use/lib/useEffectOnce';
 import '@material-ui/icons/ExpandMore';
 import '@material-ui/icons/FontDownload';
@@ -49,4 +38,4 @@ const SidebarSearchModal = (props) => {
 };
 
 export { SidebarSearchModal };
-//# sourceMappingURL=index-30f1f9c5.esm.js.map
+//# sourceMappingURL=index-2cf5b862.esm.js.map

package/dist/esm/{index-30f1f9c5.esm.js.map → index-2cf5b862.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-30f1f9c5.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 {\n  SearchModal,\n  SearchModalChildrenProps,\n  SearchModalProvider,\n  useSearchModal,\n} from '../SearchModal';\n\n/**\n * Props for {@link SidebarSearchModal}.\n *\n * @public\n */\nexport type SidebarSearchModalProps = {\n  icon?: IconComponent;\n  children?: (props: SearchModalChildrenProps) => JSX.Element;\n};\n\nconst SidebarSearchModalContent = (props: SidebarSearchModalProps) => {\n  const { state, toggleModal } = useSearchModal();\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\n        {...state}\n        toggleModal={toggleModal}\n        children={props.children}\n      />\n    </>\n  );\n};\n\nexport const SidebarSearchModal = (props: SidebarSearchModalProps) => {\n  return (\n    <SearchModalProvider>\n      <SidebarSearchModalContent {...props} />\n    </SearchModalProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,yBAAyB,GAAG,CAAC,KAAK,KAAK;AAC7C,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;AAClD,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AACpD,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,kBAAkB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACpH,IAAI,SAAS,EAAE,aAAa;AAC5B,IAAI,IAAI,EAAE,IAAI;AACd,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,OAAO,EAAE,WAAW;AACxB,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACvD,IAAI,GAAG,KAAK;AACZ,IAAI,WAAW;AACf,IAAI,QAAQ,EAAE,KAAK,CAAC,QAAQ;AAC5B,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,CAAC;AACU,MAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK;AAC7C,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,IAAI,kBAAkB,KAAK,CAAC,aAAa,CAAC,yBAAyB,EAAE;AACvI,IAAI,GAAG,KAAK;AACZ,GAAG,CAAC,CAAC,CAAC;AACN;;;;"}
+{"version":3,"file":"index-2cf5b862.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 {\n  SearchModal,\n  SearchModalChildrenProps,\n  SearchModalProvider,\n  useSearchModal,\n} from '../SearchModal';\n\n/**\n * Props for {@link SidebarSearchModal}.\n *\n * @public\n */\nexport type SidebarSearchModalProps = {\n  icon?: IconComponent;\n  children?: (props: SearchModalChildrenProps) => JSX.Element;\n};\n\nconst SidebarSearchModalContent = (props: SidebarSearchModalProps) => {\n  const { state, toggleModal } = useSearchModal();\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\n        {...state}\n        toggleModal={toggleModal}\n        children={props.children}\n      />\n    </>\n  );\n};\n\nexport const SidebarSearchModal = (props: SidebarSearchModalProps) => {\n  return (\n    <SearchModalProvider>\n      <SidebarSearchModalContent {...props} />\n    </SearchModalProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAQA,MAAM,yBAAyB,GAAG,CAAC,KAAK,KAAK;AAC7C,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;AAClD,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AACpD,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,kBAAkB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACpH,IAAI,SAAS,EAAE,aAAa;AAC5B,IAAI,IAAI,EAAE,IAAI;AACd,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,OAAO,EAAE,WAAW;AACxB,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACvD,IAAI,GAAG,KAAK;AACZ,IAAI,WAAW;AACf,IAAI,QAAQ,EAAE,KAAK,CAAC,QAAQ;AAC5B,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,CAAC;AACU,MAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK;AAC7C,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,IAAI,kBAAkB,KAAK,CAAC,aAAa,CAAC,yBAAyB,EAAE;AACvI,IAAI,GAAG,KAAK;AACZ,GAAG,CAAC,CAAC,CAAC;AACN;;;;"}

package/dist/esm/index-64e4c3d4.esm.js

@@ -0,0 +1,18 @@
+export { S as SearchPage } from './index-7063ba2d.esm.js';
+import 'react';
+import '@material-ui/core';
+import '@material-ui/icons/Launch';
+import '@material-ui/core/styles';
+import '@backstage/plugin-search-react';
+import '@backstage/core-plugin-api';
+import '@backstage/core-components';
+import '@backstage/errors';
+import 'qs';
+import '@backstage/version-bridge';
+import 'react-use/lib/usePrevious';
+import 'react-router';
+import 'react-use/lib/useEffectOnce';
+import '@material-ui/icons/ExpandMore';
+import '@material-ui/icons/FontDownload';
+import 'react-router-dom';
+//# sourceMappingURL=index-64e4c3d4.esm.js.map

package/dist/esm/index-64e4c3d4.esm.js.map

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

package/dist/esm/index-7063ba2d.esm.js

@@ -0,0 +1,509 @@
+import React, { useContext, useState, useCallback, useEffect, Fragment, cloneElement } from 'react';
+import { Dialog, useTheme, DialogTitle, Paper, DialogContent, Grid, Divider, List, DialogActions, makeStyles as makeStyles$1, Card, CardHeader, CardContent, Accordion, AccordionSummary, AccordionDetails, ListItem, ListItemIcon, ListItemText, Tabs, Tab, FormControl, InputLabel, Select, Chip, MenuItem, Checkbox } from '@material-ui/core';
+import LaunchIcon from '@material-ui/icons/Launch';
+import { makeStyles } from '@material-ui/core/styles';
+import { searchApiRef, useSearch, SearchBar, SearchResult, DefaultResultListItem, SearchResultPager, useSearchContextCheck, SearchContextProvider } from '@backstage/plugin-search-react';
+import { createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
+import { useContent, Link, 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 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';
+
+class SearchClient {
+  constructor(options) {
+    this.discoveryApi = options.discoveryApi;
+    this.identityApi = options.identityApi;
+  }
+  async query(query) {
+    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, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
+    });
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return response.json();
+  }
+}
+
+const rootRouteRef = createRouteRef({
+  id: "search"
+});
+const searchPlugin = createPlugin({
+  id: "search",
+  apis: [
+    createApiFactory({
+      api: searchApiRef,
+      deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
+      factory: ({ discoveryApi, identityApi }) => {
+        return new SearchClient({ discoveryApi, identityApi });
+      }
+    })
+  ],
+  routes: {
+    root: rootRouteRef
+  }
+});
+const SearchPage$1 = searchPlugin.provide(
+  createRoutableExtension({
+    name: "SearchPage",
+    component: () => import('./index-64e4c3d4.esm.js').then((m) => m.SearchPage),
+    mountPoint: rootRouteRef
+  })
+);
+const SidebarSearchModal = searchPlugin.provide(
+  createComponentExtension({
+    name: "SidebarSearchModal",
+    component: {
+      lazy: () => import('./index-2cf5b862.esm.js').then(
+        (m) => m.SidebarSearchModal
+      )
+    }
+  })
+);
+const HomePageSearchBar = searchPlugin.provide(
+  createComponentExtension({
+    name: "HomePageSearchBar",
+    component: {
+      lazy: () => import('./index-b2b7c8ed.esm.js').then((m) => m.HomePageSearchBar)
+    }
+  })
+);
+
+const useStyles$3 = makeStyles((theme) => ({
+  container: {
+    borderRadius: 30,
+    display: "flex",
+    height: "2.4em"
+  },
+  input: {
+    flex: 1
+  },
+  paperFullWidth: { height: "calc(100% - 128px)" },
+  dialogActionsContainer: { padding: theme.spacing(1, 3) },
+  viewResultsLink: { verticalAlign: "0.5em" }
+}));
+const Modal = ({ toggleModal }) => {
+  const getSearchLink = useRouteRef(rootRouteRef);
+  const classes = useStyles$3();
+  const { term } = useSearch();
+  const { focusContent } = useContent();
+  const { transitions } = useTheme();
+  const handleResultClick = () => {
+    toggleModal();
+    setTimeout(focusContent, transitions.duration.leavingScreen);
+  };
+  const handleKeyPress = () => {
+    handleResultClick();
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogTitle, null, /* @__PURE__ */ React.createElement(Paper, {
+    className: classes.container
+  }, /* @__PURE__ */ React.createElement(SearchBar, {
+    className: classes.input
+  }))), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Grid, {
+    container: true,
+    direction: "row-reverse",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }, /* @__PURE__ */ React.createElement(Grid, {
+    item: true
+  }, /* @__PURE__ */ React.createElement(Link, {
+    onClick: () => {
+      toggleModal();
+      setTimeout(focusContent, transitions.duration.leavingScreen);
+    },
+    to: `${getSearchLink()}?query=${term}`
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: classes.viewResultsLink
+  }, "View Full Results"), /* @__PURE__ */ React.createElement(LaunchIcon, {
+    color: "primary"
+  })))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(SearchResult, null, ({ results }) => /* @__PURE__ */ React.createElement(List, null, results.map(({ document, highlight }) => /* @__PURE__ */ React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    key: `${document.location}-btn`,
+    onClick: handleResultClick,
+    onKeyPress: handleKeyPress
+  }, /* @__PURE__ */ React.createElement(DefaultResultListItem, {
+    key: document.location,
+    result: document,
+    highlight
+  })))))), /* @__PURE__ */ React.createElement(DialogActions, {
+    className: classes.dialogActionsContainer
+  }, /* @__PURE__ */ React.createElement(Grid, {
+    container: true,
+    direction: "row"
+  }, /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, /* @__PURE__ */ React.createElement(SearchResultPager, null)))));
+};
+const Context = ({ children }) => {
+  const hasParentContext = useSearchContextCheck();
+  if (hasParentContext) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }
+  return /* @__PURE__ */ React.createElement(SearchContextProvider, null, children);
+};
+const SearchModal = ({
+  open = true,
+  hidden,
+  toggleModal,
+  children
+}) => {
+  var _a;
+  const classes = useStyles$3();
+  return /* @__PURE__ */ React.createElement(Dialog, {
+    classes: {
+      paperFullWidth: classes.paperFullWidth
+    },
+    onClose: toggleModal,
+    "aria-labelledby": "search-modal-title",
+    fullWidth: true,
+    maxWidth: "lg",
+    open,
+    hidden
+  }, open && /* @__PURE__ */ React.createElement(Context, null, (_a = children && children({ toggleModal })) != null ? _a : /* @__PURE__ */ React.createElement(Modal, {
+    toggleModal
+  })));
+};
+
+const SearchModalContext = createVersionedContext("search-modal-context");
+const SearchModalProvider = ({
+  children,
+  showInitially
+}) => {
+  const value = useSearchModal(showInitially);
+  const versionedValue = createVersionedValueMap({ 1: value });
+  return /* @__PURE__ */ React.createElement(SearchModalContext.Provider, {
+    value: versionedValue
+  }, children);
+};
+function useSearchModal(initialState = false) {
+  const parentContext = useContext(SearchModalContext);
+  const parentContextValue = parentContext == null ? void 0 : parentContext.atVersion(1);
+  const [state, setState] = useState({
+    hidden: !initialState,
+    open: initialState
+  });
+  const toggleModal = useCallback(
+    () => setState((prevState) => ({
+      open: true,
+      hidden: !prevState.hidden
+    })),
+    []
+  );
+  const setOpen = useCallback(
+    (open) => setState((prevState) => ({
+      open: prevState.open || open,
+      hidden: !open
+    })),
+    []
+  );
+  return (parentContextValue == null ? void 0 : parentContextValue.state) ? parentContextValue : { state, toggleModal, setOpen };
+}
+
+const UrlUpdater = () => {
+  const location = useLocation();
+  const {
+    term,
+    setTerm,
+    types,
+    setTypes,
+    pageCursor,
+    setPageCursor,
+    filters,
+    setFilters
+  } = useSearch();
+  const prevQueryParams = usePrevious(location.search);
+  useEffect(() => {
+    if (location.search === prevQueryParams) {
+      return;
+    }
+    const query = qs.parse(location.search.substring(1), { arrayLimit: 0 }) || {};
+    if (query.filters) {
+      setFilters(query.filters);
+    }
+    if (query.query) {
+      setTerm(query.query);
+    }
+    if (query.pageCursor) {
+      setPageCursor(query.pageCursor);
+    }
+    if (query.types) {
+      setTypes(query.types);
+    }
+  }, [prevQueryParams, location, setTerm, setTypes, setPageCursor, setFilters]);
+  useEffect(() => {
+    const newParams = qs.stringify(
+      {
+        query: term,
+        types,
+        pageCursor,
+        filters
+      },
+      { arrayFormat: "brackets" }
+    );
+    const newUrl = `${window.location.pathname}?${newParams}`;
+    window.history.replaceState(null, document.title, newUrl);
+  }, [term, types, pageCursor, filters]);
+  return null;
+};
+const SearchPage = () => {
+  const outlet = useOutlet();
+  return /* @__PURE__ */ React.createElement(SearchContextProvider, null, /* @__PURE__ */ React.createElement(UrlUpdater, null), outlet);
+};
+
+const useStyles$2 = makeStyles$1((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$2();
+  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.createElement(AllIcon, null)
+    },
+    ...givenTypes
+  ];
+  const selected = types[0] || "";
+  return /* @__PURE__ */ React.createElement(Card, {
+    className: classes.card
+  }, /* @__PURE__ */ React.createElement(CardHeader, {
+    title: name,
+    titleTypographyProps: { variant: "overline" }
+  }), /* @__PURE__ */ React.createElement(CardContent, {
+    className: classes.cardContent
+  }, /* @__PURE__ */ React.createElement(Accordion, {
+    className: classes.accordion,
+    expanded,
+    onChange: toggleExpanded
+  }, /* @__PURE__ */ React.createElement(AccordionSummary, {
+    classes: {
+      root: classes.accordionSummary,
+      content: classes.accordionSummaryContent
+    },
+    expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, {
+      className: classes.icon
+    }),
+    IconButtonProps: { size: "small" }
+  }, expanded ? "Collapse" : definedTypes.filter((t) => t.value === selected)[0].name), /* @__PURE__ */ React.createElement(AccordionDetails, {
+    classes: { root: classes.accordionDetails }
+  }, /* @__PURE__ */ React.createElement(List, {
+    className: classes.list,
+    component: "nav",
+    "aria-label": "filter by type",
+    disablePadding: true,
+    dense: true
+  }, definedTypes.map((type) => /* @__PURE__ */ React.createElement(Fragment, {
+    key: type.value
+  }, /* @__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.createElement(ListItemIcon, null, cloneElement(type.icon, {
+    className: classes.listItemIcon
+  })), /* @__PURE__ */ React.createElement(ListItemText, {
+    primary: type.name
+  })))))))));
+};
+
+const useStyles$1 = makeStyles$1((theme) => ({
+  tabs: {
+    borderBottom: `1px solid ${theme.palette.textVerySubtle}`,
+    padding: theme.spacing(0, 4)
+  },
+  tab: {
+    height: "50px",
+    fontWeight: theme.typography.fontWeightBold,
+    fontSize: theme.typography.pxToRem(13),
+    color: theme.palette.textSubtle,
+    minWidth: "130px"
+  }
+}));
+const SearchTypeTabs = (props) => {
+  const classes = useStyles$1();
+  const { setPageCursor, setTypes, types } = useSearch();
+  const { defaultValue, types: givenTypes } = props;
+  const changeTab = (_, newType) => {
+    setTypes(newType !== "" ? [newType] : []);
+    setPageCursor(void 0);
+  };
+  useEffect(() => {
+    if (defaultValue) {
+      setTypes([defaultValue]);
+    }
+  }, []);
+  const definedTypes = [
+    {
+      value: "",
+      name: "All"
+    },
+    ...givenTypes
+  ];
+  return /* @__PURE__ */ React.createElement(Tabs, {
+    className: classes.tabs,
+    indicatorColor: "primary",
+    value: types.length === 0 ? "" : types[0],
+    onChange: changeTab
+  }, definedTypes.map((type, idx) => /* @__PURE__ */ React.createElement(Tab, {
+    key: idx,
+    className: classes.tab,
+    disableRipple: true,
+    label: type.name,
+    value: type.value
+  })));
+};
+
+const useStyles = makeStyles$1((theme) => ({
+  label: {
+    textTransform: "capitalize"
+  },
+  chips: {
+    display: "flex",
+    flexWrap: "wrap",
+    marginTop: theme.spacing(1)
+  },
+  chip: {
+    margin: 2
+  }
+}));
+const SearchType = (props) => {
+  const { className, defaultValue, name, values = [] } = props;
+  const classes = useStyles();
+  const { types, setTypes } = useSearch();
+  useEffectOnce(() => {
+    if (!types.length) {
+      if (defaultValue && Array.isArray(defaultValue)) {
+        setTypes(defaultValue);
+      } else if (defaultValue) {
+        setTypes([defaultValue]);
+      }
+    }
+  });
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setTypes(value);
+  };
+  return /* @__PURE__ */ React.createElement(FormControl, {
+    className,
+    variant: "filled",
+    fullWidth: true,
+    "data-testid": "search-typefilter-next"
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
+    className: classes.label,
+    margin: "dense"
+  }, name), /* @__PURE__ */ React.createElement(Select, {
+    multiple: true,
+    variant: "outlined",
+    value: types,
+    onChange: handleChange,
+    placeholder: "All Results",
+    renderValue: (selected) => /* @__PURE__ */ React.createElement("div", {
+      className: classes.chips
+    }, selected.map((value) => /* @__PURE__ */ React.createElement(Chip, {
+      key: value,
+      label: value,
+      className: classes.chip,
+      size: "small"
+    })))
+  }, values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, {
+    key: value,
+    value
+  }, /* @__PURE__ */ React.createElement(Checkbox, {
+    checked: types.indexOf(value) > -1
+  }), /* @__PURE__ */ React.createElement(ListItemText, {
+    primary: value
+  })))));
+};
+SearchType.Accordion = (props) => {
+  return /* @__PURE__ */ React.createElement(SearchTypeAccordion, {
+    ...props
+  });
+};
+SearchType.Tabs = (props) => {
+  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}`);
+    },
+    [focusContent, navigate, searchRoute]
+  );
+  return /* @__PURE__ */ React.createElement(SidebarSearchField, {
+    icon: props.icon,
+    onSearch: handleSearch,
+    to: "/search"
+  });
+};
+
+export { HomePageSearchBar as H, SearchPage as S, SearchModalProvider as a, SearchModal as b, SearchType as c, SidebarSearch as d, SearchPage$1 as e, SidebarSearchModal as f, rootRouteRef as r, searchPlugin as s, useSearchModal as u };
+//# sourceMappingURL=index-7063ba2d.esm.js.map