@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"ExtendedMainMenu.js","names":["React","styled","keyframes","BREAKPOINTS","COLORS","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Medium"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { VerticalTabs } from '../../Tabs';\nimport { VerticalTabEntry } from '../../Tabs';\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\nimport {Z_INDEXES} from '../../styles';\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\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: MenuNavigationItemTypeItem[];\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.action, 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"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AAEA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,SAAoCC,IAApC,QAA+C,aAA/C;AACA,SAAQC,SAAR,QAAwB,cAAxB;;AAEA,IAAMC,QAAQ,GAAGN,SAAH,qMAAd;AAWA,IAAMO,IAAI,GAAGR,MAAM,CAACS,EAAV,kiBAIYN,MAAM,CAACO,KAJnB,EASaH,QATb,EAUKA,QAVL,EAcGD,SAAS,CAACK,QAdb,EAiBNT,WAAW,CAACU,KAjBN,EAoBNV,WAAW,CAACW,MApBN,CAAV;AA6BA,IAAMC,WAAW,GAAGd,MAAM,CAACe,EAAV,kSAOCZ,MAAM,CAACa,WAPR,CAAjB;AAeA,IAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAV,+HAArB;;AAWA,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;EAAA,IAAhDC,eAAgD,QAAhDA,eAAgD;EAAA,IAA/BC,iBAA+B,QAA/BA,iBAA+B;;EAC1E,sBAA8BrB,KAAK,CAACsB,QAAN,CAAmC,EAAnC,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACAxB,KAAK,CAACyB,SAAN,CAAgB,YAAM;IACpB,SAASC,cAAT,CAAwBC,CAAxB,EAAgC;MAC9B,IAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;QACpBR,eAAe;MAChB;IACF;;IAEDS,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;IACA,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;IACD,CAFD;EAGD,CAXD,EAWG,CAACN,eAAD,CAXH;EAaApB,KAAK,CAACyB,SAAN,CAAgB,YAAM;IACpB,IAAMO,IAAI,GAAGX,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEY,GAAnB,CAAuB,UAAAC,CAAC,EAAI;MACvC,OAAO;QAAEC,YAAY,EAAED,CAAC,CAACE,KAAlB;QAAyBC,EAAE,EAAEH,CAAC,CAACG,EAA/B;QAAmCC,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;QAAyDC,OAAO,EAAEL,CAAC,CAACM,MAApE;QAA4EC,KAAK,EAAEP,CAAC,CAACO;MAArF,CAAP;IACD,CAFY,CAAb;IAGAjB,UAAU,CAACQ,IAAD,CAAV;EACD,CALD,EAKG,CAACX,iBAAD,CALH;EAOA,oBACE,KAAC,IAAD;IAAM,OAAO,EAAED,eAAf;IAAgC,IAAI,EAAC,MAArC;IAA4C,mBAAgB,gBAA5D;IAAA,uBACE,KAAC,WAAD;MAAA,uBACE,KAAC,eAAD;QAAA,uBACE,KAAC,YAAD;UAAiC,OAAO,EAAEG,OAA1C;UAAmD,IAAI,EAAEjB,IAAI,CAACoC;QAA9D,GAAkB,cAAlB;MADF;IADF;EADF,EADF;AASD,CA/BD;;;EAJEtB,e;EACAC,iB;;AAoCF,eAAeF,gBAAf"}
+{"version":3,"file":"ExtendedMainMenu.js","names":["React","styled","keyframes","BREAKPOINTS","COLORS","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Medium"],"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { VerticalTabs } from '../../Tabs';\nimport { VerticalTabEntry } from '../../Tabs';\nimport {MenuNavigationItemTypeItem, Size} from '../../index';\nimport {Z_INDEXES} from '../../styles';\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\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n`;\n\ntype Props = {\n  clickMenuAction: () => void;\n  navigationOptions: MenuNavigationItemTypeItem[];\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.action, 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"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAErD,SAASC,WAAW,EAAEC,MAAM,QAAQ,cAAc;AAClD,SAASC,YAAY,QAAQ,YAAY;AAEzC,SAAoCC,IAAI,QAAO,aAAa;AAC5D,SAAQC,SAAS,QAAO,cAAc;AAAC;AAEvC,IAAMC,QAAQ,GAAGN,SAAS,qMASzB;AAED,IAAMO,IAAI,GAAGR,MAAM,CAACS,EAAE,kiBAIAN,MAAM,CAACO,KAAK,EAKXH,QAAQ,EAChBA,QAAQ,EAIVD,SAAS,CAACK,QAAQ,EAG3BT,WAAW,CAACU,KAAK,EAGjBV,WAAW,CAACW,MAAM,CAOrB;AAED,IAAMC,WAAW,GAAGd,MAAM,CAACe,EAAE,kSAOXZ,MAAM,CAACa,WAAW,CAMnC;AAED,IAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAE,+HAIhC;AAOD,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsD;EAAA,IAAhDC,eAAe,QAAfA,eAAe;IAAEC,iBAAiB,QAAjBA,iBAAiB;EAC5D,sBAA8BrB,KAAK,CAACsB,QAAQ,CAAqB,EAAE,CAAC;IAAA;IAA7DC,OAAO;IAAEC,UAAU;EAC1BxB,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,SAASC,cAAc,CAACC,CAAM,EAAE;MAC9B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;QACpBR,eAAe,EAAE;MACnB;IACF;IAEAS,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,cAAc,EAAE,KAAK,CAAC;IAC3D,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEL,cAAc,EAAE,KAAK,CAAC;IAChE,CAAC;EACH,CAAC,EAAE,CAACN,eAAe,CAAC,CAAC;EAErBpB,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAMO,IAAI,GAAGX,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEY,GAAG,CAAC,UAAAC,CAAC,EAAI;MACvC,OAAO;QAAEC,YAAY,EAAED,CAAC,CAACE,KAAK;QAAEC,EAAE,EAAEH,CAAC,CAACG,EAAE;QAAEC,QAAQ,EAAEJ,CAAC,CAACI,QAAQ;QAAEC,OAAO,EAAEL,CAAC,CAACM,MAAM;QAAEC,KAAK,EAAEP,CAAC,CAACO;MAAM,CAAC;IACrG,CAAC,CAAuB;IACxBjB,UAAU,CAACQ,IAAI,CAAC;EAClB,CAAC,EAAE,CAACX,iBAAiB,CAAC,CAAC;EAEvB,oBACE,KAAC,IAAI;IAAC,OAAO,EAAED,eAAgB;IAAC,IAAI,EAAC,MAAM;IAAC,mBAAgB,gBAAgB;IAAA,uBAC1E,KAAC,WAAW;MAAA,uBACV,KAAC,eAAe;QAAA,uBACd,KAAC,YAAY;UAAoB,OAAO,EAAEG,OAAQ;UAAC,IAAI,EAAEjB,IAAI,CAACoC;QAAO,GAAnD,cAAc;MAAwC;IACxD;EACN,EACT;AAEX,CAAC;AAAC;EAnCAtB,eAAe;EACfC,iBAAiB;AAAA;AAoCnB,eAAeF,gBAAgB"}

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs

@@ -1,113 +1,74 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 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 _common = require("../../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["icon", "to", "exact", "disabled", "external", "action", "label", "note", "pinned"];
-
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
-
 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 items = _ref.items,
-      rightSideRef = _ref.rightSideRef;
-
+    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];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    showExtendedMenu = _React$useState2[0],
+    setShowExtendedMenu = _React$useState2[1];
   var extendedMenuRef = React.useRef(null);
   var menuButtonRef = 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];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    numberOfItemsAllowed = _React$useState4[0],
+    setNumberOfItemsAllowed = _React$useState4[1];
   var widthOfItem = 120;
-
   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, _menuButtonRef$curren;
-
     if (!(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target)) && !(menuButtonRef !== null && menuButtonRef !== void 0 && (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(e.target))) {
       setShowExtendedMenu(false);
     }
   };
-
   React.useEffect(function () {
-    recalculateNumberOfItemsAllowed(); // Bind the event listener
-
+    recalculateNumberOfItemsAllowed();
+    // Bind the event listener
     document.addEventListener('click', handleClickOutside);
     window.addEventListener('resize', recalculateNumberOfItemsAllowed);
     return function () {
@@ -119,19 +80,18 @@ var MainMenu = function MainMenu(_ref) {
   React.useEffect(function () {
     recalculateNumberOfItemsAllowed();
   }, [items.length]);
-
   var renderItem = function renderItem(item, index) {
     if (index > numberOfItemsAllowed - 2) return null;
     var icon = item.icon,
-        to = item.to,
-        exact = item.exact,
-        disabled = item.disabled,
-        external = item.external,
-        action = item.action,
-        label = item.label,
-        note = item.note,
-        pinned = item.pinned,
-        rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+      to = item.to,
+      exact = item.exact,
+      disabled = item.disabled,
+      external = item.external,
+      action = item.action,
+      label = item.label,
+      note = item.note,
+      pinned = item.pinned,
+      rest = (0, _objectWithoutProperties2.default)(item, _excluded);
     return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
       as: NavButton,
       className: "disabled",
@@ -148,7 +108,6 @@ var MainMenu = function MainMenu(_ref) {
       children: item === null || item === void 0 ? void 0 : item.label
     }), item.label);
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
@@ -176,7 +135,6 @@ var MainMenu = function MainMenu(_ref) {
     })]
   });
 };
-
 MainMenu.propTypes = {
   items: _propTypes.default.array.isRequired
 };

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"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 ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\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  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\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?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\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  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"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 ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\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  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\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?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\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  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/MainMenu.js

@@ -4,13 +4,9 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["icon", "to", "exact", "disabled", "external", "action", "label", "note", "pinned"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
@@ -28,54 +24,42 @@ var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _ta
   return props.floatRight ? 'auto' : 'unset';
 }, COLORS.white);
 var ExtendedSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-
 var MainMenu = function MainMenu(_ref) {
   var items = _ref.items,
-      rightSideRef = _ref.rightSideRef;
-
+    rightSideRef = _ref.rightSideRef;
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      showExtendedMenu = _React$useState2[0],
-      setShowExtendedMenu = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showExtendedMenu = _React$useState2[0],
+    setShowExtendedMenu = _React$useState2[1];
   var extendedMenuRef = React.useRef(null);
   var menuButtonRef = 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];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    numberOfItemsAllowed = _React$useState4[0],
+    setNumberOfItemsAllowed = _React$useState4[1];
   var widthOfItem = 120;
-
   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, _menuButtonRef$curren;
-
     if (!(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target)) && !(menuButtonRef !== null && menuButtonRef !== void 0 && (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(e.target))) {
       setShowExtendedMenu(false);
     }
   };
-
   React.useEffect(function () {
-    recalculateNumberOfItemsAllowed(); // Bind the event listener
-
+    recalculateNumberOfItemsAllowed();
+    // Bind the event listener
     document.addEventListener('click', handleClickOutside);
     window.addEventListener('resize', recalculateNumberOfItemsAllowed);
     return function () {
@@ -87,21 +71,18 @@ var MainMenu = function MainMenu(_ref) {
   React.useEffect(function () {
     recalculateNumberOfItemsAllowed();
   }, [items.length]);
-
   var renderItem = function renderItem(item, index) {
     if (index > numberOfItemsAllowed - 2) return null;
-
     var icon = item.icon,
-        to = item.to,
-        exact = item.exact,
-        disabled = item.disabled,
-        external = item.external,
-        action = item.action,
-        label = item.label,
-        note = item.note,
-        pinned = item.pinned,
-        rest = _objectWithoutProperties(item, _excluded);
-
+      to = item.to,
+      exact = item.exact,
+      disabled = item.disabled,
+      external = item.external,
+      action = item.action,
+      label = item.label,
+      note = item.note,
+      pinned = item.pinned,
+      rest = _objectWithoutProperties(item, _excluded);
     return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/_jsx(NavItem, {
       as: NavButton,
       className: "disabled",
@@ -118,7 +99,6 @@ var MainMenu = function MainMenu(_ref) {
       children: item === null || item === void 0 ? void 0 : item.label
     }), item.label);
   };
-
   return /*#__PURE__*/_jsxs(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
@@ -146,7 +126,6 @@ var MainMenu = function MainMenu(_ref) {
     })]
   });
 };
-
 MainMenu.propTypes = {
   items: _pt.array.isRequired
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"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 ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\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  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\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?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\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  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"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 ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\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  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\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?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\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  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs

@@ -1,48 +1,29 @@
 "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 _common = require("../../common");
-
 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  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
-
 var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
-
 var RightSideNav = function RightSideNav(_ref) {
   var items = _ref.items,
-      action = _ref.action;
-
+    action = _ref.action;
   var getNavItem = function getNavItem(item) {
     if (item !== null && item !== void 0 && item.disabled) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
@@ -62,7 +43,6 @@ var RightSideNav = function RightSideNav(_ref) {
       }, item === null || item === void 0 ? void 0 : item.label);
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     children: [items === null || items === void 0 ? void 0 : items.reverse().map(function (no) {
       return getNavItem(no);
@@ -73,7 +53,6 @@ var RightSideNav = function RightSideNav(_ref) {
     })]
   });
 };
-
 RightSideNav.propTypes = {
   items: _propTypes.default.array
 };

package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightSideNav.cjs","names":["NavContainer","styled","div","BREAKPOINTS","SMALL","LARGE","SecondaryButton","Button","ComponentMStyling","ComponentTextStyle","Bold","RightSideNav","items","action","getNavItem","item","disabled","label","NavLink","to","defaultOnMouseDownHandler","e","reverse","map","no"],"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../../NavItem';\nimport {BREAKPOINTS, ComponentTextStyle} from '../../styles';\nimport {Button} from '../../Button';\nimport {ComponentMStyling} from '../../styles';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuButton, MenuNavigationItemTypeItem} from '../types';\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\n  ${BREAKPOINTS.LARGE} {\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  items?: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n};\n\nconst RightSideNav = ({items, action}: Props): React.ReactElement<Props> => {\n  const getNavItem = (item: MenuNavigationItemTypeItem) => {\n    if (item?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={item?.label}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          to={item?.to || ''}\n          key={item?.label}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e:React.MouseEvent) => item.action && item.action(e)}>\n          {item?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {items?.reverse().map(no => getNavItem(no))}\n\n      {\n        action &&\n        <SecondaryButton variant=\"secondary\" onClick={action?.action}>\n          {action.label}\n        </SecondaryButton>\n      }\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;;;AAGA,IAAMA,YAAY,GAAGC,yBAAA,CAAOC,GAAV,yWAUdC,mBAAA,CAAYC,KAVE,EAcdD,mBAAA,CAAYE,KAdE,CAAlB;;AA0BA,IAAMC,eAAe,GAAG,IAAAL,yBAAA,EAAOM,cAAP,CAAH,qIAIjB,IAAAC,yBAAA,EAAkBC,0BAAA,CAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAAuD;EAAA,IAArDC,KAAqD,QAArDA,KAAqD;EAAA,IAA9CC,MAA8C,QAA9CA,MAA8C;;EAC1E,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAsC;IACvD,IAAIA,IAAJ,aAAIA,IAAJ,eAAIA,IAAI,CAAEC,QAAV,EAAoB;MAClB,oBACE,qBAAC,gBAAD;QAAS,EAAE,EAAET,cAAb;QAAqB,SAAS,EAAC,UAA/B;QAAA,UACGQ,IADH,aACGA,IADH,uBACGA,IAAI,CAAEE;MADT,GAA+CF,IAA/C,aAA+CA,IAA/C,uBAA+CA,IAAI,CAAEE,KAArD,CADF;IAKD,CAND,MAMO;MACL,oBACE,qBAAC,gBAAD;QACE,EAAE,EAAEC,uBADN;QAEE,EAAE,EAAE,CAAAH,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEI,EAAN,KAAY,EAFlB;QAIE,WAAW,EAAEC,iCAJf;QAKE,OAAO,EAAE,iBAACC,CAAD;UAAA,OAAwBN,IAAI,CAACF,MAAL,IAAeE,IAAI,CAACF,MAAL,CAAYQ,CAAZ,CAAvC;QAAA,CALX;QAAA,UAMGN,IANH,aAMGA,IANH,uBAMGA,IAAI,CAAEE;MANT,GAGOF,IAHP,aAGOA,IAHP,uBAGOA,IAAI,CAAEE,KAHb,CADF;IAUD;EACF,CAnBD;;EAoBA,oBACE,sBAAC,YAAD;IAAA,WACGL,KADH,aACGA,KADH,uBACGA,KAAK,CAAEU,OAAP,GAAiBC,GAAjB,CAAqB,UAAAC,EAAE;MAAA,OAAIV,UAAU,CAACU,EAAD,CAAd;IAAA,CAAvB,CADH,EAIIX,MAAM,iBACN,qBAAC,eAAD;MAAiB,OAAO,EAAC,WAAzB;MAAqC,OAAO,EAAEA,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAAtD;MAAA,UACGA,MAAM,CAACI;IADV,EALJ;EAAA,EADF;AAYD,CAjCD;;;EAJEL,K;;eAuCaD,Y"}
+{"version":3,"file":"RightSideNav.cjs","names":["NavContainer","styled","div","BREAKPOINTS","SMALL","LARGE","SecondaryButton","Button","ComponentMStyling","ComponentTextStyle","Bold","RightSideNav","items","action","getNavItem","item","disabled","label","NavLink","to","defaultOnMouseDownHandler","e","reverse","map","no"],"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../../NavItem';\nimport {BREAKPOINTS, ComponentTextStyle} from '../../styles';\nimport {Button} from '../../Button';\nimport {ComponentMStyling} from '../../styles';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuButton, MenuNavigationItemTypeItem} from '../types';\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\n  ${BREAKPOINTS.LARGE} {\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  items?: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n};\n\nconst RightSideNav = ({items, action}: Props): React.ReactElement<Props> => {\n  const getNavItem = (item: MenuNavigationItemTypeItem) => {\n    if (item?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={item?.label}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          to={item?.to || ''}\n          key={item?.label}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e:React.MouseEvent) => item.action && item.action(e)}>\n          {item?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {items?.reverse().map(no => getNavItem(no))}\n\n      {\n        action &&\n        <SecondaryButton variant=\"secondary\" onClick={action?.action}>\n          {action.label}\n        </SecondaryButton>\n      }\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAuD;AAAA;AAAA;AAAA;AAGvD,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,yWAU3BC,mBAAW,CAACC,KAAK,EAIjBD,mBAAW,CAACE,KAAK,CAUpB;AAED,IAAMC,eAAe,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC,qIAIlC,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAE,OAAO,CAAC,CACtD;AAOD,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA0D;EAAA,IAArDC,KAAK,QAALA,KAAK;IAAEC,MAAM,QAANA,MAAM;EAClC,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAgC,EAAK;IACvD,IAAIA,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEC,QAAQ,EAAE;MAClB,oBACE,qBAAC,gBAAO;QAAC,EAAE,EAAET,cAAO;QAAC,SAAS,EAAC,UAAU;QAAA,UACtCQ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE;MAAK,GADiCF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,CAEhD;IAEd,CAAC,MAAM;MACL,oBACE,qBAAC,gBAAO;QACN,EAAE,EAAEC,uBAAQ;QACZ,EAAE,EAAE,CAAAH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,EAAE,KAAI,EAAG;QAEnB,WAAW,EAAEC,iCAA0B;QACvC,OAAO,EAAE,iBAACC,CAAkB;UAAA,OAAKN,IAAI,CAACF,MAAM,IAAIE,IAAI,CAACF,MAAM,CAACQ,CAAC,CAAC;QAAA,CAAC;QAAA,UAC9DN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE;MAAK,GAHPF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,CAIR;IAEd;EACF,CAAC;EACD,oBACE,sBAAC,YAAY;IAAA,WACVL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,OAAO,EAAE,CAACC,GAAG,CAAC,UAAAC,EAAE;MAAA,OAAIV,UAAU,CAACU,EAAE,CAAC;IAAA,EAAC,EAGzCX,MAAM,iBACN,qBAAC,eAAe;MAAC,OAAO,EAAC,WAAW;MAAC,OAAO,EAAEA,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEA,MAAO;MAAA,UAC1DA,MAAM,CAACI;IAAK,EACG;EAAA,EAEP;AAEnB,CAAC;AAAC;EArCAL,KAAK;AAAA;AAAA,eAuCQD,YAAY;AAAA"}

package/dist/GlobalNavigationBar/desktop/RightSideNav.js

@@ -1,8 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2;
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
@@ -15,11 +13,9 @@ 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: 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  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
 var SecondaryButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, 'unset'));
-
 var RightSideNav = function RightSideNav(_ref) {
   var items = _ref.items,
-      action = _ref.action;
-
+    action = _ref.action;
   var getNavItem = function getNavItem(item) {
     if (item !== null && item !== void 0 && item.disabled) {
       return /*#__PURE__*/_jsx(NavItem, {
@@ -39,7 +35,6 @@ var RightSideNav = function RightSideNav(_ref) {
       }, item === null || item === void 0 ? void 0 : item.label);
     }
   };
-
   return /*#__PURE__*/_jsxs(NavContainer, {
     children: [items === null || items === void 0 ? void 0 : items.reverse().map(function (no) {
       return getNavItem(no);
@@ -50,7 +45,6 @@ var RightSideNav = function RightSideNav(_ref) {
     })]
   });
 };
-
 RightSideNav.propTypes = {
   items: _pt.array
 };