@backstage/plugin-search-react 1.2.2-next.0 → 1.3.0-next.2

package/dist/index.esm.js

@@ -45,10 +45,7 @@ const HighlightedSearchResultText = ({
     [postTag, preTag, text]
   );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, terms.map(
-    (t, idx) => t.includes(preTag) ? /* @__PURE__ */ React.createElement("mark", {
-      className: classes.highlight,
-      key: idx
-    }, t.replace(new RegExp(`${preTag}|${postTag}`, "g"), "")) : t
+    (t, idx) => t.includes(preTag) ? /* @__PURE__ */ React.createElement("mark", { className: classes.highlight, key: idx }, t.replace(new RegExp(`${preTag}|${postTag}`, "g"), "")) : t
   ));
 };
 
@@ -139,38 +136,43 @@ const useSearchContextValue = (initialValue = searchInitialState) => {
 const LocalSearchContext = (props) => {
   const { initialState, children } = props;
   const value = useSearchContextValue(initialState);
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: { searchTypes: value.types.sort().join(",") }
-  }, /* @__PURE__ */ React.createElement(SearchContext.Provider, {
-    value: createVersionedValueMap({ 1: value })
-  }, children));
+  return /* @__PURE__ */ React.createElement(
+    AnalyticsContext,
+    {
+      attributes: { searchTypes: value.types.sort().join(",") }
+    },
+    /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: createVersionedValueMap({ 1: value }) }, children)
+  );
 };
 const SearchContextProvider = (props) => {
   const { initialState, inheritParentContextIfAvailable, children } = props;
   const hasParentContext = useSearchContextCheck();
-  return hasParentContext && inheritParentContextIfAvailable ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement(LocalSearchContext, {
-    initialState
-  }, children);
+  return hasParentContext && inheritParentContextIfAvailable ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement(LocalSearchContext, { initialState }, children);
 };
 
 const TrackSearch = ({ children }) => {
+  var _a, _b;
+  const useHasChanged = (value) => {
+    const previousVal = usePrevious(value);
+    return previousVal !== value;
+  };
   const analytics = useAnalytics();
-  const { term } = useSearch();
+  const { term, result } = useSearch();
+  const numberOfResults = (_b = (_a = result.value) == null ? void 0 : _a.numberOfResults) != null ? _b : void 0;
+  const hasStartedLoading = useHasChanged(result.loading);
+  const hasFinishedLoading = hasStartedLoading && !result.loading;
   useEffect(() => {
-    if (term) {
-      analytics.captureEvent("search", term);
+    if (term && hasFinishedLoading) {
+      analytics.captureEvent("search", term, {
+        value: numberOfResults
+      });
     }
-  }, [analytics, term]);
+  }, [analytics, term, numberOfResults, hasFinishedLoading]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
 function withContext$1(Component) {
-  return forwardRef((props, ref) => /* @__PURE__ */ React.createElement(SearchContextProvider, {
-    inheritParentContextIfAvailable: true
-  }, /* @__PURE__ */ React.createElement(Component, {
-    ...props,
-    ref
-  })));
+  return forwardRef((props, ref) => /* @__PURE__ */ React.createElement(SearchContextProvider, { inheritParentContextIfAvailable: true }, /* @__PURE__ */ React.createElement(Component, { ...props, ref })));
 }
 const SearchBarBase = withContext$1(
   forwardRef((props, ref) => {
@@ -222,33 +224,24 @@ const SearchBarBase = withContext$1(
       }
     }, [onChange, onClear]);
     const placeholder = defaultPlaceholder != null ? defaultPlaceholder : `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
-    const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
-      position: "start"
-    }, /* @__PURE__ */ React.createElement(IconButton, {
-      "aria-label": "Query",
-      size: "small",
-      disabled: true
-    }, /* @__PURE__ */ React.createElement(SearchIcon, null)));
-    const endAdornment = /* @__PURE__ */ React.createElement(InputAdornment, {
-      position: "end"
-    }, /* @__PURE__ */ React.createElement(IconButton, {
-      "aria-label": "Clear",
-      size: "small",
-      onClick: handleClear
-    }, /* @__PURE__ */ React.createElement(ClearButton, null)));
-    return /* @__PURE__ */ React.createElement(TrackSearch, null, /* @__PURE__ */ React.createElement(InputBase, {
-      "data-testid": "search-bar-next",
-      ref,
-      value,
-      placeholder,
-      startAdornment,
-      endAdornment: clearButton ? endAdornment : defaultEndAdornment,
-      inputProps: { "aria-label": "Search", ...defaultInputProps },
-      fullWidth,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      ...rest
-    }));
+    const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(IconButton, { "aria-label": "Query", size: "small", disabled: true }, /* @__PURE__ */ React.createElement(SearchIcon, null)));
+    const endAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(IconButton, { "aria-label": "Clear", size: "small", onClick: handleClear }, /* @__PURE__ */ React.createElement(ClearButton, null)));
+    return /* @__PURE__ */ React.createElement(TrackSearch, null, /* @__PURE__ */ React.createElement(
+      InputBase,
+      {
+        "data-testid": "search-bar-next",
+        ref,
+        value,
+        placeholder,
+        startAdornment,
+        endAdornment: clearButton ? endAdornment : defaultEndAdornment,
+        inputProps: { "aria-label": "Search", ...defaultInputProps },
+        fullWidth,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ...rest
+      }
+    ));
   })
 );
 const SearchBar = withContext$1(
@@ -270,23 +263,26 @@ const SearchBar = withContext$1(
       },
       [onChange, setTerm]
     );
-    return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-      attributes: { pluginId: "search", extension: "SearchBar" }
-    }, /* @__PURE__ */ React.createElement(SearchBarBase, {
-      ...rest,
-      ref,
-      value: term,
-      onChange: handleChange
-    }));
+    return /* @__PURE__ */ React.createElement(
+      AnalyticsContext,
+      {
+        attributes: { pluginId: "search", extension: "SearchBar" }
+      },
+      /* @__PURE__ */ React.createElement(
+        SearchBarBase,
+        {
+          ...rest,
+          ref,
+          value: term,
+          onChange: handleChange
+        }
+      )
+    );
   })
 );
 
 const withContext = (Component) => {
-  return (props) => /* @__PURE__ */ React.createElement(SearchContextProvider, {
-    inheritParentContextIfAvailable: true
-  }, /* @__PURE__ */ React.createElement(Component, {
-    ...props
-  }));
+  return (props) => /* @__PURE__ */ React.createElement(SearchContextProvider, { inheritParentContextIfAvailable: true }, /* @__PURE__ */ React.createElement(Component, { ...props }));
 };
 const SearchAutocomplete = withContext(
   function SearchAutocompleteComponent(props) {
@@ -332,33 +328,42 @@ const SearchAutocomplete = withContext(
         InputProps: { ref, endAdornment },
         InputLabelProps,
         ...params
-      }) => /* @__PURE__ */ React.createElement(SearchBar, {
-        ...params,
-        ref,
-        clearButton: false,
-        value: inputValue,
-        placeholder: inputPlaceholder,
-        debounceTime: inputDebounceTime,
-        endAdornment: loading ? /* @__PURE__ */ React.createElement(CircularProgress, {
-          "data-testid": "search-autocomplete-progressbar",
-          color: "inherit",
-          size: 20
-        }) : endAdornment
-      }),
+      }) => /* @__PURE__ */ React.createElement(
+        SearchBar,
+        {
+          ...params,
+          ref,
+          clearButton: false,
+          value: inputValue,
+          placeholder: inputPlaceholder,
+          debounceTime: inputDebounceTime,
+          endAdornment: loading ? /* @__PURE__ */ React.createElement(
+            CircularProgress,
+            {
+              "data-testid": "search-autocomplete-progressbar",
+              color: "inherit",
+              size: 20
+            }
+          ) : endAdornment
+        }
+      ),
       [loading, inputValue, inputPlaceholder, inputDebounceTime]
     );
-    return /* @__PURE__ */ React.createElement(Autocomplete, {
-      ...rest,
-      "data-testid": dataTestId,
-      value,
-      onChange: handleChange,
-      options,
-      getOptionLabel,
-      renderInput,
-      freeSolo,
-      fullWidth,
-      clearOnBlur
-    });
+    return /* @__PURE__ */ React.createElement(
+      Autocomplete,
+      {
+        ...rest,
+        "data-testid": dataTestId,
+        value,
+        onChange: handleChange,
+        options,
+        getOptionLabel,
+        renderInput,
+        freeSolo,
+        fullWidth,
+        clearOnBlur
+      }
+    );
   }
 );
 
@@ -369,13 +374,16 @@ const SearchAutocompleteDefaultOption = ({
   secondaryText,
   secondaryTextTypographyProps,
   disableTextTypography
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, icon ? /* @__PURE__ */ React.createElement(ListItemIcon, null, icon) : null, /* @__PURE__ */ React.createElement(ListItemText, {
-  primary: primaryText,
-  primaryTypographyProps: primaryTextTypographyProps,
-  secondary: secondaryText,
-  secondaryTypographyProps: secondaryTextTypographyProps,
-  disableTypography: disableTextTypography
-}));
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, icon ? /* @__PURE__ */ React.createElement(ListItemIcon, null, icon) : null, /* @__PURE__ */ React.createElement(
+  ListItemText,
+  {
+    primary: primaryText,
+    primaryTypographyProps: primaryTextTypographyProps,
+    secondary: secondaryText,
+    secondaryTypographyProps: secondaryTextTypographyProps,
+    disableTypography: disableTextTypography
+  }
+));
 
 const useAsyncFilterValues = (fn, inputValue, defaultValues = [], debounce = 250) => {
   const valuesMemo = useRef({});
@@ -455,32 +463,34 @@ const AutocompleteFilter = (props) => {
       return { ...others };
     });
   };
-  const renderInput = (params) => /* @__PURE__ */ React.createElement(TextField, {
-    ...params,
-    name: "search",
-    variant: "outlined",
-    label,
-    fullWidth: true
-  });
-  const renderTags = (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ React.createElement(Chip, {
-    label: option,
-    color: "primary",
-    ...getTagProps({ index })
-  }));
-  return /* @__PURE__ */ React.createElement(Autocomplete, {
-    filterSelectedOptions,
-    limitTags,
-    multiple,
-    className,
-    id: `${multiple ? "multi-" : ""}select-filter-${name}--select`,
-    options: values || [],
-    loading,
-    value: filterValue,
-    onChange: handleChange,
-    onInputChange: (_, newValue) => setInputValue(newValue),
-    renderInput,
-    renderTags
-  });
+  const renderInput = (params) => /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      ...params,
+      name: "search",
+      variant: "outlined",
+      label,
+      fullWidth: true
+    }
+  );
+  const renderTags = (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ React.createElement(Chip, { label: option, color: "primary", ...getTagProps({ index }) }));
+  return /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      filterSelectedOptions,
+      limitTags,
+      multiple,
+      className,
+      id: `${multiple ? "multi-" : ""}select-filter-${name}--select`,
+      options: values || [],
+      loading,
+      value: filterValue,
+      onChange: handleChange,
+      onInputChange: (_, newValue) => setInputValue(newValue),
+      renderInput,
+      renderTags
+    }
+  );
 };
 
 const useStyles$2 = makeStyles({
@@ -519,29 +529,38 @@ const CheckboxFilter = (props) => {
       return items.length ? { ...others, [name]: items } : others;
     });
   };
-  return /* @__PURE__ */ React.createElement(FormControl, {
-    className,
-    disabled: loading,
-    fullWidth: true,
-    "data-testid": "search-checkboxfilter-next"
-  }, label ? /* @__PURE__ */ React.createElement(FormLabel, {
-    className: classes.label
-  }, label) : null, values.map((value) => {
-    var _a;
-    return /* @__PURE__ */ React.createElement(FormControlLabel, {
-      key: value,
-      control: /* @__PURE__ */ React.createElement(Checkbox, {
-        color: "primary",
-        tabIndex: -1,
-        inputProps: { "aria-labelledby": value },
-        value,
-        name: value,
-        onChange: handleChange,
-        checked: ((_a = filters[name]) != null ? _a : []).includes(value)
-      }),
-      label: value
-    });
-  }));
+  return /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      className,
+      disabled: loading,
+      fullWidth: true,
+      "data-testid": "search-checkboxfilter-next"
+    },
+    label ? /* @__PURE__ */ React.createElement(FormLabel, { className: classes.label }, label) : null,
+    values.map((value) => {
+      var _a;
+      return /* @__PURE__ */ React.createElement(
+        FormControlLabel,
+        {
+          key: value,
+          control: /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              color: "primary",
+              tabIndex: -1,
+              inputProps: { "aria-labelledby": value },
+              value,
+              name: value,
+              onChange: handleChange,
+              checked: ((_a = filters[name]) != null ? _a : []).includes(value)
+            }
+          ),
+          label: value
+        }
+      );
+    })
+  );
 };
 const SelectFilter = (props) => {
   const {
@@ -572,44 +591,35 @@ const SelectFilter = (props) => {
       return value ? { ...others, [name]: value } : others;
     });
   };
-  return /* @__PURE__ */ React.createElement(FormControl, {
-    disabled: loading,
-    className,
-    variant: "filled",
-    fullWidth: true,
-    "data-testid": "search-selectfilter-next"
-  }, label ? /* @__PURE__ */ React.createElement(InputLabel, {
-    className: classes.label,
-    margin: "dense"
-  }, label) : null, /* @__PURE__ */ React.createElement(Select, {
-    variant: "outlined",
-    value: filters[name] || "",
-    onChange: handleChange
-  }, /* @__PURE__ */ React.createElement(MenuItem, {
-    value: ""
-  }, /* @__PURE__ */ React.createElement("em", null, "All")), values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, {
-    key: value,
-    value
-  }, value))));
+  return /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      disabled: loading,
+      className,
+      variant: "filled",
+      fullWidth: true,
+      "data-testid": "search-selectfilter-next"
+    },
+    label ? /* @__PURE__ */ React.createElement(InputLabel, { className: classes.label, margin: "dense" }, label) : null,
+    /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        variant: "outlined",
+        value: filters[name] || "",
+        onChange: handleChange
+      },
+      /* @__PURE__ */ React.createElement(MenuItem, { value: "" }, /* @__PURE__ */ React.createElement("em", null, "All")),
+      values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, { key: value, value }, value))
+    )
+  );
 };
 const SearchFilter = ({
   component: Element,
   ...props
-}) => /* @__PURE__ */ React.createElement(Element, {
-  ...props
-});
-SearchFilter.Checkbox = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
-  ...props,
-  component: CheckboxFilter
-});
-SearchFilter.Select = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
-  ...props,
-  component: SelectFilter
-});
-SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
-  ...props,
-  component: AutocompleteFilter
-});
+}) => /* @__PURE__ */ React.createElement(Element, { ...props });
+SearchFilter.Checkbox = (props) => /* @__PURE__ */ React.createElement(SearchFilter, { ...props, component: CheckboxFilter });
+SearchFilter.Select = (props) => /* @__PURE__ */ React.createElement(SearchFilter, { ...props, component: SelectFilter });
+SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(SearchFilter, { ...props, component: AutocompleteFilter });
 
 const SearchResultContext = (props) => {
   const { children } = props;
@@ -628,41 +638,39 @@ const SearchResultApi = (props) => {
 };
 const SearchResultState = (props) => {
   const { query, children } = props;
-  return query ? /* @__PURE__ */ React.createElement(SearchResultApi, {
-    query
-  }, children) : /* @__PURE__ */ React.createElement(SearchResultContext, null, children);
+  return query ? /* @__PURE__ */ React.createElement(SearchResultApi, { query }, children) : /* @__PURE__ */ React.createElement(SearchResultContext, null, children);
 };
 const SearchResultComponent = (props) => {
   const { query, children } = props;
-  return /* @__PURE__ */ React.createElement(SearchResultState, {
-    query
-  }, ({ loading, error, value }) => {
+  return /* @__PURE__ */ React.createElement(SearchResultState, { query }, ({ loading, error, value }) => {
     if (loading) {
       return /* @__PURE__ */ React.createElement(Progress, null);
     }
     if (error) {
-      return /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
-        title: "Error encountered while fetching search results",
-        error
-      });
+      return /* @__PURE__ */ React.createElement(
+        ResponseErrorPanel,
+        {
+          title: "Error encountered while fetching search results",
+          error
+        }
+      );
     }
     if (!(value == null ? void 0 : value.results.length)) {
-      return /* @__PURE__ */ React.createElement(EmptyState, {
-        missing: "data",
-        title: "Sorry, no results were found"
-      });
+      return /* @__PURE__ */ React.createElement(EmptyState, { missing: "data", title: "Sorry, no results were found" });
     }
     return children(value);
   });
 };
-const SearchResult = (props) => /* @__PURE__ */ React.createElement(AnalyticsContext, {
-  attributes: {
-    pluginId: "search",
-    extension: "SearchResult"
-  }
-}, /* @__PURE__ */ React.createElement(SearchResultComponent, {
-  ...props
-}));
+const SearchResult = (props) => /* @__PURE__ */ React.createElement(
+  AnalyticsContext,
+  {
+    attributes: {
+      pluginId: "search",
+      extension: "SearchResult"
+    }
+  },
+  /* @__PURE__ */ React.createElement(SearchResultComponent, { ...props })
+);
 
 const useStyles$1 = makeStyles((theme) => ({
   root: {
@@ -678,20 +686,25 @@ const SearchResultPager = () => {
   if (!fetchNextPage && !fetchPreviousPage) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null);
   }
-  return /* @__PURE__ */ React.createElement("nav", {
-    "aria-label": "pagination navigation",
-    className: classes.root
-  }, /* @__PURE__ */ React.createElement(Button, {
-    "aria-label": "previous page",
-    disabled: !fetchPreviousPage,
-    onClick: fetchPreviousPage,
-    startIcon: /* @__PURE__ */ React.createElement(ArrowBackIosIcon, null)
-  }, "Previous"), /* @__PURE__ */ React.createElement(Button, {
-    "aria-label": "next page",
-    disabled: !fetchNextPage,
-    onClick: fetchNextPage,
-    endIcon: /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, null)
-  }, "Next"));
+  return /* @__PURE__ */ React.createElement("nav", { "aria-label": "pagination navigation", className: classes.root }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-label": "previous page",
+      disabled: !fetchPreviousPage,
+      onClick: fetchPreviousPage,
+      startIcon: /* @__PURE__ */ React.createElement(ArrowBackIosIcon, null)
+    },
+    "Previous"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-label": "next page",
+      disabled: !fetchNextPage,
+      onClick: fetchNextPage,
+      endIcon: /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, null)
+    },
+    "Next"
+  ));
 };
 
 const encodePageCursor = (pageCursor) => {
@@ -728,28 +741,34 @@ const SearchPaginationBase = (props) => {
     },
     [onPageLimitChange]
   );
-  return /* @__PURE__ */ React.createElement(TablePagination, {
-    ...rest,
-    component: "div",
-    count,
-    page,
-    onPageChange: handlePageChange,
-    rowsPerPage,
-    labelRowsPerPage,
-    labelDisplayedRows,
-    rowsPerPageOptions,
-    onRowsPerPageChange: handleRowsPerPageChange
-  });
+  return /* @__PURE__ */ React.createElement(
+    TablePagination,
+    {
+      ...rest,
+      component: "div",
+      count,
+      page,
+      onPageChange: handlePageChange,
+      rowsPerPage,
+      labelRowsPerPage,
+      labelDisplayedRows,
+      rowsPerPageOptions,
+      onRowsPerPageChange: handleRowsPerPageChange
+    }
+  );
 };
 const SearchPagination = (props) => {
   const { pageLimit, setPageLimit, pageCursor, setPageCursor } = useSearch();
-  return /* @__PURE__ */ React.createElement(SearchPaginationBase, {
-    ...props,
-    limit: pageLimit,
-    onLimitChange: setPageLimit,
-    cursor: pageCursor,
-    onCursorChange: setPageCursor
-  });
+  return /* @__PURE__ */ React.createElement(
+    SearchPaginationBase,
+    {
+      ...props,
+      limit: pageLimit,
+      onLimitChange: setPageLimit,
+      cursor: pageCursor,
+      onCursorChange: setPageCursor
+    }
+  );
 };
 
 const DefaultResultListItemComponent = ({
@@ -767,44 +786,51 @@ const DefaultResultListItemComponent = ({
       value: rank
     });
   };
-  return /* @__PURE__ */ React.createElement(Link, {
-    noTrack: true,
-    to: result.location,
-    onClick: handleClick
-  }, /* @__PURE__ */ React.createElement(ListItem, {
-    alignItems: "center"
-  }, icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React.createElement(ListItemText, {
-    primaryTypographyProps: { variant: "h6" },
-    primary: (highlight == null ? void 0 : highlight.fields.title) ? /* @__PURE__ */ React.createElement(HighlightedSearchResultText, {
-      text: highlight.fields.title,
-      preTag: highlight.preTag,
-      postTag: highlight.postTag
-    }) : result.title,
-    secondary: /* @__PURE__ */ React.createElement("span", {
-      style: {
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: lineClamp,
-        overflow: "hidden"
-      }
-    }, (highlight == null ? void 0 : highlight.fields.text) ? /* @__PURE__ */ React.createElement(HighlightedSearchResultText, {
-      text: highlight.fields.text,
-      preTag: highlight.preTag,
-      postTag: highlight.postTag
-    }) : result.text)
-  }), secondaryAction && /* @__PURE__ */ React.createElement(Box, {
-    alignItems: "flex-end"
-  }, secondaryAction)), /* @__PURE__ */ React.createElement(Divider, null));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, { alignItems: "center" }, icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React.createElement(
+    ListItemText,
+    {
+      primaryTypographyProps: { variant: "h6" },
+      primary: /* @__PURE__ */ React.createElement(Link, { noTrack: true, to: result.location, onClick: handleClick }, (highlight == null ? void 0 : highlight.fields.title) ? /* @__PURE__ */ React.createElement(
+        HighlightedSearchResultText,
+        {
+          text: (highlight == null ? void 0 : highlight.fields.title) || "",
+          preTag: (highlight == null ? void 0 : highlight.preTag) || "",
+          postTag: (highlight == null ? void 0 : highlight.postTag) || ""
+        }
+      ) : result.title),
+      secondary: /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            display: "-webkit-box",
+            WebkitBoxOrient: "vertical",
+            WebkitLineClamp: lineClamp,
+            overflow: "hidden"
+          }
+        },
+        (highlight == null ? void 0 : highlight.fields.text) ? /* @__PURE__ */ React.createElement(
+          HighlightedSearchResultText,
+          {
+            text: highlight.fields.text,
+            preTag: highlight.preTag,
+            postTag: highlight.postTag
+          }
+        ) : result.text
+      )
+    }
+  ), secondaryAction && /* @__PURE__ */ React.createElement(Box, { alignItems: "flex-end" }, secondaryAction)), /* @__PURE__ */ React.createElement(Divider, null));
 };
 const HigherOrderDefaultResultListItem = (props) => {
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: {
-      pluginId: "search",
-      extension: "DefaultResultListItem"
-    }
-  }, /* @__PURE__ */ React.createElement(DefaultResultListItemComponent, {
-    ...props
-  }));
+  return /* @__PURE__ */ React.createElement(
+    AnalyticsContext,
+    {
+      attributes: {
+        pluginId: "search",
+        extension: "DefaultResultListItem"
+      }
+    },
+    /* @__PURE__ */ React.createElement(DefaultResultListItemComponent, { ...props })
+  );
 };
 
 const SearchResultListLayout = (props) => {
@@ -812,44 +838,50 @@ const SearchResultListLayout = (props) => {
     loading,
     error,
     resultItems,
-    renderResultItem = (resultItem) => /* @__PURE__ */ React.createElement(HigherOrderDefaultResultListItem, {
-      key: resultItem.document.location,
-      result: resultItem.document
-    }),
-    noResultsComponent = /* @__PURE__ */ React.createElement(EmptyState, {
-      missing: "data",
-      title: "Sorry, no results were found"
-    }),
+    renderResultItem = (resultItem) => /* @__PURE__ */ React.createElement(
+      HigherOrderDefaultResultListItem,
+      {
+        key: resultItem.document.location,
+        result: resultItem.document
+      }
+    ),
+    noResultsComponent = /* @__PURE__ */ React.createElement(EmptyState, { missing: "data", title: "Sorry, no results were found" }),
     ...rest
   } = props;
-  return /* @__PURE__ */ React.createElement(List, {
-    ...rest
-  }, loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
-    title: "Error encountered while fetching search results",
-    error
-  }) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map(renderResultItem) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(ListItem, null, noResultsComponent) : null);
+  return /* @__PURE__ */ React.createElement(List, { ...rest }, loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(
+    ResponseErrorPanel,
+    {
+      title: "Error encountered while fetching search results",
+      error
+    }
+  ) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map(renderResultItem) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(ListItem, null, noResultsComponent) : null);
 };
 const SearchResultList = (props) => {
   const { query, disableRenderingWithNoResults, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: {
-      pluginId: "search",
-      extension: "SearchResultList"
-    }
-  }, /* @__PURE__ */ React.createElement(SearchResultState, {
-    query
-  }, ({ loading, error, value }) => {
-    var _a;
-    if (!((_a = value == null ? void 0 : value.results) == null ? void 0 : _a.length) && disableRenderingWithNoResults) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(SearchResultListLayout, {
-      ...rest,
-      loading,
-      error,
-      resultItems: value == null ? void 0 : value.results
-    });
-  }));
+  return /* @__PURE__ */ React.createElement(
+    AnalyticsContext,
+    {
+      attributes: {
+        pluginId: "search",
+        extension: "SearchResultList"
+      }
+    },
+    /* @__PURE__ */ React.createElement(SearchResultState, { query }, ({ loading, error, value }) => {
+      var _a;
+      if (!((_a = value == null ? void 0 : value.results) == null ? void 0 : _a.length) && disableRenderingWithNoResults) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(
+        SearchResultListLayout,
+        {
+          ...rest,
+          loading,
+          error,
+          resultItems: value == null ? void 0 : value.results
+        }
+      );
+    })
+  );
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -883,12 +915,15 @@ const useStyles = makeStyles((theme) => ({
 const SearchResultGroupFilterFieldLayout = (props) => {
   const classes = useStyles();
   const { label, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(Chip, {
-    ...rest,
-    className: classes.listSubheaderFilter,
-    variant: "outlined",
-    label: /* @__PURE__ */ React.createElement(React.Fragment, null, label, ": ", children)
-  });
+  return /* @__PURE__ */ React.createElement(
+    Chip,
+    {
+      ...rest,
+      className: classes.listSubheaderFilter,
+      variant: "outlined",
+      label: /* @__PURE__ */ React.createElement(React.Fragment, null, label, ": ", children)
+    }
+  );
 };
 const NullIcon = () => null;
 const useSearchResultGroupTextFilterStyles = makeStyles((theme) => ({
@@ -916,17 +951,18 @@ const SearchResultGroupTextFilterField = (props) => {
     },
     [onChange]
   );
-  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, {
-    label,
-    onDelete
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    role: "textbox",
-    component: "span",
-    className: classes.root,
-    onChange: handleChange,
-    contentEditable: true,
-    suppressContentEditableWarning: true
-  }, value));
+  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, { label, onDelete }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      role: "textbox",
+      component: "span",
+      className: classes.root,
+      onChange: handleChange,
+      contentEditable: true,
+      suppressContentEditableWarning: true
+    },
+    value
+  ));
 };
 const useSearchResultGroupSelectFilterStyles = makeStyles((theme) => ({
   root: {
@@ -955,18 +991,18 @@ const SearchResultGroupSelectFilterField = (props) => {
     },
     [onChange]
   );
-  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, {
-    label,
-    onDelete
-  }, /* @__PURE__ */ React.createElement(Select, {
-    className: classes.root,
-    value,
-    onChange: handleChange,
-    input: /* @__PURE__ */ React.createElement(InputBase, null),
-    IconComponent: NullIcon
-  }, /* @__PURE__ */ React.createElement(MenuItem, {
-    value: "none"
-  }, "None"), children));
+  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, { label, onDelete }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      className: classes.root,
+      value,
+      onChange: handleChange,
+      input: /* @__PURE__ */ React.createElement(InputBase, null),
+      IconComponent: NullIcon
+    },
+    /* @__PURE__ */ React.createElement(MenuItem, { value: "none" }, "None"),
+    children
+  ));
 };
 function SearchResultGroupLayout(props) {
   const classes = useStyles();
@@ -977,26 +1013,21 @@ function SearchResultGroupLayout(props) {
     icon,
     title,
     titleProps = {},
-    link = /* @__PURE__ */ React.createElement(React.Fragment, null, "See all", /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, {
-      className: classes.listSubheaderLinkIcon
-    })),
+    link = /* @__PURE__ */ React.createElement(React.Fragment, null, "See all", /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, { className: classes.listSubheaderLinkIcon })),
     linkProps = {},
     filterOptions,
-    renderFilterOption = (filterOption) => /* @__PURE__ */ React.createElement(MenuItem, {
-      key: String(filterOption),
-      value: String(filterOption)
-    }, filterOption),
+    renderFilterOption = (filterOption) => /* @__PURE__ */ React.createElement(MenuItem, { key: String(filterOption), value: String(filterOption) }, filterOption),
     filterFields,
     renderFilterField,
     resultItems,
-    renderResultItem = (resultItem) => /* @__PURE__ */ React.createElement(HigherOrderDefaultResultListItem, {
-      key: resultItem.document.location,
-      result: resultItem.document
-    }),
-    noResultsComponent = /* @__PURE__ */ React.createElement(EmptyState, {
-      missing: "data",
-      title: "Sorry, no results were found"
-    }),
+    renderResultItem = (resultItem) => /* @__PURE__ */ React.createElement(
+      HigherOrderDefaultResultListItem,
+      {
+        key: resultItem.document.location,
+        result: resultItem.document
+      }
+    ),
+    noResultsComponent = /* @__PURE__ */ React.createElement(EmptyState, { missing: "data", title: "Sorry, no results were found" }),
     ...rest
   } = props;
   const handleClick = useCallback((e) => {
@@ -1005,43 +1036,49 @@ function SearchResultGroupLayout(props) {
   const handleClose = useCallback(() => {
     setAnchorEl(null);
   }, []);
-  return /* @__PURE__ */ React.createElement(List, {
-    ...rest
-  }, /* @__PURE__ */ React.createElement(ListSubheader, {
-    className: classes.listSubheader
-  }, icon, /* @__PURE__ */ React.createElement(Typography, {
-    className: classes.listSubheaderName,
-    component: "strong",
-    ...titleProps
-  }, title), filterOptions ? /* @__PURE__ */ React.createElement(Chip, {
-    className: classes.listSubheaderChip,
-    component: "button",
-    icon: /* @__PURE__ */ React.createElement(AddIcon, null),
-    variant: "outlined",
-    label: "Add filter",
-    "aria-controls": "filters-menu",
-    "aria-haspopup": "true",
-    onClick: handleClick
-  }) : null, filterOptions ? /* @__PURE__ */ React.createElement(Menu, {
-    id: "filters-menu",
-    anchorEl,
-    open: Boolean(anchorEl),
-    onClose: handleClose,
-    onClick: handleClose,
-    keepMounted: true
-  }, filterOptions.map(renderFilterOption)) : null, filterFields == null ? void 0 : filterFields.map(
+  return /* @__PURE__ */ React.createElement(List, { ...rest }, /* @__PURE__ */ React.createElement(ListSubheader, { className: classes.listSubheader }, icon, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      className: classes.listSubheaderName,
+      component: "strong",
+      ...titleProps
+    },
+    title
+  ), filterOptions ? /* @__PURE__ */ React.createElement(
+    Chip,
+    {
+      className: classes.listSubheaderChip,
+      component: "button",
+      icon: /* @__PURE__ */ React.createElement(AddIcon, null),
+      variant: "outlined",
+      label: "Add filter",
+      "aria-controls": "filters-menu",
+      "aria-haspopup": "true",
+      onClick: handleClick
+    }
+  ) : null, filterOptions ? /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      id: "filters-menu",
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose: handleClose,
+      onClick: handleClose,
+      keepMounted: true
+    },
+    filterOptions.map(renderFilterOption)
+  ) : null, filterFields == null ? void 0 : filterFields.map(
     (filterField) => {
       var _a;
       return (_a = renderFilterField == null ? void 0 : renderFilterField(filterField)) != null ? _a : null;
     }
-  ), /* @__PURE__ */ React.createElement(Link, {
-    className: classes.listSubheaderLink,
-    to: "/search",
-    ...linkProps
-  }, link)), loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
-    title: "Error encountered while fetching search results",
-    error
-  }) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map(renderResultItem) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(ListItem, null, noResultsComponent) : null);
+  ), /* @__PURE__ */ React.createElement(Link, { className: classes.listSubheaderLink, to: "/search", ...linkProps }, link)), loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(
+    ResponseErrorPanel,
+    {
+      title: "Error encountered while fetching search results",
+      error
+    }
+  ) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map(renderResultItem) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(ListItem, null, noResultsComponent) : null);
 }
 function SearchResultGroup(props) {
   const {
@@ -1059,27 +1096,32 @@ function SearchResultGroup(props) {
     },
     { arrayFormat: "brackets" }
   )}`;
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: {
-      pluginId: "search",
-      extension: "SearchResultGroup"
-    }
-  }, /* @__PURE__ */ React.createElement(SearchResultState, {
-    query
-  }, ({ loading, error, value }) => {
-    var _a, _b;
-    if (!((_a = value == null ? void 0 : value.results) == null ? void 0 : _a.length) && disableRenderingWithNoResults) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(SearchResultGroupLayout, {
-      ...rest,
-      loading,
-      error,
-      linkProps: { to, ...linkProps },
-      resultItems: value == null ? void 0 : value.results,
-      filterFields: Object.keys((_b = query.filters) != null ? _b : {})
-    });
-  }));
+  return /* @__PURE__ */ React.createElement(
+    AnalyticsContext,
+    {
+      attributes: {
+        pluginId: "search",
+        extension: "SearchResultGroup"
+      }
+    },
+    /* @__PURE__ */ React.createElement(SearchResultState, { query }, ({ loading, error, value }) => {
+      var _a, _b;
+      if (!((_a = value == null ? void 0 : value.results) == null ? void 0 : _a.length) && disableRenderingWithNoResults) {
+        return null;
+      }
+      return /* @__PURE__ */ React.createElement(
+        SearchResultGroupLayout,
+        {
+          ...rest,
+          loading,
+          error,
+          linkProps: { to, ...linkProps },
+          resultItems: value == null ? void 0 : value.results,
+          filterFields: Object.keys((_b = query.filters) != null ? _b : {})
+        }
+      );
+    })
+  );
 }
 
 export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, HighlightedSearchResultText, MockSearchApi, SearchAutocomplete, SearchAutocompleteDefaultOption, SearchBar, SearchBarBase, SearchContextProvider, SearchFilter, SearchPagination, SearchPaginationBase, SearchResult, SearchResultApi, SearchResultComponent, SearchResultContext, SearchResultGroup, SearchResultGroupFilterFieldLayout, SearchResultGroupLayout, SearchResultGroupSelectFilterField, SearchResultGroupTextFilterField, SearchResultList, SearchResultListLayout, SearchResultPager, SearchResultState, SelectFilter, searchApiRef, useSearch, useSearchContextCheck };