@backstage/core-components 0.14.7 → 0.14.8-next.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @backstage/core-components
 
+## 0.14.8-next.1
+
+### Patch Changes
+
+- a0b46f6: Having tooltip inherit font size for consistency in catalog table columns
+- eae0e4d: Fixed an issue causing `SidebarSubmenu` text to not follow the theme color
+- 3e175c8: Removed max width from `Select` component.
+- 57d7582: Fixed a bug in `SupportButton` where the title was rendered with the characteristics of a button.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.9.3-next.0
+  - @backstage/config@1.2.0
+  - @backstage/errors@1.2.4
+  - @backstage/theme@0.5.6-next.0
+  - @backstage/version-bridge@1.0.8
+
+## 0.14.8-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/theme@0.5.6-next.0
+  - @backstage/config@1.2.0
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/errors@1.2.4
+  - @backstage/version-bridge@1.0.8
+
 ## 0.14.7
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.14.7",
+  "version": "0.14.8-next.1",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

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

@@ -16,7 +16,7 @@ function AlertDisplay(props) {
     anchorOrigin = { vertical: "top", horizontal: "center" },
     transientTimeoutMs
   } = props;
-  const timeoutMs = transientTimeoutMs != null ? transientTimeoutMs : 5e3;
+  const timeoutMs = transientTimeoutMs ?? 5e3;
   useEffect(() => {
     const subscription = alertApi.alert$().subscribe((message) => setMessages((msgs) => msgs.concat(message)));
     return () => {

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":[],"mappings":";;;;;;;;;;AA+DO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAA8B,EAAE,CAAA,CAAA;AAChE,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA,CAAA;AAE5D,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,EAAE,QAAU,EAAA,KAAA,EAAO,YAAY,QAAS,EAAA;AAAA,IACvD,kBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,YAAY,kBAAsB,IAAA,IAAA,GAAA,kBAAA,GAAA,GAAA,CAAA;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,CAAA;AAEjE,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,WAAY,EAAA,CAAA;AAAA,KAC3B,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,CAAC,YAAY,CAAI,GAAA,QAAA,CAAA;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,CAAA;AACvD,UAAA,OAAO,OAAQ,CAAA,MAAA,KAAW,IAAK,CAAA,MAAA,GAAS,IAAO,GAAA,OAAA,CAAA;AAAA,SAChD,CAAA,CAAA;AAAA,SACA,SAAS,CAAA,CAAA;AACZ,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA,CAAA;AAAA,KACnC;AACA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACN,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA,CAAA;AAE5B,EAAI,IAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,UAAQ,IAAK,CAAA,MAAA,CAAO,CAAO,GAAA,KAAA,GAAA,KAAQ,YAAY,CAAC,CAAA,CAAA;AAAA,GAC9D,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,IAAI,EAAA,IAAA,EAAC,YACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,MACE,kBAAA,KAAA,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,oBAAA;AAAA,SAAA;AAAA,4CAEX,SAAU,EAAA,IAAA,CAAA;AAAA,OACb;AAAA,MAEF,UAAU,YAAa,CAAA,QAAA;AAAA,KAAA;AAAA,oBAEtB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAA,EACnB,OAAO,YAAa,CAAA,OAAO,CAC3B,EAAA,QAAA,CAAS,MAAS,GAAA,CAAA,oBAChB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACE,EAAE,sBAAwB,EAAA;AAAA,MACzB,KAAA,EAAO,SAAS,MAAS,GAAA,CAAA;AAAA,KAC1B,CACH,CAEJ,CAAA;AAAA,GAEJ,CAAA,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 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":[],"mappings":"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"}

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

@@ -82,13 +82,12 @@ const defaultTrackedEvents = [
   "visibilitychange"
 ];
 const parseConfig = (configApi, props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   return {
-    enabled: (_b = (_a = configApi.getOptionalBoolean("auth.autologout.enabled")) != null ? _a : props.enabled) != null ? _b : defaultConfig.enabled,
-    idleTimeoutMinutes: (_d = (_c = configApi.getOptionalNumber("auth.autologout.idleTimeoutMinutes")) != null ? _c : props.idleTimeoutMinutes) != null ? _d : defaultConfig.idleTimeoutMinutes,
-    promptBeforeIdleSeconds: (_f = (_e = configApi.getOptionalNumber("auth.autologout.promptBeforeIdleSeconds")) != null ? _e : props.promptBeforeIdleSeconds) != null ? _f : defaultConfig.promptBeforeIdleSeconds,
-    useWorkerTimers: (_h = (_g = configApi.getOptionalBoolean("auth.autologout.useWorkerTimers")) != null ? _g : props.useWorkerTimers) != null ? _h : defaultConfig.useWorkerTimers,
-    logoutIfDisconnected: (_j = (_i = configApi.getOptionalBoolean("auth.autologout.logoutIfDisconnected")) != null ? _i : props.logoutIfDisconnected) != null ? _j : defaultConfig.logoutIfDisconnected
+    enabled: configApi.getOptionalBoolean("auth.autologout.enabled") ?? props.enabled ?? defaultConfig.enabled,
+    idleTimeoutMinutes: configApi.getOptionalNumber("auth.autologout.idleTimeoutMinutes") ?? props.idleTimeoutMinutes ?? defaultConfig.idleTimeoutMinutes,
+    promptBeforeIdleSeconds: configApi.getOptionalNumber("auth.autologout.promptBeforeIdleSeconds") ?? props.promptBeforeIdleSeconds ?? defaultConfig.promptBeforeIdleSeconds,
+    useWorkerTimers: configApi.getOptionalBoolean("auth.autologout.useWorkerTimers") ?? props.useWorkerTimers ?? defaultConfig.useWorkerTimers,
+    logoutIfDisconnected: configApi.getOptionalBoolean("auth.autologout.logoutIfDisconnected") ?? props.logoutIfDisconnected ?? defaultConfig.logoutIfDisconnected
   };
 };
 const AutoLogout = (props) => {

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":[],"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 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":[],"mappings":"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"}

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

@@ -22,7 +22,6 @@ const useStyles = makeStyles(
   { name: "BackstageAvatar" }
 );
 function Avatar(props) {
-  var _a, _b;
   const { displayName, picture, customStyles } = props;
   const styles = { ...customStyles };
   const fontStyles = {
@@ -33,9 +32,9 @@ function Avatar(props) {
   const classes = useStyles(
     !picture ? { backgroundColor: stringToColor(displayName || "") } : {}
   );
-  const avatarClassNames = classNames((_a = props.classes) == null ? void 0 : _a.avatar, classes.avatar);
+  const avatarClassNames = classNames(props.classes?.avatar, classes.avatar);
   const avatarTextClassNames = classNames(
-    (_b = props.classes) == null ? void 0 : _b.avatarText,
+    props.classes?.avatarText,
     classes.avatarText
   );
   return /* @__PURE__ */ React.createElement(

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":[],"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,eAAA;AAAA,KACV;AAAA,IACA,UAAY,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,MAC7B,aAAe,EAAA,KAAA;AAAA,MACf,aAAe,EAAA,WAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAAA,EACA,EAAE,MAAM,iBAAkB,EAAA;AAC5B,CAAA,CAAA;AAoCO,SAAS,OAAO,KAAoB,EAAA;AA9E3C,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA+EE,EAAA,MAAM,EAAE,WAAA,EAAa,OAAS,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAC/C,EAAM,MAAA,MAAA,GAAS,EAAE,GAAG,YAAa,EAAA,CAAA;AAGjC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,YAAY,MAAO,CAAA,UAAA;AAAA,IACnB,UAAU,MAAO,CAAA,QAAA;AAAA,IACjB,YAAY,MAAO,CAAA,UAAA;AAAA,GACrB,CAAA;AAMA,EAAA,MAAM,OAAU,GAAA,SAAA;AAAA,IACd,CAAC,UAAU,EAAE,eAAA,EAAiB,cAAc,WAAe,IAAA,EAAE,CAAE,EAAA,GAAI,EAAC;AAAA,GACtE,CAAA;AAEA,EAAA,MAAM,mBAAmB,UAAW,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,YAAN,IAAe,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAQ,QAAQ,MAAM,CAAA,CAAA;AACzE,EAAA,MAAM,oBAAuB,GAAA,UAAA;AAAA,IAC3B,CAAA,EAAA,GAAA,KAAA,CAAM,YAAN,IAAe,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA;AAAA,IACf,OAAQ,CAAA,UAAA;AAAA,GACV,CAAA;AAEA,EACE,uBAAA,KAAA,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,MAAA;AAAA,KAAA;AAAA,IAEN,WACC,oBAAA,KAAA,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,UAAA;AAAA,OAAA;AAAA,MAEN,gBAAgB,WAAW,CAAA;AAAA,KAC9B;AAAA,GAEJ,CAAA;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 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":[],"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,eAAA;AAAA,KACV;AAAA,IACA,UAAY,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,MAC7B,aAAe,EAAA,KAAA;AAAA,MACf,aAAe,EAAA,WAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAAA,EACA,EAAE,MAAM,iBAAkB,EAAA;AAC5B,CAAA,CAAA;AAoCO,SAAS,OAAO,KAAoB,EAAA;AACzC,EAAA,MAAM,EAAE,WAAA,EAAa,OAAS,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAC/C,EAAM,MAAA,MAAA,GAAS,EAAE,GAAG,YAAa,EAAA,CAAA;AAGjC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,YAAY,MAAO,CAAA,UAAA;AAAA,IACnB,UAAU,MAAO,CAAA,QAAA;AAAA,IACjB,YAAY,MAAO,CAAA,UAAA;AAAA,GACrB,CAAA;AAMA,EAAA,MAAM,OAAU,GAAA,SAAA;AAAA,IACd,CAAC,UAAU,EAAE,eAAA,EAAiB,cAAc,WAAe,IAAA,EAAE,CAAE,EAAA,GAAI,EAAC;AAAA,GACtE,CAAA;AAEA,EAAA,MAAM,mBAAmB,UAAW,CAAA,KAAA,CAAM,OAAS,EAAA,MAAA,EAAQ,QAAQ,MAAM,CAAA,CAAA;AACzE,EAAA,MAAM,oBAAuB,GAAA,UAAA;AAAA,IAC3B,MAAM,OAAS,EAAA,UAAA;AAAA,IACf,OAAQ,CAAA,UAAA;AAAA,GACV,CAAA;AAEA,EACE,uBAAA,KAAA,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,MAAA;AAAA,KAAA;AAAA,IAEN,WACC,oBAAA,KAAA,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,UAAA;AAAA,OAAA;AAAA,MAEN,gBAAgB,WAAW,CAAA;AAAA,KAC9B;AAAA,GAEJ,CAAA;AAEJ;;;;"}

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

@@ -11,9 +11,8 @@ function stringToColor(str) {
   return color;
 }
 function extractInitials(name) {
-  var _a;
   const names = name.trim().split(" ");
-  const firstName = (_a = names[0]) != null ? _a : "";
+  const firstName = names[0] ?? "";
   const lastName = names.length > 1 ? names[names.length - 1] : "";
   return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"utils.esm.js","sources":["../../../src/components/Avatar/utils.ts"],"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\nexport function stringToColor(str: string) {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  let color = '#';\n  for (let i = 0; i < 3; i++) {\n    const value = (hash >> (i * 8)) & 0xff;\n    color += `00${value.toString(16)}`.slice(-2);\n  }\n  return color;\n}\n\nexport function extractInitials(name: string) {\n  const names = name.trim().split(' ');\n  const firstName = names[0] ?? '';\n  const lastName = names.length > 1 ? names[names.length - 1] : '';\n  return firstName && lastName\n    ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n    : firstName.charAt(0);\n}\n"],"names":[],"mappings":"AAgBO,SAAS,cAAc,GAAa,EAAA;AACzC,EAAA,IAAI,IAAO,GAAA,CAAA,CAAA;AACX,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,GAAA,CAAI,QAAQ,CAAK,EAAA,EAAA;AACnC,IAAA,IAAA,GAAO,GAAI,CAAA,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAK,IAAA,IAAA,CAAA,CAAA;AAAA,GAC5C;AACA,EAAA,IAAI,KAAQ,GAAA,GAAA,CAAA;AACZ,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,CAAA,EAAG,CAAK,EAAA,EAAA;AAC1B,IAAM,MAAA,KAAA,GAAS,IAAS,IAAA,CAAA,GAAI,CAAM,GAAA,GAAA,CAAA;AAClC,IAAA,KAAA,IAAS,KAAK,KAAM,CAAA,QAAA,CAAS,EAAE,CAAC,CAAA,CAAA,CAAG,MAAM,CAAE,CAAA,CAAA,CAAA;AAAA,GAC7C;AACA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA;AAEO,SAAS,gBAAgB,IAAc,EAAA;AA7B9C,EAAA,IAAA,EAAA,CAAA;AA8BE,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,IAAK,EAAA,CAAE,MAAM,GAAG,CAAA,CAAA;AACnC,EAAA,MAAM,SAAY,GAAA,CAAA,EAAA,GAAA,KAAA,CAAM,CAAC,CAAA,KAAP,IAAY,GAAA,EAAA,GAAA,EAAA,CAAA;AAC9B,EAAM,MAAA,QAAA,GAAW,MAAM,MAAS,GAAA,CAAA,GAAI,MAAM,KAAM,CAAA,MAAA,GAAS,CAAC,CAAI,GAAA,EAAA,CAAA;AAC9D,EAAA,OAAO,SAAa,IAAA,QAAA,GAChB,CAAG,EAAA,SAAA,CAAU,OAAO,CAAC,CAAC,CAAG,EAAA,QAAA,CAAS,OAAO,CAAC,CAAC,CAC3C,CAAA,GAAA,SAAA,CAAU,OAAO,CAAC,CAAA,CAAA;AACxB;;;;"}
+{"version":3,"file":"utils.esm.js","sources":["../../../src/components/Avatar/utils.ts"],"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\nexport function stringToColor(str: string) {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  let color = '#';\n  for (let i = 0; i < 3; i++) {\n    const value = (hash >> (i * 8)) & 0xff;\n    color += `00${value.toString(16)}`.slice(-2);\n  }\n  return color;\n}\n\nexport function extractInitials(name: string) {\n  const names = name.trim().split(' ');\n  const firstName = names[0] ?? '';\n  const lastName = names.length > 1 ? names[names.length - 1] : '';\n  return firstName && lastName\n    ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n    : firstName.charAt(0);\n}\n"],"names":[],"mappings":"AAgBO,SAAS,cAAc,GAAa,EAAA;AACzC,EAAA,IAAI,IAAO,GAAA,CAAA,CAAA;AACX,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,GAAA,CAAI,QAAQ,CAAK,EAAA,EAAA;AACnC,IAAA,IAAA,GAAO,GAAI,CAAA,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAK,IAAA,IAAA,CAAA,CAAA;AAAA,GAC5C;AACA,EAAA,IAAI,KAAQ,GAAA,GAAA,CAAA;AACZ,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,CAAA,EAAG,CAAK,EAAA,EAAA;AAC1B,IAAM,MAAA,KAAA,GAAS,IAAS,IAAA,CAAA,GAAI,CAAM,GAAA,GAAA,CAAA;AAClC,IAAA,KAAA,IAAS,KAAK,KAAM,CAAA,QAAA,CAAS,EAAE,CAAC,CAAA,CAAA,CAAG,MAAM,CAAE,CAAA,CAAA,CAAA;AAAA,GAC7C;AACA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA;AAEO,SAAS,gBAAgB,IAAc,EAAA;AAC5C,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,IAAK,EAAA,CAAE,MAAM,GAAG,CAAA,CAAA;AACnC,EAAM,MAAA,SAAA,GAAY,KAAM,CAAA,CAAC,CAAK,IAAA,EAAA,CAAA;AAC9B,EAAM,MAAA,QAAA,GAAW,MAAM,MAAS,GAAA,CAAA,GAAI,MAAM,KAAM,CAAA,MAAA,GAAS,CAAC,CAAI,GAAA,EAAA,CAAA;AAC9D,EAAA,OAAO,SAAa,IAAA,QAAA,GAChB,CAAG,EAAA,SAAA,CAAU,OAAO,CAAC,CAAC,CAAG,EAAA,QAAA,CAAS,OAAO,CAAC,CAAC,CAC3C,CAAA,GAAA,SAAA,CAAU,OAAO,CAAC,CAAA,CAAA;AACxB;;;;"}

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

@@ -27,7 +27,7 @@ function CodeSnippet(props) {
       showLineNumbers,
       wrapLines: true,
       lineNumberStyle: { color: theme.palette.textVerySubtle },
-      lineProps: (lineNumber) => (highlightedNumbers == null ? void 0 : highlightedNumbers.includes(lineNumber)) ? {
+      lineProps: (lineNumber) => highlightedNumbers?.includes(lineNumber) ? {
         style: {
           backgroundColor: highlightColor
         }

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":[],"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,KAAA;AAAA,GACnB,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AACvB,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,IAAO,GAAA,KAAA,CAAA;AACpD,EAAA,MAAM,cAAiB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,SAAY,GAAA,SAAA,CAAA;AAEnE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,QAAA,EAAS,UACZ,EAAA,kBAAA,KAAA,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,SAAW,EAAA,CAAC,UACV,KAAA,CAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAoB,SAAS,UACzB,CAAA,IAAA;AAAA,QACE,KAAO,EAAA;AAAA,UACL,eAAiB,EAAA,cAAA;AAAA,SACnB;AAAA,UAEF,EAAC;AAAA,KAAA;AAAA,IAGN,IAAA;AAAA,GAEF,EAAA,kBAAA,oBACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,UAAS,UAAW,EAAA,GAAA,EAAK,CAAG,EAAA,KAAA,EAAO,CACtC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,IAAA,EAAY,CAC9B,CAEJ,CAAA,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 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":[],"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,KAAA;AAAA,GACnB,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AACvB,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,IAAO,GAAA,KAAA,CAAA;AACpD,EAAA,MAAM,cAAiB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,SAAY,GAAA,SAAA,CAAA;AAEnE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,QAAA,EAAS,UACZ,EAAA,kBAAA,KAAA,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,cAAA;AAAA,SACnB;AAAA,UAEF,EAAC;AAAA,KAAA;AAAA,IAGN,IAAA;AAAA,GAEF,EAAA,kBAAA,oBACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,UAAS,UAAW,EAAA,GAAA,EAAK,CAAG,EAAA,KAAA,EAAO,CACtC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,IAAA,EAAY,CAC9B,CAEJ,CAAA,CAAA;AAEJ;;;;"}

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

@@ -11,7 +11,6 @@ import { ARROW_MARKER_ID } from './constants.esm.js';
 
 const WORKSPACE_ID = "workspace";
 function DependencyGraph(props) {
-  var _a, _b;
   const {
     edges,
     nodes,
@@ -42,10 +41,10 @@ function DependencyGraph(props) {
   const [containerHeight, setContainerHeight] = React.useState(100);
   const graph = React.useRef(new dagre.graphlib.Graph());
   const [graphWidth, setGraphWidth] = React.useState(
-    ((_a = graph.current.graph()) == null ? void 0 : _a.width) || 0
+    graph.current.graph()?.width || 0
   );
   const [graphHeight, setGraphHeight] = React.useState(
-    ((_b = graph.current.graph()) == null ? void 0 : _b.height) || 0
+    graph.current.graph()?.height || 0
   );
   const [graphNodes, setGraphNodes] = React.useState([]);
   const [graphEdges, setGraphEdges] = React.useState([]);

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

@@ -1 +1 @@
-{"version":3,"file":"DependencyGraph.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraph.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 * as d3Zoom from 'd3-zoom';\nimport * as d3Selection from 'd3-selection';\nimport useTheme from '@material-ui/core/styles/useTheme';\nimport dagre from 'dagre';\nimport debounce from 'lodash/debounce';\nimport { DependencyGraphTypes as Types } from './types';\nimport { Node } from './Node';\nimport { Edge, GraphEdge } from './Edge';\nimport { ARROW_MARKER_ID } from './constants';\n\n/**\n * Properties of {@link DependencyGraph}\n *\n * @public\n * @remarks\n * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels\n */\nexport interface DependencyGraphProps<NodeData, EdgeData>\n  extends React.SVGProps<SVGSVGElement> {\n  /**\n   * Edges of graph\n   */\n  edges: Types.DependencyEdge<EdgeData>[];\n  /**\n   * Nodes of Graph\n   */\n  nodes: Types.DependencyNode<NodeData>[];\n  /**\n   * Graph {@link DependencyGraphTypes.Direction | direction}\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n   */\n  direction?: Types.Direction;\n  /**\n   * Node {@link DependencyGraphTypes.Alignment | alignment}\n   */\n  align?: Types.Alignment;\n  /**\n   * Margin between nodes on each rank\n   *\n   * @remarks\n   *\n   * Default: 50\n   */\n  nodeMargin?: number;\n  /**\n   * Margin between edges\n   *\n   * @remarks\n   *\n   * Default: 10\n   */\n  edgeMargin?: number;\n  /**\n   * Margin between each rank\n   *\n   * @remarks\n   *\n   * Default: 50\n   */\n  rankMargin?: number;\n  /**\n   * Margin on left and right of whole graph\n   *\n   * @remarks\n   *\n   * Default: 0\n   */\n  paddingX?: number;\n  /**\n   * Margin on top and bottom of whole graph\n   *\n   * @remarks\n   *\n   * Default: 0\n   */\n  paddingY?: number;\n  /**\n   * Heuristic used to find set of edges that will make graph acyclic\n   */\n  acyclicer?: 'greedy';\n  /**\n   * {@link DependencyGraphTypes.Ranker | Algorithm} used to rank nodes\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`\n   */\n  ranker?: Types.Ranker;\n  /**\n   * {@link DependencyGraphTypes.LabelPosition | Position} of label in relation to edge\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.LabelPosition.RIGHT`\n   */\n  labelPosition?: Types.LabelPosition;\n  /**\n   * How much to move label away from edge\n   *\n   * @remarks\n   *\n   * Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or\n   * `DependencyGraphTypes.LabelPosition.RIGHT`\n   */\n  labelOffset?: number;\n  /**\n   * Minimum number of ranks to keep between connected nodes\n   */\n  edgeRanks?: number;\n  /**\n   * Weight applied to edges in graph\n   */\n  edgeWeight?: number;\n  /**\n   * Custom node rendering component\n   */\n  renderNode?: Types.RenderNodeFunction<NodeData>;\n  /**\n   * Custom label rendering component\n   */\n  renderLabel?: Types.RenderLabelFunction<EdgeData>;\n  /**\n   * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by\n   * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}\n   */\n  defs?: JSX.Element | JSX.Element[];\n  /**\n   * Controls zoom behavior of graph\n   *\n   * @remarks\n   *\n   * Default: `enabled`\n   */\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n  /**\n   * A factory for curve generators addressing both lines and areas.\n   *\n   * @remarks\n   *\n   * Default: 'curveMonotoneX'\n   */\n  curve?: 'curveStepBefore' | 'curveMonotoneX';\n  /**\n   * Controls if the arrow heads should be rendered or not.\n   *\n   * Default: false\n   */\n  showArrowHeads?: boolean;\n  /**\n   * Controls if the graph should be contained or grow\n   *\n   * @remarks\n   *\n   * Default: 'grow'\n   */\n  fit?: 'grow' | 'contain';\n}\n\nconst WORKSPACE_ID = 'workspace';\n\n/**\n * Graph component used to visualize relations between entities\n *\n * @public\n */\nexport function DependencyGraph<NodeData, EdgeData>(\n  props: DependencyGraphProps<NodeData, EdgeData>,\n) {\n  const {\n    edges,\n    nodes,\n    renderNode,\n    direction = Types.Direction.TOP_BOTTOM,\n    align,\n    nodeMargin = 50,\n    edgeMargin = 10,\n    rankMargin = 50,\n    paddingX = 0,\n    paddingY = 0,\n    acyclicer,\n    ranker = Types.Ranker.NETWORK_SIMPLEX,\n    labelPosition = Types.LabelPosition.RIGHT,\n    labelOffset = 10,\n    edgeRanks = 1,\n    edgeWeight = 1,\n    renderLabel,\n    defs,\n    zoom = 'enabled',\n    curve = 'curveMonotoneX',\n    showArrowHeads = false,\n    fit = 'grow',\n    ...svgProps\n  } = props;\n  const theme = useTheme();\n  const [containerWidth, setContainerWidth] = React.useState<number>(100);\n  const [containerHeight, setContainerHeight] = React.useState<number>(100);\n\n  const graph = React.useRef<\n    dagre.graphlib.Graph<Types.DependencyNode<NodeData>>\n  >(new dagre.graphlib.Graph());\n  const [graphWidth, setGraphWidth] = React.useState<number>(\n    graph.current.graph()?.width || 0,\n  );\n  const [graphHeight, setGraphHeight] = React.useState<number>(\n    graph.current.graph()?.height || 0,\n  );\n  const [graphNodes, setGraphNodes] = React.useState<string[]>([]);\n  const [graphEdges, setGraphEdges] = React.useState<dagre.Edge[]>([]);\n\n  const maxWidth = Math.max(graphWidth, containerWidth);\n  const maxHeight = Math.max(graphHeight, containerHeight);\n  const minHeight = Math.min(graphHeight, containerHeight);\n\n  const scalableHeight = fit === 'grow' ? maxHeight : minHeight;\n\n  const containerRef = React.useMemo(\n    () =>\n      debounce((node: SVGSVGElement) => {\n        if (!node) {\n          return;\n        }\n        // Set up zooming + panning\n        const container = d3Selection.select<SVGSVGElement, null>(node);\n        const workspace = d3Selection.select(node.getElementById(WORKSPACE_ID));\n\n        function enableZoom() {\n          container.call(\n            d3Zoom\n              .zoom<SVGSVGElement, null>()\n              .scaleExtent([1, Infinity])\n              .on('zoom', event => {\n                event.transform.x = Math.min(\n                  0,\n                  Math.max(\n                    event.transform.x,\n                    maxWidth - maxWidth * event.transform.k,\n                  ),\n                );\n                event.transform.y = Math.min(\n                  0,\n                  Math.max(\n                    event.transform.y,\n                    maxHeight - maxHeight * event.transform.k,\n                  ),\n                );\n                workspace.attr('transform', event.transform);\n              }),\n          );\n        }\n\n        if (zoom === 'enabled') {\n          enableZoom();\n        } else if (zoom === 'enable-on-click') {\n          container.on('click', () => enableZoom());\n        }\n\n        const { width: newContainerWidth, height: newContainerHeight } =\n          node.getBoundingClientRect();\n        if (containerWidth !== newContainerWidth) {\n          setContainerWidth(newContainerWidth);\n        }\n        if (containerHeight !== newContainerHeight) {\n          setContainerHeight(newContainerHeight);\n        }\n      }, 100),\n    [containerHeight, containerWidth, maxWidth, maxHeight, zoom],\n  );\n\n  const setNodesAndEdges = React.useCallback(() => {\n    // Cleaning up lingering nodes and edges\n    const currentGraphNodes = graph.current.nodes();\n    const currentGraphEdges = graph.current.edges();\n\n    currentGraphNodes.forEach(nodeId => {\n      const remainingNode = nodes.some(node => node.id === nodeId);\n      if (!remainingNode) {\n        graph.current.removeNode(nodeId);\n      }\n    });\n\n    currentGraphEdges.forEach(e => {\n      const remainingEdge = edges.some(\n        edge => edge.from === e.v && edge.to === e.w,\n      );\n      if (!remainingEdge) {\n        graph.current.removeEdge(e.v, e.w);\n      }\n    });\n\n    // Adding/updating nodes and edges\n    nodes.forEach(node => {\n      const existingNode = graph.current\n        .nodes()\n        .find(nodeId => node.id === nodeId);\n\n      if (existingNode && graph.current.node(existingNode)) {\n        const { width, height, x, y } = graph.current.node(existingNode);\n        graph.current.setNode(existingNode, { ...node, width, height, x, y });\n      } else {\n        graph.current.setNode(node.id, { ...node, width: 0, height: 0 });\n      }\n    });\n\n    edges.forEach(e => {\n      graph.current.setEdge(e.from, e.to, {\n        ...e,\n        label: e.label,\n        width: 0,\n        height: 0,\n        labelpos: labelPosition,\n        labeloffset: labelOffset,\n        weight: edgeWeight,\n        minlen: edgeRanks,\n      });\n    });\n  }, [edges, nodes, labelPosition, labelOffset, edgeWeight, edgeRanks]);\n\n  const updateGraph = React.useMemo(\n    () =>\n      debounce(\n        () => {\n          dagre.layout(graph.current);\n          const { height, width } = graph.current.graph();\n          const newHeight = Math.max(0, height || 0);\n          const newWidth = Math.max(0, width || 0);\n          setGraphWidth(newWidth);\n          setGraphHeight(newHeight);\n\n          setGraphNodes(graph.current.nodes());\n          setGraphEdges(graph.current.edges());\n        },\n        250,\n        { leading: true },\n      ),\n    [],\n  );\n\n  React.useEffect(() => {\n    graph.current.setGraph({\n      rankdir: direction,\n      align,\n      nodesep: nodeMargin,\n      edgesep: edgeMargin,\n      ranksep: rankMargin,\n      marginx: paddingX,\n      marginy: paddingY,\n      acyclicer,\n      ranker,\n    });\n\n    setNodesAndEdges();\n    updateGraph();\n\n    return updateGraph.cancel;\n  }, [\n    acyclicer,\n    align,\n    direction,\n    edgeMargin,\n    paddingX,\n    paddingY,\n    nodeMargin,\n    rankMargin,\n    ranker,\n    setNodesAndEdges,\n    updateGraph,\n  ]);\n\n  function setNode(id: string, node: Types.DependencyNode<NodeData>) {\n    graph.current.setNode(id, node);\n    updateGraph();\n    return graph.current;\n  }\n\n  function setEdge(id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) {\n    graph.current.setEdge(id, edge);\n    updateGraph();\n    return graph.current;\n  }\n\n  return (\n    <svg\n      ref={containerRef}\n      {...svgProps}\n      width=\"100%\"\n      height={scalableHeight}\n      viewBox={`0 0 ${maxWidth} ${maxHeight}`}\n    >\n      <defs>\n        <marker\n          id={ARROW_MARKER_ID}\n          viewBox=\"0 0 24 24\"\n          markerWidth=\"14\"\n          markerHeight=\"14\"\n          refX=\"16\"\n          refY=\"12\"\n          orient=\"auto\"\n          markerUnits=\"strokeWidth\"\n        >\n          <path\n            fill={theme.palette.textSubtle}\n            d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\n          />\n        </marker>\n        {defs}\n      </defs>\n      <g id={WORKSPACE_ID}>\n        <svg\n          width={graphWidth}\n          height={graphHeight}\n          y={maxHeight / 2 - graphHeight / 2}\n          x={maxWidth / 2 - graphWidth / 2}\n          viewBox={`0 0 ${graphWidth} ${graphHeight}`}\n        >\n          {graphEdges.map(e => {\n            const edge = graph.current.edge(e) as GraphEdge<EdgeData>;\n            if (!edge) return null;\n            return (\n              <Edge\n                key={`${e.v}-${e.w}`}\n                id={e}\n                setEdge={setEdge}\n                render={renderLabel}\n                edge={edge}\n                curve={curve}\n                showArrowHeads={showArrowHeads}\n              />\n            );\n          })}\n          {graphNodes.map((id: string) => {\n            const node = graph.current.node(id);\n            if (!node) return null;\n            return (\n              <Node\n                key={id}\n                setNode={setNode}\n                render={renderNode}\n                node={node}\n              />\n            );\n          })}\n        </svg>\n      </g>\n    </svg>\n  );\n}\n"],"names":["Types"],"mappings":"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"}
+{"version":3,"file":"DependencyGraph.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraph.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 * as d3Zoom from 'd3-zoom';\nimport * as d3Selection from 'd3-selection';\nimport useTheme from '@material-ui/core/styles/useTheme';\nimport dagre from 'dagre';\nimport debounce from 'lodash/debounce';\nimport { DependencyGraphTypes as Types } from './types';\nimport { Node } from './Node';\nimport { Edge, GraphEdge } from './Edge';\nimport { ARROW_MARKER_ID } from './constants';\n\n/**\n * Properties of {@link DependencyGraph}\n *\n * @public\n * @remarks\n * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels\n */\nexport interface DependencyGraphProps<NodeData, EdgeData>\n  extends React.SVGProps<SVGSVGElement> {\n  /**\n   * Edges of graph\n   */\n  edges: Types.DependencyEdge<EdgeData>[];\n  /**\n   * Nodes of Graph\n   */\n  nodes: Types.DependencyNode<NodeData>[];\n  /**\n   * Graph {@link DependencyGraphTypes.Direction | direction}\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n   */\n  direction?: Types.Direction;\n  /**\n   * Node {@link DependencyGraphTypes.Alignment | alignment}\n   */\n  align?: Types.Alignment;\n  /**\n   * Margin between nodes on each rank\n   *\n   * @remarks\n   *\n   * Default: 50\n   */\n  nodeMargin?: number;\n  /**\n   * Margin between edges\n   *\n   * @remarks\n   *\n   * Default: 10\n   */\n  edgeMargin?: number;\n  /**\n   * Margin between each rank\n   *\n   * @remarks\n   *\n   * Default: 50\n   */\n  rankMargin?: number;\n  /**\n   * Margin on left and right of whole graph\n   *\n   * @remarks\n   *\n   * Default: 0\n   */\n  paddingX?: number;\n  /**\n   * Margin on top and bottom of whole graph\n   *\n   * @remarks\n   *\n   * Default: 0\n   */\n  paddingY?: number;\n  /**\n   * Heuristic used to find set of edges that will make graph acyclic\n   */\n  acyclicer?: 'greedy';\n  /**\n   * {@link DependencyGraphTypes.Ranker | Algorithm} used to rank nodes\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`\n   */\n  ranker?: Types.Ranker;\n  /**\n   * {@link DependencyGraphTypes.LabelPosition | Position} of label in relation to edge\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.LabelPosition.RIGHT`\n   */\n  labelPosition?: Types.LabelPosition;\n  /**\n   * How much to move label away from edge\n   *\n   * @remarks\n   *\n   * Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or\n   * `DependencyGraphTypes.LabelPosition.RIGHT`\n   */\n  labelOffset?: number;\n  /**\n   * Minimum number of ranks to keep between connected nodes\n   */\n  edgeRanks?: number;\n  /**\n   * Weight applied to edges in graph\n   */\n  edgeWeight?: number;\n  /**\n   * Custom node rendering component\n   */\n  renderNode?: Types.RenderNodeFunction<NodeData>;\n  /**\n   * Custom label rendering component\n   */\n  renderLabel?: Types.RenderLabelFunction<EdgeData>;\n  /**\n   * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by\n   * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}\n   */\n  defs?: JSX.Element | JSX.Element[];\n  /**\n   * Controls zoom behavior of graph\n   *\n   * @remarks\n   *\n   * Default: `enabled`\n   */\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n  /**\n   * A factory for curve generators addressing both lines and areas.\n   *\n   * @remarks\n   *\n   * Default: 'curveMonotoneX'\n   */\n  curve?: 'curveStepBefore' | 'curveMonotoneX';\n  /**\n   * Controls if the arrow heads should be rendered or not.\n   *\n   * Default: false\n   */\n  showArrowHeads?: boolean;\n  /**\n   * Controls if the graph should be contained or grow\n   *\n   * @remarks\n   *\n   * Default: 'grow'\n   */\n  fit?: 'grow' | 'contain';\n}\n\nconst WORKSPACE_ID = 'workspace';\n\n/**\n * Graph component used to visualize relations between entities\n *\n * @public\n */\nexport function DependencyGraph<NodeData, EdgeData>(\n  props: DependencyGraphProps<NodeData, EdgeData>,\n) {\n  const {\n    edges,\n    nodes,\n    renderNode,\n    direction = Types.Direction.TOP_BOTTOM,\n    align,\n    nodeMargin = 50,\n    edgeMargin = 10,\n    rankMargin = 50,\n    paddingX = 0,\n    paddingY = 0,\n    acyclicer,\n    ranker = Types.Ranker.NETWORK_SIMPLEX,\n    labelPosition = Types.LabelPosition.RIGHT,\n    labelOffset = 10,\n    edgeRanks = 1,\n    edgeWeight = 1,\n    renderLabel,\n    defs,\n    zoom = 'enabled',\n    curve = 'curveMonotoneX',\n    showArrowHeads = false,\n    fit = 'grow',\n    ...svgProps\n  } = props;\n  const theme = useTheme();\n  const [containerWidth, setContainerWidth] = React.useState<number>(100);\n  const [containerHeight, setContainerHeight] = React.useState<number>(100);\n\n  const graph = React.useRef<\n    dagre.graphlib.Graph<Types.DependencyNode<NodeData>>\n  >(new dagre.graphlib.Graph());\n  const [graphWidth, setGraphWidth] = React.useState<number>(\n    graph.current.graph()?.width || 0,\n  );\n  const [graphHeight, setGraphHeight] = React.useState<number>(\n    graph.current.graph()?.height || 0,\n  );\n  const [graphNodes, setGraphNodes] = React.useState<string[]>([]);\n  const [graphEdges, setGraphEdges] = React.useState<dagre.Edge[]>([]);\n\n  const maxWidth = Math.max(graphWidth, containerWidth);\n  const maxHeight = Math.max(graphHeight, containerHeight);\n  const minHeight = Math.min(graphHeight, containerHeight);\n\n  const scalableHeight = fit === 'grow' ? maxHeight : minHeight;\n\n  const containerRef = React.useMemo(\n    () =>\n      debounce((node: SVGSVGElement) => {\n        if (!node) {\n          return;\n        }\n        // Set up zooming + panning\n        const container = d3Selection.select<SVGSVGElement, null>(node);\n        const workspace = d3Selection.select(node.getElementById(WORKSPACE_ID));\n\n        function enableZoom() {\n          container.call(\n            d3Zoom\n              .zoom<SVGSVGElement, null>()\n              .scaleExtent([1, Infinity])\n              .on('zoom', event => {\n                event.transform.x = Math.min(\n                  0,\n                  Math.max(\n                    event.transform.x,\n                    maxWidth - maxWidth * event.transform.k,\n                  ),\n                );\n                event.transform.y = Math.min(\n                  0,\n                  Math.max(\n                    event.transform.y,\n                    maxHeight - maxHeight * event.transform.k,\n                  ),\n                );\n                workspace.attr('transform', event.transform);\n              }),\n          );\n        }\n\n        if (zoom === 'enabled') {\n          enableZoom();\n        } else if (zoom === 'enable-on-click') {\n          container.on('click', () => enableZoom());\n        }\n\n        const { width: newContainerWidth, height: newContainerHeight } =\n          node.getBoundingClientRect();\n        if (containerWidth !== newContainerWidth) {\n          setContainerWidth(newContainerWidth);\n        }\n        if (containerHeight !== newContainerHeight) {\n          setContainerHeight(newContainerHeight);\n        }\n      }, 100),\n    [containerHeight, containerWidth, maxWidth, maxHeight, zoom],\n  );\n\n  const setNodesAndEdges = React.useCallback(() => {\n    // Cleaning up lingering nodes and edges\n    const currentGraphNodes = graph.current.nodes();\n    const currentGraphEdges = graph.current.edges();\n\n    currentGraphNodes.forEach(nodeId => {\n      const remainingNode = nodes.some(node => node.id === nodeId);\n      if (!remainingNode) {\n        graph.current.removeNode(nodeId);\n      }\n    });\n\n    currentGraphEdges.forEach(e => {\n      const remainingEdge = edges.some(\n        edge => edge.from === e.v && edge.to === e.w,\n      );\n      if (!remainingEdge) {\n        graph.current.removeEdge(e.v, e.w);\n      }\n    });\n\n    // Adding/updating nodes and edges\n    nodes.forEach(node => {\n      const existingNode = graph.current\n        .nodes()\n        .find(nodeId => node.id === nodeId);\n\n      if (existingNode && graph.current.node(existingNode)) {\n        const { width, height, x, y } = graph.current.node(existingNode);\n        graph.current.setNode(existingNode, { ...node, width, height, x, y });\n      } else {\n        graph.current.setNode(node.id, { ...node, width: 0, height: 0 });\n      }\n    });\n\n    edges.forEach(e => {\n      graph.current.setEdge(e.from, e.to, {\n        ...e,\n        label: e.label,\n        width: 0,\n        height: 0,\n        labelpos: labelPosition,\n        labeloffset: labelOffset,\n        weight: edgeWeight,\n        minlen: edgeRanks,\n      });\n    });\n  }, [edges, nodes, labelPosition, labelOffset, edgeWeight, edgeRanks]);\n\n  const updateGraph = React.useMemo(\n    () =>\n      debounce(\n        () => {\n          dagre.layout(graph.current);\n          const { height, width } = graph.current.graph();\n          const newHeight = Math.max(0, height || 0);\n          const newWidth = Math.max(0, width || 0);\n          setGraphWidth(newWidth);\n          setGraphHeight(newHeight);\n\n          setGraphNodes(graph.current.nodes());\n          setGraphEdges(graph.current.edges());\n        },\n        250,\n        { leading: true },\n      ),\n    [],\n  );\n\n  React.useEffect(() => {\n    graph.current.setGraph({\n      rankdir: direction,\n      align,\n      nodesep: nodeMargin,\n      edgesep: edgeMargin,\n      ranksep: rankMargin,\n      marginx: paddingX,\n      marginy: paddingY,\n      acyclicer,\n      ranker,\n    });\n\n    setNodesAndEdges();\n    updateGraph();\n\n    return updateGraph.cancel;\n  }, [\n    acyclicer,\n    align,\n    direction,\n    edgeMargin,\n    paddingX,\n    paddingY,\n    nodeMargin,\n    rankMargin,\n    ranker,\n    setNodesAndEdges,\n    updateGraph,\n  ]);\n\n  function setNode(id: string, node: Types.DependencyNode<NodeData>) {\n    graph.current.setNode(id, node);\n    updateGraph();\n    return graph.current;\n  }\n\n  function setEdge(id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) {\n    graph.current.setEdge(id, edge);\n    updateGraph();\n    return graph.current;\n  }\n\n  return (\n    <svg\n      ref={containerRef}\n      {...svgProps}\n      width=\"100%\"\n      height={scalableHeight}\n      viewBox={`0 0 ${maxWidth} ${maxHeight}`}\n    >\n      <defs>\n        <marker\n          id={ARROW_MARKER_ID}\n          viewBox=\"0 0 24 24\"\n          markerWidth=\"14\"\n          markerHeight=\"14\"\n          refX=\"16\"\n          refY=\"12\"\n          orient=\"auto\"\n          markerUnits=\"strokeWidth\"\n        >\n          <path\n            fill={theme.palette.textSubtle}\n            d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\n          />\n        </marker>\n        {defs}\n      </defs>\n      <g id={WORKSPACE_ID}>\n        <svg\n          width={graphWidth}\n          height={graphHeight}\n          y={maxHeight / 2 - graphHeight / 2}\n          x={maxWidth / 2 - graphWidth / 2}\n          viewBox={`0 0 ${graphWidth} ${graphHeight}`}\n        >\n          {graphEdges.map(e => {\n            const edge = graph.current.edge(e) as GraphEdge<EdgeData>;\n            if (!edge) return null;\n            return (\n              <Edge\n                key={`${e.v}-${e.w}`}\n                id={e}\n                setEdge={setEdge}\n                render={renderLabel}\n                edge={edge}\n                curve={curve}\n                showArrowHeads={showArrowHeads}\n              />\n            );\n          })}\n          {graphNodes.map((id: string) => {\n            const node = graph.current.node(id);\n            if (!node) return null;\n            return (\n              <Node\n                key={id}\n                setNode={setNode}\n                render={renderNode}\n                node={node}\n              />\n            );\n          })}\n        </svg>\n      </g>\n    </svg>\n  );\n}\n"],"names":["Types"],"mappings":"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"}

package/dist/components/DismissableBanner/DismissableBanner.esm.js

@@ -9,62 +9,58 @@ import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
 const useStyles = makeStyles(
-  (theme) => {
-    var _a, _b;
-    return {
-      root: {
-        padding: theme.spacing(0),
-        marginBottom: theme.spacing(0),
-        marginTop: theme.spacing(0),
-        display: "flex",
-        flexFlow: "row nowrap"
-      },
-      // showing on top
-      topPosition: {
-        position: "relative",
-        marginBottom: theme.spacing(6),
-        marginTop: -theme.spacing(3),
-        zIndex: "unset"
-      },
-      icon: {
-        fontSize: theme.typography.h6.fontSize
-      },
-      content: {
-        width: "100%",
-        maxWidth: "inherit",
-        flexWrap: "nowrap",
-        color: theme.palette.banner.text
-      },
-      message: {
-        display: "flex",
-        alignItems: "center",
-        "& a": {
-          color: theme.palette.banner.link
-        }
-      },
-      button: {
-        color: (_a = theme.palette.banner.closeButtonColor) != null ? _a : "inherit"
-      },
-      info: {
-        backgroundColor: theme.palette.banner.info
-      },
-      error: {
-        backgroundColor: theme.palette.banner.error
-      },
-      warning: {
-        backgroundColor: (_b = theme.palette.banner.warning) != null ? _b : theme.palette.banner.error
+  (theme) => ({
+    root: {
+      padding: theme.spacing(0),
+      marginBottom: theme.spacing(0),
+      marginTop: theme.spacing(0),
+      display: "flex",
+      flexFlow: "row nowrap"
+    },
+    // showing on top
+    topPosition: {
+      position: "relative",
+      marginBottom: theme.spacing(6),
+      marginTop: -theme.spacing(3),
+      zIndex: "unset"
+    },
+    icon: {
+      fontSize: theme.typography.h6.fontSize
+    },
+    content: {
+      width: "100%",
+      maxWidth: "inherit",
+      flexWrap: "nowrap",
+      color: theme.palette.banner.text
+    },
+    message: {
+      display: "flex",
+      alignItems: "center",
+      "& a": {
+        color: theme.palette.banner.link
       }
-    };
-  },
+    },
+    button: {
+      color: theme.palette.banner.closeButtonColor ?? "inherit"
+    },
+    info: {
+      backgroundColor: theme.palette.banner.info
+    },
+    error: {
+      backgroundColor: theme.palette.banner.error
+    },
+    warning: {
+      backgroundColor: theme.palette.banner.warning ?? theme.palette.banner.error
+    }
+  }),
   { name: "BackstageDismissableBanner" }
 );
 const DismissableBanner = (props) => {
-  var _a;
   const { variant, message, id, fixed = false } = props;
   const classes = useStyles();
   const storageApi = useApi(storageApiRef);
   const notificationsStore = storageApi.forBucket("notifications");
-  const rawDismissedBanners = (_a = notificationsStore.snapshot("dismissedBanners").value) != null ? _a : [];
+  const rawDismissedBanners = notificationsStore.snapshot("dismissedBanners").value ?? [];
   const [dismissedBanners, setDismissedBanners] = useState(
     new Set(rawDismissedBanners)
   );
@@ -72,12 +68,11 @@ const DismissableBanner = (props) => {
     notificationsStore.observe$("dismissedBanners")
   );
   useEffect(() => {
-    var _a2;
-    if (observedItems == null ? void 0 : observedItems.value) {
-      const currentValue = (_a2 = observedItems == null ? void 0 : observedItems.value) != null ? _a2 : [];
+    if (observedItems?.value) {
+      const currentValue = observedItems?.value ?? [];
       setDismissedBanners(new Set(currentValue));
     }
-  }, [observedItems == null ? void 0 : observedItems.value]);
+  }, [observedItems?.value]);
   const handleClick = () => {
     notificationsStore.set("dismissedBanners", [...dismissedBanners, id]);
   };

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

@@ -1 +1 @@
-{"version":3,"file":"DismissableBanner.esm.js","sources":["../../../src/components/DismissableBanner/DismissableBanner.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, { ReactNode, useState, useEffect } from 'react';\nimport { useApi, storageApiRef } from '@backstage/core-plugin-api';\nimport useObservable from 'react-use/esm/useObservable';\nimport classNames from 'classnames';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport SnackbarContent from '@material-ui/core/SnackbarContent';\nimport IconButton from '@material-ui/core/IconButton';\nimport Close from '@material-ui/icons/Close';\n\n/** @public */\nexport type DismissableBannerClassKey =\n  | 'root'\n  | 'topPosition'\n  | 'icon'\n  | 'content'\n  | 'message'\n  | 'info'\n  | 'error';\n\n/**\n * @public\n * @deprecated This type contained a typo, please use DismissableBannerClassKey instead\n */\nexport type DismissbleBannerClassKey = DismissableBannerClassKey;\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      padding: theme.spacing(0),\n      marginBottom: theme.spacing(0),\n      marginTop: theme.spacing(0),\n      display: 'flex',\n      flexFlow: 'row nowrap',\n    },\n    // showing on top\n    topPosition: {\n      position: 'relative',\n      marginBottom: theme.spacing(6),\n      marginTop: -theme.spacing(3),\n      zIndex: 'unset',\n    },\n    icon: {\n      fontSize: theme.typography.h6.fontSize,\n    },\n    content: {\n      width: '100%',\n      maxWidth: 'inherit',\n      flexWrap: 'nowrap',\n      color: theme.palette.banner.text,\n    },\n    message: {\n      display: 'flex',\n      alignItems: 'center',\n      '& a': {\n        color: theme.palette.banner.link,\n      },\n    },\n    button: {\n      color: theme.palette.banner.closeButtonColor ?? 'inherit',\n    },\n    info: {\n      backgroundColor: theme.palette.banner.info,\n    },\n    error: {\n      backgroundColor: theme.palette.banner.error,\n    },\n    warning: {\n      backgroundColor:\n        theme.palette.banner.warning ?? theme.palette.banner.error,\n    },\n  }),\n  { name: 'BackstageDismissableBanner' },\n);\n\nexport type Props = {\n  variant: 'info' | 'error' | 'warning';\n  message: ReactNode;\n  id: string;\n  fixed?: boolean;\n};\n\n/** @public */\nexport const DismissableBanner = (props: Props) => {\n  const { variant, message, id, fixed = false } = props;\n  const classes = useStyles();\n  const storageApi = useApi(storageApiRef);\n  const notificationsStore = storageApi.forBucket('notifications');\n  const rawDismissedBanners =\n    notificationsStore.snapshot<string[]>('dismissedBanners').value ?? [];\n\n  const [dismissedBanners, setDismissedBanners] = useState(\n    new Set(rawDismissedBanners),\n  );\n\n  const observedItems = useObservable(\n    notificationsStore.observe$<string[]>('dismissedBanners'),\n  );\n\n  useEffect(() => {\n    if (observedItems?.value) {\n      const currentValue = observedItems?.value ?? [];\n      setDismissedBanners(new Set(currentValue));\n    }\n  }, [observedItems?.value]);\n\n  const handleClick = () => {\n    notificationsStore.set('dismissedBanners', [...dismissedBanners, id]);\n  };\n\n  return (\n    <Snackbar\n      anchorOrigin={\n        fixed\n          ? { vertical: 'bottom', horizontal: 'center' }\n          : { vertical: 'top', horizontal: 'center' }\n      }\n      open={!dismissedBanners.has(id)}\n      classes={{\n        root: classNames(classes.root, !fixed && classes.topPosition),\n      }}\n    >\n      <SnackbarContent\n        classes={{\n          root: classNames(classes.content, classes[variant]),\n          message: classes.message,\n        }}\n        message={message}\n        action={[\n          <IconButton\n            key=\"dismiss\"\n            title=\"Permanently dismiss this message\"\n            className={classes.button}\n            onClick={handleClick}\n          >\n            <Close className={classes.icon} />\n          </IconButton>,\n        ]}\n      />\n    </Snackbar>\n  );\n};\n"],"names":["_a","Close"],"mappings":"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"}
+{"version":3,"file":"DismissableBanner.esm.js","sources":["../../../src/components/DismissableBanner/DismissableBanner.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, { ReactNode, useState, useEffect } from 'react';\nimport { useApi, storageApiRef } from '@backstage/core-plugin-api';\nimport useObservable from 'react-use/esm/useObservable';\nimport classNames from 'classnames';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport SnackbarContent from '@material-ui/core/SnackbarContent';\nimport IconButton from '@material-ui/core/IconButton';\nimport Close from '@material-ui/icons/Close';\n\n/** @public */\nexport type DismissableBannerClassKey =\n  | 'root'\n  | 'topPosition'\n  | 'icon'\n  | 'content'\n  | 'message'\n  | 'info'\n  | 'error';\n\n/**\n * @public\n * @deprecated This type contained a typo, please use DismissableBannerClassKey instead\n */\nexport type DismissbleBannerClassKey = DismissableBannerClassKey;\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      padding: theme.spacing(0),\n      marginBottom: theme.spacing(0),\n      marginTop: theme.spacing(0),\n      display: 'flex',\n      flexFlow: 'row nowrap',\n    },\n    // showing on top\n    topPosition: {\n      position: 'relative',\n      marginBottom: theme.spacing(6),\n      marginTop: -theme.spacing(3),\n      zIndex: 'unset',\n    },\n    icon: {\n      fontSize: theme.typography.h6.fontSize,\n    },\n    content: {\n      width: '100%',\n      maxWidth: 'inherit',\n      flexWrap: 'nowrap',\n      color: theme.palette.banner.text,\n    },\n    message: {\n      display: 'flex',\n      alignItems: 'center',\n      '& a': {\n        color: theme.palette.banner.link,\n      },\n    },\n    button: {\n      color: theme.palette.banner.closeButtonColor ?? 'inherit',\n    },\n    info: {\n      backgroundColor: theme.palette.banner.info,\n    },\n    error: {\n      backgroundColor: theme.palette.banner.error,\n    },\n    warning: {\n      backgroundColor:\n        theme.palette.banner.warning ?? theme.palette.banner.error,\n    },\n  }),\n  { name: 'BackstageDismissableBanner' },\n);\n\nexport type Props = {\n  variant: 'info' | 'error' | 'warning';\n  message: ReactNode;\n  id: string;\n  fixed?: boolean;\n};\n\n/** @public */\nexport const DismissableBanner = (props: Props) => {\n  const { variant, message, id, fixed = false } = props;\n  const classes = useStyles();\n  const storageApi = useApi(storageApiRef);\n  const notificationsStore = storageApi.forBucket('notifications');\n  const rawDismissedBanners =\n    notificationsStore.snapshot<string[]>('dismissedBanners').value ?? [];\n\n  const [dismissedBanners, setDismissedBanners] = useState(\n    new Set(rawDismissedBanners),\n  );\n\n  const observedItems = useObservable(\n    notificationsStore.observe$<string[]>('dismissedBanners'),\n  );\n\n  useEffect(() => {\n    if (observedItems?.value) {\n      const currentValue = observedItems?.value ?? [];\n      setDismissedBanners(new Set(currentValue));\n    }\n  }, [observedItems?.value]);\n\n  const handleClick = () => {\n    notificationsStore.set('dismissedBanners', [...dismissedBanners, id]);\n  };\n\n  return (\n    <Snackbar\n      anchorOrigin={\n        fixed\n          ? { vertical: 'bottom', horizontal: 'center' }\n          : { vertical: 'top', horizontal: 'center' }\n      }\n      open={!dismissedBanners.has(id)}\n      classes={{\n        root: classNames(classes.root, !fixed && classes.topPosition),\n      }}\n    >\n      <SnackbarContent\n        classes={{\n          root: classNames(classes.content, classes[variant]),\n          message: classes.message,\n        }}\n        message={message}\n        action={[\n          <IconButton\n            key=\"dismiss\"\n            title=\"Permanently dismiss this message\"\n            className={classes.button}\n            onClick={handleClick}\n          >\n            <Close className={classes.icon} />\n          </IconButton>,\n        ]}\n      />\n    </Snackbar>\n  );\n};\n"],"names":["Close"],"mappings":"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"}

package/dist/components/ErrorPanel/ErrorPanel.esm.js

@@ -56,7 +56,7 @@ function ErrorPanel(props) {
     WarningPanel,
     {
       severity: "error",
-      title: title != null ? title : error.message,
+      title: title ?? error.message,
       defaultExpanded,
       titleFormat
     },