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

package/dist/umd/GlobalNavigationBar/Logo.js

@@ -0,0 +1,186 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../assets", "../styles", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../assets"), require("../styles"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.assets, global.styles, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _assets, _styles, _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 StyledLink = (0, _styledComponents2.default)(_reactRouterDom.Link)`
+  text-align: center;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  &:focus-within {
+    outline: none;
+  }
+  svg {
+    width: 66px;
+    height: 36px;
+    color: ${props => props.$color};
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      width: 88px;
+      height: 48px;
+    }
+  }
+`;
+  const LogoContainer = _styledComponents2.default.div`
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin-right: 16px;
+  box-sizing: border-box;
+  padding: 24px 0;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin-top: 8px;
+    margin-bottom: 7px;
+  }
+
+  &:focus-within {
+    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);
+    outline: none;
+  }
+`;
+  const Name = _styledComponents2.default.span`
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 1px solid ${props => props.$color || _styles.COLORS.black};
+  letter-spacing: -0.02em;
+
+  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
+
+  font-weight: 300 !important;
+  line-height: 24px !important;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin-left: 12px;
+    padding-left: 12px;
+    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
+  }
+`;
+  const BetaTag = _styledComponents2.default.span`
+  background-color: ${props => props.backgroundColor || _styles.COLORS.accent2_500};
+  padding: 4px 8px;
+  margin-left: 8px;
+  margin-top: 2px;
+  border-left: none;
+  border-radius: 2px;
+
+  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white)}
+`;
+
+  const Logo = ({
+    name,
+    showBetaTag,
+    onClick,
+    to,
+    color,
+    noSizeChangeOnMobile,
+    betaTagBackgroundColor,
+    betaTagColor
+  }) => {
+    return /*#__PURE__*/React.createElement(LogoContainer, null, /*#__PURE__*/React.createElement(StyledLink, {
+      to: to || '/',
+      onMouseDown: e => e.preventDefault(),
+      onClick: () => {
+        if (onClick) {
+          onClick();
+        }
+      },
+      $color: color
+    }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
+      $color: color,
+      noSizeChangeOnMobile: noSizeChangeOnMobile || false
+    }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
+      backgroundColor: betaTagBackgroundColor,
+      $color: betaTagColor
+    }, "BETA")));
+  };
+
+  Logo.propTypes = {
+    name: _propTypes2.default.string.isRequired,
+    showBetaTag: _propTypes2.default.bool,
+    onClick: _propTypes2.default.func,
+    to: _propTypes2.default.string,
+    color: _propTypes2.default.string,
+    noSizeChangeOnMobile: _propTypes2.default.bool,
+    betaTagBackgroundColor: _propTypes2.default.string,
+    betaTagColor: _propTypes2.default.string
+  };
+  exports.default = Logo;
+});
+//# sourceMappingURL=Logo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","color","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/umd/GlobalNavigationBar/MainMenu.js

@@ -0,0 +1,218 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NavItem", "../icons/systemicons/SystemIcons", "../styles", "./ExtendedMainMenu", "../Button"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NavItem"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./ExtendedMainMenu"), require("../Button"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NavItem, global.SystemIcons, global.styles, global.ExtendedMainMenu, global.Button);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NavItem, _SystemIcons, _styles, _ExtendedMainMenu, _Button) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _ExtendedMainMenu2 = _interopRequireDefault(_ExtendedMainMenu);
+
+  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 NavContainer = _styledComponents2.default.div`
+  display: none;
+  justify-content: center;
+  align-items: center;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    display: flex;
+  }
+
+  a {
+    text-decoration: none;
+  }
+`;
+  const NavButton = _styledComponents2.default.button`
+  background: ${_styles.COLORS.white};
+  border: 0;
+`;
+  const ExtendedMenuWrapper = _styledComponents2.default.div`
+  display: flex;
+  margin-left: ${props => props.floatRight ? 'auto' : 'unset'};
+
+  position: absolute;
+  flex-direction: column;
+  left: 290px;
+  top: 22px;
+
+  height: 0;
+  width: 0;
+
+  &:focus-within,
+  &:hover,
+  &.open {
+    background: ${_styles.COLORS.white};
+  }
+`;
+  const ExtendedSection = _styledComponents2.default.div`
+  position: relative;
+`;
+
+  const MainMenu = ({
+    navigationOptions,
+    rightSideRef
+  }) => {
+    const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);
+    const extendedMenuRef = React.useRef(null);
+    const mainMenuRef = React.useRef(null);
+    const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState(1);
+    const widthOfItem = 150;
+
+    const recalculateNumberOfItemsAllowed = () => {
+      if (rightSideRef?.current && mainMenuRef?.current) {
+        const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);
+
+        if (number !== numberOfItemsAllowed) {
+          setNumberOfItemsAllowed(number);
+        }
+      }
+    };
+
+    const handleClickExtendedMenuAction = () => {
+      setShowExtendedMenu(false);
+    };
+
+    const handleClickOutside = e => {
+      if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {
+        if (showExtendedMenu) {
+          setShowExtendedMenu(false);
+        }
+      }
+    };
+
+    React.useEffect(() => {
+      recalculateNumberOfItemsAllowed(); // Bind the event listener
+
+      document.addEventListener('click', handleClickOutside);
+      window.addEventListener('resize', recalculateNumberOfItemsAllowed);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener('click', handleClickOutside);
+        window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
+      };
+    });
+
+    const preventFocusOnClick = e => {
+      e.preventDefault();
+    };
+
+    return /*#__PURE__*/React.createElement(NavContainer, {
+      className: "GlobalNavigationMainMenu",
+      ref: mainMenuRef,
+      open: showExtendedMenu
+    }, navigationOptions?.map((no, index) => index > numberOfItemsAllowed - 2 ? null : no?.disabled ? /*#__PURE__*/React.createElement(_NavItem.NavItem, {
+      as: NavButton,
+      exact: no?.exact,
+      className: "disabled",
+      key: no?.label,
+      onMouseDown: preventFocusOnClick,
+      onClick: () => {
+        if (no?.onClick) {
+          no?.onClick();
+        }
+      }
+    }, no?.label) : /*#__PURE__*/React.createElement(_NavItem.NavItem, {
+      as: _reactRouterDom.NavLink,
+      exact: no?.exact,
+      to: no?.to || '',
+      key: no?.label,
+      onMouseDown: preventFocusOnClick,
+      onClick: () => {
+        if (no?.onClick) {
+          no?.onClick();
+        }
+      }
+    }, no?.label)), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/React.createElement(ExtendedSection, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: 'secondary',
+      shape: 'circular',
+      action: () => setShowExtendedMenu(true)
+    }, /*#__PURE__*/React.createElement(_SystemIcons.MoreHorizontal, {
+      size: "24px"
+    })), /*#__PURE__*/React.createElement(ExtendedMenuWrapper, {
+      ref: extendedMenuRef,
+      className: showExtendedMenu ? 'open' : '',
+      floatRight: false
+    }, /*#__PURE__*/React.createElement(_ExtendedMainMenu2.default, {
+      clickMenuAction: handleClickExtendedMenuAction,
+      navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
+    }))));
+  };
+
+  MainMenu.propTypes = {
+    navigationOptions: _propTypes2.default.array.isRequired
+  };
+  exports.default = MainMenu;
+});
+//# sourceMappingURL=MainMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","ExtendedSection","navigationOptions","MainMenu","rightSideRef","React","extendedMenuRef","mainMenuRef","widthOfItem","recalculateNumberOfItemsAllowed","number","Math","setNumberOfItemsAllowed","handleClickExtendedMenuAction","setShowExtendedMenu","handleClickOutside","e","document","window","preventFocusOnClick","showExtendedMenu","index","numberOfItemsAllowed","no"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { NavItem } from '../NavItem';\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { NavOption } from '../types';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../Button';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  navigationOptions: NavOption[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\n      if (showExtendedMenu) {\n        setShowExtendedMenu(false);\n      }\n    }\n  };\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  });\n\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {navigationOptions?.map((no: NavOption, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem\n            as={NavButton}\n            exact={no?.exact}\n            className=\"disabled\"\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem\n            as={NavLink}\n            exact={no?.exact}\n            to={no?.to || ''}\n            key={no?.label}\n            onMouseDown={preventFocusOnClick}\n            onClick={() => {\n              if (no?.onClick) {\n                no?.onClick();\n              }\n            }}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => setShowExtendedMenu(true)}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.js"}

package/dist/umd/GlobalNavigationBar/RightSideNav.js

@@ -0,0 +1,155 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../NavItem", "../styles", "../Button", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../NavItem"), require("../styles"), require("../Button"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.NavItem, global.styles, global.Button, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _NavItem, _styles, _Button, _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 NavContainer = _styledComponents2.default.div`
+  display: flex;
+  margin: auto 0 auto auto;
+  align-items: center;
+  height: 48px;
+  
+  a {
+    text-decoration: none;
+  }
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    height: 56px;
+  }
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+
+  button,
+  div {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`;
+  const SecondaryButton = (0, _styledComponents2.default)(_Button.Button)`
+  height: 40px;
+  margin: 0 8px;
+
+  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset')}
+`;
+
+  const RightSideNav = ({
+    navigationOptions,
+    secondaryButton
+  }) => {
+    const preventFocusOnClick = e => {
+      e.preventDefault();
+    };
+
+    const getNavItem = navOption => {
+      if (navOption?.disabled) {
+        return /*#__PURE__*/React.createElement(_NavItem.NavItem, {
+          as: _Button.Button,
+          className: "disabled",
+          key: navOption?.label
+        }, navOption?.label);
+      } else {
+        return /*#__PURE__*/React.createElement(_NavItem.NavItem, {
+          as: _reactRouterDom.NavLink,
+          exact: navOption?.exact,
+          to: navOption?.to || '',
+          key: navOption?.label,
+          onMouseDown: preventFocusOnClick,
+          onClick: () => {
+            if (navOption?.onClick) {
+              navOption?.onClick();
+            }
+          }
+        }, navOption?.label);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(NavContainer, null, navigationOptions?.reverse().map(no => getNavItem(no)), secondaryButton && /*#__PURE__*/React.createElement(SecondaryButton, {
+      variant: "secondary",
+      onClick: secondaryButton?.action
+    }, secondaryButton.label));
+  };
+
+  RightSideNav.propTypes = {
+    navigationOptions: _propTypes2.default.array
+  };
+  exports.default = RightSideNav;
+});
+//# sourceMappingURL=RightSideNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","ComponentMStyling","ComponentTextStyle","navigationOptions","RightSideNav","secondaryButton","preventFocusOnClick","e","getNavItem","navOption","label","no","action"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,YAAY,GAAGC,2BAAOC,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA,IAAID,oBAAYE,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,CAAA;AAyBA,QAAMC,eAAe,GAAGL,gCAAM,cAANA,CAAe;AACvC;AACA;AACA;AACA,IAAIM,mCAAkBC,2BAAD,IAAjBD,EAAiB,OAAjBA,CAAoD;AAJxD,CAAA;;AAYA,QAAMG,YAAY,GAAG,CAAC;AAAA,IAAA,iBAAA;AAAqBC,IAAAA;AAArB,GAAD,KAA8E;AACjG,UAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,MAAAA,CAAC,CAADA,cAAAA;AADF,KAAA;;AAGA,UAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,UAAIA,SAAS,EAAb,QAAA,EAAyB;AACvB,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAS,UAAA,EAAE,EAAX,cAAA;AAAqB,UAAA,SAAS,EAA9B,UAAA;AAA0C,UAAA,GAAG,EAAEA,SAAS,EAAEC;AAA1D,SAAA,EACGD,SAAS,EAFd,KACE,CADF;AADF,OAAA,MAMO;AACL,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AACE,UAAA,EAAE,EADJ,uBAAA;AAEE,UAAA,KAAK,EAAEA,SAAS,EAFlB,KAAA;AAGE,UAAA,EAAE,EAAEA,SAAS,EAATA,EAAAA,IAHN,EAAA;AAIE,UAAA,GAAG,EAAEA,SAAS,EAJhB,KAAA;AAKE,UAAA,WAAW,EALb,mBAAA;AAME,UAAA,OAAO,EAAE,MAAM;AACb,gBAAIA,SAAS,EAAb,OAAA,EAAwB;AACtBA,cAAAA,SAAS,EAATA,OAAAA;AACD;AACF;AAVH,SAAA,EAWGA,SAAS,EAZd,KACE,CADF;AAeD;AAvBH,KAAA;;AAyBA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,EACGN,iBAAiB,EAAjBA,OAAAA,GAAAA,GAAAA,CAAiCQ,EAAE,IAAIH,UAAU,CADpD,EACoD,CAAjDL,CADH,EAGGE,eAAe,IAAA,aACd,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,MAAA,OAAO,EAAxB,WAAA;AAAqC,MAAA,OAAO,EAAEA,eAAe,EAAEO;AAA/D,KAAA,EACGP,eAAe,CANxB,KAKM,CAJJ,CADF;AA7BF,GAAA;;;AAJEF,IAAAA,iB;;oBA8CF,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}