@laerdal/life-react-components 1.10.3-dev.19 → 1.10.3-dev.21

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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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.MEDIUM);
 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,"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","placement","action","rest","e","target","firstName","charAt","lastName","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\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        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"],"file":"DesktopActions.js"}

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,12 +39,18 @@ 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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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  justify-content: center;\n  align-items: center;\n\n  ", " {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 
 var NavButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 0;\n"])), _styles.COLORS.white);
@@ -106,28 +116,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 = (0, _objectWithoutProperties2.default)(item, _excluded);
+    return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavItem.NavItem, {
+      as: NavButton,
+      exact: item.exact,
+      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,
+      exact: item.exact,
+      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,
-        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(e) {
-          return no.action && no.action(e);
-        },
-        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","label","NavLink","to","action","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            {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={(e: React.MouseEvent) => no.action && no.action(e)}>\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,"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","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","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  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                 exact={item.exact}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 exact={item.exact}\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"],"file":"MainMenu.cjs"}

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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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';
@@ -77,28 +84,48 @@ 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,
+      exact: item.exact,
+      className: "disabled",
+      onMouseDown: defaultOnMouseDownHandler,
+      children: item === null || item === void 0 ? void 0 : item.label
+    }, item.label) : /*#__PURE__*/_jsx(NavItem, _objectSpread(_objectSpread({
+      as: NavLink,
+      exact: item.exact,
+      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,
-        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(e) {
-          return no.action && no.action(e);
-        },
-        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","label","to","action","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            {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={(e: React.MouseEvent) => no.action && no.action(e)}>\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,"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","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","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  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                 exact={item.exact}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 exact={item.exact}\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"],"file":"MainMenu.js"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.MobileMenuHeaderWrapper = exports.MobileMenuHeaderActions = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -29,6 +31,10 @@ var _ProfileButton = require("../../ProfileButton");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["placement", "type", "action"],
+    _excluded2 = ["placement", "type", "icon", "menu"],
+    _excluded3 = ["placement", "type", "icon", "action"];
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -79,42 +85,65 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
   };
 
   var renderItem = function renderItem(item, index) {
-    var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
-
     switch (item.type) {
       case 'profile':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, {
-          onClick: function onClick(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
-          },
-          icon: !profile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
-          initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
-        }, index);
+        {
+          var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
+
+          var placement = item.placement,
+              type = item.type,
+              action = item.action,
+              rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
+            onClick: function onClick(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
+            },
+            icon: !profile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
+            initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
+          }, rest), index);
+        }
 
       case 'submenu':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          disabled: item.disabled,
-          variant: 'secondary',
-          shape: 'circular',
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            onSubMenuOpen && onSubMenuOpen(item.menu);
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement = item.placement,
+              _type = item.type,
+              icon = item.icon,
+              menu = item.menu,
+              _rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
+            variant: 'secondary',
+            shape: 'circular',
+            action: function action(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              onSubMenuOpen && onSubMenuOpen(item.menu);
+            }
+          }, _rest), {}, {
+            children: item.icon
+          }), index);
+        }
 
       case 'action':
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          disabled: item.disabled,
-          variant: 'secondary',
-          shape: 'circular',
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement2 = item.placement,
+              _type2 = item.type,
+              _icon = item.icon,
+              _action = item.action,
+              _rest2 = (0, _objectWithoutProperties2.default)(item, _excluded3);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
+            disabled: item.disabled,
+            variant: 'secondary',
+            shape: 'circular',
+            action: function action(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
+            }
+          }, _rest2), {}, {
+            children: item.icon
+          }), index);
+        }
     }
   };