@backstage/core-components 0.17.1-next.0 → 0.17.1-next.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @backstage/core-components
 
+## 0.17.1-next.1
+
+### Patch Changes
+
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+
+- Updated dependencies
+  - @backstage/core-plugin-api@1.10.6-next.0
+  - @backstage/theme@0.6.5-next.0
+  - @backstage/config@1.3.2
+  - @backstage/errors@1.2.7
+  - @backstage/version-bridge@1.0.11
+
 ## 0.17.1-next.0
 
 ### Patch Changes

package/dist/components/AlertDisplay/AlertDisplay.esm.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import IconButton from '@material-ui/core/IconButton';
@@ -5,7 +6,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
 import Alert from '@material-ui/lab/Alert';
-import React__default, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { coreComponentsTranslationRef } from '../../translation.esm.js';
 
 function AlertDisplay(props) {
@@ -42,25 +43,28 @@ function AlertDisplay(props) {
   const handleClose = () => {
     setMessages((msgs) => msgs.filter((msg) => msg !== firstMessage));
   };
-  return /* @__PURE__ */ React__default.createElement(Snackbar, { open: true, anchorOrigin }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Snackbar, { open: true, anchorOrigin, children: /* @__PURE__ */ jsx(
     Alert,
     {
-      action: /* @__PURE__ */ React__default.createElement(
+      action: /* @__PURE__ */ jsx(
         IconButton,
         {
           color: "inherit",
           size: "small",
           onClick: handleClose,
-          "data-testid": "error-button-close"
-        },
-        /* @__PURE__ */ React__default.createElement(CloseIcon, null)
+          "data-testid": "error-button-close",
+          children: /* @__PURE__ */ jsx(CloseIcon, {})
+        }
       ),
-      severity: firstMessage.severity
-    },
-    /* @__PURE__ */ React__default.createElement(Typography, { component: "span" }, String(firstMessage.message), messages.length > 1 && /* @__PURE__ */ React__default.createElement("em", null, t("alertDisplay.message", {
-      count: messages.length - 1
-    })))
-  ));
+      severity: firstMessage.severity,
+      children: /* @__PURE__ */ jsxs(Typography, { component: "span", children: [
+        String(firstMessage.message),
+        messages.length > 1 && /* @__PURE__ */ jsx("em", { children: t("alertDisplay.message", {
+          count: messages.length - 1
+        }) })
+      ] })
+    }
+  ) });
 }
 
 export { AlertDisplay };

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDisplay.esm.js","sources":["../../../src/components/AlertDisplay/AlertDisplay.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 */\nimport { alertApiRef, AlertMessage, useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport IconButton from '@material-ui/core/IconButton';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport Typography from '@material-ui/core/Typography';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Alert from '@material-ui/lab/Alert';\nimport React, { useEffect, useState } from 'react';\nimport { coreComponentsTranslationRef } from '../../translation';\n\n/**\n * Properties for {@link AlertDisplay}\n *\n * @public\n */\nexport type AlertDisplayProps = {\n  anchorOrigin?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'left' | 'center' | 'right';\n  };\n  transientTimeoutMs?: number;\n};\n\n/**\n * Displays alerts from {@link @backstage/core-plugin-api#AlertApi}\n *\n * @public\n * @remarks\n *\n * Shown as SnackBar at the center top of the page by default. Configurable with props.\n *\n * @param anchorOrigin - The `vertical` property will set the vertical orientation of where the AlertDisplay will be located\n * and the `horizontal` property will set the horizontal orientation of where the AlertDisplay will be located\n * @param transientTimeoutMs - Number of milliseconds a transient alert will stay open for. Default value is 5000\n *\n * @example\n * Here's some examples:\n * ```\n * // This example shows the default usage, the SnackBar will show up at the top in the center and any transient messages will stay open for 5000ms\n * <AlertDisplay />\n *\n * // With this example the SnackBar will show up in the bottom right hand corner and any transient messages will stay open for 2500ms\n * <AlertDisplay transientTimeoutMs={2500} anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}/>\n *\n * // If you want to just set the time a transientTimeoutMs, you can do that like this:\n * <AlertDisplay transientTimeoutMs={10000} />\n * ```\n */\nexport function AlertDisplay(props: AlertDisplayProps) {\n  const [messages, setMessages] = useState<Array<AlertMessage>>([]);\n  const alertApi = useApi(alertApiRef);\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n  const {\n    anchorOrigin = { vertical: 'top', horizontal: 'center' },\n    transientTimeoutMs,\n  } = props;\n  const timeoutMs = transientTimeoutMs ?? 5000;\n\n  useEffect(() => {\n    const subscription = alertApi\n      .alert$()\n      .subscribe(message => setMessages(msgs => msgs.concat(message)));\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [alertApi]);\n\n  const [firstMessage] = messages;\n\n  useEffect(() => {\n    if (firstMessage && firstMessage.display === 'transient') {\n      const timeout = setTimeout(() => {\n        setMessages(msgs => {\n          const newMsgs = msgs.filter(msg => msg !== firstMessage);\n          return newMsgs.length === msgs.length ? msgs : newMsgs;\n        });\n      }, timeoutMs);\n      return () => clearTimeout(timeout);\n    }\n    return undefined;\n  }, [firstMessage, timeoutMs]);\n\n  if (messages.length === 0) {\n    return null;\n  }\n\n  const handleClose = () => {\n    setMessages(msgs => msgs.filter(msg => msg !== firstMessage));\n  };\n\n  return (\n    <Snackbar open anchorOrigin={anchorOrigin}>\n      <Alert\n        action={\n          <IconButton\n            color=\"inherit\"\n            size=\"small\"\n            onClick={handleClose}\n            data-testid=\"error-button-close\"\n          >\n            <CloseIcon />\n          </IconButton>\n        }\n        severity={firstMessage.severity}\n      >\n        <Typography component=\"span\">\n          {String(firstMessage.message)}\n          {messages.length > 1 && (\n            <em>\n              {t('alertDisplay.message', {\n                count: messages.length - 1,\n              })}\n            </em>\n          )}\n        </Typography>\n      </Alert>\n    </Snackbar>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;;AA+DO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAA8B,EAAE,CAAA;AAChE,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA;AAE5D,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,EAAE,QAAU,EAAA,KAAA,EAAO,YAAY,QAAS,EAAA;AAAA,IACvD;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,YAAY,kBAAsB,IAAA,GAAA;AAExC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAe,GAAA,QAAA,CAClB,MAAO,EAAA,CACP,SAAU,CAAA,CAAA,OAAA,KAAW,WAAY,CAAA,CAAA,IAAA,KAAQ,IAAK,CAAA,MAAA,CAAO,OAAO,CAAC,CAAC,CAAA;AAEjE,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,WAAY,EAAA;AAAA,KAC3B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,CAAC,YAAY,CAAI,GAAA,QAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,KAAY,WAAa,EAAA;AACxD,MAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAC/B,QAAA,WAAA,CAAY,CAAQ,IAAA,KAAA;AAClB,UAAA,MAAM,OAAU,GAAA,IAAA,CAAK,MAAO,CAAA,CAAA,GAAA,KAAO,QAAQ,YAAY,CAAA;AACvD,UAAA,OAAO,OAAQ,CAAA,MAAA,KAAW,IAAK,CAAA,MAAA,GAAS,IAAO,GAAA,OAAA;AAAA,SAChD,CAAA;AAAA,SACA,SAAS,CAAA;AACZ,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA;AAAA;AAEnC,IAAO,OAAA,KAAA,CAAA;AAAA,GACN,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA;AAE5B,EAAI,IAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,UAAQ,IAAK,CAAA,MAAA,CAAO,CAAO,GAAA,KAAA,GAAA,KAAQ,YAAY,CAAC,CAAA;AAAA,GAC9D;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,IAAI,EAAA,IAAA,EAAC,YACb,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,MACE,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,SAAA;AAAA,UACN,IAAK,EAAA,OAAA;AAAA,UACL,OAAS,EAAA,WAAA;AAAA,UACT,aAAY,EAAA;AAAA,SAAA;AAAA,qDAEX,SAAU,EAAA,IAAA;AAAA,OACb;AAAA,MAEF,UAAU,YAAa,CAAA;AAAA,KAAA;AAAA,oBAEtBA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAA,EACnB,OAAO,YAAa,CAAA,OAAO,CAC3B,EAAA,QAAA,CAAS,MAAS,GAAA,CAAA,oBAChBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACE,EAAE,sBAAwB,EAAA;AAAA,MACzB,KAAA,EAAO,SAAS,MAAS,GAAA;AAAA,KAC1B,CACH,CAEJ;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AlertDisplay.esm.js","sources":["../../../src/components/AlertDisplay/AlertDisplay.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 */\nimport { alertApiRef, AlertMessage, useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport IconButton from '@material-ui/core/IconButton';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport Typography from '@material-ui/core/Typography';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Alert from '@material-ui/lab/Alert';\nimport { useEffect, useState } from 'react';\nimport { coreComponentsTranslationRef } from '../../translation';\n\n/**\n * Properties for {@link AlertDisplay}\n *\n * @public\n */\nexport type AlertDisplayProps = {\n  anchorOrigin?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'left' | 'center' | 'right';\n  };\n  transientTimeoutMs?: number;\n};\n\n/**\n * Displays alerts from {@link @backstage/core-plugin-api#AlertApi}\n *\n * @public\n * @remarks\n *\n * Shown as SnackBar at the center top of the page by default. Configurable with props.\n *\n * @param anchorOrigin - The `vertical` property will set the vertical orientation of where the AlertDisplay will be located\n * and the `horizontal` property will set the horizontal orientation of where the AlertDisplay will be located\n * @param transientTimeoutMs - Number of milliseconds a transient alert will stay open for. Default value is 5000\n *\n * @example\n * Here's some examples:\n * ```\n * // This example shows the default usage, the SnackBar will show up at the top in the center and any transient messages will stay open for 5000ms\n * <AlertDisplay />\n *\n * // With this example the SnackBar will show up in the bottom right hand corner and any transient messages will stay open for 2500ms\n * <AlertDisplay transientTimeoutMs={2500} anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}/>\n *\n * // If you want to just set the time a transientTimeoutMs, you can do that like this:\n * <AlertDisplay transientTimeoutMs={10000} />\n * ```\n */\nexport function AlertDisplay(props: AlertDisplayProps) {\n  const [messages, setMessages] = useState<Array<AlertMessage>>([]);\n  const alertApi = useApi(alertApiRef);\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n  const {\n    anchorOrigin = { vertical: 'top', horizontal: 'center' },\n    transientTimeoutMs,\n  } = props;\n  const timeoutMs = transientTimeoutMs ?? 5000;\n\n  useEffect(() => {\n    const subscription = alertApi\n      .alert$()\n      .subscribe(message => setMessages(msgs => msgs.concat(message)));\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [alertApi]);\n\n  const [firstMessage] = messages;\n\n  useEffect(() => {\n    if (firstMessage && firstMessage.display === 'transient') {\n      const timeout = setTimeout(() => {\n        setMessages(msgs => {\n          const newMsgs = msgs.filter(msg => msg !== firstMessage);\n          return newMsgs.length === msgs.length ? msgs : newMsgs;\n        });\n      }, timeoutMs);\n      return () => clearTimeout(timeout);\n    }\n    return undefined;\n  }, [firstMessage, timeoutMs]);\n\n  if (messages.length === 0) {\n    return null;\n  }\n\n  const handleClose = () => {\n    setMessages(msgs => msgs.filter(msg => msg !== firstMessage));\n  };\n\n  return (\n    <Snackbar open anchorOrigin={anchorOrigin}>\n      <Alert\n        action={\n          <IconButton\n            color=\"inherit\"\n            size=\"small\"\n            onClick={handleClose}\n            data-testid=\"error-button-close\"\n          >\n            <CloseIcon />\n          </IconButton>\n        }\n        severity={firstMessage.severity}\n      >\n        <Typography component=\"span\">\n          {String(firstMessage.message)}\n          {messages.length > 1 && (\n            <em>\n              {t('alertDisplay.message', {\n                count: messages.length - 1,\n              })}\n            </em>\n          )}\n        </Typography>\n      </Alert>\n    </Snackbar>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA+DO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAA8B,EAAE,CAAA;AAChE,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA;AAE5D,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,EAAE,QAAU,EAAA,KAAA,EAAO,YAAY,QAAS,EAAA;AAAA,IACvD;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,YAAY,kBAAsB,IAAA,GAAA;AAExC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAe,GAAA,QAAA,CAClB,MAAO,EAAA,CACP,SAAU,CAAA,CAAA,OAAA,KAAW,WAAY,CAAA,CAAA,IAAA,KAAQ,IAAK,CAAA,MAAA,CAAO,OAAO,CAAC,CAAC,CAAA;AAEjE,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,WAAY,EAAA;AAAA,KAC3B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,CAAC,YAAY,CAAI,GAAA,QAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,KAAY,WAAa,EAAA;AACxD,MAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAC/B,QAAA,WAAA,CAAY,CAAQ,IAAA,KAAA;AAClB,UAAA,MAAM,OAAU,GAAA,IAAA,CAAK,MAAO,CAAA,CAAA,GAAA,KAAO,QAAQ,YAAY,CAAA;AACvD,UAAA,OAAO,OAAQ,CAAA,MAAA,KAAW,IAAK,CAAA,MAAA,GAAS,IAAO,GAAA,OAAA;AAAA,SAChD,CAAA;AAAA,SACA,SAAS,CAAA;AACZ,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA;AAAA;AAEnC,IAAO,OAAA,KAAA,CAAA;AAAA,GACN,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA;AAE5B,EAAI,IAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,UAAQ,IAAK,CAAA,MAAA,CAAO,CAAO,GAAA,KAAA,GAAA,KAAQ,YAAY,CAAC,CAAA;AAAA,GAC9D;AAEA,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA,EAAS,IAAI,EAAA,IAAA,EAAC,YACb,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,MACE,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,SAAA;AAAA,UACN,IAAK,EAAA,OAAA;AAAA,UACL,OAAS,EAAA,WAAA;AAAA,UACT,aAAY,EAAA,oBAAA;AAAA,UAEZ,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA,OACb;AAAA,MAEF,UAAU,YAAa,CAAA,QAAA;AAAA,MAEvB,QAAA,kBAAA,IAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MACnB,EAAA,QAAA,EAAA;AAAA,QAAA,MAAA,CAAO,aAAa,OAAO,CAAA;AAAA,QAC3B,SAAS,MAAS,GAAA,CAAA,oBAChB,GAAA,CAAA,IAAA,EAAA,EACE,YAAE,sBAAwB,EAAA;AAAA,UACzB,KAAA,EAAO,SAAS,MAAS,GAAA;AAAA,SAC1B,CACH,EAAA;AAAA,OAEJ,EAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/AutoLogout/AutoLogout.esm.js

@@ -1,5 +1,6 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useApi, identityApiRef, configApiRef } from '@backstage/core-plugin-api';
-import React__default, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useIdleTimer, workerTimers } from 'react-idle-timer';
 import { LAST_SEEN_ONLINE_STORAGE_KEY, useLogoutDisconnectedUserEffect } from './disconnectedUsers.esm.js';
 import { StillTherePrompt } from './StillTherePrompt.esm.js';
@@ -49,7 +50,7 @@ const ConditionalAutoLogout = ({
     promptBeforeIdle: promptBeforeIdle ? promptBeforeIdleMillis : void 0,
     syncTimers: 1e3
   });
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, promptBeforeIdle && /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Fragment, { children: promptBeforeIdle && /* @__PURE__ */ jsx(
     StillTherePrompt,
     {
       idleTimer: timer,
@@ -59,7 +60,7 @@ const ConditionalAutoLogout = ({
       setRemainingTime: setRemainingTimeCountdown,
       promptTimeoutMillis: promptBeforeIdleMillis
     }
-  ));
+  ) });
 };
 const defaultConfig = {
   enabled: true,
@@ -146,7 +147,7 @@ const AutoLogout = (props) => {
   if (!enabled || !isLogged) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     ConditionalAutoLogout,
     {
       idleTimeoutMinutes,

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

@@ -1 +1 @@
-{"version":3,"file":"AutoLogout.esm.js","sources":["../../../src/components/AutoLogout/AutoLogout.tsx"],"sourcesContent":["/*\n * Copyright 2023 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  ConfigApi,\n  configApiRef,\n  IdentityApi,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport {\n  EventsType,\n  IIdleTimer,\n  workerTimers,\n  useIdleTimer,\n} from 'react-idle-timer';\n\nimport {\n  LAST_SEEN_ONLINE_STORAGE_KEY,\n  useLogoutDisconnectedUserEffect,\n} from './disconnectedUsers';\nimport { StillTherePrompt } from './StillTherePrompt';\nimport { DefaultTimestampStore, TimestampStore } from './timestampStore';\n\ntype AutoLogoutTrackableEvent = EventsType;\n\n/** @public */\nexport type AutoLogoutProps = {\n  /**\n   * Enable/disable the AutoLogoutMechanism.\n   * defauls to true.\n   */\n  enabled?: boolean;\n  /**\n   * The amount of time (in minutes) of inactivity\n   * after which the user is automatically logged out.\n   * defaults to 60 minutes.\n   */\n  idleTimeoutMinutes?: number;\n  /**\n   * The number of seconds before the idleTimeout expires,\n   * at which the user will be alerted by a Dialog that\n   * they are about to be logged out.\n   * defaults to 10 seconds\n   */\n  promptBeforeIdleSeconds?: number;\n  /**\n   * Enable/disable the usage of Node's worker thread timers instead of main thread timers.\n   * This is helpful if you notice that the your browser is killing inactive tab's timers, like the one used by AutoLogout.\n   * If you experience some browser incompatibility, you may try to set this to false.\n   * defaults to true.\n   */\n  useWorkerTimers?: boolean;\n  /**\n   * Enable/disable the autologout for disconnected users.\n   * disconnected users are the ones that are logged in but have no Backstage tab open in their browsers.\n   * If enabled, disconnected users will be automatically logged out after `idleTimeoutMinutes`\n   * defaults to true\n   */\n  logoutIfDisconnected?: boolean;\n};\n\ntype AutoLogoutInternalProps = Omit<Required<AutoLogoutProps>, 'enabled'> & {\n  events: AutoLogoutTrackableEvent[];\n  promptOpen: boolean;\n  setPromptOpen: (value: boolean) => void;\n  remainingTimeCountdown: number;\n  setRemainingTimeCountdown: (amount: number) => void;\n  identityApi: IdentityApi;\n  lastSeenOnlineStore: TimestampStore;\n};\n\nconst ConditionalAutoLogout = ({\n  idleTimeoutMinutes,\n  events,\n  useWorkerTimers,\n  logoutIfDisconnected,\n  promptBeforeIdleSeconds,\n  promptOpen,\n  setPromptOpen,\n  remainingTimeCountdown,\n  setRemainingTimeCountdown,\n  identityApi,\n  lastSeenOnlineStore,\n}: AutoLogoutInternalProps): JSX.Element => {\n  const promptBeforeIdleMillis = promptBeforeIdleSeconds * 1000;\n  const promptBeforeIdle = promptBeforeIdleMillis > 0 ? true : false;\n\n  const onPrompt = async () => {\n    // onPrompt will be called `promptBeforeIdle` milliseconds before `timeout`.\n    // All events are disabled while the prompt is active.\n    // If the user wishes to stay active, call the `activate()` method.\n    // You can get the remaining prompt time with the `getRemainingTime()` method,\n    setPromptOpen(true);\n    setRemainingTimeCountdown(promptBeforeIdleMillis);\n  };\n\n  const onIdle = () => {\n    // onIdle will be called after the timeout is reached.\n    // Events will be rebound as long as `stopOnMount` is not set.\n    setPromptOpen(false);\n    setRemainingTimeCountdown(0);\n    identityApi.signOut();\n  };\n\n  const onActive = () => {\n    // onActive will only be called if `activate()` is called while `isPrompted()`\n    // is true. Here you will also want to close your modal and perform\n    // any active actions.\n    setPromptOpen(false);\n    setRemainingTimeCountdown(0);\n  };\n\n  const onAction = (\n    _event?: Event | undefined,\n    _idleTimer?: IIdleTimer | null,\n  ) => {\n    // onAction will be called if any user event is detected. The list of events that triggers a user event detection is the list of configured events\n    // If any user event is detected we update the Last seen online in storage\n    lastSeenOnlineStore.save(new Date());\n  };\n\n  const timer = useIdleTimer({\n    timeout: idleTimeoutMinutes * 60 * 1000,\n    events: events,\n    crossTab: true,\n    name: 'autologout-timer',\n    timers: useWorkerTimers ? workerTimers : undefined,\n    onIdle: onIdle,\n    onActive: promptBeforeIdle ? onActive : undefined,\n    onAction: logoutIfDisconnected ? onAction : undefined,\n    onPrompt: promptBeforeIdle ? onPrompt : undefined,\n    promptBeforeIdle: promptBeforeIdle ? promptBeforeIdleMillis : undefined,\n    syncTimers: 1000,\n  });\n\n  return (\n    <>\n      {promptBeforeIdle && (\n        <StillTherePrompt\n          idleTimer={timer}\n          open={promptOpen}\n          setOpen={setPromptOpen}\n          remainingTime={remainingTimeCountdown}\n          setRemainingTime={setRemainingTimeCountdown}\n          promptTimeoutMillis={promptBeforeIdleMillis}\n        />\n      )}\n    </>\n  );\n};\n\nconst defaultConfig: Required<AutoLogoutProps> = {\n  enabled: true,\n  idleTimeoutMinutes: 0.5,\n  promptBeforeIdleSeconds: 10,\n  useWorkerTimers: true,\n  logoutIfDisconnected: true,\n};\n\n/**\n * A list of DOM events that the activity tracker will use to determine if the user is active or not.\n */\nconst defaultTrackedEvents: AutoLogoutTrackableEvent[] = [\n  'mousemove',\n  'keydown',\n  'wheel',\n  'DOMMouseScroll',\n  'mousewheel',\n  'mousedown',\n  'touchstart',\n  'touchmove',\n  'MSPointerDown',\n  'MSPointerMove',\n  'visibilitychange',\n];\n\n/**\n * Parses configuration for the AutoLogout. Properties configured in `app-config` take precedence over the props passed to the React component.\n * If neither props nor config properties are found, a default value will be set accordingly.\n */\nconst parseConfig = (\n  configApi: ConfigApi,\n  props: AutoLogoutProps,\n): Required<AutoLogoutProps> => {\n  return {\n    enabled:\n      configApi.getOptionalBoolean('auth.autologout.enabled') ??\n      props.enabled ??\n      defaultConfig.enabled,\n    idleTimeoutMinutes:\n      configApi.getOptionalNumber('auth.autologout.idleTimeoutMinutes') ??\n      props.idleTimeoutMinutes ??\n      defaultConfig.idleTimeoutMinutes,\n    promptBeforeIdleSeconds:\n      configApi.getOptionalNumber('auth.autologout.promptBeforeIdleSeconds') ??\n      props.promptBeforeIdleSeconds ??\n      defaultConfig.promptBeforeIdleSeconds,\n    useWorkerTimers:\n      configApi.getOptionalBoolean('auth.autologout.useWorkerTimers') ??\n      props.useWorkerTimers ??\n      defaultConfig.useWorkerTimers,\n    logoutIfDisconnected:\n      configApi.getOptionalBoolean('auth.autologout.logoutIfDisconnected') ??\n      props.logoutIfDisconnected ??\n      defaultConfig.logoutIfDisconnected,\n  };\n};\n\n/**\n * The Autologout feature enables platform engineers to add a mechanism to log out users after a configurable amount of time of inactivity.\n * When enabled, the mechanism will track user actions (mouse movement, mouse click, key pressing, taps, etc.) in order to determine if they are active or not.\n * After a certain amount of inactivity/idle time, the user session is invalidated and they are required to sign in again.\n *\n * @public\n */\nexport const AutoLogout = (props: AutoLogoutProps): JSX.Element | null => {\n  const identityApi = useApi(identityApiRef);\n  const configApi = useApi(configApiRef);\n  const [isLogged, setIsLogged] = useState(false);\n  useEffect(() => {\n    // if the user is not logged in, the autologout feature won't affect the app even if enabled\n    async function isLoggedIn(identity: IdentityApi) {\n      if ((await identity.getCredentials()).token) {\n        setIsLogged(true);\n      } else {\n        setIsLogged(false);\n      }\n    }\n    isLoggedIn(identityApi);\n  }, [identityApi]);\n\n  const {\n    enabled,\n    idleTimeoutMinutes,\n    promptBeforeIdleSeconds,\n    logoutIfDisconnected,\n    useWorkerTimers,\n  }: AutoLogoutProps = useMemo(() => {\n    return parseConfig(configApi, props);\n  }, [configApi, props]);\n\n  useEffect(() => {\n    if (idleTimeoutMinutes < 0.5) {\n      throw new Error(\n        '❌ idleTimeoutMinutes property should be >= 0.5 minutes (30 seconds).',\n      );\n    }\n\n    if (promptBeforeIdleSeconds < 0) {\n      throw new Error(\n        '❌ promptBeforeIdleSeconds property should be >= 0 seconds. Set to 0 to disable the prompt.',\n      );\n    }\n\n    if (idleTimeoutMinutes * 60 <= promptBeforeIdleSeconds) {\n      throw new Error(\n        `❌ promptBeforeIdleSeconds should be smaller than idleTimeoutMinutes`,\n      );\n    }\n  }, [idleTimeoutMinutes, promptBeforeIdleSeconds]);\n\n  const lastSeenOnlineStore: TimestampStore = useMemo(\n    () => new DefaultTimestampStore(LAST_SEEN_ONLINE_STORAGE_KEY),\n    [],\n  );\n  const [promptOpen, setPromptOpen] = useState<boolean>(false);\n\n  const [remainingTimeCountdown, setRemainingTimeCountdown] =\n    useState<number>(0);\n\n  useLogoutDisconnectedUserEffect({\n    enableEffect: logoutIfDisconnected,\n    autologoutIsEnabled: enabled && isLogged,\n    idleTimeoutSeconds: idleTimeoutMinutes * 60,\n    lastSeenOnlineStore,\n    identityApi,\n  });\n\n  if (!enabled || !isLogged) {\n    return null;\n  }\n\n  return (\n    <ConditionalAutoLogout\n      idleTimeoutMinutes={idleTimeoutMinutes}\n      promptBeforeIdleSeconds={promptBeforeIdleSeconds}\n      useWorkerTimers={useWorkerTimers}\n      events={defaultTrackedEvents}\n      logoutIfDisconnected={logoutIfDisconnected}\n      promptOpen={promptOpen}\n      setPromptOpen={setPromptOpen}\n      remainingTimeCountdown={remainingTimeCountdown}\n      setRemainingTimeCountdown={setRemainingTimeCountdown}\n      identityApi={identityApi}\n      lastSeenOnlineStore={lastSeenOnlineStore}\n    />\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AutoLogout.esm.js","sources":["../../../src/components/AutoLogout/AutoLogout.tsx"],"sourcesContent":["/*\n * Copyright 2023 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  ConfigApi,\n  configApiRef,\n  IdentityApi,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport {\n  EventsType,\n  IIdleTimer,\n  workerTimers,\n  useIdleTimer,\n} from 'react-idle-timer';\n\nimport {\n  LAST_SEEN_ONLINE_STORAGE_KEY,\n  useLogoutDisconnectedUserEffect,\n} from './disconnectedUsers';\nimport { StillTherePrompt } from './StillTherePrompt';\nimport { DefaultTimestampStore, TimestampStore } from './timestampStore';\n\ntype AutoLogoutTrackableEvent = EventsType;\n\n/** @public */\nexport type AutoLogoutProps = {\n  /**\n   * Enable/disable the AutoLogoutMechanism.\n   * defauls to true.\n   */\n  enabled?: boolean;\n  /**\n   * The amount of time (in minutes) of inactivity\n   * after which the user is automatically logged out.\n   * defaults to 60 minutes.\n   */\n  idleTimeoutMinutes?: number;\n  /**\n   * The number of seconds before the idleTimeout expires,\n   * at which the user will be alerted by a Dialog that\n   * they are about to be logged out.\n   * defaults to 10 seconds\n   */\n  promptBeforeIdleSeconds?: number;\n  /**\n   * Enable/disable the usage of Node's worker thread timers instead of main thread timers.\n   * This is helpful if you notice that the your browser is killing inactive tab's timers, like the one used by AutoLogout.\n   * If you experience some browser incompatibility, you may try to set this to false.\n   * defaults to true.\n   */\n  useWorkerTimers?: boolean;\n  /**\n   * Enable/disable the autologout for disconnected users.\n   * disconnected users are the ones that are logged in but have no Backstage tab open in their browsers.\n   * If enabled, disconnected users will be automatically logged out after `idleTimeoutMinutes`\n   * defaults to true\n   */\n  logoutIfDisconnected?: boolean;\n};\n\ntype AutoLogoutInternalProps = Omit<Required<AutoLogoutProps>, 'enabled'> & {\n  events: AutoLogoutTrackableEvent[];\n  promptOpen: boolean;\n  setPromptOpen: (value: boolean) => void;\n  remainingTimeCountdown: number;\n  setRemainingTimeCountdown: (amount: number) => void;\n  identityApi: IdentityApi;\n  lastSeenOnlineStore: TimestampStore;\n};\n\nconst ConditionalAutoLogout = ({\n  idleTimeoutMinutes,\n  events,\n  useWorkerTimers,\n  logoutIfDisconnected,\n  promptBeforeIdleSeconds,\n  promptOpen,\n  setPromptOpen,\n  remainingTimeCountdown,\n  setRemainingTimeCountdown,\n  identityApi,\n  lastSeenOnlineStore,\n}: AutoLogoutInternalProps): JSX.Element => {\n  const promptBeforeIdleMillis = promptBeforeIdleSeconds * 1000;\n  const promptBeforeIdle = promptBeforeIdleMillis > 0 ? true : false;\n\n  const onPrompt = async () => {\n    // onPrompt will be called `promptBeforeIdle` milliseconds before `timeout`.\n    // All events are disabled while the prompt is active.\n    // If the user wishes to stay active, call the `activate()` method.\n    // You can get the remaining prompt time with the `getRemainingTime()` method,\n    setPromptOpen(true);\n    setRemainingTimeCountdown(promptBeforeIdleMillis);\n  };\n\n  const onIdle = () => {\n    // onIdle will be called after the timeout is reached.\n    // Events will be rebound as long as `stopOnMount` is not set.\n    setPromptOpen(false);\n    setRemainingTimeCountdown(0);\n    identityApi.signOut();\n  };\n\n  const onActive = () => {\n    // onActive will only be called if `activate()` is called while `isPrompted()`\n    // is true. Here you will also want to close your modal and perform\n    // any active actions.\n    setPromptOpen(false);\n    setRemainingTimeCountdown(0);\n  };\n\n  const onAction = (\n    _event?: Event | undefined,\n    _idleTimer?: IIdleTimer | null,\n  ) => {\n    // onAction will be called if any user event is detected. The list of events that triggers a user event detection is the list of configured events\n    // If any user event is detected we update the Last seen online in storage\n    lastSeenOnlineStore.save(new Date());\n  };\n\n  const timer = useIdleTimer({\n    timeout: idleTimeoutMinutes * 60 * 1000,\n    events: events,\n    crossTab: true,\n    name: 'autologout-timer',\n    timers: useWorkerTimers ? workerTimers : undefined,\n    onIdle: onIdle,\n    onActive: promptBeforeIdle ? onActive : undefined,\n    onAction: logoutIfDisconnected ? onAction : undefined,\n    onPrompt: promptBeforeIdle ? onPrompt : undefined,\n    promptBeforeIdle: promptBeforeIdle ? promptBeforeIdleMillis : undefined,\n    syncTimers: 1000,\n  });\n\n  return (\n    <>\n      {promptBeforeIdle && (\n        <StillTherePrompt\n          idleTimer={timer}\n          open={promptOpen}\n          setOpen={setPromptOpen}\n          remainingTime={remainingTimeCountdown}\n          setRemainingTime={setRemainingTimeCountdown}\n          promptTimeoutMillis={promptBeforeIdleMillis}\n        />\n      )}\n    </>\n  );\n};\n\nconst defaultConfig: Required<AutoLogoutProps> = {\n  enabled: true,\n  idleTimeoutMinutes: 0.5,\n  promptBeforeIdleSeconds: 10,\n  useWorkerTimers: true,\n  logoutIfDisconnected: true,\n};\n\n/**\n * A list of DOM events that the activity tracker will use to determine if the user is active or not.\n */\nconst defaultTrackedEvents: AutoLogoutTrackableEvent[] = [\n  'mousemove',\n  'keydown',\n  'wheel',\n  'DOMMouseScroll',\n  'mousewheel',\n  'mousedown',\n  'touchstart',\n  'touchmove',\n  'MSPointerDown',\n  'MSPointerMove',\n  'visibilitychange',\n];\n\n/**\n * Parses configuration for the AutoLogout. Properties configured in `app-config` take precedence over the props passed to the React component.\n * If neither props nor config properties are found, a default value will be set accordingly.\n */\nconst parseConfig = (\n  configApi: ConfigApi,\n  props: AutoLogoutProps,\n): Required<AutoLogoutProps> => {\n  return {\n    enabled:\n      configApi.getOptionalBoolean('auth.autologout.enabled') ??\n      props.enabled ??\n      defaultConfig.enabled,\n    idleTimeoutMinutes:\n      configApi.getOptionalNumber('auth.autologout.idleTimeoutMinutes') ??\n      props.idleTimeoutMinutes ??\n      defaultConfig.idleTimeoutMinutes,\n    promptBeforeIdleSeconds:\n      configApi.getOptionalNumber('auth.autologout.promptBeforeIdleSeconds') ??\n      props.promptBeforeIdleSeconds ??\n      defaultConfig.promptBeforeIdleSeconds,\n    useWorkerTimers:\n      configApi.getOptionalBoolean('auth.autologout.useWorkerTimers') ??\n      props.useWorkerTimers ??\n      defaultConfig.useWorkerTimers,\n    logoutIfDisconnected:\n      configApi.getOptionalBoolean('auth.autologout.logoutIfDisconnected') ??\n      props.logoutIfDisconnected ??\n      defaultConfig.logoutIfDisconnected,\n  };\n};\n\n/**\n * The Autologout feature enables platform engineers to add a mechanism to log out users after a configurable amount of time of inactivity.\n * When enabled, the mechanism will track user actions (mouse movement, mouse click, key pressing, taps, etc.) in order to determine if they are active or not.\n * After a certain amount of inactivity/idle time, the user session is invalidated and they are required to sign in again.\n *\n * @public\n */\nexport const AutoLogout = (props: AutoLogoutProps): JSX.Element | null => {\n  const identityApi = useApi(identityApiRef);\n  const configApi = useApi(configApiRef);\n  const [isLogged, setIsLogged] = useState(false);\n  useEffect(() => {\n    // if the user is not logged in, the autologout feature won't affect the app even if enabled\n    async function isLoggedIn(identity: IdentityApi) {\n      if ((await identity.getCredentials()).token) {\n        setIsLogged(true);\n      } else {\n        setIsLogged(false);\n      }\n    }\n    isLoggedIn(identityApi);\n  }, [identityApi]);\n\n  const {\n    enabled,\n    idleTimeoutMinutes,\n    promptBeforeIdleSeconds,\n    logoutIfDisconnected,\n    useWorkerTimers,\n  }: AutoLogoutProps = useMemo(() => {\n    return parseConfig(configApi, props);\n  }, [configApi, props]);\n\n  useEffect(() => {\n    if (idleTimeoutMinutes < 0.5) {\n      throw new Error(\n        '❌ idleTimeoutMinutes property should be >= 0.5 minutes (30 seconds).',\n      );\n    }\n\n    if (promptBeforeIdleSeconds < 0) {\n      throw new Error(\n        '❌ promptBeforeIdleSeconds property should be >= 0 seconds. Set to 0 to disable the prompt.',\n      );\n    }\n\n    if (idleTimeoutMinutes * 60 <= promptBeforeIdleSeconds) {\n      throw new Error(\n        `❌ promptBeforeIdleSeconds should be smaller than idleTimeoutMinutes`,\n      );\n    }\n  }, [idleTimeoutMinutes, promptBeforeIdleSeconds]);\n\n  const lastSeenOnlineStore: TimestampStore = useMemo(\n    () => new DefaultTimestampStore(LAST_SEEN_ONLINE_STORAGE_KEY),\n    [],\n  );\n  const [promptOpen, setPromptOpen] = useState<boolean>(false);\n\n  const [remainingTimeCountdown, setRemainingTimeCountdown] =\n    useState<number>(0);\n\n  useLogoutDisconnectedUserEffect({\n    enableEffect: logoutIfDisconnected,\n    autologoutIsEnabled: enabled && isLogged,\n    idleTimeoutSeconds: idleTimeoutMinutes * 60,\n    lastSeenOnlineStore,\n    identityApi,\n  });\n\n  if (!enabled || !isLogged) {\n    return null;\n  }\n\n  return (\n    <ConditionalAutoLogout\n      idleTimeoutMinutes={idleTimeoutMinutes}\n      promptBeforeIdleSeconds={promptBeforeIdleSeconds}\n      useWorkerTimers={useWorkerTimers}\n      events={defaultTrackedEvents}\n      logoutIfDisconnected={logoutIfDisconnected}\n      promptOpen={promptOpen}\n      setPromptOpen={setPromptOpen}\n      remainingTimeCountdown={remainingTimeCountdown}\n      setRemainingTimeCountdown={setRemainingTimeCountdown}\n      identityApi={identityApi}\n      lastSeenOnlineStore={lastSeenOnlineStore}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/AutoLogout/StillTherePrompt.esm.js

@@ -1,10 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import React__default, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { coreComponentsTranslationRef } from '../../translation.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
@@ -35,16 +36,29 @@ const StillTherePrompt = (props) => {
     0
   );
   const seconds = timeTillPrompt > 1 ? "seconds" : "second";
-  return /* @__PURE__ */ React__default.createElement(Dialog, { open, "data-testid": "inactivity-prompt-dialog" }, /* @__PURE__ */ React__default.createElement(DialogTitle, null, t("autoLogout.stillTherePrompt.title")), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(DialogContentText, null, "You are about to be disconnected in", " ", /* @__PURE__ */ React__default.createElement("b", null, Math.ceil(remainingTime / 1e3), " ", seconds), ". Are you still there?")), /* @__PURE__ */ React__default.createElement(DialogActions, null, /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      onClick: handleStillHere,
-      color: "secondary",
-      variant: "contained",
-      size: "small"
-    },
-    t("autoLogout.stillTherePrompt.buttonText")
-  )));
+  return /* @__PURE__ */ jsxs(Dialog, { open, "data-testid": "inactivity-prompt-dialog", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: t("autoLogout.stillTherePrompt.title") }),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(DialogContentText, { children: [
+      "You are about to be disconnected in",
+      " ",
+      /* @__PURE__ */ jsxs("b", { children: [
+        Math.ceil(remainingTime / 1e3),
+        " ",
+        seconds
+      ] }),
+      ". Are you still there?"
+    ] }) }),
+    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleStillHere,
+        color: "secondary",
+        variant: "contained",
+        size: "small",
+        children: t("autoLogout.stillTherePrompt.buttonText")
+      }
+    ) })
+  ] });
 };
 
 export { StillTherePrompt };

package/dist/components/AutoLogout/StillTherePrompt.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StillTherePrompt.esm.js","sources":["../../../src/components/AutoLogout/StillTherePrompt.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport React, { useEffect } from 'react';\nimport { IIdleTimer } from 'react-idle-timer';\nimport { coreComponentsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport interface StillTherePromptProps {\n  idleTimer: IIdleTimer;\n  promptTimeoutMillis: number;\n  remainingTime: number;\n  setRemainingTime: (amount: number) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n}\n\nexport const StillTherePrompt = (props: StillTherePromptProps) => {\n  const {\n    idleTimer,\n    setOpen,\n    open,\n    promptTimeoutMillis,\n    remainingTime,\n    setRemainingTime,\n  } = props;\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setRemainingTime(Math.ceil(idleTimer.getRemainingTime()));\n    }, 500);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [idleTimer, setRemainingTime]);\n\n  const handleStillHere = () => {\n    setOpen(false);\n    idleTimer.activate();\n  };\n\n  const timeTillPrompt = Math.max(\n    remainingTime - promptTimeoutMillis / 1000,\n    0,\n  );\n  const seconds = timeTillPrompt > 1 ? 'seconds' : 'second';\n\n  return (\n    <Dialog open={open} data-testid=\"inactivity-prompt-dialog\">\n      <DialogTitle>{t('autoLogout.stillTherePrompt.title')}</DialogTitle>\n      <DialogContent>\n        <DialogContentText>\n          You are about to be disconnected in{' '}\n          <b>\n            {Math.ceil(remainingTime / 1000)} {seconds}\n          </b>\n          . Are you still there?\n        </DialogContentText>\n      </DialogContent>\n      <DialogActions>\n        <Button\n          onClick={handleStillHere}\n          color=\"secondary\"\n          variant=\"contained\"\n          size=\"small\"\n        >\n          {t('autoLogout.stillTherePrompt.buttonText')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAoCa,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA;AAE5D,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,MAAA,gBAAA,CAAiB,IAAK,CAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,EAAkB,CAAC,CAAA;AAAA,OACvD,GAAG,CAAA;AAEN,IAAA,OAAO,MAAM;AACX,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,gBAAgB,CAAC,CAAA;AAEhC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,OAAA,CAAQ,KAAK,CAAA;AACb,IAAA,SAAA,CAAU,QAAS,EAAA;AAAA,GACrB;AAEA,EAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,IAC1B,gBAAgB,mBAAsB,GAAA,GAAA;AAAA,IACtC;AAAA,GACF;AACA,EAAM,MAAA,OAAA,GAAU,cAAiB,GAAA,CAAA,GAAI,SAAY,GAAA,QAAA;AAEjD,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,IAAY,EAAA,aAAA,EAAY,0BAC9B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,WAAa,EAAA,IAAA,EAAA,CAAA,CAAE,mCAAmC,CAAE,CACrD,kBAAAA,cAAA,CAAA,aAAA,CAAC,qCACEA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,EAAkB,qCACmB,EAAA,GAAA,kBACnCA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EACE,IAAK,CAAA,IAAA,CAAK,gBAAgB,GAAI,CAAA,EAAE,GAAE,EAAA,OACrC,CAAI,EAAA,wBAEN,CACF,CAAA,+CACC,aACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,eAAA;AAAA,MACT,KAAM,EAAA,WAAA;AAAA,MACN,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA;AAAA,KAAA;AAAA,IAEJ,EAAE,wCAAwC;AAAA,GAE/C,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StillTherePrompt.esm.js","sources":["../../../src/components/AutoLogout/StillTherePrompt.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport { useEffect } from 'react';\nimport { IIdleTimer } from 'react-idle-timer';\nimport { coreComponentsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport interface StillTherePromptProps {\n  idleTimer: IIdleTimer;\n  promptTimeoutMillis: number;\n  remainingTime: number;\n  setRemainingTime: (amount: number) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n}\n\nexport const StillTherePrompt = (props: StillTherePromptProps) => {\n  const {\n    idleTimer,\n    setOpen,\n    open,\n    promptTimeoutMillis,\n    remainingTime,\n    setRemainingTime,\n  } = props;\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setRemainingTime(Math.ceil(idleTimer.getRemainingTime()));\n    }, 500);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [idleTimer, setRemainingTime]);\n\n  const handleStillHere = () => {\n    setOpen(false);\n    idleTimer.activate();\n  };\n\n  const timeTillPrompt = Math.max(\n    remainingTime - promptTimeoutMillis / 1000,\n    0,\n  );\n  const seconds = timeTillPrompt > 1 ? 'seconds' : 'second';\n\n  return (\n    <Dialog open={open} data-testid=\"inactivity-prompt-dialog\">\n      <DialogTitle>{t('autoLogout.stillTherePrompt.title')}</DialogTitle>\n      <DialogContent>\n        <DialogContentText>\n          You are about to be disconnected in{' '}\n          <b>\n            {Math.ceil(remainingTime / 1000)} {seconds}\n          </b>\n          . Are you still there?\n        </DialogContentText>\n      </DialogContent>\n      <DialogActions>\n        <Button\n          onClick={handleStillHere}\n          color=\"secondary\"\n          variant=\"contained\"\n          size=\"small\"\n        >\n          {t('autoLogout.stillTherePrompt.buttonText')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAoCa,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA;AAE5D,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,MAAA,gBAAA,CAAiB,IAAK,CAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,EAAkB,CAAC,CAAA;AAAA,OACvD,GAAG,CAAA;AAEN,IAAA,OAAO,MAAM;AACX,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,gBAAgB,CAAC,CAAA;AAEhC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,OAAA,CAAQ,KAAK,CAAA;AACb,IAAA,SAAA,CAAU,QAAS,EAAA;AAAA,GACrB;AAEA,EAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,IAC1B,gBAAgB,mBAAsB,GAAA,GAAA;AAAA,IACtC;AAAA,GACF;AACA,EAAM,MAAA,OAAA,GAAU,cAAiB,GAAA,CAAA,GAAI,SAAY,GAAA,QAAA;AAEjD,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA,EAAO,IAAY,EAAA,aAAA,EAAY,0BAC9B,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,WAAA,EAAA,EAAa,QAAE,EAAA,CAAA,CAAA,mCAAmC,CAAE,EAAA,CAAA;AAAA,oBACrD,GAAA,CAAC,aACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,iBAAkB,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,qCAAA;AAAA,MACmB,GAAA;AAAA,2BACnC,GACE,EAAA,EAAA,QAAA,EAAA;AAAA,QAAK,IAAA,CAAA,IAAA,CAAK,gBAAgB,GAAI,CAAA;AAAA,QAAE,GAAA;AAAA,QAAE;AAAA,OACrC,EAAA,CAAA;AAAA,MAAI;AAAA,KAAA,EAEN,CACF,EAAA,CAAA;AAAA,wBACC,aACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,eAAA;AAAA,QACT,KAAM,EAAA,WAAA;AAAA,QACN,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,OAAA;AAAA,QAEJ,YAAE,wCAAwC;AAAA;AAAA,KAE/C,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Avatar/Avatar.esm.js

@@ -1,7 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
 import MaterialAvatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import React__default from 'react';
 import { stringToColor, extractInitials } from './utils.esm.js';
 import classNames from 'classnames';
 
@@ -37,24 +37,24 @@ function Avatar(props) {
     props.classes?.avatarText,
     classes.avatarText
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     MaterialAvatar,
     {
       alt: displayName,
       src: picture,
       className: avatarClassNames,
-      style: styles
-    },
-    displayName && /* @__PURE__ */ React__default.createElement(
-      Typography,
-      {
-        variant: "h6",
-        component: "span",
-        className: avatarTextClassNames,
-        style: fontStyles
-      },
-      extractInitials(displayName)
-    )
+      style: styles,
+      children: displayName && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h6",
+          component: "span",
+          className: avatarTextClassNames,
+          style: fontStyles,
+          children: extractInitials(displayName)
+        }
+      )
+    }
   );
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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 */\nimport MaterialAvatar from '@material-ui/core/Avatar';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport React, { CSSProperties } from 'react';\n\nimport { extractInitials, stringToColor } from './utils';\nimport classNames from 'classnames';\n\n/** @public */\nexport type AvatarClassKey = 'avatar';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    avatar: {\n      width: '4rem',\n      height: '4rem',\n      color: theme.palette.common.white,\n      backgroundColor: (props: { backgroundColor?: string }) =>\n        props.backgroundColor,\n    },\n    avatarText: {\n      fontWeight: theme.typography.fontWeightBold,\n      letterSpacing: '1px',\n      textTransform: 'uppercase',\n    },\n  }),\n  { name: 'BackstageAvatar' },\n);\n\n/**\n * Properties for {@link Avatar}.\n *\n * @public\n */\nexport interface AvatarProps {\n  /**\n   * A display name, which will be used to generate initials as a fallback in case a picture is not provided.\n   */\n  displayName?: string;\n  /**\n   * URL to avatar image source\n   */\n  picture?: string;\n  /**\n   * Custom styles applied to avatar\n   * @deprecated - use the classes property instead\n   */\n  customStyles?: CSSProperties;\n\n  /**\n   * Custom styles applied to avatar\n   */\n  classes?: { [key in 'avatar' | 'avatarText']?: string };\n}\n\n/**\n *  Component rendering an Avatar\n *\n * @public\n * @remarks\n *\n * Based on https://v4.mui.com/components/avatars/#avatar with some styling adjustment and two-letter initials\n */\nexport function Avatar(props: AvatarProps) {\n  const { displayName, picture, customStyles } = props;\n  const styles = { ...customStyles };\n\n  // TODO: Remove this with the customStyles deprecation\n  const fontStyles = {\n    fontFamily: styles.fontFamily,\n    fontSize: styles.fontSize,\n    fontWeight: styles.fontWeight,\n  };\n\n  // We only calculate the background color if there's not an avatar\n  // picture. If there is a picture, it might have a transparent\n  // background and we don't know whether the calculated background\n  // color will clash.\n  const classes = useStyles(\n    !picture ? { backgroundColor: stringToColor(displayName || '') } : {},\n  );\n\n  const avatarClassNames = classNames(props.classes?.avatar, classes.avatar);\n  const avatarTextClassNames = classNames(\n    props.classes?.avatarText,\n    classes.avatarText,\n  );\n\n  return (\n    <MaterialAvatar\n      alt={displayName}\n      src={picture}\n      className={avatarClassNames}\n      style={styles}\n    >\n      {displayName && (\n        <Typography\n          variant=\"h6\"\n          component=\"span\"\n          className={avatarTextClassNames}\n          style={fontStyles}\n        >\n          {extractInitials(displayName)}\n        </Typography>\n      )}\n    </MaterialAvatar>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;AA0BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,KAAkB,MAAA;AAAA,IACjB,MAAQ,EAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,MAC5B,eAAA,EAAiB,CAAC,KAAA,KAChB,KAAM,CAAA;AAAA,KACV;AAAA,IACA,UAAY,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,MAC7B,aAAe,EAAA,KAAA;AAAA,MACf,aAAe,EAAA;AAAA;AACjB,GACF,CAAA;AAAA,EACA,EAAE,MAAM,iBAAkB;AAC5B,CAAA;AAoCO,SAAS,OAAO,KAAoB,EAAA;AACzC,EAAA,MAAM,EAAE,WAAA,EAAa,OAAS,EAAA,YAAA,EAAiB,GAAA,KAAA;AAC/C,EAAM,MAAA,MAAA,GAAS,EAAE,GAAG,YAAa,EAAA;AAGjC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,YAAY,MAAO,CAAA,UAAA;AAAA,IACnB,UAAU,MAAO,CAAA,QAAA;AAAA,IACjB,YAAY,MAAO,CAAA;AAAA,GACrB;AAMA,EAAA,MAAM,OAAU,GAAA,SAAA;AAAA,IACd,CAAC,UAAU,EAAE,eAAA,EAAiB,cAAc,WAAe,IAAA,EAAE,CAAE,EAAA,GAAI;AAAC,GACtE;AAEA,EAAA,MAAM,mBAAmB,UAAW,CAAA,KAAA,CAAM,OAAS,EAAA,MAAA,EAAQ,QAAQ,MAAM,CAAA;AACzE,EAAA,MAAM,oBAAuB,GAAA,UAAA;AAAA,IAC3B,MAAM,OAAS,EAAA,UAAA;AAAA,IACf,OAAQ,CAAA;AAAA,GACV;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,WAAA;AAAA,MACL,GAAK,EAAA,OAAA;AAAA,MACL,SAAW,EAAA,gBAAA;AAAA,MACX,KAAO,EAAA;AAAA,KAAA;AAAA,IAEN,WACC,oBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,IAAA;AAAA,QACR,SAAU,EAAA,MAAA;AAAA,QACV,SAAW,EAAA,oBAAA;AAAA,QACX,KAAO,EAAA;AAAA,OAAA;AAAA,MAEN,gBAAgB,WAAW;AAAA;AAC9B,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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 */\nimport MaterialAvatar from '@material-ui/core/Avatar';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport { CSSProperties } from 'react';\n\nimport { extractInitials, stringToColor } from './utils';\nimport classNames from 'classnames';\n\n/** @public */\nexport type AvatarClassKey = 'avatar';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    avatar: {\n      width: '4rem',\n      height: '4rem',\n      color: theme.palette.common.white,\n      backgroundColor: (props: { backgroundColor?: string }) =>\n        props.backgroundColor,\n    },\n    avatarText: {\n      fontWeight: theme.typography.fontWeightBold,\n      letterSpacing: '1px',\n      textTransform: 'uppercase',\n    },\n  }),\n  { name: 'BackstageAvatar' },\n);\n\n/**\n * Properties for {@link Avatar}.\n *\n * @public\n */\nexport interface AvatarProps {\n  /**\n   * A display name, which will be used to generate initials as a fallback in case a picture is not provided.\n   */\n  displayName?: string;\n  /**\n   * URL to avatar image source\n   */\n  picture?: string;\n  /**\n   * Custom styles applied to avatar\n   * @deprecated - use the classes property instead\n   */\n  customStyles?: CSSProperties;\n\n  /**\n   * Custom styles applied to avatar\n   */\n  classes?: { [key in 'avatar' | 'avatarText']?: string };\n}\n\n/**\n *  Component rendering an Avatar\n *\n * @public\n * @remarks\n *\n * Based on https://v4.mui.com/components/avatars/#avatar with some styling adjustment and two-letter initials\n */\nexport function Avatar(props: AvatarProps) {\n  const { displayName, picture, customStyles } = props;\n  const styles = { ...customStyles };\n\n  // TODO: Remove this with the customStyles deprecation\n  const fontStyles = {\n    fontFamily: styles.fontFamily,\n    fontSize: styles.fontSize,\n    fontWeight: styles.fontWeight,\n  };\n\n  // We only calculate the background color if there's not an avatar\n  // picture. If there is a picture, it might have a transparent\n  // background and we don't know whether the calculated background\n  // color will clash.\n  const classes = useStyles(\n    !picture ? { backgroundColor: stringToColor(displayName || '') } : {},\n  );\n\n  const avatarClassNames = classNames(props.classes?.avatar, classes.avatar);\n  const avatarTextClassNames = classNames(\n    props.classes?.avatarText,\n    classes.avatarText,\n  );\n\n  return (\n    <MaterialAvatar\n      alt={displayName}\n      src={picture}\n      className={avatarClassNames}\n      style={styles}\n    >\n      {displayName && (\n        <Typography\n          variant=\"h6\"\n          component=\"span\"\n          className={avatarTextClassNames}\n          style={fontStyles}\n        >\n          {extractInitials(displayName)}\n        </Typography>\n      )}\n    </MaterialAvatar>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA0BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,KAAkB,MAAA;AAAA,IACjB,MAAQ,EAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,MAC5B,eAAA,EAAiB,CAAC,KAAA,KAChB,KAAM,CAAA;AAAA,KACV;AAAA,IACA,UAAY,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,MAC7B,aAAe,EAAA,KAAA;AAAA,MACf,aAAe,EAAA;AAAA;AACjB,GACF,CAAA;AAAA,EACA,EAAE,MAAM,iBAAkB;AAC5B,CAAA;AAoCO,SAAS,OAAO,KAAoB,EAAA;AACzC,EAAA,MAAM,EAAE,WAAA,EAAa,OAAS,EAAA,YAAA,EAAiB,GAAA,KAAA;AAC/C,EAAM,MAAA,MAAA,GAAS,EAAE,GAAG,YAAa,EAAA;AAGjC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,YAAY,MAAO,CAAA,UAAA;AAAA,IACnB,UAAU,MAAO,CAAA,QAAA;AAAA,IACjB,YAAY,MAAO,CAAA;AAAA,GACrB;AAMA,EAAA,MAAM,OAAU,GAAA,SAAA;AAAA,IACd,CAAC,UAAU,EAAE,eAAA,EAAiB,cAAc,WAAe,IAAA,EAAE,CAAE,EAAA,GAAI;AAAC,GACtE;AAEA,EAAA,MAAM,mBAAmB,UAAW,CAAA,KAAA,CAAM,OAAS,EAAA,MAAA,EAAQ,QAAQ,MAAM,CAAA;AACzE,EAAA,MAAM,oBAAuB,GAAA,UAAA;AAAA,IAC3B,MAAM,OAAS,EAAA,UAAA;AAAA,IACf,OAAQ,CAAA;AAAA,GACV;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,WAAA;AAAA,MACL,GAAK,EAAA,OAAA;AAAA,MACL,SAAW,EAAA,gBAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MAEN,QACC,EAAA,WAAA,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,MAAA;AAAA,UACV,SAAW,EAAA,oBAAA;AAAA,UACX,KAAO,EAAA,UAAA;AAAA,UAEN,0BAAgB,WAAW;AAAA;AAAA;AAC9B;AAAA,GAEJ;AAEJ;;;;"}

package/dist/components/CodeSnippet/CodeSnippet.esm.js

@@ -1,6 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import { useTheme } from '@material-ui/core/styles';
-import React__default from 'react';
 import LightAsync from 'react-syntax-highlighter/dist/esm/light-async';
 import dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark';
 import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';
@@ -18,23 +18,26 @@ function CodeSnippet(props) {
   const theme = useTheme();
   const mode = theme.palette.type === "dark" ? dark : docco;
   const highlightColor = theme.palette.type === "dark" ? "#256bf3" : "#e6ffed";
-  return /* @__PURE__ */ React__default.createElement(Box, { position: "relative" }, /* @__PURE__ */ React__default.createElement(
-    LightAsync,
-    {
-      customStyle,
-      language,
-      style: mode,
-      showLineNumbers,
-      wrapLines: true,
-      lineNumberStyle: { color: theme.palette.textVerySubtle },
-      lineProps: (lineNumber) => highlightedNumbers?.includes(lineNumber) ? {
-        style: {
-          backgroundColor: highlightColor
-        }
-      } : {}
-    },
-    text
-  ), showCopyCodeButton && /* @__PURE__ */ React__default.createElement(Box, { position: "absolute", top: 0, right: 0 }, /* @__PURE__ */ React__default.createElement(CopyTextButton, { text })));
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+    /* @__PURE__ */ jsx(
+      LightAsync,
+      {
+        customStyle,
+        language,
+        style: mode,
+        showLineNumbers,
+        wrapLines: true,
+        lineNumberStyle: { color: theme.palette.textVerySubtle },
+        lineProps: (lineNumber) => highlightedNumbers?.includes(lineNumber) ? {
+          style: {
+            backgroundColor: highlightColor
+          }
+        } : {},
+        children: text
+      }
+    ),
+    showCopyCodeButton && /* @__PURE__ */ jsx(Box, { position: "absolute", top: 0, right: 0, children: /* @__PURE__ */ jsx(CopyTextButton, { text }) })
+  ] });
 }
 
 export { CodeSnippet };

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

@@ -1 +1 @@
-{"version":3,"file":"CodeSnippet.esm.js","sources":["../../../src/components/CodeSnippet/CodeSnippet.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 Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport React from 'react';\nimport type {} from 'react-syntax-highlighter';\nimport LightAsync from 'react-syntax-highlighter/dist/esm/light-async';\nimport dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark';\nimport docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';\n\nimport { CopyTextButton } from '../CopyTextButton';\n\n/**\n * Properties for {@link CodeSnippet}\n *\n * @public\n */\nexport interface CodeSnippetProps {\n  /**\n   * Code Snippet text\n   */\n  text: string;\n  /**\n   * Language used by {@link CodeSnippetProps.text}\n   */\n  language: string;\n  /**\n   * Whether to show line number\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Whether to show button to copy code snippet\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showCopyCodeButton?: boolean;\n  /**\n   * Array of line numbers to highlight\n   */\n  highlightedNumbers?: number[];\n  /**\n   * Custom styles applied to code\n   *\n   * @remarks\n   *\n   * Passed to {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n   */\n  customStyle?: any;\n}\n\n/**\n * Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n * providing consistent theming and copy code button\n *\n * @public\n */\nexport function CodeSnippet(props: CodeSnippetProps) {\n  const {\n    text,\n    language,\n    showLineNumbers = false,\n    highlightedNumbers,\n    customStyle,\n    showCopyCodeButton = false,\n  } = props;\n  const theme = useTheme();\n  const mode = theme.palette.type === 'dark' ? dark : docco;\n  const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed';\n\n  return (\n    <Box position=\"relative\">\n      <LightAsync\n        customStyle={customStyle}\n        language={language}\n        style={mode}\n        showLineNumbers={showLineNumbers}\n        wrapLines\n        lineNumberStyle={{ color: theme.palette.textVerySubtle }}\n        lineProps={(lineNumber: number) =>\n          highlightedNumbers?.includes(lineNumber)\n            ? {\n                style: {\n                  backgroundColor: highlightColor,\n                },\n              }\n            : {}\n        }\n      >\n        {text}\n      </LightAsync>\n      {showCopyCodeButton && (\n        <Box position=\"absolute\" top={0} right={0}>\n          <CopyTextButton text={text} />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;AA4EO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAkB,GAAA,KAAA;AAAA,IAClB,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,kBAAqB,GAAA;AAAA,GACnB,GAAA,KAAA;AACJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,IAAO,GAAA,KAAA;AACpD,EAAA,MAAM,cAAiB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,SAAY,GAAA,SAAA;AAEnE,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,QAAA,EAAS,UACZ,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAO,EAAA,IAAA;AAAA,MACP,eAAA;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACT,eAAiB,EAAA,EAAE,KAAO,EAAA,KAAA,CAAM,QAAQ,cAAe,EAAA;AAAA,MACvD,WAAW,CAAC,UAAA,KACV,kBAAoB,EAAA,QAAA,CAAS,UAAU,CACnC,GAAA;AAAA,QACE,KAAO,EAAA;AAAA,UACL,eAAiB,EAAA;AAAA;AACnB,UAEF;AAAC,KAAA;AAAA,IAGN;AAAA,GAEF,EAAA,kBAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,UAAS,UAAW,EAAA,GAAA,EAAK,CAAG,EAAA,KAAA,EAAO,CACtC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,IAAA,EAAY,CAC9B,CAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CodeSnippet.esm.js","sources":["../../../src/components/CodeSnippet/CodeSnippet.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 Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport type {} from 'react-syntax-highlighter';\nimport LightAsync from 'react-syntax-highlighter/dist/esm/light-async';\nimport dark from 'react-syntax-highlighter/dist/esm/styles/hljs/dark';\nimport docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';\n\nimport { CopyTextButton } from '../CopyTextButton';\n\n/**\n * Properties for {@link CodeSnippet}\n *\n * @public\n */\nexport interface CodeSnippetProps {\n  /**\n   * Code Snippet text\n   */\n  text: string;\n  /**\n   * Language used by {@link CodeSnippetProps.text}\n   */\n  language: string;\n  /**\n   * Whether to show line number\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Whether to show button to copy code snippet\n   *\n   * @remarks\n   *\n   * Default: false\n   */\n  showCopyCodeButton?: boolean;\n  /**\n   * Array of line numbers to highlight\n   */\n  highlightedNumbers?: number[];\n  /**\n   * Custom styles applied to code\n   *\n   * @remarks\n   *\n   * Passed to {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n   */\n  customStyle?: any;\n}\n\n/**\n * Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}\n * providing consistent theming and copy code button\n *\n * @public\n */\nexport function CodeSnippet(props: CodeSnippetProps) {\n  const {\n    text,\n    language,\n    showLineNumbers = false,\n    highlightedNumbers,\n    customStyle,\n    showCopyCodeButton = false,\n  } = props;\n  const theme = useTheme();\n  const mode = theme.palette.type === 'dark' ? dark : docco;\n  const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed';\n\n  return (\n    <Box position=\"relative\">\n      <LightAsync\n        customStyle={customStyle}\n        language={language}\n        style={mode}\n        showLineNumbers={showLineNumbers}\n        wrapLines\n        lineNumberStyle={{ color: theme.palette.textVerySubtle }}\n        lineProps={(lineNumber: number) =>\n          highlightedNumbers?.includes(lineNumber)\n            ? {\n                style: {\n                  backgroundColor: highlightColor,\n                },\n              }\n            : {}\n        }\n      >\n        {text}\n      </LightAsync>\n      {showCopyCodeButton && (\n        <Box position=\"absolute\" top={0} right={0}>\n          <CopyTextButton text={text} />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA2EO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAkB,GAAA,KAAA;AAAA,IAClB,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,kBAAqB,GAAA;AAAA,GACnB,GAAA,KAAA;AACJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,IAAO,GAAA,KAAA;AACpD,EAAA,MAAM,cAAiB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,SAAY,GAAA,SAAA;AAEnE,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,QAAA,EAAS,UACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAO,EAAA,IAAA;AAAA,QACP,eAAA;AAAA,QACA,SAAS,EAAA,IAAA;AAAA,QACT,eAAiB,EAAA,EAAE,KAAO,EAAA,KAAA,CAAM,QAAQ,cAAe,EAAA;AAAA,QACvD,WAAW,CAAC,UAAA,KACV,kBAAoB,EAAA,QAAA,CAAS,UAAU,CACnC,GAAA;AAAA,UACE,KAAO,EAAA;AAAA,YACL,eAAiB,EAAA;AAAA;AACnB,YAEF,EAAC;AAAA,QAGN,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,kBACC,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,QAAA,EAAS,UAAW,EAAA,GAAA,EAAK,CAAG,EAAA,KAAA,EAAO,CACtC,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,IAAA,EAAY,CAC9B,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CopyTextButton/CopyTextButton.esm.js

@@ -1,8 +1,9 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useApi, errorApiRef } from '@backstage/core-plugin-api';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import CopyIcon from '@material-ui/icons/FileCopy';
-import React__default, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 import { coreComponentsTranslationRef } from '../../translation.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -28,7 +29,7 @@ function CopyTextButton(props) {
     setOpen(true);
     copyToClipboard(text);
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       id: "copy-test-tooltip",
@@ -36,10 +37,10 @@ function CopyTextButton(props) {
       placement: "top",
       leaveDelay: tooltipDelay,
       onClose: () => setOpen(false),
-      open
-    },
-    /* @__PURE__ */ React__default.createElement(IconButton, { onClick: handleCopyClick, "aria-label": ariaLabel }, /* @__PURE__ */ React__default.createElement(CopyIcon, null))
-  ));
+      open,
+      children: /* @__PURE__ */ jsx(IconButton, { onClick: handleCopyClick, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(CopyIcon, {}) })
+    }
+  ) });
 }
 
 export { CopyTextButton };

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

@@ -1 +1 @@
-{"version":3,"file":"CopyTextButton.esm.js","sources":["../../../src/components/CopyTextButton/CopyTextButton.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 { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport React, { MouseEventHandler, useEffect, useState } from 'react';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport { coreComponentsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * Properties for {@link CopyTextButton}\n *\n * @public\n */\nexport interface CopyTextButtonProps {\n  /**\n   * The text to be copied\n   */\n  text: string;\n  /**\n   * Number of milliseconds that the tooltip is shown\n   *\n   * @remarks\n   *\n   * Default: 1000\n   */\n  tooltipDelay?: number;\n  /**\n   * Text to show in the tooltip when user has clicked the button\n   *\n   * @remarks\n   *\n   * Default: \"Text copied to clipboard\"\n   */\n  tooltipText?: string;\n\n  /**\n   * Text to use as aria-label prop on the button\n   *\n   * @remarks\n   *\n   * Default: \"Copy text\"\n   */\n  'aria-label'?: string;\n}\n\n/**\n * Copy text button with visual feedback\n *\n * @public\n * @remarks\n *\n * Visual feedback takes form of:\n *  - a hover color\n *  - click ripple\n *  - Tooltip shown when user has clicked\n *\n * @example\n *\n * ```\n * <CopyTextButton\n *   text=\"My text that I want to be copied to the clipboard\"\n *   arial-label=\"Accessible label for this button\" />\n * ```\n */\nexport function CopyTextButton(props: CopyTextButtonProps) {\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n  const {\n    text,\n    tooltipDelay = 1000,\n    tooltipText = t('copyTextButton.tooltipText'),\n    'aria-label': ariaLabel = 'Copy text',\n  } = props;\n  const errorApi = useApi(errorApiRef);\n  const [open, setOpen] = useState(false);\n  const [{ error }, copyToClipboard] = useCopyToClipboard();\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [error, errorApi]);\n\n  const handleCopyClick: MouseEventHandler = e => {\n    e.stopPropagation();\n    setOpen(true);\n    copyToClipboard(text);\n  };\n\n  return (\n    <>\n      <Tooltip\n        id=\"copy-test-tooltip\"\n        title={tooltipText}\n        placement=\"top\"\n        leaveDelay={tooltipDelay}\n        onClose={() => setOpen(false)}\n        open={open}\n      >\n        <IconButton onClick={handleCopyClick} aria-label={ariaLabel}>\n          <CopyIcon />\n        </IconButton>\n      </Tooltip>\n    </>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAiFO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,YAAe,GAAA,GAAA;AAAA,IACf,WAAA,GAAc,EAAE,4BAA4B,CAAA;AAAA,IAC5C,cAAc,SAAY,GAAA;AAAA,GACxB,GAAA,KAAA;AACJ,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,EAAE,KAAA,EAAS,EAAA,eAAe,IAAI,kBAAmB,EAAA;AAExD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAAA;AACrB,GACC,EAAA,CAAC,KAAO,EAAA,QAAQ,CAAC,CAAA;AAEpB,EAAA,MAAM,kBAAqC,CAAK,CAAA,KAAA;AAC9C,IAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,IAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,GACtB;AAEA,EAAA,uBAEIA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,mBAAA;AAAA,MACH,KAAO,EAAA,WAAA;AAAA,MACP,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,MAC5B;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA,CAAC,cAAW,OAAS,EAAA,eAAA,EAAiB,cAAY,SAChD,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAS,CACZ;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CopyTextButton.esm.js","sources":["../../../src/components/CopyTextButton/CopyTextButton.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 { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport { MouseEventHandler, useEffect, useState } from 'react';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport { coreComponentsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * Properties for {@link CopyTextButton}\n *\n * @public\n */\nexport interface CopyTextButtonProps {\n  /**\n   * The text to be copied\n   */\n  text: string;\n  /**\n   * Number of milliseconds that the tooltip is shown\n   *\n   * @remarks\n   *\n   * Default: 1000\n   */\n  tooltipDelay?: number;\n  /**\n   * Text to show in the tooltip when user has clicked the button\n   *\n   * @remarks\n   *\n   * Default: \"Text copied to clipboard\"\n   */\n  tooltipText?: string;\n\n  /**\n   * Text to use as aria-label prop on the button\n   *\n   * @remarks\n   *\n   * Default: \"Copy text\"\n   */\n  'aria-label'?: string;\n}\n\n/**\n * Copy text button with visual feedback\n *\n * @public\n * @remarks\n *\n * Visual feedback takes form of:\n *  - a hover color\n *  - click ripple\n *  - Tooltip shown when user has clicked\n *\n * @example\n *\n * ```\n * <CopyTextButton\n *   text=\"My text that I want to be copied to the clipboard\"\n *   arial-label=\"Accessible label for this button\" />\n * ```\n */\nexport function CopyTextButton(props: CopyTextButtonProps) {\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n  const {\n    text,\n    tooltipDelay = 1000,\n    tooltipText = t('copyTextButton.tooltipText'),\n    'aria-label': ariaLabel = 'Copy text',\n  } = props;\n  const errorApi = useApi(errorApiRef);\n  const [open, setOpen] = useState(false);\n  const [{ error }, copyToClipboard] = useCopyToClipboard();\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [error, errorApi]);\n\n  const handleCopyClick: MouseEventHandler = e => {\n    e.stopPropagation();\n    setOpen(true);\n    copyToClipboard(text);\n  };\n\n  return (\n    <>\n      <Tooltip\n        id=\"copy-test-tooltip\"\n        title={tooltipText}\n        placement=\"top\"\n        leaveDelay={tooltipDelay}\n        onClose={() => setOpen(false)}\n        open={open}\n      >\n        <IconButton onClick={handleCopyClick} aria-label={ariaLabel}>\n          <CopyIcon />\n        </IconButton>\n      </Tooltip>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAiFO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,YAAe,GAAA,GAAA;AAAA,IACf,WAAA,GAAc,EAAE,4BAA4B,CAAA;AAAA,IAC5C,cAAc,SAAY,GAAA;AAAA,GACxB,GAAA,KAAA;AACJ,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,EAAE,KAAA,EAAS,EAAA,eAAe,IAAI,kBAAmB,EAAA;AAExD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAAA;AACrB,GACC,EAAA,CAAC,KAAO,EAAA,QAAQ,CAAC,CAAA;AAEpB,EAAA,MAAM,kBAAqC,CAAK,CAAA,KAAA;AAC9C,IAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,IAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,GACtB;AAEA,EAAA,uBAEI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,mBAAA;AAAA,MACH,KAAO,EAAA,WAAA;AAAA,MACP,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,MAC5B,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,cAAW,OAAS,EAAA,eAAA,EAAiB,cAAY,SAChD,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,CACZ,EAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CreateButton/CreateButton.esm.js

@@ -1,7 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import React__default from 'react';
 import { Link } from 'react-router-dom';
 import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
 
@@ -13,17 +13,17 @@ function CreateButton(props) {
   if (!to) {
     return null;
   }
-  return isXSScreen ? /* @__PURE__ */ React__default.createElement(
+  return isXSScreen ? /* @__PURE__ */ jsx(
     IconButton,
     {
       component: Link,
       color: "primary",
       title,
       size: "small",
-      to
-    },
-    /* @__PURE__ */ React__default.createElement(AddCircleOutline, null)
-  ) : /* @__PURE__ */ React__default.createElement(Button, { component: Link, variant: "contained", color: "primary", to }, title);
+      to,
+      children: /* @__PURE__ */ jsx(AddCircleOutline, {})
+    }
+  ) : /* @__PURE__ */ jsx(Button, { component: Link, variant: "contained", color: "primary", to, children: title });
 }
 
 export { CreateButton };

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

@@ -1 +1 @@
-{"version":3,"file":"CreateButton.esm.js","sources":["../../../src/components/CreateButton/CreateButton.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 Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport React from 'react';\nimport { Link as RouterLink, LinkProps } from 'react-router-dom';\nimport AddCircleOutline from '@material-ui/icons/AddCircleOutline';\nimport { Theme } from '@material-ui/core/styles';\n\n/**\n * Properties for {@link CreateButton}\n *\n * @public\n */\nexport type CreateButtonProps = {\n  title: string;\n} & Partial<Pick<LinkProps, 'to'>>;\n\n/**\n * Responsive Button giving consistent UX for creation of different things\n *\n * @public\n */\nexport function CreateButton(props: CreateButtonProps) {\n  const { title, to } = props;\n  const isXSScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('xs'),\n  );\n\n  if (!to) {\n    return null;\n  }\n\n  return isXSScreen ? (\n    <IconButton\n      component={RouterLink}\n      color=\"primary\"\n      title={title}\n      size=\"small\"\n      to={to}\n    >\n      <AddCircleOutline />\n    </IconButton>\n  ) : (\n    <Button component={RouterLink} variant=\"contained\" color=\"primary\" to={to}>\n      {title}\n    </Button>\n  );\n}\n"],"names":["React","RouterLink"],"mappings":";;;;;;;AAsCO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA,EAAE,KAAO,EAAA,EAAA,EAAO,GAAA,KAAA;AACtB,EAAA,MAAM,UAAa,GAAA,aAAA;AAAA,IAAqB,CACtC,KAAA,KAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI;AAAA,GAC7B;AAEA,EAAA,IAAI,CAAC,EAAI,EAAA;AACP,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,OAAO,UACL,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,IAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAK,EAAA,OAAA;AAAA,MACL;AAAA,KAAA;AAAA,iDAEC,gBAAiB,EAAA,IAAA;AAAA,GACpB,mBAECD,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAAC,IAAA,EAAY,SAAQ,WAAY,EAAA,KAAA,EAAM,SAAU,EAAA,EAAA,EAAA,EAChE,KACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CreateButton.esm.js","sources":["../../../src/components/CreateButton/CreateButton.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 Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { Link as RouterLink, LinkProps } from 'react-router-dom';\nimport AddCircleOutline from '@material-ui/icons/AddCircleOutline';\nimport { Theme } from '@material-ui/core/styles';\n\n/**\n * Properties for {@link CreateButton}\n *\n * @public\n */\nexport type CreateButtonProps = {\n  title: string;\n} & Partial<Pick<LinkProps, 'to'>>;\n\n/**\n * Responsive Button giving consistent UX for creation of different things\n *\n * @public\n */\nexport function CreateButton(props: CreateButtonProps) {\n  const { title, to } = props;\n  const isXSScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('xs'),\n  );\n\n  if (!to) {\n    return null;\n  }\n\n  return isXSScreen ? (\n    <IconButton\n      component={RouterLink}\n      color=\"primary\"\n      title={title}\n      size=\"small\"\n      to={to}\n    >\n      <AddCircleOutline />\n    </IconButton>\n  ) : (\n    <Button component={RouterLink} variant=\"contained\" color=\"primary\" to={to}>\n      {title}\n    </Button>\n  );\n}\n"],"names":["RouterLink"],"mappings":";;;;;;;AAqCO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA,EAAE,KAAO,EAAA,EAAA,EAAO,GAAA,KAAA;AACtB,EAAA,MAAM,UAAa,GAAA,aAAA;AAAA,IAAqB,CACtC,KAAA,KAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI;AAAA,GAC7B;AAEA,EAAA,IAAI,CAAC,EAAI,EAAA;AACP,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,OAAO,UACL,mBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAA,IAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAK,EAAA,OAAA;AAAA,MACL,EAAA;AAAA,MAEA,8BAAC,gBAAiB,EAAA,EAAA;AAAA;AAAA,GACpB,mBAEC,GAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAAA,IAAA,EAAY,SAAQ,WAAY,EAAA,KAAA,EAAM,SAAU,EAAA,EAAA,EAChE,QACH,EAAA,KAAA,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/DependencyGraph/DefaultLabel.esm.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 
 const useStyles = makeStyles(
@@ -11,7 +11,7 @@ const useStyles = makeStyles(
 );
 function DefaultLabel({ edge: { label } }) {
   const classes = useStyles();
-  return /* @__PURE__ */ React__default.createElement("text", { className: classes.text, textAnchor: "middle" }, label);
+  return /* @__PURE__ */ jsx("text", { className: classes.text, textAnchor: "middle", children: label });
 }
 
 export { DefaultLabel };

package/dist/components/DependencyGraph/DefaultLabel.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultLabel.esm.js","sources":["../../../src/components/DependencyGraph/DefaultLabel.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 makeStyles from '@material-ui/core/styles/makeStyles';\nimport { DependencyGraphTypes as Types } from './types';\n\n/** @public */\nexport type DependencyGraphDefaultLabelClassKey = 'text';\n\nconst useStyles = makeStyles(\n  theme => ({\n    text: {\n      fill: theme.palette.textContrast,\n    },\n  }),\n  { name: 'BackstageDependencyGraphDefaultLabel' },\n);\n\n/** @public */\nexport function DefaultLabel({ edge: { label } }: Types.RenderLabelProps) {\n  const classes = useStyles();\n  return (\n    <text className={classes.text} textAnchor=\"middle\">\n      {label}\n    </text>\n  );\n}\n"],"names":[],"mappings":";;;AAuBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,IAAA,EAAM,MAAM,OAAQ,CAAA;AAAA;AACtB,GACF,CAAA;AAAA,EACA,EAAE,MAAM,sCAAuC;AACjD,CAAA;AAGO,SAAS,aAAa,EAAE,IAAA,EAAM,EAAE,KAAA,IAAmC,EAAA;AACxE,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,oDACG,MAAK,EAAA,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,UAAA,EAAW,YACvC,KACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DefaultLabel.esm.js","sources":["../../../src/components/DependencyGraph/DefaultLabel.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/makeStyles';\nimport { DependencyGraphTypes as Types } from './types';\n\n/** @public */\nexport type DependencyGraphDefaultLabelClassKey = 'text';\n\nconst useStyles = makeStyles(\n  theme => ({\n    text: {\n      fill: theme.palette.textContrast,\n    },\n  }),\n  { name: 'BackstageDependencyGraphDefaultLabel' },\n);\n\n/** @public */\nexport function DefaultLabel({ edge: { label } }: Types.RenderLabelProps) {\n  const classes = useStyles();\n  return (\n    <text className={classes.text} textAnchor=\"middle\">\n      {label}\n    </text>\n  );\n}\n"],"names":[],"mappings":";;;AAsBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,IAAA,EAAM,MAAM,OAAQ,CAAA;AAAA;AACtB,GACF,CAAA;AAAA,EACA,EAAE,MAAM,sCAAuC;AACjD,CAAA;AAGO,SAAS,aAAa,EAAE,IAAA,EAAM,EAAE,KAAA,IAAmC,EAAA;AACxE,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,2BACG,MAAK,EAAA,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,UAAA,EAAW,UACvC,QACH,EAAA,KAAA,EAAA,CAAA;AAEJ;;;;"}