@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, SearchAutocomplete } from '@backstage/plugin-search-react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { techdocsTranslationRef } from '../../translation.esm.js';
import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem.esm.js';
import { useTechDocsSearch } from '../../hooks/useTechDocsSearch.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 { t } = useTranslationRef(techdocsTranslationRef);
  const { results, term, loading } = useTechDocsSearch(entityId);
  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: t("search.noResults"),
      value: null,
      options: results,
      renderOption: ({ document, highlight }) => /* @__PURE__ */ jsx(
        TechDocsSearchResultListItem,
        {
          result: document,
          lineClamp: 3,
          asListItem: false,
          asLink: false,
          title: document.title,
          highlight
        }
      ),
      loading,
      inputDebounceTime: debounceTime,
      inputPlaceholder: t("search.placeholder", {
        entityTitle: entityTitle || entityId.name
      }),
      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