@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

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';\nimport styled, { keyframes } from 'styled-components';\n\nimport { NavOption } from '../types';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { VerticalTabs } from '../Tabs';\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\nimport { Size } from '..';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.dropdown};\n\n  top: 12px;\n  ${BREAKPOINTS.SMALL} {\n    top: 18px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\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`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: NavOption[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\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  React.useEffect(() => {\n    const list = navigationOptions?.map(n => {\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\n    }) as VerticalTabEntry[];\n    setEntries(list);\n  }, [navigationOptions]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <MenuSection>\n        <MenuSectionList>\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default ExtendedMainMenu;\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';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './MainMenu';\nimport Actions from './Actions';\nimport { PageWidth } from '../Layouts';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport RightSideNav from './RightSideNav';\nimport { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';\nimport MobileMenu from './mobile/MobileMenu';\nimport { Menu } from '../icons/systemicons/SystemIcons';\nimport UserMenu from './UserMenu/UserMenu';\nimport useClickOutside from '../hooks/useClickOutside';\nimport { Menu as MobileMenuWrapper } from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  \n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n  \n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  margin: 0 0 0 auto;\n`;\n\nconst MenuWrapper = styled.div<MenuWrapperProps>`\n  background: rgba(0, 0, 0, 0.5);\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: hidden;\n  bottom: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nconst UserMenuWrapper = styled.div<UserMenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n  position: absolute;\n  right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  top: 56px;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface UserMenuWrapperProps {\n  floatRight: boolean;\n  offsetRight: number | null | undefined;\n}\n\nconst HamburgerButton = styled.button`\n  border-width: 0;\n  background-color: ${COLORS.white};\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\ntype Props = {\n  name?: string;\n  mainNavigationOptions?: NavOption[];\n  secondaryNavigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n  actions?: ActionOptions;\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  organizationName?: string;\n  signout?: (e: any) => void;\n  isAuthenticated?: boolean;\n  mobileActions?: ActionOptions;\n  notifications?: NavOption[];\n  switcherAction?: () => void;\n  reverseRightSideOrder?: boolean;\n  showBetaTag?: boolean;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  accountMenuHeader?: string;\n  signOutLabel?: string;\n  useUserMenu?: boolean;\n  trackLogoClick?: () => void;\n  mainLogoTo?: string;\n  testId?: string;\n  useMaxWidth?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n  name,\n  mainNavigationOptions,\n  secondaryNavigationOptions,\n  secondaryButton,\n  actions,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  signout,\n  isAuthenticated,\n  mobileActions,\n  notifications,\n  switcherAction,\n  reverseRightSideOrder = false,\n  showBetaTag,\n  accountSection,\n  organizationSection,\n  supportSection,\n  accountMenuHeader,\n  signOutLabel,\n  useUserMenu,\n  mainLogoTo,\n  trackLogoClick,\n  testId,\n  useMaxWidth = true,\n}: Props): React.ReactElement<Props> => {\n  const [showMenu, setShowMenu] = React.useState(false);\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState<boolean>(false);\n  const menuRef = React.useRef(null);\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n  const handleClickMenuAction = () => {\n    setShowMenu(false);\n  };\n\n  useClickOutside(userMenuRef, () => (showUserMenu ? setShowUserMenu(false) : null));\n  useClickOutside(menuRef, () => {\n    if (showMenu) {\n      setShowMobileUserMenu(false);\n      setShowMenu(false);\n    }\n  });\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;\n      if (right) {\n        setAvatarRight(right);\n      }\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={showBetaTag} onClick={trackLogoClick} to={mainLogoTo} />\n            {isAuthenticated && <MainMenu navigationOptions={mainNavigationOptions || []} rightSideRef={rightSideRef} />}\n            <RightSide className=\"GlobalNavigationRightSide\" ref={rightSideRef}>\n              {reverseRightSideOrder ? (\n                <>\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                </>\n              ) : (\n                <>\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\n                  <Actions\n                    actions={actions}\n                    firstName={firstName || ''}\n                    lastName={lastName || ''}\n                    hideOnLowWidth={true}\n                    useUserMenu={useUserMenu}\n                    setShowUserMenu={setShowUserMenu}\n                  />\n                </>\n              )}\n              <HamburgerButton onClick={() => setShowMenu(!showMenu)} hidden={!isAuthenticated}>\n                <Menu size=\"24px\" />\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MenuWrapper className={showMenu ? 'open' : 'closed'} isVisible={showMenu}>\n        <MobileMenuWrapper ref={menuRef} onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n          <MobileMenu\n            name={name || ''}\n            clickMenuAction={() => {\n              setShowMobileUserMenu(false);\n              handleClickMenuAction();\n            }}\n            navigationOptions={mainNavigationOptions || []}\n            secondaryNavigationOptions={secondaryNavigationOptions}\n            secondaryButton={secondaryButton}\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            signout={signout}\n            notifications={notifications}\n            actions={mobileActions}\n            switcherAction={switcherAction}\n            isAuthenticated={isAuthenticated}\n            accountSection={accountSection || []}\n            organizationSection={organizationSection || []}\n            supportSection={supportSection || []}\n            accountMenuHeader={accountMenuHeader || ''}\n            signOutLabel={signOutLabel || ''}\n            organizationName={organizationName || ''}\n            useUserMenu={useUserMenu}\n            showUserMenu={showMobileUserMenu}\n            setShowUserMenu={setShowMobileUserMenu}\n          />\n        </MobileMenuWrapper>\n      </MenuWrapper>\n      {useUserMenu && (\n        <UserMenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : 'closed'} floatRight={false} offsetRight={avatarRight} data-testid=\"testUserMenuWrapper\">\n          <UserMenu\n            firstName={firstName || ''}\n            lastName={lastName || ''}\n            email={email || ''}\n            organizationName={organizationName || ''}\n            clickMenuAction={() => setShowUserMenu(false)}\n            accountSection={accountSection}\n            organizationSection={organizationSection}\n            supportSection={supportSection}\n            signOut={signout}\n            signOutLabel={signOutLabel || ''}\n          />\n        </UserMenuWrapper>\n      )}\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}