Be able to pass through index used for index ranking

Co-authored-by: Camila Loiola <camilaibs@gmail.com>
Signed-off-by: Emma Indal <emma.indahl@gmail.com>

plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx

@@ -282,10 +282,6 @@ export type SearchResultGroupLayoutProps<FilterOption> = ListProps & {
    * Icon that representing a result group.
    */
   icon: JSX.Element;
-  /**
-   * Optional component to render when no results. Default to <EmptyState /> component.
-   */
-  noResultsComponent?: React.ReactNode;
   /**
    * The results group title content, it could be a text or an element.
    */
@@ -310,7 +306,11 @@ export type SearchResultGroupLayoutProps<FilterOption> = ListProps & {
    * Function to customize how filter options are rendered.
    * @remarks Defaults to a menu item where its value and label bounds to the option string.
    */
-  renderFilterOption?: (filterOption: FilterOption) => JSX.Element;
+  renderFilterOption?: (
+    value: FilterOption,
+    index: number,
+    array: FilterOption[],
+  ) => JSX.Element | null;
   /**
    * A list of search filter keys, also known as filter field names.
    */
@@ -326,7 +326,11 @@ export type SearchResultGroupLayoutProps<FilterOption> = ListProps & {
   /**
    * Function to customize how result items are rendered.
    */
-  renderResultItem?: (resultItem: SearchResult) => JSX.Element;
+  renderResultItem?: (
+    value: SearchResult,
+    index: number,
+    array: SearchResult[],
+  ) => JSX.Element | null;
   /**
    * If defined, will render a default error panel.
    */
@@ -335,6 +339,10 @@ export type SearchResultGroupLayoutProps<FilterOption> = ListProps & {
    * If defined, will render a default loading progress.
    */
   loading?: boolean;
+  /**
+   * Optional component to render when no results. Default to <EmptyState /> component.
+   */
+  noResultsComponent?: ReactNode;
 };
 
 /**
@@ -351,20 +359,34 @@ export function SearchResultGroupLayout<FilterOption>(
   const {
     loading,
     error,
-    noResultsComponent = (
-      <EmptyState missing="data" title="Sorry, no results were found" />
-    ),
     icon,
     title,
     titleProps = {},
-    link,
+    link = (
+      <>
+        See all
+        <ArrowRightIcon className={classes.listSubheaderLinkIcon} />
+      </>
+    ),
     linkProps = {},
     filterOptions,
-    renderFilterOption,
+    renderFilterOption = filterOption => (
+      <MenuItem key={String(filterOption)} value={String(filterOption)}>
+        {filterOption}
+      </MenuItem>
+    ),
     filterFields,
     renderFilterField,
     resultItems,
-    renderResultItem,
+    renderResultItem = resultItem => (
+      <DefaultResultListItem
+        key={resultItem.document.location}
+        result={resultItem.document}
+      />
+    ),
+    noResultsComponent = (
+      <EmptyState missing="data" title="Sorry, no results were found" />
+    ),
     ...rest
   } = props;
 
@@ -408,30 +430,14 @@ export function SearchResultGroupLayout<FilterOption>(
             onClick={handleClose}
             keepMounted
           >
-            {filterOptions.map(filterOption =>
-              renderFilterOption ? (
-                renderFilterOption(filterOption)
-              ) : (
-                <MenuItem
-                  key={String(filterOption)}
-                  value={String(filterOption)}
-                >
-                  {filterOption}
-                </MenuItem>
-              ),
-            )}
+            {filterOptions.map(renderFilterOption)}
           </Menu>
         ) : null}
         {filterFields?.map(
           filterField => renderFilterField?.(filterField) ?? null,
         )}
         <Link className={classes.listSubheaderLink} to="/search" {...linkProps}>
-          {link ?? (
-            <>
-              See all
-              <ArrowRightIcon className={classes.listSubheaderLinkIcon} />
-            </>
-          )}
+          {link}
         </Link>
       </ListSubheader>
       {loading ? <Progress /> : null}
@@ -442,7 +448,7 @@ export function SearchResultGroupLayout<FilterOption>(
         />
       ) : null}
       {!loading && !error && resultItems?.length
-        ? resultItems.map(resultItem => renderResultItem?.(resultItem) ?? null)
+        ? resultItems.map(renderResultItem)
         : null}
       {!loading && !error && !resultItems?.length ? (
         <ListItem>{noResultsComponent}</ListItem>
@@ -480,9 +486,6 @@ export function SearchResultGroup<FilterOption>(
   const {
     query,
     linkProps = {},
-    renderResultItem = ({ document }) => (
-      <DefaultResultListItem key={document.location} result={document} />
-    ),
     disableRenderingWithNoResults,
     ...rest
   } = props;
@@ -506,8 +509,9 @@ export function SearchResultGroup<FilterOption>(
     >
       <SearchResultState query={query}>
         {({ loading, error, value }) => {
-          if (disableRenderingWithNoResults && value?.results.length === 0)
+          if (!value?.results?.length && disableRenderingWithNoResults) {
             return null;
+          }
 
           return (
             <SearchResultGroupLayout
@@ -516,7 +520,6 @@ export function SearchResultGroup<FilterOption>(
               error={error}
               linkProps={{ to, ...linkProps }}
               resultItems={value?.results}
-              renderResultItem={renderResultItem}
               filterFields={Object.keys(query.filters ?? {})}
             />
           );