@backstage/plugin-search 0.4.15 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @backstage/plugin-search
 
+## 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
+
+- a125278b81: Refactor out the deprecated path and icon from RouteRefs
+- 704b267e1c: Smaller UX improvements to search components such as optional autoFocus prop to SearchBar components, decreased debounce value and closing modal on link click of SearchModal, terminology updates of SearchResultPager.
+- Updated dependencies
+  - @backstage/catalog-model@0.9.7
+  - @backstage/plugin-catalog-react@0.6.4
+  - @backstage/core-components@0.7.4
+  - @backstage/core-plugin-api@0.2.0
+
+## 0.4.17
+
+### Patch Changes
+
+- 5dcea2586c: Added `SearchModal` component.
+
+  Now you can import `SearchModal` in your apps:
+
+  ```js
+  import { SearchModal } from '@backstage/plugin-search';
+  ```
+
+  You can also use the `SidebarSearchModal` component to integrate it into the sidebar of your sample apps:
+
+  ```js
+  import { SidebarSearchModal } from '@backstage/plugin-search';
+  ```
+
+- Updated dependencies
+  - @backstage/core-components@0.7.3
+  - @backstage/theme@0.2.13
+  - @backstage/core-plugin-api@0.1.13
+  - @backstage/plugin-catalog-react@0.6.3
+
+## 0.4.16
+
+### Patch Changes
+
+- 10615525f3: Switch to use the json and observable types from `@backstage/types`
+- Updated dependencies
+  - @backstage/config@0.1.11
+  - @backstage/theme@0.2.12
+  - @backstage/errors@0.1.4
+  - @backstage/core-components@0.7.2
+  - @backstage/plugin-catalog-react@0.6.2
+  - @backstage/catalog-model@0.9.6
+  - @backstage/search-common@0.2.1
+  - @backstage/core-plugin-api@0.1.12
+
 ## 0.4.15
 
 ### Patch Changes

package/dist/esm/{index-6f14e751.esm.js → index-09bfa46d.esm.js}

@@ -1,4 +1,4 @@
-export { a as SearchBar, b as SearchBarBase } from './index-9c0d67e6.esm.js';
+export { S as SearchPage } from './index-8e7d7ce9.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
@@ -9,14 +9,15 @@ import '@material-ui/icons/FilterList';
 import 'react-use';
 import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
-import 'react-router';
 import '@material-ui/core/styles';
+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/ArrowBackIos';
-import '@material-ui/icons/ArrowForwardIos';
 import 'react-router-dom';
-//# sourceMappingURL=index-6f14e751.esm.js.map
+//# sourceMappingURL=index-09bfa46d.esm.js.map

package/dist/esm/index-09bfa46d.esm.js.map

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

package/dist/esm/index-1f69649c.esm.js

@@ -0,0 +1,23 @@
+export { a as SearchBar, b as SearchBarBase } from './index-8e7d7ce9.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 'react-use';
+import '@material-ui/icons/Search';
+import '@material-ui/icons/Clear';
+import '@material-ui/core/styles';
+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 'react-router-dom';
+//# sourceMappingURL=index-1f69649c.esm.js.map

package/dist/esm/index-1f69649c.esm.js.map

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

package/dist/esm/{index-4ef7a5c8.esm.js → index-49a2f5d1.esm.js}

@@ -1,4 +1,4 @@
-export { S as SearchPage } from './index-9c0d67e6.esm.js';
+export { c as SearchResult } from './index-8e7d7ce9.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
@@ -9,14 +9,15 @@ import '@material-ui/icons/FilterList';
 import 'react-use';
 import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
-import 'react-router';
 import '@material-ui/core/styles';
+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/ArrowBackIos';
-import '@material-ui/icons/ArrowForwardIos';
 import 'react-router-dom';
-//# sourceMappingURL=index-4ef7a5c8.esm.js.map
+//# sourceMappingURL=index-49a2f5d1.esm.js.map

package/dist/esm/index-49a2f5d1.esm.js.map

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

package/dist/esm/{index-3eebaa65.esm.js → index-58cc0fcf.esm.js}

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { r as rootRouteRef, b as SearchBarBase } from './index-9c0d67e6.esm.js';
+import { r as rootRouteRef, b as SearchBarBase } from './index-8e7d7ce9.esm.js';
 import qs from 'qs';
 import { useNavigate } from 'react-router-dom';
 import { useRouteRef } from '@backstage/core-plugin-api';
@@ -11,14 +11,15 @@ import '@material-ui/icons/FilterList';
 import 'react-use';
 import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
+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/ArrowBackIos';
-import '@material-ui/icons/ArrowForwardIos';
 
 const useNavigateToQuery = () => {
   const searchRoute = useRouteRef(rootRouteRef);
@@ -37,16 +38,16 @@ const useStyles = makeStyles({
   }
 });
 const HomePageSearchBar = ({placeholder}) => {
-  const [query, setQuery] = React.useState("");
+  const [query, setQuery] = React__default.useState("");
   const handleSearch = useNavigateToQuery();
   const classes = useStyles();
   const handleSubmit = () => {
     handleSearch({query});
   };
-  const handleChange = React.useCallback((value) => {
+  const handleChange = React__default.useCallback((value) => {
     setQuery(value);
   }, [setQuery]);
-  return /* @__PURE__ */ React.createElement(SearchBarBase, {
+  return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
     onSubmit: handleSubmit,
     onChange: handleChange,
     value: query,
@@ -56,4 +57,4 @@ const HomePageSearchBar = ({placeholder}) => {
 };
 
 export { HomePageSearchBar };
-//# sourceMappingURL=index-3eebaa65.esm.js.map
+//# sourceMappingURL=index-58cc0fcf.esm.js.map

package/dist/esm/{index-3eebaa65.esm.js.map → index-58cc0fcf.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-3eebaa65.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 from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { SearchBarBase } 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\ntype Props = {\n  placeholder?: string;\n};\n\nexport const HomePageSearchBar = ({ placeholder }: Props) => {\n  const [query, setQuery] = React.useState('');\n  const handleSearch = useNavigateToQuery();\n  const classes = useStyles();\n\n  const handleSubmit = () => {\n    handleSearch({ query });\n  };\n\n  const handleChange = React.useCallback(\n    value => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <SearchBarBase\n      onSubmit={handleSubmit}\n      onChange={handleChange}\n      value={query}\n      className={classes.searchBar}\n      placeholder={placeholder}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAsBa,qBAAqB,MAAM;AACtC,QAAM,cAAc,YAAY;AAChC,QAAM,WAAW;AACjB,SAAO,YACL,CAAC,CAAE,WAAqC;AACtC,UAAM,cAAc,GAAG,UAAU,CAAE,QAAS,CAAE,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;MAQD,oBAAoB,CAAC,CAAE,iBAAyB;AAC3D,QAAM,CAAC,OAAO,YAAY,MAAM,SAAS;AACzC,QAAM,eAAe;AACrB,QAAM,UAAU;AAEhB,QAAM,eAAe,MAAM;AACzB,iBAAa,CAAE;AAAA;AAGjB,QAAM,eAAe,MAAM,YACzB,WAAS;AACP,aAAS;AAAA,KAEX,CAAC;AAGH,6CACG,eAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW,QAAQ;AAAA,IACnB;AAAA;AAAA;;;;"}
+{"version":3,"file":"index-58cc0fcf.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 from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { SearchBarBase } 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\ntype Props = {\n  placeholder?: string;\n};\n\nexport const HomePageSearchBar = ({ placeholder }: Props) => {\n  const [query, setQuery] = React.useState('');\n  const handleSearch = useNavigateToQuery();\n  const classes = useStyles();\n\n  const handleSubmit = () => {\n    handleSearch({ query });\n  };\n\n  const handleChange = React.useCallback(\n    value => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <SearchBarBase\n      onSubmit={handleSubmit}\n      onChange={handleChange}\n      value={query}\n      className={classes.searchBar}\n      placeholder={placeholder}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAsBa,qBAAqB,MAAM;AACtC,QAAM,cAAc,YAAY;AAChC,QAAM,WAAW;AACjB,SAAO,YACL,CAAC,CAAE,WAAqC;AACtC,UAAM,cAAc,GAAG,UAAU,CAAE,QAAS,CAAE,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;MAQD,oBAAoB,CAAC,CAAE,iBAAyB;AAC3D,QAAM,CAAC,OAAO,YAAYA,eAAM,SAAS;AACzC,QAAM,eAAe;AACrB,QAAM,UAAU;AAEhB,QAAM,eAAe,MAAM;AACzB,iBAAa,CAAE;AAAA;AAGjB,QAAM,eAAeA,eAAM,YACzB,WAAS;AACP,aAAS;AAAA,KAEX,CAAC;AAGH,sDACG,eAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW,QAAQ;AAAA,IACnB;AAAA;AAAA;;;;"}

package/dist/esm/index-859ff534.esm.js

@@ -0,0 +1,38 @@
+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-8e7d7ce9.esm.js';
+import '@backstage/core-plugin-api';
+import '@backstage/errors';
+import 'qs';
+import '@material-ui/core';
+import '@material-ui/icons/FilterList';
+import 'react-use';
+import '@material-ui/icons/Clear';
+import '@material-ui/core/styles';
+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 'react-router-dom';
+
+const SidebarSearchModal = () => {
+  const {open, toggleModal} = useSearch();
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(SidebarItem, {
+    className: "search-icon",
+    icon: SearchIcon,
+    text: "Search",
+    onClick: toggleModal
+  }), /* @__PURE__ */ React__default.createElement(SearchModal, {
+    open,
+    toggleModal
+  }));
+};
+
+export { SidebarSearchModal };
+//# sourceMappingURL=index-859ff534.esm.js.map

package/dist/esm/index-859ff534.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-859ff534.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 { SearchModal } from '../SearchModal';\nimport { useSearch } from '../SearchContext';\n\nexport const SidebarSearchModal = () => {\n  const { open, toggleModal } = useSearch();\n\n  return (\n    <>\n      <SidebarItem\n        className=\"search-icon\"\n        icon={SearchIcon}\n        text=\"Search\"\n        onClick={toggleModal}\n      />\n      <SearchModal open={open} toggleModal={toggleModal} />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAqBa,qBAAqB,MAAM;AACtC,QAAM,CAAE,MAAM,eAAgB;AAE9B,kIAEK,aAAD;AAAA,IACE,WAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAS;AAAA,mDAEV,aAAD;AAAA,IAAa;AAAA,IAAY;AAAA;AAAA;;;;"}