@backstage/plugin-search 1.4.16-next.2 → 1.4.16

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @backstage/plugin-search
 
+## 1.4.16
+
+### Patch Changes
+
+- fec8b57: Updated exports to use the new type parameters for extensions and extension blueprints.
+- eca03bd: Added ability to customize the search items within the SidebarSearchModal
+- 836127c: Updated dependency `@testing-library/react` to `^16.0.0`.
+- Updated dependencies
+  - @backstage/core-components@0.15.0
+  - @backstage/plugin-catalog-react@1.13.0
+  - @backstage/frontend-plugin-api@0.8.0
+  - @backstage/core-compat-api@0.3.0
+  - @backstage/plugin-search-react@1.8.0
+  - @backstage/core-plugin-api@1.9.4
+  - @backstage/version-bridge@1.0.9
+  - @backstage/errors@1.2.4
+  - @backstage/types@1.1.1
+  - @backstage/plugin-search-common@1.2.14
+
 ## 1.4.16-next.2
 
 ### Patch Changes

package/README.md

@@ -30,7 +30,7 @@ This search plugin is primarily responsible for the following:
 
 - Providing a `<SearchPage />` routable extension.
 - Exposing various search-related components (like `<SearchModal />`,
-  `<SidebarSearch />`, etc), which can be composed by a Backstage App or by
+  `<SidebarSearch />`, etc.), which can be composed by a Backstage App or by
   other Backstage Plugins to power search experiences of all kinds.
 
 Don't forget, a lot of functionality is available in web libraries and backend plugins:

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search__alpha",
-  "version": "1.4.16-next.2",
+  "version": "1.4.16",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/components/SearchModal/SearchModal.esm.js

@@ -40,7 +40,10 @@ const useStyles = makeStyles((theme) => ({
   dialogActionsContainer: { padding: theme.spacing(1, 3) },
   viewResultsLink: { verticalAlign: "0.5em" }
 }));
-const Modal = ({ toggleModal }) => {
+const Modal = ({
+  toggleModal,
+  resultItemComponents
+}) => {
   const classes = useStyles();
   const navigate = useNavigate();
   const { transitions } = useTheme();
@@ -89,11 +92,18 @@ const Modal = ({ toggleModal }) => {
     {
       onClick: handleSearchResultClick,
       onKeyDown: handleSearchResultClick
-    }
+    },
+    resultItemComponents
   )), /* @__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 SearchModal = (props) => {
-  const { open = true, hidden, toggleModal, children } = props;
+  const {
+    open = true,
+    hidden,
+    toggleModal,
+    children,
+    resultItemComponents
+  } = props;
   const classes = useStyles();
   return /* @__PURE__ */ React.createElement(
     Dialog,
@@ -109,7 +119,16 @@ const SearchModal = (props) => {
       open,
       hidden
     },
-    open && /* @__PURE__ */ React.createElement(SearchContextProvider, { inheritParentContextIfAvailable: true }, (children && children({ toggleModal })) ?? /* @__PURE__ */ React.createElement(Modal, { toggleModal }))
+    open && /* @__PURE__ */ React.createElement(SearchContextProvider, { inheritParentContextIfAvailable: true }, (children && children({
+      toggleModal,
+      resultItemComponents: resultItemComponents || []
+    })) ?? /* @__PURE__ */ React.createElement(
+      Modal,
+      {
+        toggleModal,
+        resultItemComponents
+      }
+    ))
   );
 };
 

package/dist/components/SearchModal/SearchModal.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchModal.esm.js","sources":["../../../src/components/SearchModal/SearchModal.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 { useContent } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  SearchBar,\n  SearchContextProvider,\n  SearchResult,\n  SearchResultPager,\n} from '@backstage/plugin-search-react';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport { useTheme } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ArrowForwardIcon from '@material-ui/icons/ArrowForward';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React, { useCallback, useEffect, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { rootRouteRef } from '../../plugin';\n\n/**\n * @public\n */\nexport interface SearchModalChildrenProps {\n  /**\n   * A function that should be invoked when navigating away from the modal.\n   */\n  toggleModal: () => void;\n}\n\n/**\n * @public\n */\nexport interface SearchModalProps {\n  /**\n   * If true, it renders the modal.\n   */\n  open?: boolean;\n  /**\n   * This is supposed to be used together with the open prop.\n   * If `hidden` is true, it hides the modal.\n   * If `open` is false, the value of `hidden` has no effect on the modal.\n   * Use `open` for controlling whether the modal should be rendered or not.\n   */\n  hidden?: boolean;\n  /**\n   * a function invoked when a search item is pressed or when the dialog\n   * should be closed.\n   */\n  toggleModal: () => void;\n  /**\n   * A function that returns custom content to render in the search modal in\n   * place of the default.\n   */\n  children?: (props: SearchModalChildrenProps) => JSX.Element;\n}\n\nconst useStyles = makeStyles(theme => ({\n  dialogTitle: {\n    gap: theme.spacing(1),\n    display: 'grid',\n    alignItems: 'center',\n    gridTemplateColumns: '1fr auto',\n    '&> button': {\n      marginTop: theme.spacing(1),\n    },\n  },\n  input: {\n    flex: 1,\n  },\n  button: {\n    '&:hover': {\n      background: 'none',\n    },\n  },\n  // Reduces default height of the modal, keeping a gap of 128px between the top and bottom of the page.\n  paperFullWidth: { height: 'calc(100% - 128px)' },\n  dialogActionsContainer: { padding: theme.spacing(1, 3) },\n  viewResultsLink: { verticalAlign: '0.5em' },\n}));\n\nexport const Modal = ({ toggleModal }: SearchModalChildrenProps) => {\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const { transitions } = useTheme();\n  const { focusContent } = useContent();\n\n  const searchRootRoute = useRouteRef(rootRouteRef)();\n  const searchBarRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    searchBarRef?.current?.focus();\n  });\n\n  const handleSearchResultClick = useCallback(() => {\n    setTimeout(focusContent, transitions.duration.leavingScreen);\n  }, [focusContent, transitions]);\n\n  // This handler is called when \"enter\" is pressed\n  const handleSearchBarSubmit = useCallback(() => {\n    // Using ref to get the current field value without waiting for a query debounce\n    const query = searchBarRef.current?.value ?? '';\n    navigate(`${searchRootRoute}?query=${query}`);\n    handleSearchResultClick();\n  }, [navigate, handleSearchResultClick, searchRootRoute]);\n\n  return (\n    <>\n      <DialogTitle>\n        <Box className={classes.dialogTitle}>\n          <SearchBar\n            className={classes.input}\n            inputProps={{ ref: searchBarRef }}\n            onSubmit={handleSearchBarSubmit}\n          />\n\n          <IconButton aria-label=\"close\" onClick={toggleModal}>\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent>\n        <Grid\n          container\n          direction=\"row-reverse\"\n          justifyContent=\"flex-start\"\n          alignItems=\"center\"\n        >\n          <Grid item>\n            <Button\n              className={classes.button}\n              color=\"primary\"\n              endIcon={<ArrowForwardIcon />}\n              onClick={handleSearchBarSubmit}\n              disableRipple\n            >\n              View Full Results\n            </Button>\n          </Grid>\n        </Grid>\n        <Divider />\n        <SearchResult\n          onClick={handleSearchResultClick}\n          onKeyDown={handleSearchResultClick}\n        />\n      </DialogContent>\n      <DialogActions className={classes.dialogActionsContainer}>\n        <Grid container direction=\"row\">\n          <Grid item xs={12}>\n            <SearchResultPager />\n          </Grid>\n        </Grid>\n      </DialogActions>\n    </>\n  );\n};\n\n/**\n * @public\n */\nexport const SearchModal = (props: SearchModalProps) => {\n  const { open = true, hidden, toggleModal, children } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Dialog\n      classes={{\n        paperFullWidth: classes.paperFullWidth,\n      }}\n      onClose={toggleModal}\n      aria-label=\"Search Modal\"\n      aria-modal=\"true\"\n      fullWidth\n      maxWidth=\"lg\"\n      open={open}\n      hidden={hidden}\n    >\n      {open && (\n        <SearchContextProvider inheritParentContextIfAvailable>\n          {(children && children({ toggleModal })) ?? (\n            <Modal toggleModal={toggleModal} />\n          )}\n        </SearchContextProvider>\n      )}\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchModal.esm.js","sources":["../../../src/components/SearchModal/SearchModal.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 { useContent } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  SearchBar,\n  SearchContextProvider,\n  SearchResult,\n  SearchResultPager,\n} from '@backstage/plugin-search-react';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport { useTheme } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ArrowForwardIcon from '@material-ui/icons/ArrowForward';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React, { ReactNode, useCallback, useEffect, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { rootRouteRef } from '../../plugin';\nimport { SearchResultSet } from '@backstage/plugin-search-common';\n\n/**\n * @public\n */\nexport interface SearchModalChildrenProps {\n  /**\n   * A function that should be invoked when navigating away from the modal.\n   */\n  toggleModal: () => void;\n\n  /**\n   * Ability to provide custom components to render the result items\n   */\n  resultItemComponents?:\n    | ReactNode\n    | ((resultSet: SearchResultSet) => JSX.Element);\n}\n\n/**\n * @public\n */\nexport interface SearchModalProps {\n  /**\n   * If true, it renders the modal.\n   */\n  open?: boolean;\n  /**\n   * This is supposed to be used together with the open prop.\n   * If `hidden` is true, it hides the modal.\n   * If `open` is false, the value of `hidden` has no effect on the modal.\n   * Use `open` for controlling whether the modal should be rendered or not.\n   */\n  hidden?: boolean;\n  /**\n   * a function invoked when a search item is pressed or when the dialog\n   * should be closed.\n   */\n  toggleModal: () => void;\n  /**\n   * A function that returns custom content to render in the search modal in\n   * place of the default.\n   */\n  children?: (props: SearchModalChildrenProps) => JSX.Element;\n\n  /**\n   * Optional ability to pass in result item component renderers.\n   */\n  resultItemComponents?: SearchModalChildrenProps['resultItemComponents'];\n}\n\nconst useStyles = makeStyles(theme => ({\n  dialogTitle: {\n    gap: theme.spacing(1),\n    display: 'grid',\n    alignItems: 'center',\n    gridTemplateColumns: '1fr auto',\n    '&> button': {\n      marginTop: theme.spacing(1),\n    },\n  },\n  input: {\n    flex: 1,\n  },\n  button: {\n    '&:hover': {\n      background: 'none',\n    },\n  },\n  // Reduces default height of the modal, keeping a gap of 128px between the top and bottom of the page.\n  paperFullWidth: { height: 'calc(100% - 128px)' },\n  dialogActionsContainer: { padding: theme.spacing(1, 3) },\n  viewResultsLink: { verticalAlign: '0.5em' },\n}));\n\nexport const Modal = ({\n  toggleModal,\n  resultItemComponents,\n}: SearchModalChildrenProps) => {\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const { transitions } = useTheme();\n  const { focusContent } = useContent();\n\n  const searchRootRoute = useRouteRef(rootRouteRef)();\n  const searchBarRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    searchBarRef?.current?.focus();\n  });\n\n  const handleSearchResultClick = useCallback(() => {\n    setTimeout(focusContent, transitions.duration.leavingScreen);\n  }, [focusContent, transitions]);\n\n  // This handler is called when \"enter\" is pressed\n  const handleSearchBarSubmit = useCallback(() => {\n    // Using ref to get the current field value without waiting for a query debounce\n    const query = searchBarRef.current?.value ?? '';\n    navigate(`${searchRootRoute}?query=${query}`);\n    handleSearchResultClick();\n  }, [navigate, handleSearchResultClick, searchRootRoute]);\n\n  return (\n    <>\n      <DialogTitle>\n        <Box className={classes.dialogTitle}>\n          <SearchBar\n            className={classes.input}\n            inputProps={{ ref: searchBarRef }}\n            onSubmit={handleSearchBarSubmit}\n          />\n\n          <IconButton aria-label=\"close\" onClick={toggleModal}>\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent>\n        <Grid\n          container\n          direction=\"row-reverse\"\n          justifyContent=\"flex-start\"\n          alignItems=\"center\"\n        >\n          <Grid item>\n            <Button\n              className={classes.button}\n              color=\"primary\"\n              endIcon={<ArrowForwardIcon />}\n              onClick={handleSearchBarSubmit}\n              disableRipple\n            >\n              View Full Results\n            </Button>\n          </Grid>\n        </Grid>\n        <Divider />\n        <SearchResult\n          onClick={handleSearchResultClick}\n          onKeyDown={handleSearchResultClick}\n        >\n          {resultItemComponents}\n        </SearchResult>\n      </DialogContent>\n      <DialogActions className={classes.dialogActionsContainer}>\n        <Grid container direction=\"row\">\n          <Grid item xs={12}>\n            <SearchResultPager />\n          </Grid>\n        </Grid>\n      </DialogActions>\n    </>\n  );\n};\n\n/**\n * @public\n */\nexport const SearchModal = (props: SearchModalProps) => {\n  const {\n    open = true,\n    hidden,\n    toggleModal,\n    children,\n    resultItemComponents,\n  } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Dialog\n      classes={{\n        paperFullWidth: classes.paperFullWidth,\n      }}\n      onClose={toggleModal}\n      aria-label=\"Search Modal\"\n      aria-modal=\"true\"\n      fullWidth\n      maxWidth=\"lg\"\n      open={open}\n      hidden={hidden}\n    >\n      {open && (\n        <SearchContextProvider inheritParentContextIfAvailable>\n          {(children &&\n            children({\n              toggleModal,\n              resultItemComponents: resultItemComponents || [],\n            })) ?? (\n            <Modal\n              toggleModal={toggleModal}\n              resultItemComponents={resultItemComponents}\n            />\n          )}\n        </SearchContextProvider>\n      )}\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SearchType/SearchType.Tabs.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchType.Tabs.esm.js","sources":["../../../src/components/SearchType/SearchType.Tabs.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 */\n\nimport React, { useEffect } from 'react';\nimport { useSearch } from '@backstage/plugin-search-react';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(theme => ({\n  tabs: {\n    borderBottom: `1px solid ${theme.palette.textVerySubtle}`,\n  },\n  tab: {\n    height: '50px',\n    fontWeight: theme.typography.fontWeightBold,\n    fontSize: theme.typography.pxToRem(13),\n    color: theme.palette.text.primary,\n    minWidth: '130px',\n  },\n}));\n\n/**\n * @public\n */\nexport type SearchTypeTabsProps = {\n  types: Array<{\n    value: string;\n    name: string;\n  }>;\n  defaultValue?: string;\n};\n\nexport const SearchTypeTabs = (props: SearchTypeTabsProps) => {\n  const classes = useStyles();\n  const { setPageCursor, setTypes, types } = useSearch();\n  const { defaultValue, types: givenTypes } = props;\n\n  const changeTab = (_: React.ChangeEvent<{}>, newType: string) => {\n    setTypes(newType !== '' ? [newType] : []);\n    setPageCursor(undefined);\n  };\n\n  // Handle any provided defaultValue\n  useEffect(() => {\n    if (defaultValue) {\n      setTypes([defaultValue]);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const definedTypes = [\n    {\n      value: '',\n      name: 'All',\n    },\n    ...givenTypes,\n  ];\n\n  return (\n    <Tabs\n      aria-label=\"List of search types tabs\"\n      className={classes.tabs}\n      indicatorColor=\"primary\"\n      value={types.length === 0 ? '' : types[0]}\n      onChange={changeTab}\n    >\n      {definedTypes.map((type, idx) => (\n        <Tab\n          key={idx}\n          className={classes.tab}\n          label={type.name}\n          value={type.value}\n        />\n      ))}\n    </Tabs>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;AAAA,GACzD;AAAA,EACA,GAAK,EAAA;AAAA,IACH,MAAQ,EAAA,MAAA;AAAA,IACR,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,IAC7B,QAAU,EAAA,KAAA,CAAM,UAAW,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,IACrC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,QAAU,EAAA,OAAA;AAAA,GACZ;AACF,CAAE,CAAA,CAAA,CAAA;AAaW,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,KAAA,KAAU,SAAU,EAAA,CAAA;AACrD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,UAAA,EAAe,GAAA,KAAA,CAAA;AAE5C,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,EAA0B,OAAoB,KAAA;AAC/D,IAAA,QAAA,CAAS,YAAY,EAAK,GAAA,CAAC,OAAO,CAAA,GAAI,EAAE,CAAA,CAAA;AACxC,IAAA,aAAA,CAAc,KAAS,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAS,QAAA,CAAA,CAAC,YAAY,CAAC,CAAA,CAAA;AAAA,KACzB;AAAA,GAEF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,KACR;AAAA,IACA,GAAG,UAAA;AAAA,GACL,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,2BAAA;AAAA,MACX,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,cAAe,EAAA,SAAA;AAAA,MACf,OAAO,KAAM,CAAA,MAAA,KAAW,CAAI,GAAA,EAAA,GAAK,MAAM,CAAC,CAAA;AAAA,MACxC,QAAU,EAAA,SAAA;AAAA,KAAA;AAAA,IAET,YAAa,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,GACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,GAAA;AAAA,QACL,WAAW,OAAQ,CAAA,GAAA;AAAA,QACnB,OAAO,IAAK,CAAA,IAAA;AAAA,QACZ,OAAO,IAAK,CAAA,KAAA;AAAA,OAAA;AAAA,KAEf,CAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchType.Tabs.esm.js","sources":["../../../src/components/SearchType/SearchType.Tabs.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 */\n\nimport React, { useEffect } from 'react';\nimport { useSearch } from '@backstage/plugin-search-react';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Theme } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  tabs: {\n    borderBottom: `1px solid ${theme.palette.textVerySubtle}`,\n  },\n  tab: {\n    height: '50px',\n    fontWeight: theme.typography.fontWeightBold,\n    fontSize: theme.typography.pxToRem(13),\n    color: theme.palette.text.primary,\n    minWidth: '130px',\n  },\n}));\n\n/**\n * @public\n */\nexport type SearchTypeTabsProps = {\n  types: Array<{\n    value: string;\n    name: string;\n  }>;\n  defaultValue?: string;\n};\n\nexport const SearchTypeTabs = (props: SearchTypeTabsProps) => {\n  const classes = useStyles();\n  const { setPageCursor, setTypes, types } = useSearch();\n  const { defaultValue, types: givenTypes } = props;\n\n  const changeTab = (_: React.ChangeEvent<{}>, newType: string) => {\n    setTypes(newType !== '' ? [newType] : []);\n    setPageCursor(undefined);\n  };\n\n  // Handle any provided defaultValue\n  useEffect(() => {\n    if (defaultValue) {\n      setTypes([defaultValue]);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const definedTypes = [\n    {\n      value: '',\n      name: 'All',\n    },\n    ...givenTypes,\n  ];\n\n  return (\n    <Tabs\n      aria-label=\"List of search types tabs\"\n      className={classes.tabs}\n      indicatorColor=\"primary\"\n      value={types.length === 0 ? '' : types[0]}\n      onChange={changeTab}\n    >\n      {definedTypes.map((type, idx) => (\n        <Tab\n          key={idx}\n          className={classes.tab}\n          label={type.name}\n          value={type.value}\n        />\n      ))}\n    </Tabs>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,SAAA,GAAY,UAAW,CAAA,CAAC,KAAkB,MAAA;AAAA,EAC9C,IAAM,EAAA;AAAA,IACJ,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;AAAA,GACzD;AAAA,EACA,GAAK,EAAA;AAAA,IACH,MAAQ,EAAA,MAAA;AAAA,IACR,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,IAC7B,QAAU,EAAA,KAAA,CAAM,UAAW,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,IACrC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,QAAU,EAAA,OAAA;AAAA,GACZ;AACF,CAAE,CAAA,CAAA,CAAA;AAaW,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,KAAA,KAAU,SAAU,EAAA,CAAA;AACrD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,UAAA,EAAe,GAAA,KAAA,CAAA;AAE5C,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,EAA0B,OAAoB,KAAA;AAC/D,IAAA,QAAA,CAAS,YAAY,EAAK,GAAA,CAAC,OAAO,CAAA,GAAI,EAAE,CAAA,CAAA;AACxC,IAAA,aAAA,CAAc,KAAS,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAS,QAAA,CAAA,CAAC,YAAY,CAAC,CAAA,CAAA;AAAA,KACzB;AAAA,GAEF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,KACR;AAAA,IACA,GAAG,UAAA;AAAA,GACL,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,2BAAA;AAAA,MACX,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,cAAe,EAAA,SAAA;AAAA,MACf,OAAO,KAAM,CAAA,MAAA,KAAW,CAAI,GAAA,EAAA,GAAK,MAAM,CAAC,CAAA;AAAA,MACxC,QAAU,EAAA,SAAA;AAAA,KAAA;AAAA,IAET,YAAa,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,GACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,GAAA;AAAA,QACL,WAAW,OAAQ,CAAA,GAAA;AAAA,QACnB,OAAO,IAAK,CAAA,IAAA;AAAA,QACZ,OAAO,IAAK,CAAA,KAAA;AAAA,OAAA;AAAA,KAEf,CAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/components/SidebarSearchModal/SidebarSearchModal.esm.js

@@ -20,6 +20,7 @@ const SidebarSearchModalContent = (props) => {
     {
       ...state,
       toggleModal,
+      resultItemComponents: props.resultItemComponents,
       children: props.children
     }
   ));

package/dist/components/SidebarSearchModal/SidebarSearchModal.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarSearchModal.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":";;;;;;AAoCA,MAAM,yBAAA,GAA4B,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAY,EAAA,GAAI,cAAe,EAAA,CAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,UAAA,CAAA;AAEvC,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,aAAA;AAAA,MACV,IAAM,EAAA,IAAA;AAAA,MACN,IAAK,EAAA,QAAA;AAAA,MACL,OAAS,EAAA,WAAA;AAAA,KAAA;AAAA,GAEX,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA;AAAA,MACA,UAAU,KAAM,CAAA,QAAA;AAAA,KAAA;AAAA,GAEpB,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,2CACG,mBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,yBAA2B,EAAA,EAAA,GAAG,OAAO,CACxC,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SidebarSearchModal.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  SearchModalProps,\n  SearchModalProvider,\n  useSearchModal,\n} from '../SearchModal';\n\n/**\n * Props for {@link SidebarSearchModal}.\n *\n * @public\n */\nexport type SidebarSearchModalProps = Pick<\n  SearchModalProps,\n  'children' | 'resultItemComponents'\n> & {\n  icon?: IconComponent;\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        resultItemComponents={props.resultItemComponents}\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":";;;;;;AAsCA,MAAM,yBAAA,GAA4B,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAY,EAAA,GAAI,cAAe,EAAA,CAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,UAAA,CAAA;AAEvC,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,aAAA;AAAA,MACV,IAAM,EAAA,IAAA;AAAA,MACN,IAAK,EAAA,QAAA;AAAA,MACL,OAAS,EAAA,WAAA;AAAA,KAAA;AAAA,GAEX,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,WAAA;AAAA,MACA,sBAAsB,KAAM,CAAA,oBAAA;AAAA,MAC5B,UAAU,KAAM,CAAA,QAAA;AAAA,KAAA;AAAA,GAEpB,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,2CACG,mBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,yBAA2B,EAAA,EAAA,GAAG,OAAO,CACxC,CAAA,CAAA;AAEJ;;;;"}

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as _backstage_plugin_search_react from '@backstage/plugin-search-react'
 import { SearchBarBaseProps } from '@backstage/plugin-search-react';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
+import { SearchResultSet } from '@backstage/plugin-search-common';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 
@@ -21,6 +22,10 @@ interface SearchModalChildrenProps {
      * A function that should be invoked when navigating away from the modal.
      */
     toggleModal: () => void;
+    /**
+     * Ability to provide custom components to render the result items
+     */
+    resultItemComponents?: ReactNode | ((resultSet: SearchResultSet) => JSX.Element);
 }
 /**
  * @public
@@ -47,6 +52,10 @@ interface SearchModalProps {
      * place of the default.
      */
     children?: (props: SearchModalChildrenProps) => JSX.Element;
+    /**
+     * Optional ability to pass in result item component renderers.
+     */
+    resultItemComponents?: SearchModalChildrenProps['resultItemComponents'];
 }
 /**
  * @public
@@ -202,9 +211,8 @@ declare const SidebarSearch: (props: SidebarSearchProps) => React__default.JSX.E
  *
  * @public
  */
-type SidebarSearchModalProps = {
+type SidebarSearchModalProps = Pick<SearchModalProps, 'children' | 'resultItemComponents'> & {
     icon?: IconComponent;
-    children?: (props: SearchModalChildrenProps) => JSX.Element;
 };
 
 /**
@@ -220,7 +228,7 @@ declare const SearchPage: () => React.JSX.Element;
 /**
  * @public
  */
-declare const SidebarSearchModal: (props: SidebarSearchModalProps) => React.JSX.Element;
+declare const SidebarSearchModal: (props: SidebarSearchModalProps) => JSX.Element | null;
 /**
  * @public
  */

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright 2020 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 { SearchClient } from './apis';\nimport { searchApiRef } from '@backstage/plugin-search-react';\nimport {\n  createApiFactory,\n  createPlugin,\n  createRouteRef,\n  createRoutableExtension,\n  discoveryApiRef,\n  createComponentExtension,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\n\nexport const rootRouteRef = createRouteRef({\n  id: 'search',\n});\n\n/**\n * @public\n */\nexport const searchPlugin = createPlugin({\n  id: 'search',\n  apis: [\n    createApiFactory({\n      api: searchApiRef,\n      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },\n      factory: ({ discoveryApi, fetchApi }) => {\n        return new SearchClient({ discoveryApi, fetchApi });\n      },\n    }),\n  ],\n  routes: {\n    root: rootRouteRef,\n  },\n});\n\n/**\n * @public\n */\nexport const SearchPage = searchPlugin.provide(\n  createRoutableExtension({\n    name: 'SearchPage',\n    component: () => import('./components/SearchPage').then(m => m.SearchPage),\n    mountPoint: rootRouteRef,\n  }),\n);\n\n/**\n * @public\n */\nexport const SidebarSearchModal = searchPlugin.provide(\n  createComponentExtension({\n    name: 'SidebarSearchModal',\n    component: {\n      lazy: () =>\n        import('./components/SidebarSearchModal').then(\n          m => m.SidebarSearchModal,\n        ),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const HomePageSearchBar = searchPlugin.provide(\n  createComponentExtension({\n    name: 'HomePageSearchBar',\n    component: {\n      lazy: () =>\n        import('./components/HomePageComponent').then(m => m.HomePageSearchBar),\n    },\n  }),\n);\n"],"names":[],"mappings":";;;;AA4BO,MAAM,eAAe,cAAe,CAAA;AAAA,EACzC,EAAI,EAAA,QAAA;AACN,CAAC,EAAA;AAKM,MAAM,eAAe,YAAa,CAAA;AAAA,EACvC,EAAI,EAAA,QAAA;AAAA,EACJ,IAAM,EAAA;AAAA,IACJ,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,YAAA;AAAA,MACL,IAAM,EAAA,EAAE,YAAc,EAAA,eAAA,EAAiB,UAAU,WAAY,EAAA;AAAA,MAC7D,OAAS,EAAA,CAAC,EAAE,YAAA,EAAc,UAAe,KAAA;AACvC,QAAA,OAAO,IAAI,YAAA,CAAa,EAAE,YAAA,EAAc,UAAU,CAAA,CAAA;AAAA,OACpD;AAAA,KACD,CAAA;AAAA,GACH;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,YAAA;AAAA,GACR;AACF,CAAC,EAAA;AAKM,MAAM,aAAa,YAAa,CAAA,OAAA;AAAA,EACrC,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,YAAA;AAAA,IACN,SAAA,EAAW,MAAM,OAAO,sCAAyB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,UAAU,CAAA;AAAA,IACzE,UAAY,EAAA,YAAA;AAAA,GACb,CAAA;AACH,EAAA;AAKO,MAAM,qBAAqB,YAAa,CAAA,OAAA;AAAA,EAC7C,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,oBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,8CAAiC,CAAE,CAAA,IAAA;AAAA,QACxC,OAAK,CAAE,CAAA,kBAAA;AAAA,OACT;AAAA,KACJ;AAAA,GACD,CAAA;AACH,EAAA;AAKO,MAAM,oBAAoB,YAAa,CAAA,OAAA;AAAA,EAC5C,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,mBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,6CAAgC,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,iBAAiB,CAAA;AAAA,KAC1E;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright 2020 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 { SearchClient } from './apis';\nimport { searchApiRef } from '@backstage/plugin-search-react';\nimport {\n  createApiFactory,\n  createPlugin,\n  createRouteRef,\n  createRoutableExtension,\n  discoveryApiRef,\n  createComponentExtension,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport { SidebarSearchModalProps } from './components/SidebarSearchModal';\n\nexport const rootRouteRef = createRouteRef({\n  id: 'search',\n});\n\n/**\n * @public\n */\nexport const searchPlugin = createPlugin({\n  id: 'search',\n  apis: [\n    createApiFactory({\n      api: searchApiRef,\n      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },\n      factory: ({ discoveryApi, fetchApi }) => {\n        return new SearchClient({ discoveryApi, fetchApi });\n      },\n    }),\n  ],\n  routes: {\n    root: rootRouteRef,\n  },\n});\n\n/**\n * @public\n */\nexport const SearchPage = searchPlugin.provide(\n  createRoutableExtension({\n    name: 'SearchPage',\n    component: () => import('./components/SearchPage').then(m => m.SearchPage),\n    mountPoint: rootRouteRef,\n  }),\n);\n\n/**\n * @public\n */\nexport const SidebarSearchModal = searchPlugin.provide<\n  (props: SidebarSearchModalProps) => JSX.Element | null\n>(\n  createComponentExtension({\n    name: 'SidebarSearchModal',\n    component: {\n      lazy: () =>\n        import('./components/SidebarSearchModal').then(\n          m => m.SidebarSearchModal,\n        ),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const HomePageSearchBar = searchPlugin.provide(\n  createComponentExtension({\n    name: 'HomePageSearchBar',\n    component: {\n      lazy: () =>\n        import('./components/HomePageComponent').then(m => m.HomePageSearchBar),\n    },\n  }),\n);\n"],"names":[],"mappings":";;;;AA6BO,MAAM,eAAe,cAAe,CAAA;AAAA,EACzC,EAAI,EAAA,QAAA;AACN,CAAC,EAAA;AAKM,MAAM,eAAe,YAAa,CAAA;AAAA,EACvC,EAAI,EAAA,QAAA;AAAA,EACJ,IAAM,EAAA;AAAA,IACJ,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,YAAA;AAAA,MACL,IAAM,EAAA,EAAE,YAAc,EAAA,eAAA,EAAiB,UAAU,WAAY,EAAA;AAAA,MAC7D,OAAS,EAAA,CAAC,EAAE,YAAA,EAAc,UAAe,KAAA;AACvC,QAAA,OAAO,IAAI,YAAA,CAAa,EAAE,YAAA,EAAc,UAAU,CAAA,CAAA;AAAA,OACpD;AAAA,KACD,CAAA;AAAA,GACH;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,YAAA;AAAA,GACR;AACF,CAAC,EAAA;AAKM,MAAM,aAAa,YAAa,CAAA,OAAA;AAAA,EACrC,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,YAAA;AAAA,IACN,SAAA,EAAW,MAAM,OAAO,sCAAyB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,UAAU,CAAA;AAAA,IACzE,UAAY,EAAA,YAAA;AAAA,GACb,CAAA;AACH,EAAA;AAKO,MAAM,qBAAqB,YAAa,CAAA,OAAA;AAAA,EAG7C,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,oBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,8CAAiC,CAAE,CAAA,IAAA;AAAA,QACxC,OAAK,CAAE,CAAA,kBAAA;AAAA,OACT;AAAA,KACJ;AAAA,GACD,CAAA;AACH,EAAA;AAKO,MAAM,oBAAoB,YAAa,CAAA,OAAA;AAAA,EAC5C,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,mBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,6CAAgC,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,iBAAiB,CAAA;AAAA,KAC1E;AAAA,GACD,CAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search",
-  "version": "1.4.16-next.2",
+  "version": "1.4.16",
   "description": "The Backstage plugin that provides your backstage app with search",
   "backstage": {
     "role": "frontend-plugin",
@@ -57,16 +57,16 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-compat-api": "^0.3.0-next.2",
-    "@backstage/core-components": "^0.14.11-next.1",
-    "@backstage/core-plugin-api": "^1.9.4-next.0",
+    "@backstage/core-compat-api": "^0.3.0",
+    "@backstage/core-components": "^0.15.0",
+    "@backstage/core-plugin-api": "^1.9.4",
     "@backstage/errors": "^1.2.4",
-    "@backstage/frontend-plugin-api": "^0.8.0-next.2",
-    "@backstage/plugin-catalog-react": "^1.13.0-next.2",
+    "@backstage/frontend-plugin-api": "^0.8.0",
+    "@backstage/plugin-catalog-react": "^1.13.0",
     "@backstage/plugin-search-common": "^1.2.14",
-    "@backstage/plugin-search-react": "^1.8.0-next.2",
+    "@backstage/plugin-search-react": "^1.8.0",
     "@backstage/types": "^1.1.1",
-    "@backstage/version-bridge": "^1.0.9-next.0",
+    "@backstage/version-bridge": "^1.0.9",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
@@ -74,10 +74,10 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.27.1-next.2",
-    "@backstage/core-app-api": "^1.14.3-next.0",
-    "@backstage/dev-utils": "^1.1.0-next.2",
-    "@backstage/test-utils": "^1.6.0-next.1",
+    "@backstage/cli": "^0.27.1",
+    "@backstage/core-app-api": "^1.15.0",
+    "@backstage/dev-utils": "^1.1.0",
+    "@backstage/test-utils": "^1.6.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",