@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/cjs/GlobalNavigationBar/MainMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","onClick","label","NavLink","to","length","slice"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,2OAKdC,oBAAYC,MALE,CAAlB;;AAcA,IAAMC,SAAS,GAAGJ,0BAAOK,MAAV,2HACCC,eAAOC,KADR,CAAf;;AASA,IAAMC,mBAAmB,GAAGR,0BAAOC,GAAV,wTAER,UAAAQ,KAAK;AAAA,SAAKA,KAAK,CAACC,UAAN,GAAmB,MAAnB,GAA4B,OAAjC;AAAA,CAFG,EAePJ,eAAOC,KAfA,CAAzB;;AAmBA,IAAMI,eAAe,GAAGX,0BAAOC,GAAV,8GAArB;;AASA,IAAMW,QAAQ,GAAG,SAAXA,QAAW,OAA2E;AAAA,MAAxEC,iBAAwE,QAAxEA,iBAAwE;AAAA,MAArDC,YAAqD,QAArDA,YAAqD;;AAC1F,wBAAgDC,KAAK,CAACC,QAAN,CAAe,KAAf,CAAhD;AAAA;AAAA,MAAOC,gBAAP;AAAA,MAAyBC,mBAAzB;;AACA,MAAMC,eAAe,GAAGJ,KAAK,CAACK,MAAN,CAAkB,IAAlB,CAAxB;AACA,MAAMC,WAA+D,GAAGN,KAAK,CAACK,MAAN,CAAa,IAAb,CAAxE;;AACA,yBAAwDL,KAAK,CAACC,QAAN,CAAuB,CAAvB,CAAxD;AAAA;AAAA,MAAOM,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,WAAW,GAAG,GAApB;;AACA,MAAMC,+BAA+B,GAAG,SAAlCA,+BAAkC,GAAM;AAC5C,QAAIX,YAAY,SAAZ,IAAAA,YAAY,WAAZ,IAAAA,YAAY,CAAEY,OAAd,IAAyBL,WAAzB,aAAyBA,WAAzB,eAAyBA,WAAW,CAAEK,OAA1C,EAAmD;AAAA;;AACjD,UAAMC,MAAM,GAAGC,IAAI,CAACC,KAAL,CAAW,CAAC,CAAAf,YAAY,SAAZ,IAAAA,YAAY,WAAZ,qCAAAA,YAAY,CAAEY,OAAd,gFAAuBI,UAAvB,KAAoCT,WAApC,aAAoCA,WAApC,+CAAoCA,WAAW,CAAEK,OAAjD,yDAAoC,qBAAsBI,UAA1D,CAAD,IAAyEN,WAApF,CAAf;;AACA,UAAIG,MAAM,KAAKL,oBAAf,EAAqC;AACnCC,QAAAA,uBAAuB,CAACI,MAAD,CAAvB;AACD;AACF;AACF,GAPD;;AASA,MAAMI,6BAA6B,GAAG,SAAhCA,6BAAgC,GAAM;AAC1Cb,IAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD,GAFD;;AAIA,MAAMc,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAAY;AAAA;;AACrC,QAAId,eAAe,SAAf,IAAAA,eAAe,WAAf,IAAAA,eAAe,CAAEO,OAAjB,IAA4B,EAACP,eAAD,aAACA,eAAD,wCAACA,eAAe,CAAEO,OAAlB,kDAAC,sBAA0BQ,QAA1B,CAAmCD,CAAC,CAACE,MAArC,CAAD,CAAhC,EAA+E;AAC7E,UAAIlB,gBAAJ,EAAsB;AACpBC,QAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD;AACF;AACF,GAND;;AAOAH,EAAAA,KAAK,CAACqB,SAAN,CAAgB,YAAM;AACpBX,IAAAA,+BAA+B,GADX,CAEpB;;AACAY,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACAO,IAAAA,MAAM,CAACD,gBAAP,CAAwB,QAAxB,EAAkCb,+BAAlC;AACA,WAAO,YAAM;AACX;AACAY,MAAAA,QAAQ,CAACG,mBAAT,CAA6B,OAA7B,EAAsCR,kBAAtC;AACAO,MAAAA,MAAM,CAACC,mBAAP,CAA2B,QAA3B,EAAqCf,+BAArC;AACD,KAJD;AAKD,GAVD;;AAYA,MAAMgB,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACR,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACS,cAAF;AACD,GAFD;;AAIA,sBACE,sBAAC,YAAD;AAAc,IAAA,SAAS,EAAC,0BAAxB;AAAmD,IAAA,GAAG,EAAErB,WAAxD;AAAqE,IAAA,IAAI,EAAEJ,gBAA3E;AAAA,eACGJ,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAE8B,GAAnB,CAAuB,UAACC,EAAD,EAAgBC,KAAhB;AAAA,aACtBA,KAAK,GAAGvB,oBAAoB,GAAG,CAA/B,GAAmC,IAAnC,GAA0CsB,EAAE,SAAF,IAAAA,EAAE,WAAF,IAAAA,EAAE,CAAEE,QAAJ,gBACxC,qBAAC,gBAAD;AACE,QAAA,EAAE,EAAE1C,SADN;AAEE,QAAA,KAAK,EAAEwC,EAAF,aAAEA,EAAF,uBAAEA,EAAE,CAAEG,KAFb;AAGE,QAAA,SAAS,EAAC,UAHZ;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAIG,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEI,OAAR,EAAiB;AACfJ,YAAAA,EAAE,SAAF,IAAAA,EAAE,WAAF,YAAAA,EAAE,CAAEI,OAAJ;AACD;AACF,SAVH;AAAA,kBAWGJ,EAXH,aAWGA,EAXH,uBAWGA,EAAE,CAAEK;AAXP,SAIOL,EAJP,aAIOA,EAJP,uBAIOA,EAAE,CAAEK,KAJX,CADwC,gBAexC,qBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEN,EAAF,aAAEA,EAAF,uBAAEA,EAAE,CAAEG,KAFb;AAGE,QAAA,EAAE,EAAE,CAAAH,EAAE,SAAF,IAAAA,EAAE,WAAF,YAAAA,EAAE,CAAEO,EAAJ,KAAU,EAHhB;AAKE,QAAA,WAAW,EAAEV,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAIG,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEI,OAAR,EAAiB;AACfJ,YAAAA,EAAE,SAAF,IAAAA,EAAE,WAAF,YAAAA,EAAE,CAAEI,OAAJ;AACD;AACF,SAVH;AAAA,kBAWGJ,EAXH,aAWGA,EAXH,uBAWGA,EAAE,CAAEK;AAXP,SAIOL,EAJP,aAIOA,EAJP,uBAIOA,EAAE,CAAEK,KAJX,CAhBoB;AAAA,KAAvB,CADH,EAgCGpC,iBAAiB,CAACuC,MAAlB,GAA2B,CAA3B,GAA+B9B,oBAA/B,iBACC,sBAAC,eAAD;AAAA,8BACE,qBAAC,kBAAD;AACE,QAAA,OAAO,EAAE,WADX;AAEE,QAAA,KAAK,EAAE,UAFT;AAGE,QAAA,MAAM,EAAE;AAAA,iBAAMJ,mBAAmB,CAAC,IAAD,CAAzB;AAAA,SAHV;AAAA,+BAIE,qBAAC,2BAAD;AAAgB,UAAA,IAAI,EAAC;AAArB;AAJF,QADF,eAOE,qBAAC,mBAAD;AAAqB,QAAA,GAAG,EAAEC,eAA1B;AAA2C,QAAA,SAAS,EAAEF,gBAAgB,GAAG,MAAH,GAAY,EAAlF;AAAsF,QAAA,UAAU,EAAE,KAAlG;AAAA,+BACE,qBAAC,yBAAD;AAAkB,UAAA,eAAe,EAAEc,6BAAnC;AAAkE,UAAA,iBAAiB,EAAElB,iBAAiB,CAACwC,KAAlB,CAAwB/B,oBAAoB,GAAG,CAA/C;AAArF;AADF,QAPF;AAAA,MAjCJ;AAAA,IADF;AAgDD,CA3FD;;;AAJET,EAAAA,iB;;eAiGaD,Q","sourcesContent":["import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../NavItem';\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { NavOption } from '../types';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../Button';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  navigationOptions: NavOption[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\n      if (showExtendedMenu) {\n        setShowExtendedMenu(false);\n      }\n    }\n  };\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  });\n\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {navigationOptions?.map((no: NavOption, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem\n            as={NavButton}\n            exact={no?.exact}\n            className=\"disabled\"\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem\n            as={NavLink}\n            exact={no?.exact}\n            to={no?.to || ''}\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => setShowExtendedMenu(true)}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.js"}

package/dist/cjs/GlobalNavigationBar/RightSideNav.js

@@ -0,0 +1,89 @@
+"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 _reactRouterDom = require("react-router-dom");
+
+var _NavItem = require("../NavItem");
+
+var _styles = require("../styles");
+
+var _Button = require("../Button");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+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 NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+
+var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
+
+var RightSideNav = function RightSideNav(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      secondaryButton = _ref.secondaryButton;
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  var getNavItem = function getNavItem(navOption) {
+    if (navOption !== null && navOption !== void 0 && navOption.disabled) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _Button.Button,
+        className: "disabled",
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _reactRouterDom.NavLink,
+        exact: navOption === null || navOption === void 0 ? void 0 : navOption.exact,
+        to: (navOption === null || navOption === void 0 ? void 0 : navOption.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (navOption !== null && navOption !== void 0 && navOption.onClick) {
+            navOption === null || navOption === void 0 ? void 0 : navOption.onClick();
+          }
+        },
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.reverse().map(function (no) {
+      return getNavItem(no);
+    }), secondaryButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryButton, {
+      variant: "secondary",
+      onClick: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.action,
+      children: secondaryButton.label
+    })]
+  });
+};
+
+RightSideNav.propTypes = {
+  navigationOptions: _propTypes.default.array
+};
+var _default = RightSideNav;
+exports.default = _default;
+//# sourceMappingURL=RightSideNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","NavLink","exact","to","onClick","reverse","map","no","action"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yWAUdC,oBAAYC,KAVE,EAadD,oBAAYE,MAbE,CAAlB;;AAyBA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,qIAIjB,mCAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA8E;AAAA,MAA3EC,iBAA2E,QAA3EA,iBAA2E;AAAA,MAAxDC,eAAwD,QAAxDA,eAAwD;;AACjG,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,EAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,SAAD,EAA0B;AAC3C,QAAIA,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEC,QAAf,EAAyB;AACvB,0BACE,qBAAC,gBAAD;AAAS,QAAA,EAAE,EAAEX,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGU,SADH,aACGA,SADH,uBACGA,SAAS,CAAEE;AADd,SAA+CF,SAA/C,aAA+CA,SAA/C,uBAA+CA,SAAS,CAAEE,KAA1D,CADF;AAKD,KAND,MAMO;AACL,0BACE,qBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEI,KAFpB;AAGE,QAAA,EAAE,EAAE,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEK,EAAX,KAAiB,EAHvB;AAKE,QAAA,WAAW,EAAET,mBALf;AAME,QAAA,OAAO,EAAE,mBAAM;AACb,cAAII,SAAJ,aAAIA,SAAJ,eAAIA,SAAS,CAAEM,OAAf,EAAwB;AACtBN,YAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEM,OAAX;AACD;AACF,SAVH;AAAA,kBAWGN,SAXH,aAWGA,SAXH,uBAWGA,SAAS,CAAEE;AAXd,SAIOF,SAJP,aAIOA,SAJP,uBAIOA,SAAS,CAAEE,KAJlB,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,sBAAC,YAAD;AAAA,eACGR,iBADH,aACGA,iBADH,uBACGA,iBAAiB,CAAEa,OAAnB,GAA6BC,GAA7B,CAAiC,UAAAC,EAAE;AAAA,aAAIV,UAAU,CAACU,EAAD,CAAd;AAAA,KAAnC,CADH,EAGGd,eAAe,iBACd,qBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEe,MAA/D;AAAA,gBACGf,eAAe,CAACO;AADnB,MAJJ;AAAA,IADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;eA8CaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}

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

@@ -0,0 +1,108 @@
+"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 = _interopRequireWildcard(require("styled-components"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styles = require("../../styles");
+
+var _SystemIcons = require("../../icons/systemicons/SystemIcons");
+
+var _typography = require("../../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 LinkStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ", "\n  svg {\n    margin-right: 15px;\n    color: ", ";\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.neutral_600);
+var InternalLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), LinkStyles);
+
+var ExternalLink = _styledComponents.default.a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), LinkStyles);
+
+var IconsRightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n"])));
+
+var MenuLink = function MenuLink(_ref) {
+  var to = _ref.to,
+      isExternal = _ref.isExternal,
+      menuText = _ref.menuText,
+      Icon = _ref.Icon,
+      notification = _ref.notification,
+      extendedMenu = _ref.extendedMenu,
+      _onClick = _ref.onClick;
+
+  var getRightSide = function getRightSide() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconsRightSide, {
+      children: [notification ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Bullet, {
+        size: "24px",
+        color: _styles.COLORS.critical_500
+      }) : null, extendedMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronRight, {
+        size: "24px",
+        color: _styles.COLORS.neutral_600
+      }) : null]
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    children: isExternal ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExternalLink, {
+      href: to,
+      role: "menuitem",
+      className: "UserMenuLink",
+      onClick: function onClick() {
+        if (_onClick) {
+          _onClick();
+        }
+      },
+      children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        size: "24px"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: menuText
+      }), getRightSide()]
+    }, "ExternalLink_".concat(to)) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(InternalLink, {
+      to: to,
+      role: "menuitem",
+      className: "UserMenuLink",
+      onClick: function onClick() {
+        if (_onClick) {
+          _onClick();
+        }
+      },
+      children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        size: "24px"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: menuText
+      }), getRightSide()]
+    }, "InternalLink_".concat(to))
+  });
+};
+
+MenuLink.propTypes = {
+  to: _propTypes.default.string.isRequired,
+  menuText: _propTypes.default.string.isRequired,
+  isExternal: _propTypes.default.bool,
+  Icon: _propTypes.default.any,
+  notification: _propTypes.default.bool,
+  extendedMenu: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+};
+var _default = MenuLink;
+exports.default = _default;
+//# sourceMappingURL=MenuLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,yTAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,iGACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,iGACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,0KAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,sBAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,qBAAC,mBAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEd,eAAOkB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,qBAAC,yBAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEf,eAAOC;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGU,UAAU,gBACT,sBAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB,EADS,gBAgBT,sBAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB;AAjBJ,IADF;AAmCD,CA1CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;eA+CaP,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  svg {\n    margin-right: 15px;\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst InternalLink = styled(NavLink)`\n  ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n  ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n`;\n\ninterface MenuLinkProps {\n  to: string;\n  menuText: string;\n  isExternal?: boolean;\n  Icon?: any;\n  notification?: boolean;\n  extendedMenu?: boolean;\n  onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n  const getRightSide = () => (\n    <IconsRightSide>\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n    </IconsRightSide>\n  );\n  return (\n    <li>\n      {isExternal ? (\n        <ExternalLink\n          key={`ExternalLink_${to}`}\n          href={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </ExternalLink>\n      ) : (\n        <InternalLink\n          key={`InternalLink_${to}`}\n          to={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </InternalLink>\n      )}\n    </li>\n  );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}

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

@@ -0,0 +1,176 @@
+"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 _styles = require("../../styles");
+
+var _MenuLink = _interopRequireDefault(require("./MenuLink"));
+
+var _Button = require("../../Button");
+
+var _SystemIcons = require("../../icons/systemicons/SystemIcons");
+
+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;
+
+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  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"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.fixed_menu, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
+
+var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ", ";\n"])), _CommonStyles.UserMenuSectionListStyling);
+
+var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_600, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
+
+var LabelLine = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 32px;\n  background-color: ", ";\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n"])), _styles.COLORS.neutral_20);
+
+var StyledMenulink = (0, _styledComponents.default)(_MenuLink.default)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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__*/(0, _jsxRuntime.jsxs)(Menu, {
+    onClick: function onClick() {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Top, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: clickMenuAction,
+        isInMobileMenu: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowLineLeft, {
+          size: "24px",
+          color: _styles.COLORS.neutral_600
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: accountMenuHeader
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.Right, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: clickMenuAction,
+          isInMobileMenu: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+            size: "24px"
+          })
+        })
+      })]
+    }, "MobileUserMenuTopSection"), accountSection && (accountSection === null || accountSection === void 0 ? void 0 : accountSection.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LabelLine, {
+        "data-hj-suppress": true,
+        children: "".concat(firstName, " ").concat(lastName)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: accountSection === null || accountSection === void 0 ? void 0 : accountSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(MenuSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LabelLine, {
+        children: organizationName || ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: organizationSection === null || organizationSection === void 0 ? void 0 : organizationSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(MenuSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LabelLine, {
+        children: ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: supportSection === null || supportSection === void 0 ? void 0 : supportSection.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        display: 'flex',
+        margin: 'auto 0 12px 0'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        style: {
+          width: '90%',
+          margin: '0 auto'
+        },
+        variant: "secondary",
+        onClick: function onClick(e) {
+          e.preventDefault();
+          signOut(e);
+        },
+        children: signOutLabel
+      })
+    }, "SignoutButton")]
+  });
+};
+
+MobileUserMenu.propTypes = {
+  accountMenuHeader: _propTypes.default.string.isRequired,
+  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 = MobileUserMenu;
+exports.default = _default;
+//# sourceMappingURL=MobileUserMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","fixed_menu","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","StyledMenulink","MenuLink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","isExternal","display","margin","width","preventDefault"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,IAAI,GAAGC,0BAAOC,EAAV,0qBAGYC,eAAOC,KAHnB,EAMaC,sBANb,EAOKA,sBAPL,EAUGC,oBAAUC,UAVb,EAeNC,oBAAYC,KAfN,EA4BJD,oBAAYC,KA5BR,EAiCNC,wBAjCM,CAAV;;AAoCA,IAAMC,WAAW,GAAGV,0BAAOW,EAAV,qOAAjB;;AAWA,IAAMC,eAAe,GAAGZ,0BAAOC,EAAV,iMAKjBY,wCALiB,CAArB;;AAQA,IAAMC,GAAG,GAAGd,0BAAOe,GAAV,+XAKEb,eAAOc,WALT,EAcH,mCAAkBC,2BAAmBC,OAArC,EAA8C,SAA9C,CAdG,CAAT;;AAkBA,IAAMC,SAAS,GAAGnB,0BAAOoB,IAAV,mMAEOlB,eAAOmB,UAFd,CAAf;;AAQA,IAAMC,cAAc,GAAG,+BAAOC,iBAAP,CAAH,2KAApB;;AAwBA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAYV;AAAA,MAXXC,iBAWW,QAXXA,iBAWW;AAAA,MAVXC,SAUW,QAVXA,SAUW;AAAA,MATXC,QASW,QATXA,QASW;AAAA,MARXC,KAQW,QARXA,KAQW;AAAA,MAPXC,gBAOW,QAPXA,gBAOW;AAAA,MANXC,eAMW,QANXA,eAMW;AAAA,MALXC,cAKW,QALXA,cAKW;AAAA,MAJXC,mBAIW,QAJXA,mBAIW;AAAA,MAHXC,cAGW,QAHXA,cAGW;AAAA,MAFXC,OAEW,QAFXA,OAEW;AAAA,MADXC,YACW,QADXA,YACW;AACXC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBV,QAAAA,eAAe;AAChB;AACF;;AAEDW,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACR,eAAD,CAXH;AAaA,sBACE,sBAAC,IAAD;AAAM,IAAA,OAAO,EAAE,mBAAM,CAAE,CAAvB;AAAyB,IAAA,IAAI,EAAC,MAA9B;AAAqC,uBAAgB,gBAArD;AAAA,4BACE,sBAAC,GAAD;AAAA,8BACE,qBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,MAAM,EAAEA,eAAzD;AAA0E,QAAA,cAAc,EAAE,IAA1F;AAAA,+BACE,qBAAC,0BAAD;AAAe,UAAA,IAAI,EAAC,MAApB;AAA2B,UAAA,KAAK,EAAE5B,eAAOc;AAAzC;AADF,QADF,eAIE;AAAA,kBAAKS;AAAL,QAJF,eAKE,qBAAC,mBAAD;AAAA,+BACE,qBAAC,kBAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAEK,eAAzD;AAA0E,UAAA,cAAc,EAAE,IAA1F;AAAA,iCACE,qBAAC,kBAAD;AAAO,YAAA,IAAI,EAAC;AAAZ;AADF;AADF,QALF;AAAA,OAAS,0BAAT,CADF,EAYGC,cAAc,IAAI,CAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEa,MAAhB,IAAyB,CAA3C,iBACC,sBAAC,WAAD;AAAA,8BACE,qBAAC,SAAD;AAAW,gCAAX;AAAA,4BAAgClB,SAAhC,cAA6CC,QAA7C;AAAA,QADF,eAEE,qBAAC,eAAD;AAAA,kBACGI,cADH,aACGA,cADH,uBACGA,cAAc,CAAEc,GAAhB,CAAoB,UAACC,OAAD;AAAA,8BACnB,qBAAC,cAAD;AAAkC,YAAA,EAAE,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAA/C;AAAmD,YAAA,QAAQ,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE;AAAtE,aAAqBF,OAArB,aAAqBA,OAArB,uBAAqBA,OAAO,CAAEC,EAA9B,CADmB;AAAA,SAApB;AADH,QAFF;AAAA,OAAiB,sBAAjB,CAbJ,EAsBGf,mBAAmB,IAAI,CAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEY,MAArB,IAA8B,CAArD,iBACC,sBAAC,WAAD;AAAA,8BACE,qBAAC,SAAD;AAAA,kBAAYf,gBAAgB,IAAI;AAAhC,QADF,eAEE,qBAAC,eAAD;AAAA,kBACGG,mBADH,aACGA,mBADH,uBACGA,mBAAmB,CAAEa,GAArB,CAAyB,UAACC,OAAD;AAAA,8BACxB,qBAAC,cAAD;AAAkC,YAAA,EAAE,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAA/C;AAAmD,YAAA,QAAQ,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE;AAAtE,aAAqBF,OAArB,aAAqBA,OAArB,uBAAqBA,OAAO,CAAEC,EAA9B,CADwB;AAAA,SAAzB;AADH,QAFF;AAAA,OAAiB,2BAAjB,CAvBJ,EAiCGd,cAAc,IAAI,CAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEW,MAAhB,IAAyB,CAA3C,iBACC,sBAAC,WAAD;AAAA,8BACE,qBAAC,SAAD;AAAA,kBAAY;AAAZ,QADF,eAEE,qBAAC,eAAD;AAAA,kBACGX,cADH,aACGA,cADH,uBACGA,cAAc,CAAEY,GAAhB,CAAoB,UAACC,OAAD;AAAA,8BACnB,qBAAC,cAAD;AAAkC,YAAA,UAAU,EAAEA,OAAO,CAACG,UAAtD;AAAkE,YAAA,EAAE,EAAEH,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAA/E;AAAmF,YAAA,QAAQ,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE;AAAtG,aAAqBF,OAArB,aAAqBA,OAArB,uBAAqBA,OAAO,CAAEC,EAA9B,CADmB;AAAA,SAApB;AADH,QAFF;AAAA,OAAiB,sBAAjB,CAlCJ,EA2CGb,OAAO,iBACN;AAAyB,MAAA,KAAK,EAAE;AAAEgB,QAAAA,OAAO,EAAE,MAAX;AAAmBC,QAAAA,MAAM,EAAE;AAA3B,OAAhC;AAAA,6BACE,qBAAC,cAAD;AACE,QAAA,KAAK,EAAE;AAAEC,UAAAA,KAAK,EAAE,KAAT;AAAgBD,UAAAA,MAAM,EAAE;AAAxB,SADT;AAEE,QAAA,OAAO,EAAC,WAFV;AAGE,QAAA,OAAO,EAAE,iBAACZ,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACc,cAAF;AACAnB,UAAAA,OAAO,CAACK,CAAD,CAAP;AACD,SANH;AAAA,kBAOGJ;AAPH;AADF,OAAS,eAAT,CA5CJ;AAAA,IADF;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;;eA0FaX,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../../styles';\n\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {Button, IconButton} from '../../Button';\nimport {ArrowLineLeft, Close} from '../../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.fixed_menu};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\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    ${BREAKPOINTS.SMALL} {\n      width: 328px !important;\n    }\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ${UserMenuSectionListStyling};\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\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    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\nconst StyledMenulink = styled(MenuLink)`\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  \n  & a {\n    height: 100%;\n  }\n`;\n\ninterface Props {\n  accountMenuHeader: string;\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst MobileUserMenu = ({\n  accountMenuHeader,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  clickMenuAction,\n  accountSection,\n  organizationSection,\n  supportSection,\n  signOut,\n  signOutLabel,\n}: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top key=\"MobileUserMenuTopSection\">\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{accountMenuHeader}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\n          <MenuSectionList>\n            {accountSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MObileOrganizationSection\">\n          <LabelLine>{organizationName || ''}</LabelLine>\n          <MenuSectionList>\n            {organizationSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {supportSection && supportSection?.length > 0 && (\n        <MenuSection key=\"MobileSupportSection\">\n          <LabelLine>{''}</LabelLine>\n          <MenuSectionList>\n            {supportSection?.map((element) => (\n              <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {signOut && (\n        <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\n          <Button\n            style={{ width: '90%', margin: '0 auto' }}\n            variant=\"secondary\"\n            onClick={(e) => {\n              e.preventDefault();\n              signOut(e);\n            }}>\n            {signOutLabel}\n          </Button>\n        </div>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileUserMenu;\n"],"file":"MobileUserMenu.js"}

package/dist/cjs/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -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.js.map