@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/umd/GlobalNavigationBar/ExtendedMainMenu.js

@@ -0,0 +1,192 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Tabs", "..", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Tabs"), require(".."), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Tabs, global._, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Tabs, _, _zIndexes) {
+  "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 flowDown = _styledComponents.keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+  const Menu = _styledComponents2.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: ${_styles.COLORS.white};
+  box-sizing: border-box;
+  display: none;
+  right: -8px;
+  min-width: 300px;
+  -webkit-animation: ${flowDown} 0.2s ease-in-out;
+  animation: ${flowDown} 0.2s ease-in-out;
+  position: absolute;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  z-index: ${_zIndexes.Z_INDEXES.dropdown};
+
+  top: 12px;
+  ${_styles.BREAKPOINTS.SMALL} {
+    top: 18px;
+  }
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    top: 24px;
+  }
+
+  .open & {
+    display: block;
+  }
+`;
+  const MenuSection = _styledComponents2.default.li`
+  padding: 8px 0;
+  position: relative;
+
+  &:not(:first-of-type)::before {
+    content: '';
+    position: absolute;
+    background: ${_styles.COLORS.neutral_100};
+    height: 1px;
+    top: 0;
+    left: 16px;
+    right: 16px;
+  }
+
+  .disabled-link {
+    color: #21212150;
+    pointer-events: none;
+    key-events: none;
+  }
+`;
+  const MenuSectionList = _styledComponents2.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0 2px;
+`;
+
+  const ExtendedMainMenu = ({
+    clickMenuAction,
+    navigationOptions
+  }) => {
+    const [entries, setEntries] = React.useState([]);
+    React.useEffect(() => {
+      function handleKeyPress(e) {
+        if (e.keyCode === 27) {
+          clickMenuAction();
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyPress, false);
+      return () => {
+        document.removeEventListener('keydown', handleKeyPress, false);
+      };
+    }, [clickMenuAction]);
+    React.useEffect(() => {
+      const list = navigationOptions?.map(n => {
+        return {
+          requiredLine: n.label,
+          to: n.to,
+          disabled: n.disabled,
+          onClick: n.onClick,
+          exact: n.exact
+        };
+      });
+      setEntries(list);
+    }, [navigationOptions]);
+    return /*#__PURE__*/React.createElement(Menu, {
+      onClick: clickMenuAction,
+      role: "menu",
+      "aria-labelledby": "UserMenuButton"
+    }, /*#__PURE__*/React.createElement(MenuSection, null, /*#__PURE__*/React.createElement(MenuSectionList, null, /*#__PURE__*/React.createElement(_Tabs.VerticalTabs, {
+      key: "ExtendedMenu",
+      entries: entries,
+      size: _.Size.Medium
+    }))));
+  };
+
+  ExtendedMainMenu.propTypes = {
+    clickMenuAction: _propTypes2.default.func.isRequired,
+    navigationOptions: _propTypes2.default.array.isRequired
+  };
+  exports.default = ExtendedMainMenu;
+});
+//# sourceMappingURL=ExtendedMainMenu.js.map

package/dist/umd/GlobalNavigationBar/ExtendedMainMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","clickMenuAction","navigationOptions","ExtendedMainMenu","React","e","document","list","n","requiredLine","to","disabled","onClick","exact","setEntries","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,QAAQ,GAAGC,2BAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA;AACA;AACA,uBAAuBN,QAAS;AAChC,eAAeA,QAAS;AACxB;AACA;AACA;AACA,aAAaO,oBAAUC,QAAS;AAChC;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA,IAAID,oBAAYE,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AA1BA,CAAA;AA6BA,QAAMC,WAAW,GAAGT,2BAAOU,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,eAAOS,WAAY;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMC,eAAe,GAAGZ,2BAAOC,EAAG;AAClC;AACA;AACA;AAHA,CAAA;;AAWA,QAAMc,gBAAgB,GAAG,CAAC;AAAA,IAAA,eAAA;AAAmBD,IAAAA;AAAnB,GAAD,KAAmD;AAC1E,UAAM,CAAA,OAAA,EAAA,UAAA,IAAwBE,KAAK,CAALA,QAAAA,CAA9B,EAA8BA,CAA9B;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,UAAAA,eAAe;AAChB;AACF;;AAEDK,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AADF,OAAA;AARFF,KAAAA,EAWG,CAXHA,eAWG,CAXHA;AAaAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,YAAMG,IAAI,GAAG,iBAAiB,EAAjB,GAAA,CAAuBC,CAAC,IAAI;AACvC,eAAO;AAAEC,UAAAA,YAAY,EAAED,CAAC,CAAjB,KAAA;AAAyBE,UAAAA,EAAE,EAAEF,CAAC,CAA9B,EAAA;AAAmCG,UAAAA,QAAQ,EAAEH,CAAC,CAA9C,QAAA;AAAyDI,UAAAA,OAAO,EAAEJ,CAAC,CAAnE,OAAA;AAA6EK,UAAAA,KAAK,EAAEL,CAAC,CAACK;AAAtF,SAAP;AADF,OAAa,CAAb;AAGAC,MAAAA,UAAU,CAAVA,IAAU,CAAVA;AAJFV,KAAAA,EAKG,CALHA,iBAKG,CALHA;AAOA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,OAAO,EAAb,eAAA;AAAgC,MAAA,IAAI,EAApC,MAAA;AAA4C,yBAAgB;AAA5D,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAc,MAAA,GAAG,EAAjB,cAAA;AAAiC,MAAA,OAAO,EAAxC,OAAA;AAAmD,MAAA,IAAI,EAAEW,OAAKC;AAA9D,KAAA,CADF,CADF,CADF,CADF;AAtBF,GAAA;;;AAJEf,IAAAA,e;AACAC,IAAAA,iB;;oBAoCF,gB","sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\n\r\nimport { NavOption } from '../types';\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { VerticalTabs } from '../Tabs';\r\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\r\nimport { Size } from '..';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\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  right: -8px;\r\n  min-width: 300px;\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: 0px 4px 8px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  z-index: ${Z_INDEXES.dropdown};\r\n\r\n  top: 12px;\r\n  ${BREAKPOINTS.SMALL} {\r\n    top: 18px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    top: 24px;\r\n  }\r\n\r\n  .open & {\r\n    display: block;\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 2px;\r\n`;\r\n\r\ntype Props = {\r\n  clickMenuAction: () => void;\r\n  navigationOptions: NavOption[];\r\n};\r\n\r\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\r\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\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  React.useEffect(() => {\r\n    const list = navigationOptions?.map(n => {\r\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\r\n    }) as VerticalTabEntry[];\r\n    setEntries(list);\r\n  }, [navigationOptions]);\r\n\r\n  return (\r\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <MenuSection>\r\n        <MenuSectionList>\r\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\r\n        </MenuSectionList>\r\n      </MenuSection>\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default ExtendedMainMenu;\r\n"],"file":"ExtendedMainMenu.js"}

package/dist/umd/GlobalNavigationBar/GlobalNavigationBar.js

@@ -0,0 +1,360 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "./Logo", "./MainMenu", "./Actions", "../Layouts", "../styles", "./RightSideNav", "./mobile/MobileMenu", "../icons/systemicons/SystemIcons", "./UserMenu/UserMenu", "../hooks/useClickOutside", "./mobile/CommonStyles", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("./Logo"), require("./MainMenu"), require("./Actions"), require("../Layouts"), require("../styles"), require("./RightSideNav"), require("./mobile/MobileMenu"), require("../icons/systemicons/SystemIcons"), require("./UserMenu/UserMenu"), require("../hooks/useClickOutside"), require("./mobile/CommonStyles"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Logo, global.MainMenu, global.Actions, global.Layouts, global.styles, global.RightSideNav, global.MobileMenu, global.SystemIcons, global.UserMenu, global.useClickOutside, global.CommonStyles, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _Logo, _MainMenu, _Actions, _Layouts, _styles, _RightSideNav, _MobileMenu, _SystemIcons, _UserMenu, _useClickOutside, _CommonStyles, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _Logo2 = _interopRequireDefault(_Logo);
+
+  var _MainMenu2 = _interopRequireDefault(_MainMenu);
+
+  var _Actions2 = _interopRequireDefault(_Actions);
+
+  var _RightSideNav2 = _interopRequireDefault(_RightSideNav);
+
+  var _MobileMenu2 = _interopRequireDefault(_MobileMenu);
+
+  var _UserMenu2 = _interopRequireDefault(_UserMenu);
+
+  var _useClickOutside2 = _interopRequireDefault(_useClickOutside);
+
+  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 HeaderWrapper = _styledComponents2.default.header`
+  background: white;
+  border-bottom: 1px solid ${_styles.COLORS.neutral_200};
+  
+  z-index: ${_zIndexes.Z_INDEXES.sticky_menu};
+  position: relative;
+  
+  height: 48px;
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    height: 56px;
+  }
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    height: auto;
+  }
+
+  @media print {
+    border-bottom: none;
+  }
+`;
+  const RowLayout = _styledComponents2.default.div`
+  display: flex;
+`;
+  const RightSide = _styledComponents2.default.div`
+  display: flex;
+  margin: 0 0 0 auto;
+`;
+  const MenuWrapper = _styledComponents2.default.div`
+  background: rgba(0, 0, 0, 0.5);
+  display: ${props => props.isVisible ? 'flex' : 'none'};
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: hidden;
+  bottom: 0;
+  right: 0;
+  z-index: ${_zIndexes.Z_INDEXES.backdrop};
+`;
+  const UserMenuWrapper = _styledComponents2.default.div`
+  background-color: ${_styles.COLORS.white};
+  display: flex;
+  margin-left: ${props => props.floatRight ? 'auto' : 'unset'};
+  position: absolute;
+  right: ${props => props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%'};
+  top: 56px;
+
+  &:focus-within,
+  &:hover,
+  &.open {
+    background: ${_styles.COLORS.white};
+  }
+`;
+  const HamburgerButton = _styledComponents2.default.button`
+  border-width: 0;
+  background-color: ${_styles.COLORS.white};
+  height: 48px;
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    height: 56px;
+  }
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    display: none;
+  }
+`;
+  /**
+   * @param props
+   * @constructor
+   * @description This component is a global navigation header bar
+   */
+
+  const GlobalNavigationBar = ({
+    name,
+    mainNavigationOptions,
+    secondaryNavigationOptions,
+    secondaryButton,
+    actions,
+    firstName,
+    lastName,
+    email,
+    organizationName,
+    signout,
+    isAuthenticated,
+    mobileActions,
+    notifications,
+    switcherAction,
+    reverseRightSideOrder = false,
+    showBetaTag,
+    accountSection,
+    organizationSection,
+    supportSection,
+    accountMenuHeader,
+    signOutLabel,
+    useUserMenu,
+    mainLogoTo,
+    trackLogoClick,
+    testId,
+    useMaxWidth = true
+  }) => {
+    const [showMenu, setShowMenu] = React.useState(false);
+    const [showUserMenu, setShowUserMenu] = React.useState(false);
+    const [showMobileUserMenu, setShowMobileUserMenu] = React.useState(false);
+    const menuRef = React.useRef(null);
+    const userMenuRef = React.useRef(null);
+    const rightSideRef = React.useRef(null);
+    const [avatarRight, setAvatarRight] = React.useState(0);
+
+    const handleClickMenuAction = () => {
+      setShowMenu(false);
+    };
+
+    (0, _useClickOutside2.default)(userMenuRef, () => showUserMenu ? setShowUserMenu(false) : null);
+    (0, _useClickOutside2.default)(menuRef, () => {
+      if (showMenu) {
+        setShowMobileUserMenu(false);
+        setShowMenu(false);
+      }
+    });
+    React.useEffect(() => {
+      const handleResize = () => {
+        const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;
+
+        if (right) {
+          setAvatarRight(right);
+        }
+      };
+
+      handleResize();
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderWrapper, {
+      "data-testid": testId
+    }, /*#__PURE__*/React.createElement(_Layouts.PageWidth, {
+      useMaxWidth: useMaxWidth
+    }, /*#__PURE__*/React.createElement(RowLayout, null, /*#__PURE__*/React.createElement(_Logo2.default, {
+      name: name || '',
+      showBetaTag: showBetaTag,
+      onClick: trackLogoClick,
+      to: mainLogoTo
+    }), isAuthenticated && /*#__PURE__*/React.createElement(_MainMenu2.default, {
+      navigationOptions: mainNavigationOptions || [],
+      rightSideRef: rightSideRef
+    }), /*#__PURE__*/React.createElement(RightSide, {
+      className: "GlobalNavigationRightSide",
+      ref: rightSideRef
+    }, reverseRightSideOrder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Actions2.default, {
+      actions: actions,
+      firstName: firstName || '',
+      lastName: lastName || '',
+      hideOnLowWidth: true,
+      useUserMenu: useUserMenu,
+      setShowUserMenu: setShowUserMenu
+    }), /*#__PURE__*/React.createElement(_RightSideNav2.default, {
+      navigationOptions: secondaryNavigationOptions,
+      secondaryButton: secondaryButton
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_RightSideNav2.default, {
+      navigationOptions: secondaryNavigationOptions,
+      secondaryButton: secondaryButton
+    }), /*#__PURE__*/React.createElement(_Actions2.default, {
+      actions: actions,
+      firstName: firstName || '',
+      lastName: lastName || '',
+      hideOnLowWidth: true,
+      useUserMenu: useUserMenu,
+      setShowUserMenu: setShowUserMenu
+    })), /*#__PURE__*/React.createElement(HamburgerButton, {
+      onClick: () => setShowMenu(!showMenu),
+      hidden: !isAuthenticated
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Menu, {
+      size: "24px"
+    })))))), /*#__PURE__*/React.createElement(MenuWrapper, {
+      className: showMenu ? 'open' : 'closed',
+      isVisible: showMenu
+    }, /*#__PURE__*/React.createElement(_CommonStyles.Menu, {
+      ref: menuRef,
+      onClick: () => {},
+      role: "menu",
+      "aria-labelledby": "UserMenuButton"
+    }, /*#__PURE__*/React.createElement(_MobileMenu2.default, {
+      name: name || '',
+      clickMenuAction: () => {
+        setShowMobileUserMenu(false);
+        handleClickMenuAction();
+      },
+      navigationOptions: mainNavigationOptions || [],
+      secondaryNavigationOptions: secondaryNavigationOptions,
+      secondaryButton: secondaryButton,
+      firstName: firstName || '',
+      lastName: lastName || '',
+      email: email || '',
+      signout: signout,
+      notifications: notifications,
+      actions: mobileActions,
+      switcherAction: switcherAction,
+      isAuthenticated: isAuthenticated,
+      accountSection: accountSection || [],
+      organizationSection: organizationSection || [],
+      supportSection: supportSection || [],
+      accountMenuHeader: accountMenuHeader || '',
+      signOutLabel: signOutLabel || '',
+      organizationName: organizationName || '',
+      useUserMenu: useUserMenu,
+      showUserMenu: showMobileUserMenu,
+      setShowUserMenu: setShowMobileUserMenu
+    }))), useUserMenu && /*#__PURE__*/React.createElement(UserMenuWrapper, {
+      ref: userMenuRef,
+      className: showUserMenu ? 'open' : 'closed',
+      floatRight: false,
+      offsetRight: avatarRight,
+      "data-testid": "testUserMenuWrapper"
+    }, /*#__PURE__*/React.createElement(_UserMenu2.default, {
+      firstName: firstName || '',
+      lastName: lastName || '',
+      email: email || '',
+      organizationName: organizationName || '',
+      clickMenuAction: () => setShowUserMenu(false),
+      accountSection: accountSection,
+      organizationSection: organizationSection,
+      supportSection: supportSection,
+      signOut: signout,
+      signOutLabel: signOutLabel || ''
+    })));
+  };
+
+  GlobalNavigationBar.propTypes = {
+    name: _propTypes2.default.string,
+    mainNavigationOptions: _propTypes2.default.array,
+    secondaryNavigationOptions: _propTypes2.default.array,
+    firstName: _propTypes2.default.string,
+    lastName: _propTypes2.default.string,
+    email: _propTypes2.default.string,
+    organizationName: _propTypes2.default.string,
+    signout: _propTypes2.default.func,
+    isAuthenticated: _propTypes2.default.bool,
+    notifications: _propTypes2.default.array,
+    switcherAction: _propTypes2.default.func,
+    reverseRightSideOrder: _propTypes2.default.bool,
+    showBetaTag: _propTypes2.default.bool,
+    accountSection: _propTypes2.default.array,
+    organizationSection: _propTypes2.default.array,
+    supportSection: _propTypes2.default.array,
+    accountMenuHeader: _propTypes2.default.string,
+    signOutLabel: _propTypes2.default.string,
+    useUserMenu: _propTypes2.default.bool,
+    trackLogoClick: _propTypes2.default.func,
+    mainLogoTo: _propTypes2.default.string,
+    testId: _propTypes2.default.string,
+    useMaxWidth: _propTypes2.default.bool
+  };
+  exports.default = GlobalNavigationBar;
+});
+//# sourceMappingURL=GlobalNavigationBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","RightSide","MenuWrapper","props","backdrop","UserMenuWrapper","white","window","HamburgerButton","button","name","mainNavigationOptions","secondaryNavigationOptions","firstName","lastName","email","organizationName","signout","isAuthenticated","notifications","switcherAction","reverseRightSideOrder","showBetaTag","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","useUserMenu","trackLogoClick","mainLogoTo","testId","useMaxWidth","GlobalNavigationBar","React","menuRef","userMenuRef","rightSideRef","handleClickMenuAction","setShowMenu","useClickOutside","showUserMenu","setShowUserMenu","setShowMobileUserMenu","handleResize","right","document","setAvatarRight","secondaryButton","showMenu"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport Logo from './Logo';\r\nimport MainMenu from './MainMenu';\r\nimport Actions from './Actions';\r\nimport { PageWidth } from '../Layouts';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\nimport RightSideNav from './RightSideNav';\r\nimport { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';\r\nimport MobileMenu from './mobile/MobileMenu';\r\nimport { Menu } from '../icons/systemicons/SystemIcons';\r\nimport UserMenu from './UserMenu/UserMenu';\r\nimport useClickOutside from '../hooks/useClickOutside';\r\nimport { Menu as MobileMenuWrapper } from './mobile/CommonStyles';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst HeaderWrapper = styled.header`\r\n  background: white;\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  \r\n  z-index: ${Z_INDEXES.sticky_menu};\r\n  position: relative;\r\n  \r\n  height: 48px;\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  @media all and (-ms-high-contrast: none) {\r\n    height: auto;\r\n  }\r\n\r\n  @media print {\r\n    border-bottom: none;\r\n  }\r\n`;\r\n\r\nconst RowLayout = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nconst RightSide = styled.div`\r\n  display: flex;\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nconst MenuWrapper = styled.div<MenuWrapperProps>`\r\n  background: rgba(0, 0, 0, 0.5);\r\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\r\n  position: fixed;\r\n  left: 0;\r\n  top: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow-y: hidden;\r\n  bottom: 0;\r\n  right: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n`;\r\n\r\nconst UserMenuWrapper = styled.div<UserMenuWrapperProps>`\r\n  background-color: ${COLORS.white};\r\n  display: flex;\r\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\r\n  position: absolute;\r\n  right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\r\n  top: 56px;\r\n\r\n  &:focus-within,\r\n  &:hover,\r\n  &.open {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\ninterface UserMenuWrapperProps {\r\n  floatRight: boolean;\r\n  offsetRight: number | null | undefined;\r\n}\r\n\r\nconst HamburgerButton = styled.button`\r\n  border-width: 0;\r\n  background-color: ${COLORS.white};\r\n  height: 48px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: 56px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    height: 64px;\r\n  }\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: none;\r\n  }\r\n`;\r\n\r\ninterface MenuWrapperProps {\r\n  isVisible: boolean;\r\n}\r\n\r\ntype Props = {\r\n  name?: string;\r\n  mainNavigationOptions?: NavOption[];\r\n  secondaryNavigationOptions?: NavOption[];\r\n  secondaryButton?: NavButton;\r\n  actions?: ActionOptions;\r\n  firstName?: string;\r\n  lastName?: string;\r\n  email?: string;\r\n  organizationName?: string;\r\n  signout?: (e: any) => void;\r\n  isAuthenticated?: boolean;\r\n  mobileActions?: ActionOptions;\r\n  notifications?: NavOption[];\r\n  switcherAction?: () => void;\r\n  reverseRightSideOrder?: boolean;\r\n  showBetaTag?: boolean;\r\n  accountSection?: UserMenuItem[];\r\n  organizationSection?: UserMenuItem[];\r\n  supportSection?: UserMenuItem[];\r\n  accountMenuHeader?: string;\r\n  signOutLabel?: string;\r\n  useUserMenu?: boolean;\r\n  trackLogoClick?: () => void;\r\n  mainLogoTo?: string;\r\n  testId?: string;\r\n  useMaxWidth?: boolean;\r\n};\r\n\r\n/**\r\n * @param props\r\n * @constructor\r\n * @description This component is a global navigation header bar\r\n */\r\nconst GlobalNavigationBar = ({\r\n  name,\r\n  mainNavigationOptions,\r\n  secondaryNavigationOptions,\r\n  secondaryButton,\r\n  actions,\r\n  firstName,\r\n  lastName,\r\n  email,\r\n  organizationName,\r\n  signout,\r\n  isAuthenticated,\r\n  mobileActions,\r\n  notifications,\r\n  switcherAction,\r\n  reverseRightSideOrder = false,\r\n  showBetaTag,\r\n  accountSection,\r\n  organizationSection,\r\n  supportSection,\r\n  accountMenuHeader,\r\n  signOutLabel,\r\n  useUserMenu,\r\n  mainLogoTo,\r\n  trackLogoClick,\r\n  testId,\r\n  useMaxWidth = true,\r\n}: Props): React.ReactElement<Props> => {\r\n  const [showMenu, setShowMenu] = React.useState(false);\r\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\r\n  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState<boolean>(false);\r\n  const menuRef = React.useRef(null);\r\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\r\n  const rightSideRef = React.useRef(null);\r\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\r\n\r\n  const handleClickMenuAction = () => {\r\n    setShowMenu(false);\r\n  };\r\n\r\n  useClickOutside(userMenuRef, () => (showUserMenu ? setShowUserMenu(false) : null));\r\n  useClickOutside(menuRef, () => {\r\n    if (showMenu) {\r\n      setShowMobileUserMenu(false);\r\n      setShowMenu(false);\r\n    }\r\n  });\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;\r\n      if (right) {\r\n        setAvatarRight(right);\r\n      }\r\n    };\r\n\r\n    handleResize();\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);\r\n\r\n  return (\r\n    <>\r\n      <HeaderWrapper data-testid={testId}>\r\n        <PageWidth useMaxWidth={useMaxWidth}>\r\n          <RowLayout>\r\n            <Logo name={name || ''} showBetaTag={showBetaTag} onClick={trackLogoClick} to={mainLogoTo} />\r\n            {isAuthenticated && <MainMenu navigationOptions={mainNavigationOptions || []} rightSideRef={rightSideRef} />}\r\n            <RightSide className=\"GlobalNavigationRightSide\" ref={rightSideRef}>\r\n              {reverseRightSideOrder ? (\r\n                <>\r\n                  <Actions\r\n                    actions={actions}\r\n                    firstName={firstName || ''}\r\n                    lastName={lastName || ''}\r\n                    hideOnLowWidth={true}\r\n                    useUserMenu={useUserMenu}\r\n                    setShowUserMenu={setShowUserMenu}\r\n                  />\r\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\r\n                </>\r\n              ) : (\r\n                <>\r\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\r\n                  <Actions\r\n                    actions={actions}\r\n                    firstName={firstName || ''}\r\n                    lastName={lastName || ''}\r\n                    hideOnLowWidth={true}\r\n                    useUserMenu={useUserMenu}\r\n                    setShowUserMenu={setShowUserMenu}\r\n                  />\r\n                </>\r\n              )}\r\n              <HamburgerButton onClick={() => setShowMenu(!showMenu)} hidden={!isAuthenticated}>\r\n                <Menu size=\"24px\" />\r\n              </HamburgerButton>\r\n            </RightSide>\r\n          </RowLayout>\r\n        </PageWidth>\r\n      </HeaderWrapper>\r\n      <MenuWrapper className={showMenu ? 'open' : 'closed'} isVisible={showMenu}>\r\n        <MobileMenuWrapper ref={menuRef} onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n          <MobileMenu\r\n            name={name || ''}\r\n            clickMenuAction={() => {\r\n              setShowMobileUserMenu(false);\r\n              handleClickMenuAction();\r\n            }}\r\n            navigationOptions={mainNavigationOptions || []}\r\n            secondaryNavigationOptions={secondaryNavigationOptions}\r\n            secondaryButton={secondaryButton}\r\n            firstName={firstName || ''}\r\n            lastName={lastName || ''}\r\n            email={email || ''}\r\n            signout={signout}\r\n            notifications={notifications}\r\n            actions={mobileActions}\r\n            switcherAction={switcherAction}\r\n            isAuthenticated={isAuthenticated}\r\n            accountSection={accountSection || []}\r\n            organizationSection={organizationSection || []}\r\n            supportSection={supportSection || []}\r\n            accountMenuHeader={accountMenuHeader || ''}\r\n            signOutLabel={signOutLabel || ''}\r\n            organizationName={organizationName || ''}\r\n            useUserMenu={useUserMenu}\r\n            showUserMenu={showMobileUserMenu}\r\n            setShowUserMenu={setShowMobileUserMenu}\r\n          />\r\n        </MobileMenuWrapper>\r\n      </MenuWrapper>\r\n      {useUserMenu && (\r\n        <UserMenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : 'closed'} floatRight={false} offsetRight={avatarRight} data-testid=\"testUserMenuWrapper\">\r\n          <UserMenu\r\n            firstName={firstName || ''}\r\n            lastName={lastName || ''}\r\n            email={email || ''}\r\n            organizationName={organizationName || ''}\r\n            clickMenuAction={() => setShowUserMenu(false)}\r\n            accountSection={accountSection}\r\n            organizationSection={organizationSection}\r\n            supportSection={supportSection}\r\n            signOut={signout}\r\n            signOutLabel={signOutLabel || ''}\r\n          />\r\n        </UserMenuWrapper>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default GlobalNavigationBar;\r\n"],"file":"GlobalNavigationBar.js"}