@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/esm/GlobalNavigationBar/RightSideNav.js

@@ -0,0 +1,81 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { NavItem } from '../NavItem';
+import { BREAKPOINTS, ComponentTextStyle } from '../styles';
+import { Button } from '../Button';
+import { ComponentMStyling } from '../styles/typography';
+const NavContainer = styled.div`
+  display: flex;
+  margin: auto 0 auto auto;
+  align-items: center;
+  height: 48px;
+  
+  a {
+    text-decoration: none;
+  }
+
+  ${BREAKPOINTS.SMALL} {
+    height: 56px;
+  }
+  ${BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+
+  button,
+  div {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`;
+const SecondaryButton = styled(Button)`
+  height: 40px;
+  margin: 0 8px;
+
+  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}
+`;
+
+const RightSideNav = ({
+  navigationOptions,
+  secondaryButton
+}) => {
+  const preventFocusOnClick = e => {
+    e.preventDefault();
+  };
+
+  const getNavItem = navOption => {
+    if (navOption?.disabled) {
+      return /*#__PURE__*/React.createElement(NavItem, {
+        as: Button,
+        className: "disabled",
+        key: navOption?.label
+      }, navOption?.label);
+    } else {
+      return /*#__PURE__*/React.createElement(NavItem, {
+        as: NavLink,
+        exact: navOption?.exact,
+        to: navOption?.to || '',
+        key: navOption?.label,
+        onMouseDown: preventFocusOnClick,
+        onClick: () => {
+          if (navOption?.onClick) {
+            navOption?.onClick();
+          }
+        }
+      }, navOption?.label);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(NavContainer, null, navigationOptions?.reverse().map(no => getNavItem(no)), secondaryButton && /*#__PURE__*/React.createElement(SecondaryButton, {
+    variant: "secondary",
+    onClick: secondaryButton?.action
+  }, secondaryButton.label));
+};
+
+RightSideNav.propTypes = {
+  navigationOptions: _pt.array
+};
+export default RightSideNav;
+//# sourceMappingURL=RightSideNav.js.map

package/dist/esm/GlobalNavigationBar/RightSideNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIL,WAAW,CAACM,KAAM;AACtB;AACA;AACA,IAAIN,WAAW,CAACO,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBA;AAyBA,MAAMC,eAAe,GAAGX,MAAM,CAACK,MAAD,CAAS;AACvC;AACA;AACA;AACA,IAAIC,iBAAiB,CAACF,kBAAkB,CAACQ,IAApB,EAA0B,OAA1B,CAAmC;AACxD,CALA;;AAYA,MAAMC,YAAY,GAAG,CAAC;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,CAAD,KAA8E;AACjG,QAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,QAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,QAAIA,SAAS,EAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,OAAD;AAAS,QAAA,EAAE,EAAEhB,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,EAAEe,SAAS,EAAEE;AAA1D,SACGF,SAAS,EAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,OAAD;AACE,QAAA,EAAE,EAAErB,OADN;AAEE,QAAA,KAAK,EAAEmB,SAAS,EAAEG,KAFpB;AAGE,QAAA,EAAE,EAAEH,SAAS,EAAEI,EAAX,IAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEJ,SAAS,EAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,MAAM;AACb,cAAII,SAAS,EAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,EAAEK,OAAX;AACD;AACF;AAVH,SAWGL,SAAS,EAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBAAiB,EAAEY,OAAnB,GAA6BC,GAA7B,CAAiCC,EAAE,IAAIT,UAAU,CAACS,EAAD,CAAjD,CADH,EAGGb,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAe,EAAEc;AAA/D,KACGd,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\n\r\nimport {NavItem} from '../NavItem';\r\nimport {NavButton, NavOption} from '../types';\r\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\r\nimport {Button} from '../Button';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst NavContainer = styled.div`\r\n  display: flex;\r\n  margin: auto 0 auto auto;\r\n  align-items: center;\r\n  height: 48px;\r\n  \r\n  a {\r\n    text-decoration: none;\r\n  }\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: 56px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    height: 64px;\r\n  }\r\n\r\n  button,\r\n  div {\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n`;\r\n\r\nconst SecondaryButton = styled(Button)`\r\n  height: 40px;\r\n  margin: 0 8px;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\r\n`;\r\n\r\ntype Props = {\r\n  navigationOptions?: NavOption[];\r\n  secondaryButton?: NavButton;\r\n};\r\n\r\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\r\n  const preventFocusOnClick = (e: any) => {\r\n    e.preventDefault();\r\n  };\r\n  const getNavItem = (navOption: NavOption) => {\r\n    if (navOption?.disabled) {\r\n      return (\r\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\r\n          {navOption?.label}\r\n        </NavItem>\r\n      );\r\n    } else {\r\n      return (\r\n        <NavItem\r\n          as={NavLink}\r\n          exact={navOption?.exact}\r\n          to={navOption?.to || ''}\r\n          key={navOption?.label}\r\n          onMouseDown={preventFocusOnClick}\r\n          onClick={() => {\r\n            if (navOption?.onClick) {\r\n              navOption?.onClick();\r\n            }\r\n          }}>\r\n          {navOption?.label}\r\n        </NavItem>\r\n      );\r\n    }\r\n  };\r\n  return (\r\n    <NavContainer>\r\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\r\n\r\n      {secondaryButton && (\r\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\r\n          {secondaryButton.label}\r\n        </SecondaryButton>\r\n      )}\r\n    </NavContainer>\r\n  );\r\n};\r\n\r\nexport default RightSideNav;\r\n"],"file":"RightSideNav.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js

@@ -0,0 +1,92 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { COLORS, ComponentTextStyle } from '../../styles';
+import { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';
+import { ComponentMStyling } from '../../styles/typography';
+const LinkStyles = css`
+  border: none;
+  background: transparent;
+  padding: 16px 25px;
+
+  text-decoration: none;
+  text-align: left;
+  align-items: center;
+  display: flex;
+
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+  svg {
+    margin-right: 15px;
+    color: ${COLORS.neutral_600};
+  }
+`;
+const InternalLink = styled(NavLink)`
+  ${LinkStyles};
+`;
+const ExternalLink = styled.a`
+  ${LinkStyles};
+`;
+const IconsRightSide = styled.div`
+  margin: 0 0 0 auto;
+  align-items: center;
+  svg {
+    margin-right: 0;
+  }
+`;
+
+const MenuLink = ({
+  to,
+  isExternal,
+  menuText,
+  Icon,
+  notification,
+  extendedMenu,
+  onClick
+}) => {
+  const getRightSide = () => /*#__PURE__*/React.createElement(IconsRightSide, null, notification ? /*#__PURE__*/React.createElement(Bullet, {
+    size: "24px",
+    color: COLORS.critical_500
+  }) : null, extendedMenu ? /*#__PURE__*/React.createElement(ChevronRight, {
+    size: "24px",
+    color: COLORS.neutral_600
+  }) : null);
+
+  return /*#__PURE__*/React.createElement("li", null, isExternal ? /*#__PURE__*/React.createElement(ExternalLink, {
+    key: `ExternalLink_${to}`,
+    href: to,
+    role: "menuitem",
+    className: "UserMenuLink",
+    onClick: () => {
+      if (onClick) {
+        onClick();
+      }
+    }
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    size: "24px"
+  }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()) : /*#__PURE__*/React.createElement(InternalLink, {
+    key: `InternalLink_${to}`,
+    to: to,
+    role: "menuitem",
+    className: "UserMenuLink",
+    onClick: () => {
+      if (onClick) {
+        onClick();
+      }
+    }
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    size: "24px"
+  }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()));
+};
+
+MenuLink.propTypes = {
+  to: _pt.string.isRequired,
+  menuText: _pt.string.isRequired,
+  isExternal: _pt.bool,
+  Icon: _pt.any,
+  notification: _pt.bool,
+  extendedMenu: _pt.bool,
+  onClick: _pt.func
+};
+export default MenuLink;
+//# sourceMappingURL=MenuLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AAEA,MAAMC,UAAU,GAAGP,GAAI;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIM,iBAAiB,CAACH,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA,aAAaP,MAAM,CAACO,WAAY;AAChC;AACA,CAfA;AAiBA,MAAMC,YAAY,GAAGX,MAAM,CAACE,OAAD,CAAU;AACrC,IAAIM,UAAW;AACf,CAFA;AAIA,MAAMI,YAAY,GAAGZ,MAAM,CAACa,CAAE;AAC9B,IAAIL,UAAW;AACf,CAFA;AAIA,MAAMM,cAAc,GAAGd,MAAM,CAACe,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA,CANA;;AAkBA,MAAMC,QAAQ,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,UAAN;AAAkBC,EAAAA,QAAlB;AAA4BC,EAAAA,IAA5B;AAAkCC,EAAAA,YAAlC;AAAgDC,EAAAA,YAAhD;AAA8DC,EAAAA;AAA9D,CAAD,KAA4F;AAC3G,QAAMC,YAAY,GAAG,mBACnB,oBAAC,cAAD,QACGH,YAAY,gBAAG,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC,MAAb;AAAoB,IAAA,KAAK,EAAElB,MAAM,CAACsB;AAAlC,IAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,MAAnB;AAA0B,IAAA,KAAK,EAAEnB,MAAM,CAACO;AAAxC,IAAH,GAA6D,IAF5E,CADF;;AAMA,sBACE,gCACGQ,UAAU,gBACT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeD,EAAG,EAD1B;AAEE,IAAA,IAAI,EAAEA,EAFR;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CADS,gBAgBT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeP,EAAG,EAD1B;AAEE,IAAA,EAAE,EAAEA,EAFN;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CAjBJ,CADF;AAmCD,CA1CD;;;AATEP,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AA+CF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {COLORS, ComponentTextStyle} from '../../styles';\r\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\r\nimport {ComponentMStyling} from '../../styles/typography';\r\n\r\nconst LinkStyles = css`\r\n  border: none;\r\n  background: transparent;\r\n  padding: 16px 25px;\r\n\r\n  text-decoration: none;\r\n  text-align: left;\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  svg {\r\n    margin-right: 15px;\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n`;\r\n\r\nconst InternalLink = styled(NavLink)`\r\n  ${LinkStyles};\r\n`;\r\n\r\nconst ExternalLink = styled.a`\r\n  ${LinkStyles};\r\n`;\r\n\r\nconst IconsRightSide = styled.div`\r\n  margin: 0 0 0 auto;\r\n  align-items: center;\r\n  svg {\r\n    margin-right: 0;\r\n  }\r\n`;\r\n\r\ninterface MenuLinkProps {\r\n  to: string;\r\n  menuText: string;\r\n  isExternal?: boolean;\r\n  Icon?: any;\r\n  notification?: boolean;\r\n  extendedMenu?: boolean;\r\n  onClick?: () => void;\r\n}\r\n\r\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\r\n  const getRightSide = () => (\r\n    <IconsRightSide>\r\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\r\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\r\n    </IconsRightSide>\r\n  );\r\n  return (\r\n    <li>\r\n      {isExternal ? (\r\n        <ExternalLink\r\n          key={`ExternalLink_${to}`}\r\n          href={to}\r\n          role=\"menuitem\"\r\n          className=\"UserMenuLink\"\r\n          onClick={() => {\r\n            if (onClick) {\r\n              onClick();\r\n            }\r\n          }}>\r\n          {Icon && <Icon size=\"24px\" />}\r\n          <span>{menuText}</span>\r\n          {getRightSide()}\r\n        </ExternalLink>\r\n      ) : (\r\n        <InternalLink\r\n          key={`InternalLink_${to}`}\r\n          to={to}\r\n          role=\"menuitem\"\r\n          className=\"UserMenuLink\"\r\n          onClick={() => {\r\n            if (onClick) {\r\n              onClick();\r\n            }\r\n          }}>\r\n          {Icon && <Icon size=\"24px\" />}\r\n          <span>{menuText}</span>\r\n          {getRightSide()}\r\n        </InternalLink>\r\n      )}\r\n    </li>\r\n  );\r\n};\r\n\r\nexport default MenuLink;\r\n"],"file":"MenuLink.js"}

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","MenuLink","Button","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","ComponentSStyling","Z_INDEXES","Menu","ul","white","fixed_menu","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":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,EAAiDC,gBAAjD,QAAwE,cAAxE;AAEA,OAAOC,QAAP,MAAqB,YAArB;AAEA,SAAQC,MAAR,EAAgBC,UAAhB,QAAiC,cAAjC;AACA,SAAQC,aAAR,EAAuBC,KAAvB,QAAmC,qCAAnC;AACA,SAAQC,QAAR,EAAkBC,KAAlB,EAAyBC,0BAAzB,QAA0D,wBAA1D;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AACA,SAAQC,SAAR,QAAwB,wBAAxB;AAEA,MAAMC,IAAI,GAAGf,MAAM,CAACgB,EAAG;AACvB;AACA;AACA,sBAAsBd,MAAM,CAACe,KAAM;AACnC;AACA;AACA,uBAAuBP,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA,aAAaI,SAAS,CAACI,UAAW;AAClC;AACA;AACA;AACA;AACA,IAAIjB,WAAW,CAACkB,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMlB,WAAW,CAACkB,KAAM;AACxB;AACA;AACA;AACA;AACA,IAAIf,gBAAiB;AACrB,CAlCA;AAoCA,MAAMgB,WAAW,GAAGpB,MAAM,CAACqB,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,MAAMC,eAAe,GAAGtB,MAAM,CAACgB,EAAG;AAClC;AACA;AACA;AACA;AACA,IAAIJ,0BAA2B;AAC/B,CANA;AAQA,MAAMW,GAAG,GAAGvB,MAAM,CAACwB,GAAI;AACvB;AACA;AACA;AACA;AACA,WAAWtB,MAAM,CAACuB,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMZ,iBAAiB,CAACV,kBAAkB,CAACuB,OAApB,EAA6B,SAA7B,CAAwC;AAC/D;AACA,CAhBA;AAkBA,MAAMC,SAAS,GAAG3B,MAAM,CAAC4B,IAAK;AAC9B;AACA,sBAAsB1B,MAAM,CAAC2B,UAAW;AACxC;AACA;AACA;AACA,CANA;AAQA,MAAMC,cAAc,GAAG9B,MAAM,CAACK,QAAD,CAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CARA;;AAwBA,MAAM0B,cAAc,GAAG,CAAC;AACtBC,EAAAA,iBADsB;AAEtBC,EAAAA,SAFsB;AAGtBC,EAAAA,QAHsB;AAItBC,EAAAA,KAJsB;AAKtBC,EAAAA,gBALsB;AAMtBC,EAAAA,eANsB;AAOtBC,EAAAA,cAPsB;AAQtBC,EAAAA,mBARsB;AAStBC,EAAAA,cATsB;AAUtBC,EAAAA,OAVsB;AAWtBC,EAAAA;AAXsB,CAAD,KAYV;AACX3C,EAAAA,KAAK,CAAC4C,SAAN,CAAgB,MAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBT,QAAAA,eAAe;AAChB;AACF;;AAEDU,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,MAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACP,eAAD,CAXH;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAE,MAAM,CAAE,CAAvB;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,uBAAgB;AAArD,kBACE,oBAAC,GAAD;AAAK,IAAA,GAAG,EAAC;AAAT,kBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEA,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAC,MAApB;AAA2B,IAAA,KAAK,EAAEnC,MAAM,CAACuB;AAAzC,IADF,CADF,eAIE,gCAAKO,iBAAL,CAJF,eAKE,oBAAC,KAAD,qBACE,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAEK,eAAzD;AAA0E,IAAA,cAAc,EAAE;AAA1F,kBACE,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAC;AAAZ,IADF,CADF,CALF,CADF,EAYGC,cAAc,IAAIA,cAAc,EAAEY,MAAhB,GAAyB,CAA3C,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,SAAD;AAAW;AAAX,KAA8B,GAAEjB,SAAU,IAAGC,QAAS,EAAtD,CADF,eAEE,oBAAC,eAAD,QACGI,cAAc,EAAEa,GAAhB,CAAqBC,OAAD,iBACnB,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAA9B;AAAkC,IAAA,EAAE,EAAED,OAAO,EAAEC,EAA/C;AAAmD,IAAA,QAAQ,EAAED,OAAO,EAAEE;AAAtE,IADD,CADH,CAFF,CAbJ,EAsBGf,mBAAmB,IAAIA,mBAAmB,EAAEW,MAArB,GAA8B,CAArD,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,SAAD,QAAYd,gBAAgB,IAAI,EAAhC,CADF,eAEE,oBAAC,eAAD,QACGG,mBAAmB,EAAEY,GAArB,CAA0BC,OAAD,iBACxB,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAA9B;AAAkC,IAAA,EAAE,EAAED,OAAO,EAAEC,EAA/C;AAAmD,IAAA,QAAQ,EAAED,OAAO,EAAEE;AAAtE,IADD,CADH,CAFF,CAvBJ,EAiCGd,cAAc,IAAIA,cAAc,EAAEU,MAAhB,GAAyB,CAA3C,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,SAAD,QAAY,EAAZ,CADF,eAEE,oBAAC,eAAD,QACGV,cAAc,EAAEW,GAAhB,CAAqBC,OAAD,iBACnB,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEA,OAAO,EAAEC,EAA9B;AAAkC,IAAA,UAAU,EAAED,OAAO,CAACG,UAAtD;AAAkE,IAAA,EAAE,EAAEH,OAAO,EAAEC,EAA/E;AAAmF,IAAA,QAAQ,EAAED,OAAO,EAAEE;AAAtG,IADD,CADH,CAFF,CAlCJ,EA2CGb,OAAO,iBACN;AAAK,IAAA,GAAG,EAAC,eAAT;AAAyB,IAAA,KAAK,EAAE;AAAEe,MAAAA,OAAO,EAAE,MAAX;AAAmBC,MAAAA,MAAM,EAAE;AAA3B;AAAhC,kBACE,oBAAC,MAAD;AACE,IAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,EAAE,KAAT;AAAgBD,MAAAA,MAAM,EAAE;AAAxB,KADT;AAEE,IAAA,OAAO,EAAC,WAFV;AAGE,IAAA,OAAO,EAAGZ,CAAD,IAAO;AACdA,MAAAA,CAAC,CAACc,cAAF;AACAlB,MAAAA,OAAO,CAACI,CAAD,CAAP;AACD;AANH,KAOGH,YAPH,CADF,CA5CJ,CADF;AA2DD,CArFD;;;AAbEV,EAAAA,iB;AACAC,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,gB;AACAC,EAAAA,e;AACAC,EAAAA,c;AACAC,EAAAA,mB;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,Y;;AA0FF,eAAeX,cAAf","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 {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};\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/esm/GlobalNavigationBar/UserMenu/UserMenu.js

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