Updating documentation for customization of SidebarSearchModal children

Signed-off-by: Joshua Jung <joshua.p.jung@gmail.com>

docs/features/search/how-to-guides.md

@@ -160,11 +160,14 @@ const highlightOverride = {
 
 ## How to render search results using extensions
 
-Extensions for search results let you customize components used to render search result items, It is possible to provide your own search result item extensions or use the ones provided by plugin packages:
+Extensions for search results let you customize components used to render search result items, It is possible to provide your own search result item extensions or use the ones provided by plugin packages.
 
 ### 1. Providing an extension in your plugin package
 
-Using the example below, you can provide an extension to be used as a default result item:
+> Note: You must use the `plugin.provide()` function to make a search item renderer available. Unlike rendering a list in a standard MUI Table or similar, you cannot simply provide
+> a rendering function to the `<SearchResult />` component.
+
+Using the example below, you can provide an extension to be used as a search result item:
 
 ```tsx title="plugins/your-plugin/src/plugin.ts"
 import { createPlugin } from '@backstage/core-plugin-api';
@@ -214,7 +217,7 @@ export const YourSearchResultListItemExtension = plugin.provide(
 );
 ```
 
-Remember to export your new extension:
+Remember to export your new extension via your plugin's `index.ts` so that it is available from within your app:
 
 ```tsx title="plugins/your-plugin/src/index.ts"
 export { YourSearchResultListItem } from './plugin.ts';
@@ -222,9 +225,12 @@ export { YourSearchResultListItem } from './plugin.ts';
 
 For more details, see the [createSearchResultListItemExtension](https://backstage.io/docs/reference/plugin-search-react.createsearchresultlistitemextension) API reference.
 
-### 2. Using an extension in your Backstage app
+### 2. Custom search result extension in the SearchPage
 
-Now that you know how a search result item is provided, let's finally see how they can be used, for example, to compose a page in your application:
+Once you have exposed your item renderer via the `plugin.provide()` function, you can now override the default search item renderers and tell the `<SearchResult>` component
+which renderers to use. Note that the order of the renderers matters! The first one that matches via its predicate function will be used.
+
+Here is an example of customizing your `SearchPage`:
 
 ```tsx title="packages/app/src/components/searchPage.tsx"
 import React from 'react';
@@ -276,9 +282,38 @@ const SearchPage = () => (
 export const searchPage = <SearchPage />;
 ```
 
-> **Important**: A default result item extension should be placed as the last child, so it can be used only when no other extensions match the result being rendered. If a non-default extension is specified, the `DefaultResultListItem` component will be used.
+> **Important**: A default result item extension (one that does not have a predicate) should be placed as the last child, so it can be used only when no other extensions match the result being rendered.
+> If a non-default extension is specified, the `DefaultResultListItem` component will be used.
 
-As another example, here's a search modal that renders results with extensions:
+### 2. Custom search result extension in the SidebarSearchModal
+
+You may be using the SidebarSearchModal component. In this case, you can customize the search items in this component as follows:
+
+```tsx title="packages/app/src/components/Root/Root.tsx"
+import { SidebarSearchModal } from '@backstage/plugin-search';
+...
+export const Root = ({ children }: PropsWithChildren<{}>) => {
+  const styles = useStyles();
+
+  return <SidebarPage>
+    <Sidebar>
+      ...
+      <SidebarSearchModal searchResultChildren={[
+        /* Provide a custom Extension search item renderer */
+        <CustomSearchResultListItem icon={<CatalogIcon />} />,
+        /* Provide an existing search item renderer */
+        <TechDocsSearchResultListItem icon={<DocsIcon />} />
+      ]} />
+      ...
+    </Sidebar>
+    {children}
+  </SidebarPage>;
+};
+```
+
+### 3. Custom search result extension in a custom SearchModal
+
+Assuming you have completely customized your SearchModal, here's an example that renders results with extensions:
 
 ```tsx title="packages/app/src/components/searchModal.tsx"
 import React from 'react';

plugins/search/api-report.md

@@ -3,8 +3,6 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-/// <reference types="react" />
-
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react';
@@ -12,6 +10,7 @@ import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { SearchBarBaseProps } from '@backstage/plugin-search-react';
+import { SearchResultSet } from '@backstage/plugin-search-common';
 
 // @public (undocumented)
 export const HomePageSearchBar: (
@@ -30,12 +29,12 @@ export const Router: () => React_2.JSX.Element;
 export const SearchModal: (props: SearchModalProps) => React_2.JSX.Element;
 
 // @public (undocumented)
-export interface SearchModalChildrenProps {
+export interface SearchModalChildrenProps extends SearchResultChildrenProvider {
   toggleModal: () => void;
 }
 
 // @public (undocumented)
-export interface SearchModalProps {
+export interface SearchModalProps extends SearchResultChildrenProvider {
   children?: (props: SearchModalChildrenProps) => JSX.Element;
   hidden?: boolean;
   open?: boolean;
@@ -76,6 +75,13 @@ const searchPlugin: BackstagePlugin<
 export { searchPlugin as plugin };
 export { searchPlugin };
 
+// @public (undocumented)
+export type SearchResultChildrenProvider = {
+  searchResultChildren?:
+    | ReactNode
+    | ((resultSet: SearchResultSet) => JSX.Element);
+};
+
 // @public (undocumented)
 export const SearchType: {
   (props: SearchTypeProps): React_2.JSX.Element;
@@ -118,10 +124,10 @@ export const SidebarSearch: (props: SidebarSearchProps) => React_2.JSX.Element;
 // @public (undocumented)
 export const SidebarSearchModal: (
   props: SidebarSearchModalProps,
-) => JSX_2.Element;
+) => JSX.Element | null;
 
 // @public
-export type SidebarSearchModalProps = {
+export type SidebarSearchModalProps = SearchResultChildrenProvider & {
   icon?: IconComponent;
   children?: (props: SearchModalChildrenProps) => JSX.Element;
 };

plugins/search/src/index.ts

@@ -43,6 +43,7 @@ export type {
 export { SidebarSearch } from './components/SidebarSearch';
 export type { SidebarSearchProps } from './components/SidebarSearch';
 export type { SidebarSearchModalProps } from './components/SidebarSearchModal';
+export type { SearchResultChildrenProvider } from './plugin';
 
 export {
   HomePageSearchBar,

plugins/search/src/plugin.ts

@@ -27,16 +27,10 @@ import {
 } from '@backstage/core-plugin-api';
 import { ReactNode } from 'react';
 import { SearchResultSet } from '@backstage/plugin-search-common';
+import { SidebarSearchModalProps } from './components/SidebarSearchModal';
 
 /**
- * This type allows us to pass children to the <SearchResult> component via the <SideBarSearchModal />.
- *
- * This allows us to customize the search result items displayed in the SidebarSearchModal, like so:
- *
- *     <SidebarSearchModal searchResultChildren={[
- *       <MyCustomSearchResultListItem />,
- *       <TechDocsSearchResultListItem icon={<DocsIcon />} />
- *     ]} />
+ * @public
  */
 export type SearchResultChildrenProvider = {
   searchResultChildren?:
@@ -82,7 +76,7 @@ export const SearchPage = searchPlugin.provide(
  * @public
  */
 export const SidebarSearchModal = searchPlugin.provide<
-  (props: SearchResultChildrenProvider) => JSX.Element | null
+  (props: SidebarSearchModalProps) => JSX.Element | null
 >(
   createComponentExtension({
     name: 'SidebarSearchModal',