@backstage/plugin-api-docs 0.12.6-next.1 → 0.12.6

package/dist/components/ApisCards/ProvidedApisCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProvidedApisCard.esm.js","sources":["../../../src/components/ApisCards/ProvidedApisCard.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 { ApiEntity, RELATION_PROVIDES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport { apiEntityColumns } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\n\n/**\n * @public\n */\nexport const ProvidedApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const {\n    variant = 'gridItem',\n    title = 'Provided APIs',\n    columns = apiEntityColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_PROVIDES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title=\"Could not load APIs\"\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            This {entity.kind.toLocaleLowerCase('en-US')} does not provide any\n            APIs.\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\"\n              externalLinkIcon\n            >\n              Learn how to change this\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuCa,MAAA,gBAAA,GAAmB,CAAC,KAK3B,KAAA;AACJ,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,UAAA;AAAA,IACV,KAAQ,GAAA,eAAA;AAAA,IACR,OAAU,GAAA,gBAAA;AAAA,IACV,eAAe;AAAC,GACd,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CACZ,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAM,EAAA,qBAAA;AAAA,QACN,OAAA,sCAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA,sCACG,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,SAAW,EAAA,QAAA,EACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAQ,OACpB,EAAA,MAAA,CAAO,IAAK,CAAA,iBAAA,CAAkB,OAAO,CAAA,EAAE,6BAE/C,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,iGAAA;AAAA,UACH,gBAAgB,EAAA;AAAA,SAAA;AAAA,QACjB;AAAA,OAGH,CACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ProvidedApisCard.esm.js","sources":["../../../src/components/ApisCards/ProvidedApisCard.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 { ApiEntity, RELATION_PROVIDES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport { getApiEntityColumns } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const ProvidedApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('providedApisCard.title'),\n    columns = getApiEntityColumns(t),\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_PROVIDES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('providedApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('providedApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\"\n              externalLinkIcon\n            >\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwCa,MAAA,gBAAA,GAAmB,CAAC,KAK3B,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,wBAAwB,CAAA;AAAA,IAClC,OAAA,GAAU,oBAAoB,CAAC,CAAA;AAAA,IAC/B,eAAe;AAAC,GACd,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,CACZ,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,8BAA8B,CAAA;AAAA,QACvC,OAAA,sBAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACG,IAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,QAAA,EAAA,CAAA,CAAE,qCAAuC,EAAA;AAAA,UACxC,MAAQ,EAAA,MAAA,CAAO,IAAK,CAAA,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CACH,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,iGAAA;AAAA,YACH,gBAAgB,EAAA,IAAA;AAAA,YAEf,YAAE,uBAAuB;AAAA;AAAA,SAE9B,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ApisCards/presets.esm.js

@@ -1,7 +1,8 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { EntityTable } from '@backstage/plugin-catalog-react';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import ToggleButton from '@material-ui/lab/ToggleButton';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import '@material-ui/lab/Alert';
 import '../../config.esm.js';
 import '@backstage/core-components';
@@ -12,48 +13,56 @@ import '../OpenApiDefinitionWidget/OpenApiDefinitionWidget.esm.js';
 import '@material-ui/core/styles';
 import { ApiTypeTitle } from '../ApiDefinitionCard/ApiTypeTitle.esm.js';
 import { ApiDefinitionDialog } from '../ApiDefinitionDialog/ApiDefinitionDialog.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
-function createSpecApiTypeColumn() {
+function createSpecApiTypeColumn(t) {
   return {
-    title: "Type",
+    title: t("apiEntityColumns.typeTitle"),
     field: "spec.type",
-    render: (entity) => /* @__PURE__ */ React.createElement(ApiTypeTitle, { apiEntity: entity })
+    render: (entity) => /* @__PURE__ */ jsx(ApiTypeTitle, { apiEntity: entity })
   };
 }
 const ApiDefinitionButton = ({ apiEntity }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    ToggleButton,
-    {
-      "aria-label": "Toggle API Definition Dialog",
-      onClick: () => setDialogOpen(!dialogOpen),
-      value: dialogOpen
-    },
-    /* @__PURE__ */ React.createElement(ExtensionIcon, null)
-  ), /* @__PURE__ */ React.createElement(
-    ApiDefinitionDialog,
-    {
-      entity: apiEntity,
-      open: dialogOpen,
-      onClose: () => setDialogOpen(false)
-    }
-  ));
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToggleButton,
+      {
+        "aria-label": t("apiDefinitionDialog.toggleButtonAriaLabel"),
+        onClick: () => setDialogOpen(!dialogOpen),
+        value: dialogOpen,
+        children: /* @__PURE__ */ jsx(ExtensionIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ApiDefinitionDialog,
+      {
+        entity: apiEntity,
+        open: dialogOpen,
+        onClose: () => setDialogOpen(false)
+      }
+    )
+  ] });
 };
-function createApiDefinitionColumn() {
+function createApiDefinitionColumn(t) {
   return {
-    title: "API Definition",
-    render: (entity) => /* @__PURE__ */ React.createElement(ApiDefinitionButton, { apiEntity: entity })
+    title: t("apiEntityColumns.apiDefinitionTitle"),
+    render: (entity) => /* @__PURE__ */ jsx(ApiDefinitionButton, { apiEntity: entity })
   };
 }
-const apiEntityColumns = [
-  EntityTable.columns.createEntityRefColumn({ defaultKind: "API" }),
-  EntityTable.columns.createSystemColumn(),
-  EntityTable.columns.createOwnerColumn(),
-  createSpecApiTypeColumn(),
-  EntityTable.columns.createSpecLifecycleColumn(),
-  EntityTable.columns.createMetadataDescriptionColumn(),
-  createApiDefinitionColumn()
-];
+const getApiEntityColumns = (t) => {
+  return [
+    EntityTable.columns.createEntityRefColumn({ defaultKind: "API" }),
+    EntityTable.columns.createSystemColumn(),
+    EntityTable.columns.createOwnerColumn(),
+    createSpecApiTypeColumn(t),
+    EntityTable.columns.createSpecLifecycleColumn(),
+    EntityTable.columns.createMetadataDescriptionColumn(),
+    createApiDefinitionColumn(t)
+  ];
+};
 
-export { apiEntityColumns, createSpecApiTypeColumn };
+export { createSpecApiTypeColumn, getApiEntityColumns };
 //# sourceMappingURL=presets.esm.js.map

package/dist/components/ApisCards/presets.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"presets.esm.js","sources":["../../../src/components/ApisCards/presets.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 { ApiEntity } from '@backstage/catalog-model';\nimport { TableColumn } from '@backstage/core-components';\nimport { EntityTable } from '@backstage/plugin-catalog-react';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport React, { useState } from 'react';\nimport { ApiTypeTitle } from '../ApiDefinitionCard';\nimport { ApiDefinitionDialog } from '../ApiDefinitionDialog';\n\nexport function createSpecApiTypeColumn(): TableColumn<ApiEntity> {\n  return {\n    title: 'Type',\n    field: 'spec.type',\n    render: entity => <ApiTypeTitle apiEntity={entity} />,\n  };\n}\n\nconst ApiDefinitionButton = ({ apiEntity }: { apiEntity: ApiEntity }) => {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  return (\n    <>\n      <ToggleButton\n        aria-label=\"Toggle API Definition Dialog\"\n        onClick={() => setDialogOpen(!dialogOpen)}\n        value={dialogOpen}\n      >\n        <ExtensionIcon />\n      </ToggleButton>\n      <ApiDefinitionDialog\n        entity={apiEntity}\n        open={dialogOpen}\n        onClose={() => setDialogOpen(false)}\n      />\n    </>\n  );\n};\n\nfunction createApiDefinitionColumn(): TableColumn<ApiEntity> {\n  return {\n    title: 'API Definition',\n    render: entity => <ApiDefinitionButton apiEntity={entity} />,\n  };\n}\n\nexport const apiEntityColumns: TableColumn<ApiEntity>[] = [\n  EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n  EntityTable.columns.createSystemColumn(),\n  EntityTable.columns.createOwnerColumn(),\n  createSpecApiTypeColumn(),\n  EntityTable.columns.createSpecLifecycleColumn(),\n  EntityTable.columns.createMetadataDescriptionColumn(),\n  createApiDefinitionColumn(),\n];\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,SAAS,uBAAkD,GAAA;AAChE,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,MAAA;AAAA,IACP,KAAO,EAAA,WAAA;AAAA,IACP,MAAQ,EAAA,CAAA,MAAA,qBAAW,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,WAAW,MAAQ,EAAA;AAAA,GACrD;AACF;AAEA,MAAM,mBAAsB,GAAA,CAAC,EAAE,SAAA,EAA0C,KAAA;AACvE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,8BAAA;AAAA,MACX,OAAS,EAAA,MAAM,aAAc,CAAA,CAAC,UAAU,CAAA;AAAA,MACxC,KAAO,EAAA;AAAA,KAAA;AAAA,wCAEN,aAAc,EAAA,IAAA;AAAA,GAEjB,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,MAAQ,EAAA,SAAA;AAAA,MACR,IAAM,EAAA,UAAA;AAAA,MACN,OAAA,EAAS,MAAM,aAAA,CAAc,KAAK;AAAA;AAAA,GAEtC,CAAA;AAEJ,CAAA;AAEA,SAAS,yBAAoD,GAAA;AAC3D,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,gBAAA;AAAA,IACP,MAAQ,EAAA,CAAA,MAAA,qBAAW,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,WAAW,MAAQ,EAAA;AAAA,GAC5D;AACF;AAEO,MAAM,gBAA6C,GAAA;AAAA,EACxD,YAAY,OAAQ,CAAA,qBAAA,CAAsB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,EAChE,WAAA,CAAY,QAAQ,kBAAmB,EAAA;AAAA,EACvC,WAAA,CAAY,QAAQ,iBAAkB,EAAA;AAAA,EACtC,uBAAwB,EAAA;AAAA,EACxB,WAAA,CAAY,QAAQ,yBAA0B,EAAA;AAAA,EAC9C,WAAA,CAAY,QAAQ,+BAAgC,EAAA;AAAA,EACpD,yBAA0B;AAC5B;;;;"}
+{"version":3,"file":"presets.esm.js","sources":["../../../src/components/ApisCards/presets.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 { ApiEntity } from '@backstage/catalog-model';\nimport { TableColumn } from '@backstage/core-components';\nimport { EntityTable } from '@backstage/plugin-catalog-react';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport { useState } from 'react';\nimport { ApiTypeTitle } from '../ApiDefinitionCard';\nimport { ApiDefinitionDialog } from '../ApiDefinitionDialog';\nimport {\n  TranslationFunction,\n  useTranslationRef,\n} from '@backstage/core-plugin-api/alpha';\nimport { apiDocsTranslationRef } from '../../translation';\n\nexport function createSpecApiTypeColumn(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity> {\n  return {\n    title: t('apiEntityColumns.typeTitle'),\n    field: 'spec.type',\n    render: entity => <ApiTypeTitle apiEntity={entity} />,\n  };\n}\n\nconst ApiDefinitionButton = ({ apiEntity }: { apiEntity: ApiEntity }) => {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  return (\n    <>\n      <ToggleButton\n        aria-label={t('apiDefinitionDialog.toggleButtonAriaLabel')}\n        onClick={() => setDialogOpen(!dialogOpen)}\n        value={dialogOpen}\n      >\n        <ExtensionIcon />\n      </ToggleButton>\n      <ApiDefinitionDialog\n        entity={apiEntity}\n        open={dialogOpen}\n        onClose={() => setDialogOpen(false)}\n      />\n    </>\n  );\n};\n\nfunction createApiDefinitionColumn(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity> {\n  return {\n    title: t('apiEntityColumns.apiDefinitionTitle'),\n    render: entity => <ApiDefinitionButton apiEntity={entity} />,\n  };\n}\n\nexport const getApiEntityColumns = (\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity>[] => {\n  return [\n    EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n    EntityTable.columns.createSystemColumn(),\n    EntityTable.columns.createOwnerColumn(),\n    createSpecApiTypeColumn(t),\n    EntityTable.columns.createSpecLifecycleColumn(),\n    EntityTable.columns.createMetadataDescriptionColumn(),\n    createApiDefinitionColumn(t),\n  ];\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8BO,SAAS,wBACd,CACwB,EAAA;AACxB,EAAO,OAAA;AAAA,IACL,KAAA,EAAO,EAAE,4BAA4B,CAAA;AAAA,IACrC,KAAO,EAAA,WAAA;AAAA,IACP,MAAQ,EAAA,CAAA,MAAA,qBAAW,GAAA,CAAA,YAAA,EAAA,EAAa,WAAW,MAAQ,EAAA;AAAA,GACrD;AACF;AAEA,MAAM,mBAAsB,GAAA,CAAC,EAAE,SAAA,EAA0C,KAAA;AACvE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,EAAE,2CAA2C,CAAA;AAAA,QACzD,OAAS,EAAA,MAAM,aAAc,CAAA,CAAC,UAAU,CAAA;AAAA,QACxC,KAAO,EAAA,UAAA;AAAA,QAEP,8BAAC,aAAc,EAAA,EAAA;AAAA;AAAA,KACjB;AAAA,oBACA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,SAAA;AAAA,QACR,IAAM,EAAA,UAAA;AAAA,QACN,OAAA,EAAS,MAAM,aAAA,CAAc,KAAK;AAAA;AAAA;AACpC,GACF,EAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,0BACP,CACwB,EAAA;AACxB,EAAO,OAAA;AAAA,IACL,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,IAC9C,MAAQ,EAAA,CAAA,MAAA,qBAAW,GAAA,CAAA,mBAAA,EAAA,EAAoB,WAAW,MAAQ,EAAA;AAAA,GAC5D;AACF;AAEa,MAAA,mBAAA,GAAsB,CACjC,CAC6B,KAAA;AAC7B,EAAO,OAAA;AAAA,IACL,YAAY,OAAQ,CAAA,qBAAA,CAAsB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,IAChE,WAAA,CAAY,QAAQ,kBAAmB,EAAA;AAAA,IACvC,WAAA,CAAY,QAAQ,iBAAkB,EAAA;AAAA,IACtC,wBAAwB,CAAC,CAAA;AAAA,IACzB,WAAA,CAAY,QAAQ,yBAA0B,EAAA;AAAA,IAC9C,WAAA,CAAY,QAAQ,+BAAgC,EAAA;AAAA,IACpD,0BAA0B,CAAC;AAAA,GAC7B;AACF;;;;"}

package/dist/components/AsyncApiDefinitionWidget/AsyncApiDefinition.esm.js

@@ -1,7 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
 import AsyncApi from '@asyncapi/react-component';
 import '@asyncapi/react-component/styles/default.css';
 import { makeStyles, alpha, darken, useTheme } from '@material-ui/core/styles';
-import React from 'react';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -162,7 +162,7 @@ const AsyncApiDefinition = ({
   if (resolvers) {
     config.parserOptions.__unstable.resolver.resolvers = resolvers;
   }
-  return /* @__PURE__ */ React.createElement("div", { className: classNames }, /* @__PURE__ */ React.createElement(AsyncApi, { schema: definition, config }));
+  return /* @__PURE__ */ jsx("div", { className: classNames, children: /* @__PURE__ */ jsx(AsyncApi, { schema: definition, config }) });
 };
 
 export { AsyncApiDefinition };

package/dist/components/AsyncApiDefinitionWidget/AsyncApiDefinition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncApiDefinition.esm.js","sources":["../../../src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.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 AsyncApi from '@asyncapi/react-component';\nimport '@asyncapi/react-component/styles/default.css';\nimport { makeStyles, alpha, darken } from '@material-ui/core/styles';\nimport React from 'react';\nimport { useTheme } from '@material-ui/core/styles';\n\n/** @public */\nexport type AsyncApiResolver = {\n  schema: string;\n  order: number;\n  canRead: boolean;\n  read(uri: any): Promise<string>;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    fontFamily: 'inherit',\n    '& .bg-white': {\n      background: 'none',\n    },\n    '& .text-4xl': {\n      ...theme.typography.h3,\n    },\n    ' & h2': {\n      ...theme.typography.h4,\n    },\n    '& .border': {\n      borderColor: alpha(theme.palette.border, 0.1),\n    },\n    '& .min-w-min': {\n      minWidth: 'fit-content',\n    },\n    '& .examples': {\n      padding: '1rem',\n    },\n    '& .bg-teal-500': {\n      backgroundColor: theme.palette.status.ok,\n    },\n    '& .bg-blue-500': {\n      backgroundColor: theme.palette.info.main,\n    },\n    '& .bg-blue-400': {\n      backgroundColor: theme.palette.info.light,\n    },\n    '& .bg-indigo-400': {\n      backgroundColor: theme.palette.warning.main,\n    },\n    '& .text-teal-50': {\n      color: theme.palette.status.ok,\n    },\n    '& .text-red-600': {\n      color: theme.palette.error.main,\n    },\n    '& .text-orange-600': {\n      color: theme.palette.warning.main,\n    },\n    '& .text-teal-500': {\n      color: theme.palette.status.ok,\n    },\n    '& .text-blue-500': {\n      color: theme.palette.info.main,\n    },\n    '& .-rotate-90': {\n      '--tw-rotate': '0deg',\n    },\n    '& button': {\n      ...theme.typography.button,\n      borderRadius: theme.shape.borderRadius,\n      color: theme.palette.primary.main,\n      // override whatever may be in the theme's typography to ensure consistency with asyncapi\n      textTransform: 'inherit',\n    },\n    '& a': {\n      color: theme.palette.link,\n    },\n    '& a.no-underline': {\n      ...theme.typography.button,\n      background: 'none',\n      boxSizing: 'border-box',\n      minWidth: 64,\n      borderRadius: theme.shape.borderRadius,\n      transition: theme.transitions.create(\n        ['background-color', 'box-shadow', 'border'],\n        {\n          duration: theme.transitions.duration.short,\n        },\n      ),\n      padding: '5px 15px',\n      color: theme.palette.primary.main,\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,\n      '&:hover': {\n        textDecoration: 'none',\n        border: `1px solid ${theme.palette.primary.main}`,\n        backgroundColor: alpha(\n          theme.palette.primary.main,\n          theme.palette.action.hoverOpacity,\n        ),\n      },\n    },\n    '& li.no-underline': {\n      '& a': {\n        textDecoration: 'none',\n        color: theme.palette.getContrastText(theme.palette.primary.main),\n      },\n    },\n  },\n  dark: {\n    '& svg': {\n      fill: theme.palette.text.primary,\n    },\n    '& .prose': {\n      color: theme.palette.text.secondary,\n      '& h3': {\n        color: theme.palette.text.primary,\n      },\n    },\n    '& .bg-gray-100, .bg-gray-200': {\n      backgroundColor: theme.palette.background.default,\n    },\n    '& .text-gray-600': {\n      color: theme.palette.grey['50'],\n    },\n    '& .text-gray-700': {\n      color: theme.palette.grey['100'],\n    },\n    '& .panel--right': {\n      background: darken(theme.palette.navigation.background, 0.1),\n    },\n    '& .examples': {\n      backgroundColor: darken(theme.palette.navigation.background, 0.1),\n      '& pre': {\n        backgroundColor: darken(theme.palette.background.default, 0.2),\n      },\n    },\n  },\n}));\n\nconst httpsFetchResolver: AsyncApiResolver = {\n  schema: 'https',\n  order: 1,\n  canRead: true,\n  async read(uri: any) {\n    const response = await fetch(uri.toString());\n    return response.text();\n  },\n};\n\nconst httpFetchResolver: AsyncApiResolver = {\n  schema: 'http',\n  order: 1,\n  canRead: true,\n  async read(uri: any) {\n    const response = await fetch(uri.toString());\n    return response.text();\n  },\n};\n\ntype Props = {\n  definition: string;\n  resolvers?: AsyncApiResolver[];\n};\n\nexport const AsyncApiDefinition = ({\n  definition,\n  resolvers,\n}: Props): JSX.Element => {\n  const classes = useStyles();\n  const theme = useTheme();\n  const classNames = `${classes.root} ${\n    theme.palette.type === 'dark' ? classes.dark : ''\n  }`;\n\n  const config = {\n    parserOptions: {\n      __unstable: {\n        resolver: {\n          resolvers: [httpsFetchResolver, httpFetchResolver],\n        },\n      },\n    },\n  };\n\n  // Overwrite default resolvers if custom ones are set\n  if (resolvers) {\n    config.parserOptions.__unstable.resolver.resolvers = resolvers;\n  }\n\n  return (\n    <div className={classNames}>\n      <AsyncApi schema={definition} config={config} />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AsyncApiDefinition.esm.js","sources":["../../../src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.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 AsyncApi from '@asyncapi/react-component';\nimport '@asyncapi/react-component/styles/default.css';\nimport { makeStyles, alpha, darken } from '@material-ui/core/styles';\nimport { useTheme } from '@material-ui/core/styles';\n\n/** @public */\nexport type AsyncApiResolver = {\n  schema: string;\n  order: number;\n  canRead: boolean;\n  read(uri: any): Promise<string>;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    fontFamily: 'inherit',\n    '& .bg-white': {\n      background: 'none',\n    },\n    '& .text-4xl': {\n      ...theme.typography.h3,\n    },\n    ' & h2': {\n      ...theme.typography.h4,\n    },\n    '& .border': {\n      borderColor: alpha(theme.palette.border, 0.1),\n    },\n    '& .min-w-min': {\n      minWidth: 'fit-content',\n    },\n    '& .examples': {\n      padding: '1rem',\n    },\n    '& .bg-teal-500': {\n      backgroundColor: theme.palette.status.ok,\n    },\n    '& .bg-blue-500': {\n      backgroundColor: theme.palette.info.main,\n    },\n    '& .bg-blue-400': {\n      backgroundColor: theme.palette.info.light,\n    },\n    '& .bg-indigo-400': {\n      backgroundColor: theme.palette.warning.main,\n    },\n    '& .text-teal-50': {\n      color: theme.palette.status.ok,\n    },\n    '& .text-red-600': {\n      color: theme.palette.error.main,\n    },\n    '& .text-orange-600': {\n      color: theme.palette.warning.main,\n    },\n    '& .text-teal-500': {\n      color: theme.palette.status.ok,\n    },\n    '& .text-blue-500': {\n      color: theme.palette.info.main,\n    },\n    '& .-rotate-90': {\n      '--tw-rotate': '0deg',\n    },\n    '& button': {\n      ...theme.typography.button,\n      borderRadius: theme.shape.borderRadius,\n      color: theme.palette.primary.main,\n      // override whatever may be in the theme's typography to ensure consistency with asyncapi\n      textTransform: 'inherit',\n    },\n    '& a': {\n      color: theme.palette.link,\n    },\n    '& a.no-underline': {\n      ...theme.typography.button,\n      background: 'none',\n      boxSizing: 'border-box',\n      minWidth: 64,\n      borderRadius: theme.shape.borderRadius,\n      transition: theme.transitions.create(\n        ['background-color', 'box-shadow', 'border'],\n        {\n          duration: theme.transitions.duration.short,\n        },\n      ),\n      padding: '5px 15px',\n      color: theme.palette.primary.main,\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,\n      '&:hover': {\n        textDecoration: 'none',\n        border: `1px solid ${theme.palette.primary.main}`,\n        backgroundColor: alpha(\n          theme.palette.primary.main,\n          theme.palette.action.hoverOpacity,\n        ),\n      },\n    },\n    '& li.no-underline': {\n      '& a': {\n        textDecoration: 'none',\n        color: theme.palette.getContrastText(theme.palette.primary.main),\n      },\n    },\n  },\n  dark: {\n    '& svg': {\n      fill: theme.palette.text.primary,\n    },\n    '& .prose': {\n      color: theme.palette.text.secondary,\n      '& h3': {\n        color: theme.palette.text.primary,\n      },\n    },\n    '& .bg-gray-100, .bg-gray-200': {\n      backgroundColor: theme.palette.background.default,\n    },\n    '& .text-gray-600': {\n      color: theme.palette.grey['50'],\n    },\n    '& .text-gray-700': {\n      color: theme.palette.grey['100'],\n    },\n    '& .panel--right': {\n      background: darken(theme.palette.navigation.background, 0.1),\n    },\n    '& .examples': {\n      backgroundColor: darken(theme.palette.navigation.background, 0.1),\n      '& pre': {\n        backgroundColor: darken(theme.palette.background.default, 0.2),\n      },\n    },\n  },\n}));\n\nconst httpsFetchResolver: AsyncApiResolver = {\n  schema: 'https',\n  order: 1,\n  canRead: true,\n  async read(uri: any) {\n    const response = await fetch(uri.toString());\n    return response.text();\n  },\n};\n\nconst httpFetchResolver: AsyncApiResolver = {\n  schema: 'http',\n  order: 1,\n  canRead: true,\n  async read(uri: any) {\n    const response = await fetch(uri.toString());\n    return response.text();\n  },\n};\n\ntype Props = {\n  definition: string;\n  resolvers?: AsyncApiResolver[];\n};\n\nexport const AsyncApiDefinition = ({\n  definition,\n  resolvers,\n}: Props): JSX.Element => {\n  const classes = useStyles();\n  const theme = useTheme();\n  const classNames = `${classes.root} ${\n    theme.palette.type === 'dark' ? classes.dark : ''\n  }`;\n\n  const config = {\n    parserOptions: {\n      __unstable: {\n        resolver: {\n          resolvers: [httpsFetchResolver, httpFetchResolver],\n        },\n      },\n    },\n  };\n\n  // Overwrite default resolvers if custom ones are set\n  if (resolvers) {\n    config.parserOptions.__unstable.resolver.resolvers = resolvers;\n  }\n\n  return (\n    <div className={classNames}>\n      <AsyncApi schema={definition} config={config} />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.esm.js

@@ -1,13 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
 import { Progress } from '@backstage/core-components';
-import React, { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 
-const LazyAsyncApiDefinition = React.lazy(
+const LazyAsyncApiDefinition = lazy(
   () => import('./AsyncApiDefinition.esm.js').then((m) => ({
     default: m.AsyncApiDefinition
   }))
 );
 const AsyncApiDefinitionWidget = (props) => {
-  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, /* @__PURE__ */ React.createElement(LazyAsyncApiDefinition, { ...props }));
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children: /* @__PURE__ */ jsx(LazyAsyncApiDefinition, { ...props }) });
 };
 
 export { AsyncApiDefinitionWidget };

package/dist/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncApiDefinitionWidget.esm.js","sources":["../../../src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.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 { Progress } from '@backstage/core-components';\nimport React, { Suspense } from 'react';\nimport { AsyncApiResolver } from './AsyncApiDefinition';\n\n// The asyncapi component and related CSS has a significant size, only load it\n// if the element is actually used.\nconst LazyAsyncApiDefinition = React.lazy(() =>\n  import('./AsyncApiDefinition').then(m => ({\n    default: m.AsyncApiDefinition,\n  })),\n);\n\n/** @public */\nexport type AsyncApiDefinitionWidgetProps = {\n  definition: string;\n  resolvers?: AsyncApiResolver[];\n};\n\n/** @public */\nexport const AsyncApiDefinitionWidget = (\n  props: AsyncApiDefinitionWidgetProps,\n) => {\n  return (\n    <Suspense fallback={<Progress />}>\n      <LazyAsyncApiDefinition {...props} />\n    </Suspense>\n  );\n};\n"],"names":[],"mappings":";;;AAsBA,MAAM,yBAAyB,KAAM,CAAA,IAAA;AAAA,EAAK,MACxC,OAAO,6BAAsB,CAAA,CAAE,KAAK,CAAM,CAAA,MAAA;AAAA,IACxC,SAAS,CAAE,CAAA;AAAA,GACX,CAAA;AACJ,CAAA;AASa,MAAA,wBAAA,GAA2B,CACtC,KACG,KAAA;AACH,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,QAAA,kBAAW,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAS,qBAC3B,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,EAAwB,GAAG,KAAA,EAAO,CACrC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AsyncApiDefinitionWidget.esm.js","sources":["../../../src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.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 { Progress } from '@backstage/core-components';\nimport { lazy, Suspense } from 'react';\nimport { AsyncApiResolver } from './AsyncApiDefinition';\n\n// The asyncapi component and related CSS has a significant size, only load it\n// if the element is actually used.\nconst LazyAsyncApiDefinition = lazy(() =>\n  import('./AsyncApiDefinition').then(m => ({\n    default: m.AsyncApiDefinition,\n  })),\n);\n\n/** @public */\nexport type AsyncApiDefinitionWidgetProps = {\n  definition: string;\n  resolvers?: AsyncApiResolver[];\n};\n\n/** @public */\nexport const AsyncApiDefinitionWidget = (\n  props: AsyncApiDefinitionWidgetProps,\n) => {\n  return (\n    <Suspense fallback={<Progress />}>\n      <LazyAsyncApiDefinition {...props} />\n    </Suspense>\n  );\n};\n"],"names":[],"mappings":";;;;AAsBA,MAAM,sBAAyB,GAAA,IAAA;AAAA,EAAK,MAClC,OAAO,6BAAsB,CAAA,CAAE,KAAK,CAAM,CAAA,MAAA;AAAA,IACxC,SAAS,CAAE,CAAA;AAAA,GACX,CAAA;AACJ,CAAA;AASa,MAAA,wBAAA,GAA2B,CACtC,KACG,KAAA;AACH,EACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,kBAAW,GAAA,CAAA,QAAA,EAAA,EAAS,GAC5B,QAAC,kBAAA,GAAA,CAAA,sBAAA,EAAA,EAAwB,GAAG,KAAA,EAAO,CACrC,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/ComponentsCards/ConsumingComponentsCard.esm.js

@@ -1,8 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_API_CONSUMED_BY } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { EntityTable, useEntity, useRelatedEntities } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
 const ConsumingComponentsCard = (props) => {
   const { variant = "gridItem", columns = EntityTable.componentEntityColumns } = props;
@@ -10,25 +12,29 @@ const ConsumingComponentsCard = (props) => {
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_API_CONSUMED_BY
   });
+  const { t } = useTranslationRef(apiDocsTranslationRef);
   if (loading) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title: "Consumers" }, /* @__PURE__ */ React.createElement(Progress, null));
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title: t("consumingComponentsCard.title"), children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (error || !entities) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title: "Consumers" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title: t("consumingComponentsCard.title"), children: /* @__PURE__ */ jsx(
       WarningPanel,
       {
         severity: "error",
-        title: "Could not load components",
-        message: /* @__PURE__ */ React.createElement(CodeSnippet, { text: `${error}`, language: "text" })
+        title: t("consumingComponentsCard.error.title"),
+        message: /* @__PURE__ */ jsx(CodeSnippet, { text: `${error}`, language: "text" })
       }
-    ));
+    ) });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     EntityTable,
     {
-      title: "Consumers",
+      title: t("consumingComponentsCard.title"),
       variant,
-      emptyContent: /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "No component consumes this API."), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional" }, "Learn how to change this."))),
+      emptyContent: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("consumingComponentsCard.emptyContent.title") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(Link, { to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional", children: t("apisCardHelpLinkTitle") }) })
+      ] }),
       columns,
       entities
     }

package/dist/components/ComponentsCards/ConsumingComponentsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConsumingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ConsumingComponentsCard.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 {\n  ComponentEntity,\n  RELATION_API_CONSUMED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  WarningPanel,\n} from '@backstage/core-components';\n\n/**\n * @public\n */\nexport const ConsumingComponentsCard = (props: {\n  variant?: InfoCardVariants;\n  columns?: TableColumn<ComponentEntity>[];\n}) => {\n  const { variant = 'gridItem', columns = EntityTable.componentEntityColumns } =\n    props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_CONSUMED_BY,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title=\"Consumers\">\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title=\"Consumers\">\n        <WarningPanel\n          severity=\"error\"\n          title=\"Could not load components\"\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title=\"Consumers\"\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            No component consumes this API.\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\">\n              Learn how to change this.\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAwCa,MAAA,uBAAA,GAA0B,CAAC,KAGlC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAU,GAAA,UAAA,EAAY,OAAU,GAAA,WAAA,CAAY,wBAClD,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CACG,QAAS,EAAA,EAAA,OAAA,EAAkB,OAAM,WAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CACZ,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAkB,EAAA,KAAA,EAAM,WAChC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAM,EAAA,2BAAA;AAAA,QACN,OAAA,sCAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,OAAA;AAAA,MACA,YAAA,kBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,WAAW,QAAS,EAAA,EAAA,kBAC/B,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAQ,iCAE5B,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,EAAG,EAAA,iGAAA,EAAA,EAAkG,2BAE3G,CACF,CACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ConsumingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ConsumingComponentsCard.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 {\n  ComponentEntity,\n  RELATION_API_CONSUMED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const ConsumingComponentsCard = (props: {\n  variant?: InfoCardVariants;\n  columns?: TableColumn<ComponentEntity>[];\n}) => {\n  const { variant = 'gridItem', columns = EntityTable.componentEntityColumns } =\n    props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_CONSUMED_BY,\n  });\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={t('consumingComponentsCard.title')}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={t('consumingComponentsCard.title')}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('consumingComponentsCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={t('consumingComponentsCard.title')}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('consumingComponentsCard.emptyContent.title')}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyCa,MAAA,uBAAA,GAA0B,CAAC,KAGlC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAU,GAAA,UAAA,EAAY,OAAU,GAAA,WAAA,CAAY,wBAClD,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AACD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EAAA,IAAI,OAAS,EAAA;AACX,IACE,uBAAA,GAAA,CAAC,YAAS,OAAkB,EAAA,KAAA,EAAO,EAAE,+BAA+B,CAAA,EAClE,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,CACZ,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IAAA,2BACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAAO,EAAA,CAAA,CAAE,+BAA+B,CAClE,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,OAAA,sBAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,+BAA+B,CAAA;AAAA,MACxC,OAAA;AAAA,MACA,8BACG,IAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,QAAA,EAAA,CAAA,CAAE,4CAA4C,CACjD,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,iGACN,EAAA,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CACF,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,MAEF,OAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ComponentsCards/ProvidingComponentsCard.esm.js

@@ -1,8 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_API_PROVIDED_BY } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { EntityTable, useEntity, useRelatedEntities } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
 const ProvidingComponentsCard = (props) => {
   const { variant = "gridItem", columns = EntityTable.componentEntityColumns } = props;
@@ -10,25 +12,29 @@ const ProvidingComponentsCard = (props) => {
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_API_PROVIDED_BY
   });
+  const { t } = useTranslationRef(apiDocsTranslationRef);
   if (loading) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title: "Providers" }, /* @__PURE__ */ React.createElement(Progress, null));
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title: t("providingComponentsCard.title"), children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (error || !entities) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title: "Providers" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title: t("providingComponentsCard.title"), children: /* @__PURE__ */ jsx(
       WarningPanel,
       {
         severity: "error",
-        title: "Could not load components",
-        message: /* @__PURE__ */ React.createElement(CodeSnippet, { text: `${error}`, language: "text" })
+        title: t("providingComponentsCard.error.title"),
+        message: /* @__PURE__ */ jsx(CodeSnippet, { text: `${error}`, language: "text" })
       }
-    ));
+    ) });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     EntityTable,
     {
-      title: "Providers",
+      title: t("providingComponentsCard.title"),
       variant,
-      emptyContent: /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "No component provides this API."), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional" }, "Learn how to change this."))),
+      emptyContent: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("providingComponentsCard.emptyContent.title") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(Link, { to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional", children: t("apisCardHelpLinkTitle") }) })
+      ] }),
       columns,
       entities
     }

package/dist/components/ComponentsCards/ProvidingComponentsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProvidingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ProvidingComponentsCard.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 {\n  ComponentEntity,\n  RELATION_API_PROVIDED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  WarningPanel,\n} from '@backstage/core-components';\n\n/** @public */\nexport const ProvidingComponentsCard = (props: {\n  variant?: InfoCardVariants;\n  columns?: TableColumn<ComponentEntity>[];\n}) => {\n  const { variant = 'gridItem', columns = EntityTable.componentEntityColumns } =\n    props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_PROVIDED_BY,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title=\"Providers\">\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title=\"Providers\">\n        <WarningPanel\n          severity=\"error\"\n          title=\"Could not load components\"\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title=\"Providers\"\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            No component provides this API.\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\">\n              Learn how to change this.\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsCa,MAAA,uBAAA,GAA0B,CAAC,KAGlC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAU,GAAA,UAAA,EAAY,OAAU,GAAA,WAAA,CAAY,wBAClD,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CACG,QAAS,EAAA,EAAA,OAAA,EAAkB,OAAM,WAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CACZ,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAkB,EAAA,KAAA,EAAM,WAChC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAM,EAAA,2BAAA;AAAA,QACN,OAAA,sCAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,OAAA;AAAA,MACA,YAAA,kBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,WAAW,QAAS,EAAA,EAAA,kBAC/B,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAQ,iCAE5B,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,EAAG,EAAA,iGAAA,EAAA,EAAkG,2BAE3G,CACF,CACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ProvidingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ProvidingComponentsCard.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 {\n  ComponentEntity,\n  RELATION_API_PROVIDED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @public */\nexport const ProvidingComponentsCard = (props: {\n  variant?: InfoCardVariants;\n  columns?: TableColumn<ComponentEntity>[];\n}) => {\n  const { variant = 'gridItem', columns = EntityTable.componentEntityColumns } =\n    props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_PROVIDED_BY,\n  });\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={t('providingComponentsCard.title')}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={t('providingComponentsCard.title')}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('providingComponentsCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={t('providingComponentsCard.title')}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('providingComponentsCard.emptyContent.title')}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuCa,MAAA,uBAAA,GAA0B,CAAC,KAGlC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAU,GAAA,UAAA,EAAY,OAAU,GAAA,WAAA,CAAY,wBAClD,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AACD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EAAA,IAAI,OAAS,EAAA;AACX,IACE,uBAAA,GAAA,CAAC,YAAS,OAAkB,EAAA,KAAA,EAAO,EAAE,+BAA+B,CAAA,EAClE,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,CACZ,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IAAA,2BACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAAO,EAAA,CAAA,CAAE,+BAA+B,CAClE,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,OAAA,sBAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,+BAA+B,CAAA;AAAA,MACxC,OAAA;AAAA,MACA,8BACG,IAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,QAAA,EAAA,CAAA,CAAE,4CAA4C,CACjD,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,iGACN,EAAA,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CACF,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,MAEF,OAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/GraphQlDefinitionWidget/GraphQlDefinition.esm.js

@@ -1,8 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
 import { makeStyles } from '@material-ui/core/styles';
 import { EditorContextProvider, SchemaContextProvider, ExplorerContextProvider, DocExplorer } from '@graphiql/react';
 import 'graphiql/graphiql.css';
 import { buildSchema } from 'graphql';
-import React from 'react';
 
 const useStyles = makeStyles({
   root: {
@@ -28,14 +28,14 @@ const useStyles = makeStyles({
 const GraphQlDefinition = ({ definition }) => {
   const classes = useStyles();
   const schema = buildSchema(definition);
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.graphiQlWrapper }, /* @__PURE__ */ React.createElement(EditorContextProvider, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx("div", { className: classes.graphiQlWrapper, children: /* @__PURE__ */ jsx(EditorContextProvider, { children: /* @__PURE__ */ jsx(
     SchemaContextProvider,
     {
       schema,
-      fetcher: () => Promise.resolve(null)
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "graphiql-container" }, /* @__PURE__ */ React.createElement("div", { className: "graphiql-sidebar" }, /* @__PURE__ */ React.createElement("div", { className: "graphiql-sidebar-section" }, /* @__PURE__ */ React.createElement(ExplorerContextProvider, null, /* @__PURE__ */ React.createElement(DocExplorer, null)))))
-  ))));
+      fetcher: () => Promise.resolve(null),
+      children: /* @__PURE__ */ jsx("div", { className: "graphiql-container", children: /* @__PURE__ */ jsx("div", { className: "graphiql-sidebar", children: /* @__PURE__ */ jsx("div", { className: "graphiql-sidebar-section", children: /* @__PURE__ */ jsx(ExplorerContextProvider, { children: /* @__PURE__ */ jsx(DocExplorer, {}) }) }) }) })
+    }
+  ) }) }) });
 };
 
 export { GraphQlDefinition };

package/dist/components/GraphQlDefinitionWidget/GraphQlDefinition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphQlDefinition.esm.js","sources":["../../../src/components/GraphQlDefinitionWidget/GraphQlDefinition.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 { makeStyles } from '@material-ui/core/styles';\nimport {\n  DocExplorer,\n  EditorContextProvider,\n  ExplorerContextProvider,\n  SchemaContextProvider,\n} from '@graphiql/react';\nimport 'graphiql/graphiql.css';\nimport { buildSchema } from 'graphql';\nimport React from 'react';\n\nconst useStyles = makeStyles({\n  root: {\n    height: '100%',\n    display: 'flex',\n    flexFlow: 'column nowrap',\n  },\n  graphiQlWrapper: {\n    flex: 1,\n    '@global': {\n      '.graphiql-container': {\n        boxSizing: 'initial',\n        height: '100%',\n        minHeight: '600px',\n        flex: '1 1 auto',\n      },\n      '.graphiql-sidebar': {\n        width: '100%',\n      },\n    },\n  },\n});\n\ntype Props = {\n  definition: string;\n};\n\nexport const GraphQlDefinition = ({ definition }: Props) => {\n  const classes = useStyles();\n  const schema = buildSchema(definition);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.graphiQlWrapper}>\n        <EditorContextProvider>\n          <SchemaContextProvider\n            schema={schema}\n            fetcher={() => Promise.resolve(null) as any}\n          >\n            <div className=\"graphiql-container\">\n              <div className=\"graphiql-sidebar\">\n                <div className=\"graphiql-sidebar-section\">\n                  <ExplorerContextProvider>\n                    <DocExplorer />\n                  </ExplorerContextProvider>\n                </div>\n              </div>\n            </div>\n          </SchemaContextProvider>\n        </EditorContextProvider>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA2BA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,CAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,qBAAuB,EAAA;AAAA,QACrB,SAAW,EAAA,SAAA;AAAA,QACX,MAAQ,EAAA,MAAA;AAAA,QACR,SAAW,EAAA,OAAA;AAAA,QACX,IAAM,EAAA;AAAA,OACR;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA;AAAA;AACT;AACF;AAEJ,CAAC,CAAA;AAMM,MAAM,iBAAoB,GAAA,CAAC,EAAE,UAAA,EAAwB,KAAA;AAC1D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,MAAA,GAAS,YAAY,UAAU,CAAA;AAErC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,eACtB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,qBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,OAAS,EAAA,MAAM,OAAQ,CAAA,OAAA,CAAQ,IAAI;AAAA,KAAA;AAAA,wCAElC,KAAI,EAAA,EAAA,SAAA,EAAU,wCACZ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAU,kBACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,0BAAA,EAAA,sCACZ,uBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAY,CACf,CACF,CACF,CACF;AAAA,GAEJ,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"GraphQlDefinition.esm.js","sources":["../../../src/components/GraphQlDefinitionWidget/GraphQlDefinition.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 { makeStyles } from '@material-ui/core/styles';\nimport {\n  DocExplorer,\n  EditorContextProvider,\n  ExplorerContextProvider,\n  SchemaContextProvider,\n} from '@graphiql/react';\nimport 'graphiql/graphiql.css';\nimport { buildSchema } from 'graphql';\n\nconst useStyles = makeStyles({\n  root: {\n    height: '100%',\n    display: 'flex',\n    flexFlow: 'column nowrap',\n  },\n  graphiQlWrapper: {\n    flex: 1,\n    '@global': {\n      '.graphiql-container': {\n        boxSizing: 'initial',\n        height: '100%',\n        minHeight: '600px',\n        flex: '1 1 auto',\n      },\n      '.graphiql-sidebar': {\n        width: '100%',\n      },\n    },\n  },\n});\n\ntype Props = {\n  definition: string;\n};\n\nexport const GraphQlDefinition = ({ definition }: Props) => {\n  const classes = useStyles();\n  const schema = buildSchema(definition);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.graphiQlWrapper}>\n        <EditorContextProvider>\n          <SchemaContextProvider\n            schema={schema}\n            fetcher={() => Promise.resolve(null) as any}\n          >\n            <div className=\"graphiql-container\">\n              <div className=\"graphiql-sidebar\">\n                <div className=\"graphiql-sidebar-section\">\n                  <ExplorerContextProvider>\n                    <DocExplorer />\n                  </ExplorerContextProvider>\n                </div>\n              </div>\n            </div>\n          </SchemaContextProvider>\n        </EditorContextProvider>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,CAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,qBAAuB,EAAA;AAAA,QACrB,SAAW,EAAA,SAAA;AAAA,QACX,MAAQ,EAAA,MAAA;AAAA,QACR,SAAW,EAAA,OAAA;AAAA,QACX,IAAM,EAAA;AAAA,OACR;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA;AAAA;AACT;AACF;AAEJ,CAAC,CAAA;AAMM,MAAM,iBAAoB,GAAA,CAAC,EAAE,UAAA,EAAwB,KAAA;AAC1D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,MAAA,GAAS,YAAY,UAAU,CAAA;AAErC,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EACtB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,eACtB,EAAA,QAAA,kBAAA,GAAA,CAAC,qBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,OAAS,EAAA,MAAM,OAAQ,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MAEnC,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACb,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,WAAU,kBACb,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAU,EAAA,0BAAA,EACb,8BAAC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAY,CACf,EAAA,CAAA,EACF,GACF,CACF,EAAA;AAAA;AAAA,GACF,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.esm.js

@@ -1,13 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
 import { Progress } from '@backstage/core-components';
-import React, { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 
-const LazyGraphQlDefinition = React.lazy(
+const LazyGraphQlDefinition = lazy(
   () => import('./GraphQlDefinition.esm.js').then((m) => ({
     default: m.GraphQlDefinition
   }))
 );
 const GraphQlDefinitionWidget = (props) => {
-  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, /* @__PURE__ */ React.createElement(LazyGraphQlDefinition, { ...props }));
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children: /* @__PURE__ */ jsx(LazyGraphQlDefinition, { ...props }) });
 };
 
 export { GraphQlDefinitionWidget };

package/dist/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphQlDefinitionWidget.esm.js","sources":["../../../src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.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 { Progress } from '@backstage/core-components';\nimport React, { Suspense } from 'react';\n\n// The graphql component, graphql and related CSS has a significant size, only\n// load it if the element is actually used.\nconst LazyGraphQlDefinition = React.lazy(() =>\n  import('./GraphQlDefinition').then(m => ({\n    default: m.GraphQlDefinition,\n  })),\n);\n\n/** @public */\nexport type GraphQlDefinitionWidgetProps = {\n  definition: string;\n};\n\n/** @public */\nexport const GraphQlDefinitionWidget = (\n  props: GraphQlDefinitionWidgetProps,\n) => {\n  return (\n    <Suspense fallback={<Progress />}>\n      <LazyGraphQlDefinition {...props} />\n    </Suspense>\n  );\n};\n"],"names":[],"mappings":";;;AAqBA,MAAM,wBAAwB,KAAM,CAAA,IAAA;AAAA,EAAK,MACvC,OAAO,4BAAqB,CAAA,CAAE,KAAK,CAAM,CAAA,MAAA;AAAA,IACvC,SAAS,CAAE,CAAA;AAAA,GACX,CAAA;AACJ,CAAA;AAQa,MAAA,uBAAA,GAA0B,CACrC,KACG,KAAA;AACH,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,QAAA,kBAAW,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAS,qBAC3B,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAuB,GAAG,KAAA,EAAO,CACpC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"GraphQlDefinitionWidget.esm.js","sources":["../../../src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.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 { Progress } from '@backstage/core-components';\nimport { lazy, Suspense } from 'react';\n\n// The graphql component, graphql and related CSS has a significant size, only\n// load it if the element is actually used.\nconst LazyGraphQlDefinition = lazy(() =>\n  import('./GraphQlDefinition').then(m => ({\n    default: m.GraphQlDefinition,\n  })),\n);\n\n/** @public */\nexport type GraphQlDefinitionWidgetProps = {\n  definition: string;\n};\n\n/** @public */\nexport const GraphQlDefinitionWidget = (\n  props: GraphQlDefinitionWidgetProps,\n) => {\n  return (\n    <Suspense fallback={<Progress />}>\n      <LazyGraphQlDefinition {...props} />\n    </Suspense>\n  );\n};\n"],"names":[],"mappings":";;;;AAqBA,MAAM,qBAAwB,GAAA,IAAA;AAAA,EAAK,MACjC,OAAO,4BAAqB,CAAA,CAAE,KAAK,CAAM,CAAA,MAAA;AAAA,IACvC,SAAS,CAAE,CAAA;AAAA,GACX,CAAA;AACJ,CAAA;AAQa,MAAA,uBAAA,GAA0B,CACrC,KACG,KAAA;AACH,EACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,kBAAW,GAAA,CAAA,QAAA,EAAA,EAAS,GAC5B,QAAC,kBAAA,GAAA,CAAA,qBAAA,EAAA,EAAuB,GAAG,KAAA,EAAO,CACpC,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.esm.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { CodeSnippet } from '@backstage/core-components';
 import { useTheme } from '@material-ui/core/styles';
 
 const GrpcApiDefinitionWidget = (props) => {
   const theme = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     CodeSnippet,
     {
       customStyle: { backgroundColor: theme.palette.background.default },

package/dist/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrpcApiDefinitionWidget.esm.js","sources":["../../../src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.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 from 'react';\nimport { CodeSnippet } from '@backstage/core-components';\nimport { useTheme } from '@material-ui/core/styles';\n\n/** @public */\nexport type GrpcApiDefinitionWidgetProps = {\n  definition: string;\n};\n\n/** @public */\nexport const GrpcApiDefinitionWidget = (\n  props: GrpcApiDefinitionWidgetProps,\n) => {\n  const theme = useTheme();\n  return (\n    <CodeSnippet\n      customStyle={{ backgroundColor: theme.palette.background.default }}\n      text={props.definition}\n      language=\"protobuf\"\n      showCopyCodeButton\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AA0Ba,MAAA,uBAAA,GAA0B,CACrC,KACG,KAAA;AACH,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAE,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,WAAW,OAAQ,EAAA;AAAA,MACjE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,QAAS,EAAA,UAAA;AAAA,MACT,kBAAkB,EAAA;AAAA;AAAA,GACpB;AAEJ;;;;"}
+{"version":3,"file":"GrpcApiDefinitionWidget.esm.js","sources":["../../../src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.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 { CodeSnippet } from '@backstage/core-components';\nimport { useTheme } from '@material-ui/core/styles';\n\n/** @public */\nexport type GrpcApiDefinitionWidgetProps = {\n  definition: string;\n};\n\n/** @public */\nexport const GrpcApiDefinitionWidget = (\n  props: GrpcApiDefinitionWidgetProps,\n) => {\n  const theme = useTheme();\n  return (\n    <CodeSnippet\n      customStyle={{ backgroundColor: theme.palette.background.default }}\n      text={props.definition}\n      language=\"protobuf\"\n      showCopyCodeButton\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAyBa,MAAA,uBAAA,GAA0B,CACrC,KACG,KAAA;AACH,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAE,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,WAAW,OAAQ,EAAA;AAAA,MACjE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,QAAS,EAAA,UAAA;AAAA,MACT,kBAAkB,EAAA;AAAA;AAAA,GACpB;AAEJ;;;;"}

package/dist/components/OpenApiDefinitionWidget/OpenApiDefinition.esm.js

@@ -1,5 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
 
@@ -168,7 +169,7 @@ const OpenApiDefinition = ({
     const timer = setTimeout(() => setDef(definition), 0);
     return () => clearTimeout(timer);
   }, [definition, setDef]);
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx(
     SwaggerUI,
     {
       spec: def,
@@ -177,7 +178,7 @@ const OpenApiDefinition = ({
       oauth2RedirectUrl: `${window.location.protocol}//${window.location.host}/oauth2-redirect.html`,
       ...swaggerUiProps
     }
-  ));
+  ) });
 };
 
 export { OpenApiDefinition };