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

package/dist/src/GlobalNavigationBar/__tests__/Logo.tests.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+import Logo from '../Logo';
+import { MemoryRouter } from 'react-router';
+describe('Logo', function () {
+    it('should render Laerdal logo', function () {
+        var wrapper = render(React.createElement(MemoryRouter, null,
+            React.createElement(Logo, { name: 'name' })));
+        expect(wrapper.getByText('name')).toBeDefined();
+        expect(wrapper.getByText('Laerdal logo')).toBeDefined();
+    });
+    it('should render beta tag', function () {
+        var wrapper = render(React.createElement(MemoryRouter, null,
+            React.createElement(Logo, { name: 'name', showBetaTag: true })));
+        expect(wrapper.getByText('BETA')).toBeDefined();
+    });
+    it('should call onClick when logo is clicked', function () {
+        var onClickSpy = jest.fn();
+        var wrapper = render(React.createElement(MemoryRouter, null,
+            React.createElement(Logo, { name: 'name', onClick: onClickSpy })));
+        act(function () {
+            fireEvent.click(wrapper.container.querySelector('a'));
+        });
+        expect(onClickSpy).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,88 @@
+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;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { IconButton, IconButtonStyled } from '../../Button';
+import { ProfileButton } from '../../ProfileButton';
+import { SystemIcons } from '../../icons';
+import { BREAKPOINTS } from '../../styles';
+import { SearchBar } from '../../InputFields';
+import { Size } from '../../types';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n\n  ", "{\n    display: 'none';\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n\n  ", "{\n    display: 'none';\n    ", " {\n      display: block;\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, IconButtonStyled, BREAKPOINTS.MEDIUM);
+var CustomActionWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+var ProfileWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 8px;\n"], ["\n  margin: 0 8px;\n"])));
+var DesktopActions = React.forwardRef(function (_a, ref) {
+    var buttons = _a.buttons, user = _a.user, profileComponent = _a.profileComponent, onShowUserMenu = _a.onShowUserMenu;
+    var _b = React.useState([]), elRefs = _b[0], setElRefs = _b[1];
+    var _c = React.useState(''), searchTermNormalSmall = _c[0], setSearchTermNormalSmall = _c[1];
+    var length = (buttons === null || buttons === void 0 ? void 0 : buttons.length) || 0;
+    React.useEffect(function () {
+        setElRefs(Array(length || 0).fill(null).map(function () { return React.createRef(); }));
+    }, [length]);
+    React.useImperativeHandle(ref, function () { return ({
+        buttons: elRefs.map(function (r, index) {
+            var _a;
+            return ({
+                ref: r,
+                type: (_a = buttons === null || buttons === void 0 ? void 0 : buttons[index]) === null || _a === void 0 ? void 0 : _a.type,
+            });
+        })
+    }); }, [elRefs, buttons]);
+    var renderItem = function (item, index) {
+        var _a, _b, _c, _d;
+        switch (item.type) {
+            case 'profile': {
+                var placement = item.placement, type = item.type, action = item.action, rest = __rest(item, ["placement", "type", "action"]);
+                if (!!profileComponent)
+                    return React.createElement(ProfileWrapper, null, profileComponent);
+                else
+                    return React.createElement(ProfileWrapper, null,
+                        React.createElement(ProfileButton, __assign({ key: index, ref: elRefs[index], onClick: function (e) {
+                                item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
+                            }, icon: !user && React.createElement(SystemIcons.User, null), initials: ((_b = (_a = user === null || user === void 0 ? void 0 : user.firstName) === null || _a === void 0 ? void 0 : _a.charAt(0)) !== null && _b !== void 0 ? _b : '') + ((_d = (_c = user === null || user === void 0 ? void 0 : user.lastName) === null || _c === void 0 ? void 0 : _c.charAt(0)) !== null && _d !== void 0 ? _d : '') }, rest)));
+            }
+            case 'action': {
+                var placement = item.placement, type = item.type, icon = item.icon, action = item.action, rest = __rest(item, ["placement", "type", "icon", "action"]);
+                return React.createElement(IconButton, __assign({ key: index, ref: elRefs[index], variant: 'secondary', shape: 'circular', action: function (e) { return item.action && item.action(e === null || e === void 0 ? void 0 : e.target); } }, rest), item.icon);
+            }
+            case 'switcher': {
+                var placement = item.placement, type = item.type, action = item.action, rest = __rest(item, ["placement", "type", "action"]);
+                return React.createElement(IconButton, __assign({ key: index, ref: elRefs[index], variant: 'secondary', shape: 'circular', id: "globalNavAppsButton", action: function (e) { return item.action && item.action(e === null || e === void 0 ? void 0 : e.target); } }, rest),
+                    React.createElement(SystemIcons.SwitchApp, { size: "24px" }));
+            }
+            case 'search': {
+                return React.createElement(CustomActionWrapper, { key: index },
+                    React.createElement(SearchBar, { id: "unifiedSearchInputField", placeholder: "Enter your search term", enterSearch: function () { }, setSearchTerm: setSearchTermNormalSmall, searchTerm: searchTermNormalSmall, removeSearch: function () {
+                            setSearchTermNormalSmall('');
+                        }, size: Size.Medium }));
+            }
+        }
+    };
+    return (React.createElement(Wrapper, { role: "toolbar", "aria-label": "Toolbar" }, buttons === null || buttons === void 0 ? void 0 : buttons.map(function (item, index) { return renderItem(item, index); })));
+});
+export default DesktopActions;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -4,7 +4,7 @@ export declare const flowDown: import("styled-components").Keyframes;
 export declare const Menu: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const MenuSection: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const MenuSectionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-type Props = {
+declare type Props = {
     clickMenuAction: () => void;
     navigationOptions: MenuNavigationItemTypeItem[];
 };

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

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { BREAKPOINTS, COLORS, focusStyles } from '../../styles';
+import { VerticalTabs } from '../../Tabs';
+import { Size } from '../../index';
+import { Z_INDEXES } from '../../styles';
+export var flowDown = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+export var Menu = styled.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 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: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 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: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM, focusStyles);
+export var MenuSection = styled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"], ["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"])), COLORS.neutral_100);
+export var MenuSectionList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
+var ExtendedMainMenu = function (_a) {
+    var clickMenuAction = _a.clickMenuAction, navigationOptions = _a.navigationOptions;
+    console.log(navigationOptions);
+    var _b = React.useState([]), entries = _b[0], setEntries = _b[1];
+    React.useEffect(function () {
+        function handleKeyPress(e) {
+            if (e.keyCode === 27) {
+                clickMenuAction();
+            }
+        }
+        document.addEventListener('keydown', handleKeyPress, false);
+        return function () {
+            document.removeEventListener('keydown', handleKeyPress, false);
+        };
+    }, [clickMenuAction]);
+    React.useEffect(function () {
+        var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
+            return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.action, exact: n.exact };
+        });
+        setEntries(list);
+    }, [navigationOptions]);
+    return (React.createElement(Menu, { onClick: clickMenuAction, role: "menu", "aria-labelledby": "UserMenuButton" },
+        React.createElement(MenuSection, null,
+            React.createElement(MenuSectionList, null,
+                React.createElement(VerticalTabs, { key: "ExtendedMenu", entries: entries, size: Size.Medium })))));
+};
+export default ExtendedMainMenu;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/GlobalNavigationBar/desktop/MainMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';
-type Props = {
+declare type Props = {
     items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];
     rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;
 };

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

@@ -0,0 +1,175 @@
+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;

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

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

package/dist/src/GlobalNavigationBar/desktop/RightSideNav.js

@@ -0,0 +1,46 @@
+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;

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

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

package/dist/src/GlobalNavigationBar/desktop/SubMenu.js

@@ -0,0 +1,131 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 styled from 'styled-components';
+import { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';
+import { Size } from '../../types';
+import { SystemIcons } from '../../icons';
+import { checkIfContainsItem } from '../utils';
+import Tabs from '../../Tabs/Tabs';
+import TabLink from '../../Tabs/TabLink';
+import { MenuItem } from '../../MenuItem';
+export var SubMenuWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  ", "\n\n  button {\n    padding-left: 0px;\n  }\n"], ["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\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)'); }, function (props) { return (!props.visible ? 'display: none;' : ''); });
+export var SubMenu = React.forwardRef(function (_a, ref) {
+    var item = _a.item, index = _a.index, topLevel = _a.topLevel, dropdownMenusOpenedArray = _a.dropdownMenusOpenedArray, onSubMenuHidden = _a.onSubMenuHidden, onSubMenuOpened = _a.onSubMenuOpened, onItemStateChanged = _a.onItemStateChanged, focusedItemId = _a.focusedItemId, activeItemId = _a.activeItemId, nestPath = _a.nestPath, ariaLabelledBy = _a.ariaLabelledBy, onItemFocused = _a.onItemFocused;
+    var _b = React.useState({}), forceUpdate = _b[1];
+    var focusedRef = React.useRef({ index: -1 });
+    var _c = React.useState([]), allRefs = _c[0], setAllRefs = _c[1];
+    var _d = React.useState([]), subMenuRefs = _d[0], setAllSubMenuRefs = _d[1];
+    React.useEffect(function () {
+        setAllRefs(item.items.map(function (x) { return (x.type == 'desktopgroup' ? React.createRef() : React.createRef()); }));
+        setAllSubMenuRefs(item.items.map(function (x) { return (x.type == 'desktopgroup' ? React.createRef() : undefined); }));
+    }, [item]);
+    var existingRef = dropdownMenusOpenedArray.current.find(function (x) { return x == item.id; });
+    var onMouseLeave = function (event, id) {
+        dropdownMenusOpenedArray.current = __spreadArray([], dropdownMenusOpenedArray.current.filter(function (x) { return x != id; }), true);
+        //just trigger rerendering
+        onSubMenuHidden && onSubMenuHidden(id);
+        forceUpdate({});
+    };
+    var containActiveItem = false;
+    if (item.type == 'desktopgroup' && activeItemId)
+        containActiveItem = checkIfContainsItem(item, activeItemId);
+    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
+            onSubMenuOpened && onSubMenuOpened(id);
+            forceUpdate({});
+        }
+    };
+    var onKeyDown = function (e) {
+        var _a;
+        if (e.key === 'ArrowUp' || e.key === 'Up') {
+            e.stopPropagation();
+            e.preventDefault();
+            if (focusedRef.current.index > 0) {
+                setNewFocusedElement(focusedRef.current.index - 1);
+            }
+        }
+        else if (e.key === 'ArrowDown' || e.key === 'Down') {
+            e.stopPropagation();
+            e.preventDefault();
+            if (focusedRef.current.index < allRefs.length - 1)
+                setNewFocusedElement(focusedRef.current.index + 1);
+        }
+        else if (e.key == 'Enter' || e.code == 'Space') {
+            e.stopPropagation();
+            if (focusedRef.current.index < 0)
+                return;
+            var focusedItem = item.items[focusedRef.current.index];
+            if (focusedItem.type == 'desktopgroup') {
+                dropdownMenusOpenedArray.current = __spreadArray(__spreadArray([], dropdownMenusOpenedArray.current, true), [focusedItem.id], false);
+                forceUpdate({});
+            }
+            else {
+                (_a = allRefs[focusedRef.current.index].current) === null || _a === void 0 ? void 0 : _a.click();
+                forceUpdate({});
+            }
+            //just trigger rerendering
+        }
+    };
+    var setNewFocusedElement = function (index) {
+        var _a, _b, _c;
+        var newFocusedElement = index >= 0 ? allRefs[index] : null;
+        var oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;
+        focusedRef.current.index = index;
+        if (oldFocusedElement)
+            (_a = oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : oldFocusedElement.current) === null || _a === void 0 ? void 0 : _a.classList.remove('dropdown-hover');
+        if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+            (_b = newFocusedElement.current) === null || _b === void 0 ? void 0 : _b.classList.add('dropdown-hover');
+            console.log(item.items[index].id);
+            onItemFocused && onItemFocused((_c = item.items[index].id) !== null && _c !== void 0 ? _c : '');
+        }
+        else if (onItemFocused)
+            onItemFocused('');
+    };
+    var onFocus = function (event) {
+        event.stopPropagation();
+        dropdownMenusOpenedArray.current = __spreadArray([], (nestPath !== null && nestPath !== void 0 ? nestPath : []), true);
+        setNewFocusedElement(0);
+        forceUpdate({});
+    };
+    var onBlur = function (event) {
+        event.stopPropagation();
+        setNewFocusedElement(-1);
+    };
+    return (React.createElement(SubMenuWrapper, { id: item.id, className: existingRef ? 'open' : '', topLevel: topLevel, visible: Boolean(existingRef) },
+        React.createElement(Menu, { role: "group", ref: ref, "aria-labelledby": ariaLabelledBy, onBlur: onBlur, onFocus: onFocus, onKeyDown: function (event) { return onKeyDown(event); }, tabIndex: 0 },
+            React.createElement(MenuSection, null,
+                React.createElement(MenuSectionList, null,
+                    React.createElement(Tabs, { size: Size.Medium }, item.items.map(function (entry, index) {
+                        var _a, _b, _c, _d;
+                        var isGroup = entry.type == 'desktopgroup';
+                        var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
+                        var SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find(function (x) { return x == entry.id; }));
+                        if (isGroup) {
+                            return (React.createElement("div", { style: { position: 'relative' }, onMouseEnter: function (event) { return onMouseEnter(event, entry.id); }, onMouseLeave: function (event) { return onMouseLeave(event, entry.id); } },
+                                React.createElement(MenuItem, { id: entry.id + '_parentOption', "aria-expanded": Boolean(SubItemOpened), "aria-activedescendant": (_b = (_a = entry.items.find(function (x) { return x.id == focusedItemId; })) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', tabIndex: -1, ref: allRefs[index], "aria-controls": entry.id, role: "group", 
+                                    //id={entry.id} removing this can break something
+                                    item: {
+                                        value: (_c = entry.label) !== null && _c !== void 0 ? _c : '',
+                                    }, iconRight: React.createElement(SystemIcons.ArrowDropRight, { size: "24px" }), active: SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId)), onClickHandler: function () { } }),
+                                React.createElement(SubMenu, { ariaLabelledBy: entry.id + '_parentOption', onItemFocused: onItemFocused, focusedItemId: focusedItemId, ref: subMenuRefs[index], nestPath: __spreadArray(__spreadArray([], (nestPath !== null && nestPath !== void 0 ? nestPath : []), true), [entry.id], false), onItemStateChanged: onItemStateChanged, activeItemId: activeItemId, dropdownMenusOpenedArray: dropdownMenusOpenedArray, item: entry, index: index + 1, topLevel: false })));
+                        }
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement(TabLink, { id: entry.id, tabIndex: -1, key: key, to: isGroup ? '' : key, ref: allRefs[index], onActiveStateChanged: function (state) { return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state); }, forceDeactivate: isGroup, requiredLine: (_d = entry.label) !== null && _d !== void 0 ? _d : '', optionalLine: '', endLineIcon: isGroup ? React.createElement(SystemIcons.ArrowDropRight, { size: "24px" }) : null, OptionalLineIcon: '', disabled: entry.disabled, showNotificationDot: false, size: Size.Medium, variant: "positive" })));
+                    })))))));
+});
+var templateObject_1;