@backstage/plugin-search 1.4.26-next.2 → 1.4.26-next.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @backstage/plugin-search
 
+## 1.4.26-next.3
+
+### Patch Changes
+
+- fa48594: search plugin support i18n
+- Updated dependencies
+  - @backstage/plugin-search-react@1.9.0-next.2
+  - @backstage/core-compat-api@0.4.2-next.3
+  - @backstage/core-components@0.17.2-next.1
+  - @backstage/core-plugin-api@1.10.7-next.0
+  - @backstage/plugin-catalog-react@1.18.0-next.3
+  - @backstage/errors@1.2.7
+  - @backstage/frontend-plugin-api@0.10.2-next.1
+  - @backstage/types@1.2.1
+  - @backstage/version-bridge@1.0.11
+  - @backstage/plugin-search-common@1.2.18-next.0
+
 ## 1.4.26-next.2
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -2,6 +2,20 @@ import * as _backstage_plugin_search_react_alpha from '@backstage/plugin-search-
 import * as react from 'react';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/alpha';
+
+/**
+ * @alpha
+ */
+declare const searchTranslationRef: _backstage_core_plugin_api_alpha.TranslationRef<"search", {
+    readonly "searchModal.viewFullResults": "View Full Results";
+    readonly "searchType.tabs.allTitle": "All";
+    readonly "searchType.allResults": "All Results";
+    readonly "searchType.accordion.collapse": "Collapse";
+    readonly "searchType.accordion.allTitle": "All";
+    readonly "searchType.accordion.numberOfResults": "{{number}} results";
+    readonly "sidebarSearchModal.title": "Search";
+}>;
 
 /** @alpha */
 declare const searchApi: _backstage_frontend_plugin_api.ExtensionDefinition<{
@@ -158,4 +172,4 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
     }>;
 }>;
 
-export { _default as default, searchApi, searchNavItem, searchPage };
+export { _default as default, searchApi, searchNavItem, searchPage, searchTranslationRef };

package/dist/alpha.esm.js

@@ -15,6 +15,7 @@ import { SearchClient } from './apis.esm.js';
 import { SearchType } from './components/SearchType/SearchType.esm.js';
 import { UrlUpdater } from './components/SearchPage/SearchPage.esm.js';
 import { convertLegacyRouteRef, compatWrapper, convertLegacyRouteRefs } from '@backstage/core-compat-api';
+export { searchTranslationRef } from './translation.esm.js';
 
 const searchApi = ApiBlueprint.make({
   params: {

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 Grid from '@material-ui/core/Grid';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport SearchIcon from '@material-ui/icons/Search';\n\nimport {\n  CatalogIcon,\n  Content,\n  DocsIcon,\n  Header,\n  Page,\n  useSidebarPinState,\n} from '@backstage/core-components';\nimport {\n  useApi,\n  discoveryApiRef,\n  fetchApiRef,\n  createApiFactory,\n} from '@backstage/core-plugin-api';\n\nimport {\n  createFrontendPlugin,\n  ApiBlueprint,\n  createExtensionInput,\n  PageBlueprint,\n  NavItemBlueprint,\n} from '@backstage/frontend-plugin-api';\n\nimport {\n  catalogApiRef,\n  CATALOG_FILTER_EXISTS,\n} from '@backstage/plugin-catalog-react';\n\nimport {\n  DefaultResultListItem,\n  SearchBar,\n  SearchFilter,\n  SearchPagination,\n  SearchResult as SearchResults,\n  SearchResultPager,\n  useSearch,\n  SearchContextProvider,\n} from '@backstage/plugin-search-react';\nimport { SearchResult } from '@backstage/plugin-search-common';\nimport { searchApiRef } from '@backstage/plugin-search-react';\nimport {\n  SearchResultListItemBlueprint,\n  SearchFilterResultTypeBlueprint,\n  SearchFilterBlueprint,\n} from '@backstage/plugin-search-react/alpha';\n\nimport { rootRouteRef } from './plugin';\nimport { SearchClient } from './apis';\nimport { SearchType } from './components/SearchType';\nimport { UrlUpdater } from './components/SearchPage/SearchPage';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n  convertLegacyRouteRefs,\n} from '@backstage/core-compat-api';\n\n/** @alpha */\nexport const searchApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: searchApiRef,\n      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },\n      factory: ({ discoveryApi, fetchApi }) =>\n        new SearchClient({ discoveryApi, fetchApi }),\n    }),\n  },\n});\n\nconst useSearchPageStyles = makeStyles((theme: Theme) => ({\n  filter: {\n    '& + &': {\n      marginTop: theme.spacing(2.5),\n    },\n  },\n  filters: {\n    padding: theme.spacing(2),\n    marginTop: theme.spacing(2),\n  },\n}));\n\n/** @alpha */\nexport const searchPage = PageBlueprint.makeWithOverrides({\n  config: {\n    schema: {\n      noTrack: z => z.boolean().default(false),\n    },\n  },\n  inputs: {\n    items: createExtensionInput([SearchResultListItemBlueprint.dataRefs.item]),\n    resultTypes: createExtensionInput([\n      SearchFilterResultTypeBlueprint.dataRefs.resultType,\n    ]),\n    searchFilters: createExtensionInput([\n      SearchFilterBlueprint.dataRefs.searchFilters,\n    ]),\n  },\n  factory(originalFactory, { config, inputs }) {\n    return originalFactory({\n      defaultPath: '/search',\n      routeRef: convertLegacyRouteRef(rootRouteRef),\n      loader: async () => {\n        const getResultItemComponent = (result: SearchResult) => {\n          const value = inputs.items.find(item =>\n            item\n              ?.get(SearchResultListItemBlueprint.dataRefs.item)\n              .predicate?.(result),\n          );\n          return (\n            value?.get(SearchResultListItemBlueprint.dataRefs.item).component ??\n            DefaultResultListItem\n          );\n        };\n\n        const resultTypes = inputs.resultTypes.map(item =>\n          item.get(SearchFilterResultTypeBlueprint.dataRefs.resultType),\n        );\n\n        const additionalSearchFilters = inputs.searchFilters.map(\n          item =>\n            item.get(SearchFilterBlueprint.dataRefs.searchFilters).component,\n        );\n\n        const Component = () => {\n          const classes = useSearchPageStyles();\n          const { isMobile } = useSidebarPinState();\n          const { types } = useSearch();\n          const catalogApi = useApi(catalogApiRef);\n\n          return (\n            <Page themeId=\"home\">\n              {!isMobile && <Header title=\"Search\" />}\n              <Content>\n                <Grid container direction=\"row\">\n                  <Grid item xs={12}>\n                    <SearchBar debounceTime={100} />\n                  </Grid>\n                  {!isMobile && (\n                    <Grid item xs={3}>\n                      <SearchType.Accordion\n                        name=\"Result Type\"\n                        defaultValue=\"software-catalog\"\n                        showCounts\n                        types={[\n                          {\n                            value: 'software-catalog',\n                            name: 'Software Catalog',\n                            icon: <CatalogIcon />,\n                          },\n                          {\n                            value: 'techdocs',\n                            name: 'Documentation',\n                            icon: <DocsIcon />,\n                          },\n                        ].concat(resultTypes)}\n                      />\n                      <Paper className={classes.filters}>\n                        {types.includes('techdocs') && (\n                          <SearchFilter.Select\n                            className={classes.filter}\n                            label=\"Entity\"\n                            name=\"name\"\n                            values={async () => {\n                              // Return a list of entities which are documented.\n                              const { items } = await catalogApi.getEntities({\n                                fields: ['metadata.name'],\n                                filter: {\n                                  'metadata.annotations.backstage.io/techdocs-ref':\n                                    CATALOG_FILTER_EXISTS,\n                                },\n                              });\n\n                              const names = items.map(\n                                entity => entity.metadata.name,\n                              );\n                              names.sort();\n                              return names;\n                            }}\n                          />\n                        )}\n                        <SearchFilter.Select\n                          className={classes.filter}\n                          label=\"Kind\"\n                          name=\"kind\"\n                          values={[\n                            'API',\n                            'Component',\n                            'Domain',\n                            'Group',\n                            'Location',\n                            'Resource',\n                            'System',\n                            'Template',\n                            'User',\n                          ]}\n                        />\n                        <SearchFilter.Checkbox\n                          className={classes.filter}\n                          label=\"Lifecycle\"\n                          name=\"lifecycle\"\n                          values={['experimental', 'production']}\n                        />\n                        {additionalSearchFilters.map(SearchFilterComponent => (\n                          <SearchFilterComponent className={classes.filter} />\n                        ))}\n                      </Paper>\n                    </Grid>\n                  )}\n                  <Grid item xs>\n                    <SearchPagination />\n                    <SearchResults>\n                      {({ results }) => (\n                        <>\n                          {results.map((result, index) => {\n                            const { noTrack } = config;\n                            const { document, ...rest } = result;\n                            const SearchResultListItem =\n                              getResultItemComponent(result);\n                            return (\n                              <SearchResultListItem\n                                {...rest}\n                                key={index}\n                                result={document}\n                                noTrack={noTrack}\n                              />\n                            );\n                          })}\n                        </>\n                      )}\n                    </SearchResults>\n                    <SearchResultPager />\n                  </Grid>\n                </Grid>\n              </Content>\n            </Page>\n          );\n        };\n\n        return compatWrapper(\n          <SearchContextProvider>\n            <UrlUpdater />\n            <Component />\n          </SearchContextProvider>,\n        );\n      },\n    });\n  },\n});\n\n/** @alpha */\nexport const searchNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    title: 'Search',\n    icon: SearchIcon,\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  pluginId: 'search',\n  extensions: [searchApi, searchPage, searchNavItem],\n  routes: convertLegacyRouteRefs({\n    root: rootRouteRef,\n  }),\n});\n"],"names":["SearchResults"],"mappings":"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"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 Grid from '@material-ui/core/Grid';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport SearchIcon from '@material-ui/icons/Search';\n\nimport {\n  CatalogIcon,\n  Content,\n  DocsIcon,\n  Header,\n  Page,\n  useSidebarPinState,\n} from '@backstage/core-components';\nimport {\n  useApi,\n  discoveryApiRef,\n  fetchApiRef,\n  createApiFactory,\n} from '@backstage/core-plugin-api';\n\nimport {\n  createFrontendPlugin,\n  ApiBlueprint,\n  createExtensionInput,\n  PageBlueprint,\n  NavItemBlueprint,\n} from '@backstage/frontend-plugin-api';\n\nimport {\n  catalogApiRef,\n  CATALOG_FILTER_EXISTS,\n} from '@backstage/plugin-catalog-react';\n\nimport {\n  DefaultResultListItem,\n  SearchBar,\n  SearchFilter,\n  SearchPagination,\n  SearchResult as SearchResults,\n  SearchResultPager,\n  useSearch,\n  SearchContextProvider,\n} from '@backstage/plugin-search-react';\nimport { SearchResult } from '@backstage/plugin-search-common';\nimport { searchApiRef } from '@backstage/plugin-search-react';\nimport {\n  SearchResultListItemBlueprint,\n  SearchFilterResultTypeBlueprint,\n  SearchFilterBlueprint,\n} from '@backstage/plugin-search-react/alpha';\n\nimport { rootRouteRef } from './plugin';\nimport { SearchClient } from './apis';\nimport { SearchType } from './components/SearchType';\nimport { UrlUpdater } from './components/SearchPage/SearchPage';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n  convertLegacyRouteRefs,\n} from '@backstage/core-compat-api';\n\n/** @alpha */\nexport const searchApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: searchApiRef,\n      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },\n      factory: ({ discoveryApi, fetchApi }) =>\n        new SearchClient({ discoveryApi, fetchApi }),\n    }),\n  },\n});\n\nconst useSearchPageStyles = makeStyles((theme: Theme) => ({\n  filter: {\n    '& + &': {\n      marginTop: theme.spacing(2.5),\n    },\n  },\n  filters: {\n    padding: theme.spacing(2),\n    marginTop: theme.spacing(2),\n  },\n}));\n\n/** @alpha */\nexport const searchPage = PageBlueprint.makeWithOverrides({\n  config: {\n    schema: {\n      noTrack: z => z.boolean().default(false),\n    },\n  },\n  inputs: {\n    items: createExtensionInput([SearchResultListItemBlueprint.dataRefs.item]),\n    resultTypes: createExtensionInput([\n      SearchFilterResultTypeBlueprint.dataRefs.resultType,\n    ]),\n    searchFilters: createExtensionInput([\n      SearchFilterBlueprint.dataRefs.searchFilters,\n    ]),\n  },\n  factory(originalFactory, { config, inputs }) {\n    return originalFactory({\n      defaultPath: '/search',\n      routeRef: convertLegacyRouteRef(rootRouteRef),\n      loader: async () => {\n        const getResultItemComponent = (result: SearchResult) => {\n          const value = inputs.items.find(item =>\n            item\n              ?.get(SearchResultListItemBlueprint.dataRefs.item)\n              .predicate?.(result),\n          );\n          return (\n            value?.get(SearchResultListItemBlueprint.dataRefs.item).component ??\n            DefaultResultListItem\n          );\n        };\n\n        const resultTypes = inputs.resultTypes.map(item =>\n          item.get(SearchFilterResultTypeBlueprint.dataRefs.resultType),\n        );\n\n        const additionalSearchFilters = inputs.searchFilters.map(\n          item =>\n            item.get(SearchFilterBlueprint.dataRefs.searchFilters).component,\n        );\n\n        const Component = () => {\n          const classes = useSearchPageStyles();\n          const { isMobile } = useSidebarPinState();\n          const { types } = useSearch();\n          const catalogApi = useApi(catalogApiRef);\n\n          return (\n            <Page themeId=\"home\">\n              {!isMobile && <Header title=\"Search\" />}\n              <Content>\n                <Grid container direction=\"row\">\n                  <Grid item xs={12}>\n                    <SearchBar debounceTime={100} />\n                  </Grid>\n                  {!isMobile && (\n                    <Grid item xs={3}>\n                      <SearchType.Accordion\n                        name=\"Result Type\"\n                        defaultValue=\"software-catalog\"\n                        showCounts\n                        types={[\n                          {\n                            value: 'software-catalog',\n                            name: 'Software Catalog',\n                            icon: <CatalogIcon />,\n                          },\n                          {\n                            value: 'techdocs',\n                            name: 'Documentation',\n                            icon: <DocsIcon />,\n                          },\n                        ].concat(resultTypes)}\n                      />\n                      <Paper className={classes.filters}>\n                        {types.includes('techdocs') && (\n                          <SearchFilter.Select\n                            className={classes.filter}\n                            label=\"Entity\"\n                            name=\"name\"\n                            values={async () => {\n                              // Return a list of entities which are documented.\n                              const { items } = await catalogApi.getEntities({\n                                fields: ['metadata.name'],\n                                filter: {\n                                  'metadata.annotations.backstage.io/techdocs-ref':\n                                    CATALOG_FILTER_EXISTS,\n                                },\n                              });\n\n                              const names = items.map(\n                                entity => entity.metadata.name,\n                              );\n                              names.sort();\n                              return names;\n                            }}\n                          />\n                        )}\n                        <SearchFilter.Select\n                          className={classes.filter}\n                          label=\"Kind\"\n                          name=\"kind\"\n                          values={[\n                            'API',\n                            'Component',\n                            'Domain',\n                            'Group',\n                            'Location',\n                            'Resource',\n                            'System',\n                            'Template',\n                            'User',\n                          ]}\n                        />\n                        <SearchFilter.Checkbox\n                          className={classes.filter}\n                          label=\"Lifecycle\"\n                          name=\"lifecycle\"\n                          values={['experimental', 'production']}\n                        />\n                        {additionalSearchFilters.map(SearchFilterComponent => (\n                          <SearchFilterComponent className={classes.filter} />\n                        ))}\n                      </Paper>\n                    </Grid>\n                  )}\n                  <Grid item xs>\n                    <SearchPagination />\n                    <SearchResults>\n                      {({ results }) => (\n                        <>\n                          {results.map((result, index) => {\n                            const { noTrack } = config;\n                            const { document, ...rest } = result;\n                            const SearchResultListItem =\n                              getResultItemComponent(result);\n                            return (\n                              <SearchResultListItem\n                                {...rest}\n                                key={index}\n                                result={document}\n                                noTrack={noTrack}\n                              />\n                            );\n                          })}\n                        </>\n                      )}\n                    </SearchResults>\n                    <SearchResultPager />\n                  </Grid>\n                </Grid>\n              </Content>\n            </Page>\n          );\n        };\n\n        return compatWrapper(\n          <SearchContextProvider>\n            <UrlUpdater />\n            <Component />\n          </SearchContextProvider>,\n        );\n      },\n    });\n  },\n});\n\n/** @alpha */\nexport const searchNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    title: 'Search',\n    icon: SearchIcon,\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  pluginId: 'search',\n  extensions: [searchApi, searchPage, searchNavItem],\n  routes: convertLegacyRouteRefs({\n    root: rootRouteRef,\n  }),\n});\n\n/** @alpha */\nexport { searchTranslationRef } from './translation';\n"],"names":["SearchResults"],"mappings":"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"}

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

@@ -17,6 +17,8 @@ import CloseIcon from '@material-ui/icons/Close';
 import { useRef, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { rootRouteRef } from '../../plugin.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { searchTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   dialogTitle: {
@@ -49,6 +51,7 @@ const Modal = ({
   const navigate = useNavigate();
   const { transitions } = useTheme();
   const { focusContent } = useContent();
+  const { t } = useTranslationRef(searchTranslationRef);
   const searchRootRoute = useRouteRef(rootRouteRef)();
   const searchBarRef = useRef(null);
   useEffect(() => {
@@ -90,7 +93,7 @@ const Modal = ({
               endIcon: /* @__PURE__ */ jsx(ArrowForwardIcon, {}),
               onClick: handleSearchBarSubmit,
               disableRipple: true,
-              children: "View Full Results"
+              children: t("searchModal.viewFullResults")
             }
           ) })
         }

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 { 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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"}
+{"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 { ReactNode, useCallback, useEffect, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { rootRouteRef } from '../../plugin';\nimport { SearchResultSet } from '@backstage/plugin-search-common';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { searchTranslationRef } from '../../translation';\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  const { t } = useTranslationRef(searchTranslationRef);\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              {t('searchModal.viewFullResults')}\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.Accordion.esm.js

@@ -16,6 +16,8 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Typography from '@material-ui/core/Typography';
 import AllIcon from '@material-ui/icons/FontDownload';
 import useAsync from 'react-use/esm/useAsync';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { searchTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   icon: {
@@ -53,6 +55,7 @@ const SearchTypeAccordion = (props) => {
   const searchApi = useApi(searchApiRef);
   const [expanded, setExpanded] = useState(true);
   const { defaultValue, name, showCounts, types: givenTypes } = props;
+  const { t } = useTranslationRef(searchTranslationRef);
   const toggleExpanded = () => setExpanded((prevState) => !prevState);
   const handleClick = (type) => {
     return () => {
@@ -68,7 +71,7 @@ const SearchTypeAccordion = (props) => {
   const definedTypes = [
     {
       value: "",
-      name: "All",
+      name: t("searchType.accordion.allTitle"),
       icon: /* @__PURE__ */ jsx(AllIcon, {})
     },
     ...givenTypes
@@ -79,7 +82,7 @@ const SearchTypeAccordion = (props) => {
       return {};
     }
     const counts = await Promise.all(
-      definedTypes.map((t) => t.value).map(async (type) => {
+      definedTypes.map((type) => type.value).map(async (type) => {
         const { numberOfResults } = await searchApi.query({
           term,
           types: type ? [type] : [],
@@ -88,7 +91,9 @@ const SearchTypeAccordion = (props) => {
         });
         return [
           type,
-          numberOfResults !== void 0 ? `${numberOfResults >= 1e4 ? `>10000` : numberOfResults} results` : " -- "
+          numberOfResults !== void 0 ? t("searchType.accordion.numberOfResults", {
+            number: numberOfResults >= 1e4 ? `>10000` : `${numberOfResults}`
+          }) : " -- "
         ];
       })
     );
@@ -112,7 +117,7 @@ const SearchTypeAccordion = (props) => {
               },
               expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { className: classes.icon }),
               IconButtonProps: { size: "small" },
-              children: expanded ? "Collapse" : definedTypes.filter((t) => t.value === selected)[0].name
+              children: expanded ? t("searchType.accordion.collapse") : definedTypes.filter((type) => type.value === selected)[0].name
             }
           ),
           /* @__PURE__ */ jsx(AccordionDetails, { classes: { root: classes.accordionDetails }, children: /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"SearchType.Accordion.esm.js","sources":["../../../src/components/SearchType/SearchType.Accordion.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 { cloneElement, Fragment, useEffect, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { searchApiRef, useSearch } from '@backstage/plugin-search-react';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Typography from '@material-ui/core/Typography';\nimport AllIcon from '@material-ui/icons/FontDownload';\nimport useAsync from 'react-use/esm/useAsync';\n\nconst useStyles = makeStyles(theme => ({\n  icon: {\n    color: theme.palette.text.primary,\n  },\n  list: {\n    width: '100%',\n  },\n  listItemIcon: {\n    width: '24px',\n    height: '24px',\n  },\n  accordion: {\n    backgroundColor: theme.palette.background.paper,\n  },\n  accordionSummary: {\n    minHeight: 'auto',\n    '&.Mui-expanded': {\n      minHeight: 'auto',\n    },\n  },\n  accordionSummaryContent: {\n    margin: theme.spacing(2, 0),\n    '&.Mui-expanded': {\n      margin: theme.spacing(2, 0),\n    },\n  },\n  accordionDetails: {\n    padding: theme.spacing(0, 0, 1),\n  },\n}));\n\n/**\n * @public\n */\nexport type SearchTypeAccordionProps = {\n  name: string;\n  types: Array<{\n    value: string;\n    name: string;\n    icon: JSX.Element;\n  }>;\n  defaultValue?: string;\n  showCounts?: boolean;\n};\n\nexport const SearchTypeAccordion = (props: SearchTypeAccordionProps) => {\n  const classes = useStyles();\n  const { filters, setPageCursor, setTypes, term, types } = useSearch();\n  const searchApi = useApi(searchApiRef);\n  const [expanded, setExpanded] = useState(true);\n  const { defaultValue, name, showCounts, types: givenTypes } = props;\n\n  const toggleExpanded = () => setExpanded(prevState => !prevState);\n  const handleClick = (type: string) => {\n    return () => {\n      setTypes(type !== '' ? [type] : []);\n      setPageCursor(undefined);\n    };\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      icon: <AllIcon />,\n    },\n    ...givenTypes,\n  ];\n  const selected = types[0] || '';\n\n  const { value: resultCounts } = useAsync(async () => {\n    if (!showCounts) {\n      return {};\n    }\n\n    const counts = await Promise.all(\n      definedTypes\n        .map(t => t.value)\n        .map(async type => {\n          const { numberOfResults } = await searchApi.query({\n            term,\n            types: type ? [type] : [],\n            filters:\n              types.includes(type) || (!types.length && !type) ? filters : {},\n            pageLimit: 0,\n          });\n\n          return [\n            type,\n            numberOfResults !== undefined\n              ? `${\n                  numberOfResults >= 10000 ? `>10000` : numberOfResults\n                } results`\n              : ' -- ',\n          ];\n        }),\n    );\n\n    return Object.fromEntries(counts);\n  }, [filters, showCounts, term, types]);\n\n  return (\n    <Box>\n      <Typography variant=\"body2\" component=\"h2\">\n        {name}\n      </Typography>\n      <Accordion\n        className={classes.accordion}\n        expanded={expanded}\n        onChange={toggleExpanded}\n      >\n        <AccordionSummary\n          classes={{\n            root: classes.accordionSummary,\n            content: classes.accordionSummaryContent,\n          }}\n          expandIcon={<ExpandMoreIcon className={classes.icon} />}\n          IconButtonProps={{ size: 'small' }}\n        >\n          {expanded\n            ? 'Collapse'\n            : definedTypes.filter(t => t.value === selected)[0]!.name}\n        </AccordionSummary>\n        <AccordionDetails classes={{ root: classes.accordionDetails }}>\n          <List\n            className={classes.list}\n            component=\"nav\"\n            aria-label=\"filter by type\"\n            disablePadding\n            dense\n          >\n            {definedTypes.map(type => (\n              <Fragment key={type.value}>\n                <Divider />\n                <ListItem\n                  selected={\n                    types[0] === type.value ||\n                    (types.length === 0 && type.value === '')\n                  }\n                  onClick={handleClick(type.value)}\n                  button\n                >\n                  <ListItemIcon>\n                    {cloneElement(type.icon, {\n                      className: classes.listItemIcon,\n                    })}\n                  </ListItemIcon>\n                  <ListItemText\n                    primary={type.name}\n                    secondary={resultCounts && resultCounts[type.value]}\n                  />\n                </ListItem>\n              </Fragment>\n            ))}\n          </List>\n        </AccordionDetails>\n      </Accordion>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchType.Accordion.esm.js","sources":["../../../src/components/SearchType/SearchType.Accordion.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 { cloneElement, Fragment, useEffect, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { searchApiRef, useSearch } from '@backstage/plugin-search-react';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Typography from '@material-ui/core/Typography';\nimport AllIcon from '@material-ui/icons/FontDownload';\nimport useAsync from 'react-use/esm/useAsync';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { searchTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  icon: {\n    color: theme.palette.text.primary,\n  },\n  list: {\n    width: '100%',\n  },\n  listItemIcon: {\n    width: '24px',\n    height: '24px',\n  },\n  accordion: {\n    backgroundColor: theme.palette.background.paper,\n  },\n  accordionSummary: {\n    minHeight: 'auto',\n    '&.Mui-expanded': {\n      minHeight: 'auto',\n    },\n  },\n  accordionSummaryContent: {\n    margin: theme.spacing(2, 0),\n    '&.Mui-expanded': {\n      margin: theme.spacing(2, 0),\n    },\n  },\n  accordionDetails: {\n    padding: theme.spacing(0, 0, 1),\n  },\n}));\n\n/**\n * @public\n */\nexport type SearchTypeAccordionProps = {\n  name: string;\n  types: Array<{\n    value: string;\n    name: string;\n    icon: JSX.Element;\n  }>;\n  defaultValue?: string;\n  showCounts?: boolean;\n};\n\nexport const SearchTypeAccordion = (props: SearchTypeAccordionProps) => {\n  const classes = useStyles();\n  const { filters, setPageCursor, setTypes, term, types } = useSearch();\n  const searchApi = useApi(searchApiRef);\n  const [expanded, setExpanded] = useState(true);\n  const { defaultValue, name, showCounts, types: givenTypes } = props;\n  const { t } = useTranslationRef(searchTranslationRef);\n\n  const toggleExpanded = () => setExpanded(prevState => !prevState);\n  const handleClick = (type: string) => {\n    return () => {\n      setTypes(type !== '' ? [type] : []);\n      setPageCursor(undefined);\n    };\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: t('searchType.accordion.allTitle'),\n      icon: <AllIcon />,\n    },\n    ...givenTypes,\n  ];\n  const selected = types[0] || '';\n\n  const { value: resultCounts } = useAsync(async () => {\n    if (!showCounts) {\n      return {};\n    }\n\n    const counts = await Promise.all(\n      definedTypes\n        .map(type => type.value)\n        .map(async type => {\n          const { numberOfResults } = await searchApi.query({\n            term,\n            types: type ? [type] : [],\n            filters:\n              types.includes(type) || (!types.length && !type) ? filters : {},\n            pageLimit: 0,\n          });\n\n          return [\n            type,\n            numberOfResults !== undefined\n              ? t('searchType.accordion.numberOfResults', {\n                  number:\n                    numberOfResults >= 10000 ? `>10000` : `${numberOfResults}`,\n                })\n              : ' -- ',\n          ];\n        }),\n    );\n\n    return Object.fromEntries(counts);\n  }, [filters, showCounts, term, types]);\n\n  return (\n    <Box>\n      <Typography variant=\"body2\" component=\"h2\">\n        {name}\n      </Typography>\n      <Accordion\n        className={classes.accordion}\n        expanded={expanded}\n        onChange={toggleExpanded}\n      >\n        <AccordionSummary\n          classes={{\n            root: classes.accordionSummary,\n            content: classes.accordionSummaryContent,\n          }}\n          expandIcon={<ExpandMoreIcon className={classes.icon} />}\n          IconButtonProps={{ size: 'small' }}\n        >\n          {expanded\n            ? t('searchType.accordion.collapse')\n            : definedTypes.filter(type => type.value === selected)[0]!.name}\n        </AccordionSummary>\n        <AccordionDetails classes={{ root: classes.accordionDetails }}>\n          <List\n            className={classes.list}\n            component=\"nav\"\n            aria-label=\"filter by type\"\n            disablePadding\n            dense\n          >\n            {definedTypes.map(type => (\n              <Fragment key={type.value}>\n                <Divider />\n                <ListItem\n                  selected={\n                    types[0] === type.value ||\n                    (types.length === 0 && type.value === '')\n                  }\n                  onClick={handleClick(type.value)}\n                  button\n                >\n                  <ListItemIcon>\n                    {cloneElement(type.icon, {\n                      className: classes.listItemIcon,\n                    })}\n                  </ListItemIcon>\n                  <ListItemText\n                    primary={type.name}\n                    secondary={resultCounts && resultCounts[type.value]}\n                  />\n                </ListItem>\n              </Fragment>\n            ))}\n          </List>\n        </AccordionDetails>\n      </Accordion>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,GAC5B;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,KAAO,EAAA;AAAA,GACT;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA;AAAA,GACV;AAAA,EACA,SAAW,EAAA;AAAA,IACT,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA;AAAA,GAC5C;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,MAAA;AAAA,IACX,gBAAkB,EAAA;AAAA,MAChB,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,uBAAyB,EAAA;AAAA,IACvB,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,IAC1B,gBAAkB,EAAA;AAAA,MAChB,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC;AAAA;AAC5B,GACF;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,GAAG,CAAC;AAAA;AAElC,CAAE,CAAA,CAAA;AAgBW,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,OAAS,EAAA,aAAA,EAAe,UAAU,IAAM,EAAA,KAAA,KAAU,SAAU,EAAA;AACpE,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,IAAI,CAAA;AAC7C,EAAA,MAAM,EAAE,YAAc,EAAA,IAAA,EAAM,UAAY,EAAA,KAAA,EAAO,YAAe,GAAA,KAAA;AAC9D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,cAAiB,GAAA,MAAM,WAAY,CAAA,CAAA,SAAA,KAAa,CAAC,SAAS,CAAA;AAChE,EAAM,MAAA,WAAA,GAAc,CAAC,IAAiB,KAAA;AACpC,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,SAAS,EAAK,GAAA,CAAC,IAAI,CAAA,GAAI,EAAE,CAAA;AAClC,MAAA,aAAA,CAAc,KAAS,CAAA,CAAA;AAAA,KACzB;AAAA,GACF;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAS,QAAA,CAAA,CAAC,YAAY,CAAC,CAAA;AAAA;AACzB,GAEF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,KAAO,EAAA,EAAA;AAAA,MACP,IAAA,EAAM,EAAE,+BAA+B,CAAA;AAAA,MACvC,IAAA,sBAAO,OAAQ,EAAA,EAAA;AAAA,KACjB;AAAA,IACA,GAAG;AAAA,GACL;AACA,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,CAAC,CAAK,IAAA,EAAA;AAE7B,EAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,SAAS,YAAY;AACnD,IAAA,IAAI,CAAC,UAAY,EAAA;AACf,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,MAAA,GAAS,MAAM,OAAQ,CAAA,GAAA;AAAA,MAC3B,YAAA,CACG,IAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,KAAK,CACtB,CAAA,GAAA,CAAI,OAAM,IAAQ,KAAA;AACjB,QAAA,MAAM,EAAE,eAAA,EAAoB,GAAA,MAAM,UAAU,KAAM,CAAA;AAAA,UAChD,IAAA;AAAA,UACA,KAAO,EAAA,IAAA,GAAO,CAAC,IAAI,IAAI,EAAC;AAAA,UACxB,OAAA,EACE,KAAM,CAAA,QAAA,CAAS,IAAI,CAAA,IAAM,CAAC,KAAA,CAAM,MAAU,IAAA,CAAC,IAAQ,GAAA,OAAA,GAAU,EAAC;AAAA,UAChE,SAAW,EAAA;AAAA,SACZ,CAAA;AAED,QAAO,OAAA;AAAA,UACL,IAAA;AAAA,UACA,eAAA,KAAoB,KAChB,CAAA,GAAA,CAAA,CAAE,sCAAwC,EAAA;AAAA,YACxC,MACE,EAAA,eAAA,IAAmB,GAAQ,GAAA,CAAA,MAAA,CAAA,GAAW,GAAG,eAAe,CAAA;AAAA,WAC3D,CACD,GAAA;AAAA,SACN;AAAA,OACD;AAAA,KACL;AAEA,IAAO,OAAA,MAAA,CAAO,YAAY,MAAM,CAAA;AAAA,KAC/B,CAAC,OAAA,EAAS,UAAY,EAAA,IAAA,EAAM,KAAK,CAAC,CAAA;AAErC,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,SAAA,EAAU,MACnC,QACH,EAAA,IAAA,EAAA,CAAA;AAAA,oBACA,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,SAAA;AAAA,QACnB,QAAA;AAAA,QACA,QAAU,EAAA,cAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,OAAS,EAAA;AAAA,gBACP,MAAM,OAAQ,CAAA,gBAAA;AAAA,gBACd,SAAS,OAAQ,CAAA;AAAA,eACnB;AAAA,cACA,UAAY,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,CAAA;AAAA,cACrD,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAQ,EAAA;AAAA,cAEhC,QACG,EAAA,QAAA,GAAA,CAAA,CAAE,+BAA+B,CAAA,GACjC,YAAa,CAAA,MAAA,CAAO,CAAQ,IAAA,KAAA,IAAA,CAAK,KAAU,KAAA,QAAQ,CAAE,CAAA,CAAC,CAAG,CAAA;AAAA;AAAA,WAC/D;AAAA,8BACC,gBAAiB,EAAA,EAAA,OAAA,EAAS,EAAE,IAAM,EAAA,OAAA,CAAQ,kBACzC,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAQ,CAAA,IAAA;AAAA,cACnB,SAAU,EAAA,KAAA;AAAA,cACV,YAAW,EAAA,gBAAA;AAAA,cACX,cAAc,EAAA,IAAA;AAAA,cACd,KAAK,EAAA,IAAA;AAAA,cAEJ,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAChB,IAAA,qBAAA,IAAA,CAAC,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,CAAA;AAAA,gCACT,IAAA;AAAA,kBAAC,QAAA;AAAA,kBAAA;AAAA,oBACC,QAAA,EACE,KAAM,CAAA,CAAC,CAAM,KAAA,IAAA,CAAK,SACjB,KAAM,CAAA,MAAA,KAAW,CAAK,IAAA,IAAA,CAAK,KAAU,KAAA,EAAA;AAAA,oBAExC,OAAA,EAAS,WAAY,CAAA,IAAA,CAAK,KAAK,CAAA;AAAA,oBAC/B,MAAM,EAAA,IAAA;AAAA,oBAEN,QAAA,EAAA;AAAA,sCAAC,GAAA,CAAA,YAAA,EAAA,EACE,QAAa,EAAA,YAAA,CAAA,IAAA,CAAK,IAAM,EAAA;AAAA,wBACvB,WAAW,OAAQ,CAAA;AAAA,uBACpB,CACH,EAAA,CAAA;AAAA,sCACA,GAAA;AAAA,wBAAC,YAAA;AAAA,wBAAA;AAAA,0BACC,SAAS,IAAK,CAAA,IAAA;AAAA,0BACd,SAAW,EAAA,YAAA,IAAgB,YAAa,CAAA,IAAA,CAAK,KAAK;AAAA;AAAA;AACpD;AAAA;AAAA;AACF,eAnBa,EAAA,EAAA,IAAA,CAAK,KAoBpB,CACD;AAAA;AAAA,WAEL,EAAA;AAAA;AAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -4,6 +4,8 @@ import { useSearch } from '@backstage/plugin-search-react';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import { makeStyles } from '@material-ui/core/styles';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { searchTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   tabs: {
@@ -21,6 +23,7 @@ const SearchTypeTabs = (props) => {
   const classes = useStyles();
   const { setPageCursor, setTypes, types } = useSearch();
   const { defaultValue, types: givenTypes } = props;
+  const { t } = useTranslationRef(searchTranslationRef);
   const changeTab = (_, newType) => {
     setTypes(newType !== "" ? [newType] : []);
     setPageCursor(void 0);
@@ -33,7 +36,7 @@ const SearchTypeTabs = (props) => {
   const definedTypes = [
     {
       value: "",
-      name: "All"
+      name: t("searchType.tabs.allTitle")
     },
     ...givenTypes
   ];

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 { ChangeEvent, 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 = (_: 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;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;AAAA;AAEd,CAAE,CAAA,CAAA;AAaW,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,KAAA,KAAU,SAAU,EAAA;AACrD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,UAAA,EAAe,GAAA,KAAA;AAE5C,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,EAAoB,OAAoB,KAAA;AACzD,IAAA,QAAA,CAAS,YAAY,EAAK,GAAA,CAAC,OAAO,CAAA,GAAI,EAAE,CAAA;AACxC,IAAA,aAAA,CAAc,KAAS,CAAA,CAAA;AAAA,GACzB;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAS,QAAA,CAAA,CAAC,YAAY,CAAC,CAAA;AAAA;AACzB,GAEF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,KACR;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EACE,uBAAA,GAAA;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,MAET,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,GACvB,qBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UAEC,WAAW,OAAQ,CAAA,GAAA;AAAA,UACnB,OAAO,IAAK,CAAA,IAAA;AAAA,UACZ,OAAO,IAAK,CAAA;AAAA,SAAA;AAAA,QAHP;AAAA,OAKR;AAAA;AAAA,GACH;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 { ChangeEvent, 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';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { searchTranslationRef } from '../../translation';\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  const { t } = useTranslationRef(searchTranslationRef);\n\n  const changeTab = (_: 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: t('searchType.tabs.allTitle'),\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":";;;;;;;;;AAyBA,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;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;AAAA;AAEd,CAAE,CAAA,CAAA;AAaW,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,KAAA,KAAU,SAAU,EAAA;AACrD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,UAAA,EAAe,GAAA,KAAA;AAC5C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,EAAoB,OAAoB,KAAA;AACzD,IAAA,QAAA,CAAS,YAAY,EAAK,GAAA,CAAC,OAAO,CAAA,GAAI,EAAE,CAAA;AACxC,IAAA,aAAA,CAAc,KAAS,CAAA,CAAA;AAAA,GACzB;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAS,QAAA,CAAA,CAAC,YAAY,CAAC,CAAA;AAAA;AACzB,GAEF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,KAAO,EAAA,EAAA;AAAA,MACP,IAAA,EAAM,EAAE,0BAA0B;AAAA,KACpC;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EACE,uBAAA,GAAA;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,MAET,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,GACvB,qBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UAEC,WAAW,OAAQ,CAAA,GAAA;AAAA,UACnB,OAAO,IAAK,CAAA,IAAA;AAAA,UACZ,OAAO,IAAK,CAAA;AAAA,SAAA;AAAA,QAHP;AAAA,OAKR;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -11,6 +11,8 @@ import useEffectOnce from 'react-use/esm/useEffectOnce';
 import { SearchTypeAccordion } from './SearchType.Accordion.esm.js';
 import { SearchTypeTabs } from './SearchType.Tabs.esm.js';
 import { useSearch } from '@backstage/plugin-search-react';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { searchTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   label: {
@@ -29,6 +31,7 @@ const SearchType = (props) => {
   const { className, defaultValue, name, values = [] } = props;
   const classes = useStyles();
   const { types, setTypes } = useSearch();
+  const { t } = useTranslationRef(searchTranslationRef);
   useEffectOnce(() => {
     if (!types.length) {
       if (defaultValue && Array.isArray(defaultValue)) {
@@ -58,7 +61,7 @@ const SearchType = (props) => {
             variant: "outlined",
             value: types,
             onChange: handleChange,
-            placeholder: "All Results",
+            placeholder: t("searchType.allResults"),
             renderValue: (selected) => /* @__PURE__ */ jsx("div", { className: classes.chips, children: selected.map((value) => /* @__PURE__ */ jsx(
               Chip,
               {

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

@@ -1 +1 @@
-{"version":3,"file":"SearchType.esm.js","sources":["../../../src/components/SearchType/SearchType.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 Checkbox from '@material-ui/core/Checkbox';\nimport Chip from '@material-ui/core/Chip';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ChangeEvent } from 'react';\nimport useEffectOnce from 'react-use/esm/useEffectOnce';\nimport {\n  SearchTypeAccordion,\n  SearchTypeAccordionProps,\n} from './SearchType.Accordion';\nimport { SearchTypeTabs, SearchTypeTabsProps } from './SearchType.Tabs';\nimport { useSearch } from '@backstage/plugin-search-react';\n\nconst useStyles = makeStyles(theme => ({\n  label: {\n    textTransform: 'capitalize',\n  },\n  chips: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    marginTop: theme.spacing(1),\n  },\n  chip: {\n    margin: 2,\n  },\n}));\n\n/**\n * Props for {@link SearchType}.\n *\n * @public\n */\nexport type SearchTypeProps = {\n  className?: string;\n  name: string;\n  values?: string[];\n  defaultValue?: string[] | string | null;\n};\n\n/**\n * @public\n */\nconst SearchType = (props: SearchTypeProps) => {\n  const { className, defaultValue, name, values = [] } = props;\n  const classes = useStyles();\n  const { types, setTypes } = useSearch();\n\n  useEffectOnce(() => {\n    if (!types.length) {\n      if (defaultValue && Array.isArray(defaultValue)) {\n        setTypes(defaultValue);\n      } else if (defaultValue) {\n        setTypes([defaultValue]);\n      }\n    }\n  });\n\n  const handleChange = (e: ChangeEvent<{ value: unknown }>) => {\n    const value = e.target.value as string[];\n    setTypes(value as string[]);\n  };\n\n  return (\n    <FormControl\n      className={className}\n      variant=\"filled\"\n      fullWidth\n      data-testid=\"search-typefilter-next\"\n    >\n      <InputLabel className={classes.label} margin=\"dense\">\n        {name}\n      </InputLabel>\n      <Select\n        multiple\n        variant=\"outlined\"\n        value={types}\n        onChange={handleChange}\n        placeholder=\"All Results\"\n        renderValue={selected => (\n          <div className={classes.chips}>\n            {(selected as string[]).map(value => (\n              <Chip\n                key={value}\n                label={value}\n                className={classes.chip}\n                size=\"small\"\n              />\n            ))}\n          </div>\n        )}\n      >\n        {values.map((value: string) => (\n          <MenuItem key={value} value={value}>\n            <Checkbox checked={types.indexOf(value) > -1} />\n            <ListItemText primary={value} />\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n\n/**\n * A control surface for the search query's \"types\" property, displayed as a\n * single-select collapsible accordion suitable for use in faceted search UIs.\n * @public\n */\nSearchType.Accordion = (props: SearchTypeAccordionProps) => {\n  return <SearchTypeAccordion {...props} />;\n};\n\n/**\n * A control surface for the search query's \"types\" property, displayed as a\n * tabs suitable for use in faceted search UIs.\n * @public\n */\nSearchType.Tabs = (props: SearchTypeTabsProps) => {\n  return <SearchTypeTabs {...props} />;\n};\n\nexport { SearchType };\nexport type { SearchTypeAccordionProps, SearchTypeTabsProps };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchType.esm.js","sources":["../../../src/components/SearchType/SearchType.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 Checkbox from '@material-ui/core/Checkbox';\nimport Chip from '@material-ui/core/Chip';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ChangeEvent } from 'react';\nimport useEffectOnce from 'react-use/esm/useEffectOnce';\nimport {\n  SearchTypeAccordion,\n  SearchTypeAccordionProps,\n} from './SearchType.Accordion';\nimport { SearchTypeTabs, SearchTypeTabsProps } from './SearchType.Tabs';\nimport { useSearch } from '@backstage/plugin-search-react';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { searchTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  label: {\n    textTransform: 'capitalize',\n  },\n  chips: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    marginTop: theme.spacing(1),\n  },\n  chip: {\n    margin: 2,\n  },\n}));\n\n/**\n * Props for {@link SearchType}.\n *\n * @public\n */\nexport type SearchTypeProps = {\n  className?: string;\n  name: string;\n  values?: string[];\n  defaultValue?: string[] | string | null;\n};\n\n/**\n * @public\n */\nconst SearchType = (props: SearchTypeProps) => {\n  const { className, defaultValue, name, values = [] } = props;\n  const classes = useStyles();\n  const { types, setTypes } = useSearch();\n  const { t } = useTranslationRef(searchTranslationRef);\n\n  useEffectOnce(() => {\n    if (!types.length) {\n      if (defaultValue && Array.isArray(defaultValue)) {\n        setTypes(defaultValue);\n      } else if (defaultValue) {\n        setTypes([defaultValue]);\n      }\n    }\n  });\n\n  const handleChange = (e: ChangeEvent<{ value: unknown }>) => {\n    const value = e.target.value as string[];\n    setTypes(value as string[]);\n  };\n\n  return (\n    <FormControl\n      className={className}\n      variant=\"filled\"\n      fullWidth\n      data-testid=\"search-typefilter-next\"\n    >\n      <InputLabel className={classes.label} margin=\"dense\">\n        {name}\n      </InputLabel>\n      <Select\n        multiple\n        variant=\"outlined\"\n        value={types}\n        onChange={handleChange}\n        placeholder={t('searchType.allResults')}\n        renderValue={selected => (\n          <div className={classes.chips}>\n            {(selected as string[]).map(value => (\n              <Chip\n                key={value}\n                label={value}\n                className={classes.chip}\n                size=\"small\"\n              />\n            ))}\n          </div>\n        )}\n      >\n        {values.map((value: string) => (\n          <MenuItem key={value} value={value}>\n            <Checkbox checked={types.indexOf(value) > -1} />\n            <ListItemText primary={value} />\n          </MenuItem>\n        ))}\n      </Select>\n    </FormControl>\n  );\n};\n\n/**\n * A control surface for the search query's \"types\" property, displayed as a\n * single-select collapsible accordion suitable for use in faceted search UIs.\n * @public\n */\nSearchType.Accordion = (props: SearchTypeAccordionProps) => {\n  return <SearchTypeAccordion {...props} />;\n};\n\n/**\n * A control surface for the search query's \"types\" property, displayed as a\n * tabs suitable for use in faceted search UIs.\n * @public\n */\nSearchType.Tabs = (props: SearchTypeTabsProps) => {\n  return <SearchTypeTabs {...props} />;\n};\n\nexport { SearchType };\nexport type { SearchTypeAccordionProps, SearchTypeTabsProps };\n"],"names":[],"mappings":"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"}

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

@@ -3,17 +3,20 @@ import SearchIcon from '@material-ui/icons/Search';
 import { SidebarItem } from '@backstage/core-components';
 import { SearchModal } from '../SearchModal/SearchModal.esm.js';
 import { SearchModalProvider, useSearchModal } from '../SearchModal/useSearchModal.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { searchTranslationRef } from '../../translation.esm.js';
 
 const SidebarSearchModalContent = (props) => {
   const { state, toggleModal } = useSearchModal();
   const Icon = props.icon ? props.icon : SearchIcon;
+  const { t } = useTranslationRef(searchTranslationRef);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       SidebarItem,
       {
         className: "search-icon",
         icon: Icon,
-        text: "Search",
+        text: t("sidebarSearchModal.title"),
         onClick: toggleModal
       }
     ),

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 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":";;;;;;AAqCA,MAAM,yBAAA,GAA4B,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAY,EAAA,GAAI,cAAe,EAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,UAAA;AAEvC,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,aAAA;AAAA,QACV,IAAM,EAAA,IAAA;AAAA,QACN,IAAK,EAAA,QAAA;AAAA,QACL,OAAS,EAAA;AAAA;AAAA,KACX;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,WAAA;AAAA,QACA,sBAAsB,KAAM,CAAA,oBAAA;AAAA,QAC5B,UAAU,KAAM,CAAA;AAAA;AAAA;AAClB,GACF,EAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,2BACG,mBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,yBAA2B,EAAA,EAAA,GAAG,OAAO,CACxC,EAAA,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 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';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { searchTranslationRef } from '../../translation';\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  const { t } = useTranslationRef(searchTranslationRef);\n\n  return (\n    <>\n      <SidebarItem\n        className=\"search-icon\"\n        icon={Icon}\n        text={t('sidebarSearchModal.title')}\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":";;;;;;;;AAuCA,MAAM,yBAAA,GAA4B,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAY,EAAA,GAAI,cAAe,EAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,UAAA;AACvC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,aAAA;AAAA,QACV,IAAM,EAAA,IAAA;AAAA,QACN,IAAA,EAAM,EAAE,0BAA0B,CAAA;AAAA,QAClC,OAAS,EAAA;AAAA;AAAA,KACX;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,WAAA;AAAA,QACA,sBAAsB,KAAM,CAAA,oBAAA;AAAA,QAC5B,UAAU,KAAM,CAAA;AAAA;AAAA;AAClB,GACF,EAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,2BACG,mBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,yBAA2B,EAAA,EAAA,GAAG,OAAO,CACxC,EAAA,CAAA;AAEJ;;;;"}

package/dist/translation.esm.js

@@ -0,0 +1,27 @@
+import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
+
+const searchTranslationRef = createTranslationRef({
+  id: "search",
+  messages: {
+    searchModal: {
+      viewFullResults: "View Full Results"
+    },
+    searchType: {
+      allResults: "All Results",
+      tabs: {
+        allTitle: "All"
+      },
+      accordion: {
+        allTitle: "All",
+        collapse: "Collapse",
+        numberOfResults: "{{number}} results"
+      }
+    },
+    sidebarSearchModal: {
+      title: "Search"
+    }
+  }
+});
+
+export { searchTranslationRef };
+//# sourceMappingURL=translation.esm.js.map

package/dist/translation.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2025 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 { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * @alpha\n */\nexport const searchTranslationRef = createTranslationRef({\n  id: 'search',\n  messages: {\n    searchModal: {\n      viewFullResults: 'View Full Results',\n    },\n    searchType: {\n      allResults: 'All Results',\n      tabs: {\n        allTitle: 'All',\n      },\n      accordion: {\n        allTitle: 'All',\n        collapse: 'Collapse',\n        numberOfResults: '{{number}} results',\n      },\n    },\n    sidebarSearchModal: {\n      title: 'Search',\n    },\n  },\n});\n"],"names":[],"mappings":";;AAqBO,MAAM,uBAAuB,oBAAqB,CAAA;AAAA,EACvD,EAAI,EAAA,QAAA;AAAA,EACJ,QAAU,EAAA;AAAA,IACR,WAAa,EAAA;AAAA,MACX,eAAiB,EAAA;AAAA,KACnB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,UAAY,EAAA,aAAA;AAAA,MACZ,IAAM,EAAA;AAAA,QACJ,QAAU,EAAA;AAAA,OACZ;AAAA,MACA,SAAW,EAAA;AAAA,QACT,QAAU,EAAA,KAAA;AAAA,QACV,QAAU,EAAA,UAAA;AAAA,QACV,eAAiB,EAAA;AAAA;AACnB,KACF;AAAA,IACA,kBAAoB,EAAA;AAAA,MAClB,KAAO,EAAA;AAAA;AACT;AAEJ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search",
-  "version": "1.4.26-next.2",
+  "version": "1.4.26-next.3",
   "description": "The Backstage plugin that provides your backstage app with search",
   "backstage": {
     "role": "frontend-plugin",
@@ -70,14 +70,14 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-compat-api": "0.4.2-next.2",
+    "@backstage/core-compat-api": "0.4.2-next.3",
     "@backstage/core-components": "0.17.2-next.1",
     "@backstage/core-plugin-api": "1.10.7-next.0",
     "@backstage/errors": "1.2.7",
     "@backstage/frontend-plugin-api": "0.10.2-next.1",
-    "@backstage/plugin-catalog-react": "1.18.0-next.2",
+    "@backstage/plugin-catalog-react": "1.18.0-next.3",
     "@backstage/plugin-search-common": "1.2.18-next.0",
-    "@backstage/plugin-search-react": "1.9.0-next.1",
+    "@backstage/plugin-search-react": "1.9.0-next.2",
     "@backstage/types": "1.2.1",
     "@backstage/version-bridge": "1.0.11",
     "@material-ui/core": "^4.12.2",
@@ -86,10 +86,10 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.32.1-next.2",
-    "@backstage/core-app-api": "1.16.2-next.0",
-    "@backstage/dev-utils": "1.1.10-next.2",
-    "@backstage/test-utils": "1.7.8-next.1",
+    "@backstage/cli": "0.32.1-next.3",
+    "@backstage/core-app-api": "1.17.0-next.1",
+    "@backstage/dev-utils": "1.1.10-next.3",
+    "@backstage/test-utils": "1.7.8-next.2",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",