@laerdal/life-react-components 2.3.1-dev.3.full → 2.3.1-dev.30.full

package/dist/GlobalNavigationBar/desktop/SubMenu.cjs

@@ -0,0 +1,259 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubMenuWrapper = exports.SubMenu = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ExtendedMainMenu = require("./ExtendedMainMenu");
+var _types = require("../../types");
+var _icons = require("../../icons");
+var _utils = require("../utils");
+var _Tabs = _interopRequireDefault(require("../../Tabs/Tabs"));
+var _TabLink = _interopRequireDefault(require("../../Tabs/TabLink"));
+var _MenuItem = require("../../MenuItem");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var SubMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  ", "\n\n  button {\n    padding-left: 0px;\n  }\n"])), _ExtendedMainMenu.Menu, function (props) {
+  return props.topLevel ? '100%' : '0px';
+}, function (props) {
+  return props.topLevel ? '0px' : 'calc(100% - 12px)';
+}, function (props) {
+  return !props.visible ? 'display: none;' : '';
+});
+exports.SubMenuWrapper = SubMenuWrapper;
+var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    topLevel = _ref.topLevel,
+    dropdownMenusOpenedArray = _ref.dropdownMenusOpenedArray,
+    onSubMenuHidden = _ref.onSubMenuHidden,
+    onSubMenuOpened = _ref.onSubMenuOpened,
+    onItemStateChanged = _ref.onItemStateChanged,
+    focusedItemId = _ref.focusedItemId,
+    activeItemId = _ref.activeItemId,
+    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;
+  });
+  var _onMouseLeave = function onMouseLeave(event, id) {
+    dropdownMenusOpenedArray.current = (0, _toConsumableArray2.default)(dropdownMenusOpenedArray.current.filter(function (x) {
+      return x != id;
+    }));
+    //just trigger rerendering
+    onSubMenuHidden && onSubMenuHidden(id);
+    forceUpdate({});
+  };
+  var containActiveItem = false;
+  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = (0, _utils.checkIfContainsItem)(item, activeItemId);
+  var _onMouseEnter = function onMouseEnter(event, 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
+      onSubMenuOpened && onSubMenuOpened(id);
+      forceUpdate({});
+    }
+  };
+  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
+    }
+  };
+
+  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: "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, index) {
+              var _entry$label2;
+              var isGroup = entry.type == 'desktopgroup';
+              var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
+              var SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find(function (x) {
+                return x == entry.id;
+              }));
+              if (isGroup) {
+                var _entry$items$find$id, _entry$items$find, _entry$label;
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  style: {
+                    position: 'relative'
+                  },
+                  onMouseEnter: function onMouseEnter(event) {
+                    return _onMouseEnter(event, entry.id);
+                  },
+                  onMouseLeave: function onMouseLeave(event) {
+                    return _onMouseLeave(event, entry.id);
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
+                    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 : ''
+                    },
+                    iconRight: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropRight, {
+                      size: "24px"
+                    }),
+                    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,
+                    dropdownMenusOpenedArray: dropdownMenusOpenedArray,
+                    item: entry,
+                    index: index + 1,
+                    topLevel: false
+                  })]
+                });
+              }
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLink.default, {
+                  id: entry.id,
+                  tabIndex: -1,
+                  to: isGroup ? '' : key,
+                  ref: allRefs[index],
+                  onActiveStateChanged: function onActiveStateChanged(state) {
+                    return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state);
+                  },
+                  forceDeactivate: isGroup,
+                  requiredLine: (_entry$label2 = entry.label) !== null && _entry$label2 !== void 0 ? _entry$label2 : '',
+                  optionalLine: '',
+                  endLineIcon: isGroup ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropRight, {
+                    size: "24px"
+                  }) : null,
+                  OptionalLineIcon: '',
+                  disabled: entry.disabled,
+                  showNotificationDot: false,
+                  size: _types.Size.Medium,
+                  variant: "positive"
+                }, key)
+              });
+            })
+          })
+        })
+      })
+    })
+  });
+});
+exports.SubMenu = SubMenu;
+SubMenu.propTypes = {
+  index: _propTypes.default.number.isRequired,
+  topLevel: _propTypes.default.bool.isRequired,
+  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),
+  ariaLabelledBy: _propTypes.default.string
+};
+//# sourceMappingURL=SubMenu.cjs.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { MenuNavigationItemTypeDesktopGroup } from '../types';
+export type SubMenuProps = {
+    item: MenuNavigationItemTypeDesktopGroup;
+    index: number;
+    topLevel: boolean;
+    dropdownMenusOpenedArray: React.MutableRefObject<string[]>;
+    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: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLUListElement>>;

package/dist/GlobalNavigationBar/desktop/SubMenu.js

@@ -0,0 +1,249 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+import * as React from 'react';
+import styled from 'styled-components';
+import { Menu, MenuSection, MenuSectionList } from './ExtendedMainMenu';
+import { Size } from '../../types';
+import { SystemIcons } from '../../icons';
+import { checkIfContainsItem } from '../utils';
+import Tabs from '../../Tabs/Tabs';
+import TabLink from '../../Tabs/TabLink';
+import { MenuItem } from '../../MenuItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var SubMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  ", "\n\n  button {\n    padding-left: 0px;\n  }\n"])), Menu, function (props) {
+  return props.topLevel ? '100%' : '0px';
+}, function (props) {
+  return props.topLevel ? '0px' : 'calc(100% - 12px)';
+}, function (props) {
+  return !props.visible ? 'display: none;' : '';
+});
+export var SubMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    topLevel = _ref.topLevel,
+    dropdownMenusOpenedArray = _ref.dropdownMenusOpenedArray,
+    onSubMenuHidden = _ref.onSubMenuHidden,
+    onSubMenuOpened = _ref.onSubMenuOpened,
+    onItemStateChanged = _ref.onItemStateChanged,
+    focusedItemId = _ref.focusedItemId,
+    activeItemId = _ref.activeItemId,
+    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;
+  });
+  var _onMouseLeave = function onMouseLeave(event, id) {
+    dropdownMenusOpenedArray.current = _toConsumableArray(dropdownMenusOpenedArray.current.filter(function (x) {
+      return x != id;
+    }));
+    //just trigger rerendering
+    onSubMenuHidden && onSubMenuHidden(id);
+    forceUpdate({});
+  };
+  var containActiveItem = false;
+  if (item.type == 'desktopgroup' && activeItemId) containActiveItem = checkIfContainsItem(item, activeItemId);
+  var _onMouseEnter = function onMouseEnter(event, id) {
+    var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) {
+      return x == id;
+    });
+    if (existingRefForId == null) {
+      dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [id]);
+      //just trigger rerendering
+      onSubMenuOpened && onSubMenuOpened(id);
+      forceUpdate({});
+    }
+  };
+  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
+    }
+  };
+
+  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: "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, index) {
+              var _entry$label2;
+              var isGroup = entry.type == 'desktopgroup';
+              var key = isGroup ? entry.id : entry.type == 'item' ? entry.to : '';
+              var SubItemOpened = Boolean(dropdownMenusOpenedArray.current.find(function (x) {
+                return x == entry.id;
+              }));
+              if (isGroup) {
+                var _entry$items$find$id, _entry$items$find, _entry$label;
+                return /*#__PURE__*/_jsxs("div", {
+                  style: {
+                    position: 'relative'
+                  },
+                  onMouseEnter: function onMouseEnter(event) {
+                    return _onMouseEnter(event, entry.id);
+                  },
+                  onMouseLeave: function onMouseLeave(event) {
+                    return _onMouseLeave(event, entry.id);
+                  },
+                  children: [/*#__PURE__*/_jsx(MenuItem, {
+                    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 : ''
+                    },
+                    iconRight: /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {
+                      size: "24px"
+                    }),
+                    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,
+                    dropdownMenusOpenedArray: dropdownMenusOpenedArray,
+                    item: entry,
+                    index: index + 1,
+                    topLevel: false
+                  })]
+                });
+              }
+              return /*#__PURE__*/_jsx(_Fragment, {
+                children: /*#__PURE__*/_jsx(TabLink, {
+                  id: entry.id,
+                  tabIndex: -1,
+                  to: isGroup ? '' : key,
+                  ref: allRefs[index],
+                  onActiveStateChanged: function onActiveStateChanged(state) {
+                    return onItemStateChanged && entry.type == 'item' && onItemStateChanged(entry.to, state);
+                  },
+                  forceDeactivate: isGroup,
+                  requiredLine: (_entry$label2 = entry.label) !== null && _entry$label2 !== void 0 ? _entry$label2 : '',
+                  optionalLine: '',
+                  endLineIcon: isGroup ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {
+                    size: "24px"
+                  }) : null,
+                  OptionalLineIcon: '',
+                  disabled: entry.disabled,
+                  showNotificationDot: false,
+                  size: Size.Medium,
+                  variant: "positive"
+                }, key)
+              });
+            })
+          })
+        })
+      })
+    })
+  });
+});
+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),
+  ariaLabelledBy: _pt.string
+};
+//# sourceMappingURL=SubMenu.js.map

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

@@ -0,0 +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","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/GlobalNavigationBar/desktop/UserMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileMenu } from '../types';
 interface UserMenuProps extends ProfileMenu {
     show?: boolean;

package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MobileNavigationMenuProps, ProfileMenu } from '../types';
 type Props = MobileNavigationMenuProps & {
     profile?: ProfileMenu;