@laerdal/life-react-components 2.3.1-dev.16 → 2.3.1-dev.19

package/dist/GlobalNavigationBar/desktop/SubMenu.cjs

@@ -31,7 +31,7 @@ var SubMenuWrapper = _styledComponents.default.div(_templateObject || (_template
   return !props.visible ? 'display: none;' : '';
 });
 exports.SubMenuWrapper = SubMenuWrapper;
-var SubMenu = function SubMenu(_ref) {
+var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var item = _ref.item,
     index = _ref.index,
     topLevel = _ref.topLevel,
@@ -39,11 +39,33 @@ var SubMenu = function SubMenu(_ref) {
     onSubMenuHidden = _ref.onSubMenuHidden,
     onSubMenuOpened = _ref.onSubMenuOpened,
     onItemStateChanged = _ref.onItemStateChanged,
+    focusedItemId = _ref.focusedItemId,
     activeItemId = _ref.activeItemId,
-    nestPath = _ref.nestPath;
+    nestPath = _ref.nestPath,
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    onItemFocused = _ref.onItemFocused;
   var _React$useState = React.useState({}),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     forceUpdate = _React$useState2[1];
+  var focusedRef = React.useRef({
+    index: -1
+  });
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    allRefs = _React$useState4[0],
+    setAllRefs = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    subMenuRefs = _React$useState6[0],
+    setAllSubMenuRefs = _React$useState6[1];
+  React.useEffect(function () {
+    setAllRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : /*#__PURE__*/React.createRef();
+    }));
+    setAllSubMenuRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
+    }));
+  }, [item]);
   var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
     return x == item.id;
   });
@@ -68,30 +90,77 @@ var SubMenu = function SubMenu(_ref) {
       forceUpdate({});
     }
   };
-  var _onKeyDown = function onKeyDown(event, entryId) {
-    if (event.key == 'Enter' || event.code == 'Space') {
-      dropdownMenusOpenedArray.current = [].concat((0, _toConsumableArray2.default)(dropdownMenusOpenedArray.current), [entryId]);
+  var _onKeyDown = function onKeyDown(e) {
+    if (e.key === 'ArrowUp' || e.key === 'Up') {
+      e.stopPropagation();
+      e.preventDefault();
+      if (focusedRef.current.index > 0) {
+        setNewFocusedElement(focusedRef.current.index - 1);
+      }
+    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+      e.stopPropagation();
+      e.preventDefault();
+      if (focusedRef.current.index < allRefs.length - 1) setNewFocusedElement(focusedRef.current.index + 1);
+    } else if (e.key == 'Enter' || e.code == 'Space') {
+      e.stopPropagation();
+      if (focusedRef.current.index < 0) return;
+      var focusedItem = item.items[focusedRef.current.index];
+      if (focusedItem.type == 'desktopgroup') {
+        dropdownMenusOpenedArray.current = [].concat((0, _toConsumableArray2.default)(dropdownMenusOpenedArray.current), [focusedItem.id]);
+        forceUpdate({});
+      } else {
+        var _allRefs$focusedRef$c;
+        (_allRefs$focusedRef$c = allRefs[focusedRef.current.index].current) === null || _allRefs$focusedRef$c === void 0 ? void 0 : _allRefs$focusedRef$c.click();
+        forceUpdate({});
+      }
+
       //just trigger rerendering
-      forceUpdate({});
     }
   };
+
+  var setNewFocusedElement = function setNewFocusedElement(index) {
+    var _oldFocusedElement$cu;
+    var newFocusedElement = index >= 0 ? allRefs[index] : null;
+    var oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;
+    focusedRef.current.index = index;
+    if (oldFocusedElement) oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 ? void 0 : _oldFocusedElement$cu.classList.remove('dropdown-hover');
+    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+      var _newFocusedElement$cu, _item$items$index$id;
+      (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
+      console.log(item.items[index].id);
+      onItemFocused && onItemFocused((_item$items$index$id = item.items[index].id) !== null && _item$items$index$id !== void 0 ? _item$items$index$id : '');
+    } else if (onItemFocused) onItemFocused('');
+  };
   var onFocus = function onFocus(event) {
+    event.stopPropagation();
     dropdownMenusOpenedArray.current = (0, _toConsumableArray2.default)(nestPath !== null && nestPath !== void 0 ? nestPath : []);
+    setNewFocusedElement(0);
     forceUpdate({});
   };
+  var onBlur = function onBlur(event) {
+    event.stopPropagation();
+    setNewFocusedElement(-1);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SubMenuWrapper, {
     id: item.id,
     className: existingRef ? 'open' : '',
     topLevel: topLevel,
     visible: Boolean(existingRef),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExtendedMainMenu.Menu, {
-      role: "menu",
-      "aria-labelledby": "UserMenuButton",
+      role: "group",
+      ref: ref,
+      "aria-labelledby": ariaLabelledBy,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onKeyDown: function onKeyDown(event) {
+        return _onKeyDown(event);
+      },
+      tabIndex: 0,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExtendedMainMenu.MenuSection, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExtendedMainMenu.MenuSectionList, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
             size: _types.Size.Medium,
-            children: item.items.map(function (entry) {
+            children: item.items.map(function (entry, index) {
               var _entry$label2;
               var isGroup = entry.type == 'desktopgroup';
               var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
@@ -99,7 +168,7 @@ var SubMenu = function SubMenu(_ref) {
                 return x == entry.id;
               }));
               if (isGroup) {
-                var _entry$label;
+                var _entry$items$find$id, _entry$items$find, _entry$label;
                 return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                   style: {
                     position: 'relative'
@@ -111,12 +180,17 @@ var SubMenu = function SubMenu(_ref) {
                     return _onMouseLeave(event, entry.id);
                   },
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
-                    tabIndex: 0,
-                    onFocus: onFocus,
-                    onKeyDown: function onKeyDown(event) {
-                      return _onKeyDown(event, entry.id);
-                    },
-                    id: entry.id,
+                    id: entry.id + '_parentOption',
+                    "aria-expanded": Boolean(SubItemOpened),
+                    "aria-activedescendant": (_entry$items$find$id = (_entry$items$find = entry.items.find(function (x) {
+                      return x.id == focusedItemId;
+                    })) === null || _entry$items$find === void 0 ? void 0 : _entry$items$find.id) !== null && _entry$items$find$id !== void 0 ? _entry$items$find$id : '',
+                    tabIndex: -1,
+                    ref: allRefs[index],
+                    "aria-controls": entry.id,
+                    role: "group"
+                    //id={entry.id} removing this can break something
+                    ,
                     item: {
                       value: (_entry$label = entry.label) !== null && _entry$label !== void 0 ? _entry$label : ''
                     },
@@ -126,6 +200,10 @@ var SubMenu = function SubMenu(_ref) {
                     active: SubItemOpened || Boolean(activeItemId) && activeItemId != '' && (0, _utils.checkIfContainsItem)(entry, activeItemId),
                     onClickHandler: function onClickHandler() {}
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SubMenu, {
+                    ariaLabelledBy: entry.id + '_parentOption',
+                    onItemFocused: onItemFocused,
+                    focusedItemId: focusedItemId,
+                    ref: subMenuRefs[index],
                     nestPath: [].concat((0, _toConsumableArray2.default)(nestPath !== null && nestPath !== void 0 ? nestPath : []), [entry.id]),
                     onItemStateChanged: onItemStateChanged,
                     activeItemId: activeItemId,
@@ -138,8 +216,10 @@ var SubMenu = function SubMenu(_ref) {
               }
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLink.default, {
+                  id: entry.id,
+                  tabIndex: -1,
                   to: isGroup ? '' : key,
-                  onFocus: onFocus,
+                  ref: allRefs[index],
                   onActiveStateChanged: function onActiveStateChanged(state) {
                     return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state);
                   },
@@ -162,7 +242,7 @@ var SubMenu = function SubMenu(_ref) {
       })
     })
   });
-};
+});
 exports.SubMenu = SubMenu;
 SubMenu.propTypes = {
   index: _propTypes.default.number.isRequired,
@@ -170,7 +250,10 @@ SubMenu.propTypes = {
   onSubMenuOpened: _propTypes.default.func,
   onSubMenuHidden: _propTypes.default.func,
   onItemStateChanged: _propTypes.default.func,
+  onItemFocused: _propTypes.default.func,
+  focusedItemId: _propTypes.default.string,
   activeItemId: _propTypes.default.string,
-  nestPath: _propTypes.default.arrayOf(_propTypes.default.string)
+  nestPath: _propTypes.default.arrayOf(_propTypes.default.string),
+  ariaLabelledBy: _propTypes.default.string
 };
 //# sourceMappingURL=SubMenu.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubMenu.cjs","names":["SubMenuWrapper","styled","div","Menu","props","topLevel","visible","SubMenu","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","React","useState","forceUpdate","existingRef","current","find","x","id","onMouseLeave","event","filter","containActiveItem","type","checkIfContainsItem","onMouseEnter","existingRefForId","onKeyDown","entryId","key","code","onFocus","Boolean","Size","Medium","items","map","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { MenuNavigationItemTypeDesktopGroup } from '../types';\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';\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 = ({ item, index, topLevel, dropdownMenusOpenedArray, onSubMenuHidden, onSubMenuOpened, onItemStateChanged, activeItemId, nestPath }: SubMenuProps): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\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)\n    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 = (event: React.KeyboardEvent<HTMLButtonElement>, entryId: string) => {\n    if(event.key == 'Enter' || event.code == 'Space')\n    {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, entryId];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    forceUpdate({});\n  }\n\n  return <SubMenuWrapper id={item.id} className={existingRef ? 'open' : ''} topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" aria-labelledby=\"UserMenuButton\">\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry) => {\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={0}\n                        onFocus={onFocus}\n                        onKeyDown={(event) => onKeyDown(event, entry.id)}\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 nestPath={[...(nestPath ?? []), entry.id]} onItemStateChanged={onItemStateChanged} activeItemId={activeItemId} dropdownMenusOpenedArray={dropdownMenusOpenedArray} item={entry as MenuNavigationItemTypeDesktopGroup} index={index + 1} topLevel={false} />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      key={key}\n                      to={isGroup ? '' : key}\n                      onFocus={onFocus}\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"],"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","focusedItemId","activeItemId","nestPath","ariaLabelledBy","onItemFocused","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","console","log","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 styled from 'styled-components';\n\nimport { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { MenuNavigationItemTypeDesktopGroup } from '../types';\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';\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  onItemFocused?: (item: string) => void;\n  focusedItemId?: string;\n  activeItemId?: string;\n  nestPath?: string[];\n  ariaLabelledBy?: 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  focusedItemId,\n  activeItemId,\n  nestPath,\n  ariaLabelledBy,\n  onItemFocused\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      console.log(item.items[index].id);\n      onItemFocused && onItemFocused(item.items[index].id ?? '');\n    }\n    else if(onItemFocused)\n      onItemFocused('');\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n    \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=\"group\" ref={ref} aria-labelledby={ariaLabelledBy} 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                        id={entry.id + '_parentOption'}\n                        aria-expanded={Boolean(SubItemOpened)}\n                        aria-activedescendant={entry.items.find(x => x.id == focusedItemId)?.id ?? ''}\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        aria-controls={entry.id}\n                        role=\"group\"\n                        //id={entry.id} removing this can break something\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                        ariaLabelledBy={entry.id + '_parentOption'}\n                        onItemFocused={onItemFocused}\n                        focusedItemId={focusedItemId}\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                      id={entry.id}\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.d.ts

@@ -8,11 +8,14 @@ export type SubMenuProps = {
     onSubMenuOpened?: (item: string) => void;
     onSubMenuHidden?: (item: string) => void;
     onItemStateChanged?: (item: string, state: boolean) => void;
+    onItemFocused?: (item: string) => void;
+    focusedItemId?: string;
     activeItemId?: string;
     nestPath?: string[];
+    ariaLabelledBy?: string;
 };
 export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
     topLevel: boolean;
     visible: boolean;
 }, never>;
-export declare const SubMenu: ({ item, index, topLevel, dropdownMenusOpenedArray, onSubMenuHidden, onSubMenuOpened, onItemStateChanged, activeItemId, nestPath }: SubMenuProps) => React.ReactElement<SubMenuProps>;
+export declare const SubMenu: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLUListElement>>;

package/dist/GlobalNavigationBar/desktop/SubMenu.js

@@ -22,7 +22,7 @@ export var SubMenuWrapper = styled.div(_templateObject || (_templateObject = _ta
 }, function (props) {
   return !props.visible ? 'display: none;' : '';
 });
-export var SubMenu = function SubMenu(_ref) {
+export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var item = _ref.item,
     index = _ref.index,
     topLevel = _ref.topLevel,
@@ -30,11 +30,33 @@ export var SubMenu = function SubMenu(_ref) {
     onSubMenuHidden = _ref.onSubMenuHidden,
     onSubMenuOpened = _ref.onSubMenuOpened,
     onItemStateChanged = _ref.onItemStateChanged,
+    focusedItemId = _ref.focusedItemId,
     activeItemId = _ref.activeItemId,
-    nestPath = _ref.nestPath;
+    nestPath = _ref.nestPath,
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    onItemFocused = _ref.onItemFocused;
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     forceUpdate = _React$useState2[1];
+  var focusedRef = React.useRef({
+    index: -1
+  });
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    allRefs = _React$useState4[0],
+    setAllRefs = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    subMenuRefs = _React$useState6[0],
+    setAllSubMenuRefs = _React$useState6[1];
+  React.useEffect(function () {
+    setAllRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : /*#__PURE__*/React.createRef();
+    }));
+    setAllSubMenuRefs(item.items.map(function (x) {
+      return x.type == 'desktopgroup' ? /*#__PURE__*/React.createRef() : undefined;
+    }));
+  }, [item]);
   var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
     return x == item.id;
   });
@@ -59,30 +81,77 @@ export var SubMenu = function SubMenu(_ref) {
       forceUpdate({});
     }
   };
-  var _onKeyDown = function onKeyDown(event, entryId) {
-    if (event.key == 'Enter' || event.code == 'Space') {
-      dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [entryId]);
+  var _onKeyDown = function onKeyDown(e) {
+    if (e.key === 'ArrowUp' || e.key === 'Up') {
+      e.stopPropagation();
+      e.preventDefault();
+      if (focusedRef.current.index > 0) {
+        setNewFocusedElement(focusedRef.current.index - 1);
+      }
+    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+      e.stopPropagation();
+      e.preventDefault();
+      if (focusedRef.current.index < allRefs.length - 1) setNewFocusedElement(focusedRef.current.index + 1);
+    } else if (e.key == 'Enter' || e.code == 'Space') {
+      e.stopPropagation();
+      if (focusedRef.current.index < 0) return;
+      var focusedItem = item.items[focusedRef.current.index];
+      if (focusedItem.type == 'desktopgroup') {
+        dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [focusedItem.id]);
+        forceUpdate({});
+      } else {
+        var _allRefs$focusedRef$c;
+        (_allRefs$focusedRef$c = allRefs[focusedRef.current.index].current) === null || _allRefs$focusedRef$c === void 0 ? void 0 : _allRefs$focusedRef$c.click();
+        forceUpdate({});
+      }
+
       //just trigger rerendering
-      forceUpdate({});
     }
   };
+
+  var setNewFocusedElement = function setNewFocusedElement(index) {
+    var _oldFocusedElement$cu;
+    var newFocusedElement = index >= 0 ? allRefs[index] : null;
+    var oldFocusedElement = focusedRef.current.index >= 0 ? allRefs[focusedRef.current.index] : null;
+    focusedRef.current.index = index;
+    if (oldFocusedElement) oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : (_oldFocusedElement$cu = oldFocusedElement.current) === null || _oldFocusedElement$cu === void 0 ? void 0 : _oldFocusedElement$cu.classList.remove('dropdown-hover');
+    if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
+      var _newFocusedElement$cu, _item$items$index$id;
+      (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
+      console.log(item.items[index].id);
+      onItemFocused && onItemFocused((_item$items$index$id = item.items[index].id) !== null && _item$items$index$id !== void 0 ? _item$items$index$id : '');
+    } else if (onItemFocused) onItemFocused('');
+  };
   var onFocus = function onFocus(event) {
+    event.stopPropagation();
     dropdownMenusOpenedArray.current = _toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []);
+    setNewFocusedElement(0);
     forceUpdate({});
   };
+  var onBlur = function onBlur(event) {
+    event.stopPropagation();
+    setNewFocusedElement(-1);
+  };
   return /*#__PURE__*/_jsx(SubMenuWrapper, {
     id: item.id,
     className: existingRef ? 'open' : '',
     topLevel: topLevel,
     visible: Boolean(existingRef),
     children: /*#__PURE__*/_jsx(Menu, {
-      role: "menu",
-      "aria-labelledby": "UserMenuButton",
+      role: "group",
+      ref: ref,
+      "aria-labelledby": ariaLabelledBy,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onKeyDown: function onKeyDown(event) {
+        return _onKeyDown(event);
+      },
+      tabIndex: 0,
       children: /*#__PURE__*/_jsx(MenuSection, {
         children: /*#__PURE__*/_jsx(MenuSectionList, {
           children: /*#__PURE__*/_jsx(Tabs, {
             size: Size.Medium,
-            children: item.items.map(function (entry) {
+            children: item.items.map(function (entry, index) {
               var _entry$label2;
               var isGroup = entry.type == 'desktopgroup';
               var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
@@ -90,7 +159,7 @@ export var SubMenu = function SubMenu(_ref) {
                 return x == entry.id;
               }));
               if (isGroup) {
-                var _entry$label;
+                var _entry$items$find$id, _entry$items$find, _entry$label;
                 return /*#__PURE__*/_jsxs("div", {
                   style: {
                     position: 'relative'
@@ -102,12 +171,17 @@ export var SubMenu = function SubMenu(_ref) {
                     return _onMouseLeave(event, entry.id);
                   },
                   children: [/*#__PURE__*/_jsx(MenuItem, {
-                    tabIndex: 0,
-                    onFocus: onFocus,
-                    onKeyDown: function onKeyDown(event) {
-                      return _onKeyDown(event, entry.id);
-                    },
-                    id: entry.id,
+                    id: entry.id + '_parentOption',
+                    "aria-expanded": Boolean(SubItemOpened),
+                    "aria-activedescendant": (_entry$items$find$id = (_entry$items$find = entry.items.find(function (x) {
+                      return x.id == focusedItemId;
+                    })) === null || _entry$items$find === void 0 ? void 0 : _entry$items$find.id) !== null && _entry$items$find$id !== void 0 ? _entry$items$find$id : '',
+                    tabIndex: -1,
+                    ref: allRefs[index],
+                    "aria-controls": entry.id,
+                    role: "group"
+                    //id={entry.id} removing this can break something
+                    ,
                     item: {
                       value: (_entry$label = entry.label) !== null && _entry$label !== void 0 ? _entry$label : ''
                     },
@@ -117,6 +191,10 @@ export var SubMenu = function SubMenu(_ref) {
                     active: SubItemOpened || Boolean(activeItemId) && activeItemId != '' && checkIfContainsItem(entry, activeItemId),
                     onClickHandler: function onClickHandler() {}
                   }), /*#__PURE__*/_jsx(SubMenu, {
+                    ariaLabelledBy: entry.id + '_parentOption',
+                    onItemFocused: onItemFocused,
+                    focusedItemId: focusedItemId,
+                    ref: subMenuRefs[index],
                     nestPath: [].concat(_toConsumableArray(nestPath !== null && nestPath !== void 0 ? nestPath : []), [entry.id]),
                     onItemStateChanged: onItemStateChanged,
                     activeItemId: activeItemId,
@@ -129,8 +207,10 @@ export var SubMenu = function SubMenu(_ref) {
               }
               return /*#__PURE__*/_jsx(_Fragment, {
                 children: /*#__PURE__*/_jsx(TabLink, {
+                  id: entry.id,
+                  tabIndex: -1,
                   to: isGroup ? '' : key,
-                  onFocus: onFocus,
+                  ref: allRefs[index],
                   onActiveStateChanged: function onActiveStateChanged(state) {
                     return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state);
                   },
@@ -153,14 +233,17 @@ export var SubMenu = function SubMenu(_ref) {
       })
     })
   });
-};
+});
 SubMenu.propTypes = {
   index: _pt.number.isRequired,
   topLevel: _pt.bool.isRequired,
   onSubMenuOpened: _pt.func,
   onSubMenuHidden: _pt.func,
   onItemStateChanged: _pt.func,
+  onItemFocused: _pt.func,
+  focusedItemId: _pt.string,
   activeItemId: _pt.string,
-  nestPath: _pt.arrayOf(_pt.string)
+  nestPath: _pt.arrayOf(_pt.string),
+  ariaLabelledBy: _pt.string
 };
 //# sourceMappingURL=SubMenu.js.map

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","item","index","dropdownMenusOpenedArray","onSubMenuHidden","onSubMenuOpened","onItemStateChanged","activeItemId","nestPath","useState","forceUpdate","existingRef","current","find","x","id","onMouseLeave","event","filter","containActiveItem","type","onMouseEnter","existingRefForId","onKeyDown","entryId","key","code","onFocus","Boolean","Medium","items","map","entry","isGroup","to","SubItemOpened","position","value","label","state","disabled"],"sources":["../../../src/GlobalNavigationBar/desktop/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { MenuNavigationItemTypeDesktopGroup } from '../types';\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';\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 = ({ item, index, topLevel, dropdownMenusOpenedArray, onSubMenuHidden, onSubMenuOpened, onItemStateChanged, activeItemId, nestPath }: SubMenuProps): React.ReactElement<SubMenuProps> => {\n  const [, forceUpdate] = React.useState({});\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)\n    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 = (event: React.KeyboardEvent<HTMLButtonElement>, entryId: string) => {\n    if(event.key == 'Enter' || event.code == 'Space')\n    {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, entryId];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    forceUpdate({});\n  }\n\n  return <SubMenuWrapper id={item.id} className={existingRef ? 'open' : ''} topLevel={topLevel} visible={Boolean(existingRef)}>\n      <Menu role=\"menu\" aria-labelledby=\"UserMenuButton\">\n        <MenuSection>\n          <MenuSectionList>\n            <Tabs size={Size.Medium}>\n              {item.items.map((entry) => {\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={0}\n                        onFocus={onFocus}\n                        onKeyDown={(event) => onKeyDown(event, entry.id)}\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 nestPath={[...(nestPath ?? []), entry.id]} onItemStateChanged={onItemStateChanged} activeItemId={activeItemId} dropdownMenusOpenedArray={dropdownMenusOpenedArray} item={entry as MenuNavigationItemTypeDesktopGroup} index={index + 1} topLevel={false} />\n                    </div>\n                  );\n                }\n                return (\n                  <>\n                    <TabLink\n                      key={key}\n                      to={isGroup ? '' : key}\n                      onFocus={onFocus}\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"],"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","focusedItemId","activeItemId","nestPath","ariaLabelledBy","onItemFocused","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","console","log","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 styled from 'styled-components';\n\nimport { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';\nimport { MenuNavigationItemTypeDesktopGroup } from '../types';\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';\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  onItemFocused?: (item: string) => void;\n  focusedItemId?: string;\n  activeItemId?: string;\n  nestPath?: string[];\n  ariaLabelledBy?: 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  focusedItemId,\n  activeItemId,\n  nestPath,\n  ariaLabelledBy,\n  onItemFocused\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      console.log(item.items[index].id);\n      onItemFocused && onItemFocused(item.items[index].id ?? '');\n    }\n    else if(onItemFocused)\n      onItemFocused('');\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    event.stopPropagation();\n    dropdownMenusOpenedArray.current = [...(nestPath ?? [])];\n    setNewFocusedElement(0);\n    forceUpdate({});\n    \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=\"group\" ref={ref} aria-labelledby={ariaLabelledBy} 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                        id={entry.id + '_parentOption'}\n                        aria-expanded={Boolean(SubItemOpened)}\n                        aria-activedescendant={entry.items.find(x => x.id == focusedItemId)?.id ?? ''}\n                        tabIndex={-1}\n                        ref={allRefs[index] as React.Ref<HTMLButtonElement>}\n                        \n                        aria-controls={entry.id}\n                        role=\"group\"\n                        //id={entry.id} removing this can break something\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                        ariaLabelledBy={entry.id + '_parentOption'}\n                        onItemFocused={onItemFocused}\n                        focusedItemId={focusedItemId}\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                      id={entry.id}\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/Panel/Panel.cjs

@@ -24,9 +24,9 @@ var _excluded = ["items", "order"],
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _Panel$propTypes;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ", ";\n  }\n\n  ", " {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), _styles.COLORS.neutral_20, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.LARGE);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 24px 32px 64px;\n\n  ", " {\n    gap: 32px;\n    padding: 32px 64px 128px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), _styles.COLORS.neutral_20, _styles.BREAKPOINTS.LARGE);
 var Media = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"])), _styles.BREAKPOINTS.LARGE);
-var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n"])), _styles.BREAKPOINTS.LARGE);
+var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  width: 100%;\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n  \n  p:not(:first-of-type) {\n    flex: 1;\n    color: ", ";\n  }\n\n\n"])), _styles.BREAKPOINTS.LARGE, _styles.COLORS.neutral_600);
 var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
 var Panel = function Panel(props) {
   var _currentItem$media, _currentItem$media2;
@@ -82,7 +82,7 @@ var Panel = function Panel(props) {
         alt: currentItem.media.alt
       }), ((_currentItem$media2 = currentItem.media) === null || _currentItem$media2 === void 0 ? void 0 : _currentItem$media2.type) === 'custom' && currentItem.media.content]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Quote, {
         children: currentItem.title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: currentItem.content
@@ -94,7 +94,7 @@ var Panel = function Panel(props) {
         shape: 'circular',
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronLeft, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.LinearProgress, {
-        size: isLargeScreen ? _types.Size.Medium : _types.Size.Small,
+        size: isLargeScreen ? _types.Size.Large : _types.Size.Small,
         className: 'progress',
         value: currentImage + 1,
         max: props.items.length,