@laerdal/life-react-components 2.3.1-dev.7 → 2.3.1-dev.9

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n      setShowExtendedMenu(false);\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.cjs","names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavItemDiv","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","Menu","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","React","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","x","onMouseEnter","existingRefForId","find","useEffect","window","addEventListener","removeEventListener","length","onFocus","renderItem","item","index","type","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","e","existingRef","onClick","onKeyDown","key","code","position","checkIfContainsItem","state","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NavItem } from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport { Menu } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${NavItemDiv} {\n    cursor: pointer;\n  }\n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  }\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton}  className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if(event.key == 'Enter' || event.code == 'Space')\n        {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      }\n\n      return (\n        <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')} onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem onFocus={onFocus} onKeyDown={onKeyDown} tabIndex={0} className={(existingRef != null || checkIfContainsItem(item, activeItem) ) ? 'active' : ''} key={item.label} to={null} onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)} onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            onItemStateChanged={(item, state) => {\n              if (state)\n                setActiveItemId(item);\n              else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}

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

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

package/dist/GlobalNavigationBar/desktop/MainMenu.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["icon", "to", "exact", "disabled", "external", "action", "label", "note", "pinned"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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) { _defineProperty(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; }
 import * as React from 'react';
@@ -13,31 +14,44 @@ import styled from 'styled-components';
 import { NavItem } from '../../NavItem';
 import { SystemIcons } from '../../icons';
 import { COLORS, BREAKPOINTS } from '../../styles';
-import ExtendedMainMenu from './ExtendedMainMenu';
+import { Menu } from './ExtendedMainMenu';
+import { SubMenu } from './SubMenu';
 import { IconButton } from '../../Button';
 import { defaultOnMouseDownHandler } from '../../common';
+import { NavItemDiv } from '../../NavItem/NavItem';
+import { checkIfContainsItem } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ", " {\n    display: flex;\n  }\n  \n  ", " {\n    cursor: pointer;\n  }\n  ", " {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), BREAKPOINTS.MEDIUM, NavItemDiv, BREAKPOINTS.LARGE);
 var NavButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 0;\n"])), COLORS.white);
 var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: ", ";\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), function (props) {
   return props.floatRight ? 'auto' : 'unset';
 }, COLORS.white);
 var ExtendedSection = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var SubMenuWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", " {\n    top: ", ";\n    left: ", ";\n  }\n\n  button {\n    padding-left: 0px;\n  }\n"])), Menu, function (props) {
+  return props.topLevel ? '100%' : '0px';
+}, function (props) {
+  return props.topLevel ? '0px' : 'calc(100% - 12px)';
+});
+var ExtendedMenuOption = 'extendedOption';
 var MainMenu = function MainMenu(_ref) {
   var items = _ref.items,
     rightSideRef = _ref.rightSideRef;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    showExtendedMenu = _React$useState2[0],
-    setShowExtendedMenu = _React$useState2[1];
-  var extendedMenuRef = React.useRef(null);
   var menuButtonRef = React.useRef(null);
+  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between
+  var dropdownMenusOpenedArray = React.useRef([]);
   var mainMenuRef = React.useRef(null);
-  var _React$useState3 = React.useState(1),
+  var _React$useState = React.useState(1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    numberOfItemsAllowed = _React$useState2[0],
+    setNumberOfItemsAllowed = _React$useState2[1];
+  var _React$useState3 = React.useState({}),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    numberOfItemsAllowed = _React$useState4[0],
-    setNumberOfItemsAllowed = _React$useState4[1];
+    forceUpdate = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    activeItem = _React$useState6[0],
+    setActiveItemId = _React$useState6[1];
   var widthOfItem = 120;
   var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
     if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
@@ -48,80 +62,156 @@ var MainMenu = function MainMenu(_ref) {
       }
     }
   };
-  var handleClickExtendedMenuAction = function handleClickExtendedMenuAction() {
-    setShowExtendedMenu(false);
+  var _onMouseLeave = function onMouseLeave(event, id) {
+    dropdownMenusOpenedArray.current = _toConsumableArray(dropdownMenusOpenedArray.current.filter(function (x) {
+      return x != id;
+    }));
+    //just trigger rerendering
+    forceUpdate({});
   };
-  var handleClickOutside = function handleClickOutside(e) {
-    var _extendedMenuRef$curr, _menuButtonRef$curren;
-    if (!(extendedMenuRef !== null && extendedMenuRef !== void 0 && (_extendedMenuRef$curr = extendedMenuRef.current) !== null && _extendedMenuRef$curr !== void 0 && _extendedMenuRef$curr.contains(e.target)) && !(menuButtonRef !== null && menuButtonRef !== void 0 && (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(e.target))) {
-      setShowExtendedMenu(false);
+  var _onMouseEnter = function onMouseEnter(event, id) {
+    var existingRefForId = dropdownMenusOpenedArray.current.find(function (x) {
+      return x == id;
+    });
+    if (existingRefForId == null) {
+      dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [id]);
+      //just trigger rerendering
+      forceUpdate({});
     }
   };
   React.useEffect(function () {
     recalculateNumberOfItemsAllowed();
     // Bind the event listener
-    document.addEventListener('click', handleClickOutside);
     window.addEventListener('resize', recalculateNumberOfItemsAllowed);
     return function () {
       // Unbind the event listener on clean up
-      document.removeEventListener('click', handleClickOutside);
       window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
     };
   }, []);
   React.useEffect(function () {
     recalculateNumberOfItemsAllowed();
   }, [items.length]);
+  var onFocus = function onFocus(event) {
+    //no open dropdowns if top level was entered
+    dropdownMenusOpenedArray.current = [];
+    forceUpdate({});
+  };
   var renderItem = function renderItem(item, index) {
     if (index > numberOfItemsAllowed - 2) return null;
-    var icon = item.icon,
-      to = item.to,
-      exact = item.exact,
-      disabled = item.disabled,
-      external = item.external,
-      action = item.action,
-      label = item.label,
-      note = item.note,
-      pinned = item.pinned,
-      rest = _objectWithoutProperties(item, _excluded);
-    return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/_jsx(NavItem, {
-      as: NavButton,
-      className: "disabled",
-      onMouseDown: defaultOnMouseDownHandler,
-      children: item === null || item === void 0 ? void 0 : item.label
-    }, item.label) : /*#__PURE__*/_jsx(NavItem, _objectSpread(_objectSpread({
-      as: NavLink,
-      to: item.to || '',
-      onMouseDown: defaultOnMouseDownHandler,
-      onClick: function onClick(e) {
-        return item.action && item.action(e);
-      }
-    }, rest), {}, {
-      children: item === null || item === void 0 ? void 0 : item.label
-    }), item.label);
+    if (item.type != 'desktopgroup') {
+      var _ref2 = item,
+        icon = _ref2.icon,
+        to = _ref2.to,
+        exact = _ref2.exact,
+        disabled = _ref2.disabled,
+        external = _ref2.external,
+        action = _ref2.action,
+        label = _ref2.label,
+        note = _ref2.note,
+        pinned = _ref2.pinned,
+        rest = _objectWithoutProperties(_ref2, _excluded);
+      return item !== null && item !== void 0 && item.disabled ? /*#__PURE__*/_jsx(NavItem, {
+        as: NavButton,
+        className: "disabled",
+        onMouseDown: defaultOnMouseDownHandler,
+        children: item === null || item === void 0 ? void 0 : item.label
+      }, item.label) : /*#__PURE__*/_jsx(NavItem, _objectSpread(_objectSpread({
+        as: NavLink,
+        onFocus: onFocus,
+        to: to || '',
+        onMouseDown: defaultOnMouseDownHandler,
+        onClick: function onClick(e) {
+          return action && action(e);
+        }
+      }, rest), {}, {
+        children: item === null || item === void 0 ? void 0 : item.label
+      }), label);
+    } else {
+      var existingRef = dropdownMenusOpenedArray.current.find(function (x) {
+        return x == item.id;
+      });
+      var onClick = function onClick() {
+        if (existingRef == null) {
+          dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [item.id]);
+          //just trigger rerendering
+          forceUpdate({});
+        }
+      };
+      var onKeyDown = function onKeyDown(event) {
+        if (event.key == 'Enter' || event.code == 'Space') {
+          dropdownMenusOpenedArray.current = [].concat(_toConsumableArray(dropdownMenusOpenedArray.current), [item.id]);
+          //just trigger rerendering
+          forceUpdate({});
+        }
+      };
+      return /*#__PURE__*/_jsxs("div", {
+        style: {
+          position: 'relative'
+        },
+        onMouseEnter: function onMouseEnter(event) {
+          var _item$id;
+          return _onMouseEnter(event, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : '');
+        },
+        onMouseLeave: function onMouseLeave(event) {
+          var _item$id2;
+          return _onMouseLeave(event, (_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : '');
+        },
+        children: [/*#__PURE__*/_jsxs(NavItem, {
+          onFocus: onFocus,
+          onKeyDown: onKeyDown,
+          tabIndex: 0,
+          className: existingRef != null || checkIfContainsItem(item, activeItem) ? 'active' : '',
+          to: null,
+          onClick: onClick,
+          children: [item === null || item === void 0 ? void 0 : item.label, " ", /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
+            size: "24px"
+          })]
+        }, item.label), /*#__PURE__*/_jsx(SubMenu, {
+          activeItemId: activeItem,
+          nestPath: [item.id],
+          onItemStateChanged: function onItemStateChanged(item, state) {
+            if (state) {
+              setActiveItemId(item);
+            } else if (item == activeItem) setActiveItemId('');
+          },
+          item: item,
+          dropdownMenusOpenedArray: dropdownMenusOpenedArray,
+          index: index + 1,
+          topLevel: true
+        })]
+      });
+    }
   };
   return /*#__PURE__*/_jsxs(NavContainer, {
     className: "GlobalNavigationMainMenu",
     ref: mainMenuRef,
-    open: showExtendedMenu,
     children: [items === null || items === void 0 ? void 0 : items.map(renderItem), items.length + 1 > numberOfItemsAllowed && /*#__PURE__*/_jsxs(ExtendedSection, {
+      onMouseEnter: function onMouseEnter(event) {
+        return _onMouseEnter(event, ExtendedMenuOption);
+      },
+      onMouseLeave: function onMouseLeave(event) {
+        return _onMouseLeave(event, ExtendedMenuOption);
+      },
       children: [/*#__PURE__*/_jsx(IconButton, {
         ref: menuButtonRef,
         variant: 'secondary',
         shape: 'circular',
-        action: function action() {
-          setShowExtendedMenu(!showExtendedMenu);
-        },
+        action: function action() {},
         children: /*#__PURE__*/_jsx(SystemIcons.MoreHorizontal, {
           size: "24px"
         })
-      }), /*#__PURE__*/_jsx(ExtendedMenuWrapper, {
-        ref: extendedMenuRef,
-        className: showExtendedMenu ? 'open' : '',
-        floatRight: false,
-        children: /*#__PURE__*/_jsx(ExtendedMainMenu, {
-          clickMenuAction: handleClickExtendedMenuAction,
-          navigationOptions: items.slice(numberOfItemsAllowed - 1)
-        })
+      }), /*#__PURE__*/_jsx(SubMenu, {
+        activeItemId: activeItem,
+        onItemStateChanged: function onItemStateChanged(item, state) {
+          if (state) setActiveItemId(item);else if (item == activeItem) setActiveItemId('');
+        },
+        item: {
+          items: items.slice(numberOfItemsAllowed - 1),
+          id: ExtendedMenuOption
+        },
+        topLevel: true,
+        index: 0,
+        dropdownMenusOpenedArray: dropdownMenusOpenedArray
       })]
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","SystemIcons","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","MEDIUM","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\ntype Props = {\n  items: MenuNavigationItemTypeItem[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n  const extendedMenuRef = React.useRef<any>(null);\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const handleClickExtendedMenuAction = () => {\n    setShowExtendedMenu(false);\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n      setShowExtendedMenu(false);\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    document.addEventListener('click', handleClickOutside);\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('click', handleClickOutside);\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length])\n\n  const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n    if (index > numberOfItemsAllowed - 2) return null\n\n    const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n    return item?.disabled\n      ? <NavItem as={NavButton}\n                 className=\"disabled\"\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}>\n        {item?.label}\n      </NavItem>\n      : <NavItem as={NavLink}\n                 to={item.to || ''}\n                 key={item.label}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n                 {...rest}>\n        {item?.label}\n      </NavItem>\n  }\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection>\n          <IconButton\n            ref={menuButtonRef}\n            variant={'secondary'}\n            shape={'circular'}\n            action={() => {\n              setShowExtendedMenu(!showExtendedMenu)\n            }}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n                              navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n          </ExtendedMenuWrapper>\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MainMenu.js","names":["React","NavLink","styled","NavItem","SystemIcons","COLORS","BREAKPOINTS","Menu","SubMenu","IconButton","defaultOnMouseDownHandler","NavItemDiv","checkIfContainsItem","NavContainer","div","MEDIUM","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","SubMenuWrapper","topLevel","ExtendedMenuOption","MainMenu","items","rightSideRef","menuButtonRef","useRef","dropdownMenusOpenedArray","mainMenuRef","useState","numberOfItemsAllowed","setNumberOfItemsAllowed","forceUpdate","activeItem","setActiveItemId","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","onMouseLeave","event","id","filter","x","onMouseEnter","existingRefForId","find","useEffect","window","addEventListener","removeEventListener","length","onFocus","renderItem","item","index","type","icon","to","exact","disabled","external","action","label","note","pinned","rest","e","existingRef","onClick","onKeyDown","key","code","position","state","map","slice"],"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NavItem } from '../../NavItem';\nimport {SystemIcons} from '../../icons';\nimport { COLORS, BREAKPOINTS } from '../../styles';\nimport { Menu } from './ExtendedMainMenu';\nimport { SubMenu } from './SubMenu';\nimport { IconButton } from '../../Button';\nimport { defaultOnMouseDownHandler } from '../../common';\nimport { MenuNavigationItemTypeDesktopGroup, MenuNavigationItemTypeItem } from '../types';\nimport { NavItemDiv } from '../../NavItem/NavItem';\nimport { checkIfContainsItem } from '../utils';\n\nconst NavContainer = styled.div`\n  display: none;\n  flex-grow: 1;\n  justify-content: flex-start;\n  align-items: center;\n  \n  padding: 0 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n  \n  ${NavItemDiv} {\n    cursor: pointer;\n  }\n  ${BREAKPOINTS.LARGE} {\n    padding: 0 32px;\n  }\n\n  a {\n    text-decoration: none;\n  }\n`;\n\nconst NavButton = styled.button`\n  background: ${COLORS.white};\n  border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n  floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n  display: flex;\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\n\n  position: absolute;\n  flex-direction: column;\n  left: 290px;\n  top: 22px;\n\n  height: 0;\n  width: 0;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\nconst ExtendedSection = styled.div`\n  position: relative;\n`;\n\nconst SubMenuWrapper = styled.div<{ topLevel: boolean }>`\n  ${Menu} {\n    top: ${(props) => (props.topLevel ? '100%' : '0px')};\n    left: ${(props) => (props.topLevel ? '0px' : 'calc(100% - 12px)')};\n  }\n\n  button {\n    padding-left: 0px;\n  }\n`;\n\nconst ExtendedMenuOption = 'extendedOption';\n\ntype Props = {\n  items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({ items, rightSideRef }: Props): React.ReactElement<Props> => {\n  const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n  //we have to use refs instead of 'state' here, because when onmouseleave is triggered for multiple nested divs, state update is not being updated in between\n  const dropdownMenusOpenedArray = React.useRef<string[]>([]);\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n  const [, forceUpdate] = React.useState({});\n  const [activeItem, setActiveItemId] = React.useState<string>('');\n\n  const widthOfItem = 120;\n  const recalculateNumberOfItemsAllowed = () => {\n    if (rightSideRef?.current && mainMenuRef?.current) {\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n      if (number !== numberOfItemsAllowed) {\n        setNumberOfItemsAllowed(number);\n      }\n    }\n  };\n\n  const onMouseLeave = (event: any, id: string) => {\n    dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current.filter((x) => x != id)];\n    //just trigger rerendering\n    forceUpdate({});\n  };\n\n  const onMouseEnter = (event: any, id: string) => {\n    const existingRefForId = dropdownMenusOpenedArray.current.find((x) => x == id);\n    if (existingRefForId == null) {\n      dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, id];\n      //just trigger rerendering\n      forceUpdate({});\n    }\n  };\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n    // Bind the event listener\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n    return () => {\n      // Unbind the event listener on clean up\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n    };\n  }, []);\n\n  React.useEffect(() => {\n    recalculateNumberOfItemsAllowed();\n  }, [items.length]);\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    //no open dropdowns if top level was entered\n    dropdownMenusOpenedArray.current = [];\n    forceUpdate({});\n  }\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup, index: number) => {\n    if (index > numberOfItemsAllowed - 2) return null;\n    if (item.type != 'desktopgroup') {\n      const { icon, to, exact, disabled, external, action, label, note, pinned, ...rest } = item as MenuNavigationItemTypeItem;\n      return item?.disabled ? (\n        <NavItem as={NavButton}  className=\"disabled\" key={item.label} onMouseDown={defaultOnMouseDownHandler}>\n          {item?.label}\n        </NavItem>\n      ) : (\n        <NavItem as={NavLink} onFocus={onFocus} to={to || ''} key={label} onMouseDown={defaultOnMouseDownHandler} onClick={(e: React.MouseEvent) => action && action(e)} {...rest}>\n          {item?.label}\n        </NavItem>\n      );\n    } else {\n      const existingRef = dropdownMenusOpenedArray.current.find((x) => x == item.id);\n      const onClick = () => {\n        if (existingRef == null) {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      };\n      const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if(event.key == 'Enter' || event.code == 'Space')\n        {\n          dropdownMenusOpenedArray.current = [...dropdownMenusOpenedArray.current, item.id];\n          //just trigger rerendering\n          forceUpdate({});\n        }\n      }\n\n      return (\n        <div style={{ position: 'relative' }} onMouseEnter={(event) => onMouseEnter(event, item.id ?? '')} onMouseLeave={(event) => onMouseLeave(event, item.id ?? '')}>\n          <NavItem onFocus={onFocus} onKeyDown={onKeyDown} tabIndex={0} className={(existingRef != null || checkIfContainsItem(item, activeItem) ) ? 'active' : ''} key={item.label} to={null} onClick={onClick}>\n            {item?.label} <SystemIcons.ArrowDropDown size=\"24px\" />\n          </NavItem>\n          <SubMenu\n            activeItemId={activeItem}\n            nestPath={[item.id]}\n            onItemStateChanged={(item, state) => {\n              if (state) {\n                setActiveItemId(item);\n              } else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={item as MenuNavigationItemTypeDesktopGroup}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n            index={index + 1}\n            topLevel={true}\n          />\n        </div>\n      );\n    }\n  };\n\n  return (\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef}>\n      {items?.map(renderItem)}\n      {items.length + 1 > numberOfItemsAllowed && (\n        <ExtendedSection onMouseEnter={(event) => onMouseEnter(event, ExtendedMenuOption)} onMouseLeave={(event) => onMouseLeave(event, ExtendedMenuOption)}>\n          <IconButton ref={menuButtonRef} variant={'secondary'} shape={'circular'} action={() => {}}>\n            <SystemIcons.MoreHorizontal size=\"24px\"/>\n          </IconButton>\n          <SubMenu\n            activeItemId={activeItem}\n            onItemStateChanged={(item, state) => {\n              if (state)\n                setActiveItemId(item);\n              else if(item == activeItem)\n                setActiveItemId('');\n            }}\n            item={{ items: items.slice(numberOfItemsAllowed - 1), id: ExtendedMenuOption }}\n            topLevel={true}\n            index={0}\n            dropdownMenusOpenedArray={dropdownMenusOpenedArray}\n          />\n        </ExtendedSection>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default MainMenu;\n"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAqB,kBAAkB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAAQC,WAAW,QAAO,aAAa;AACvC,SAASC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AAClD,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,yBAAyB,QAAQ,cAAc;AAExD,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,mBAAmB,QAAQ,UAAU;AAAC;AAAA;AAE/C,IAAMC,YAAY,GAAGX,MAAM,CAACY,GAAG,wVAQ3BR,WAAW,CAACS,MAAM,EAIlBJ,UAAU,EAGVL,WAAW,CAACU,KAAK,CAOpB;AAED,IAAMC,SAAS,GAAGf,MAAM,CAACgB,MAAM,6GACfb,MAAM,CAACc,KAAK,CAE3B;AAMD,IAAMC,mBAAmB,GAAGlB,MAAM,CAACY,GAAG,0SAErB,UAACO,KAAK;EAAA,OAAMA,KAAK,CAACC,UAAU,GAAG,MAAM,GAAG,OAAO;AAAA,CAAC,EAa/CjB,MAAM,CAACc,KAAK,CAE7B;AAED,IAAMI,eAAe,GAAGrB,MAAM,CAACY,GAAG,gGAEjC;AAED,IAAMU,cAAc,GAAGtB,MAAM,CAACY,GAAG,qKAC7BP,IAAI,EACG,UAACc,KAAK;EAAA,OAAMA,KAAK,CAACI,QAAQ,GAAG,MAAM,GAAG,KAAK;AAAA,CAAC,EAC3C,UAACJ,KAAK;EAAA,OAAMA,KAAK,CAACI,QAAQ,GAAG,KAAK,GAAG,mBAAmB;AAAA,CAAC,CAMpE;AAED,IAAMC,kBAAkB,GAAG,gBAAgB;AAO3C,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAAkE;EAAA,IAA5DC,KAAK,QAALA,KAAK;IAAEC,YAAY,QAAZA,YAAY;EACrC,IAAMC,aAAa,GAAG9B,KAAK,CAAC+B,MAAM,CAAoB,IAAI,CAAC;EAC3D;EACA,IAAMC,wBAAwB,GAAGhC,KAAK,CAAC+B,MAAM,CAAW,EAAE,CAAC;EAC3D,IAAME,WAA+D,GAAGjC,KAAK,CAAC+B,MAAM,CAAC,IAAI,CAAC;EAC1F,sBAAwD/B,KAAK,CAACkC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAA1EC,oBAAoB;IAAEC,uBAAuB;EACpD,uBAAwBpC,KAAK,CAACkC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAAA;IAAjCG,WAAW;EACpB,uBAAsCrC,KAAK,CAACkC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAzDI,UAAU;IAAEC,eAAe;EAElC,IAAMC,WAAW,GAAG,GAAG;EACvB,IAAMC,+BAA+B,GAAG,SAAlCA,+BAA+B,GAAS;IAC5C,IAAIZ,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAEa,OAAO,IAAIT,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAES,OAAO,EAAE;MAAA;MACjD,IAAMC,MAAM,GAAGC,IAAI,CAACC,KAAK,CAAC,CAAC,CAAAhB,YAAY,aAAZA,YAAY,gDAAZA,YAAY,CAAEa,OAAO,0DAArB,sBAAuBI,UAAU,KAAGb,WAAW,aAAXA,WAAW,+CAAXA,WAAW,CAAES,OAAO,yDAApB,qBAAsBI,UAAU,KAAIN,WAAW,CAAC;MAC/G,IAAIG,MAAM,KAAKR,oBAAoB,EAAE;QACnCC,uBAAuB,CAACO,MAAM,CAAC;MACjC;IACF;EACF,CAAC;EAED,IAAMI,aAAY,GAAG,SAAfA,YAAY,CAAIC,KAAU,EAAEC,EAAU,EAAK;IAC/CjB,wBAAwB,CAACU,OAAO,sBAAOV,wBAAwB,CAACU,OAAO,CAACQ,MAAM,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,IAAIF,EAAE;IAAA,EAAC,CAAC;IAC/F;IACAZ,WAAW,CAAC,CAAC,CAAC,CAAC;EACjB,CAAC;EAED,IAAMe,aAAY,GAAG,SAAfA,YAAY,CAAIJ,KAAU,EAAEC,EAAU,EAAK;IAC/C,IAAMI,gBAAgB,GAAGrB,wBAAwB,CAACU,OAAO,CAACY,IAAI,CAAC,UAACH,CAAC;MAAA,OAAKA,CAAC,IAAIF,EAAE;IAAA,EAAC;IAC9E,IAAII,gBAAgB,IAAI,IAAI,EAAE;MAC5BrB,wBAAwB,CAACU,OAAO,gCAAOV,wBAAwB,CAACU,OAAO,IAAEO,EAAE,EAAC;MAC5E;MACAZ,WAAW,CAAC,CAAC,CAAC,CAAC;IACjB;EACF,CAAC;EAEDrC,KAAK,CAACuD,SAAS,CAAC,YAAM;IACpBd,+BAA+B,EAAE;IACjC;IACAe,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEhB,+BAA+B,CAAC;IAClE,OAAO,YAAM;MACX;MACAe,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEjB,+BAA+B,CAAC;IACvE,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAENzC,KAAK,CAACuD,SAAS,CAAC,YAAM;IACpBd,+BAA+B,EAAE;EACnC,CAAC,EAAE,CAACb,KAAK,CAAC+B,MAAM,CAAC,CAAC;EAElB,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIZ,KAAuC,EAAK;IAC3D;IACAhB,wBAAwB,CAACU,OAAO,GAAG,EAAE;IACrCL,WAAW,CAAC,CAAC,CAAC,CAAC;EACjB,CAAC;EAED,IAAMwB,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAqE,EAAEC,KAAa,EAAK;IAC3G,IAAIA,KAAK,GAAG5B,oBAAoB,GAAG,CAAC,EAAE,OAAO,IAAI;IACjD,IAAI2B,IAAI,CAACE,IAAI,IAAI,cAAc,EAAE;MAC/B,YAAsFF,IAAI;QAAlFG,IAAI,SAAJA,IAAI;QAAEC,EAAE,SAAFA,EAAE;QAAEC,KAAK,SAALA,KAAK;QAAEC,QAAQ,SAARA,QAAQ;QAAEC,QAAQ,SAARA,QAAQ;QAAEC,MAAM,SAANA,MAAM;QAAEC,KAAK,SAALA,KAAK;QAAEC,IAAI,SAAJA,IAAI;QAAEC,MAAM,SAANA,MAAM;QAAKC,IAAI;MACjF,OAAOZ,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEM,QAAQ,gBACnB,KAAC,OAAO;QAAC,EAAE,EAAEnD,SAAU;QAAE,SAAS,EAAC,UAAU;QAAkB,WAAW,EAAEP,yBAA0B;QAAA,UACnGoD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES;MAAK,GADqCT,IAAI,CAACS,KAAK,CAEnD,gBAEV,KAAC,OAAO;QAAC,EAAE,EAAEtE,OAAQ;QAAC,OAAO,EAAE2D,OAAQ;QAAC,EAAE,EAAEM,EAAE,IAAI,EAAG;QAAa,WAAW,EAAExD,yBAA0B;QAAC,OAAO,EAAE,iBAACiE,CAAmB;UAAA,OAAKL,MAAM,IAAIA,MAAM,CAACK,CAAC,CAAC;QAAA;MAAC,GAAKD,IAAI;QAAA,UACtKZ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES;MAAK,IAD6CA,KAAK,CAGjE;IACH,CAAC,MAAM;MACL,IAAMK,WAAW,GAAG5C,wBAAwB,CAACU,OAAO,CAACY,IAAI,CAAC,UAACH,CAAC;QAAA,OAAKA,CAAC,IAAIW,IAAI,CAACb,EAAE;MAAA,EAAC;MAC9E,IAAM4B,OAAO,GAAG,SAAVA,OAAO,GAAS;QACpB,IAAID,WAAW,IAAI,IAAI,EAAE;UACvB5C,wBAAwB,CAACU,OAAO,gCAAOV,wBAAwB,CAACU,OAAO,IAAEoB,IAAI,CAACb,EAAE,EAAC;UACjF;UACAZ,WAAW,CAAC,CAAC,CAAC,CAAC;QACjB;MACF,CAAC;MACD,IAAMyC,SAAS,GAAG,SAAZA,SAAS,CAAI9B,KAA0C,EAAK;QAChE,IAAGA,KAAK,CAAC+B,GAAG,IAAI,OAAO,IAAI/B,KAAK,CAACgC,IAAI,IAAI,OAAO,EAChD;UACEhD,wBAAwB,CAACU,OAAO,gCAAOV,wBAAwB,CAACU,OAAO,IAAEoB,IAAI,CAACb,EAAE,EAAC;UACjF;UACAZ,WAAW,CAAC,CAAC,CAAC,CAAC;QACjB;MACF,CAAC;MAED,oBACE;QAAK,KAAK,EAAE;UAAE4C,QAAQ,EAAE;QAAW,CAAE;QAAC,YAAY,EAAE,sBAACjC,KAAK;UAAA;UAAA,OAAKI,aAAY,CAACJ,KAAK,cAAEc,IAAI,CAACb,EAAE,+CAAI,EAAE,CAAC;QAAA,CAAC;QAAC,YAAY,EAAE,sBAACD,KAAK;UAAA;UAAA,OAAKD,aAAY,CAACC,KAAK,eAAEc,IAAI,CAACb,EAAE,iDAAI,EAAE,CAAC;QAAA,CAAC;QAAA,wBAC7J,MAAC,OAAO;UAAC,OAAO,EAAEW,OAAQ;UAAC,SAAS,EAAEkB,SAAU;UAAC,QAAQ,EAAE,CAAE;UAAC,SAAS,EAAGF,WAAW,IAAI,IAAI,IAAIhE,mBAAmB,CAACkD,IAAI,EAAExB,UAAU,CAAC,GAAK,QAAQ,GAAG,EAAG;UAAkB,EAAE,EAAE,IAAK;UAAC,OAAO,EAAEuC,OAAQ;UAAA,WACnMf,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES,KAAK,oBAAE,KAAC,WAAW,CAAC,aAAa;YAAC,IAAI,EAAC;UAAM,EAAG;QAAA,GADsGT,IAAI,CAACS,KAAK,CAE/J,eACV,KAAC,OAAO;UACN,YAAY,EAAEjC,UAAW;UACzB,QAAQ,EAAE,CAACwB,IAAI,CAACb,EAAE,CAAE;UACpB,kBAAkB,EAAE,4BAACa,IAAI,EAAEoB,KAAK,EAAK;YACnC,IAAIA,KAAK,EAAE;cACT3C,eAAe,CAACuB,IAAI,CAAC;YACvB,CAAC,MAAM,IAAGA,IAAI,IAAIxB,UAAU,EAC1BC,eAAe,CAAC,EAAE,CAAC;UACvB,CAAE;UACF,IAAI,EAAEuB,IAA2C;UACjD,wBAAwB,EAAE9B,wBAAyB;UACnD,KAAK,EAAE+B,KAAK,GAAG,CAAE;UACjB,QAAQ,EAAE;QAAK,EACf;MAAA,EACE;IAEV;EACF,CAAC;EAED,oBACE,MAAC,YAAY;IAAC,SAAS,EAAC,0BAA0B;IAAC,GAAG,EAAE9B,WAAY;IAAA,WACjEL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEuD,GAAG,CAACtB,UAAU,CAAC,EACtBjC,KAAK,CAAC+B,MAAM,GAAG,CAAC,GAAGxB,oBAAoB,iBACtC,MAAC,eAAe;MAAC,YAAY,EAAE,sBAACa,KAAK;QAAA,OAAKI,aAAY,CAACJ,KAAK,EAAEtB,kBAAkB,CAAC;MAAA,CAAC;MAAC,YAAY,EAAE,sBAACsB,KAAK;QAAA,OAAKD,aAAY,CAACC,KAAK,EAAEtB,kBAAkB,CAAC;MAAA,CAAC;MAAA,wBAClJ,KAAC,UAAU;QAAC,GAAG,EAAEI,aAAc;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAC,MAAM,EAAE,kBAAM,CAAC,CAAE;QAAA,uBACxF,KAAC,WAAW,CAAC,cAAc;UAAC,IAAI,EAAC;QAAM;MAAE,EAC9B,eACb,KAAC,OAAO;QACN,YAAY,EAAEQ,UAAW;QACzB,kBAAkB,EAAE,4BAACwB,IAAI,EAAEoB,KAAK,EAAK;UACnC,IAAIA,KAAK,EACP3C,eAAe,CAACuB,IAAI,CAAC,CAAC,KACnB,IAAGA,IAAI,IAAIxB,UAAU,EACxBC,eAAe,CAAC,EAAE,CAAC;QACvB,CAAE;QACF,IAAI,EAAE;UAAEX,KAAK,EAAEA,KAAK,CAACwD,KAAK,CAACjD,oBAAoB,GAAG,CAAC,CAAC;UAAEc,EAAE,EAAEvB;QAAmB,CAAE;QAC/E,QAAQ,EAAE,IAAK;QACf,KAAK,EAAE,CAAE;QACT,wBAAwB,EAAEM;MAAyB,EACnD;IAAA,EAEL;EAAA,EACY;AAEnB,CAAC;AAAC;EA1IAJ,KAAK;AAAA;AA4IP,eAAeD,QAAQ"}

package/dist/GlobalNavigationBar/desktop/SubMenu.cjs

@@ -0,0 +1,176 @@
+"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 = function SubMenu(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    topLevel = _ref.topLevel,
+    dropdownMenusOpenedArray = _ref.dropdownMenusOpenedArray,
+    onSubMenuHidden = _ref.onSubMenuHidden,
+    onSubMenuOpened = _ref.onSubMenuOpened,
+    onItemStateChanged = _ref.onItemStateChanged,
+    activeItemId = _ref.activeItemId,
+    nestPath = _ref.nestPath;
+  var _React$useState = React.useState({}),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  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(event, entryId) {
+    if (event.key == 'Enter' || event.code == 'Space') {
+      dropdownMenusOpenedArray.current = [].concat((0, _toConsumableArray2.default)(dropdownMenusOpenedArray.current), [entryId]);
+      //just trigger rerendering
+      forceUpdate({});
+    }
+  };
+  var onFocus = function onFocus(event) {
+    dropdownMenusOpenedArray.current = (0, _toConsumableArray2.default)(nestPath !== null && nestPath !== void 0 ? nestPath : []);
+    forceUpdate({});
+  };
+  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",
+      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) {
+              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$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, {
+                    tabIndex: 0,
+                    onFocus: onFocus,
+                    onKeyDown: function onKeyDown(event) {
+                      return _onKeyDown(event, entry.id);
+                    },
+                    id: entry.id,
+                    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, {
+                    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, {
+                  to: isGroup ? '' : key,
+                  onFocus: onFocus,
+                  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,
+  activeItemId: _propTypes.default.string,
+  nestPath: _propTypes.default.arrayOf(_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","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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"}