@backstage/plugin-techdocs 1.12.5-next.1 → 1.12.5

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

@@ -1 +1 @@
-{"version":3,"file":"TechDocsBuildLogs.esm.js","sources":["../../../src/reader/components/TechDocsBuildLogs.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 { LogViewer } from '@backstage/core-components';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Grid from '@material-ui/core/Grid';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Close from '@material-ui/icons/Close';\nimport React, { useState } from 'react';\n\nconst useDrawerStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    paper: {\n      width: '100%',\n      [theme.breakpoints.up('sm')]: {\n        width: '75%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n      padding: theme.spacing(2.5),\n    },\n    root: {\n      height: '100%',\n      overflow: 'hidden',\n    },\n    logs: {\n      background: theme.palette.background.default,\n    },\n  }),\n);\n\nexport const TechDocsBuildLogsDrawerContent = ({\n  buildLog,\n  onClose,\n}: {\n  buildLog: string[];\n  onClose: () => void;\n}) => {\n  const classes = useDrawerStyles();\n  const logText =\n    buildLog.length === 0 ? 'Waiting for logs...' : buildLog.join('\\n');\n  return (\n    <Grid\n      container\n      direction=\"column\"\n      className={classes.root}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <Grid\n        item\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        spacing={0}\n        wrap=\"nowrap\"\n      >\n        <Typography variant=\"h5\">Build Details</Typography>\n        <IconButton\n          key=\"dismiss\"\n          title=\"Close the drawer\"\n          onClick={onClose}\n          color=\"inherit\"\n        >\n          <Close />\n        </IconButton>\n      </Grid>\n      <Grid item xs>\n        <LogViewer text={logText} classes={{ root: classes.logs }} />\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const TechDocsBuildLogs = ({ buildLog }: { buildLog: string[] }) => {\n  const classes = useDrawerStyles();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"inherit\" onClick={() => setOpen(true)}>\n        Show Build Logs\n      </Button>\n      <Drawer\n        classes={{ paper: classes.paper }}\n        anchor=\"right\"\n        open={open}\n        onClose={() => setOpen(false)}\n      >\n        <TechDocsBuildLogsDrawerContent\n          buildLog={buildLog}\n          onClose={() => setOpen(false)}\n        />\n      </Drawer>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TechDocsBuildLogs.esm.js","sources":["../../../src/reader/components/TechDocsBuildLogs.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 { LogViewer } from '@backstage/core-components';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Grid from '@material-ui/core/Grid';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Close from '@material-ui/icons/Close';\nimport { useState } from 'react';\n\nconst useDrawerStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    paper: {\n      width: '100%',\n      [theme.breakpoints.up('sm')]: {\n        width: '75%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n      padding: theme.spacing(2.5),\n    },\n    root: {\n      height: '100%',\n      overflow: 'hidden',\n    },\n    logs: {\n      background: theme.palette.background.default,\n    },\n  }),\n);\n\nexport const TechDocsBuildLogsDrawerContent = ({\n  buildLog,\n  onClose,\n}: {\n  buildLog: string[];\n  onClose: () => void;\n}) => {\n  const classes = useDrawerStyles();\n  const logText =\n    buildLog.length === 0 ? 'Waiting for logs...' : buildLog.join('\\n');\n  return (\n    <Grid\n      container\n      direction=\"column\"\n      className={classes.root}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <Grid\n        item\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        spacing={0}\n        wrap=\"nowrap\"\n      >\n        <Typography variant=\"h5\">Build Details</Typography>\n        <IconButton\n          key=\"dismiss\"\n          title=\"Close the drawer\"\n          onClick={onClose}\n          color=\"inherit\"\n        >\n          <Close />\n        </IconButton>\n      </Grid>\n      <Grid item xs>\n        <LogViewer text={logText} classes={{ root: classes.logs }} />\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const TechDocsBuildLogs = ({ buildLog }: { buildLog: string[] }) => {\n  const classes = useDrawerStyles();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button color=\"inherit\" onClick={() => setOpen(true)}>\n        Show Build Logs\n      </Button>\n      <Drawer\n        classes={{ paper: classes.paper }}\n        anchor=\"right\"\n        open={open}\n        onClose={() => setOpen(false)}\n      >\n        <TechDocsBuildLogsDrawerContent\n          buildLog={buildLog}\n          onClose={() => setOpen(false)}\n        />\n      </Drawer>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
 import { useApi, configApiRef, useAnalytics } from '@backstage/core-plugin-api';
 import { ErrorPage } from '@backstage/core-components';
 import { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';
@@ -19,7 +20,7 @@ const TechDocsNotFound = ({ errorMessage }) => {
   if (![void 0, "local"].includes(techdocsBuilder)) {
     additionalInfo = "Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not generate docs if they are not found. Make sure the project's docs are generated and published by some external process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage instance.";
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ErrorPage,
     {
       status: "404",

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

@@ -1 +1 @@
-{"version":3,"file":"TechDocsNotFound.esm.js","sources":["../../../src/reader/components/TechDocsNotFound.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 React, { useEffect } from 'react';\nimport { useApi, configApiRef, useAnalytics } from '@backstage/core-plugin-api';\nimport { ErrorPage } from '@backstage/core-components';\nimport { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';\nimport { useLocation } from 'react-router-dom';\n\ntype Props = {\n  errorMessage?: string;\n};\n\nexport const TechDocsNotFound = ({ errorMessage }: Props) => {\n  const techdocsBuilder =\n    useApi(configApiRef).getOptionalString('techdocs.builder');\n  const analyticsApi = useAnalytics();\n  const { entityRef } = useTechDocsReaderPage();\n  const location = useLocation();\n\n  useEffect(() => {\n    const { pathname, search, hash } = location;\n    analyticsApi.captureEvent('not-found', `${pathname}${search}${hash}`, {\n      attributes: entityRef,\n    });\n  }, [analyticsApi, entityRef, location]);\n\n  let additionalInfo = '';\n  if (![undefined, 'local'].includes(techdocsBuilder)) {\n    additionalInfo =\n      \"Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not \" +\n      \"generate docs if they are not found. Make sure the project's docs are generated and published by some external \" +\n      \"process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage \" +\n      'instance.';\n  }\n\n  return (\n    <ErrorPage\n      status=\"404\"\n      statusMessage={errorMessage || 'Documentation not found'}\n      additionalInfo={additionalInfo}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,gBAAmB,GAAA,CAAC,EAAE,YAAA,EAA0B,KAAA;AAC3D,EAAA,MAAM,eACJ,GAAA,MAAA,CAAO,YAAY,CAAA,CAAE,kBAAkB,kBAAkB,CAAA;AAC3D,EAAA,MAAM,eAAe,YAAa,EAAA;AAClC,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,qBAAsB,EAAA;AAC5C,EAAA,MAAM,WAAW,WAAY,EAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,IAAA,EAAS,GAAA,QAAA;AACnC,IAAa,YAAA,CAAA,YAAA,CAAa,aAAa,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,EAAG,IAAI,CAAI,CAAA,EAAA;AAAA,MACpE,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,SAAA,EAAW,QAAQ,CAAC,CAAA;AAEtC,EAAA,IAAI,cAAiB,GAAA,EAAA;AACrB,EAAA,IAAI,CAAC,CAAC,KAAA,CAAA,EAAW,OAAO,CAAE,CAAA,QAAA,CAAS,eAAe,CAAG,EAAA;AACnD,IACE,cAAA,GAAA,6UAAA;AAAA;AAMJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,KAAA;AAAA,MACP,eAAe,YAAgB,IAAA,yBAAA;AAAA,MAC/B;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"TechDocsNotFound.esm.js","sources":["../../../src/reader/components/TechDocsNotFound.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { useApi, configApiRef, useAnalytics } from '@backstage/core-plugin-api';\nimport { ErrorPage } from '@backstage/core-components';\nimport { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';\nimport { useLocation } from 'react-router-dom';\n\ntype Props = {\n  errorMessage?: string;\n};\n\nexport const TechDocsNotFound = ({ errorMessage }: Props) => {\n  const techdocsBuilder =\n    useApi(configApiRef).getOptionalString('techdocs.builder');\n  const analyticsApi = useAnalytics();\n  const { entityRef } = useTechDocsReaderPage();\n  const location = useLocation();\n\n  useEffect(() => {\n    const { pathname, search, hash } = location;\n    analyticsApi.captureEvent('not-found', `${pathname}${search}${hash}`, {\n      attributes: entityRef,\n    });\n  }, [analyticsApi, entityRef, location]);\n\n  let additionalInfo = '';\n  if (![undefined, 'local'].includes(techdocsBuilder)) {\n    additionalInfo =\n      \"Note that techdocs.builder is not set to 'local' in your config, which means this Backstage app will not \" +\n      \"generate docs if they are not found. Make sure the project's docs are generated and published by some external \" +\n      \"process (e.g. CI/CD pipeline). Or change techdocs.builder to 'local' to generate docs from this Backstage \" +\n      'instance.';\n  }\n\n  return (\n    <ErrorPage\n      status=\"404\"\n      statusMessage={errorMessage || 'Documentation not found'}\n      additionalInfo={additionalInfo}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,gBAAmB,GAAA,CAAC,EAAE,YAAA,EAA0B,KAAA;AAC3D,EAAA,MAAM,eACJ,GAAA,MAAA,CAAO,YAAY,CAAA,CAAE,kBAAkB,kBAAkB,CAAA;AAC3D,EAAA,MAAM,eAAe,YAAa,EAAA;AAClC,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,qBAAsB,EAAA;AAC5C,EAAA,MAAM,WAAW,WAAY,EAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,IAAA,EAAS,GAAA,QAAA;AACnC,IAAa,YAAA,CAAA,YAAA,CAAa,aAAa,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,EAAG,IAAI,CAAI,CAAA,EAAA;AAAA,MACpE,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,SAAA,EAAW,QAAQ,CAAC,CAAA;AAEtC,EAAA,IAAI,cAAiB,GAAA,EAAA;AACrB,EAAA,IAAI,CAAC,CAAC,KAAA,CAAA,EAAW,OAAO,CAAE,CAAA,QAAA,CAAS,eAAe,CAAG,EAAA;AACnD,IACE,cAAA,GAAA,6UAAA;AAAA;AAMJ,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,KAAA;AAAA,MACP,eAAe,YAAgB,IAAA,yBAAA;AAAA,MAC/B;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { Children } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
 import { useOutlet } from 'react-router-dom';
 import { Page } from '@backstage/core-components';
 import { TECHDOCS_ADDONS_WRAPPER_KEY, TECHDOCS_ADDONS_KEY, TechDocsReaderPageProvider } from '@backstage/plugin-techdocs-react';
@@ -12,7 +13,11 @@ import { styled, useTheme, createTheme, ThemeProvider } from '@material-ui/core/
 
 const TechDocsReaderLayout = (props) => {
   const { withSearch, withHeader = true } = props;
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "documentation" }, withHeader && /* @__PURE__ */ React.createElement(TechDocsReaderPageHeader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageSubheader, null), /* @__PURE__ */ React.createElement(TechDocsReaderPageContent, { withSearch }));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "documentation", children: [
+    withHeader && /* @__PURE__ */ jsx(TechDocsReaderPageHeader, {}),
+    /* @__PURE__ */ jsx(TechDocsReaderPageSubheader, {}),
+    /* @__PURE__ */ jsx(TechDocsReaderPageContent, { withSearch })
+  ] });
 };
 const StyledPage = styled(Page)({
   height: "inherit",
@@ -35,21 +40,21 @@ const TechDocsReaderPage = (props) => {
     const page = grandChildren.find(
       (grandChild) => !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) && !getComponentData(grandChild, TECHDOCS_ADDONS_KEY)
     );
-    return /* @__PURE__ */ React.createElement(ThemeProvider, { theme: readerPageTheme }, /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, page || /* @__PURE__ */ React.createElement(TechDocsReaderLayout, null))));
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme: readerPageTheme, children: /* @__PURE__ */ jsx(CookieAuthRefreshProvider, { pluginId: "techdocs", children: /* @__PURE__ */ jsx(TechDocsReaderPageProvider, { entityRef, children: page || /* @__PURE__ */ jsx(TechDocsReaderLayout, {}) }) }) });
   }
-  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme: readerPageTheme }, /* @__PURE__ */ React.createElement(CookieAuthRefreshProvider, { pluginId: "techdocs" }, /* @__PURE__ */ React.createElement(TechDocsReaderPageProvider, { entityRef }, ({ metadata, entityMetadata, onReady }) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: readerPageTheme, children: /* @__PURE__ */ jsx(CookieAuthRefreshProvider, { pluginId: "techdocs", children: /* @__PURE__ */ jsx(TechDocsReaderPageProvider, { entityRef, children: ({ metadata, entityMetadata, onReady }) => /* @__PURE__ */ jsx(
     StyledPage,
     {
       themeId: "documentation",
-      className: "techdocs-reader-page"
-    },
-    children instanceof Function ? children({
-      entityRef,
-      techdocsMetadataValue: metadata.value,
-      entityMetadataValue: entityMetadata.value,
-      onReady
-    }) : children
-  ))));
+      className: "techdocs-reader-page",
+      children: children instanceof Function ? children({
+        entityRef,
+        techdocsMetadataValue: metadata.value,
+        entityMetadataValue: entityMetadata.value,
+        onReady
+      }) : children
+    }
+  ) }) }) });
 };
 
 export { TechDocsReaderLayout, TechDocsReaderPage };

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

@@ -1 +1 @@
-{"version":3,"file":"TechDocsReaderPage.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPage/TechDocsReaderPage.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 React, { Children, ReactElement, ReactNode } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nimport { Page } from '@backstage/core-components';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport {\n  TECHDOCS_ADDONS_KEY,\n  TECHDOCS_ADDONS_WRAPPER_KEY,\n  TechDocsReaderPageProvider,\n} from '@backstage/plugin-techdocs-react';\n\nimport { TechDocsReaderPageRenderFunction } from '../../../types';\n\nimport { TechDocsReaderPageContent } from '../TechDocsReaderPageContent';\nimport { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader';\nimport { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader';\nimport { rootDocsRouteRef } from '../../../routes';\nimport {\n  getComponentData,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\n\nimport { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';\nimport {\n  createTheme,\n  styled,\n  ThemeOptions,\n  ThemeProvider,\n  useTheme,\n} from '@material-ui/core/styles';\n\n/* An explanation for the multiple ways of customizing the TechDocs reader page\n\nPlease refer to this page on the microsite for the latest recommended approach:\nhttps://backstage.io/docs/features/techdocs/how-to-guides#how-to-customize-the-techdocs-reader-page\n\nThe <TechDocsReaderPage> component is responsible for rendering the <TechDocsReaderPageProvider> and\nits contained version of a <Page>, which in turn renders the <TechDocsReaderPageContent>.\n\nHistorically, there have been different approaches on how this <Page> can be customized, and how the\n<TechDocsReaderPageContent> inside could be exchanged for a custom implementation (which was not\npossible before). Also, the current implementation supports every scenario to avoid breaking default\nconfigurations of TechDocs.\n\nIn particular, there are 4 different TechDocs page configurations:\n\nCONFIGURATION 1: <TechDocsReaderPage> only, no children\n\n<Route path=\"/docs/:namespace/:kind/:name/*\" element={<TechDocsReaderPage />} >\n\nThis is the simplest way to use TechDocs. Only a full page is passed, assuming that it comes with\nits content inside. Since we allowed customizing it, we started providing <TechDocsReaderLayout> as\na default implementation (which contains <TechDocsReaderPageContent>).\n\nCONFIGURATION 2 (not advised): <TechDocsReaderPage> with element children\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {techdocsPage}\n    </TechDocsReaderPage>\n  }\n/>\n\nPreviously, there were two ways of passing children to <TechDocsReaderPage>: either as elements (as\nshown above), or as a render function (described below in CONFIGURATION 3). The \"techdocsPage\" is\nlocated in packages/app/src/components/techdocs and is the default implementation of the content\ninside.\n\nCONFIGURATION 3 (not advised): <TechDocsReaderPage> with render function as child\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {({ metadata, entityMetadata, onReady }) => (\n        techdocsPage\n      )}\n    </TechDocsReaderPage>\n  }\n/>\n\nSimilar to CONFIGURATION 2, the direct children will be passed to the <TechDocsReaderPage> but in\nthis case interpreted as render prop.\n\nCONFIGURATION 4: <TechDocsReaderPage> and provided content in <Route>\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={<TechDocsReaderPage />}\n>\n  {techDocsPage}\n  <TechDocsAddons>\n    <ExpandableNavigation />\n    <ReportIssue />\n    <TextSize />\n    <LightBox />\n  </TechDocsAddons>\n</Route>\n\nThis is the current state in packages/app/src/App.tsx and moved the location of children from inside\nthe element prop in the <Route> to the children of the <Route>. Then, in <TechDocsReaderPage> they\nare retrieved using the useOutlet hook from React Router.\n\nNOTE: Render functions are no longer supported in this approach.\n*/\n\n/**\n * Props for {@link TechDocsReaderLayout}\n * @public\n */\nexport type TechDocsReaderLayoutProps = {\n  /**\n   * Show or hide the header, defaults to true.\n   */\n  withHeader?: boolean;\n  /**\n   * Show or hide the content search bar, defaults to true.\n   */\n  withSearch?: boolean;\n};\n\n/**\n * Default TechDocs reader page structure composed with a header and content\n * @public\n */\nexport const TechDocsReaderLayout = (props: TechDocsReaderLayoutProps) => {\n  const { withSearch, withHeader = true } = props;\n  return (\n    <Page themeId=\"documentation\">\n      {withHeader && <TechDocsReaderPageHeader />}\n      <TechDocsReaderPageSubheader />\n      <TechDocsReaderPageContent withSearch={withSearch} />\n    </Page>\n  );\n};\n\n/**\n * @public\n */\nexport type TechDocsReaderPageProps = {\n  entityRef?: CompoundEntityRef;\n  children?: TechDocsReaderPageRenderFunction | ReactNode;\n  overrideThemeOptions?: Partial<ThemeOptions>;\n};\n\n/**\n * Styled Backstage Page that fills available vertical space\n */\nconst StyledPage = styled(Page)({\n  height: 'inherit',\n  overflowY: 'visible',\n});\n\n/**\n * An addon-aware implementation of the TechDocsReaderPage.\n *\n * @public\n */\nexport const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {\n  const currentTheme = useTheme();\n\n  const readerPageTheme = createTheme({\n    ...currentTheme,\n    ...(props.overrideThemeOptions || {}),\n  });\n  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);\n  const { children, entityRef = { kind, name, namespace } } = props;\n\n  const outlet = useOutlet();\n\n  if (!children) {\n    const childrenList = outlet ? Children.toArray(outlet.props.children) : [];\n\n    const grandChildren = childrenList.flatMap<ReactElement>(\n      child => (child as ReactElement)?.props?.children ?? [],\n    );\n\n    const page: React.ReactNode = grandChildren.find(\n      grandChild =>\n        !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) &&\n        !getComponentData(grandChild, TECHDOCS_ADDONS_KEY),\n    );\n\n    // As explained above, \"page\" is configuration 4 and <TechDocsReaderLayout> is 1\n    return (\n      <ThemeProvider theme={readerPageTheme}>\n        <CookieAuthRefreshProvider pluginId=\"techdocs\">\n          <TechDocsReaderPageProvider entityRef={entityRef}>\n            {(page as JSX.Element) || <TechDocsReaderLayout />}\n          </TechDocsReaderPageProvider>\n        </CookieAuthRefreshProvider>\n      </ThemeProvider>\n    );\n  }\n  // As explained above, a render function is configuration 3 and React element is 2\n  return (\n    <ThemeProvider theme={readerPageTheme}>\n      <CookieAuthRefreshProvider pluginId=\"techdocs\">\n        <TechDocsReaderPageProvider entityRef={entityRef}>\n          {({ metadata, entityMetadata, onReady }) => (\n            <StyledPage\n              themeId=\"documentation\"\n              className=\"techdocs-reader-page\"\n            >\n              {children instanceof Function\n                ? children({\n                    entityRef,\n                    techdocsMetadataValue: metadata.value,\n                    entityMetadataValue: entityMetadata.value,\n                    onReady,\n                  })\n                : children}\n            </StyledPage>\n          )}\n        </TechDocsReaderPageProvider>\n      </CookieAuthRefreshProvider>\n    </ThemeProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA+Ia,MAAA,oBAAA,GAAuB,CAAC,KAAqC,KAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,UAAa,GAAA,IAAA,EAAS,GAAA,KAAA;AAC1C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,eAAA,EAAA,EACX,8BAAe,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAyB,CACzC,kBAAA,KAAA,CAAA,aAAA,CAAC,2BAA4B,EAAA,IAAA,CAAA,kBAC5B,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,YAAwB,CACrD,CAAA;AAEJ;AAcA,MAAM,UAAA,GAAa,MAAO,CAAA,IAAI,CAAE,CAAA;AAAA,EAC9B,MAAQ,EAAA,SAAA;AAAA,EACR,SAAW,EAAA;AACb,CAAC,CAAA;AAOY,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,QAAS,EAAA;AAE9B,EAAA,MAAM,kBAAkB,WAAY,CAAA;AAAA,IAClC,GAAG,YAAA;AAAA,IACH,GAAI,KAAM,CAAA,oBAAA,IAAwB;AAAC,GACpC,CAAA;AACD,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,SAAU,EAAA,GAAI,kBAAkB,gBAAgB,CAAA;AACpE,EAAM,MAAA,EAAE,UAAU,SAAY,GAAA,EAAE,MAAM,IAAM,EAAA,SAAA,IAAgB,GAAA,KAAA;AAE5D,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAM,MAAA,YAAA,GAAe,SAAS,QAAS,CAAA,OAAA,CAAQ,OAAO,KAAM,CAAA,QAAQ,IAAI,EAAC;AAEzE,IAAA,MAAM,gBAAgB,YAAa,CAAA,OAAA;AAAA,MACjC,CAAU,KAAA,KAAA,KAAA,EAAwB,KAAO,EAAA,QAAA,IAAY;AAAC,KACxD;AAEA,IAAA,MAAM,OAAwB,aAAc,CAAA,IAAA;AAAA,MAC1C,CAAA,UAAA,KACE,CAAC,gBAAiB,CAAA,UAAA,EAAY,2BAA2B,CACzD,IAAA,CAAC,gBAAiB,CAAA,UAAA,EAAY,mBAAmB;AAAA,KACrD;AAGA,IAAA,2CACG,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,EAA2B,aACxB,IAAwB,oBAAA,KAAA,CAAA,aAAA,CAAC,oBAAqB,EAAA,IAAA,CAClD,CACF,CACF,CAAA;AAAA;AAIJ,EAAA,2CACG,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,EAA2B,aACzB,CAAC,EAAE,QAAU,EAAA,cAAA,EAAgB,SAC5B,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,eAAA;AAAA,MACR,SAAU,EAAA;AAAA,KAAA;AAAA,IAET,QAAA,YAAoB,WACjB,QAAS,CAAA;AAAA,MACP,SAAA;AAAA,MACA,uBAAuB,QAAS,CAAA,KAAA;AAAA,MAChC,qBAAqB,cAAe,CAAA,KAAA;AAAA,MACpC;AAAA,KACD,CACD,GAAA;AAAA,GAGV,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TechDocsReaderPage.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPage/TechDocsReaderPage.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 { Children, ReactElement, ReactNode } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nimport { Page } from '@backstage/core-components';\nimport { CompoundEntityRef } from '@backstage/catalog-model';\nimport {\n  TECHDOCS_ADDONS_KEY,\n  TECHDOCS_ADDONS_WRAPPER_KEY,\n  TechDocsReaderPageProvider,\n} from '@backstage/plugin-techdocs-react';\n\nimport { TechDocsReaderPageRenderFunction } from '../../../types';\n\nimport { TechDocsReaderPageContent } from '../TechDocsReaderPageContent';\nimport { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader';\nimport { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader';\nimport { rootDocsRouteRef } from '../../../routes';\nimport {\n  getComponentData,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\n\nimport { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';\nimport {\n  createTheme,\n  styled,\n  ThemeOptions,\n  ThemeProvider,\n  useTheme,\n} from '@material-ui/core/styles';\n\n/* An explanation for the multiple ways of customizing the TechDocs reader page\n\nPlease refer to this page on the microsite for the latest recommended approach:\nhttps://backstage.io/docs/features/techdocs/how-to-guides#how-to-customize-the-techdocs-reader-page\n\nThe <TechDocsReaderPage> component is responsible for rendering the <TechDocsReaderPageProvider> and\nits contained version of a <Page>, which in turn renders the <TechDocsReaderPageContent>.\n\nHistorically, there have been different approaches on how this <Page> can be customized, and how the\n<TechDocsReaderPageContent> inside could be exchanged for a custom implementation (which was not\npossible before). Also, the current implementation supports every scenario to avoid breaking default\nconfigurations of TechDocs.\n\nIn particular, there are 4 different TechDocs page configurations:\n\nCONFIGURATION 1: <TechDocsReaderPage> only, no children\n\n<Route path=\"/docs/:namespace/:kind/:name/*\" element={<TechDocsReaderPage />} >\n\nThis is the simplest way to use TechDocs. Only a full page is passed, assuming that it comes with\nits content inside. Since we allowed customizing it, we started providing <TechDocsReaderLayout> as\na default implementation (which contains <TechDocsReaderPageContent>).\n\nCONFIGURATION 2 (not advised): <TechDocsReaderPage> with element children\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {techdocsPage}\n    </TechDocsReaderPage>\n  }\n/>\n\nPreviously, there were two ways of passing children to <TechDocsReaderPage>: either as elements (as\nshown above), or as a render function (described below in CONFIGURATION 3). The \"techdocsPage\" is\nlocated in packages/app/src/components/techdocs and is the default implementation of the content\ninside.\n\nCONFIGURATION 3 (not advised): <TechDocsReaderPage> with render function as child\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={\n    <TechDocsReaderPage>\n      {({ metadata, entityMetadata, onReady }) => (\n        techdocsPage\n      )}\n    </TechDocsReaderPage>\n  }\n/>\n\nSimilar to CONFIGURATION 2, the direct children will be passed to the <TechDocsReaderPage> but in\nthis case interpreted as render prop.\n\nCONFIGURATION 4: <TechDocsReaderPage> and provided content in <Route>\n\n<Route\n  path=\"/docs/:namespace/:kind/:name/*\"\n  element={<TechDocsReaderPage />}\n>\n  {techDocsPage}\n  <TechDocsAddons>\n    <ExpandableNavigation />\n    <ReportIssue />\n    <TextSize />\n    <LightBox />\n  </TechDocsAddons>\n</Route>\n\nThis is the current state in packages/app/src/App.tsx and moved the location of children from inside\nthe element prop in the <Route> to the children of the <Route>. Then, in <TechDocsReaderPage> they\nare retrieved using the useOutlet hook from React Router.\n\nNOTE: Render functions are no longer supported in this approach.\n*/\n\n/**\n * Props for {@link TechDocsReaderLayout}\n * @public\n */\nexport type TechDocsReaderLayoutProps = {\n  /**\n   * Show or hide the header, defaults to true.\n   */\n  withHeader?: boolean;\n  /**\n   * Show or hide the content search bar, defaults to true.\n   */\n  withSearch?: boolean;\n};\n\n/**\n * Default TechDocs reader page structure composed with a header and content\n * @public\n */\nexport const TechDocsReaderLayout = (props: TechDocsReaderLayoutProps) => {\n  const { withSearch, withHeader = true } = props;\n  return (\n    <Page themeId=\"documentation\">\n      {withHeader && <TechDocsReaderPageHeader />}\n      <TechDocsReaderPageSubheader />\n      <TechDocsReaderPageContent withSearch={withSearch} />\n    </Page>\n  );\n};\n\n/**\n * @public\n */\nexport type TechDocsReaderPageProps = {\n  entityRef?: CompoundEntityRef;\n  children?: TechDocsReaderPageRenderFunction | ReactNode;\n  overrideThemeOptions?: Partial<ThemeOptions>;\n};\n\n/**\n * Styled Backstage Page that fills available vertical space\n */\nconst StyledPage = styled(Page)({\n  height: 'inherit',\n  overflowY: 'visible',\n});\n\n/**\n * An addon-aware implementation of the TechDocsReaderPage.\n *\n * @public\n */\nexport const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {\n  const currentTheme = useTheme();\n\n  const readerPageTheme = createTheme({\n    ...currentTheme,\n    ...(props.overrideThemeOptions || {}),\n  });\n  const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);\n  const { children, entityRef = { kind, name, namespace } } = props;\n\n  const outlet = useOutlet();\n\n  if (!children) {\n    const childrenList = outlet ? Children.toArray(outlet.props.children) : [];\n\n    const grandChildren = childrenList.flatMap<ReactElement>(\n      child => (child as ReactElement)?.props?.children ?? [],\n    );\n\n    const page: ReactNode = grandChildren.find(\n      grandChild =>\n        !getComponentData(grandChild, TECHDOCS_ADDONS_WRAPPER_KEY) &&\n        !getComponentData(grandChild, TECHDOCS_ADDONS_KEY),\n    );\n\n    // As explained above, \"page\" is configuration 4 and <TechDocsReaderLayout> is 1\n    return (\n      <ThemeProvider theme={readerPageTheme}>\n        <CookieAuthRefreshProvider pluginId=\"techdocs\">\n          <TechDocsReaderPageProvider entityRef={entityRef}>\n            {(page as JSX.Element) || <TechDocsReaderLayout />}\n          </TechDocsReaderPageProvider>\n        </CookieAuthRefreshProvider>\n      </ThemeProvider>\n    );\n  }\n  // As explained above, a render function is configuration 3 and React element is 2\n  return (\n    <ThemeProvider theme={readerPageTheme}>\n      <CookieAuthRefreshProvider pluginId=\"techdocs\">\n        <TechDocsReaderPageProvider entityRef={entityRef}>\n          {({ metadata, entityMetadata, onReady }) => (\n            <StyledPage\n              themeId=\"documentation\"\n              className=\"techdocs-reader-page\"\n            >\n              {children instanceof Function\n                ? children({\n                    entityRef,\n                    techdocsMetadataValue: metadata.value,\n                    entityMetadataValue: entityMetadata.value,\n                    onReady,\n                  })\n                : children}\n            </StyledPage>\n          )}\n        </TechDocsReaderPageProvider>\n      </CookieAuthRefreshProvider>\n    </ThemeProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+Ia,MAAA,oBAAA,GAAuB,CAAC,KAAqC,KAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,UAAa,GAAA,IAAA,EAAS,GAAA,KAAA;AAC1C,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,eACX,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA,wBAAe,wBAAyB,EAAA,EAAA,CAAA;AAAA,wBACxC,2BAA4B,EAAA,EAAA,CAAA;AAAA,oBAC7B,GAAA,CAAC,6BAA0B,UAAwB,EAAA;AAAA,GACrD,EAAA,CAAA;AAEJ;AAcA,MAAM,UAAA,GAAa,MAAO,CAAA,IAAI,CAAE,CAAA;AAAA,EAC9B,MAAQ,EAAA,SAAA;AAAA,EACR,SAAW,EAAA;AACb,CAAC,CAAA;AAOY,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,QAAS,EAAA;AAE9B,EAAA,MAAM,kBAAkB,WAAY,CAAA;AAAA,IAClC,GAAG,YAAA;AAAA,IACH,GAAI,KAAM,CAAA,oBAAA,IAAwB;AAAC,GACpC,CAAA;AACD,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,SAAU,EAAA,GAAI,kBAAkB,gBAAgB,CAAA;AACpE,EAAM,MAAA,EAAE,UAAU,SAAY,GAAA,EAAE,MAAM,IAAM,EAAA,SAAA,IAAgB,GAAA,KAAA;AAE5D,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAM,MAAA,YAAA,GAAe,SAAS,QAAS,CAAA,OAAA,CAAQ,OAAO,KAAM,CAAA,QAAQ,IAAI,EAAC;AAEzE,IAAA,MAAM,gBAAgB,YAAa,CAAA,OAAA;AAAA,MACjC,CAAU,KAAA,KAAA,KAAA,EAAwB,KAAO,EAAA,QAAA,IAAY;AAAC,KACxD;AAEA,IAAA,MAAM,OAAkB,aAAc,CAAA,IAAA;AAAA,MACpC,CAAA,UAAA,KACE,CAAC,gBAAiB,CAAA,UAAA,EAAY,2BAA2B,CACzD,IAAA,CAAC,gBAAiB,CAAA,UAAA,EAAY,mBAAmB;AAAA,KACrD;AAGA,IAAA,2BACG,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,QAAA,kBAAA,GAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAClC,QAAC,kBAAA,GAAA,CAAA,0BAAA,EAAA,EAA2B,WACxB,QAAwB,EAAA,IAAA,oBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,CAAA,EAClD,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,aAAc,EAAA,EAAA,KAAA,EAAO,eACpB,EAAA,QAAA,kBAAA,GAAA,CAAC,6BAA0B,QAAS,EAAA,UAAA,EAClC,QAAC,kBAAA,GAAA,CAAA,0BAAA,EAAA,EAA2B,WACzB,QAAC,EAAA,CAAA,EAAE,QAAU,EAAA,cAAA,EAAgB,SAC5B,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,eAAA;AAAA,MACR,SAAU,EAAA,sBAAA;AAAA,MAET,QAAA,EAAA,QAAA,YAAoB,WACjB,QAAS,CAAA;AAAA,QACP,SAAA;AAAA,QACA,uBAAuB,QAAS,CAAA,KAAA;AAAA,QAChC,qBAAqB,cAAe,CAAA,KAAA;AAAA,QACpC;AAAA,OACD,CACD,GAAA;AAAA;AAAA,GACN,EAEJ,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useEffect, useCallback } from 'react';
+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';
@@ -59,18 +60,25 @@ const TechDocsReaderPageContent = withTechDocsReaderProvider(
       [setShadowRoot, onReady]
     );
     if (entityMetadataLoading === false && !entityMetadata)
-      return /* @__PURE__ */ React.createElement(NotFoundErrorPage, null);
+      return /* @__PURE__ */ jsx(NotFoundErrorPage, {});
     if (!dom) {
-      return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null))));
+      return /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(Grid, { xs: 12, item: true, children: /* @__PURE__ */ jsx(TechDocsStateIndicator, {}) }) }) });
     }
-    return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React.createElement(TechDocsStateIndicator, null)), withSearch && /* @__PURE__ */ React.createElement(Grid, { className: classes.search, xs: "auto", item: true }, /* @__PURE__ */ React.createElement(
-      TechDocsSearch,
-      {
-        entityId: entityRef,
-        entityTitle: entityMetadata?.metadata?.title,
-        searchResultUrlMapper
-      }
-    )), /* @__PURE__ */ React.createElement(Grid, { xs: 12, item: true }, (state === "CHECKING" || isStyleLoading) && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement(TechDocsShadowDom, { element: dom, onAppend: handleAppend }, /* @__PURE__ */ React.createElement(TechDocsReaderPageContentAddons, null)))));
+    return /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+      /* @__PURE__ */ jsx(Grid, { xs: 12, item: true, children: /* @__PURE__ */ jsx(TechDocsStateIndicator, {}) }),
+      withSearch && /* @__PURE__ */ jsx(Grid, { className: classes.search, xs: "auto", item: true, children: /* @__PURE__ */ jsx(
+        TechDocsSearch,
+        {
+          entityId: entityRef,
+          entityTitle: entityMetadata?.metadata?.title,
+          searchResultUrlMapper
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Grid, { xs: 12, item: true, children: [
+        (state === "CHECKING" || isStyleLoading) && /* @__PURE__ */ jsx(Progress, {}),
+        /* @__PURE__ */ jsx(TechDocsShadowDom, { element: dom, onAppend: handleAppend, children: /* @__PURE__ */ jsx(TechDocsReaderPageContentAddons, {}) })
+      ] })
+    ] }) });
   }
 );
 const Reader = TechDocsReaderPageContent;

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 React, { 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   * 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);\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":"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"}
+{"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   * 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);\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":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Portal from '@material-ui/core/Portal';
 import { useTechDocsAddons, useTechDocsReaderPage, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
 
@@ -36,7 +36,11 @@ const TechDocsReaderPageContentAddons = () => {
     );
     secondarySidebarElement?.prepend(secondarySidebarAddonLocation);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Portal, { container: primarySidebarAddonLocation }, addons.renderComponentsByLocation(TechDocsAddonLocations.PrimarySidebar)), /* @__PURE__ */ React.createElement(Portal, { container: contentElement }, addons.renderComponentsByLocation(TechDocsAddonLocations.Content)), /* @__PURE__ */ React.createElement(Portal, { container: secondarySidebarAddonLocation }, addons.renderComponentsByLocation(TechDocsAddonLocations.SecondarySidebar)));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Portal, { container: primarySidebarAddonLocation, children: addons.renderComponentsByLocation(TechDocsAddonLocations.PrimarySidebar) }),
+    /* @__PURE__ */ jsx(Portal, { container: contentElement, children: addons.renderComponentsByLocation(TechDocsAddonLocations.Content) }),
+    /* @__PURE__ */ jsx(Portal, { container: secondarySidebarAddonLocation, children: addons.renderComponentsByLocation(TechDocsAddonLocations.SecondarySidebar) })
+  ] });
 };
 
 export { TechDocsReaderPageContentAddons };

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

@@ -1 +1 @@
-{"version":3,"file":"TechDocsReaderPageContentAddons.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.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 React from 'react';\nimport Portal from '@material-ui/core/Portal';\nimport {\n  useTechDocsAddons,\n  TechDocsAddonLocations as locations,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\n\nexport const TechDocsReaderPageContentAddons = () => {\n  const addons = useTechDocsAddons();\n\n  const { shadowRoot } = useTechDocsReaderPage();\n\n  const contentElement = shadowRoot?.querySelector(\n    '[data-md-component=\"content\"]',\n  );\n\n  const primarySidebarElement = shadowRoot?.querySelector(\n    'div[data-md-component=\"sidebar\"][data-md-type=\"navigation\"], div[data-md-component=\"navigation\"]',\n  );\n  let primarySidebarAddonLocation = primarySidebarElement?.querySelector(\n    '[data-techdocs-addons-location=\"primary sidebar\"]',\n  );\n  if (!primarySidebarAddonLocation) {\n    primarySidebarAddonLocation = document.createElement('div');\n    primarySidebarAddonLocation.setAttribute(\n      'data-techdocs-addons-location',\n      'primary sidebar',\n    );\n    primarySidebarElement?.prepend(primarySidebarAddonLocation);\n  }\n\n  const secondarySidebarElement = shadowRoot?.querySelector(\n    'div[data-md-component=\"sidebar\"][data-md-type=\"toc\"], div[data-md-component=\"toc\"]',\n  );\n  let secondarySidebarAddonLocation = secondarySidebarElement?.querySelector(\n    '[data-techdocs-addons-location=\"secondary sidebar\"]',\n  );\n  if (!secondarySidebarAddonLocation) {\n    secondarySidebarAddonLocation = document.createElement('div');\n    secondarySidebarAddonLocation.setAttribute(\n      'data-techdocs-addons-location',\n      'secondary sidebar',\n    );\n    secondarySidebarElement?.prepend(secondarySidebarAddonLocation);\n  }\n\n  return (\n    <>\n      <Portal container={primarySidebarAddonLocation}>\n        {addons.renderComponentsByLocation(locations.PrimarySidebar)}\n      </Portal>\n      <Portal container={contentElement}>\n        {addons.renderComponentsByLocation(locations.Content)}\n      </Portal>\n      <Portal container={secondarySidebarAddonLocation}>\n        {addons.renderComponentsByLocation(locations.SecondarySidebar)}\n      </Portal>\n    </>\n  );\n};\n"],"names":["locations"],"mappings":";;;;AAwBO,MAAM,kCAAkC,MAAM;AACnD,EAAA,MAAM,SAAS,iBAAkB,EAAA;AAEjC,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,qBAAsB,EAAA;AAE7C,EAAA,MAAM,iBAAiB,UAAY,EAAA,aAAA;AAAA,IACjC;AAAA,GACF;AAEA,EAAA,MAAM,wBAAwB,UAAY,EAAA,aAAA;AAAA,IACxC;AAAA,GACF;AACA,EAAA,IAAI,8BAA8B,qBAAuB,EAAA,aAAA;AAAA,IACvD;AAAA,GACF;AACA,EAAA,IAAI,CAAC,2BAA6B,EAAA;AAChC,IAA8B,2BAAA,GAAA,QAAA,CAAS,cAAc,KAAK,CAAA;AAC1D,IAA4B,2BAAA,CAAA,YAAA;AAAA,MAC1B,+BAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,qBAAA,EAAuB,QAAQ,2BAA2B,CAAA;AAAA;AAG5D,EAAA,MAAM,0BAA0B,UAAY,EAAA,aAAA;AAAA,IAC1C;AAAA,GACF;AACA,EAAA,IAAI,gCAAgC,uBAAyB,EAAA,aAAA;AAAA,IAC3D;AAAA,GACF;AACA,EAAA,IAAI,CAAC,6BAA+B,EAAA;AAClC,IAAgC,6BAAA,GAAA,QAAA,CAAS,cAAc,KAAK,CAAA;AAC5D,IAA8B,6BAAA,CAAA,YAAA;AAAA,MAC5B,+BAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,uBAAA,EAAyB,QAAQ,6BAA6B,CAAA;AAAA;AAGhE,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,SAAA,EAAW,2BAChB,EAAA,EAAA,MAAA,CAAO,0BAA2B,CAAAA,sBAAA,CAAU,cAAc,CAC7D,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,SAAW,EAAA,cAAA,EAAA,EAChB,MAAO,CAAA,0BAAA,CAA2BA,sBAAU,CAAA,OAAO,CACtD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAA,6BAAA,EAAA,EAChB,MAAO,CAAA,0BAAA,CAA2BA,sBAAU,CAAA,gBAAgB,CAC/D,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TechDocsReaderPageContentAddons.esm.js","sources":["../../../../src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContentAddons.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 Portal from '@material-ui/core/Portal';\nimport {\n  useTechDocsAddons,\n  TechDocsAddonLocations as locations,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\n\nexport const TechDocsReaderPageContentAddons = () => {\n  const addons = useTechDocsAddons();\n\n  const { shadowRoot } = useTechDocsReaderPage();\n\n  const contentElement = shadowRoot?.querySelector(\n    '[data-md-component=\"content\"]',\n  );\n\n  const primarySidebarElement = shadowRoot?.querySelector(\n    'div[data-md-component=\"sidebar\"][data-md-type=\"navigation\"], div[data-md-component=\"navigation\"]',\n  );\n  let primarySidebarAddonLocation = primarySidebarElement?.querySelector(\n    '[data-techdocs-addons-location=\"primary sidebar\"]',\n  );\n  if (!primarySidebarAddonLocation) {\n    primarySidebarAddonLocation = document.createElement('div');\n    primarySidebarAddonLocation.setAttribute(\n      'data-techdocs-addons-location',\n      'primary sidebar',\n    );\n    primarySidebarElement?.prepend(primarySidebarAddonLocation);\n  }\n\n  const secondarySidebarElement = shadowRoot?.querySelector(\n    'div[data-md-component=\"sidebar\"][data-md-type=\"toc\"], div[data-md-component=\"toc\"]',\n  );\n  let secondarySidebarAddonLocation = secondarySidebarElement?.querySelector(\n    '[data-techdocs-addons-location=\"secondary sidebar\"]',\n  );\n  if (!secondarySidebarAddonLocation) {\n    secondarySidebarAddonLocation = document.createElement('div');\n    secondarySidebarAddonLocation.setAttribute(\n      'data-techdocs-addons-location',\n      'secondary sidebar',\n    );\n    secondarySidebarElement?.prepend(secondarySidebarAddonLocation);\n  }\n\n  return (\n    <>\n      <Portal container={primarySidebarAddonLocation}>\n        {addons.renderComponentsByLocation(locations.PrimarySidebar)}\n      </Portal>\n      <Portal container={contentElement}>\n        {addons.renderComponentsByLocation(locations.Content)}\n      </Portal>\n      <Portal container={secondarySidebarAddonLocation}>\n        {addons.renderComponentsByLocation(locations.SecondarySidebar)}\n      </Portal>\n    </>\n  );\n};\n"],"names":["locations"],"mappings":";;;;AAuBO,MAAM,kCAAkC,MAAM;AACnD,EAAA,MAAM,SAAS,iBAAkB,EAAA;AAEjC,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,qBAAsB,EAAA;AAE7C,EAAA,MAAM,iBAAiB,UAAY,EAAA,aAAA;AAAA,IACjC;AAAA,GACF;AAEA,EAAA,MAAM,wBAAwB,UAAY,EAAA,aAAA;AAAA,IACxC;AAAA,GACF;AACA,EAAA,IAAI,8BAA8B,qBAAuB,EAAA,aAAA;AAAA,IACvD;AAAA,GACF;AACA,EAAA,IAAI,CAAC,2BAA6B,EAAA;AAChC,IAA8B,2BAAA,GAAA,QAAA,CAAS,cAAc,KAAK,CAAA;AAC1D,IAA4B,2BAAA,CAAA,YAAA;AAAA,MAC1B,+BAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,qBAAA,EAAuB,QAAQ,2BAA2B,CAAA;AAAA;AAG5D,EAAA,MAAM,0BAA0B,UAAY,EAAA,aAAA;AAAA,IAC1C;AAAA,GACF;AACA,EAAA,IAAI,gCAAgC,uBAAyB,EAAA,aAAA;AAAA,IAC3D;AAAA,GACF;AACA,EAAA,IAAI,CAAC,6BAA+B,EAAA;AAClC,IAAgC,6BAAA,GAAA,QAAA,CAAS,cAAc,KAAK,CAAA;AAC5D,IAA8B,6BAAA,CAAA,YAAA;AAAA,MAC5B,+BAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,uBAAA,EAAyB,QAAQ,6BAA6B,CAAA;AAAA;AAGhE,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,2BAAA,EAChB,iBAAO,0BAA2B,CAAAA,sBAAA,CAAU,cAAc,CAC7D,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,UAAO,SAAW,EAAA,cAAA,EAChB,iBAAO,0BAA2B,CAAAA,sBAAA,CAAU,OAAO,CACtD,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,UAAO,SAAW,EAAA,6BAAA,EAChB,iBAAO,0BAA2B,CAAAA,sBAAA,CAAU,gBAAgB,CAC/D,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+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';
@@ -12,7 +13,7 @@ import capitalize from 'lodash/capitalize';
 import { rootRouteRef } from '../../../routes.esm.js';
 import { useParams } from 'react-router-dom';
 
-const skeleton = /* @__PURE__ */ React.createElement(Skeleton, { animation: "wave", variant: "text", height: 40 });
+const skeleton = /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "text", height: 40 });
 const TechDocsReaderPageHeader = (props) => {
   const { children } = props;
   const addons = useTechDocsAddons();
@@ -44,41 +45,49 @@ const TechDocsReaderPageHeader = (props) => {
   const lifecycle = spec?.lifecycle;
   const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
   const docsRootLink = useRouteRef(rootRouteRef)();
-  const labels = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    HeaderLabel,
-    {
-      label: capitalize(entityMetadata?.kind || "entity"),
-      value: /* @__PURE__ */ React.createElement(
-        EntityRefLink,
-        {
-          color: "inherit",
-          entityRef,
-          title: entityMetadata?.metadata.title,
-          defaultKind: "Component"
-        }
-      )
-    }
-  ), ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(
-    HeaderLabel,
-    {
-      label: "Owner",
-      value: /* @__PURE__ */ React.createElement(
-        EntityRefLinks,
-        {
-          color: "inherit",
-          entityRefs: ownedByRelations,
-          defaultKind: "group"
-        }
-      )
-    }
-  ), lifecycle ? /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Lifecycle", value: String(lifecycle) }) : null, locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ React.createElement(
-    HeaderLabel,
-    {
-      label: "",
-      value: /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { style: { padding: 0 }, item: true }, /* @__PURE__ */ React.createElement(CodeIcon, { style: { marginTop: "-25px" } })), /* @__PURE__ */ React.createElement(Grid, { style: { padding: 0 }, item: true }, "Source")),
-      url: locationMetadata.target
-    }
-  ) : null);
+  const labels = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      HeaderLabel,
+      {
+        label: capitalize(entityMetadata?.kind || "entity"),
+        value: /* @__PURE__ */ jsx(
+          EntityRefLink,
+          {
+            color: "inherit",
+            entityRef,
+            title: entityMetadata?.metadata.title,
+            defaultKind: "Component"
+          }
+        )
+      }
+    ),
+    ownedByRelations.length > 0 && /* @__PURE__ */ jsx(
+      HeaderLabel,
+      {
+        label: "Owner",
+        value: /* @__PURE__ */ jsx(
+          EntityRefLinks,
+          {
+            color: "inherit",
+            entityRefs: ownedByRelations,
+            defaultKind: "group"
+          }
+        )
+      }
+    ),
+    lifecycle ? /* @__PURE__ */ jsx(HeaderLabel, { label: "Lifecycle", value: String(lifecycle) }) : null,
+    locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__PURE__ */ jsx(
+      HeaderLabel,
+      {
+        label: "",
+        value: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", alignItems: "center", children: [
+          /* @__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
+      }
+    ) : null
+  ] });
   const noEntMetadata = !entityMetadataLoading && entityMetadata === void 0;
   const noTdMetadata = !metadataLoading && metadata === void 0;
   if (noEntMetadata || noTdMetadata) return null;
@@ -91,18 +100,20 @@ const TechDocsReaderPageHeader = (props) => {
     techdocsTabTitleItems = removeTrailingSlash(path).split("/").slice(0, 3).map(normalizeAndSpace);
   const tabTitleItems = [appTitle, entityDisplayName, ...techdocsTabTitleItems];
   const tabTitle = tabTitleItems.join(" | ");
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Header,
     {
       type: "Documentation",
       typeLink: docsRootLink,
       title: title || skeleton,
-      subtitle: subtitle === "" ? void 0 : subtitle || skeleton
-    },
-    /* @__PURE__ */ React.createElement(Helmet, { titleTemplate: "%s" }, /* @__PURE__ */ React.createElement("title", null, tabTitle)),
-    labels,
-    children,
-    addons.renderComponentsByLocation(TechDocsAddonLocations.Header)
+      subtitle: subtitle === "" ? void 0 : subtitle || skeleton,
+      children: [
+        /* @__PURE__ */ jsx(Helmet, { titleTemplate: "%s", children: /* @__PURE__ */ jsx("title", { children: tabTitle }) }),
+        labels,
+        children,
+        addons.renderComponentsByLocation(TechDocsAddonLocations.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 React, { 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      .slice(0, 3)\n      .map(normalizeAndSpace);\n\n  const tabTitleItems = [appTitle, entityDisplayName, ...techdocsTabTitleItems];\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":";;;;;;;;;;;;;;AAiDA,MAAM,QAAA,uCAAY,QAAS,EAAA,EAAA,SAAA,EAAU,QAAO,OAAQ,EAAA,MAAA,EAAO,QAAQ,EAAI,EAAA,CAAA;AAoB1D,MAAA,wBAAA,GAA2B,CACtC,KACG,KAAA;AACH,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,EAAA,MAAM,SAAS,iBAAkB,EAAA;AACjC,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAErC,EAAM,MAAA,qBAAA,GAAwB,OAAO,wBAAwB,CAAA;AAC7D,EAAA,MAAM,EAAE,GAAA,EAAK,IAAO,GAAA,EAAA,KAAO,SAAU,EAAA;AAErC,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,EAAE,KAAO,EAAA,QAAA,EAAU,SAAS,eAAgB,EAAA;AAAA,IACtD,cAAgB,EAAA,EAAE,KAAO,EAAA,cAAA,EAAgB,SAAS,qBAAsB;AAAA,MACtE,qBAAsB,EAAA;AAE1B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IAAA,QAAA,CAAS,SAAS,SAAS,CAAA;AAC3B,IAAA,WAAA,CAAY,MAAM;AAChB,MAAI,IAAA,EAAE,kBAAqB,GAAA,QAAA;AAC3B,MAAI,IAAA,CAAC,gBAAoB,IAAA,gBAAA,KAAqB,MAAQ,EAAA;AACpD,QAAmB,gBAAA,GAAA,EAAA;AAAA;AAErB,MAAO,OAAA,gBAAA;AAAA,KACR,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,QAAA,EAAU,WAAW,CAAC,CAAA;AAEpC,EAAA,MAAM,QAAW,GAAA,SAAA,CAAU,WAAY,CAAA,WAAW,CAAK,IAAA,WAAA;AAEvD,EAAA,MAAM,EAAE,gBAAA,EAAkB,IAAK,EAAA,GAAI,kBAAkB,EAAC;AACtD,EAAA,MAAM,YAAY,IAAM,EAAA,SAAA;AAExB,EAAA,MAAM,mBAAmB,cACrB,GAAA,kBAAA,CAAmB,cAAgB,EAAA,iBAAiB,IACpD,EAAC;AAEL,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,YAAY,CAAE,EAAA;AAE/C,EAAA,MAAM,yBAEF,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,UAAA,CAAW,cAAgB,EAAA,IAAA,IAAQ,QAAQ,CAAA;AAAA,MAClD,KACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,SAAA;AAAA,UACN,SAAA;AAAA,UACA,KAAA,EAAO,gBAAgB,QAAS,CAAA,KAAA;AAAA,UAChC,WAAY,EAAA;AAAA;AAAA;AACd;AAAA,GAEJ,EACC,gBAAiB,CAAA,MAAA,GAAS,CACzB,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,KACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,SAAA;AAAA,UACN,UAAY,EAAA,gBAAA;AAAA,UACZ,WAAY,EAAA;AAAA;AAAA;AACd;AAAA,KAIL,SACC,mBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,KAAM,EAAA,WAAA,EAAY,OAAO,MAAO,CAAA,SAAS,CAAG,EAAA,CAAA,GACvD,MACH,gBACD,IAAA,gBAAA,CAAiB,SAAS,KAC1B,IAAA,gBAAA,CAAiB,SAAS,MACxB,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,EAAA;AAAA,MACN,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,WAAU,QAAS,EAAA,UAAA,EAAW,QAC5C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,KAAO,EAAA,EAAE,OAAS,EAAA,CAAA,IAAK,IAAI,EAAA,IAAA,EAAA,kBAC9B,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAO,EAAE,SAAA,EAAW,OAAQ,EAAA,EAAG,CAC3C,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,CAAA,IAAK,IAAI,EAAA,IAAA,EAAA,EAAC,QAElC,CACF,CAAA;AAAA,MAEF,KAAK,gBAAiB,CAAA;AAAA;AAAA,MAEtB,IACN,CAAA;AAKF,EAAM,MAAA,aAAA,GAAgB,CAAC,qBAAA,IAAyB,cAAmB,KAAA,KAAA,CAAA;AACnE,EAAM,MAAA,YAAA,GAAe,CAAC,eAAA,IAAmB,QAAa,KAAA,KAAA,CAAA;AACtD,EAAI,IAAA,aAAA,IAAiB,cAAqB,OAAA,IAAA;AAE1C,EAAM,MAAA,eAAA,GAAkB,mBAAmB,SAAS,CAAA;AAEpD,EAAA,MAAM,iBACJ,GAAA,qBAAA,CAAsB,SAAU,CAAA,eAAe,EAAE,QAAS,CAAA,YAAA;AAE5D,EAAA,MAAM,sBAAsB,CAAC,GAAA,KAAgB,GAAI,CAAA,OAAA,CAAQ,OAAO,EAAE,CAAA;AAClE,EAAA,MAAM,iBAAoB,GAAA,CAAC,GACzB,KAAA,GAAA,CAAI,QAAQ,IAAM,EAAA,GAAG,CAAE,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,GAAA,CAAI,UAAU,CAAA,CAAE,KAAK,GAAG,CAAA;AAE5D,EAAA,IAAI,wBAAkC,EAAC;AAEvC,EAAA,IAAI,IAAS,KAAA,EAAA;AACX,IAAwB,qBAAA,GAAA,mBAAA,CAAoB,IAAI,CAAA,CAC7C,KAAM,CAAA,GAAG,CACT,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACV,CAAA,GAAA,CAAI,iBAAiB,CAAA;AAE1B,EAAA,MAAM,aAAgB,GAAA,CAAC,QAAU,EAAA,iBAAA,EAAmB,GAAG,qBAAqB,CAAA;AAC5E,EAAM,MAAA,QAAA,GAAW,aAAc,CAAA,IAAA,CAAK,KAAK,CAAA;AAEzC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,eAAA;AAAA,MACL,QAAU,EAAA,YAAA;AAAA,MACV,OAAO,KAAS,IAAA,QAAA;AAAA,MAChB,QAAU,EAAA,QAAA,KAAa,EAAK,GAAA,KAAA,CAAA,GAAY,QAAY,IAAA;AAAA,KAAA;AAAA,wCAEnD,MAAO,EAAA,EAAA,aAAA,EAAc,wBACnB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAO,QAAS,CACnB,CAAA;AAAA,IACC,MAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,CAAO,0BAA2B,CAAAA,sBAAA,CAAU,MAAM;AAAA,GACrD;AAEJ;;;;"}
+{"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      .slice(0, 3)\n      .map(normalizeAndSpace);\n\n  const tabTitleItems = [appTitle, entityDisplayName, ...techdocsTabTitleItems];\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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"}

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

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -38,37 +39,42 @@ const TechDocsReaderPageSubheader = (props) => {
   const settingsAddons = addons.renderComponentsByLocation(TechDocsAddonLocations.Settings);
   if (!subheaderAddons && !settingsAddons) return null;
   if (entityMetadataLoading === false && !entityMetadata) return null;
-  return /* @__PURE__ */ React.createElement(Toolbar, { classes, ...props.toolbarProps }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(Toolbar, { classes, ...props.toolbarProps, children: /* @__PURE__ */ jsxs(
     Box,
     {
       display: "flex",
       justifyContent: "flex-end",
       width: "100%",
-      flexWrap: "wrap"
-    },
-    subheaderAddons,
-    settingsAddons ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "Settings" }, /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        "aria-controls": "tech-docs-reader-page-settings",
-        "aria-haspopup": "true",
-        onClick: handleClick
-      },
-      /* @__PURE__ */ React.createElement(SettingsIcon, null)
-    )), /* @__PURE__ */ React.createElement(
-      Menu,
-      {
-        id: "tech-docs-reader-page-settings",
-        getContentAnchorEl: null,
-        anchorEl,
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        open: Boolean(anchorEl),
-        onClose: handleClose,
-        keepMounted: true
-      },
-      /* @__PURE__ */ React.createElement("div", null, settingsAddons)
-    )) : null
-  ));
+      flexWrap: "wrap",
+      children: [
+        subheaderAddons,
+        settingsAddons ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Tooltip, { title: "Settings", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-controls": "tech-docs-reader-page-settings",
+              "aria-haspopup": "true",
+              onClick: handleClick,
+              children: /* @__PURE__ */ jsx(SettingsIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Menu,
+            {
+              id: "tech-docs-reader-page-settings",
+              getContentAnchorEl: null,
+              anchorEl,
+              anchorOrigin: { vertical: "bottom", horizontal: "right" },
+              open: Boolean(anchorEl),
+              onClose: handleClose,
+              keepMounted: true,
+              children: /* @__PURE__ */ jsx("div", { children: settingsAddons })
+            }
+          )
+        ] }) : null
+      ]
+    }
+  ) });
 };
 
 export { TechDocsReaderPageSubheader };