@laerdal/life-react-components 3.4.2 → 3.5.0

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

@@ -0,0 +1,167 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../../styles", "../../icons/systemicons/SystemIcons", "../../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../../styles"), require("../../icons/systemicons/SystemIcons"), require("../../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (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;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const LinkStyles = _styledComponents.css`
+  border: none;
+  background: transparent;
+  padding: 16px 25px;
+
+  text-decoration: none;
+  text-align: left;
+  align-items: center;
+  display: flex;
+
+  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+  svg {
+    margin-right: 15px;
+    color: ${_styles.COLORS.neutral_600};
+  }
+`;
+  const InternalLink = (0, _styledComponents2.default)(_reactRouterDom.NavLink)`
+  ${LinkStyles};
+`;
+  const ExternalLink = _styledComponents2.default.a`
+  ${LinkStyles};
+`;
+  const IconsRightSide = _styledComponents2.default.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(_SystemIcons.Bullet, {
+      size: "24px",
+      color: _styles.COLORS.critical_500
+    }) : null, extendedMenu ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
+      size: "24px",
+      color: _styles.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: _propTypes2.default.string.isRequired,
+    menuText: _propTypes2.default.string.isRequired,
+    isExternal: _propTypes2.default.bool,
+    Icon: _propTypes2.default.any,
+    notification: _propTypes2.default.bool,
+    extendedMenu: _propTypes2.default.bool,
+    onClick: _propTypes2.default.func
+  };
+  exports.default = MenuLink;
+});
+//# sourceMappingURL=MenuLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentMStyling","ComponentTextStyle","COLORS","neutral_600","InternalLink","styled","ExternalLink","a","IconsRightSide","div","to","menuText","isExternal","Icon","notification","extendedMenu","onClick","MenuLink","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,UAAU,GAAGC,qBAAI;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA,aAAaE,eAAOC,WAAY;AAChC;AAdA,CAAA;AAiBA,QAAMC,YAAY,GAAGC,gCAAM,uBAANA,CAAgB;AACrC,IAAIP,UAAW;AADf,CAAA;AAIA,QAAMQ,YAAY,GAAGD,2BAAOE,CAAE;AAC9B,IAAIT,UAAW;AADf,CAAA;AAIA,QAAMU,cAAc,GAAGH,2BAAOI,GAAI;AAClC;AACA;AACA;AACA;AACA;AALA,CAAA;;AAkBA,QAAMQ,QAAQ,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,YAAA;AAAA,IAAA,YAAA;AAA8DD,IAAAA;AAA9D,GAAD,KAA4F;AAC3G,UAAME,YAAY,GAAG,MAAA,aACnB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAQ,MAAA,IAAI,EAAZ,MAAA;AAAoB,MAAA,KAAK,EAAEZ,eAAOiB;AAAlC,KAAA,CAAH,GADf,IAAA,EAEGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,MAAA,IAAI,EAAlB,MAAA;AAA0B,MAAA,KAAK,EAAEb,eAAOC;AAAxC,KAAA,CAAH,GAHjB,IACE,CADF;;AAMA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACGS,UAAU,GAAA,aACT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeF,EADvB,EAAA;AAEE,MAAA,IAAI,EAFN,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YAbM,EACT,CADS,GAAA,aAgBT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeR,EADvB,EAAA;AAEE,MAAA,EAAE,EAFJ,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YA9BT,EAkBM,CAjBJ,CADF;AAPF,GAAA;;;AATER,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,I;AACAC,IAAAA,Y;AACAC,IAAAA,Y;AACAC,IAAAA,O;;oBA+CF,Q","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/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js

@@ -0,0 +1,271 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../../styles", "./MenuLink", "../../Button", "../../icons/systemicons/SystemIcons", "../mobile/CommonStyles", "../../styles/typography", "../../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("./MenuLink"), require("../../Button"), require("../../icons/systemicons/SystemIcons"), require("../mobile/CommonStyles"), require("../../styles/typography"), require("../../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.MenuLink, global.Button, global.SystemIcons, global.CommonStyles, global.typography, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _MenuLink, _Button, _SystemIcons, _CommonStyles, _typography, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _MenuLink2 = _interopRequireDefault(_MenuLink);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (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;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const Menu = _styledComponents2.default.ul`
+  list-style: none;
+  margin: 0;
+  background-color: ${_styles.COLORS.white};
+  box-sizing: border-box;
+  display: none;
+  -webkit-animation: ${_CommonStyles.flowDown} 0.2s ease-in-out;
+  animation: ${_CommonStyles.flowDown} 0.2s ease-in-out;
+  position: absolute;
+  border-radius: 4px;
+  z-index: ${_zIndexes.Z_INDEXES.fixed_menu};
+  height: 100%;
+  width: 320px;
+  padding-inline-start: 0;
+  overflow-y: scroll;
+  ${_styles.BREAKPOINTS.SMALL} {
+    min-width: 360px;
+  }
+
+  .open & {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .signOutButton {
+    height: 40px !important;
+    width: 288px !important;
+
+    ${_styles.BREAKPOINTS.SMALL} {
+      width: 328px !important;
+    }
+  }
+
+  ${_styles.scrollBarStyling};
+`;
+  const MenuSection = _styledComponents2.default.li`
+  padding: 8px 0;
+  position: relative;
+
+  .disabled-link {
+    color: #21212150;
+    pointer-events: none;
+    key-events: none;
+  }
+`;
+  const MenuSectionList = _styledComponents2.default.ul`
+  list-style: none;
+  margin: 0;
+  overflow-y: unset !important;
+  padding-inline-start: 0;
+  ${_CommonStyles.UserMenuSectionListStyling};
+`;
+  const Top = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 22px 12px 0 12px;
+  color: ${_styles.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;
+
+    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
+  }
+`;
+  const LabelLine = _styledComponents2.default.span`
+  height: 32px;
+  background-color: ${_styles.COLORS.neutral_20};
+  padding-left: 24px;
+  display: flex;
+  line-height: 32px;
+`;
+  const StyledMenulink = (0, _styledComponents2.default)(_MenuLink2.default)`
+  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(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: clickMenuAction,
+      isInMobileMenu: true
+    }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
+      size: "24px",
+      color: _styles.COLORS.neutral_600
+    })), /*#__PURE__*/React.createElement("h3", null, accountMenuHeader), /*#__PURE__*/React.createElement(_CommonStyles.Right, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: clickMenuAction,
+      isInMobileMenu: true
+    }, /*#__PURE__*/React.createElement(_SystemIcons.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.Button, {
+      style: {
+        width: '90%',
+        margin: '0 auto'
+      },
+      variant: "secondary",
+      onClick: e => {
+        e.preventDefault();
+        signOut(e);
+      }
+    }, signOutLabel)));
+  };
+
+  MobileUserMenu.propTypes = {
+    accountMenuHeader: _propTypes2.default.string.isRequired,
+    firstName: _propTypes2.default.string.isRequired,
+    lastName: _propTypes2.default.string.isRequired,
+    email: _propTypes2.default.string.isRequired,
+    organizationName: _propTypes2.default.string.isRequired,
+    clickMenuAction: _propTypes2.default.func.isRequired,
+    accountSection: _propTypes2.default.array,
+    organizationSection: _propTypes2.default.array,
+    supportSection: _propTypes2.default.array,
+    signOut: _propTypes2.default.func,
+    signOutLabel: _propTypes2.default.string
+  };
+  exports.default = MobileUserMenu;
+});
+//# sourceMappingURL=MobileUserMenu.js.map

package/dist/umd/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","ComponentSStyling","ComponentTextStyle","LabelLine","span","neutral_20","StyledMenulink","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","MobileUserMenu","React","e","document","element","label","display","margin","width"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../../styles';\r\n\r\nimport MenuLink from './MenuLink';\r\nimport {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"}