@backstage/plugin-techdocs/dist/alpha/components/TechDocsReaderSearch.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsx, jsxs } from 'react/jsx-runtime';
import { useNavigate } from 'react-router-dom';
import { SearchAutocomplete, SearchAutocompleteItem, Flex, Text } from '@backstage/ui';
import { SearchContextProvider, HighlightedSearchResultText } from '@backstage/plugin-search-react';
import { useTechDocsSearch } from '../../hooks/useTechDocsSearch.esm.js';

const TechDocsReaderSearchBar = (props) => {
  const { entityId } = props;
  const navigate = useNavigate();
  const { results, term, setTerm, deferredLoading } = useTechDocsSearch(entityId);
  return /* @__PURE__ */ jsx(
    SearchAutocomplete,
    {
      "aria-label": "Search docs",
      placeholder: "Search docs",
      size: "small",
      inputValue: term,
      onInputChange: setTerm,
      isLoading: deferredLoading,
      popoverWidth: "min(720px, calc(100vw - 32px))",
      popoverPlacement: "bottom end",
      children: results.map((result, index) => /* @__PURE__ */ jsx(
        SearchAutocompleteItem,
        {
          id: String(index),
          textValue: result.document.title,
          onAction: () => {
            setTerm("");
            navigate(result.document.location);
            requestAnimationFrame(() => {
              document.activeElement?.blur();
            });
          },
          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
            /* @__PURE__ */ jsx(Text, { weight: "bold", children: result.highlight?.fields.title ? /* @__PURE__ */ jsx(
              HighlightedSearchResultText,
              {
                text: result.highlight.fields.title,
                preTag: result.highlight.preTag,
                postTag: result.highlight.postTag
              }
            ) : result.document.title }),
            (result.highlight?.fields.text || result.document.text) && /* @__PURE__ */ jsx(
              Text,
              {
                variant: "body-small",
                color: "secondary",
                style: {
                  display: "-webkit-box",
                  WebkitLineClamp: 3,
                  WebkitBoxOrient: "vertical",
                  overflow: "hidden"
                },
                children: result.highlight?.fields.text ? /* @__PURE__ */ jsx(
                  HighlightedSearchResultText,
                  {
                    text: result.highlight.fields.text,
                    preTag: result.highlight.preTag,
                    postTag: result.highlight.postTag
                  }
                ) : result.document.text
              }
            )
          ] })
        },
        index
      ))
    }
  );
};
const TechDocsReaderSearch = (props) => {
  const initialState = {
    term: "",
    types: ["techdocs"],
    pageCursor: "",
    filters: props.entityId
  };
  return /* @__PURE__ */ jsx(SearchContextProvider, { initialState, children: /* @__PURE__ */ jsx(TechDocsReaderSearchBar, { ...props }) });
};

export { TechDocsReaderSearch };
//# sourceMappingURL=TechDocsReaderSearch.esm.js.map