@laerdal/life-react-components 1.10.3-dev.9.full → 1.11.0-dev.10

package/dist/GlobalNavigationBar/desktop/DesktopActions.js

@@ -1,9 +1,18 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+var _excluded = ["placement", "type", "action"],
+    _excluded2 = ["placement", "type", "icon", "action"],
+    _excluded3 = ["placement", "type", "action"];
 
 var _templateObject;
 
+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 React from 'react';
 import styled from 'styled-components';
 import { IconButton } from '../../Button';
@@ -12,7 +21,7 @@ import { ProfileButton } from '../../ProfileButton';
 import { SystemIcons } from '../../icons';
 import { BREAKPOINTS } from '../../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  \n  display: none;\n  ", "{\n    display: flex;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), BREAKPOINTS.LARGE);
 var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,
       user = _ref.user,
@@ -43,47 +52,70 @@ var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [elRefs, buttons]);
 
   var renderItem = function renderItem(item, index) {
-    var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
-
     switch (item.type) {
       case 'profile':
-        return /*#__PURE__*/_jsx(ProfileButton, {
-          ref: elRefs[index],
-          hideOnLowWidth: true,
-          onClick: function onClick(e) {
-            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
-          },
-          icon: !user && /*#__PURE__*/_jsx(SystemIcons.User, {}),
-          initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
-        }, index);
+        {
+          var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
+
+          var placement = item.placement,
+              type = item.type,
+              action = item.action,
+              rest = _objectWithoutProperties(item, _excluded);
+
+          return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
+            ref: elRefs[index],
+            hideOnLowWidth: true,
+            onClick: function onClick(e) {
+              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
+            },
+            icon: !user && /*#__PURE__*/_jsx(SystemIcons.User, {}),
+            initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
+          }, rest), index);
+        }
 
       case 'action':
-        return /*#__PURE__*/_jsx(IconButton, {
-          ref: elRefs[index],
-          variant: 'secondary',
-          shape: 'circular',
-          disabled: item.disabled,
-          hideOnLowWidth: true,
-          action: function action(e) {
-            item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement = item.placement,
+              _type = item.type,
+              icon = item.icon,
+              _action = item.action,
+              _rest = _objectWithoutProperties(item, _excluded2);
+
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            hideOnLowWidth: true,
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest), {}, {
+            children: item.icon
+          }), index);
+        }
 
       case 'switcher':
-        return /*#__PURE__*/_jsx(IconButton, {
-          ref: elRefs[index],
-          variant: 'secondary',
-          shape: 'circular',
-          hideOnLowWidth: true,
-          id: "globalNavAppsButton",
-          action: function action(e) {
-            return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
-          },
-          children: /*#__PURE__*/_jsx(SwitchApp, {
-            size: "24px"
-          })
-        }, index);
+        {
+          var _placement2 = item.placement,
+              _type2 = item.type,
+              _action2 = item.action,
+              _rest2 = _objectWithoutProperties(item, _excluded3);
+
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            ref: elRefs[index],
+            variant: 'secondary',
+            shape: 'circular',
+            hideOnLowWidth: true,
+            id: "globalNavAppsButton",
+            action: function action(e) {
+              return item.action && item.action(e === null || e === void 0 ? void 0 : e.target);
+            }
+          }, _rest2), {}, {
+            children: /*#__PURE__*/_jsx(SwitchApp, {
+              size: "24px"
+            })
+          }), index);
+        }
     }
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["React","styled","IconButton","SwitchApp","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","MEDIUM","DesktopActions","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","e","action","target","firstName","charAt","lastName","disabled","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n  \n  display: none;\n  ${BREAKPOINTS.MEDIUM}{\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              ref={elRefs[index]}\n                              hideOnLowWidth={true}\n                              onClick={e => {\n                                item.action ? item.action(e?.target) : onShowUserMenu()\n                              }}\n                              icon={!user && <SystemIcons.User/>}\n                              initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}/>\n      case 'action':\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           disabled={item.disabled}\n                           hideOnLowWidth={true}\n                           action={e => {\n                             item.action && item.action(e?.target);\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'switcher':\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"file":"DesktopActions.js"}
+{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","SwitchApp","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","LARGE","DesktopActions","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        return <ProfileButton key={index}\n                              ref={elRefs[index]}\n                              hideOnLowWidth={true}\n                              onClick={e => {\n                                item.action ? item.action(e?.target) : onShowUserMenu()\n                              }}\n                              icon={!user && <SystemIcons.User/>}\n                              initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","React","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;;;AAGA,IAAMA,QAAQ,OAAGC,2BAAH,oNAAd;;AAWA,IAAMC,IAAI,GAAGC,0BAAOC,EAAV,gjBAIYC,eAAOC,KAJnB,EASaN,QATb,EAUKA,QAVL,EAcGO,kBAAUC,QAdb,EAiBNC,oBAAYC,KAjBN,EAoBND,oBAAYE,MApBN,CAAV;;AA6BA,IAAMC,WAAW,GAAGT,0BAAOU,EAAV,gTAOCR,eAAOS,WAPR,CAAjB;;AAeA,IAAMC,eAAe,GAAGZ,0BAAOC,EAAV,6IAArB;;AAWA,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BC,KAAK,CAACC,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBT,QAAAA,eAAe;AAChB;AACF;;AAEDU,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACP,eAAD,CAXH;AAaAE,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGZ,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEa,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACM,MAApE;AAA4EC,QAAAA,KAAK,EAAEP,CAAC,CAACO;AAArF,OAAP;AACD,KAFY,CAAb;AAGAjB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACZ,iBAAD,CALH;AAOA,sBACE,qBAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB,gBAA5D;AAAA,2BACE,qBAAC,WAAD;AAAA,6BACE,qBAAC,eAAD;AAAA,+BACE,qBAAC,kBAAD;AAAiC,UAAA,OAAO,EAAEI,OAA1C;AAAmD,UAAA,IAAI,EAAEmB,YAAKC;AAA9D,WAAkB,cAAlB;AADF;AADF;AADF,IADF;AASD,CA/BD;;;AAJExB,EAAAA,e;AACAC,EAAAA,iB;;eAoCaF,gB","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"],"file":"ExtendedMainMenu.cjs"}
+{"version":3,"file":"ExtendedMainMenu.cjs","names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","React","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","action","exact","Size","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;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;;;AAGA,IAAMA,QAAQ,OAAGC,2BAAH,oNAAd;;AAWA,IAAMC,IAAI,GAAGC,yBAAA,CAAOC,EAAV,gjBAIYC,cAAA,CAAOC,KAJnB,EASaN,QATb,EAUKA,QAVL,EAcGO,iBAAA,CAAUC,QAdb,EAiBNC,mBAAA,CAAYC,KAjBN,EAoBND,mBAAA,CAAYE,MApBN,CAAV;;AA6BA,IAAMC,WAAW,GAAGT,yBAAA,CAAOU,EAAV,gTAOCR,cAAA,CAAOS,WAPR,CAAjB;;AAeA,IAAMC,eAAe,GAAGZ,yBAAA,CAAOC,EAAV,6IAArB;;AAWA,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;EAAA,IAAhDC,eAAgD,QAAhDA,eAAgD;EAAA,IAA/BC,iBAA+B,QAA/BA,iBAA+B;;EAC1E,sBAA8BC,KAAK,CAACC,QAAN,CAAmC,EAAnC,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACAH,KAAK,CAACI,SAAN,CAAgB,YAAM;IACpB,SAASC,cAAT,CAAwBC,CAAxB,EAAgC;MAC9B,IAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;QACpBT,eAAe;MAChB;IACF;;IAEDU,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,CAACP,eAAD,CAXH;EAaAE,KAAK,CAACI,SAAN,CAAgB,YAAM;IACpB,IAAMO,IAAI,GAAGZ,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEa,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,CAACZ,iBAAD,CALH;EAOA,oBACE,qBAAC,IAAD;IAAM,OAAO,EAAED,eAAf;IAAgC,IAAI,EAAC,MAArC;IAA4C,mBAAgB,gBAA5D;IAAA,uBACE,qBAAC,WAAD;MAAA,uBACE,qBAAC,eAAD;QAAA,uBACE,qBAAC,kBAAD;UAAiC,OAAO,EAAEI,OAA1C;UAAmD,IAAI,EAAEmB,WAAA,CAAKC;QAA9D,GAAkB,cAAlB;MADF;IADF;EADF,EADF;AASD,CA/BD;;;EAJExB,e;EACAC,iB;;eAoCaF,gB"}

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuNavigationItemTypeItem } from '../../index';
 declare type Props = {
     clickMenuAction: () => void;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/ExtendedMainMenu.tsx"],"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"],"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;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BrB,KAAK,CAACsB,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAxB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBR,QAAAA,eAAe;AAChB;AACF;;AAEDS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,eAAD,CAXH;AAaApB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGX,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEY,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACM,MAApE;AAA4EC,QAAAA,KAAK,EAAEP,CAAC,CAACO;AAArF,OAAP;AACD,KAFY,CAAb;AAGAjB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACX,iBAAD,CALH;AAOA,sBACE,KAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB,gBAA5D;AAAA,2BACE,KAAC,WAAD;AAAA,6BACE,KAAC,eAAD;AAAA,+BACE,KAAC,YAAD;AAAiC,UAAA,OAAO,EAAEG,OAA1C;AAAmD,UAAA,IAAI,EAAEjB,IAAI,CAACoC;AAA9D,WAAkB,cAAlB;AADF;AADF;AADF,IADF;AASD,CA/BD;;;AAJEtB,EAAAA,e;AACAC,EAAAA,iB;;AAoCF,eAAeF,gBAAf","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"],"file":"ExtendedMainMenu.js"}
+{"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"}

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
@@ -35,13 +39,19 @@ 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; }
 
-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);
+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);
 
@@ -69,7 +79,7 @@ var MainMenu = function MainMenu(_ref) {
       numberOfItemsAllowed = _React$useState4[0],
       setNumberOfItemsAllowed = _React$useState4[1];
 
-  var widthOfItem = 150;
+  var widthOfItem = 120;
 
   var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
     if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
@@ -106,31 +116,44 @@ var MainMenu = function MainMenu(_ref) {
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   }, []);
+  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);
+    return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+      as: NavButton,
+      className: "disabled",
+      onMouseDown: _common.defaultOnMouseDownHandler,
+      children: item === null || item === void 0 ? void 0 : item.label
+    }, item.label) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, _objectSpread(_objectSpread({
+      as: _reactRouterDom.NavLink,
+      to: item.to || '',
+      onMouseDown: _common.defaultOnMouseDownHandler,
+      onClick: function onClick(e) {
+        return item.action && item.action(e);
+      }
+    }, rest), {}, {
+      children: item === null || item === void 0 ? void 0 : item.label
+    }), item.label);
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
     open: showExtendedMenu,
-    children: [items === null || items === void 0 ? void 0 : items.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.exact,
-        className: "disabled",
-        onMouseDown: _common.defaultOnMouseDownHandler,
-        onClick: function onClick() {
-          return no.action && no.action();
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no.label) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
-        as: _reactRouterDom.NavLink,
-        exact: no.exact,
-        to: no.to || '',
-        onMouseDown: _common.defaultOnMouseDownHandler,
-        onClick: function onClick() {
-          return no.action && no.action();
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no.label);
-    }), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExtendedSection, {
+    children: [items === null || items === void 0 ? void 0 : items.map(renderItem), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExtendedSection, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         ref: menuButtonRef,
         variant: 'secondary',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","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","map","no","index","disabled","exact","defaultOnMouseDownHandler","action","label","NavLink","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {MoreHorizontal} from '../../icons/systemicons/SystemIcons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport 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  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  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 = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.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  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map((no: MenuNavigationItemTypeItem, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem as={NavButton}\n                   exact={no.exact}\n                   className=\"disabled\"\n                   key={no.label}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onClick={() => no.action && no.action()}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem as={NavLink}\n                   exact={no.exact}\n                   to={no.to || ''}\n                   key={no.label}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onClick={() => no.action && no.action()}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\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"],"file":"MainMenu.cjs"}
+{"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

@@ -1,9 +1,16 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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';
@@ -15,7 +22,7 @@ import { IconButton } from '../../Button';
 import { defaultOnMouseDownHandler } from '../../common';
 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 NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), BREAKPOINTS.LARGE);
 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';
@@ -40,7 +47,7 @@ var MainMenu = function MainMenu(_ref) {
       numberOfItemsAllowed = _React$useState4[0],
       setNumberOfItemsAllowed = _React$useState4[1];
 
-  var widthOfItem = 150;
+  var widthOfItem = 120;
 
   var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
     if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
@@ -77,31 +84,46 @@ var MainMenu = function MainMenu(_ref) {
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   }, []);
+  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);
+
+    return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/_jsx(NavItem, {
+      as: NavButton,
+      className: "disabled",
+      onMouseDown: defaultOnMouseDownHandler,
+      children: item === null || item === void 0 ? void 0 : item.label
+    }, item.label) : /*#__PURE__*/_jsx(NavItem, _objectSpread(_objectSpread({
+      as: NavLink,
+      to: item.to || '',
+      onMouseDown: defaultOnMouseDownHandler,
+      onClick: function onClick(e) {
+        return item.action && item.action(e);
+      }
+    }, rest), {}, {
+      children: item === null || item === void 0 ? void 0 : item.label
+    }), item.label);
+  };
+
   return /*#__PURE__*/_jsxs(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
     open: showExtendedMenu,
-    children: [items === null || items === void 0 ? void 0 : items.map(function (no, index) {
-      return index > numberOfItemsAllowed - 2 ? null : no !== null && no !== void 0 && no.disabled ? /*#__PURE__*/_jsx(NavItem, {
-        as: NavButton,
-        exact: no.exact,
-        className: "disabled",
-        onMouseDown: defaultOnMouseDownHandler,
-        onClick: function onClick() {
-          return no.action && no.action();
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no.label) : /*#__PURE__*/_jsx(NavItem, {
-        as: NavLink,
-        exact: no.exact,
-        to: no.to || '',
-        onMouseDown: defaultOnMouseDownHandler,
-        onClick: function onClick() {
-          return no.action && no.action();
-        },
-        children: no === null || no === void 0 ? void 0 : no.label
-      }, no.label);
-    }), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
+    children: [items === null || items === void 0 ? void 0 : items.map(renderItem), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
       children: [/*#__PURE__*/_jsx(IconButton, {
         ref: menuButtonRef,
         variant: 'secondary',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","MEDIUM","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","map","no","index","disabled","exact","action","label","to","length","slice"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,OAAR,QAAsB,eAAtB;AACA,SAAQC,cAAR,QAA6B,qCAA7B;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,cAAlC;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,SAAQC,UAAR,QAAyB,cAAzB;AACA,SAAQC,yBAAR,QAAwC,cAAxC;;;AAGA,IAAMC,YAAY,GAAGR,MAAM,CAACS,GAAV,6NAKdL,WAAW,CAACM,MALE,CAAlB;AAcA,IAAMC,SAAS,GAAGX,MAAM,CAACY,MAAV,6GACCT,MAAM,CAACU,KADR,CAAf;AASA,IAAMC,mBAAmB,GAAGd,MAAM,CAACS,GAAV,0SAER,UAAAM,KAAK;AAAA,SAAKA,KAAK,CAACC,UAAN,GAAmB,MAAnB,GAA4B,OAAjC;AAAA,CAFG,EAePb,MAAM,CAACU,KAfA,CAAzB;AAmBA,IAAMI,eAAe,GAAGjB,MAAM,CAACS,GAAV,gGAArB;;AASA,IAAMS,QAAQ,GAAG,SAAXA,QAAW,OAA6D;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,YAAoD,QAApDA,YAAoD;;AAC5E,wBAAgDtB,KAAK,CAACuB,QAAN,CAAe,KAAf,CAAhD;AAAA;AAAA,MAAOC,gBAAP;AAAA,MAAyBC,mBAAzB;;AACA,MAAMC,eAAe,GAAG1B,KAAK,CAAC2B,MAAN,CAAkB,IAAlB,CAAxB;AACA,MAAMC,aAAa,GAAG5B,KAAK,CAAC2B,MAAN,CAAgC,IAAhC,CAAtB;AACA,MAAME,WAA+D,GAAG7B,KAAK,CAAC2B,MAAN,CAAa,IAAb,CAAxE;;AACA,yBAAwD3B,KAAK,CAACuB,QAAN,CAAuB,CAAvB,CAAxD;AAAA;AAAA,MAAOO,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;AAC1Cd,IAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD,GAFD;;AAIA,MAAMe,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAAY;AAAA;;AACrC,QAAI,EAACf,eAAD,aAACA,eAAD,wCAACA,eAAe,CAAEQ,OAAlB,kDAAC,sBAA0BQ,QAA1B,CAAmCD,CAAC,CAACE,MAArC,CAAD,KAAiD,EAACf,aAAD,aAACA,aAAD,wCAACA,aAAa,CAAEM,OAAhB,kDAAC,sBAAwBQ,QAAxB,CAAiCD,CAAC,CAACE,MAAnC,CAAD,CAArD,EAAkG;AAChGlB,MAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD;AACF,GAJD;;AAMAzB,EAAAA,KAAK,CAAC4C,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,EAUG,EAVH;AAYA,sBACE,MAAC,YAAD;AAAc,IAAA,SAAS,EAAC,0BAAxB;AAAmD,IAAA,GAAG,EAAEJ,WAAxD;AAAqE,IAAA,IAAI,EAAEL,gBAA3E;AAAA,eACGH,KADH,aACGA,KADH,uBACGA,KAAK,CAAE4B,GAAP,CAAW,UAACC,EAAD,EAAiCC,KAAjC;AAAA,aACVA,KAAK,GAAGrB,oBAAoB,GAAG,CAA/B,GAAmC,IAAnC,GAA0CoB,EAAE,SAAF,IAAAA,EAAE,WAAF,IAAAA,EAAE,CAAEE,QAAJ,gBACxC,KAAC,OAAD;AAAS,QAAA,EAAE,EAAEvC,SAAb;AACS,QAAA,KAAK,EAAEqC,EAAE,CAACG,KADnB;AAES,QAAA,SAAS,EAAC,UAFnB;AAIS,QAAA,WAAW,EAAE5C,yBAJtB;AAKS,QAAA,OAAO,EAAE;AAAA,iBAAMyC,EAAE,CAACI,MAAH,IAAaJ,EAAE,CAACI,MAAH,EAAnB;AAAA,SALlB;AAAA,kBAMGJ,EANH,aAMGA,EANH,uBAMGA,EAAE,CAAEK;AANP,SAGcL,EAAE,CAACK,KAHjB,CADwC,gBAUxC,KAAC,OAAD;AAAS,QAAA,EAAE,EAAEtD,OAAb;AACS,QAAA,KAAK,EAAEiD,EAAE,CAACG,KADnB;AAES,QAAA,EAAE,EAAEH,EAAE,CAACM,EAAH,IAAS,EAFtB;AAIS,QAAA,WAAW,EAAE/C,yBAJtB;AAKS,QAAA,OAAO,EAAE;AAAA,iBAAMyC,EAAE,CAACI,MAAH,IAAaJ,EAAE,CAACI,MAAH,EAAnB;AAAA,SALlB;AAAA,kBAMGJ,EANH,aAMGA,EANH,uBAMGA,EAAE,CAAEK;AANP,SAGcL,EAAE,CAACK,KAHjB,CAXQ;AAAA,KAAX,CADH,EAsBGlC,KAAK,CAACoC,MAAN,GAAe,CAAf,GAAmB3B,oBAAnB,iBACC,MAAC,eAAD;AAAA,8BACE,KAAC,UAAD;AACE,QAAA,GAAG,EAAEF,aADP;AAEE,QAAA,OAAO,EAAE,WAFX;AAGE,QAAA,KAAK,EAAE,UAHT;AAIE,QAAA,MAAM,EAAE,kBAAM;AACZH,UAAAA,mBAAmB,CAAC,CAACD,gBAAF,CAAnB;AACD,SANH;AAAA,+BAOE,KAAC,cAAD;AAAgB,UAAA,IAAI,EAAC;AAArB;AAPF,QADF,eAUE,KAAC,mBAAD;AAAqB,QAAA,GAAG,EAAEE,eAA1B;AAA2C,QAAA,SAAS,EAAEF,gBAAgB,GAAG,MAAH,GAAY,EAAlF;AAAsF,QAAA,UAAU,EAAE,KAAlG;AAAA,+BACE,KAAC,gBAAD;AAAkB,UAAA,eAAe,EAAEe,6BAAnC;AACkB,UAAA,iBAAiB,EAAElB,KAAK,CAACqC,KAAN,CAAY5B,oBAAoB,GAAG,CAAnC;AADrC;AADF,QAVF;AAAA,MAvBJ;AAAA,IADF;AA0CD,CAjFD;;;AAJET,EAAAA,K;;AAuFF,eAAeD,QAAf","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  justify-content: center;\n  align-items: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  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 = 150;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.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  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map((no: MenuNavigationItemTypeItem, index: number) =>\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\n          <NavItem as={NavButton}\n                   exact={no.exact}\n                   className=\"disabled\"\n                   key={no.label}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onClick={() => no.action && no.action()}>\n            {no?.label}\n          </NavItem>\n        ) : (\n          <NavItem as={NavLink}\n                   exact={no.exact}\n                   to={no.to || ''}\n                   key={no.label}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onClick={() => no.action && no.action()}>\n            {no?.label}\n          </NavItem>\n        ),\n      )}\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"],"file":"MainMenu.js"}
+{"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

@@ -35,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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.MEDIUM);
+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'));
 
@@ -53,11 +53,10 @@ var RightSideNav = function RightSideNav(_ref) {
     } else {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
         as: _reactRouterDom.NavLink,
-        exact: item === null || item === void 0 ? void 0 : item.exact,
         to: (item === null || item === void 0 ? void 0 : item.to) || '',
         onMouseDown: _common.defaultOnMouseDownHandler,
-        onClick: function onClick() {
-          return item.action && item.action();
+        onClick: function onClick(e) {
+          return item.action && item.action(e);
         },
         children: item === null || item === void 0 ? void 0 : item.label
       }, item === null || item === void 0 ? void 0 : item.label);