@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/GlobalNavigationBar/desktop/MainMenu.js

@@ -1,175 +1,282 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-import { NavItem } from '../../NavItem';
-import { SystemIcons } from '../../icons';
-import { COLORS, BREAKPOINTS } from '../../styles';
-import { Menu } from './ExtendedMainMenu';
-import { SubMenu } from './SubMenu';
-import { IconButton } from '../../Button';
-import { defaultOnMouseDownHandler } from '../../common';
-import { NavItemDiv } from '../../NavItem/NavItem';
-import { checkIfContainsItem } from '../utils';
-var NavContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    cursor: pointer;\n  }\n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    cursor: pointer;\n  }\n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM, NavItemDiv, BREAKPOINTS.LARGE);
-var NavButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border: 0;\n"], ["\n  background: ", ";\n  border: 0;\n"])), COLORS.white);
-var ExtendedMenuWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\n  display: flex;\n  margin-left: ", ";\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), function (props) { return (props.floatRight ? 'auto' : 'unset'); }, COLORS.white);
-var ExtendedSection = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var SubMenuWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  button {\n    padding-left: 0px;\n  }\n"], ["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  button {\n    padding-left: 0px;\n  }\n"])), Menu, function (props) { return (props.topLevel ? '100%' : '0px'); }, function (props) { return (props.topLevel ? '0px' : 'calc(100% - 12px)'); });
-var ExtendedMenuOption = 'extendedOption';
-var MainMenu = function (_a) {
-    var items = _a.items, rightSideRef = _a.rightSideRef;
-    var menuButtonRef = React.useRef(null);
-    //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between
-    var dropdownMenusOpenedArray = React.useRef([]);
-    var mainMenuRef = React.useRef(null);
-    var _b = React.useState(1), numberOfItemsAllowed = _b[0], setNumberOfItemsAllowed = _b[1];
-    var _c = React.useState([]), subMenuRefs = _c[0], setAllSubMenuRefs = _c[1];
-    var extendedMenuOptionRef = React.createRef();
-    React.useEffect(function () {
-        setAllSubMenuRefs(items.map(function (x) { return (x.type == 'desktopgroup' ? React.createRef() : undefined); }));
-    }, [items]);
-    var _d = React.useState({}), forceUpdate = _d[1];
-    var _e = React.useState(''), activeItem = _e[0], setActiveItemId = _e[1];
-    var _f = React.useState(''), focusedItemId = _f[0], setFocusedItemId = _f[1];
-    var widthOfItem = 120;
-    var recalculateNumberOfItemsAllowed = function () {
-        var _a, _b;
-        if ((rightSideRef === null || rightSideRef === void 0 ? void 0 : rightSideRef.current) && (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : mainMenuRef.current)) {
-            var number = Math.floor((((_a = rightSideRef === null || rightSideRef === void 0 ? void 0 : rightSideRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) - ((_b = mainMenuRef === null || mainMenuRef === void 0 ? void 0 : mainMenuRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft)) / widthOfItem);
-            if (number !== numberOfItemsAllowed) {
-                setNumberOfItemsAllowed(number);
-            }
-        }
-    };
-    var onMouseLeave = function (event, id) {
-        dropdownMenusOpenedArray.current = __spreadArray([], dropdownMenusOpenedArray.current.filter(function (x) { return x != id; }), true);
-        //just trigger rerendering
-        forceUpdate({});
-    };
-    var onMouseEnter = function (event, id) {
-        var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) { return x == id; });
-        if (existingRefForId == null) {
-            dropdownMenusOpenedArray.current = __spreadArray(__spreadArray([], dropdownMenusOpenedArray.current, true), [id], false);
-            //just trigger rerendering
-            forceUpdate({});
-        }
-    };
-    React.useEffect(function () {
-        recalculateNumberOfItemsAllowed();
-        // Bind the event listener
-        window.addEventListener('resize', recalculateNumberOfItemsAllowed);
-        return function () {
-            // Unbind the event listener on clean up
-            window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
-        };
-    }, []);
-    React.useEffect(function () {
-        recalculateNumberOfItemsAllowed();
-    }, [items.length]);
-    var onFocus = function (event) {
-        //no open dropdowns if top level was entered
-        dropdownMenusOpenedArray.current = [];
-        forceUpdate({});
-    };
-    var onKeyDownTop = function (event) {
-        if (event.key === 'Escape' || event.key === 'Esc') {
-            dropdownMenusOpenedArray.current = [];
-            //just trigger rerendering
-            forceUpdate({});
-        }
-    };
-    var renderItem = function (item, index) {
-        if (index > numberOfItemsAllowed - 2)
-            return null;
-        if (item.type != 'desktopgroup') {
-            var _a = item, icon = _a.icon, to = _a.to, exact = _a.exact, disabled = _a.disabled, external_1 = _a.external, action_1 = _a.action, label = _a.label, note = _a.note, pinned = _a.pinned, rest = __rest(_a, ["icon", "to", "exact", "disabled", "external", "action", "label", "note", "pinned"]);
-            return (item === null || item === void 0 ? void 0 : item.disabled) ? (React.createElement(NavItem, { as: NavButton, className: "disabled", key: item.label, onMouseDown: defaultOnMouseDownHandler }, item === null || item === void 0 ? void 0 : item.label)) : (React.createElement(NavItem, __assign({ as: NavLink, onFocus: onFocus, to: to || '', key: label, onMouseDown: defaultOnMouseDownHandler, onClick: function (e) { return action_1 && action_1(e); } }, rest), item === null || item === void 0 ? void 0 : item.label));
-        }
-        else {
-            var existingRef_1 = dropdownMenusOpenedArray.current.find(function (x) { return x == item.id; });
-            var onClick = function () {
-                if (existingRef_1 == null) {
-                    dropdownMenusOpenedArray.current = __spreadArray(__spreadArray([], dropdownMenusOpenedArray.current, true), [item.id], false);
-                    //just trigger rerendering
-                    forceUpdate({});
-                }
-            };
-            var onKeyDown = function (event) {
-                if (event.key == 'Enter' || event.code == 'Space') {
-                    dropdownMenusOpenedArray.current = __spreadArray(__spreadArray([], dropdownMenusOpenedArray.current, true), [item.id], false);
-                    //just trigger rerendering
-                    forceUpdate({});
-                }
-            };
-            var containsActiveItem = checkIfContainsItem(item, activeItem);
-            return (React.createElement("div", { style: { position: 'relative' }, onMouseEnter: function (event) { var _a; return onMouseEnter(event, (_a = item.id) !== null && _a !== void 0 ? _a : ''); }, onMouseLeave: function (event) { var _a; return onMouseLeave(event, (_a = item.id) !== null && _a !== void 0 ? _a : ''); } },
-                React.createElement(NavItem, { id: item.id + '_parentOption', "aria-expanded": Boolean(existingRef_1), "aria-activedescendant": containsActiveItem ? activeItem : '', "aria-controls": item.id, role: "listbox", onFocus: onFocus, onKeyDown: onKeyDown, tabIndex: 0, className: existingRef_1 != null || checkIfContainsItem(item, activeItem) ? 'active' : '', key: item.label, to: null, onClick: onClick }, item === null || item === void 0 ? void 0 :
-                    item.label,
-                    " ",
-                    React.createElement(SystemIcons.ArrowDropDown, { size: "24px" })),
-                React.createElement(SubMenu, { ariaLabelledBy: item.id + '_parentOption', ref: subMenuRefs[index], onItemFocused: setFocusedItemId, focusedItemId: focusedItemId, activeItemId: activeItem, nestPath: [item.id], onItemStateChanged: function (item, state) {
-                        if (state) {
-                            setActiveItemId(item);
-                        }
-                        else if (item == activeItem)
-                            setActiveItemId('');
-                    }, item: item, dropdownMenusOpenedArray: dropdownMenusOpenedArray, index: index + 1, topLevel: true })));
-        }
-    };
-    var extended = dropdownMenusOpenedArray.current.find(function (x) { return x == ExtendedMenuOption; });
-    var extendedSectionKeyHandler = function (event) {
-        if (event.key == 'Enter' || event.code == 'Space') {
-            event.stopPropagation();
-            dropdownMenusOpenedArray.current = [ExtendedMenuOption];
-            forceUpdate({});
-        }
-    };
-    return (React.createElement(NavContainer, { role: "navigation", className: "GlobalNavigationMainMenu", ref: mainMenuRef, onKeyDown: onKeyDownTop }, items === null || items === void 0 ? void 0 :
-        items.map(renderItem),
-        items.length + 1 > numberOfItemsAllowed && (React.createElement(ExtendedSection, { onKeyDown: function (event) { return extendedSectionKeyHandler(event); }, onMouseEnter: function (event) { return onMouseEnter(event, ExtendedMenuOption); }, onMouseLeave: function (event) { return onMouseLeave(event, ExtendedMenuOption); } },
-            React.createElement(IconButton, { id: ExtendedMenuOption + '_parentOption', "aria-expanded": Boolean(extended), "aria-activedescendant": checkIfContainsItem({ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }, activeItem) ? activeItem : '', "aria-controls": ExtendedMenuOption, role: "listbox", ref: menuButtonRef, variant: 'secondary', shape: 'circular', action: function () { } },
-                React.createElement(SystemIcons.MoreHorizontal, { size: "24px" })),
-            React.createElement(SubMenu, { ariaLabelledBy: ExtendedMenuOption + '_parentOption', activeItemId: activeItem, onItemFocused: setFocusedItemId, focusedItemId: focusedItemId, ref: extendedMenuOptionRef, onItemStateChanged: function (item, state) {
-                    if (state)
-                        setActiveItemId(item);
-                    else if (item == activeItem)
-                        setActiveItemId('');
-                }, nestPath: [ExtendedMenuOption], item: { items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }, topLevel: true, index: 0, dropdownMenusOpenedArray: dropdownMenusOpenedArray })))));
-};
-export default MainMenu;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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, _templateObject5;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { NavItem } from '../../NavItem';
+import { SystemIcons } from '../../icons';
+import { COLORS, BREAKPOINTS } from '../../styles';
+import { Menu } from './ExtendedMainMenu';
+import { SubMenu } from './SubMenu';
+import { IconButton } from '../../Button';
+import { defaultOnMouseDownHandler } from '../../common';
+import { NavItemDiv } from '../../NavItem/NavItem';
+import { checkIfContainsItem } from '../utils';
+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  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    cursor: pointer;\n  }\n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM, NavItemDiv, 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';
+}, COLORS.white);
+var ExtendedSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var SubMenuWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  button {\n    padding-left: 0px;\n  }\n"])), Menu, function (props) {
+  return props.topLevel ? '100%' : '0px';
+}, function (props) {
+  return props.topLevel ? '0px' : 'calc(100% - 12px)';
+});
+var ExtendedMenuOption = 'extendedOption';
+var MainMenu = function MainMenu(_ref) {
+  var items = _ref.items,
+    rightSideRef = _ref.rightSideRef;
+  var menuButtonRef = React.useRef(null);
+  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between
+  var dropdownMenusOpenedArray = React.useRef([]);
+  var mainMenuRef = React.useRef(null);
+  var _React$useState = React.useState(1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    numberOfItemsAllowed = _React$useState2[0],
+    setNumberOfItemsAllowed = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    subMenuRefs = _React$useState4[0],
+    setAllSubMenuRefs = _React$useState4[1];
+  var extendedMenuOptionRef = /*#__PURE__*/React.createRef();
+  React.useEffect(function () {
+    setAllSubMenuRefs(items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
+    }));
+  }, [items]);
+  var _React$useState5 = React.useState({}),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    forceUpdate = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    activeItem = _React$useState8[0],
+    setActiveItemId = _React$useState8[1];
+  var _React$useState9 = React.useState(''),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focusedItemId = _React$useState10[0],
+    setFocusedItemId = _React$useState10[1];
+  var widthOfItem = 120;
+  var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
+    if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
+      var _rightSideRef$current, _mainMenuRef$current;
+      var number = Math.floor(((rightSideRef === null || rightSideRef === void 0 ? void 0 : (_rightSideRef$current = rightSideRef.current) === null || _rightSideRef$current === void 0 ? void 0 : _rightSideRef$current.offsetLeft) - (mainMenuRef === null || mainMenuRef === void 0 ? void 0 : (_mainMenuRef$current = mainMenuRef.current) === null || _mainMenuRef$current === void 0 ? void 0 : _mainMenuRef$current.offsetLeft)) / widthOfItem);
+      if (number !== numberOfItemsAllowed) {
+        setNumberOfItemsAllowed(number);
+      }
+    }
+  };
+  var _onMouseLeave = function onMouseLeave(event, id) {
+    dropdownMenusOpenedArray.current = _toConsumableArray(dropdownMenusOpenedArray.current.filter(function (x) {
+      return x != id;
+    }));
+    //just trigger rerendering
+    forceUpdate({});
+  };
+  var _onMouseEnter = function onMouseEnter(event, id) {
+    var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) {
+      return x == id;
+    });
+    if (existingRefForId == null) {
+      dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [id]);
+      //just trigger rerendering
+      forceUpdate({});
+    }
+  };
+  React.useEffect(function () {
+    recalculateNumberOfItemsAllowed();
+    // Bind the event listener
+    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
+    return function () {
+      // Unbind the event listener on clean up
+      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
+    };
+  }, []);
+  React.useEffect(function () {
+    recalculateNumberOfItemsAllowed();
+  }, [items.length]);
+  var onFocus = function onFocus(event) {
+    //no open dropdowns if top level was entered
+    dropdownMenusOpenedArray.current = [];
+    forceUpdate({});
+  };
+  var onKeyDownTop = function onKeyDownTop(event) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      dropdownMenusOpenedArray.current = [];
+      //just trigger rerendering
+      forceUpdate({});
+    }
+  };
+  var renderItem = function renderItem(item, index) {
+    if (index > numberOfItemsAllowed - 2) return null;
+    if (item.type != 'desktopgroup') {
+      var _ref2 = item,
+        icon = _ref2.icon,
+        to = _ref2.to,
+        exact = _ref2.exact,
+        disabled = _ref2.disabled,
+        external = _ref2.external,
+        action = _ref2.action,
+        label = _ref2.label,
+        note = _ref2.note,
+        pinned = _ref2.pinned,
+        rest = _objectWithoutProperties(_ref2, _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,
+        onFocus: onFocus,
+        to: to || '',
+        onMouseDown: defaultOnMouseDownHandler,
+        onClick: function onClick(e) {
+          return action && action(e);
+        }
+      }, rest), {}, {
+        children: item === null || item === void 0 ? void 0 : item.label
+      }), label);
+    } else {
+      var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
+        return x == item.id;
+      });
+      var onClick = function onClick() {
+        if (existingRef == null) {
+          dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [item.id]);
+          //just trigger rerendering
+          forceUpdate({});
+        }
+      };
+      var onKeyDown = function onKeyDown(event) {
+        if (event.key == 'Enter' || event.code == 'Space') {
+          dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [item.id]);
+          //just trigger rerendering
+          forceUpdate({});
+        }
+      };
+      var containsActiveItem = checkIfContainsItem(item, activeItem);
+      return /*#__PURE__*/_jsxs("div", {
+        style: {
+          position: 'relative'
+        },
+        onMouseEnter: function onMouseEnter(event) {
+          var _item$id;
+          return _onMouseEnter(event, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : '');
+        },
+        onMouseLeave: function onMouseLeave(event) {
+          var _item$id2;
+          return _onMouseLeave(event, (_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : '');
+        },
+        children: [/*#__PURE__*/_jsxs(NavItem, {
+          id: item.id + '_parentOption',
+          "aria-expanded": Boolean(existingRef),
+          "aria-activedescendant": containsActiveItem ? activeItem : '',
+          "aria-controls": item.id,
+          role: "listbox",
+          onFocus: onFocus,
+          onKeyDown: onKeyDown,
+          tabIndex: 0,
+          className: existingRef != null || checkIfContainsItem(item, activeItem) ? 'active' : '',
+          to: null,
+          onClick: onClick,
+          children: [item === null || item === void 0 ? void 0 : item.label, " ", /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
+            size: "24px"
+          })]
+        }, item.label), /*#__PURE__*/_jsx(SubMenu, {
+          ariaLabelledBy: item.id + '_parentOption',
+          ref: subMenuRefs[index],
+          onItemFocused: setFocusedItemId,
+          focusedItemId: focusedItemId,
+          activeItemId: activeItem,
+          nestPath: [item.id],
+          onItemStateChanged: function onItemStateChanged(item, state) {
+            if (state) {
+              setActiveItemId(item);
+            } else if (item == activeItem) setActiveItemId('');
+          },
+          item: item,
+          dropdownMenusOpenedArray: dropdownMenusOpenedArray,
+          index: index + 1,
+          topLevel: true
+        })]
+      });
+    }
+  };
+  var extended = dropdownMenusOpenedArray.current.find(function (x) {
+    return x == ExtendedMenuOption;
+  });
+  var extendedSectionKeyHandler = function extendedSectionKeyHandler(event) {
+    if (event.key == 'Enter' || event.code == 'Space') {
+      event.stopPropagation();
+      dropdownMenusOpenedArray.current = [ExtendedMenuOption];
+      forceUpdate({});
+    }
+  };
+  return /*#__PURE__*/_jsxs(NavContainer, {
+    role: "navigation",
+    className: "GlobalNavigationMainMenu",
+    ref: mainMenuRef,
+    onKeyDown: onKeyDownTop,
+    children: [items === null || items === void 0 ? void 0 : items.map(renderItem), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
+      onKeyDown: function onKeyDown(event) {
+        return extendedSectionKeyHandler(event);
+      },
+      onMouseEnter: function onMouseEnter(event) {
+        return _onMouseEnter(event, ExtendedMenuOption);
+      },
+      onMouseLeave: function onMouseLeave(event) {
+        return _onMouseLeave(event, ExtendedMenuOption);
+      },
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        id: ExtendedMenuOption + '_parentOption',
+        "aria-expanded": Boolean(extended),
+        "aria-activedescendant": checkIfContainsItem({
+          items: items.slice(numberOfItemsAllowed - 1),
+          id: ExtendedMenuOption
+        }, activeItem) ? activeItem : '',
+        "aria-controls": ExtendedMenuOption,
+        role: "listbox",
+        ref: menuButtonRef,
+        variant: 'secondary',
+        shape: 'circular',
+        action: function action() {},
+        children: /*#__PURE__*/_jsx(SystemIcons.MoreHorizontal, {
+          size: "24px"
+        })
+      }), /*#__PURE__*/_jsx(SubMenu, {
+        ariaLabelledBy: ExtendedMenuOption + '_parentOption',
+        activeItemId: activeItem,
+        onItemFocused: setFocusedItemId,
+        focusedItemId: focusedItemId,
+        ref: extendedMenuOptionRef,
+        onItemStateChanged: function onItemStateChanged(item, state) {
+          if (state) setActiveItemId(item);else if (item == activeItem) setActiveItemId('');
+        },
+        nestPath: [ExtendedMenuOption],
+        item: {
+          items: items.slice(numberOfItemsAllowed - 1),
+          id: ExtendedMenuOption
+        },
+        topLevel: true,
+        index: 0,
+        dropdownMenusOpenedArray: dropdownMenusOpenedArray
+      })]
+    })]
+  });
+};
+MainMenu.propTypes = {
+  items: _pt.array.isRequired
+};
+export default MainMenu;
+//# sourceMappingURL=MainMenu.js.map

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuButton, MenuNavigationItemTypeItem } from '../types';
-declare type Props = {
+type Props = {
     items?: MenuNavigationItemTypeItem[];
     action?: MenuButton;
 };

package/dist/GlobalNavigationBar/desktop/RightSideNav.js

@@ -1,46 +1,64 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { NavLink } from 'react-router-dom';
-import { NavItem } from '../../NavItem';
-import { BREAKPOINTS, ComponentTextStyle } from '../../styles';
-import { Button } from '../../Button';
-import { ComponentMStyling } from '../../styles';
-import { defaultOnMouseDownHandler } from '../../common';
-import { TooltipWrapper } from "../../Tooltips";
-var NavContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 64px;\n\n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"], ["\n  display: none;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 64px;\n\n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
-var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"], ["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, 'unset'));
-var RightSideNav = function (_a) {
-    var items = _a.items, action = _a.action;
-    var getNavItem = function (item) {
-        if (item === null || item === void 0 ? void 0 : item.disabled) {
-            return (React.createElement(NavItem, { as: Button, className: "disabled", key: item === null || item === void 0 ? void 0 : item.label }, item === null || item === void 0 ? void 0 : item.label));
-        }
-        else {
-            return (React.createElement(NavItem, { as: NavLink, to: (item === null || item === void 0 ? void 0 : item.to) || '', key: item === null || item === void 0 ? void 0 : item.label, onMouseDown: defaultOnMouseDownHandler, onClick: function (e) { return item.action && item.action(e); } }, item === null || item === void 0 ? void 0 : item.label));
-        }
-    };
-    return (React.createElement(NavContainer, null, items === null || items === void 0 ? void 0 :
-        items.reverse().map(function (no) { return getNavItem(no); }),
-        action && !action.tooltip &&
-            React.createElement(StyledButton, __assign({ variant: "secondary", onClick: action === null || action === void 0 ? void 0 : action.action }, action), action.label),
-        action && !!action.tooltip &&
-            React.createElement(TooltipWrapper, __assign({}, action.tooltip),
-                React.createElement(StyledButton, __assign({ variant: "secondary", onClick: action === null || action === void 0 ? void 0 : action.action }, action), action.label))));
-};
-export default RightSideNav;
-var templateObject_1, templateObject_2;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { NavItem } from '../../NavItem';
+import { BREAKPOINTS, ComponentTextStyle } from '../../styles';
+import { Button } from '../../Button';
+import { ComponentMStyling } from '../../styles';
+import { defaultOnMouseDownHandler } from '../../common';
+import { TooltipWrapper } from "../../Tooltips";
+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  margin: auto 0 auto auto;\n  align-items: center;\n  height: 64px;\n\n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var StyledButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, 'unset'));
+var RightSideNav = function RightSideNav(_ref) {
+  var items = _ref.items,
+    action = _ref.action;
+  var getNavItem = function getNavItem(item) {
+    if (item !== null && item !== void 0 && item.disabled) {
+      return /*#__PURE__*/_jsx(NavItem, {
+        as: Button,
+        className: "disabled",
+        children: item === null || item === void 0 ? void 0 : item.label
+      }, item === null || item === void 0 ? void 0 : item.label);
+    } else {
+      return /*#__PURE__*/_jsx(NavItem, {
+        as: NavLink,
+        to: (item === null || item === void 0 ? void 0 : item.to) || '',
+        onMouseDown: defaultOnMouseDownHandler,
+        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);
+    }
+  };
+  return /*#__PURE__*/_jsxs(NavContainer, {
+    children: [items === null || items === void 0 ? void 0 : items.reverse().map(function (no) {
+      return getNavItem(no);
+    }), action && !action.tooltip && /*#__PURE__*/_jsx(StyledButton, _objectSpread(_objectSpread({
+      variant: "secondary",
+      onClick: action === null || action === void 0 ? void 0 : action.action
+    }, action), {}, {
+      children: action.label
+    })), action && !!action.tooltip && /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({}, action.tooltip), {}, {
+      children: /*#__PURE__*/_jsx(StyledButton, _objectSpread(_objectSpread({
+        variant: "secondary",
+        onClick: action === null || action === void 0 ? void 0 : action.action
+      }, action), {}, {
+        children: action.label
+      }))
+    }))]
+  });
+};
+RightSideNav.propTypes = {
+  items: _pt.array
+};
+export default RightSideNav;
+//# sourceMappingURL=RightSideNav.js.map

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuNavigationItemTypeDesktopGroup } from '../types';
-export declare type SubMenuProps = {
+export type SubMenuProps = {
     item: MenuNavigationItemTypeDesktopGroup;
     index: number;
     topLevel: boolean;