@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/GlobalNavigationBar/Logo.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-type LogoProps = {
-    name: string;
-    showBetaTag?: boolean;
-    onClick?: () => void;
-    to?: string;
-    color?: string;
-    noSizeChangeOnMobile?: boolean;
-    betaTagBackgroundColor?: string;
-    betaTagColor?: string;
-    inverted?: boolean;
-};
-declare const Logo: ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps) => React.ReactElement<LogoProps>;
-export default Logo;
+import * as React from 'react';
+type LogoProps = {
+    name: string;
+    showBetaTag?: boolean;
+    onClick?: () => void;
+    to?: string;
+    color?: string;
+    noSizeChangeOnMobile?: boolean;
+    betaTagBackgroundColor?: string;
+    betaTagColor?: string;
+    inverted?: boolean;
+};
+declare const Logo: ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps) => React.ReactElement<LogoProps>;
+export default Logo;

package/dist/GlobalNavigationBar/Logo.js.map

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

package/dist/GlobalNavigationBar/MainMenu.cjs

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _NavItem = require("../NavItem");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _ExtendedMainMenu = _interopRequireDefault(require("./ExtendedMainMenu"));
+
+var _Button = require("../Button");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+var NavButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 0;\n"])), _styles.COLORS.white);
+
+var ExtendedMenuWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: ", ";\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: ", ";\n  }\n"])), function (props) {
+  return props.floatRight ? 'auto' : 'unset';
+}, _styles.COLORS.white);
+
+var ExtendedSection = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+
+var MainMenu = function MainMenu(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      rightSideRef = _ref.rightSideRef;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      showExtendedMenu = _React$useState2[0],
+      setShowExtendedMenu = _React$useState2[1];
+
+  var extendedMenuRef = React.useRef(null);
+  var mainMenuRef = React.useRef(null);
+
+  var _React$useState3 = React.useState(1),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      numberOfItemsAllowed = _React$useState4[0],
+      setNumberOfItemsAllowed = _React$useState4[1];
+
+  var widthOfItem = 150;
+
+  var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
+    if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
+      var _rightSideRef$current, _mainMenuRef$current;
+
+      var number = Math.floor(((rightSideRef === null || rightSideRef === void 0 ? void 0 : (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
+
+      if (number !== numberOfItemsAllowed) {
+        setNumberOfItemsAllowed(number);
+      }
+    }
+  };
+
+  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
+    setShowExtendedMenu(false);
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    var _extendedMenuRef$curr;
+
+    if (extendedMenuRef !== null && extendedMenuRef !== void 0 && extendedMenuRef.current && !(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target))) {
+      if (showExtendedMenu) {
+        setShowExtendedMenu(false);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    recalculateNumberOfItemsAllowed(); // Bind the event listener
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
+    };
+  });
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
+    className: "GlobalNavigationMainMenu",
+    ref: mainMenuRef,
+    open: showExtendedMenu,
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no, index) {
+      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: NavButton,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        className: "disabled",
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _reactRouterDom.NavLink,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        to: (no === null || no === void 0 ? void 0 : no.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label);
+    }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExtendedSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: 'secondary',
+        shape: 'circular',
+        action: function action() {
+          return setShowExtendedMenu(true);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.MoreHorizontal, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExtendedMenuWrapper, {
+        ref: extendedMenuRef,
+        className: showExtendedMenu ? 'open' : '',
+        floatRight: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExtendedMainMenu.default, {
+          clickMenuAction: handleClickExtendedMenuAction,
+          navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
+        })
+      })]
+    })]
+  });
+};
+
+MainMenu.propTypes = {
+  navigationOptions: _propTypes.default.array.isRequired
+};
+var _default = MainMenu;
+exports.default = _default;
+//# sourceMappingURL=MainMenu.cjs.map

package/dist/GlobalNavigationBar/MainMenu.cjs.map

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

package/dist/GlobalNavigationBar/MainMenu.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { NavOption } from '../types';
+declare type Props = {
+    navigationOptions: NavOption[];
+    rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;
+};
+declare const MainMenu: ({ navigationOptions, rightSideRef }: Props) => React.ReactElement<Props>;
+export default MainMenu;

package/dist/GlobalNavigationBar/MainMenu.js

@@ -0,0 +1,140 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import * as React from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { NavItem } from '../NavItem';
+import { MoreHorizontal } from '../icons/systemicons/SystemIcons';
+import { COLORS, BREAKPOINTS } from '../styles';
+import ExtendedMainMenu from './ExtendedMainMenu';
+import { IconButton } from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var NavButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0;\n"])), COLORS.white);
+var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: ", ";\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: ", ";\n  }\n"])), function (props) {
+  return props.floatRight ? 'auto' : 'unset';
+}, COLORS.white);
+var ExtendedSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+
+var MainMenu = function MainMenu(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      rightSideRef = _ref.rightSideRef;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showExtendedMenu = _React$useState2[0],
+      setShowExtendedMenu = _React$useState2[1];
+
+  var extendedMenuRef = React.useRef(null);
+  var mainMenuRef = React.useRef(null);
+
+  var _React$useState3 = React.useState(1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      numberOfItemsAllowed = _React$useState4[0],
+      setNumberOfItemsAllowed = _React$useState4[1];
+
+  var widthOfItem = 150;
+
+  var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
+    if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
+      var _rightSideRef$current, _mainMenuRef$current;
+
+      var number = Math.floor(((rightSideRef === null || rightSideRef === void 0 ? void 0 : (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
+
+      if (number !== numberOfItemsAllowed) {
+        setNumberOfItemsAllowed(number);
+      }
+    }
+  };
+
+  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
+    setShowExtendedMenu(false);
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    var _extendedMenuRef$curr;
+
+    if (extendedMenuRef !== null && extendedMenuRef !== void 0 && extendedMenuRef.current && !(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target))) {
+      if (showExtendedMenu) {
+        setShowExtendedMenu(false);
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    recalculateNumberOfItemsAllowed(); // Bind the event listener
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
+    };
+  });
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/_jsxs(NavContainer, {
+    className: "GlobalNavigationMainMenu",
+    ref: mainMenuRef,
+    open: showExtendedMenu,
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no, index) {
+      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/_jsx(NavItem, {
+        as: NavButton,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        className: "disabled",
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label) : /*#__PURE__*/_jsx(NavItem, {
+        as: NavLink,
+        exact: no === null || no === void 0 ? void 0 : no.exact,
+        to: (no === null || no === void 0 ? void 0 : no.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (no !== null && no !== void 0 && no.onClick) {
+            no === null || no === void 0 ? void 0 : no.onClick();
+          }
+        },
+        children: no === null || no === void 0 ? void 0 : no.label
+      }, no === null || no === void 0 ? void 0 : no.label);
+    }), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        variant: 'secondary',
+        shape: 'circular',
+        action: function action() {
+          return setShowExtendedMenu(true);
+        },
+        children: /*#__PURE__*/_jsx(MoreHorizontal, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/_jsx(ExtendedMenuWrapper, {
+        ref: extendedMenuRef,
+        className: showExtendedMenu ? 'open' : '',
+        floatRight: false,
+        children: /*#__PURE__*/_jsx(ExtendedMainMenu, {
+          clickMenuAction: handleClickExtendedMenuAction,
+          navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
+        })
+      })]
+    })]
+  });
+};
+
+MainMenu.propTypes = {
+  navigationOptions: _pt.array.isRequired
+};
+export default MainMenu;
+//# sourceMappingURL=MainMenu.js.map

package/dist/GlobalNavigationBar/MainMenu.js.map

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

package/dist/GlobalNavigationBar/NavigationHelper.cjs

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavigationHelper = void 0;
+
+var _reactRouterDom = require("react-router-dom");
+
+var _reactRouter = require("react-router");
+
+var useNavigationHelper = function useNavigationHelper() {
+  var navigateHook = (0, _reactRouter.useNavigate)();
+  var location = (0, _reactRouterDom.useLocation)();
+
+  var navigate = function navigate(url, isExternal) {
+    if (isExternal) {
+      window.location.href = url;
+    } else {
+      navigateHook(url);
+    }
+  };
+
+  var isActiveRoute = function isActiveRoute(url, exact) {
+    var _location$pathname;
+
+    return !!(0, _reactRouterDom.matchPath)({
+      path: url,
+      end: exact
+    }, (_location$pathname = location.pathname) !== null && _location$pathname !== void 0 ? _location$pathname : '');
+  };
+
+  return {
+    navigate: navigate,
+    isActiveRoute: isActiveRoute
+  };
+};
+
+exports.useNavigationHelper = useNavigationHelper;
+//# sourceMappingURL=NavigationHelper.cjs.map

package/dist/GlobalNavigationBar/NavigationHelper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationHelper.cjs","names":["useNavigationHelper","navigateHook","useNavigate","location","useLocation","navigate","url","isExternal","window","href","isActiveRoute","exact","matchPath","path","end","pathname"],"sources":["../../src/GlobalNavigationBar/NavigationHelper.ts"],"sourcesContent":["import { matchPath, useLocation } from 'react-router-dom';\r\nimport { useNavigate } from 'react-router';\r\n\r\nexport const useNavigationHelper = () => {\r\n  const navigateHook = useNavigate();\r\n  const location = useLocation();\r\n\r\n  const navigate = (url: string, isExternal: boolean) => {\r\n    if (isExternal) {\r\n      window.location.href = url;\r\n    } else {\r\n      navigateHook(url);\r\n    }\r\n  };\r\n\r\n  const isActiveRoute = (url: string, exact: boolean): boolean => {\r\n    return !!matchPath({ path: url, end: exact }, location.pathname ?? '');\r\n  };\r\n\r\n  return { navigate, isActiveRoute };\r\n};\r\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;EACvC,IAAMC,YAAY,GAAG,IAAAC,wBAAA,GAArB;EACA,IAAMC,QAAQ,GAAG,IAAAC,2BAAA,GAAjB;;EAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,GAAD,EAAcC,UAAd,EAAsC;IACrD,IAAIA,UAAJ,EAAgB;MACdC,MAAM,CAACL,QAAP,CAAgBM,IAAhB,GAAuBH,GAAvB;IACD,CAFD,MAEO;MACLL,YAAY,CAACK,GAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACJ,GAAD,EAAcK,KAAd,EAA0C;IAAA;;IAC9D,OAAO,CAAC,CAAC,IAAAC,yBAAA,EAAU;MAAEC,IAAI,EAAEP,GAAR;MAAaQ,GAAG,EAAEH;IAAlB,CAAV,wBAAqCR,QAAQ,CAACY,QAA9C,mEAA0D,EAA1D,CAAT;EACD,CAFD;;EAIA,OAAO;IAAEV,QAAQ,EAARA,QAAF;IAAYK,aAAa,EAAbA;EAAZ,CAAP;AACD,CAjBM"}

package/dist/GlobalNavigationBar/NavigationHelper.d.ts

@@ -0,0 +1,4 @@
+export declare const useNavigationHelper: () => {
+    navigate: (url: string, isExternal: boolean) => void;
+    isActiveRoute: (url: string, exact: boolean) => boolean;
+};

package/dist/GlobalNavigationBar/NavigationHelper.js

@@ -0,0 +1,29 @@
+import { matchPath, useLocation } from 'react-router-dom';
+import { useNavigate } from 'react-router';
+export var useNavigationHelper = function useNavigationHelper() {
+  var navigateHook = useNavigate();
+  var location = useLocation();
+
+  var navigate = function navigate(url, isExternal) {
+    if (isExternal) {
+      window.location.href = url;
+    } else {
+      navigateHook(url);
+    }
+  };
+
+  var isActiveRoute = function isActiveRoute(url, exact) {
+    var _location$pathname;
+
+    return !!matchPath({
+      path: url,
+      end: exact
+    }, (_location$pathname = location.pathname) !== null && _location$pathname !== void 0 ? _location$pathname : '');
+  };
+
+  return {
+    navigate: navigate,
+    isActiveRoute: isActiveRoute
+  };
+};
+//# sourceMappingURL=NavigationHelper.js.map

package/dist/GlobalNavigationBar/NavigationHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationHelper.js","names":["matchPath","useLocation","useNavigate","useNavigationHelper","navigateHook","location","navigate","url","isExternal","window","href","isActiveRoute","exact","path","end","pathname"],"sources":["../../src/GlobalNavigationBar/NavigationHelper.ts"],"sourcesContent":["import { matchPath, useLocation } from 'react-router-dom';\r\nimport { useNavigate } from 'react-router';\r\n\r\nexport const useNavigationHelper = () => {\r\n  const navigateHook = useNavigate();\r\n  const location = useLocation();\r\n\r\n  const navigate = (url: string, isExternal: boolean) => {\r\n    if (isExternal) {\r\n      window.location.href = url;\r\n    } else {\r\n      navigateHook(url);\r\n    }\r\n  };\r\n\r\n  const isActiveRoute = (url: string, exact: boolean): boolean => {\r\n    return !!matchPath({ path: url, end: exact }, location.pathname ?? '');\r\n  };\r\n\r\n  return { navigate, isActiveRoute };\r\n};\r\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,WAApB,QAAuC,kBAAvC;AACA,SAASC,WAAT,QAA4B,cAA5B;AAEA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;EACvC,IAAMC,YAAY,GAAGF,WAAW,EAAhC;EACA,IAAMG,QAAQ,GAAGJ,WAAW,EAA5B;;EAEA,IAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACC,GAAD,EAAcC,UAAd,EAAsC;IACrD,IAAIA,UAAJ,EAAgB;MACdC,MAAM,CAACJ,QAAP,CAAgBK,IAAhB,GAAuBH,GAAvB;IACD,CAFD,MAEO;MACLH,YAAY,CAACG,GAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACJ,GAAD,EAAcK,KAAd,EAA0C;IAAA;;IAC9D,OAAO,CAAC,CAACZ,SAAS,CAAC;MAAEa,IAAI,EAAEN,GAAR;MAAaO,GAAG,EAAEF;IAAlB,CAAD,wBAA4BP,QAAQ,CAACU,QAArC,mEAAiD,EAAjD,CAAlB;EACD,CAFD;;EAIA,OAAO;IAAET,QAAQ,EAARA,QAAF;IAAYK,aAAa,EAAbA;EAAZ,CAAP;AACD,CAjBM"}

package/dist/GlobalNavigationBar/RightSideNav.cjs

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _NavItem = require("../NavItem");
+
+var _styles = require("../styles");
+
+var _Button = require("../Button");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+
+var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
+
+var RightSideNav = function RightSideNav(_ref) {
+  var navigationOptions = _ref.navigationOptions,
+      secondaryButton = _ref.secondaryButton;
+
+  var preventFocusOnClick = function preventFocusOnClick(e) {
+    e.preventDefault();
+  };
+
+  var getNavItem = function getNavItem(navOption) {
+    if (navOption !== null && navOption !== void 0 && navOption.disabled) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _Button.Button,
+        className: "disabled",
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+        as: _reactRouterDom.NavLink,
+        exact: navOption === null || navOption === void 0 ? void 0 : navOption.exact,
+        to: (navOption === null || navOption === void 0 ? void 0 : navOption.to) || '',
+        onMouseDown: preventFocusOnClick,
+        onClick: function onClick() {
+          if (navOption !== null && navOption !== void 0 && navOption.onClick) {
+            navOption === null || navOption === void 0 ? void 0 : navOption.onClick();
+          }
+        },
+        children: navOption === null || navOption === void 0 ? void 0 : navOption.label
+      }, navOption === null || navOption === void 0 ? void 0 : navOption.label);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
+    children: [navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.reverse().map(function (no) {
+      return getNavItem(no);
+    }), secondaryButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryButton, {
+      variant: "secondary",
+      onClick: secondaryButton === null || secondaryButton === void 0 ? void 0 : secondaryButton.action,
+      children: secondaryButton.label
+    })]
+  });
+};
+
+RightSideNav.propTypes = {
+  navigationOptions: _propTypes.default.array
+};
+var _default = RightSideNav;
+exports.default = _default;
+//# sourceMappingURL=RightSideNav.cjs.map

package/dist/GlobalNavigationBar/RightSideNav.cjs.map

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

package/dist/GlobalNavigationBar/RightSideNav.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { NavButton, NavOption } from '../types';
+declare type Props = {
+    navigationOptions?: NavOption[];
+    secondaryButton?: NavButton;
+};
+declare const RightSideNav: ({ navigationOptions, secondaryButton }: Props) => React.ReactElement<Props>;
+export default RightSideNav;