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

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

package/dist/GlobalNavigationBar/desktop/SubMenu.cjs

@@ -0,0 +1,245 @@
+"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,
+    activeItemId = _ref.activeItemId,
+    nestPath = _ref.nestPath;
+  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) {
+    e.stopPropagation();
+    if (e.key === 'ArrowUp' || e.key === 'Up') {
+      e.preventDefault();
+      if (focusedRef.current.index > 0) {
+        setNewFocusedElement(focusedRef.current.index - 1);
+      }
+    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+      e.preventDefault();
+      if (focusedRef.current.index < allRefs.length - 1) setNewFocusedElement(focusedRef.current.index + 1);
+    } else if (e.key === 'Escape' || e.key === 'Esc') {
+      dropdownMenusOpenedArray.current = [];
+      //just trigger rerendering
+      forceUpdate({});
+    } else if (e.key == 'Enter' || e.code == 'Space') {
+      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, _newFocusedElement$cu2;
+      (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.classList.add('dropdown-hover');
+      (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  };
+  var onFocus = function onFocus(event) {
+    event.stopPropagation();
+    dropdownMenusOpenedArray.current = (0, _toConsumableArray2.default)(nestPath !== null && nestPath !== void 0 ? nestPath : []);
+    setNewFocusedElement(0);
+    forceUpdate({});
+  };
+  var onBlur = function onBlur(event) {
+    event.stopPropagation();
+    setNewFocusedElement(-1);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SubMenuWrapper, {
+    id: item.id,
+    className: existingRef ? 'open' : '',
+    topLevel: topLevel,
+    visible: Boolean(existingRef),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExtendedMainMenu.Menu, {
+      role: "menu",
+      ref: ref,
+      "aria-labelledby": "UserMenuButton",
+      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$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: -1,
+                    ref: allRefs[index],
+                    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, {
+                    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, {
+                  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,
+  activeItemId: _propTypes.default.string,
+  nestPath: _propTypes.default.arrayOf(_propTypes.default.string)
+};
+//# sourceMappingURL=SubMenu.cjs.map