@backstage/plugin-search 0.4.18 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @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
+
+- 3d98955c8a: Add Optional Props to Override Icon for SidebarSearch and SidebarSearchModal Component
+- 49a696d720: Standardizes the component used as a search box in the search modal and in the composable home page.
+
+  After these changes, all search boxes exported by the search plugin are based on the `<SearchBarBase />` component, and this one is based on the `<InputBase />` component of the Material UI. This means that when you use SearchBarBase or one of its derived components (like `SearchBar` and `HomePageSearchBar`) you can pass all properties accepted by InputBase that have not been replaced by the props type of those components.
+
+  For example:
+
+  ```jsx
+  <SearchInputBase color="secondary" debouceTime={500} />
+  ```
+
+  The `color` property is inherited from `InputBaseProps` type and `debouceTime` defined by `SearchBarBaseProps`.
+
+- 7a4bd2ceac: Prefer using `Link` from `@backstage/core-components` rather than material-UI.
+- Updated dependencies
+  - @backstage/core-plugin-api@0.4.0
+  - @backstage/plugin-catalog-react@0.6.8
+  - @backstage/core-components@0.8.2
+
+## 0.5.1
+
+### Patch Changes
+
+- cd450844f6: Moved React dependencies to `peerDependencies` and allow both React v16 and v17 to be used.
+- 382e3a94b3: Export SearchApi interface from plugin
+- Updated dependencies
+  - @backstage/core-components@0.8.0
+  - @backstage/core-plugin-api@0.3.0
+  - @backstage/plugin-catalog-react@0.6.5
+
+## 0.5.0
+
+### Minor Changes
+
+- c5b6045f36: Search Modal now relies on the Search Context to access state and state setter. If you use the SidebarSearchModal as described in the [getting started documentation](https://backstage.io/docs/features/search/getting-started#using-the-search-modal), make sure to update your code with the SearchContextProvider.
+
+  ```diff
+  export const Root = ({ children }: PropsWithChildren<{}>) => (
+    <SidebarPage>
+      <Sidebar>
+        <SidebarLogo />
+  -     <SidebarSearchModal />
+  +     <SearchContextProvider>
+  +       <SidebarSearchModal />
+  +     </SearchContextProvider>
+        <SidebarDivider />
+      ...
+  ```
+
+### Patch Changes
+
+- f06ecd09a7: Add optional icon and secondaryAction properties for DefaultResultListItem component
+- c5941d5c30: Add a new optional clearButton property to the SearchBar component. The default value for this new property is true.
+- Updated dependencies
+  - @backstage/core-components@0.7.6
+  - @backstage/theme@0.2.14
+  - @backstage/core-plugin-api@0.2.2
+
 ## 0.4.18
 
 ### Patch Changes

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

@@ -1,15 +1,15 @@
-export { S as SearchPage } from './index-cdccd881.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-77205085.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-b9474e70.esm.js → index-384f7bcf.esm.js}

@@ -1,16 +1,16 @@
-import React__default, { useCallback } from 'react';
+import React__default, { useCallback, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { r as rootRouteRef, b as SearchBarBase } from './index-cdccd881.esm.js';
+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/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 '@backstage/core-components';
 import '@material-ui/icons/ArrowBackIos';
 import '@material-ui/icons/ArrowForwardIos';
 import '@material-ui/core/utils';
@@ -20,12 +20,14 @@ 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});
+  return useCallback(({ query }) => {
+    const queryString = qs.stringify({ query }, { addQueryPrefix: true });
     navigate(`${searchRoute()}${queryString}`);
   }, [navigate, searchRoute]);
 };
@@ -37,24 +39,28 @@ const useStyles = makeStyles({
     fontSize: "1.5em"
   }
 });
-const HomePageSearchBar = ({placeholder}) => {
-  const [query, setQuery] = React__default.useState("");
-  const handleSearch = useNavigateToQuery();
+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});
+    handleSearch({ query });
   };
-  const handleChange = React__default.useCallback((value) => {
+  const handleChange = useCallback((value) => {
     setQuery(value);
   }, [setQuery]);
   return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
+    className,
+    value: query,
     onSubmit: handleSubmit,
     onChange: handleChange,
-    value: query,
-    className: classes.searchBar,
-    placeholder
+    ...props
   });
 };
 
 export { HomePageSearchBar };
-//# sourceMappingURL=index-b9474e70.esm.js.map
+//# 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-766e727c.esm.js → index-c6d67b32.esm.js}

@@ -1,15 +1,15 @@
-export { c as SearchResult } from './index-cdccd881.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-766e727c.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-01b40466.esm.js → index-e62dadc4.esm.js}

@@ -1,12 +1,12 @@
-import React__default, { useState } from 'react';
+import React__default from 'react';
 import SearchIcon from '@material-ui/icons/Search';
-import { d as SearchModal } from './index-cdccd881.esm.js';
 import { SidebarItem } from '@backstage/core-components';
+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,14 +19,16 @@ 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 = () => {
-  const [open, setOpen] = useState(false);
-  const toggleModal = () => setOpen((prevState) => !prevState);
+const SidebarSearchModal = (props) => {
+  const { open, toggleModal } = useSearch();
+  const Icon = props.icon ? props.icon : SearchIcon;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(SidebarItem, {
     className: "search-icon",
-    icon: SearchIcon,
+    icon: Icon,
     text: "Search",
     onClick: toggleModal
   }), /* @__PURE__ */ React__default.createElement(SearchModal, {
@@ -36,4 +38,4 @@ const SidebarSearchModal = () => {
 };
 
 export { SidebarSearchModal };
-//# sourceMappingURL=index-01b40466.esm.js.map
+//# sourceMappingURL=index-e62dadc4.esm.js.map

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

@@ -0,0 +1 @@
+{"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;;;;"}