@backstage/core-components 0.14.4 → 0.14.5-next.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/core-components
 
+## 0.14.5-next.0
+
+### Patch Changes
+
+- 71e4229: Added optional `initialShowDropDown` prop to `SidebarSubmenuItem` to internally manage the initial display state of the dropdown items.
+- Updated dependencies
+  - @backstage/theme@0.5.4-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.4
 
 ### Patch Changes

package/alpha/package.json

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

package/dist/alpha.esm.js

@@ -1,3 +1,2 @@
-export { c as coreComponentsTranslationRef } from './esm/translation-p8_bRQW1.esm.js';
-import '@backstage/core-plugin-api/alpha';
+export { coreComponentsTranslationRef } from './translation.esm.js';
 //# sourceMappingURL=alpha.esm.js.map

package/dist/alpha.esm.js.map

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

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

@@ -0,0 +1,67 @@
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
+import Alert from '@material-ui/lab/Alert';
+import React, { useState, useEffect } from 'react';
+import { coreComponentsTranslationRef } from '../../translation.esm.js';
+
+function AlertDisplay(props) {
+  const [messages, setMessages] = useState([]);
+  const alertApi = useApi(alertApiRef);
+  const { t } = useTranslationRef(coreComponentsTranslationRef);
+  const {
+    anchorOrigin = { vertical: "top", horizontal: "center" },
+    transientTimeoutMs
+  } = props;
+  const timeoutMs = transientTimeoutMs != null ? transientTimeoutMs : 5e3;
+  useEffect(() => {
+    const subscription = alertApi.alert$().subscribe((message) => setMessages((msgs) => msgs.concat(message)));
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [alertApi]);
+  const [firstMessage] = messages;
+  useEffect(() => {
+    if (firstMessage && firstMessage.display === "transient") {
+      const timeout = setTimeout(() => {
+        setMessages((msgs) => {
+          const newMsgs = msgs.filter((msg) => msg !== firstMessage);
+          return newMsgs.length === msgs.length ? msgs : newMsgs;
+        });
+      }, timeoutMs);
+      return () => clearTimeout(timeout);
+    }
+    return void 0;
+  }, [firstMessage, timeoutMs]);
+  if (messages.length === 0) {
+    return null;
+  }
+  const handleClose = () => {
+    setMessages((msgs) => msgs.filter((msg) => msg !== firstMessage));
+  };
+  return /* @__PURE__ */ React.createElement(Snackbar, { open: true, anchorOrigin }, /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      action: /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          color: "inherit",
+          size: "small",
+          onClick: handleClose,
+          "data-testid": "error-button-close"
+        },
+        /* @__PURE__ */ React.createElement(CloseIcon, null)
+      ),
+      severity: firstMessage.severity
+    },
+    /* @__PURE__ */ React.createElement(Typography, { component: "span" }, String(firstMessage.message), messages.length > 1 && /* @__PURE__ */ React.createElement("em", null, t("alertDisplay.message", {
+      count: messages.length - 1
+    })))
+  ));
+}
+
+export { AlertDisplay };
+//# sourceMappingURL=AlertDisplay.esm.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,169 @@
+import { useApi, identityApiRef, configApiRef } from '@backstage/core-plugin-api';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useIdleTimer, workerTimers } from 'react-idle-timer';
+import { LAST_SEEN_ONLINE_STORAGE_KEY, useLogoutDisconnectedUserEffect } from './disconnectedUsers.esm.js';
+import { StillTherePrompt } from './StillTherePrompt.esm.js';
+import { DefaultTimestampStore } from './timestampStore.esm.js';
+
+const ConditionalAutoLogout = ({
+  idleTimeoutMinutes,
+  events,
+  useWorkerTimers,
+  logoutIfDisconnected,
+  promptBeforeIdleSeconds,
+  promptOpen,
+  setPromptOpen,
+  remainingTimeCountdown,
+  setRemainingTimeCountdown,
+  identityApi,
+  lastSeenOnlineStore
+}) => {
+  const promptBeforeIdleMillis = promptBeforeIdleSeconds * 1e3;
+  const promptBeforeIdle = promptBeforeIdleMillis > 0 ? true : false;
+  const onPrompt = async () => {
+    setPromptOpen(true);
+    setRemainingTimeCountdown(promptBeforeIdleMillis);
+  };
+  const onIdle = () => {
+    setPromptOpen(false);
+    setRemainingTimeCountdown(0);
+    identityApi.signOut();
+  };
+  const onActive = () => {
+    setPromptOpen(false);
+    setRemainingTimeCountdown(0);
+  };
+  const onAction = (_event, _idleTimer) => {
+    lastSeenOnlineStore.save(/* @__PURE__ */ new Date());
+  };
+  const timer = useIdleTimer({
+    timeout: idleTimeoutMinutes * 60 * 1e3,
+    events,
+    crossTab: true,
+    name: "autologout-timer",
+    timers: useWorkerTimers ? workerTimers : void 0,
+    onIdle,
+    onActive: promptBeforeIdle ? onActive : void 0,
+    onAction: logoutIfDisconnected ? onAction : void 0,
+    onPrompt: promptBeforeIdle ? onPrompt : void 0,
+    promptBeforeIdle: promptBeforeIdle ? promptBeforeIdleMillis : void 0,
+    syncTimers: 1e3
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, promptBeforeIdle && /* @__PURE__ */ React.createElement(
+    StillTherePrompt,
+    {
+      idleTimer: timer,
+      open: promptOpen,
+      setOpen: setPromptOpen,
+      remainingTime: remainingTimeCountdown,
+      setRemainingTime: setRemainingTimeCountdown,
+      promptTimeoutMillis: promptBeforeIdleMillis
+    }
+  ));
+};
+const defaultConfig = {
+  enabled: true,
+  idleTimeoutMinutes: 0.5,
+  promptBeforeIdleSeconds: 10,
+  useWorkerTimers: true,
+  logoutIfDisconnected: true
+};
+const defaultTrackedEvents = [
+  "mousemove",
+  "keydown",
+  "wheel",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "MSPointerDown",
+  "MSPointerMove",
+  "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
+  };
+};
+const AutoLogout = (props) => {
+  const identityApi = useApi(identityApiRef);
+  const configApi = useApi(configApiRef);
+  const [isLogged, setIsLogged] = useState(false);
+  useEffect(() => {
+    async function isLoggedIn(identity) {
+      if ((await identity.getCredentials()).token) {
+        setIsLogged(true);
+      } else {
+        setIsLogged(false);
+      }
+    }
+    isLoggedIn(identityApi);
+  }, [identityApi]);
+  const {
+    enabled,
+    idleTimeoutMinutes,
+    promptBeforeIdleSeconds,
+    logoutIfDisconnected,
+    useWorkerTimers
+  } = useMemo(() => {
+    return parseConfig(configApi, props);
+  }, [configApi, props]);
+  useEffect(() => {
+    if (idleTimeoutMinutes < 0.5) {
+      throw new Error(
+        "\u274C idleTimeoutMinutes property should be >= 0.5 minutes (30 seconds)."
+      );
+    }
+    if (promptBeforeIdleSeconds < 0) {
+      throw new Error(
+        "\u274C promptBeforeIdleSeconds property should be >= 0 seconds. Set to 0 to disable the prompt."
+      );
+    }
+    if (idleTimeoutMinutes * 60 <= promptBeforeIdleSeconds) {
+      throw new Error(
+        `\u274C promptBeforeIdleSeconds should be smaller than idleTimeoutMinutes`
+      );
+    }
+  }, [idleTimeoutMinutes, promptBeforeIdleSeconds]);
+  const lastSeenOnlineStore = useMemo(
+    () => new DefaultTimestampStore(LAST_SEEN_ONLINE_STORAGE_KEY),
+    []
+  );
+  const [promptOpen, setPromptOpen] = useState(false);
+  const [remainingTimeCountdown, setRemainingTimeCountdown] = useState(0);
+  useLogoutDisconnectedUserEffect({
+    enableEffect: logoutIfDisconnected,
+    autologoutIsEnabled: enabled && isLogged,
+    idleTimeoutSeconds: idleTimeoutMinutes * 60,
+    lastSeenOnlineStore,
+    identityApi
+  });
+  if (!enabled || !isLogged) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    ConditionalAutoLogout,
+    {
+      idleTimeoutMinutes,
+      promptBeforeIdleSeconds,
+      useWorkerTimers,
+      events: defaultTrackedEvents,
+      logoutIfDisconnected,
+      promptOpen,
+      setPromptOpen,
+      remainingTimeCountdown,
+      setRemainingTimeCountdown,
+      identityApi,
+      lastSeenOnlineStore
+    }
+  );
+};
+
+export { AutoLogout };
+//# sourceMappingURL=AutoLogout.esm.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,51 @@
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import React, { useEffect } from 'react';
+import { coreComponentsTranslationRef } from '../../translation.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+
+const StillTherePrompt = (props) => {
+  const {
+    idleTimer,
+    setOpen,
+    open,
+    promptTimeoutMillis,
+    remainingTime,
+    setRemainingTime
+  } = props;
+  const { t } = useTranslationRef(coreComponentsTranslationRef);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRemainingTime(Math.ceil(idleTimer.getRemainingTime()));
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [idleTimer, setRemainingTime]);
+  const handleStillHere = () => {
+    setOpen(false);
+    idleTimer.activate();
+  };
+  const timeTillPrompt = Math.max(
+    remainingTime - promptTimeoutMillis / 1e3,
+    0
+  );
+  const seconds = timeTillPrompt > 1 ? "seconds" : "second";
+  return /* @__PURE__ */ React.createElement(Dialog, { open, "data-testid": "inactivity-prompt-dialog" }, /* @__PURE__ */ React.createElement(DialogTitle, null, t("autoLogout.stillTherePrompt.title")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, null, "You are about to be disconnected in", " ", /* @__PURE__ */ React.createElement("b", null, Math.ceil(remainingTime / 1e3), " ", seconds), ". Are you still there?")), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: handleStillHere,
+      color: "secondary",
+      variant: "contained",
+      size: "small"
+    },
+    t("autoLogout.stillTherePrompt.buttonText")
+  )));
+};
+
+export { StillTherePrompt };
+//# sourceMappingURL=StillTherePrompt.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StillTherePrompt.esm.js","sources":["../../../src/components/AutoLogout/StillTherePrompt.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport React, { useEffect } from 'react';\nimport { IIdleTimer } from 'react-idle-timer';\nimport { coreComponentsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport interface StillTherePromptProps {\n  idleTimer: IIdleTimer;\n  promptTimeoutMillis: number;\n  remainingTime: number;\n  setRemainingTime: (amount: number) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n}\n\nexport const StillTherePrompt = (props: StillTherePromptProps) => {\n  const {\n    idleTimer,\n    setOpen,\n    open,\n    promptTimeoutMillis,\n    remainingTime,\n    setRemainingTime,\n  } = props;\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setRemainingTime(Math.ceil(idleTimer.getRemainingTime()));\n    }, 500);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [idleTimer, setRemainingTime]);\n\n  const handleStillHere = () => {\n    setOpen(false);\n    idleTimer.activate();\n  };\n\n  const timeTillPrompt = Math.max(\n    remainingTime - promptTimeoutMillis / 1000,\n    0,\n  );\n  const seconds = timeTillPrompt > 1 ? 'seconds' : 'second';\n\n  return (\n    <Dialog open={open} data-testid=\"inactivity-prompt-dialog\">\n      <DialogTitle>{t('autoLogout.stillTherePrompt.title')}</DialogTitle>\n      <DialogContent>\n        <DialogContentText>\n          You are about to be disconnected in{' '}\n          <b>\n            {Math.ceil(remainingTime / 1000)} {seconds}\n          </b>\n          . Are you still there?\n        </DialogContentText>\n      </DialogContent>\n      <DialogActions>\n        <Button\n          onClick={handleStillHere}\n          color=\"secondary\"\n          variant=\"contained\"\n          size=\"small\"\n        >\n          {t('autoLogout.stillTherePrompt.buttonText')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAoCa,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,4BAA4B,CAAA,CAAA;AAE5D,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,MAAA,gBAAA,CAAiB,IAAK,CAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,EAAkB,CAAC,CAAA,CAAA;AAAA,OACvD,GAAG,CAAA,CAAA;AAEN,IAAA,OAAO,MAAM;AACX,MAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAEhC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,IAAA,SAAA,CAAU,QAAS,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,IAC1B,gBAAgB,mBAAsB,GAAA,GAAA;AAAA,IACtC,CAAA;AAAA,GACF,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,cAAiB,GAAA,CAAA,GAAI,SAAY,GAAA,QAAA,CAAA;AAEjD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,IAAY,EAAA,aAAA,EAAY,0BAC9B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAa,EAAA,IAAA,EAAA,CAAA,CAAE,mCAAmC,CAAE,CACrD,kBAAA,KAAA,CAAA,aAAA,CAAC,qCACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,EAAkB,qCACmB,EAAA,GAAA,kBACnC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EACE,IAAK,CAAA,IAAA,CAAK,gBAAgB,GAAI,CAAA,EAAE,GAAE,EAAA,OACrC,CAAI,EAAA,wBAEN,CACF,CAAA,sCACC,aACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,eAAA;AAAA,MACT,KAAM,EAAA,WAAA;AAAA,MACN,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,OAAA;AAAA,KAAA;AAAA,IAEJ,EAAE,wCAAwC,CAAA;AAAA,GAE/C,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+const LAST_SEEN_ONLINE_STORAGE_KEY = "@backstage/autologout:lastSeenOnline";
+const useLogoutDisconnectedUserEffect = ({
+  enableEffect,
+  autologoutIsEnabled,
+  idleTimeoutSeconds,
+  lastSeenOnlineStore,
+  identityApi
+}) => {
+  useEffect(() => {
+    if (autologoutIsEnabled && enableEffect) {
+      const lastSeenOnline = lastSeenOnlineStore.get();
+      if (lastSeenOnline) {
+        const now = /* @__PURE__ */ new Date();
+        const nowSeconds = Math.ceil(now.getTime() / 1e3);
+        const lastSeenOnlineSeconds = Math.ceil(
+          lastSeenOnline.getTime() / 1e3
+        );
+        if (nowSeconds - lastSeenOnlineSeconds > idleTimeoutSeconds) {
+          identityApi.signOut();
+        }
+      }
+      lastSeenOnlineStore.save(/* @__PURE__ */ new Date());
+    } else {
+      lastSeenOnlineStore.delete();
+    }
+  }, [
+    autologoutIsEnabled,
+    enableEffect,
+    identityApi,
+    idleTimeoutSeconds,
+    lastSeenOnlineStore
+  ]);
+};
+
+export { LAST_SEEN_ONLINE_STORAGE_KEY, useLogoutDisconnectedUserEffect };
+//# sourceMappingURL=disconnectedUsers.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disconnectedUsers.esm.js","sources":["../../../src/components/AutoLogout/disconnectedUsers.ts"],"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 */\nimport { IdentityApi } from '@backstage/core-plugin-api';\nimport { useEffect } from 'react';\n\nimport { TimestampStore } from './timestampStore';\n\nexport const LAST_SEEN_ONLINE_STORAGE_KEY =\n  '@backstage/autologout:lastSeenOnline';\n\nexport type UseLogoutDisconnectedUserEffectProps = {\n  enableEffect: boolean;\n  autologoutIsEnabled: boolean;\n  idleTimeoutSeconds: number;\n  lastSeenOnlineStore: TimestampStore;\n  identityApi: IdentityApi;\n};\n\nexport const useLogoutDisconnectedUserEffect = ({\n  enableEffect,\n  autologoutIsEnabled,\n  idleTimeoutSeconds,\n  lastSeenOnlineStore,\n  identityApi,\n}: UseLogoutDisconnectedUserEffectProps) => {\n  useEffect(() => {\n    /**\n     * Considers disconnected users as inactive users.\n     * If all Backstage tabs are closed and idleTimeoutMinutes are passed then logout the user anyway.\n     */\n    if (autologoutIsEnabled && enableEffect) {\n      const lastSeenOnline = lastSeenOnlineStore.get();\n      if (lastSeenOnline) {\n        const now = new Date();\n        const nowSeconds = Math.ceil(now.getTime() / 1000);\n        const lastSeenOnlineSeconds = Math.ceil(\n          lastSeenOnline.getTime() / 1000,\n        );\n        if (nowSeconds - lastSeenOnlineSeconds > idleTimeoutSeconds) {\n          identityApi.signOut();\n        }\n      }\n      /**\n       * save for the first time when app is loaded, so that\n       * if user logs in and does nothing we still have a\n       * lastSeenOnline value in store\n       */\n      lastSeenOnlineStore.save(new Date());\n    } else {\n      lastSeenOnlineStore.delete();\n    }\n  }, [\n    autologoutIsEnabled,\n    enableEffect,\n    identityApi,\n    idleTimeoutSeconds,\n    lastSeenOnlineStore,\n  ]);\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,4BACX,GAAA,uCAAA;AAUK,MAAM,kCAAkC,CAAC;AAAA,EAC9C,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AACF,CAA4C,KAAA;AAC1C,EAAA,SAAA,CAAU,MAAM;AAKd,IAAA,IAAI,uBAAuB,YAAc,EAAA;AACvC,MAAM,MAAA,cAAA,GAAiB,oBAAoB,GAAI,EAAA,CAAA;AAC/C,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAM,MAAA,GAAA,uBAAU,IAAK,EAAA,CAAA;AACrB,QAAA,MAAM,aAAa,IAAK,CAAA,IAAA,CAAK,GAAI,CAAA,OAAA,KAAY,GAAI,CAAA,CAAA;AACjD,QAAA,MAAM,wBAAwB,IAAK,CAAA,IAAA;AAAA,UACjC,cAAA,CAAe,SAAY,GAAA,GAAA;AAAA,SAC7B,CAAA;AACA,QAAI,IAAA,UAAA,GAAa,wBAAwB,kBAAoB,EAAA;AAC3D,UAAA,WAAA,CAAY,OAAQ,EAAA,CAAA;AAAA,SACtB;AAAA,OACF;AAMA,MAAoB,mBAAA,CAAA,IAAA,iBAAS,IAAA,IAAA,EAAM,CAAA,CAAA;AAAA,KAC9B,MAAA;AACL,MAAA,mBAAA,CAAoB,MAAO,EAAA,CAAA;AAAA,KAC7B;AAAA,GACC,EAAA;AAAA,IACD,mBAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,kBAAA;AAAA,IACA,mBAAA;AAAA,GACD,CAAA,CAAA;AACH;;;;"}

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

@@ -0,0 +1,18 @@
+class DefaultTimestampStore {
+  constructor(key) {
+    this.key = key;
+  }
+  save(date) {
+    localStorage.setItem(this.key, date.toJSON());
+  }
+  delete() {
+    localStorage.removeItem(this.key);
+  }
+  get() {
+    const timestamp = localStorage.getItem(this.key);
+    return timestamp !== null ? new Date(Date.parse(timestamp)) : null;
+  }
+}
+
+export { DefaultTimestampStore };
+//# sourceMappingURL=timestampStore.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timestampStore.esm.js","sources":["../../../src/components/AutoLogout/timestampStore.ts"],"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\nexport interface TimestampStore {\n  save(date: Date): void;\n  delete(): void;\n  get(): Date | null;\n}\n\nexport class DefaultTimestampStore implements TimestampStore {\n  constructor(private readonly key: string) {}\n\n  save(date: Date): void {\n    localStorage.setItem(this.key, date.toJSON());\n  }\n\n  delete(): void {\n    localStorage.removeItem(this.key);\n  }\n\n  get(): Date | null {\n    const timestamp = localStorage.getItem(this.key);\n\n    return timestamp !== null ? new Date(Date.parse(timestamp)) : null;\n  }\n}\n"],"names":[],"mappings":"AAsBO,MAAM,qBAAgD,CAAA;AAAA,EAC3D,YAA6B,GAAa,EAAA;AAAb,IAAA,IAAA,CAAA,GAAA,GAAA,GAAA,CAAA;AAAA,GAAc;AAAA,EAE3C,KAAK,IAAkB,EAAA;AACrB,IAAA,YAAA,CAAa,OAAQ,CAAA,IAAA,CAAK,GAAK,EAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AAAA,GAC9C;AAAA,EAEA,MAAe,GAAA;AACb,IAAa,YAAA,CAAA,UAAA,CAAW,KAAK,GAAG,CAAA,CAAA;AAAA,GAClC;AAAA,EAEA,GAAmB,GAAA;AACjB,IAAA,MAAM,SAAY,GAAA,YAAA,CAAa,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAE/C,IAAO,OAAA,SAAA,KAAc,OAAO,IAAI,IAAA,CAAK,KAAK,KAAM,CAAA,SAAS,CAAC,CAAI,GAAA,IAAA,CAAA;AAAA,GAChE;AACF;;;;"}

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

@@ -0,0 +1,63 @@
+import MaterialAvatar from '@material-ui/core/Avatar';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
+import { stringToColor, extractInitials } from './utils.esm.js';
+import classNames from 'classnames';
+
+const useStyles = makeStyles(
+  (theme) => ({
+    avatar: {
+      width: "4rem",
+      height: "4rem",
+      color: theme.palette.common.white,
+      backgroundColor: (props) => props.backgroundColor
+    },
+    avatarText: {
+      fontWeight: theme.typography.fontWeightBold,
+      letterSpacing: "1px",
+      textTransform: "uppercase"
+    }
+  }),
+  { name: "BackstageAvatar" }
+);
+function Avatar(props) {
+  var _a, _b;
+  const { displayName, picture, customStyles } = props;
+  const styles = { ...customStyles };
+  const fontStyles = {
+    fontFamily: styles.fontFamily,
+    fontSize: styles.fontSize,
+    fontWeight: styles.fontWeight
+  };
+  const classes = useStyles(
+    !picture ? { backgroundColor: stringToColor(displayName || "") } : {}
+  );
+  const avatarClassNames = classNames((_a = props.classes) == null ? void 0 : _a.avatar, classes.avatar);
+  const avatarTextClassNames = classNames(
+    (_b = props.classes) == null ? void 0 : _b.avatarText,
+    classes.avatarText
+  );
+  return /* @__PURE__ */ React.createElement(
+    MaterialAvatar,
+    {
+      alt: displayName,
+      src: picture,
+      className: avatarClassNames,
+      style: styles
+    },
+    displayName && /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "h6",
+        component: "span",
+        className: avatarTextClassNames,
+        style: fontStyles
+      },
+      extractInitials(displayName)
+    )
+  );
+}
+
+export { Avatar };
+//# sourceMappingURL=Avatar.esm.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,22 @@
+function stringToColor(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = hash >> i * 8 & 255;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  return color;
+}
+function extractInitials(name) {
+  var _a;
+  const names = name.trim().split(" ");
+  const firstName = (_a = names[0]) != null ? _a : "";
+  const lastName = names.length > 1 ? names[names.length - 1] : "";
+  return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
+}
+
+export { extractInitials, stringToColor };
+//# sourceMappingURL=utils.esm.js.map

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

@@ -0,0 +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;;;;"}

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

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

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

@@ -0,0 +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;;;;"}