@backstage/plugin-techdocs/dist/search/components/TechDocsSearch.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsx } from 'react/jsx-runtime';
import { SearchContextProvider, useSearch, SearchAutocomplete } from '@backstage/plugin-search-react';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem.esm.js';

const isTechDocsSearchResult = (option) => {
  return option?.document;
};
const TechDocsSearchBar = (props) => {
  const {
    entityId,
    entityTitle,
    debounceTime = 150,
    searchResultUrlMapper
  } = props;
  const [open, setOpen] = useState(false);
  const navigate = useNavigate();
  const {
    setFilters,
    term,
    result: { loading, value: searchVal }
  } = useSearch();
  const [options, setOptions] = useState([]);
  useEffect(() => {
    let mounted = true;
    if (mounted && searchVal) {
      const searchResults = searchVal.results.slice(0, 10);
      setOptions(searchResults);
    }
    return () => {
      mounted = false;
    };
  }, [loading, searchVal]);
  const { kind, name, namespace } = entityId;
  useEffect(() => {
    setFilters((prevFilters) => {
      return {
        ...prevFilters,
        kind,
        namespace,
        name
      };
    });
  }, [kind, namespace, name, setFilters]);
  const handleSelection = (_, selection) => {
    if (isTechDocsSearchResult(selection)) {
      const { location } = selection.document;
      navigate(
        searchResultUrlMapper ? searchResultUrlMapper(location) : location
      );
    }
  };
  return /* @__PURE__ */ jsx(
    SearchAutocomplete,
    {
      "data-testid": "techdocs-search-bar",
      size: "small",
      open: open && Boolean(term),
      getOptionLabel: () => "",
      filterOptions: (x) => {
        return x;
      },
      onClose: () => {
        setOpen(false);
      },
      onOpen: () => {
        setOpen(true);
      },
      onChange: handleSelection,
      blurOnSelect: true,
      noOptionsText: "No results found",
      value: null,
      options,
      renderOption: ({ document, highlight }) => /* @__PURE__ */ jsx(
        TechDocsSearchResultListItem,
        {
          result: document,
          lineClamp: 3,
          asListItem: false,
          asLink: false,
          title: document.title,
          highlight
        }
      ),
      loading,
      inputDebounceTime: debounceTime,
      inputPlaceholder: `Search ${entityTitle || entityId.name} docs`,
      freeSolo: false
    }
  );
};
const TechDocsSearch = (props) => {
  const initialState = {
    term: "",
    types: ["techdocs"],
    pageCursor: "",
    filters: props.entityId
  };
  return /* @__PURE__ */ jsx(SearchContextProvider, { initialState, children: /* @__PURE__ */ jsx(TechDocsSearchBar, { ...props }) });
};

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