@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.js

@@ -0,0 +1,146 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling } from '../../styles';
+import MenuLink from './MenuLink';
+import { Size } from '../../types';
+import { Button, IconButton } from '../../Button';
+import { ArrowLineLeft, Close } from '../../icons/systemicons/SystemIcons';
+import { flowDown, Right, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { ComponentSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .signOutButton {\n    height: 40px !important;\n    width: 288px !important;\n\n    ", " {\n      width: 328px !important;\n    }\n  }\n\n  ", ";\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.fixed_menu, BREAKPOINTS.SMALL, BREAKPOINTS.SMALL, scrollBarStyling(Size.Small));
+var MenuSection = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+var MenuSectionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ", ";\n"])), UserMenuSectionListStyling);
+var Top = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), COLORS.neutral_600, ComponentSStyling(ComponentTextStyle.Regular, 'inherit'));
+var LabelLine = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 32px;\n  background-color: ", ";\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n"])), COLORS.neutral_20);
+var StyledMenulink = styled(MenuLink)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  \n  & a {\n    height: 100%;\n  }\n"])));
+
+var MobileUserMenu = function MobileUserMenu(_ref) {
+  var accountMenuHeader = _ref.accountMenuHeader,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      clickMenuAction = _ref.clickMenuAction,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      signOut = _ref.signOut,
+      signOutLabel = _ref.signOutLabel;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/_jsxs(Menu, {
+    onClick: function onClick() {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(Top, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: clickMenuAction,
+        isInMobileMenu: true,
+        children: /*#__PURE__*/_jsx(ArrowLineLeft, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      }), /*#__PURE__*/_jsx("h3", {
+        children: accountMenuHeader
+      }), /*#__PURE__*/_jsx(Right, {
+        children: /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: clickMenuAction,
+          isInMobileMenu: true,
+          children: /*#__PURE__*/_jsx(Close, {
+            size: "24px"
+          })
+        })
+      })]
+    }, "MobileUserMenuTopSection"), accountSection && (accountSection === null || accountSection === void 0 ? void 0 : accountSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(LabelLine, {
+        "data-hj-suppress": true,
+        children: "".concat(firstName, " ").concat(lastName)
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: accountSection === null || accountSection === void 0 ? void 0 : accountSection.map(function (element) {
+          return /*#__PURE__*/_jsx(StyledMenulink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileAccountSection"), organizationSection && (organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(LabelLine, {
+        children: organizationName || ''
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.map(function (element) {
+          return /*#__PURE__*/_jsx(StyledMenulink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MObileOrganizationSection"), supportSection && (supportSection === null || supportSection === void 0 ? void 0 : supportSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(LabelLine, {
+        children: ''
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: supportSection === null || supportSection === void 0 ? void 0 : supportSection.map(function (element) {
+          return /*#__PURE__*/_jsx(StyledMenulink, {
+            isExternal: element.isExternal,
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileSupportSection"), signOut && /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        margin: 'auto 0 12px 0'
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        style: {
+          width: '90%',
+          margin: '0 auto'
+        },
+        variant: "secondary",
+        onClick: function onClick(e) {
+          e.preventDefault();
+          signOut(e);
+        },
+        children: signOutLabel
+      })
+    }, "SignoutButton")]
+  });
+};
+
+MobileUserMenu.propTypes = {
+  accountMenuHeader: _pt.string.isRequired,
+  firstName: _pt.string.isRequired,
+  lastName: _pt.string.isRequired,
+  email: _pt.string.isRequired,
+  organizationName: _pt.string.isRequired,
+  clickMenuAction: _pt.func.isRequired,
+  accountSection: _pt.array,
+  organizationSection: _pt.array,
+  supportSection: _pt.array,
+  signOut: _pt.func,
+  signOutLabel: _pt.string
+};
+export default MobileUserMenu;
+//# sourceMappingURL=MobileUserMenu.js.map

package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","MenuLink","Size","Button","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","ComponentSStyling","Z_INDEXES","Menu","ul","white","fixed_menu","SMALL","Small","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","StyledMenulink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","isExternal","display","margin","width","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../../styles';\r\n\r\nimport MenuLink from './MenuLink';\r\nimport {Size, UserMenuItem} from '../../types';\r\nimport {Button, IconButton} from '../../Button';\r\nimport {ArrowLineLeft, Close} from '../../icons/systemicons/SystemIcons';\r\nimport {flowDown, Right, UserMenuSectionListStyling} from '../mobile/CommonStyles';\r\nimport {ComponentSStyling} from '../../styles/typography';\r\nimport {Z_INDEXES} from '../../styles/z-indexes';\r\n\r\nconst Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\r\n  animation: ${flowDown} 0.2s ease-in-out;\r\n  position: absolute;\r\n  border-radius: 4px;\r\n  z-index: ${Z_INDEXES.fixed_menu};\r\n  height: 100%;\r\n  width: 320px;\r\n  padding-inline-start: 0;\r\n  overflow-y: scroll;\r\n  ${BREAKPOINTS.SMALL} {\r\n    min-width: 360px;\r\n  }\r\n\r\n  .open & {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .signOutButton {\r\n    height: 40px !important;\r\n    width: 288px !important;\r\n\r\n    ${BREAKPOINTS.SMALL} {\r\n      width: 328px !important;\r\n    }\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)};\r\n`;\r\n\r\nconst MenuSection = styled.li`\r\n  padding: 8px 0;\r\n  position: relative;\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nconst MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  overflow-y: unset !important;\r\n  padding-inline-start: 0;\r\n  ${UserMenuSectionListStyling};\r\n`;\r\n\r\nconst Top = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 22px 12px 0 12px;\r\n  color: ${COLORS.neutral_600};\r\n\r\n  h3 {\r\n    margin-block-start: 0 !important;\r\n    margin-block-end: 0 !important;\r\n    margin-inline-start: 0;\r\n    margin-inline-end: 0;\r\n    margin-left: 24px;\r\n\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n  }\r\n`;\r\n\r\nconst LabelLine = styled.span`\r\n  height: 32px;\r\n  background-color: ${COLORS.neutral_20};\r\n  padding-left: 24px;\r\n  display: flex;\r\n  line-height: 32px;\r\n`;\r\n\r\nconst StyledMenulink = styled(MenuLink)`\r\n  width: 100%;\r\n  height: 48px;\r\n  margin: 0;\r\n  \r\n  & a {\r\n    height: 100%;\r\n  }\r\n`;\r\n\r\ninterface Props {\r\n  accountMenuHeader: string;\r\n  firstName: string;\r\n  lastName: string;\r\n  email: string;\r\n  organizationName: string;\r\n  clickMenuAction: () => void;\r\n  accountSection?: UserMenuItem[];\r\n  organizationSection?: UserMenuItem[];\r\n  supportSection?: UserMenuItem[];\r\n  signOut?: (e: any) => void;\r\n  signOutLabel?: string;\r\n}\r\n\r\nconst MobileUserMenu = ({\r\n  accountMenuHeader,\r\n  firstName,\r\n  lastName,\r\n  email,\r\n  organizationName,\r\n  clickMenuAction,\r\n  accountSection,\r\n  organizationSection,\r\n  supportSection,\r\n  signOut,\r\n  signOutLabel,\r\n}: Props) => {\r\n  React.useEffect(() => {\r\n    function handleKeyPress(e: any) {\r\n      if (e.keyCode === 27) {\r\n        clickMenuAction();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [clickMenuAction]);\r\n\r\n  return (\r\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <Top key=\"MobileUserMenuTopSection\">\r\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\r\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\r\n        </IconButton>\r\n        <h3>{accountMenuHeader}</h3>\r\n        <Right>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\r\n            <Close size=\"24px\" />\r\n          </IconButton>\r\n        </Right>\r\n      </Top>\r\n      {accountSection && accountSection?.length > 0 && (\r\n        <MenuSection key=\"MobileAccountSection\">\r\n          <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\r\n          <MenuSectionList>\r\n            {accountSection?.map((element) => (\r\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\r\n            ))}\r\n          </MenuSectionList>\r\n        </MenuSection>\r\n      )}\r\n      {organizationSection && organizationSection?.length > 0 && (\r\n        <MenuSection key=\"MObileOrganizationSection\">\r\n          <LabelLine>{organizationName || ''}</LabelLine>\r\n          <MenuSectionList>\r\n            {organizationSection?.map((element) => (\r\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\r\n            ))}\r\n          </MenuSectionList>\r\n        </MenuSection>\r\n      )}\r\n\r\n      {supportSection && supportSection?.length > 0 && (\r\n        <MenuSection key=\"MobileSupportSection\">\r\n          <LabelLine>{''}</LabelLine>\r\n          <MenuSectionList>\r\n            {supportSection?.map((element) => (\r\n              <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\r\n            ))}\r\n          </MenuSectionList>\r\n        </MenuSection>\r\n      )}\r\n      {signOut && (\r\n        <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\r\n          <Button\r\n            style={{ width: '90%', margin: '0 auto' }}\r\n            variant=\"secondary\"\r\n            onClick={(e) => {\r\n              e.preventDefault();\r\n              signOut(e);\r\n            }}>\r\n            {signOutLabel}\r\n          </Button>\r\n        </div>\r\n      )}\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default MobileUserMenu;\r\n"],"file":"MobileUserMenu.js"}

package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = require("../../Button");
+
+var _styles = require("../../styles");
+
+var _Avatar = _interopRequireWildcard(require("../Avatar"));
+
+var _MenuLink = _interopRequireDefault(require("./MenuLink"));
+
+var _types = require("../../types");
+
+var _CommonStyles = require("../mobile/CommonStyles");
+
+var _typography = require("../../styles/typography");
+
+var _zIndexes = require("../../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ", ";\n  z-index: ", ";\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.COLORS.neutral_200, _zIndexes.Z_INDEXES.fixed_menu);
+
+var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), _styles.COLORS.neutral_100);
+
+var MenuSectionList = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), _CommonStyles.UserMenuSectionListStyling);
+
+var StyledAvatarContainer = (0, _styledComponents.default)(_Avatar.AvatarContainer)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n"])));
+
+var AvatarAndName = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ", "\n  }\n  span {\n    margin: 0 0 0 20px;\n    ", "\n  }\n"])), (0, _typography.HeadlineXXSStyling)(_styles.COLORS.neutral_600), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+
+var NameAndEmail = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var OrganizationName = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 25px;\n  ", "\n"])), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var UserMenu = function UserMenu(_ref) {
+  var firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      clickMenuAction = _ref.clickMenuAction,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      signOut = _ref.signOut,
+      signOutLabel = _ref.signOutLabel;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
+    onClick: clickMenuAction,
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarAndName, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAvatarContainer, {
+        hidePadding: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          size: 48,
+          firstName: firstName,
+          lastName: lastName,
+          color: _styles.COLORS.primary_500,
+          profileMenuLink: "#TODO"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(NameAndEmail, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          "data-hj-suppress": true,
+          children: "".concat(firstName, " ").concat(lastName)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          "data-hj-suppress": true,
+          children: email
+        })]
+      })]
+    }, "AvatarAndNameSection"), accountSection && (accountSection === null || accountSection === void 0 ? void 0 : accountSection.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: accountSection === null || accountSection === void 0 ? void 0 : accountSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuLink.default, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })
+    }, "MobileAccountSection"), organizationSection && (organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OrganizationName, {
+        children: organizationName || ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuLink.default, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileOrganizationSection"), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSectionList, {
+        children: [supportSection === null || supportSection === void 0 ? void 0 : supportSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuLink.default, {
+            isExternal: element.isExternal,
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        }), signOut && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+          width: "90%",
+          className: "UserMenuLink sign-out",
+          variant: "secondary",
+          size: _types.Size.Large,
+          onClick: function onClick(e) {
+            e.preventDefault();
+            signOut(e);
+          },
+          children: signOutLabel
+        })]
+      })
+    }, "MobileSupportSection")]
+  });
+};
+
+UserMenu.propTypes = {
+  firstName: _propTypes.default.string.isRequired,
+  lastName: _propTypes.default.string.isRequired,
+  email: _propTypes.default.string.isRequired,
+  organizationName: _propTypes.default.string.isRequired,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  accountSection: _propTypes.default.array,
+  organizationSection: _propTypes.default.array,
+  supportSection: _propTypes.default.array,
+  signOut: _propTypes.default.func,
+  signOutLabel: _propTypes.default.string
+};
+var _default = UserMenu;
+exports.default = _default;
+//# sourceMappingURL=UserMenu.cjs.map

package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","Z_INDEXES","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","UserMenuSectionListStyling","StyledAvatarContainer","AvatarContainer","AvatarAndName","div","neutral_600","ComponentTextStyle","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Size","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Button} from '../../Button';\r\nimport {COLORS, ComponentTextStyle} from '../../styles';\r\nimport Avatar, {AvatarContainer} from '../Avatar';\r\nimport MenuLink from './MenuLink';\r\nimport { UserMenuItem, Size } from '../../types';\r\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\r\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\r\nimport {Z_INDEXES} from '../../styles/z-indexes';\r\n\r\nconst Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  min-width: 312px;\r\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\r\n  animation: ${flowDown} 0.2s ease-in-out;\r\n  position: absolute;\r\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  border: 1px solid ${COLORS.neutral_200};\r\n  z-index: ${Z_INDEXES.fixed_menu};\r\n\r\n  .open & {\r\n    display: block;\r\n  }\r\n  \r\n  .sign-out{\r\n    width: 90%;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin: 8px auto 12px auto;\r\n  }\r\n`;\r\n\r\nconst MenuSection = styled.li`\r\n  padding: 8px 0;\r\n  position: relative;\r\n\r\n  &:not(:first-of-type)::before {\r\n    content: '';\r\n    position: absolute;\r\n    background: ${COLORS.neutral_100};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nconst MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  ${UserMenuSectionListStyling};\r\n`;\r\n\r\nconst StyledAvatarContainer = styled(AvatarContainer)`\r\n  margin: 25px 0 0 25px;\r\n  pointer-events: none;\r\n`;\r\n\r\nconst AvatarAndName = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  h5 {\r\n    margin: 28px 0 0 20px;\r\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\r\n  }\r\n  span {\r\n    margin: 0 0 0 20px;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  }\r\n`;\r\n\r\nconst NameAndEmail = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n\r\nconst OrganizationName = styled.span`\r\n  margin-left: 25px;\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n`;\r\n\r\ninterface Props {\r\n  firstName: string;\r\n  lastName: string;\r\n  email: string;\r\n  organizationName: string;\r\n  clickMenuAction: () => void;\r\n  accountSection?: UserMenuItem[];\r\n  organizationSection?: UserMenuItem[];\r\n  supportSection?: UserMenuItem[];\r\n  signOut?: (e: any) => void;\r\n  signOutLabel?: string;\r\n}\r\n\r\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\r\n  React.useEffect(() => {\r\n    function handleKeyPress(e: any) {\r\n      if (e.keyCode === 27) {\r\n        clickMenuAction();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [clickMenuAction]);\r\n\r\n  return (\r\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <AvatarAndName key=\"AvatarAndNameSection\">\r\n        <StyledAvatarContainer hidePadding={true}>\r\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\r\n        </StyledAvatarContainer>\r\n        <NameAndEmail>\r\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\r\n          <span data-hj-suppress>{email}</span>\r\n        </NameAndEmail>\r\n      </AvatarAndName>\r\n      {accountSection && accountSection?.length > 0 && (\r\n        <MenuSection key=\"MobileAccountSection\">\r\n          <MenuSectionList>\r\n            {accountSection?.map(element => (\r\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\r\n            ))}\r\n          </MenuSectionList>\r\n        </MenuSection>\r\n      )}\r\n\r\n      {organizationSection && organizationSection?.length > 0 && (\r\n        <MenuSection key=\"MobileOrganizationSection\">\r\n          <OrganizationName>{organizationName || ''}</OrganizationName>\r\n          <MenuSectionList>\r\n            {organizationSection?.map(element => (\r\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\r\n            ))}\r\n          </MenuSectionList>\r\n        </MenuSection>\r\n      )}\r\n\r\n      <MenuSection key=\"MobileSupportSection\">\r\n        <MenuSectionList>\r\n          {supportSection?.map(element => (\r\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\r\n          ))}\r\n          {signOut && (\r\n            <Button\r\n              width=\"90%\"\r\n              className=\"UserMenuLink sign-out\"\r\n              variant=\"secondary\"\r\n              size={Size.Large}\r\n              onClick={e => {\r\n                e.preventDefault();\r\n                signOut(e);\r\n              }}>\r\n              {signOutLabel}\r\n            </Button>\r\n          )}\r\n        </MenuSectionList>\r\n      </MenuSection>\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default UserMenu;\r\n"],"file":"UserMenu.cjs"}

package/dist/GlobalNavigationBar/UserMenu/UserMenu.d.ts

@@ -0,0 +1,15 @@
+import { UserMenuItem } from '../../types';
+interface Props {
+    firstName: string;
+    lastName: string;
+    email: string;
+    organizationName: string;
+    clickMenuAction: () => void;
+    accountSection?: UserMenuItem[];
+    organizationSection?: UserMenuItem[];
+    supportSection?: UserMenuItem[];
+    signOut?: (e: any) => void;
+    signOutLabel?: string;
+}
+declare const UserMenu: ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => JSX.Element;
+export default UserMenu;

package/dist/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -0,0 +1,135 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '../../Button';
+import { COLORS, ComponentTextStyle } from '../../styles';
+import Avatar, { AvatarContainer } from '../Avatar';
+import MenuLink from './MenuLink';
+import { Size } from '../../types';
+import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { ComponentXSStyling, HeadlineXXSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ", ";\n  z-index: ", ";\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n"])), COLORS.white, flowDown, flowDown, COLORS.neutral_200, Z_INDEXES.fixed_menu);
+var MenuSection = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), COLORS.neutral_100);
+var MenuSectionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
+var StyledAvatarContainer = styled(AvatarContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n"])));
+var AvatarAndName = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ", "\n  }\n  span {\n    margin: 0 0 0 20px;\n    ", "\n  }\n"])), HeadlineXXSStyling(COLORS.neutral_600), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var NameAndEmail = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var OrganizationName = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: 25px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+
+var UserMenu = function UserMenu(_ref) {
+  var firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      clickMenuAction = _ref.clickMenuAction,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      signOut = _ref.signOut,
+      signOutLabel = _ref.signOutLabel;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/_jsxs(Menu, {
+    onClick: clickMenuAction,
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(AvatarAndName, {
+      children: [/*#__PURE__*/_jsx(StyledAvatarContainer, {
+        hidePadding: true,
+        children: /*#__PURE__*/_jsx(Avatar, {
+          size: 48,
+          firstName: firstName,
+          lastName: lastName,
+          color: COLORS.primary_500,
+          profileMenuLink: "#TODO"
+        })
+      }), /*#__PURE__*/_jsxs(NameAndEmail, {
+        children: [/*#__PURE__*/_jsx("h5", {
+          "data-hj-suppress": true,
+          children: "".concat(firstName, " ").concat(lastName)
+        }), /*#__PURE__*/_jsx("span", {
+          "data-hj-suppress": true,
+          children: email
+        })]
+      })]
+    }, "AvatarAndNameSection"), accountSection && (accountSection === null || accountSection === void 0 ? void 0 : accountSection.length) > 0 && /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsx(MenuSectionList, {
+        children: accountSection === null || accountSection === void 0 ? void 0 : accountSection.map(function (element) {
+          return /*#__PURE__*/_jsx(MenuLink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })
+    }, "MobileAccountSection"), organizationSection && (organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(OrganizationName, {
+        children: organizationName || ''
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.map(function (element) {
+          return /*#__PURE__*/_jsx(MenuLink, {
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        })
+      })]
+    }, "MobileOrganizationSection"), /*#__PURE__*/_jsx(MenuSection, {
+      children: /*#__PURE__*/_jsxs(MenuSectionList, {
+        children: [supportSection === null || supportSection === void 0 ? void 0 : supportSection.map(function (element) {
+          return /*#__PURE__*/_jsx(MenuLink, {
+            isExternal: element.isExternal,
+            to: element === null || element === void 0 ? void 0 : element.to,
+            menuText: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element === null || element === void 0 ? void 0 : element.icon,
+            onClick: element === null || element === void 0 ? void 0 : element.onClick
+          }, element === null || element === void 0 ? void 0 : element.to);
+        }), signOut && /*#__PURE__*/_jsx(Button, {
+          width: "90%",
+          className: "UserMenuLink sign-out",
+          variant: "secondary",
+          size: Size.Large,
+          onClick: function onClick(e) {
+            e.preventDefault();
+            signOut(e);
+          },
+          children: signOutLabel
+        })]
+      })
+    }, "MobileSupportSection")]
+  });
+};
+
+UserMenu.propTypes = {
+  firstName: _pt.string.isRequired,
+  lastName: _pt.string.isRequired,
+  email: _pt.string.isRequired,
+  organizationName: _pt.string.isRequired,
+  clickMenuAction: _pt.func.isRequired,
+  accountSection: _pt.array,
+  organizationSection: _pt.array,
+  supportSection: _pt.array,
+  signOut: _pt.func,
+  signOutLabel: _pt.string
+};
+export default UserMenu;
+//# sourceMappingURL=UserMenu.js.map

package/dist/GlobalNavigationBar/UserMenu/UserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Z_INDEXES","Menu","ul","white","neutral_200","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Button} from '../../Button';\r\nimport {COLORS, ComponentTextStyle} from '../../styles';\r\nimport Avatar, {AvatarContainer} from '../Avatar';\r\nimport MenuLink from './MenuLink';\r\nimport { UserMenuItem, Size } from '../../types';\r\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\r\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\r\nimport {Z_INDEXES} from '../../styles/z-indexes';\r\n\r\nconst Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  min-width: 312px;\r\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\r\n  animation: ${flowDown} 0.2s ease-in-out;\r\n  position: absolute;\r\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  border: 1px solid ${COLORS.neutral_200};\r\n  z-index: ${Z_INDEXES.fixed_menu};\r\n\r\n  .open & {\r\n    display: block;\r\n  }\r\n  \r\n  .sign-out{\r\n    width: 90%;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin: 8px auto 12px auto;\r\n  }\r\n`;\r\n\r\nconst MenuSection = styled.li`\r\n  padding: 8px 0;\r\n  position: relative;\r\n\r\n  &:not(:first-of-type)::before {\r\n    content: '';\r\n    position: absolute;\r\n    background: ${COLORS.neutral_100};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nconst MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  ${UserMenuSectionListStyling};\r\n`;\r\n\r\nconst StyledAvatarContainer = styled(AvatarContainer)`\r\n  margin: 25px 0 0 25px;\r\n  pointer-events: none;\r\n`;\r\n\r\nconst AvatarAndName = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  h5 {\r\n    margin: 28px 0 0 20px;\r\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\r\n  }\r\n  span {\r\n    margin: 0 0 0 20px;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  }\r\n`;\r\n\r\nconst NameAndEmail = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n\r\nconst OrganizationName = styled.span`\r\n  margin-left: 25px;\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n`;\r\n\r\ninterface Props {\r\n  firstName: string;\r\n  lastName: string;\r\n  email: string;\r\n  organizationName: string;\r\n  clickMenuAction: () => void;\r\n  accountSection?: UserMenuItem[];\r\n  organizationSection?: UserMenuItem[];\r\n  supportSection?: UserMenuItem[];\r\n  signOut?: (e: any) => void;\r\n  signOutLabel?: string;\r\n}\r\n\r\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\r\n  React.useEffect(() => {\r\n    function handleKeyPress(e: any) {\r\n      if (e.keyCode === 27) {\r\n        clickMenuAction();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [clickMenuAction]);\r\n\r\n  return (\r\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <AvatarAndName key=\"AvatarAndNameSection\">\r\n        <StyledAvatarContainer hidePadding={true}>\r\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\r\n        </StyledAvatarContainer>\r\n        <NameAndEmail>\r\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\r\n          <span data-hj-suppress>{email}</span>\r\n        </NameAndEmail>\r\n      </AvatarAndName>\r\n      {accountSection && accountSection?.length > 0 && (\r\n        <MenuSection key=\"MobileAccountSection\">\r\n          <MenuSectionList>\r\n            {accountSection?.map(element => (\r\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\r\n            ))}\r\n          </MenuSectionList>\r\n        </MenuSection>\r\n      )}\r\n\r\n      {organizationSection && organizationSection?.length > 0 && (\r\n        <MenuSection key=\"MobileOrganizationSection\">\r\n          <OrganizationName>{organizationName || ''}</OrganizationName>\r\n          <MenuSectionList>\r\n            {organizationSection?.map(element => (\r\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\r\n            ))}\r\n          </MenuSectionList>\r\n        </MenuSection>\r\n      )}\r\n\r\n      <MenuSection key=\"MobileSupportSection\">\r\n        <MenuSectionList>\r\n          {supportSection?.map(element => (\r\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\r\n          ))}\r\n          {signOut && (\r\n            <Button\r\n              width=\"90%\"\r\n              className=\"UserMenuLink sign-out\"\r\n              variant=\"secondary\"\r\n              size={Size.Large}\r\n              onClick={e => {\r\n                e.preventDefault();\r\n                signOut(e);\r\n              }}>\r\n              {signOutLabel}\r\n            </Button>\r\n          )}\r\n        </MenuSectionList>\r\n      </MenuSection>\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default UserMenu;\r\n"],"file":"UserMenu.js"}

package/dist/GlobalNavigationBar/__tests__/GlobalNavigationBar.tests.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/GlobalNavigationBar/__tests__/Logo.tests.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","ProfileWrapper","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper role=\"toolbar\" aria-label=\"Toolbar\">\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
+{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","ProfileWrapper","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\r\nimport {IconButton} from '../../Button';\r\nimport {ProfileButton} from '../../ProfileButton';\r\nimport {SystemIcons} from '../../icons';\r\nimport {BREAKPOINTS} from '../../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  align-items: center;\r\n\r\n  display: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n  }\r\n`;\r\n\r\nconst ProfileWrapper = styled.div`\r\n  margin: 0 8px;\r\n`;\r\n\r\n\r\ninterface DesktopActionsProps {\r\n  buttons?: DesktopMenuButtonTypes[];\r\n  user?: MenuAccountInfo;\r\n  profileComponent?: React.ReactNode\r\n  onShowUserMenu: () => void;\r\n}\r\n\r\nexport interface DesktopActionsRef {\r\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\r\n}\r\n\r\nconst  DesktopActions = React.forwardRef(({\r\n                                           buttons,\r\n                                           user,\r\n                                            profileComponent,\r\n                                           onShowUserMenu\r\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n\r\n  const length = buttons?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => ({\r\n    buttons: elRefs.map((r, index) => ({\r\n      ref: r,\r\n      type: buttons?.[index]?.type,\r\n    }))\r\n  }), [elRefs, buttons]);\r\n\r\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\r\n    switch (item.type) {\r\n      case 'profile': {\r\n        const {placement, type, action, ...rest} = item;\r\n        if(!!profileComponent)\r\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\r\n        else\r\n          return <ProfileWrapper>\r\n            <ProfileButton key={index}\r\n                           ref={elRefs[index]}\r\n                           hideOnLowWidth={true}\r\n                           onClick={e => {\r\n                             item.action ? item.action(e?.target) : onShowUserMenu()\r\n                           }}\r\n                           icon={!user && <SystemIcons.User/>}\r\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\r\n                           {...rest}/>\r\n          </ProfileWrapper>\r\n      }\r\n      case 'action': {\r\n        const {placement, type, icon, action, ...rest} = item;\r\n        return <IconButton key={index}\r\n                           ref={elRefs[index]}\r\n                           variant={'secondary'}\r\n                           shape={'circular'}\r\n                           hideOnLowWidth={true}\r\n                           action={e => item.action && item.action(e?.target)}\r\n                           {...rest}>\r\n          {item.icon}\r\n        </IconButton>\r\n      }\r\n      case 'switcher': {\r\n        const {placement, type, action, ...rest} = item;\r\n        return <IconButton key={index}\r\n                           ref={elRefs[index]}\r\n                           variant={'secondary'}\r\n                           shape={'circular'}\r\n                           hideOnLowWidth={true}\r\n                           id=\"globalNavAppsButton\"\r\n                           action={e => item.action && item.action(e?.target)}\r\n                           {...rest}>\r\n          <SystemIcons.SwitchApp size=\"24px\"/>\r\n        </IconButton>\r\n      }\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper role=\"toolbar\" aria-label=\"Toolbar\">\r\n      {buttons?.map((item, index) => renderItem(item, index))}\r\n    </Wrapper>\r\n  )\r\n});\r\n\r\n\r\nexport default DesktopActions;\r\n"],"mappings":"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"}