@laerdal/life-react-components 2.2.1-dev.24 → 2.2.1-dev.25

package/dist/GlobalNavigationBar/desktop/MainMenu.cjs

@@ -59,6 +59,7 @@ var MainMenu = function MainMenu(_ref) {
     _React$useState4 = (0, _slicedToArray2.default)(_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;
@@ -115,6 +116,13 @@ var MainMenu = function MainMenu(_ref) {
     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') {
@@ -176,6 +184,7 @@ var MainMenu = function MainMenu(_ref) {
         style: {
           position: 'relative'
         },
+        onKeyDown: onKeyDownTop,
         onMouseEnter: function onMouseEnter(event) {
           var _item$id;
           return _onMouseEnter(event, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : '');
@@ -211,10 +220,39 @@ var MainMenu = function MainMenu(_ref) {
       });
     }
   };
+  var extendedSectionClick = function extendedSectionClick(id) {
+    var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) {
+      return x == id;
+    });
+    if (existingRefForId == null) {
+      dropdownMenusOpenedArray.current = [].concat((0, _toConsumableArray2.default)(dropdownMenusOpenedArray.current), [id]);
+      //just trigger rerendering
+      forceUpdate({});
+    }
+  };
+  var extendedSectionKeyHandler = function extendedSectionKeyHandler(event) {
+    if (event.key == 'Enter' || event.code == 'Space') {
+      event.stopPropagation();
+      dropdownMenusOpenedArray.current = [ExtendedMenuOption];
+      forceUpdate({});
+    } else if (event.key == 'Tab') {
+      //if dropdown menu is opened, navigate, otherwise use default handler
+      if (dropdownMenusOpenedArray.current.findIndex(function (x) {
+        return x == ExtendedMenuOption;
+      }) >= 0) {
+        var _extendedMenuOptionRe;
+        event.preventDefault();
+        (_extendedMenuOptionRe = extendedMenuOptionRef.current) === null || _extendedMenuOptionRe === void 0 ? void 0 : _extendedMenuOptionRe.focus();
+      }
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
     children: [items === null || items === void 0 ? void 0 : items.map(renderItem), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExtendedSection, {
+      onKeyDown: function onKeyDown(event) {
+        return extendedSectionKeyHandler(event);
+      },
       onMouseEnter: function onMouseEnter(event) {
         return _onMouseEnter(event, ExtendedMenuOption);
       },
@@ -231,9 +269,11 @@ var MainMenu = function MainMenu(_ref) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubMenu.SubMenu, {
         activeItemId: activeItem,
+        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

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","LARGE","NavItemDiv","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","Menu","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","React","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","subMenuRefs","setAllSubMenuRefs","useEffect","map","x","type","createRef","undefined","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","onMouseEnter","existingRefForId","find","window","addEventListener","removeEventListener","length","onFocus","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","e","existingRef","onClick","onKeyDown","key","code","findIndex","preventDefault","focus","position","checkIfContainsItem","state","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n\n  ${NavItemDiv} {\n    cursor: pointer;\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\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //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\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllSubMenuRefs(items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [items]);\n\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  }\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton}  className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if(event.key == 'Enter' || event.code == 'Space')\n        {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n        else if(event.key == 'Tab')\n        {\n          //if dropdown menu is opened, navigate, otherwise use default handler\n          if(dropdownMenusOpenedArray.current.findIndex(x => x == items[index].id) >= 0)\n          {\n            event.preventDefault();\n            subMenuRefs[index]?.current?.focus();\n          }\n        }\n      }\n\n      return (\n        <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')} onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem onFocus={onFocus} onKeyDown={onKeyDown} tabIndex={0} className={(existingRef != null || checkIfContainsItem(item, activeItem) ) ? 'active' : ''} key={item.label} to={null} onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            ref={subMenuRefs[index]}\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)} onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            onItemStateChanged={(item, state) => {\n              if (state)\n                setActiveItemId(item);\n              else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","LARGE","NavItemDiv","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","Menu","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","React","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","subMenuRefs","setAllSubMenuRefs","extendedMenuOptionRef","createRef","useEffect","map","x","type","undefined","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","onMouseEnter","existingRefForId","find","window","addEventListener","removeEventListener","length","onFocus","onKeyDownTop","key","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","e","existingRef","onClick","onKeyDown","code","findIndex","preventDefault","focus","position","checkIfContainsItem","state","extendedSectionClick","extendedSectionKeyHandler","stopPropagation","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n\n  ${NavItemDiv} {\n    cursor: pointer;\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\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //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\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n  const extendedMenuOptionRef = React.createRef<HTMLUListElement>();\n\n  React.useEffect(() => {\n    setAllSubMenuRefs(items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [items]);\n\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  };\n\n  const onKeyDownTop = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton} className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key == 'Enter' || event.code == 'Space') {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        } else if (event.key == 'Tab') {\n          //if dropdown menu is opened, navigate, otherwise use default handler\n          if (dropdownMenusOpenedArray.current.findIndex((x) => x == items[index].id) >= 0) {\n            event.preventDefault();\n\n            subMenuRefs[index]?.current?.focus();\n          }\n        }\n      };\n\n      return (\n        <div\n          style={{ position: 'relative' }}\n          onKeyDown={onKeyDownTop}\n          onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')}\n          onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem\n            onFocus={onFocus}\n            onKeyDown={onKeyDown}\n            tabIndex={0}\n            className={existingRef != null || checkIfContainsItem(item, activeItem) ? 'active' : ''}\n            key={item.label}\n            to={null}\n            onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            ref={subMenuRefs[index]}\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if (item == activeItem) setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  const extendedSectionClick = (id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const extendedSectionKeyHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key == 'Enter' || event.code == 'Space') {\n      event.stopPropagation();\n\n      dropdownMenusOpenedArray.current = [ExtendedMenuOption];\n      forceUpdate({});\n    }  else if (event.key == 'Tab') {\n      //if dropdown menu is opened, navigate, otherwise use default handler\n      if (dropdownMenusOpenedArray.current.findIndex((x) => x == ExtendedMenuOption) >= 0) {\n        event.preventDefault();\n        extendedMenuOptionRef.current?.focus();\n      }\n    }\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection\n          onKeyDown={(event) => extendedSectionKeyHandler(event)}\n          onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)}\n          onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            ref={extendedMenuOptionRef}\n            onItemStateChanged={(item, state) => {\n              if (state) setActiveItemId(item);\n              else if (item == activeItem) setActiveItemId('');\n            }}\n            nestPath={[ExtendedMenuOption]}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/MainMenu.js

@@ -50,6 +50,7 @@ var MainMenu = function MainMenu(_ref) {
     _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;
@@ -106,6 +107,13 @@ var MainMenu = function MainMenu(_ref) {
     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') {
@@ -167,6 +175,7 @@ var MainMenu = function MainMenu(_ref) {
         style: {
           position: 'relative'
         },
+        onKeyDown: onKeyDownTop,
         onMouseEnter: function onMouseEnter(event) {
           var _item$id;
           return _onMouseEnter(event, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : '');
@@ -202,10 +211,39 @@ var MainMenu = function MainMenu(_ref) {
       });
     }
   };
+  var extendedSectionClick = function extendedSectionClick(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({});
+    }
+  };
+  var extendedSectionKeyHandler = function extendedSectionKeyHandler(event) {
+    if (event.key == 'Enter' || event.code == 'Space') {
+      event.stopPropagation();
+      dropdownMenusOpenedArray.current = [ExtendedMenuOption];
+      forceUpdate({});
+    } else if (event.key == 'Tab') {
+      //if dropdown menu is opened, navigate, otherwise use default handler
+      if (dropdownMenusOpenedArray.current.findIndex(function (x) {
+        return x == ExtendedMenuOption;
+      }) >= 0) {
+        var _extendedMenuOptionRe;
+        event.preventDefault();
+        (_extendedMenuOptionRe = extendedMenuOptionRef.current) === null || _extendedMenuOptionRe === void 0 ? void 0 : _extendedMenuOptionRe.focus();
+      }
+    }
+  };
   return /*#__PURE__*/_jsxs(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
     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);
       },
@@ -222,9 +260,11 @@ var MainMenu = function MainMenu(_ref) {
         })
       }), /*#__PURE__*/_jsx(SubMenu, {
         activeItemId: activeItem,
+        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

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","Menu","SubMenu","IconButton","defaultOnMouseDownHandler","SystemIcons","NavItemDiv","checkIfContainsItem","NavContainer","div","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","subMenuRefs","setAllSubMenuRefs","useEffect","map","x","type","createRef","undefined","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","onMouseEnter","existingRefForId","find","window","addEventListener","removeEventListener","length","onFocus","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","e","existingRef","onClick","onKeyDown","key","code","findIndex","preventDefault","focus","position","state","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n\n  ${NavItemDiv} {\n    cursor: pointer;\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\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //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\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllSubMenuRefs(items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [items]);\n\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  }\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton}  className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if(event.key == 'Enter' || event.code == 'Space')\n        {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n        else if(event.key == 'Tab')\n        {\n          //if dropdown menu is opened, navigate, otherwise use default handler\n          if(dropdownMenusOpenedArray.current.findIndex(x => x == items[index].id) >= 0)\n          {\n            event.preventDefault();\n            subMenuRefs[index]?.current?.focus();\n          }\n        }\n      }\n\n      return (\n        <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')} onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem onFocus={onFocus} onKeyDown={onKeyDown} tabIndex={0} className={(existingRef != null || checkIfContainsItem(item, activeItem) ) ? 'active' : ''} key={item.label} to={null} onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            ref={subMenuRefs[index]}\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)} onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            onItemStateChanged={(item, state) => {\n              if (state)\n                setActiveItemId(item);\n              else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","Menu","SubMenu","IconButton","defaultOnMouseDownHandler","SystemIcons","NavItemDiv","checkIfContainsItem","NavContainer","div","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","subMenuRefs","setAllSubMenuRefs","extendedMenuOptionRef","createRef","useEffect","map","x","type","undefined","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","onMouseEnter","existingRefForId","find","window","addEventListener","removeEventListener","length","onFocus","onKeyDownTop","key","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","e","existingRef","onClick","onKeyDown","code","findIndex","preventDefault","focus","position","state","extendedSectionClick","extendedSectionKeyHandler","stopPropagation","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n\n  ${NavItemDiv} {\n    cursor: pointer;\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\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //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\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n  const extendedMenuOptionRef = React.createRef<HTMLUListElement>();\n\n  React.useEffect(() => {\n    setAllSubMenuRefs(items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [items]);\n\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  };\n\n  const onKeyDownTop = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton} className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key == 'Enter' || event.code == 'Space') {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        } else if (event.key == 'Tab') {\n          //if dropdown menu is opened, navigate, otherwise use default handler\n          if (dropdownMenusOpenedArray.current.findIndex((x) => x == items[index].id) >= 0) {\n            event.preventDefault();\n\n            subMenuRefs[index]?.current?.focus();\n          }\n        }\n      };\n\n      return (\n        <div\n          style={{ position: 'relative' }}\n          onKeyDown={onKeyDownTop}\n          onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')}\n          onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem\n            onFocus={onFocus}\n            onKeyDown={onKeyDown}\n            tabIndex={0}\n            className={existingRef != null || checkIfContainsItem(item, activeItem) ? 'active' : ''}\n            key={item.label}\n            to={null}\n            onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            ref={subMenuRefs[index]}\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if (item == activeItem) setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  const extendedSectionClick = (id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const extendedSectionKeyHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key == 'Enter' || event.code == 'Space') {\n      event.stopPropagation();\n\n      dropdownMenusOpenedArray.current = [ExtendedMenuOption];\n      forceUpdate({});\n    }  else if (event.key == 'Tab') {\n      //if dropdown menu is opened, navigate, otherwise use default handler\n      if (dropdownMenusOpenedArray.current.findIndex((x) => x == ExtendedMenuOption) >= 0) {\n        event.preventDefault();\n        extendedMenuOptionRef.current?.focus();\n      }\n    }\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection\n          onKeyDown={(event) => extendedSectionKeyHandler(event)}\n          onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)}\n          onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <MoreHorizontal size=\"24px\" />\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            ref={extendedMenuOptionRef}\n            onItemStateChanged={(item, state) => {\n              if (state) setActiveItemId(item);\n              else if (item == activeItem) setActiveItemId('');\n            }}\n            nestPath={[ExtendedMenuOption]}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/SubMenu.cjs

@@ -88,20 +88,18 @@ var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var _onKeyDown = function onKeyDown(e) {
-    e.stopPropagation();
     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 === 'Escape' || e.key === 'Esc') {
-      dropdownMenusOpenedArray.current = [];
-      //just trigger rerendering
-      forceUpdate({});
     } 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') {

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

@@ -1 +1 @@
-{"version":3,"file":"SubMenu.cjs","names":["SubMenuWrapper","styled","div","Menu","props","topLevel","visible","SubMenu","React","forwardRef","ref","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","focusedRef","useRef","allRefs","setAllRefs","subMenuRefs","setAllSubMenuRefs","useEffect","items","map","x","type","createRef","undefined","existingRef","current","find","id","onMouseLeave","event","filter","containActiveItem","checkIfContainsItem","onMouseEnter","existingRefForId","onKeyDown","e","stopPropagation","key","preventDefault","setNewFocusedElement","length","code","focusedItem","click","newFocusedElement","oldFocusedElement","classList","remove","add","scrollIntoView","block","inline","onFocus","onBlur","Boolean","Size","Medium","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n  item: MenuNavigationItemTypeDesktopGroup;\n  index: number;\n  topLevel: boolean;\n  dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n  onSubMenuOpened?: (item: string) => void;\n  onSubMenuHidden?: (item: string) => void;\n  onItemStateChanged?: (item: string, state: boolean) => void;\n  activeItemId?: string;\n  nestPath?: string[];\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean; visible: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  ${(props) => (!props.visible ? 'display: none;' : '')}\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nexport const SubMenu = React.forwardRef<HTMLUListElement, SubMenuProps>(({\n  item,\n  index,\n  topLevel,\n  dropdownMenusOpenedArray,\n  onSubMenuHidden,\n  onSubMenuOpened,\n  onItemStateChanged,\n  activeItemId,\n  nestPath,\n}: SubMenuProps, ref): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\n  const focusedRef = React.useRef<{ index: number }>({ index: -1 });\n  const [allRefs, setAllRefs] = React.useState<React.RefObject<HTMLButtonElement | HTMLAnchorElement>[]>([]);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLButtonElement>() : React.createRef<HTMLAnchorElement>())));\n    setAllSubMenuRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [item]);\n\n  const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    onSubMenuHidden && onSubMenuHidden(id);\n    forceUpdate({});\n  };\n  let containActiveItem = false;\n  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      onSubMenuOpened && onSubMenuOpened(id);\n      forceUpdate({});\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    e.stopPropagation();\n    if (e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (focusedRef.current.index > 0) {\n        setNewFocusedElement(focusedRef.current.index - 1);\n      }\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      e.preventDefault();\n      if(focusedRef.current.index < allRefs.length - 1)\n      setNewFocusedElement(focusedRef.current.index + 1);\n    } else if (e.key === 'Escape' || e.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    } \n     else\n    if (e.key == 'Enter' || e.code == 'Space') {\n      if(focusedRef.current.index < 0)\n        return;\n      \n      const focusedItem = item.items[focusedRef.current.index];\n      if(focusedItem.type == 'desktopgroup')\n      {\n        dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, focusedItem.id];\n        forceUpdate({});\n      }\n      else\n      {\n        allRefs[focusedRef.current.index].current?.click();\n        forceUpdate({});\n      }\n\n      //just trigger rerendering\n      \n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = index >= 0 ? allRefs[index] : null;\n    const oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;\n    focusedRef.current.index = index;\n\n    if(oldFocusedElement)\n      oldFocusedElement?.current?.classList.remove('dropdown-hover');\n\n    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {\n      newFocusedElement.current?.classList.add('dropdown-hover');\n      newFocusedElement.current?.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    setNewFocusedElement(-1);\n  };\n\n  return (\n    <SubMenuWrapper id={item.id}  className={existingRef ? 'open' : '' } topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" ref={ref} aria-labelledby=\"UserMenuButton\" onBlur={onBlur} onFocus={onFocus} onKeyDown={(event) => onKeyDown(event)} tabIndex={0}>\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry, index) => {\n                const isGroup = entry.type == 'desktopgroup';\n                const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n                const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n                if (isGroup) {\n                  return (\n                    <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n                      <MenuItem\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        id={entry.id}\n                        item={{\n                          value: entry.label ?? '',\n                        }}\n                        iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n                        active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n                        onClickHandler={() => {}}\n                      />\n                      <SubMenu\n                        ref={subMenuRefs[index]}\n                        nestPath={[...(nestPath ?? []), entry.id]}\n                        onItemStateChanged={onItemStateChanged}\n                        activeItemId={activeItemId}\n                        dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n                        item={entry as MenuNavigationItemTypeDesktopGroup}\n                        index={index + 1}\n                        topLevel={false}\n                      />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      tabIndex={-1}\n                      key={key}\n                      to={isGroup ? '' : key}\n                      ref={allRefs[index] as React.Ref<HTMLAnchorElement>}\n                      onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n                      forceDeactivate={isGroup}\n                      requiredLine={entry.label ?? ''}\n                      optionalLine={''}\n                      endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n                      OptionalLineIcon={''}\n                      disabled={entry.disabled}\n                      showNotificationDot={false}\n                      size={Size.Medium}\n                      variant=\"positive\"\n                    />\n                  </>\n                );\n              })}\n            </Tabs>\n          </MenuSectionList>\n        </MenuSection>\n      </Menu>\n    </SubMenuWrapper>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"SubMenu.cjs","names":["SubMenuWrapper","styled","div","Menu","props","topLevel","visible","SubMenu","React","forwardRef","ref","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","focusedRef","useRef","allRefs","setAllRefs","subMenuRefs","setAllSubMenuRefs","useEffect","items","map","x","type","createRef","undefined","existingRef","current","find","id","onMouseLeave","event","filter","containActiveItem","checkIfContainsItem","onMouseEnter","existingRefForId","onKeyDown","e","key","stopPropagation","preventDefault","setNewFocusedElement","length","code","focusedItem","click","newFocusedElement","oldFocusedElement","classList","remove","add","scrollIntoView","block","inline","onFocus","onBlur","Boolean","Size","Medium","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n  item: MenuNavigationItemTypeDesktopGroup;\n  index: number;\n  topLevel: boolean;\n  dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n  onSubMenuOpened?: (item: string) => void;\n  onSubMenuHidden?: (item: string) => void;\n  onItemStateChanged?: (item: string, state: boolean) => void;\n  activeItemId?: string;\n  nestPath?: string[];\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean; visible: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  ${(props) => (!props.visible ? 'display: none;' : '')}\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nexport const SubMenu = React.forwardRef<HTMLUListElement, SubMenuProps>(({\n  item,\n  index,\n  topLevel,\n  dropdownMenusOpenedArray,\n  onSubMenuHidden,\n  onSubMenuOpened,\n  onItemStateChanged,\n  activeItemId,\n  nestPath,\n}: SubMenuProps, ref): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\n  const focusedRef = React.useRef<{ index: number }>({ index: -1 });\n  const [allRefs, setAllRefs] = React.useState<React.RefObject<HTMLButtonElement | HTMLAnchorElement>[]>([]);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLButtonElement>() : React.createRef<HTMLAnchorElement>())));\n    setAllSubMenuRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [item]);\n\n  const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    onSubMenuHidden && onSubMenuHidden(id);\n    forceUpdate({});\n  };\n  let containActiveItem = false;\n  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      onSubMenuOpened && onSubMenuOpened(id);\n      forceUpdate({});\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    \n    if (e.key === 'ArrowUp' || e.key === 'Up') {\n      e.stopPropagation();\n      e.preventDefault();\n      if (focusedRef.current.index > 0) {\n        setNewFocusedElement(focusedRef.current.index - 1);\n      }\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      e.stopPropagation();\n      e.preventDefault();\n      if(focusedRef.current.index < allRefs.length - 1)\n      setNewFocusedElement(focusedRef.current.index + 1);\n    } \n     else\n    if (e.key == 'Enter' || e.code == 'Space') {\n      e.stopPropagation();\n      if(focusedRef.current.index < 0)\n        return;\n      \n      const focusedItem = item.items[focusedRef.current.index];\n      if(focusedItem.type == 'desktopgroup')\n      {\n        dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, focusedItem.id];\n        forceUpdate({});\n      }\n      else\n      {\n        allRefs[focusedRef.current.index].current?.click();\n        forceUpdate({});\n      }\n\n      //just trigger rerendering\n      \n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = index >= 0 ? allRefs[index] : null;\n    const oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;\n    focusedRef.current.index = index;\n\n    if(oldFocusedElement)\n      oldFocusedElement?.current?.classList.remove('dropdown-hover');\n\n    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {\n      newFocusedElement.current?.classList.add('dropdown-hover');\n      newFocusedElement.current?.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    setNewFocusedElement(-1);\n  };\n\n  return (\n    <SubMenuWrapper id={item.id}  className={existingRef ? 'open' : '' } topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" ref={ref} aria-labelledby=\"UserMenuButton\" onBlur={onBlur} onFocus={onFocus} onKeyDown={(event) => onKeyDown(event)} tabIndex={0}>\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry, index) => {\n                const isGroup = entry.type == 'desktopgroup';\n                const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n                const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n                if (isGroup) {\n                  return (\n                    <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n                      <MenuItem\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        id={entry.id}\n                        item={{\n                          value: entry.label ?? '',\n                        }}\n                        iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n                        active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n                        onClickHandler={() => {}}\n                      />\n                      <SubMenu\n                        ref={subMenuRefs[index]}\n                        nestPath={[...(nestPath ?? []), entry.id]}\n                        onItemStateChanged={onItemStateChanged}\n                        activeItemId={activeItemId}\n                        dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n                        item={entry as MenuNavigationItemTypeDesktopGroup}\n                        index={index + 1}\n                        topLevel={false}\n                      />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      tabIndex={-1}\n                      key={key}\n                      to={isGroup ? '' : key}\n                      ref={allRefs[index] as React.Ref<HTMLAnchorElement>}\n                      onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n                      forceDeactivate={isGroup}\n                      requiredLine={entry.label ?? ''}\n                      optionalLine={''}\n                      endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n                      OptionalLineIcon={''}\n                      disabled={entry.disabled}\n                      showNotificationDot={false}\n                      size={Size.Medium}\n                      variant=\"positive\"\n                    />\n                  </>\n                );\n              })}\n            </Tabs>\n          </MenuSectionList>\n        </MenuSection>\n      </Menu>\n    </SubMenuWrapper>\n  );\n});\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/SubMenu.js

@@ -79,20 +79,18 @@ export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var _onKeyDown = function onKeyDown(e) {
-    e.stopPropagation();
     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 === 'Escape' || e.key === 'Esc') {
-      dropdownMenusOpenedArray.current = [];
-      //just trigger rerendering
-      forceUpdate({});
     } 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') {

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

@@ -1 +1 @@
-{"version":3,"file":"SubMenu.js","names":["React","styled","Menu","MenuSection","MenuSectionList","Size","SystemIcons","checkIfContainsItem","Tabs","TabLink","MenuItem","SubMenuWrapper","div","props","topLevel","visible","SubMenu","forwardRef","ref","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","focusedRef","useRef","allRefs","setAllRefs","subMenuRefs","setAllSubMenuRefs","useEffect","items","map","x","type","createRef","undefined","existingRef","current","find","id","onMouseLeave","event","filter","containActiveItem","onMouseEnter","existingRefForId","onKeyDown","e","stopPropagation","key","preventDefault","setNewFocusedElement","length","code","focusedItem","click","newFocusedElement","oldFocusedElement","classList","remove","add","scrollIntoView","block","inline","onFocus","onBlur","Boolean","Medium","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n  item: MenuNavigationItemTypeDesktopGroup;\n  index: number;\n  topLevel: boolean;\n  dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n  onSubMenuOpened?: (item: string) => void;\n  onSubMenuHidden?: (item: string) => void;\n  onItemStateChanged?: (item: string, state: boolean) => void;\n  activeItemId?: string;\n  nestPath?: string[];\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean; visible: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  ${(props) => (!props.visible ? 'display: none;' : '')}\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nexport const SubMenu = React.forwardRef<HTMLUListElement, SubMenuProps>(({\n  item,\n  index,\n  topLevel,\n  dropdownMenusOpenedArray,\n  onSubMenuHidden,\n  onSubMenuOpened,\n  onItemStateChanged,\n  activeItemId,\n  nestPath,\n}: SubMenuProps, ref): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\n  const focusedRef = React.useRef<{ index: number }>({ index: -1 });\n  const [allRefs, setAllRefs] = React.useState<React.RefObject<HTMLButtonElement | HTMLAnchorElement>[]>([]);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLButtonElement>() : React.createRef<HTMLAnchorElement>())));\n    setAllSubMenuRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [item]);\n\n  const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    onSubMenuHidden && onSubMenuHidden(id);\n    forceUpdate({});\n  };\n  let containActiveItem = false;\n  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      onSubMenuOpened && onSubMenuOpened(id);\n      forceUpdate({});\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    e.stopPropagation();\n    if (e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (focusedRef.current.index > 0) {\n        setNewFocusedElement(focusedRef.current.index - 1);\n      }\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      e.preventDefault();\n      if(focusedRef.current.index < allRefs.length - 1)\n      setNewFocusedElement(focusedRef.current.index + 1);\n    } else if (e.key === 'Escape' || e.key === 'Esc') {\n      dropdownMenusOpenedArray.current = [];\n      //just trigger rerendering\n      forceUpdate({});\n    } \n     else\n    if (e.key == 'Enter' || e.code == 'Space') {\n      if(focusedRef.current.index < 0)\n        return;\n      \n      const focusedItem = item.items[focusedRef.current.index];\n      if(focusedItem.type == 'desktopgroup')\n      {\n        dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, focusedItem.id];\n        forceUpdate({});\n      }\n      else\n      {\n        allRefs[focusedRef.current.index].current?.click();\n        forceUpdate({});\n      }\n\n      //just trigger rerendering\n      \n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = index >= 0 ? allRefs[index] : null;\n    const oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;\n    focusedRef.current.index = index;\n\n    if(oldFocusedElement)\n      oldFocusedElement?.current?.classList.remove('dropdown-hover');\n\n    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {\n      newFocusedElement.current?.classList.add('dropdown-hover');\n      newFocusedElement.current?.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    setNewFocusedElement(-1);\n  };\n\n  return (\n    <SubMenuWrapper id={item.id}  className={existingRef ? 'open' : '' } topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" ref={ref} aria-labelledby=\"UserMenuButton\" onBlur={onBlur} onFocus={onFocus} onKeyDown={(event) => onKeyDown(event)} tabIndex={0}>\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry, index) => {\n                const isGroup = entry.type == 'desktopgroup';\n                const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n                const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n                if (isGroup) {\n                  return (\n                    <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n                      <MenuItem\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        id={entry.id}\n                        item={{\n                          value: entry.label ?? '',\n                        }}\n                        iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n                        active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n                        onClickHandler={() => {}}\n                      />\n                      <SubMenu\n                        ref={subMenuRefs[index]}\n                        nestPath={[...(nestPath ?? []), entry.id]}\n                        onItemStateChanged={onItemStateChanged}\n                        activeItemId={activeItemId}\n                        dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n                        item={entry as MenuNavigationItemTypeDesktopGroup}\n                        index={index + 1}\n                        topLevel={false}\n                      />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      tabIndex={-1}\n                      key={key}\n                      to={isGroup ? '' : key}\n                      ref={allRefs[index] as React.Ref<HTMLAnchorElement>}\n                      onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n                      forceDeactivate={isGroup}\n                      requiredLine={entry.label ?? ''}\n                      optionalLine={''}\n                      endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n                      OptionalLineIcon={''}\n                      disabled={entry.disabled}\n                      showNotificationDot={false}\n                      size={Size.Medium}\n                      variant=\"positive\"\n                    />\n                  </>\n                );\n              })}\n            </Tabs>\n          </MenuSectionList>\n        </MenuSection>\n      </Menu>\n    </SubMenuWrapper>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"SubMenu.js","names":["React","styled","Menu","MenuSection","MenuSectionList","Size","SystemIcons","checkIfContainsItem","Tabs","TabLink","MenuItem","SubMenuWrapper","div","props","topLevel","visible","SubMenu","forwardRef","ref","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","focusedRef","useRef","allRefs","setAllRefs","subMenuRefs","setAllSubMenuRefs","useEffect","items","map","x","type","createRef","undefined","existingRef","current","find","id","onMouseLeave","event","filter","containActiveItem","onMouseEnter","existingRefForId","onKeyDown","e","key","stopPropagation","preventDefault","setNewFocusedElement","length","code","focusedItem","click","newFocusedElement","oldFocusedElement","classList","remove","add","scrollIntoView","block","inline","onFocus","onBlur","Boolean","Medium","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } 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, { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { DropdownContent } from '../../Dropdown';\nimport { VerticalTabEntry, VerticalTabs } from '../../Tabs';\nimport { Size } from '../../types';\nimport { SystemIcons } from '../../icons';\nimport { checkIfContainsItem } from '../utils';\nimport Tabs from '../../Tabs/Tabs';\nimport TabLink from '../../Tabs/TabLink';\nimport { MenuItem } from '../../MenuItem';\nimport { NavItemDiv } from '../../NavItem/NavItem';\n\nexport type SubMenuProps = {\n  item: MenuNavigationItemTypeDesktopGroup;\n  index: number;\n  topLevel: boolean;\n  dropdownMenusOpenedArray: React.MutableRefObject<string[]>;\n  onSubMenuOpened?: (item: string) => void;\n  onSubMenuHidden?: (item: string) => void;\n  onItemStateChanged?: (item: string, state: boolean) => void;\n  activeItemId?: string;\n  nestPath?: string[];\n};\n\nexport const SubMenuWrapper = styled.div<{ topLevel: boolean; visible: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  ${(props) => (!props.visible ? 'display: none;' : '')}\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nexport const SubMenu = React.forwardRef<HTMLUListElement, SubMenuProps>(({\n  item,\n  index,\n  topLevel,\n  dropdownMenusOpenedArray,\n  onSubMenuHidden,\n  onSubMenuOpened,\n  onItemStateChanged,\n  activeItemId,\n  nestPath,\n}: SubMenuProps, ref): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\n  const focusedRef = React.useRef<{ index: number }>({ index: -1 });\n  const [allRefs, setAllRefs] = React.useState<React.RefObject<HTMLButtonElement | HTMLAnchorElement>[]>([]);\n  const [subMenuRefs, setAllSubMenuRefs] = React.useState<(React.RefObject<HTMLUListElement> | undefined)[]>([]);\n\n  React.useEffect(() => {\n    setAllRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLButtonElement>() : React.createRef<HTMLAnchorElement>())));\n    setAllSubMenuRefs(item.items.map((x) => (x.type == 'desktopgroup' ? React.createRef<HTMLUListElement>() : undefined)));\n  }, [item]);\n\n  const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    onSubMenuHidden && onSubMenuHidden(id);\n    forceUpdate({});\n  };\n  let containActiveItem = false;\n  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      onSubMenuOpened && onSubMenuOpened(id);\n      forceUpdate({});\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    \n    if (e.key === 'ArrowUp' || e.key === 'Up') {\n      e.stopPropagation();\n      e.preventDefault();\n      if (focusedRef.current.index > 0) {\n        setNewFocusedElement(focusedRef.current.index - 1);\n      }\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      e.stopPropagation();\n      e.preventDefault();\n      if(focusedRef.current.index < allRefs.length - 1)\n      setNewFocusedElement(focusedRef.current.index + 1);\n    } \n     else\n    if (e.key == 'Enter' || e.code == 'Space') {\n      e.stopPropagation();\n      if(focusedRef.current.index < 0)\n        return;\n      \n      const focusedItem = item.items[focusedRef.current.index];\n      if(focusedItem.type == 'desktopgroup')\n      {\n        dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, focusedItem.id];\n        forceUpdate({});\n      }\n      else\n      {\n        allRefs[focusedRef.current.index].current?.click();\n        forceUpdate({});\n      }\n\n      //just trigger rerendering\n      \n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = index >= 0 ? allRefs[index] : null;\n    const oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;\n    focusedRef.current.index = index;\n\n    if(oldFocusedElement)\n      oldFocusedElement?.current?.classList.remove('dropdown-hover');\n\n    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {\n      newFocusedElement.current?.classList.add('dropdown-hover');\n      newFocusedElement.current?.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    setNewFocusedElement(-1);\n  };\n\n  return (\n    <SubMenuWrapper id={item.id}  className={existingRef ? 'open' : '' } topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" ref={ref} aria-labelledby=\"UserMenuButton\" onBlur={onBlur} onFocus={onFocus} onKeyDown={(event) => onKeyDown(event)} tabIndex={0}>\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry, index) => {\n                const isGroup = entry.type == 'desktopgroup';\n                const key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';\n                const SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find((x) => x == entry.id));\n                if (isGroup) {\n                  return (\n                    <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, entry.id)} onMouseLeave={(event) => onMouseLeave(event, entry.id)}>\n                      <MenuItem\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        id={entry.id}\n                        item={{\n                          value: entry.label ?? '',\n                        }}\n                        iconRight={<SystemIcons.ArrowDropRight size=\"24px\" />}\n                        active={SubItemOpened || (Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId!))}\n                        onClickHandler={() => {}}\n                      />\n                      <SubMenu\n                        ref={subMenuRefs[index]}\n                        nestPath={[...(nestPath ?? []), entry.id]}\n                        onItemStateChanged={onItemStateChanged}\n                        activeItemId={activeItemId}\n                        dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n                        item={entry as MenuNavigationItemTypeDesktopGroup}\n                        index={index + 1}\n                        topLevel={false}\n                      />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      tabIndex={-1}\n                      key={key}\n                      to={isGroup ? '' : key}\n                      ref={allRefs[index] as React.Ref<HTMLAnchorElement>}\n                      onActiveStateChanged={(state) => onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state)}\n                      forceDeactivate={isGroup}\n                      requiredLine={entry.label ?? ''}\n                      optionalLine={''}\n                      endLineIcon={isGroup ? <SystemIcons.ArrowDropRight size=\"24px\" /> : null}\n                      OptionalLineIcon={''}\n                      disabled={entry.disabled}\n                      showNotificationDot={false}\n                      size={Size.Medium}\n                      variant=\"positive\"\n                    />\n                  </>\n                );\n              })}\n            </Tabs>\n          </MenuSectionList>\n        </MenuSection>\n      </Menu>\n    </SubMenuWrapper>\n  );\n});\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "2.2.1-dev.24",
+  "version": "2.2.1-dev.25",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],