@backstage/plugin-techdocs 1.17.1-next.2 → 1.17.2

package/dist/hooks/useTechDocsReaderContentData.esm.js

@@ -0,0 +1,63 @@
+import { useEffect, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useTechDocsReaderPage, useShadowDomStylesLoading, useShadowRootElements } from '@backstage/plugin-techdocs-react';
+import { useApp } from '@backstage/core-plugin-api';
+import { useTechDocsReaderDom } from '../reader/components/TechDocsReaderPageContent/dom.esm.js';
+import { useTechDocsReader } from '../reader/components/TechDocsReaderProvider.esm.js';
+
+function useTechDocsReaderContentData(options) {
+  const { defaultPath, onReady } = options;
+  const {
+    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
+    entityRef,
+    setShadowRoot
+  } = useTechDocsReaderPage();
+  const { state } = useTechDocsReader();
+  const dom = useTechDocsReaderDom(entityRef, defaultPath);
+  const location = useLocation();
+  const path = location.pathname;
+  const hash = location.hash;
+  const isStyleLoading = useShadowDomStylesLoading(dom);
+  const [hashElement] = useShadowRootElements([`[id="${hash.slice(1)}"]`]);
+  const app = useApp();
+  const { NotFoundErrorPage } = app.getComponents();
+  useEffect(() => {
+    if (isStyleLoading) return;
+    if (hash) {
+      if (hashElement) {
+        hashElement.scrollIntoView();
+        const link = hashElement.querySelector("a.headerlink");
+        if (link) {
+          link.focus();
+        }
+      }
+    } else {
+      document?.querySelector("header")?.scrollIntoView();
+    }
+  }, [path, hash, hashElement, isStyleLoading]);
+  const handleAppend = useCallback(
+    (newShadowRoot) => {
+      setShadowRoot(newShadowRoot);
+      if (onReady instanceof Function) {
+        onReady();
+      }
+    },
+    [setShadowRoot, onReady]
+  );
+  const isNotFound = entityMetadataLoading === false && !entityMetadata;
+  const isDomReady = !!dom;
+  const showProgress = state === "CHECKING" || isStyleLoading;
+  return {
+    entityRef,
+    entityMetadata,
+    dom,
+    handleAppend,
+    isNotFound,
+    isDomReady,
+    showProgress,
+    NotFoundErrorPage
+  };
+}
+
+export { useTechDocsReaderContentData };
+//# sourceMappingURL=useTechDocsReaderContentData.esm.js.map

package/dist/hooks/useTechDocsReaderContentData.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTechDocsReaderContentData.esm.js","sources":["../../src/hooks/useTechDocsReaderContentData.ts"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport {\n  useShadowDomStylesLoading,\n  useShadowRootElements,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\nimport { useApp } from '@backstage/core-plugin-api';\nimport { useTechDocsReaderDom } from '../reader/components/TechDocsReaderPageContent/dom';\nimport { useTechDocsReader } from '../reader/components/TechDocsReaderProvider';\n\n/**\n * Shared hook for TechDocs reader content data.\n * Encapsulates DOM setup, hash scrolling, shadow root handling,\n * 404 detection, and loading state.\n */\nexport function useTechDocsReaderContentData(options: {\n  defaultPath?: string;\n  onReady?: () => void;\n}) {\n  const { defaultPath, onReady } = options;\n\n  const {\n    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },\n    entityRef,\n    setShadowRoot,\n  } = useTechDocsReaderPage();\n  const { state } = useTechDocsReader();\n  const dom = useTechDocsReaderDom(entityRef, defaultPath);\n  const location = useLocation();\n  const path = location.pathname;\n  const hash = location.hash;\n  const isStyleLoading = useShadowDomStylesLoading(dom);\n  const [hashElement] = useShadowRootElements([`[id=\"${hash.slice(1)}\"]`]);\n  const app = useApp();\n  const { NotFoundErrorPage } = app.getComponents();\n\n  useEffect(() => {\n    if (isStyleLoading) return;\n\n    if (hash) {\n      if (hashElement) {\n        hashElement.scrollIntoView();\n        const link = hashElement.querySelector<HTMLElement>('a.headerlink');\n        if (link) {\n          link.focus();\n        }\n      }\n    } else {\n      document?.querySelector('header')?.scrollIntoView();\n    }\n  }, [path, hash, hashElement, isStyleLoading]);\n\n  const handleAppend = useCallback(\n    (newShadowRoot: ShadowRoot) => {\n      setShadowRoot(newShadowRoot);\n      if (onReady instanceof Function) {\n        onReady();\n      }\n    },\n    [setShadowRoot, onReady],\n  );\n\n  const isNotFound = entityMetadataLoading === false && !entityMetadata;\n  const isDomReady = !!dom;\n  const showProgress = state === 'CHECKING' || isStyleLoading;\n\n  return {\n    entityRef,\n    entityMetadata,\n    dom,\n    handleAppend,\n    isNotFound,\n    isDomReady,\n    showProgress,\n    NotFoundErrorPage,\n  };\n}\n"],"names":[],"mappings":";;;;;;;AAgCO,SAAS,6BAA6B,OAAA,EAG1C;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,OAAA,EAAQ,GAAI,OAAA;AAEjC,EAAA,MAAM;AAAA,IACJ,cAAA,EAAgB,EAAE,KAAA,EAAO,cAAA,EAAgB,SAAS,qBAAA,EAAsB;AAAA,IACxE,SAAA;AAAA,IACA;AAAA,MACE,qBAAA,EAAsB;AAC1B,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,iBAAA,EAAkB;AACpC,EAAA,MAAM,GAAA,GAAM,oBAAA,CAAqB,SAAA,EAAW,WAAW,CAAA;AACvD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,OAAO,QAAA,CAAS,QAAA;AACtB,EAAA,MAAM,OAAO,QAAA,CAAS,IAAA;AACtB,EAAA,MAAM,cAAA,GAAiB,0BAA0B,GAAG,CAAA;AACpD,EAAA,MAAM,CAAC,WAAW,CAAA,GAAI,qBAAA,CAAsB,CAAC,CAAA,KAAA,EAAQ,IAAA,CAAK,KAAA,CAAM,CAAC,CAAC,CAAA,EAAA,CAAI,CAAC,CAAA;AACvE,EAAA,MAAM,MAAM,MAAA,EAAO;AACnB,EAAA,MAAM,EAAE,iBAAA,EAAkB,GAAI,GAAA,CAAI,aAAA,EAAc;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAA,EAAgB;AAEpB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,WAAA,EAAa;AACf,QAAA,WAAA,CAAY,cAAA,EAAe;AAC3B,QAAA,MAAM,IAAA,GAAO,WAAA,CAAY,aAAA,CAA2B,cAAc,CAAA;AAClE,QAAA,IAAI,IAAA,EAAM;AACR,UAAA,IAAA,CAAK,KAAA,EAAM;AAAA,QACb;AAAA,MACF;AAAA,IACF,CAAA,MAAO;AACL,MAAA,QAAA,EAAU,aAAA,CAAc,QAAQ,CAAA,EAAG,cAAA,EAAe;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,IAAA,EAAM,IAAA,EAAM,WAAA,EAAa,cAAc,CAAC,CAAA;AAE5C,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,aAAA,KAA8B;AAC7B,MAAA,aAAA,CAAc,aAAa,CAAA;AAC3B,MAAA,IAAI,mBAAmB,QAAA,EAAU;AAC/B,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAAA,IACA,CAAC,eAAe,OAAO;AAAA,GACzB;AAEA,EAAA,MAAM,UAAA,GAAa,qBAAA,KAA0B,KAAA,IAAS,CAAC,cAAA;AACvD,EAAA,MAAM,UAAA,GAAa,CAAC,CAAC,GAAA;AACrB,EAAA,MAAM,YAAA,GAAe,UAAU,UAAA,IAAc,cAAA;AAE7C,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,cAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/hooks/useTechDocsReaderHeaderData.esm.js

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { useTechDocsAddons, useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';
+import { entityPresentationApiRef } from '@backstage/plugin-catalog-react';
+import capitalize from 'lodash/capitalize';
+
+function useTechDocsReaderHeaderData() {
+  const addons = useTechDocsAddons();
+  const configApi = useApi(configApiRef);
+  const entityPresentationApi = useApi(entityPresentationApiRef);
+  const { "*": path = "" } = useParams();
+  const {
+    title,
+    setTitle,
+    subtitle,
+    setSubtitle,
+    entityRef,
+    metadata: { value: metadata, loading: metadataLoading },
+    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }
+  } = useTechDocsReaderPage();
+  useEffect(() => {
+    if (!metadata) return;
+    setTitle(metadata.site_name);
+    setSubtitle(() => {
+      let { site_description } = metadata;
+      if (!site_description || site_description === "None") {
+        site_description = "";
+      }
+      return site_description;
+    });
+  }, [metadata, setTitle, setSubtitle]);
+  const appTitle = configApi.getOptionalString("app.title") || "Backstage";
+  const locationMetadata = entityMetadata?.locationMetadata;
+  const showSourceLink = !!locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file";
+  const noEntMetadata = !entityMetadataLoading && entityMetadata === void 0;
+  const noTdMetadata = !metadataLoading && metadata === void 0;
+  const hidden = noEntMetadata || noTdMetadata;
+  const removeTrailingSlash = (str) => str.replace(/\/$/, "");
+  const normalizeAndSpace = (str) => str.replace(/[-_]/g, " ").split(" ").map(capitalize).join(" ");
+  let tabTitle = appTitle;
+  if (!hidden) {
+    const stringEntityRef = stringifyEntityRef(entityRef);
+    const entityDisplayName = entityPresentationApi.forEntity(stringEntityRef).snapshot.primaryTitle;
+    let techdocsTabTitleItems = [];
+    if (path !== "")
+      techdocsTabTitleItems = removeTrailingSlash(path).split("/").map(normalizeAndSpace);
+    const tabTitleItems = [
+      entityDisplayName,
+      ...techdocsTabTitleItems,
+      appTitle
+    ];
+    tabTitle = tabTitleItems.join(" | ");
+  }
+  return {
+    title,
+    subtitle,
+    entityRef,
+    entityMetadata,
+    tabTitle,
+    hidden,
+    showSourceLink,
+    sourceLink: locationMetadata?.target,
+    addons
+  };
+}
+
+export { useTechDocsReaderHeaderData };
+//# sourceMappingURL=useTechDocsReaderHeaderData.esm.js.map

package/dist/hooks/useTechDocsReaderHeaderData.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTechDocsReaderHeaderData.esm.js","sources":["../../src/hooks/useTechDocsReaderHeaderData.ts"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  useTechDocsAddons,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\nimport { entityPresentationApiRef } from '@backstage/plugin-catalog-react';\nimport capitalize from 'lodash/capitalize';\n\n/**\n * Shared hook for TechDocs reader header data.\n * Encapsulates title/subtitle sync, tab title computation,\n * 404 detection, and source link visibility.\n */\nexport function useTechDocsReaderHeaderData() {\n  const addons = useTechDocsAddons();\n  const configApi = useApi(configApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const { '*': path = '' } = useParams();\n\n  const {\n    title,\n    setTitle,\n    subtitle,\n    setSubtitle,\n    entityRef,\n    metadata: { value: metadata, loading: metadataLoading },\n    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },\n  } = useTechDocsReaderPage();\n\n  useEffect(() => {\n    if (!metadata) return;\n    setTitle(metadata.site_name);\n    setSubtitle(() => {\n      let { site_description } = metadata;\n      if (!site_description || site_description === 'None') {\n        site_description = '';\n      }\n      return site_description;\n    });\n  }, [metadata, setTitle, setSubtitle]);\n\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n  const locationMetadata = entityMetadata?.locationMetadata;\n  const showSourceLink =\n    !!locationMetadata &&\n    locationMetadata.type !== 'dir' &&\n    locationMetadata.type !== 'file';\n\n  const noEntMetadata = !entityMetadataLoading && entityMetadata === undefined;\n  const noTdMetadata = !metadataLoading && metadata === undefined;\n  const hidden = noEntMetadata || noTdMetadata;\n\n  const removeTrailingSlash = (str: string) => str.replace(/\\/$/, '');\n  const normalizeAndSpace = (str: string) =>\n    str.replace(/[-_]/g, ' ').split(' ').map(capitalize).join(' ');\n\n  let tabTitle = appTitle;\n  if (!hidden) {\n    const stringEntityRef = stringifyEntityRef(entityRef);\n    const entityDisplayName =\n      entityPresentationApi.forEntity(stringEntityRef).snapshot.primaryTitle;\n\n    let techdocsTabTitleItems: string[] = [];\n    if (path !== '')\n      techdocsTabTitleItems = removeTrailingSlash(path)\n        .split('/')\n        .map(normalizeAndSpace);\n\n    const tabTitleItems = [\n      entityDisplayName,\n      ...techdocsTabTitleItems,\n      appTitle,\n    ];\n    tabTitle = tabTitleItems.join(' | ');\n  }\n\n  return {\n    title,\n    subtitle,\n    entityRef,\n    entityMetadata,\n    tabTitle,\n    hidden,\n    showSourceLink,\n    sourceLink: locationMetadata?.target,\n    addons,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useTechDocsSearch.esm.js

@@ -0,0 +1,46 @@
+import { useState, useRef, useEffect } from 'react';
+import { useSearch } from '@backstage/plugin-search-react';
+
+function useTechDocsSearch(entityId) {
+  const {
+    setFilters,
+    setTerm,
+    term,
+    result: { loading, value: searchVal }
+  } = useSearch();
+  const [results, setResults] = useState([]);
+  const [deferredLoading, setDeferredLoading] = useState(false);
+  const loadingTimer = useRef();
+  useEffect(() => {
+    if (searchVal) {
+      setResults(searchVal.results.slice(0, 10));
+    }
+  }, [loading, searchVal]);
+  useEffect(() => {
+    clearTimeout(loadingTimer.current);
+    setDeferredLoading(false);
+    if (loading) {
+      loadingTimer.current = setTimeout(() => setDeferredLoading(true), 200);
+    }
+    return () => clearTimeout(loadingTimer.current);
+  }, [term, loading]);
+  const { kind, name, namespace } = entityId;
+  useEffect(() => {
+    setFilters((prevFilters) => ({
+      ...prevFilters,
+      kind,
+      namespace,
+      name
+    }));
+  }, [kind, namespace, name, setFilters]);
+  return {
+    results,
+    term,
+    setTerm,
+    loading,
+    deferredLoading
+  };
+}
+
+export { useTechDocsSearch };
+//# sourceMappingURL=useTechDocsSearch.esm.js.map

package/dist/hooks/useTechDocsSearch.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTechDocsSearch.esm.js","sources":["../../src/hooks/useTechDocsSearch.ts"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useRef, useState } from 'react';\nimport { useSearch } from '@backstage/plugin-search-react';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport { ResultHighlight } from '@backstage/plugin-search-common';\n\nexport type TechDocsDoc = {\n  namespace: string;\n  kind: string;\n  name: string;\n  path: string;\n  location: string;\n  title: string;\n  text: string;\n};\n\nexport type TechDocsSearchResult = {\n  type: string;\n  document: TechDocsDoc;\n  highlight?: ResultHighlight;\n};\n\n/**\n * Shared hook for TechDocs search logic.\n * Encapsulates entity filter sync, results slicing,\n * and deferred loading state.\n */\nexport function useTechDocsSearch(entityId: CompoundEntityRef) {\n  const {\n    setFilters,\n    setTerm,\n    term,\n    result: { loading, value: searchVal },\n  } = useSearch();\n  const [results, setResults] = useState<TechDocsSearchResult[]>([]);\n  const [deferredLoading, setDeferredLoading] = useState(false);\n  const loadingTimer = useRef<ReturnType<typeof setTimeout>>();\n\n  useEffect(() => {\n    if (searchVal) {\n      setResults(searchVal.results.slice(0, 10) as TechDocsSearchResult[]);\n    }\n  }, [loading, searchVal]);\n\n  useEffect(() => {\n    clearTimeout(loadingTimer.current);\n    setDeferredLoading(false);\n    if (loading) {\n      loadingTimer.current = setTimeout(() => setDeferredLoading(true), 200);\n    }\n    return () => clearTimeout(loadingTimer.current);\n  }, [term, loading]);\n\n  const { kind, name, namespace } = entityId;\n  useEffect(() => {\n    setFilters(prevFilters => ({\n      ...prevFilters,\n      kind,\n      namespace,\n      name,\n    }));\n  }, [kind, namespace, name, setFilters]);\n\n  return {\n    results,\n    term,\n    setTerm,\n    loading,\n    deferredLoading,\n  };\n}\n"],"names":[],"mappings":";;;AA0CO,SAAS,kBAAkB,QAAA,EAA6B;AAC7D,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA,EAAQ,EAAE,OAAA,EAAS,KAAA,EAAO,SAAA;AAAU,MAClC,SAAA,EAAU;AACd,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,CAAiC,EAAE,CAAA;AACjE,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5D,EAAA,MAAM,eAAe,MAAA,EAAsC;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,UAAA,CAAW,SAAA,CAAU,OAAA,CAAQ,KAAA,CAAM,CAAA,EAAG,EAAE,CAA2B,CAAA;AAAA,IACrE;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,SAAS,CAAC,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AACjC,IAAA,kBAAA,CAAmB,KAAK,CAAA;AACxB,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,YAAA,CAAa,UAAU,UAAA,CAAW,MAAM,kBAAA,CAAmB,IAAI,GAAG,GAAG,CAAA;AAAA,IACvE;AACA,IAAA,OAAO,MAAM,YAAA,CAAa,YAAA,CAAa,OAAO,CAAA;AAAA,EAChD,CAAA,EAAG,CAAC,IAAA,EAAM,OAAO,CAAC,CAAA;AAElB,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAM,SAAA,EAAU,GAAI,QAAA;AAClC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,CAAA,WAAA,MAAgB;AAAA,MACzB,GAAG,WAAA;AAAA,MACH,IAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF,CAAE,CAAA;AAAA,EACJ,GAAG,CAAC,IAAA,EAAM,SAAA,EAAW,IAAA,EAAM,UAAU,CAAC,CAAA;AAEtC,EAAA,OAAO;AAAA,IACL,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js

@@ -0,0 +1,29 @@
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };
+//# sourceMappingURL=style-inject.es.esm.js.map

package/dist/node_modules_dist/style-inject/dist/style-inject.es.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-inject.es.esm.js","sources":["../../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;","x_google_ignoreList":[0]}

package/dist/{package.json.esm.js → plugins/techdocs/package.json.esm.js}

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-techdocs";
-var version = "1.17.1-next.2";
+var version = "1.17.2";
 var description = "The Backstage plugin that renders technical documentation for your components";
 var backstage = {
 	role: "frontend-plugin",
@@ -74,11 +74,13 @@ var dependencies = {
 	"@backstage/plugin-techdocs-common": "workspace:^",
 	"@backstage/plugin-techdocs-react": "workspace:^",
 	"@backstage/theme": "workspace:^",
+	"@backstage/ui": "workspace:^",
 	"@material-ui/core": "^4.12.2",
 	"@material-ui/icons": "^4.9.1",
 	"@material-ui/lab": "4.0.0-alpha.61",
 	"@material-ui/styles": "^4.10.0",
 	"@microsoft/fetch-event-source": "^2.0.1",
+	"@remixicon/react": "^4.6.0",
 	dompurify: "^3.3.2",
 	"git-url-parse": "^15.0.0",
 	lodash: "^4.17.21",

package/dist/{package.json.esm.js.map → plugins/techdocs/package.json.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.esm.js

@@ -1,15 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEffect, useCallback } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import { useTechDocsReaderPage, useShadowDomStylesLoading, useShadowRootElements, TechDocsShadowDom } from '@backstage/plugin-techdocs-react';
+import { TechDocsShadowDom } from '@backstage/plugin-techdocs-react';
 import { Content, Progress } from '@backstage/core-components';
 import { TechDocsSearch } from '../../../search/components/TechDocsSearch.esm.js';
 import { TechDocsStateIndicator } from '../TechDocsStateIndicator.esm.js';
-import { useTechDocsReaderDom } from './dom.esm.js';
-import { withTechDocsReaderProvider, useTechDocsReader } from '../TechDocsReaderProvider.esm.js';
+import { withTechDocsReaderProvider } from '../TechDocsReaderProvider.esm.js';
 import { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons.esm.js';
-import { useApp } from '@backstage/core-plugin-api';
+import { useTechDocsReaderContentData } from '../../../hooks/useTechDocsReaderContentData.esm.js';
 
 const useStyles = makeStyles({
   search: {
@@ -25,43 +23,23 @@ const useStyles = makeStyles({
 });
 const TechDocsReaderPageContent = withTechDocsReaderProvider(
   (props) => {
-    const { withSearch = true, searchResultUrlMapper, onReady } = props;
+    const { withSearch = true, searchResultUrlMapper } = props;
     const classes = useStyles();
     const {
-      entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },
       entityRef,
-      setShadowRoot
-    } = useTechDocsReaderPage();
-    const { state } = useTechDocsReader();
-    const dom = useTechDocsReaderDom(entityRef, props.defaultPath);
-    const path = window.location.pathname;
-    const hash = window.location.hash;
-    const isStyleLoading = useShadowDomStylesLoading(dom);
-    const [hashElement] = useShadowRootElements([`[id="${hash.slice(1)}"]`]);
-    const app = useApp();
-    const { NotFoundErrorPage } = app.getComponents();
-    useEffect(() => {
-      if (isStyleLoading) return;
-      if (hash) {
-        if (hashElement) {
-          hashElement.scrollIntoView();
-        }
-      } else {
-        document?.querySelector("header")?.scrollIntoView();
-      }
-    }, [path, hash, hashElement, isStyleLoading]);
-    const handleAppend = useCallback(
-      (newShadowRoot) => {
-        setShadowRoot(newShadowRoot);
-        if (onReady instanceof Function) {
-          onReady();
-        }
-      },
-      [setShadowRoot, onReady]
-    );
-    if (entityMetadataLoading === false && !entityMetadata)
-      return /* @__PURE__ */ jsx(NotFoundErrorPage, {});
-    if (!dom) {
+      entityMetadata,
+      dom,
+      handleAppend,
+      isNotFound,
+      isDomReady,
+      showProgress,
+      NotFoundErrorPage
+    } = useTechDocsReaderContentData({
+      defaultPath: props.defaultPath,
+      onReady: props.onReady
+    });
+    if (isNotFound) return /* @__PURE__ */ jsx(NotFoundErrorPage, {});
+    if (!isDomReady) {
       return /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(Grid, { xs: 12, item: true, children: /* @__PURE__ */ jsx(TechDocsStateIndicator, {}) }) }) });
     }
     return /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
@@ -75,7 +53,7 @@ const TechDocsReaderPageContent = withTechDocsReaderProvider(
         }
       ) }),
       /* @__PURE__ */ jsxs(Grid, { xs: 12, item: true, children: [
-        (state === "CHECKING" || isStyleLoading) && /* @__PURE__ */ jsx(Progress, {}),
+        showProgress && /* @__PURE__ */ jsx(Progress, {}),
         /* @__PURE__ */ jsx(TechDocsShadowDom, { element: dom, onAppend: handleAppend, children: /* @__PURE__ */ jsx(TechDocsReaderPageContentAddons, {}) })
       ] })
     ] }) });

package/dist/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TechDocsReaderPageContent.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useEffect } from 'react';\n\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport {\n  TechDocsShadowDom,\n  useShadowDomStylesLoading,\n  useShadowRootElements,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport { Content, Progress } from '@backstage/core-components';\n\nimport { TechDocsSearch } from '../../../search';\nimport { TechDocsStateIndicator } from '../TechDocsStateIndicator';\n\nimport { useTechDocsReaderDom } from './dom';\nimport {\n  useTechDocsReader,\n  withTechDocsReaderProvider,\n} from '../TechDocsReaderProvider';\nimport { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons';\nimport { useApp } from '@backstage/core-plugin-api';\n\nconst useStyles = makeStyles({\n  search: {\n    width: '100%',\n    '@media (min-width: 76.1875em)': {\n      width: 'calc(100% - 34.4rem)',\n      margin: '0 auto',\n    },\n    '@media print': {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Props for {@link TechDocsReaderPageContent}\n * @public\n */\nexport type TechDocsReaderPageContentProps = {\n  /**\n   * @deprecated No need to pass down entityRef as property anymore. Consumes the entityName from `TechDocsReaderPageContext`. Use the {@link @backstage/plugin-techdocs-react#useTechDocsReaderPage} hook for custom reader page content.\n   */\n  entityRef?: CompoundEntityRef;\n  /**\n   * Path in the docs to render by default. This should be used when rendering docs for an entity that specifies the\n   * \"backstage.io/techdocs-entity-path\" annotation for deep linking into another entities docs.\n   */\n  defaultPath?: string;\n  /**\n   * Show or hide the search bar, defaults to true.\n   */\n  withSearch?: boolean;\n  /**\n   * If {@link TechDocsReaderPageContentProps.withSearch | withSearch} is true,\n   * this will redirect the search result urls, e.g. turn search results into\n   * links within the \"Docs\" tab of the entity page, instead of the global docs\n   * page.\n   */\n  searchResultUrlMapper?: (url: string) => string;\n  /**\n   * Callback called when the content is rendered.\n   */\n  onReady?: () => void;\n};\n\n/**\n * Renders the reader page content\n * @public\n */\nexport const TechDocsReaderPageContent = withTechDocsReaderProvider(\n  (props: TechDocsReaderPageContentProps) => {\n    const { withSearch = true, searchResultUrlMapper, onReady } = props;\n    const classes = useStyles();\n\n    const {\n      entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },\n      entityRef,\n      setShadowRoot,\n    } = useTechDocsReaderPage();\n    const { state } = useTechDocsReader();\n    const dom = useTechDocsReaderDom(entityRef, props.defaultPath);\n    const path = window.location.pathname;\n    const hash = window.location.hash;\n    const isStyleLoading = useShadowDomStylesLoading(dom);\n    const [hashElement] = useShadowRootElements([`[id=\"${hash.slice(1)}\"]`]);\n    const app = useApp();\n    const { NotFoundErrorPage } = app.getComponents();\n\n    useEffect(() => {\n      if (isStyleLoading) return;\n\n      if (hash) {\n        if (hashElement) {\n          hashElement.scrollIntoView();\n        }\n      } else {\n        document?.querySelector('header')?.scrollIntoView();\n      }\n    }, [path, hash, hashElement, isStyleLoading]);\n\n    const handleAppend = useCallback(\n      (newShadowRoot: ShadowRoot) => {\n        setShadowRoot(newShadowRoot);\n        if (onReady instanceof Function) {\n          onReady();\n        }\n      },\n      [setShadowRoot, onReady],\n    );\n\n    // No entity metadata = 404. Don't render content at all.\n    if (entityMetadataLoading === false && !entityMetadata)\n      return <NotFoundErrorPage />;\n\n    // Do not return content until dom is ready; instead, render a state\n    // indicator, which handles progress and content errors on our behalf.\n    if (!dom) {\n      return (\n        <Content>\n          <Grid container>\n            <Grid xs={12} item>\n              <TechDocsStateIndicator />\n            </Grid>\n          </Grid>\n        </Content>\n      );\n    }\n\n    return (\n      <Content>\n        <Grid container>\n          <Grid xs={12} item>\n            <TechDocsStateIndicator />\n          </Grid>\n          {withSearch && (\n            <Grid className={classes.search} xs=\"auto\" item>\n              <TechDocsSearch\n                entityId={entityRef}\n                entityTitle={entityMetadata?.metadata?.title}\n                searchResultUrlMapper={searchResultUrlMapper}\n              />\n            </Grid>\n          )}\n          <Grid xs={12} item>\n            {/* Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow Dom causing the screen to flash multiple times */}\n            {(state === 'CHECKING' || isStyleLoading) && <Progress />}\n\n            <TechDocsShadowDom element={dom} onAppend={handleAppend}>\n              <TechDocsReaderPageContentAddons />\n            </TechDocsShadowDom>\n          </Grid>\n        </Grid>\n      </Content>\n    );\n  },\n);\n\n/**\n * Props for {@link Reader}\n *\n * @public\n * @deprecated use `TechDocsReaderPageContentProps` instead.\n */\nexport type ReaderProps = TechDocsReaderPageContentProps;\n\n/**\n * Component responsible for rendering TechDocs documentation\n * @public\n * @deprecated use `TechDocsReaderPageContent` component instead.\n */\nexport const Reader = TechDocsReaderPageContent;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,YAAY,UAAA,CAAW;AAAA,EAC3B,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,MAAA;AAAA,IACP,+BAAA,EAAiC;AAAA,MAC/B,KAAA,EAAO,sBAAA;AAAA,MACP,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS;AAAA;AACX;AAEJ,CAAC,CAAA;AAqCM,MAAM,yBAAA,GAA4B,0BAAA;AAAA,EACvC,CAAC,KAAA,KAA0C;AACzC,IAAA,MAAM,EAAE,UAAA,GAAa,IAAA,EAAM,qBAAA,EAAuB,SAAQ,GAAI,KAAA;AAC9D,IAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,IAAA,MAAM;AAAA,MACJ,cAAA,EAAgB,EAAE,KAAA,EAAO,cAAA,EAAgB,SAAS,qBAAA,EAAsB;AAAA,MACxE,SAAA;AAAA,MACA;AAAA,QACE,qBAAA,EAAsB;AAC1B,IAAA,MAAM,EAAE,KAAA,EAAM,GAAI,iBAAA,EAAkB;AACpC,IAAA,MAAM,GAAA,GAAM,oBAAA,CAAqB,SAAA,EAAW,KAAA,CAAM,WAAW,CAAA;AAC7D,IAAA,MAAM,IAAA,GAAO,OAAO,QAAA,CAAS,QAAA;AAC7B,IAAA,MAAM,IAAA,GAAO,OAAO,QAAA,CAAS,IAAA;AAC7B,IAAA,MAAM,cAAA,GAAiB,0BAA0B,GAAG,CAAA;AACpD,IAAA,MAAM,CAAC,WAAW,CAAA,GAAI,qBAAA,CAAsB,CAAC,CAAA,KAAA,EAAQ,IAAA,CAAK,KAAA,CAAM,CAAC,CAAC,CAAA,EAAA,CAAI,CAAC,CAAA;AACvE,IAAA,MAAM,MAAM,MAAA,EAAO;AACnB,IAAA,MAAM,EAAE,iBAAA,EAAkB,GAAI,GAAA,CAAI,aAAA,EAAc;AAEhD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,cAAA,EAAgB;AAEpB,MAAA,IAAI,IAAA,EAAM;AACR,QAAA,IAAI,WAAA,EAAa;AACf,UAAA,WAAA,CAAY,cAAA,EAAe;AAAA,QAC7B;AAAA,MACF,CAAA,MAAO;AACL,QAAA,QAAA,EAAU,aAAA,CAAc,QAAQ,CAAA,EAAG,cAAA,EAAe;AAAA,MACpD;AAAA,IACF,GAAG,CAAC,IAAA,EAAM,IAAA,EAAM,WAAA,EAAa,cAAc,CAAC,CAAA;AAE5C,IAAA,MAAM,YAAA,GAAe,WAAA;AAAA,MACnB,CAAC,aAAA,KAA8B;AAC7B,QAAA,aAAA,CAAc,aAAa,CAAA;AAC3B,QAAA,IAAI,mBAAmB,QAAA,EAAU;AAC/B,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,MACA,CAAC,eAAe,OAAO;AAAA,KACzB;AAGA,IAAA,IAAI,qBAAA,KAA0B,SAAS,CAAC,cAAA;AACtC,MAAA,2BAAQ,iBAAA,EAAA,EAAkB,CAAA;AAI5B,IAAA,IAAI,CAAC,GAAA,EAAK;AACR,MAAA,2BACG,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,MACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,EAAA,EAAI,MAAI,IAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,sBAAA,EAAA,EAAuB,CAAA,EAC1B,GACF,CAAA,EACF,CAAA;AAAA,IAEJ;AAEA,IAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EAAK,WAAS,IAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAK,EAAA,EAAI,EAAA,EAAI,MAAI,IAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,0BAAuB,CAAA,EAC1B,CAAA;AAAA,MACC,UAAA,wBACE,IAAA,EAAA,EAAK,SAAA,EAAW,QAAQ,MAAA,EAAQ,EAAA,EAAG,MAAA,EAAO,IAAA,EAAI,IAAA,EAC7C,QAAA,kBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAU,SAAA;AAAA,UACV,WAAA,EAAa,gBAAgB,QAAA,EAAU,KAAA;AAAA,UACvC;AAAA;AAAA,OACF,EACF,CAAA;AAAA,sBAEF,IAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,EAAA,EAAI,MAAI,IAAA,EAEd,QAAA,EAAA;AAAA,QAAA,CAAA,KAAA,KAAU,UAAA,IAAc,cAAA,qBAAmB,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,wBAEvD,GAAA,CAAC,qBAAkB,OAAA,EAAS,GAAA,EAAK,UAAU,YAAA,EACzC,QAAA,kBAAA,GAAA,CAAC,mCAAgC,CAAA,EACnC;AAAA,OAAA,EACF;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAeO,MAAM,MAAA,GAAS;;;;"}
+{"version":3,"file":"TechDocsReaderPageContent.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { TechDocsShadowDom } from '@backstage/plugin-techdocs-react';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport { Content, Progress } from '@backstage/core-components';\n\nimport { TechDocsSearch } from '../../../search';\nimport { TechDocsStateIndicator } from '../TechDocsStateIndicator';\n\nimport { withTechDocsReaderProvider } from '../TechDocsReaderProvider';\nimport { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons';\nimport { useTechDocsReaderContentData } from '../../../hooks/useTechDocsReaderContentData';\n\nconst useStyles = makeStyles({\n  search: {\n    width: '100%',\n    '@media (min-width: 76.1875em)': {\n      width: 'calc(100% - 34.4rem)',\n      margin: '0 auto',\n    },\n    '@media print': {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Props for {@link TechDocsReaderPageContent}\n * @public\n */\nexport type TechDocsReaderPageContentProps = {\n  /**\n   * @deprecated No need to pass down entityRef as property anymore. Consumes the entityName from `TechDocsReaderPageContext`. Use the {@link @backstage/plugin-techdocs-react#useTechDocsReaderPage} hook for custom reader page content.\n   */\n  entityRef?: CompoundEntityRef;\n  /**\n   * Path in the docs to render by default. This should be used when rendering docs for an entity that specifies the\n   * \"backstage.io/techdocs-entity-path\" annotation for deep linking into another entities docs.\n   */\n  defaultPath?: string;\n  /**\n   * Show or hide the search bar, defaults to true.\n   */\n  withSearch?: boolean;\n  /**\n   * If {@link TechDocsReaderPageContentProps.withSearch | withSearch} is true,\n   * this will redirect the search result urls, e.g. turn search results into\n   * links within the \"Docs\" tab of the entity page, instead of the global docs\n   * page.\n   */\n  searchResultUrlMapper?: (url: string) => string;\n  /**\n   * Callback called when the content is rendered.\n   */\n  onReady?: () => void;\n};\n\n/**\n * Renders the reader page content\n * @public\n */\nexport const TechDocsReaderPageContent = withTechDocsReaderProvider(\n  (props: TechDocsReaderPageContentProps) => {\n    const { withSearch = true, searchResultUrlMapper } = props;\n    const classes = useStyles();\n\n    const {\n      entityRef,\n      entityMetadata,\n      dom,\n      handleAppend,\n      isNotFound,\n      isDomReady,\n      showProgress,\n      NotFoundErrorPage,\n    } = useTechDocsReaderContentData({\n      defaultPath: props.defaultPath,\n      onReady: props.onReady,\n    });\n\n    if (isNotFound) return <NotFoundErrorPage />;\n\n    if (!isDomReady) {\n      return (\n        <Content>\n          <Grid container>\n            <Grid xs={12} item>\n              <TechDocsStateIndicator />\n            </Grid>\n          </Grid>\n        </Content>\n      );\n    }\n\n    return (\n      <Content>\n        <Grid container>\n          <Grid xs={12} item>\n            <TechDocsStateIndicator />\n          </Grid>\n          {withSearch && (\n            <Grid className={classes.search} xs=\"auto\" item>\n              <TechDocsSearch\n                entityId={entityRef}\n                entityTitle={entityMetadata?.metadata?.title}\n                searchResultUrlMapper={searchResultUrlMapper}\n              />\n            </Grid>\n          )}\n          <Grid xs={12} item>\n            {showProgress && <Progress />}\n\n            <TechDocsShadowDom element={dom!} onAppend={handleAppend}>\n              <TechDocsReaderPageContentAddons />\n            </TechDocsShadowDom>\n          </Grid>\n        </Grid>\n      </Content>\n    );\n  },\n);\n\n/**\n * Props for {@link Reader}\n *\n * @public\n * @deprecated use `TechDocsReaderPageContentProps` instead.\n */\nexport type ReaderProps = TechDocsReaderPageContentProps;\n\n/**\n * Component responsible for rendering TechDocs documentation\n * @public\n * @deprecated use `TechDocsReaderPageContent` component instead.\n */\nexport const Reader = TechDocsReaderPageContent;\n"],"names":[],"mappings":";;;;;;;;;;;AA8BA,MAAM,YAAY,UAAA,CAAW;AAAA,EAC3B,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,MAAA;AAAA,IACP,+BAAA,EAAiC;AAAA,MAC/B,KAAA,EAAO,sBAAA;AAAA,MACP,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS;AAAA;AACX;AAEJ,CAAC,CAAA;AAqCM,MAAM,yBAAA,GAA4B,0BAAA;AAAA,EACvC,CAAC,KAAA,KAA0C;AACzC,IAAA,MAAM,EAAE,UAAA,GAAa,IAAA,EAAM,qBAAA,EAAsB,GAAI,KAAA;AACrD,IAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,QACE,4BAAA,CAA6B;AAAA,MAC/B,aAAa,KAAA,CAAM,WAAA;AAAA,MACnB,SAAS,KAAA,CAAM;AAAA,KAChB,CAAA;AAED,IAAA,IAAI,UAAA,EAAY,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAE1C,IAAA,IAAI,CAAC,UAAA,EAAY;AACf,MAAA,2BACG,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,MACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,EAAA,EAAI,MAAI,IAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,sBAAA,EAAA,EAAuB,CAAA,EAC1B,GACF,CAAA,EACF,CAAA;AAAA,IAEJ;AAEA,IAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EAAK,WAAS,IAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAK,EAAA,EAAI,EAAA,EAAI,MAAI,IAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,0BAAuB,CAAA,EAC1B,CAAA;AAAA,MACC,UAAA,wBACE,IAAA,EAAA,EAAK,SAAA,EAAW,QAAQ,MAAA,EAAQ,EAAA,EAAG,MAAA,EAAO,IAAA,EAAI,IAAA,EAC7C,QAAA,kBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAU,SAAA;AAAA,UACV,WAAA,EAAa,gBAAgB,QAAA,EAAU,KAAA;AAAA,UACvC;AAAA;AAAA,OACF,EACF,CAAA;AAAA,sBAEF,IAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,EAAA,EAAI,MAAI,IAAA,EACf,QAAA,EAAA;AAAA,QAAA,YAAA,wBAAiB,QAAA,EAAA,EAAS,CAAA;AAAA,wBAE3B,GAAA,CAAC,qBAAkB,OAAA,EAAS,GAAA,EAAM,UAAU,YAAA,EAC1C,QAAA,kBAAA,GAAA,CAAC,mCAAgC,CAAA,EACnC;AAAA,OAAA,EACF;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAeO,MAAM,MAAA,GAAS;;;;"}

package/dist/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.esm.js

@@ -1,50 +1,36 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useEffect } from 'react';
 import Helmet from 'react-helmet';
 import Grid from '@material-ui/core/Grid';
 import Skeleton from '@material-ui/lab/Skeleton';
 import CodeIcon from '@material-ui/icons/Code';
-import { useTechDocsAddons, useTechDocsReaderPage, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
-import { entityPresentationApiRef, getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
-import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+import { TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
+import { getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
+import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { HeaderLabel, Header } from '@backstage/core-components';
-import { useApi, configApiRef, useRouteRef } from '@backstage/core-plugin-api';
+import { useRouteRef } from '@backstage/core-plugin-api';
 import capitalize from 'lodash/capitalize';
 import { rootRouteRef } from '../../../routes.esm.js';
-import { useParams } from 'react-router-dom';
+import { useTechDocsReaderHeaderData } from '../../../hooks/useTechDocsReaderHeaderData.esm.js';
 
 const skeleton = /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "text", height: 40 });
 const TechDocsReaderPageHeader = (props) => {
   const { children } = props;
-  const addons = useTechDocsAddons();
-  const configApi = useApi(configApiRef);
-  const entityPresentationApi = useApi(entityPresentationApiRef);
-  const { "*": path = "" } = useParams();
   const {
     title,
-    setTitle,
     subtitle,
-    setSubtitle,
     entityRef,
-    metadata: { value: metadata, loading: metadataLoading },
-    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }
-  } = useTechDocsReaderPage();
-  useEffect(() => {
-    if (!metadata) return;
-    setTitle(metadata.site_name);
-    setSubtitle(() => {
-      let { site_description } = metadata;
-      if (!site_description || site_description === "None") {
-        site_description = "";
-      }
-      return site_description;
-    });
-  }, [metadata, setTitle, setSubtitle]);
-  const appTitle = configApi.getOptional("app.title") || "Backstage";
-  const { locationMetadata, spec } = entityMetadata || {};
+    entityMetadata,
+    tabTitle,
+    hidden,
+    showSourceLink,
+    sourceLink,
+    addons
+  } = useTechDocsReaderHeaderData();
+  const docsRootLink = useRouteRef(rootRouteRef)();
+  if (hidden) return null;
+  const { spec } = entityMetadata || {};
   const lifecycle = spec?.lifecycle;
   const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
-  const docsRootLink = useRouteRef(rootRouteRef)();
   const labels = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       HeaderLabel,
@@ -76,7 +62,7 @@ const TechDocsReaderPageHeader = (props) => {
       }
     ),
     lifecycle ? /* @__PURE__ */ jsx(HeaderLabel, { label: "Lifecycle", value: String(lifecycle) }) : null,
-    locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ jsx(
+    showSourceLink ? /* @__PURE__ */ jsx(
       HeaderLabel,
       {
         label: "",
@@ -84,22 +70,10 @@ const TechDocsReaderPageHeader = (props) => {
           /* @__PURE__ */ jsx(Grid, { style: { padding: 0 }, item: true, children: /* @__PURE__ */ jsx(CodeIcon, { style: { marginTop: "-25px" } }) }),
           /* @__PURE__ */ jsx(Grid, { style: { padding: 0 }, item: true, children: "Source" })
         ] }),
-        url: locationMetadata.target
+        url: sourceLink
       }
     ) : null
   ] });
-  const noEntMetadata = !entityMetadataLoading && entityMetadata === void 0;
-  const noTdMetadata = !metadataLoading && metadata === void 0;
-  if (noEntMetadata || noTdMetadata) return null;
-  const stringEntityRef = stringifyEntityRef(entityRef);
-  const entityDisplayName = entityPresentationApi.forEntity(stringEntityRef).snapshot.primaryTitle;
-  const removeTrailingSlash = (str) => str.replace(/\/$/, "");
-  const normalizeAndSpace = (str) => str.replace(/[-_]/g, " ").split(" ").map(capitalize).join(" ");
-  let techdocsTabTitleItems = [];
-  if (path !== "")
-    techdocsTabTitleItems = removeTrailingSlash(path).split("/").map(normalizeAndSpace);
-  const tabTitleItems = [entityDisplayName, ...techdocsTabTitleItems, appTitle];
-  const tabTitle = tabTitleItems.join(" | ");
   return /* @__PURE__ */ jsxs(
     Header,
     {

package/dist/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TechDocsReaderPageHeader.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PropsWithChildren, useEffect } from 'react';\nimport Helmet from 'react-helmet';\n\nimport Grid from '@material-ui/core/Grid';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport CodeIcon from '@material-ui/icons/Code';\n\nimport {\n  TechDocsAddonLocations as locations,\n  useTechDocsAddons,\n  useTechDocsReaderPage,\n  TechDocsEntityMetadata,\n  TechDocsMetadata,\n} from '@backstage/plugin-techdocs-react';\nimport {\n  entityPresentationApiRef,\n  EntityRefLink,\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport {\n  RELATION_OWNED_BY,\n  CompoundEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { Header, HeaderLabel } from '@backstage/core-components';\nimport { useRouteRef, configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport capitalize from 'lodash/capitalize';\n\nimport { rootRouteRef } from '../../../routes';\nimport { useParams } from 'react-router-dom';\n\nconst skeleton = <Skeleton animation=\"wave\" variant=\"text\" height={40} />;\n\n/**\n * Props for {@link TechDocsReaderPageHeader}\n *\n * @public\n * @deprecated No need to pass down properties anymore. The component consumes data from `TechDocsReaderPageContext` instead. Use the {@link @backstage/plugin-techdocs-react#useTechDocsReaderPage} hook for custom header.\n */\nexport type TechDocsReaderPageHeaderProps = PropsWithChildren<{\n  entityRef?: CompoundEntityRef;\n  entityMetadata?: TechDocsEntityMetadata;\n  techDocsMetadata?: TechDocsMetadata;\n}>;\n\n/**\n * Renders the reader page header.\n * This component does not accept props, please use\n * the Tech Docs add-ons to customize it\n * @public\n */\nexport const TechDocsReaderPageHeader = (\n  props: TechDocsReaderPageHeaderProps,\n) => {\n  const { children } = props;\n  const addons = useTechDocsAddons();\n  const configApi = useApi(configApiRef);\n\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const { '*': path = '' } = useParams();\n\n  const {\n    title,\n    setTitle,\n    subtitle,\n    setSubtitle,\n    entityRef,\n    metadata: { value: metadata, loading: metadataLoading },\n    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading },\n  } = useTechDocsReaderPage();\n\n  useEffect(() => {\n    if (!metadata) return;\n    setTitle(metadata.site_name);\n    setSubtitle(() => {\n      let { site_description } = metadata;\n      if (!site_description || site_description === 'None') {\n        site_description = '';\n      }\n      return site_description;\n    });\n  }, [metadata, setTitle, setSubtitle]);\n\n  const appTitle = configApi.getOptional('app.title') || 'Backstage';\n\n  const { locationMetadata, spec } = entityMetadata || {};\n  const lifecycle = spec?.lifecycle;\n\n  const ownedByRelations = entityMetadata\n    ? getEntityRelations(entityMetadata, RELATION_OWNED_BY)\n    : [];\n\n  const docsRootLink = useRouteRef(rootRouteRef)();\n\n  const labels = (\n    <>\n      <HeaderLabel\n        label={capitalize(entityMetadata?.kind || 'entity')}\n        value={\n          <EntityRefLink\n            color=\"inherit\"\n            entityRef={entityRef}\n            title={entityMetadata?.metadata.title}\n            defaultKind=\"Component\"\n          />\n        }\n      />\n      {ownedByRelations.length > 0 && (\n        <HeaderLabel\n          label=\"Owner\"\n          value={\n            <EntityRefLinks\n              color=\"inherit\"\n              entityRefs={ownedByRelations}\n              defaultKind=\"group\"\n            />\n          }\n        />\n      )}\n      {lifecycle ? (\n        <HeaderLabel label=\"Lifecycle\" value={String(lifecycle)} />\n      ) : null}\n      {locationMetadata &&\n      locationMetadata.type !== 'dir' &&\n      locationMetadata.type !== 'file' ? (\n        <HeaderLabel\n          label=\"\"\n          value={\n            <Grid container direction=\"column\" alignItems=\"center\">\n              <Grid style={{ padding: 0 }} item>\n                <CodeIcon style={{ marginTop: '-25px' }} />\n              </Grid>\n              <Grid style={{ padding: 0 }} item>\n                Source\n              </Grid>\n            </Grid>\n          }\n          url={locationMetadata.target}\n        />\n      ) : null}\n    </>\n  );\n\n  // If there is no entity or techdocs metadata, there's no reason to show the\n  // header (hides the header on 404 error pages).\n  const noEntMetadata = !entityMetadataLoading && entityMetadata === undefined;\n  const noTdMetadata = !metadataLoading && metadata === undefined;\n  if (noEntMetadata || noTdMetadata) return null;\n\n  const stringEntityRef = stringifyEntityRef(entityRef);\n\n  const entityDisplayName =\n    entityPresentationApi.forEntity(stringEntityRef).snapshot.primaryTitle;\n\n  const removeTrailingSlash = (str: string) => str.replace(/\\/$/, '');\n  const normalizeAndSpace = (str: string) =>\n    str.replace(/[-_]/g, ' ').split(' ').map(capitalize).join(' ');\n\n  let techdocsTabTitleItems: string[] = [];\n\n  if (path !== '')\n    techdocsTabTitleItems = removeTrailingSlash(path)\n      .split('/')\n      .map(normalizeAndSpace);\n\n  const tabTitleItems = [entityDisplayName, ...techdocsTabTitleItems, appTitle];\n  const tabTitle = tabTitleItems.join(' | ');\n\n  return (\n    <Header\n      type=\"Documentation\"\n      typeLink={docsRootLink}\n      title={title || skeleton}\n      subtitle={subtitle === '' ? undefined : subtitle || skeleton}\n    >\n      <Helmet titleTemplate=\"%s\">\n        <title>{tabTitle}</title>\n      </Helmet>\n      {labels}\n      {children}\n      {addons.renderComponentsByLocation(locations.Header)}\n    </Header>\n  );\n};\n"],"names":["locations"],"mappings":"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"}
+{"version":3,"file":"TechDocsReaderPageHeader.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PropsWithChildren } from 'react';\nimport Helmet from 'react-helmet';\n\nimport Grid from '@material-ui/core/Grid';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport CodeIcon from '@material-ui/icons/Code';\n\nimport {\n  TechDocsAddonLocations as locations,\n  TechDocsEntityMetadata,\n  TechDocsMetadata,\n} from '@backstage/plugin-techdocs-react';\nimport {\n  EntityRefLink,\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { RELATION_OWNED_BY, CompoundEntityRef } from '@backstage/catalog-model';\nimport { Header, HeaderLabel } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nimport capitalize from 'lodash/capitalize';\n\nimport { rootRouteRef } from '../../../routes';\nimport { useTechDocsReaderHeaderData } from '../../../hooks/useTechDocsReaderHeaderData';\n\nconst skeleton = <Skeleton animation=\"wave\" variant=\"text\" height={40} />;\n\n/**\n * Props for {@link TechDocsReaderPageHeader}\n *\n * @public\n * @deprecated No need to pass down properties anymore. The component consumes data from `TechDocsReaderPageContext` instead. Use the {@link @backstage/plugin-techdocs-react#useTechDocsReaderPage} hook for custom header.\n */\nexport type TechDocsReaderPageHeaderProps = PropsWithChildren<{\n  entityRef?: CompoundEntityRef;\n  entityMetadata?: TechDocsEntityMetadata;\n  techDocsMetadata?: TechDocsMetadata;\n}>;\n\n/**\n * Renders the reader page header.\n * This component does not accept props, please use\n * the Tech Docs add-ons to customize it\n * @public\n */\nexport const TechDocsReaderPageHeader = (\n  props: TechDocsReaderPageHeaderProps,\n) => {\n  const { children } = props;\n  const {\n    title,\n    subtitle,\n    entityRef,\n    entityMetadata,\n    tabTitle,\n    hidden,\n    showSourceLink,\n    sourceLink,\n    addons,\n  } = useTechDocsReaderHeaderData();\n\n  const docsRootLink = useRouteRef(rootRouteRef)();\n\n  if (hidden) return null;\n\n  const { spec } = entityMetadata || {};\n  const lifecycle = spec?.lifecycle;\n\n  const ownedByRelations = entityMetadata\n    ? getEntityRelations(entityMetadata, RELATION_OWNED_BY)\n    : [];\n\n  const labels = (\n    <>\n      <HeaderLabel\n        label={capitalize(entityMetadata?.kind || 'entity')}\n        value={\n          <EntityRefLink\n            color=\"inherit\"\n            entityRef={entityRef}\n            title={entityMetadata?.metadata.title}\n            defaultKind=\"Component\"\n          />\n        }\n      />\n      {ownedByRelations.length > 0 && (\n        <HeaderLabel\n          label=\"Owner\"\n          value={\n            <EntityRefLinks\n              color=\"inherit\"\n              entityRefs={ownedByRelations}\n              defaultKind=\"group\"\n            />\n          }\n        />\n      )}\n      {lifecycle ? (\n        <HeaderLabel label=\"Lifecycle\" value={String(lifecycle)} />\n      ) : null}\n      {showSourceLink ? (\n        <HeaderLabel\n          label=\"\"\n          value={\n            <Grid container direction=\"column\" alignItems=\"center\">\n              <Grid style={{ padding: 0 }} item>\n                <CodeIcon style={{ marginTop: '-25px' }} />\n              </Grid>\n              <Grid style={{ padding: 0 }} item>\n                Source\n              </Grid>\n            </Grid>\n          }\n          url={sourceLink}\n        />\n      ) : null}\n    </>\n  );\n\n  return (\n    <Header\n      type=\"Documentation\"\n      typeLink={docsRootLink}\n      title={title || skeleton}\n      subtitle={subtitle === '' ? undefined : subtitle || skeleton}\n    >\n      <Helmet titleTemplate=\"%s\">\n        <title>{tabTitle}</title>\n      </Helmet>\n      {labels}\n      {children}\n      {addons.renderComponentsByLocation(locations.Header)}\n    </Header>\n  );\n};\n"],"names":["locations"],"mappings":"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"}

package/dist/search/components/TechDocsSearch.esm.js

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { SearchContextProvider, useSearch, SearchAutocomplete } from '@backstage/plugin-search-react';
-import { useState, useEffect } from 'react';
+import { SearchContextProvider, SearchAutocomplete } from '@backstage/plugin-search-react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem.esm.js';
+import { useTechDocsSearch } from '../../hooks/useTechDocsSearch.esm.js';
 
 const isTechDocsSearchResult = (option) => {
   return option?.document;
@@ -16,33 +17,7 @@ const TechDocsSearchBar = (props) => {
   } = 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 { results, term, loading } = useTechDocsSearch(entityId);
   const handleSelection = (_, selection) => {
     if (isTechDocsSearchResult(selection)) {
       const { location } = selection.document;
@@ -71,7 +46,7 @@ const TechDocsSearchBar = (props) => {
       blurOnSelect: true,
       noOptionsText: "No results found",
       value: null,
-      options,
+      options: results,
       renderOption: ({ document, highlight }) => /* @__PURE__ */ jsx(
         TechDocsSearchResultListItem,
         {