@commercetools-frontend/application-shell 22.30.3 → 22.32.0

package/dist/{navbar-ced649a9.cjs.prod.js → navbar-9da45ea7.cjs.prod.js}

@@ -5,7 +5,6 @@ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _pt = require('prop-types');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -23,12 +22,11 @@ var LogoSVG = require('@commercetools-frontend/assets/logos/commercetools_small-
 var constants = require('@commercetools-frontend/constants');
 var icons = require('@commercetools-uikit/icons');
 var Spacings = require('@commercetools-uikit/spacings');
-var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var _styled = require('@emotion/styled/base');
 var react = require('@emotion/react');
 var applicationComponents = require('@commercetools-frontend/application-components');
 var designSystem = require('@commercetools-uikit/design-system');
-var oidc = require('./oidc-cfa56c46.cjs.prod.js');
+var oidc = require('./oidc-d02d4ab8.cjs.prod.js');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
 var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
@@ -46,7 +44,7 @@ var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var isNil = require('lodash/isNil');
 var throttle = require('lodash/throttle');
 var sentry = require('@commercetools-frontend/sentry');
-var useApplicationsMenu = require('./use-applications-menu-0d3f4ffc.cjs.prod.js');
+var useApplicationsMenu = require('./use-applications-menu-222b9106.cjs.prod.js');
 require('@apollo/client');
 require('@commercetools-frontend/l10n');
 
@@ -55,7 +53,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
@@ -109,27 +106,31 @@ var _ref5 = {
   styles: "bottom:0"
 } ;
 const getContainerPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, isSublistActiveWhileIsMenuExpanded, isSublistActiveWhileIsMenuCollapsed) => [isSublistActiveWhileIsMenuCollapsed && /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":-", oidc.NAVBAR.itemSize, ";" + ("" ), "" ), isSublistActiveWhileIsMenuExpanded && isSubmenuAboveMenuItem && _ref5, isSublistActiveWhileIsMenuExpanded && !isSubmenuAboveMenuItem && _ref4];
+const fadeIn = react.keyframes`
+from {opacity: 0;}
+  to { opacity: 1;}
+`;
 var _ref3 = {
   name: "eivff4",
   styles: "display:none"
 } ;
 const Expander = /*#__PURE__*/_styled__default["default"]("li", {
-  target: "e1i568cv7"
+  target: "e1i568cv8"
 } )("display:flex;align-items:center;justify-content:center;background:", designSystem.designTokens.colorPrimary10, ";padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing25, ";", props => !props.isVisible && _ref3, "::before{content:'';position:absolute;top:", oidc.NAVBAR.itemHeight, ";height:1px;background:rgba(255, 255, 255, 0.5);width:calc(100% - 2 * ", designSystem.designTokens.spacing30, ");}" + ("" ));
 const ExpanderIcon = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1i568cv6"
+  target: "e1i568cv7"
 } )("height:", oidc.NAVBAR.expanderSize, ";width:", oidc.NAVBAR.expanderSize, ";border-radius:", designSystem.designTokens.borderRadius4, ";padding:", designSystem.designTokens.spacing20, ";background:rgba(255, 255, 255, 0.2);display:flex;justify-content:center;align-items:center;:hover,:focus{background:rgba(255, 255, 255, 0.3);cursor:pointer;}" + ("" ));
 const LeftNavigation = /*#__PURE__*/_styled__default["default"]("nav", {
-  target: "e1i568cv5"
+  target: "e1i568cv6"
 } )("display:grid;width:", oidc.NAVBAR.widthLeftNavigation, ";background:", applicationComponents.designTokens.backgroundColorForNavbar, ";height:100%;grid-template-rows:56px 1fr;transition:", oidc.NAVBAR.leftNavigationTransition, ";" + ("" ));
 const TextLinkSublistWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1i568cv4"
+  target: "e1i568cv5"
 } )({
   name: "khglpi",
   styles: "display:flex;flex-direction:column;position:relative;min-height:0"
 } );
 const NavlinkClickableContent = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1i568cv3"
+  target: "e1i568cv4"
 } )({
   name: "1kzq5ms",
   styles: "height:100%;width:100%"
@@ -144,23 +145,32 @@ var _ref2 = {
   styles: "visibility:hidden"
 } ;
 const MenuList = /*#__PURE__*/_styled__default["default"]("ul", {
-  target: "e1i568cv2"
+  target: "e1i568cv3"
 } )(props => [props.level === 1 && listStyles, getSubmenuPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.submenuVerticalPosition), props.level === 2 && sublistStyles,
 // prevent glitchy behavior during the initial render when the submenu's vertical position is evaluated as 0
-props.submenuVerticalPosition === 0 && _ref2, (props.isSublistActiveWhileIsMenuExpanded || props.isSublistCollapsedAndActive || props.isSublistCollapsedAndActiveAndAbove) && /*#__PURE__*/react.css("opacity:1;display:none;text-align:left;background-color:", designSystem.designTokens.colorAccent20, ";::before{content:'';position:absolute;display:block;width:calc(", oidc.NAVBAR.sublistWidth, " + ", designSystem.designTokens.spacing20, ");height:", oidc.NAVBAR.itemSize, ";left:calc(-1 * ", designSystem.designTokens.spacing20, ");", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.isSublistActiveWhileIsMenuExpanded, props.isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" )], " & .highlighted,& .highlighted ", Title, "{color:", designSystem.designTokens.colorSurface, "!important;font-weight:", designSystem.designTokens.fontWeight600, ";}" + ("" ));
+props.submenuVerticalPosition === 0 && _ref2, (props.isSublistActiveWhileIsMenuExpanded || props.isSublistCollapsedAndActive || props.isSublistCollapsedAndActiveAndAbove) && /*#__PURE__*/react.css("opacity:0;display:none;text-align:left;background-color:", designSystem.designTokens.colorAccent20, ";::before{content:'';position:absolute;display:block;width:calc(", oidc.NAVBAR.sublistWidth, " + ", designSystem.designTokens.spacing20, ");height:", oidc.NAVBAR.itemSize, ";left:calc(-1 * ", designSystem.designTokens.spacing20, ");", getContainerPositionBasedOnMenuItemPosition(props.isSubmenuAboveMenuItem, props.isSublistActiveWhileIsMenuExpanded, props.isSublistActiveWhileIsMenuCollapsed), ";}" + ("" ), "" )], " & .highlighted,& .highlighted ", Title, "{color:", designSystem.designTokens.colorSurface, "!important;font-weight:", designSystem.designTokens.fontWeight600, ";}" + ("" ));
 const SublistItem = /*#__PURE__*/_styled__default["default"]("li", {
-  target: "e1i568cv1"
+  target: "e1i568cv2"
 } )("display:flex;align-items:center;align-self:stretch;", props => [props.isActive && /*#__PURE__*/react.css("border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorPrimary40, ";" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover,:focus-within{color:", designSystem.designTokens.colorSurface, ";font-weight:", designSystem.designTokens.fontWeight600, ";border-radius:", designSystem.designTokens.borderRadius4, ";background:", designSystem.designTokens.colorPrimary95, ";[data-link-level='text-link-sublist']{padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing25, " calc(\n                ", designSystem.designTokens.spacing30, " + ", designSystem.designTokens.spacing20, "\n              );}}" + ("" ), "" )], ";" + ("" ));
 var _ref = {
   name: "1azakc",
   styles: "text-align:center"
 } ;
 const MenuListItem = /*#__PURE__*/_styled__default["default"]("li", {
+  target: "e1i568cv1"
+} )("height:", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.itemSize, ";margin:0;background:", applicationComponents.designTokens.backgroundColorForNavbar, ";list-style:none;cursor:pointer;", IconWrapper, "{width:auto;display:flex;justify-content:center;}", props => [props.isRouteActive && /*#__PURE__*/react.css("background:", designSystem.designTokens.colorPrimary25, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ), "" ), !props.isRouteActive && /*#__PURE__*/react.css(":hover,:focus-within{background-color:", designSystem.designTokens.colorPrimary20, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ), "" ), props.isActive && /*#__PURE__*/react.css(ItemIconText, "{justify-content:flex-start;}" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover ", Icon, ">svg *:not([fill='none']),:focus-within ", Icon, ">svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}:hover .", Title, ",:focus-within ", Title, "{color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" ), props.isCollapsed && _ref], " :hover ", Title, ",:focus-within ", Title, "{margin-left:calc(", designSystem.designTokens.spacing25, " + 2px);}:hover ", Icon, ",:focus-within ", Icon, "{transform:scale(1.2);}:hover ", MenuList, ".sublist-collapsed__active,:hover ", MenuList, ".sublist-collapsed__active__above,:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-collapsed__active,:focus-within ", MenuList, ".sublist-collapsed__active__above,:focus-within ", MenuList, ".sublist-expanded__active{animation-name:", fadeIn, ";animation-duration:16ms;animation-delay:100ms;animation-fill-mode:forwards;display:flex;flex-direction:column;align-items:flex-start;background-color:", designSystem.designTokens.colorSurface, ";min-height:", oidc.NAVBAR.sublistItemMinHeight, ";width:", oidc.NAVBAR.sublistWidth, ";border-radius:", designSystem.designTokens.borderRadius8, ";z-index:20001;box-shadow:-2px 4px 25px 0 rgba(89, 89, 89, 0.5);}:hover ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:hover ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty{visibility:hidden;}:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-expanded__active{left:", oidc.NAVBAR.sublistIndentationWhenExpanded, ";}" + ("" ));
+const SafeArea = /*#__PURE__*/_styled__default["default"]("span", {
   target: "e1i568cv0"
-} )("height:", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.itemSize, ";margin:0;background:", applicationComponents.designTokens.backgroundColorForNavbar, ";list-style:none;cursor:pointer;", IconWrapper, "{width:auto;display:flex;justify-content:center;}", props => [props.isRouteActive && /*#__PURE__*/react.css("background:", designSystem.designTokens.colorPrimary25, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ), "" ), !props.isRouteActive && /*#__PURE__*/react.css(":hover,:focus-within{background-color:", designSystem.designTokens.colorPrimary20, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ), "" ), props.isActive && /*#__PURE__*/react.css(ItemIconText, "{justify-content:flex-start;}" + ("" ), "" ), !props.isActive && /*#__PURE__*/react.css(":hover ", Icon, ">svg *:not([fill='none']),:focus-within ", Icon, ">svg *:not([fill='none']){fill:", designSystem.designTokens.colorSurface, ";}:hover .", Title, ",:focus-within ", Title, "{color:", designSystem.designTokens.colorSurface, ";}" + ("" ), "" ), props.isCollapsed && _ref], " :hover ", Title, ",:focus-within ", Title, "{margin-left:calc(", designSystem.designTokens.spacing25, " + 2px);}:hover ", Icon, ",:focus-within ", Icon, "{transform:scale(1.2);}:hover ", MenuList, ".sublist-collapsed__active,:hover ", MenuList, ".sublist-collapsed__active__above,:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-collapsed__active,:focus-within ", MenuList, ".sublist-collapsed__active__above,:focus-within ", MenuList, ".sublist-expanded__active{display:flex;flex-direction:column;align-items:flex-start;background-color:", designSystem.designTokens.colorSurface, ";min-height:", oidc.NAVBAR.sublistItemMinHeight, ";width:", oidc.NAVBAR.sublistWidth, ";border-radius:", designSystem.designTokens.borderRadius8, ";z-index:20001;box-shadow:-2px 4px 25px 0 rgba(89, 89, 89, 0.5);}:hover ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:hover ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active.sublist-collapsed__empty,:focus-within ", MenuList, ".sublist-collapsed__active__above.sublist-collapsed__empty{visibility:hidden;}:hover ", MenuList, ".sublist-expanded__active,:focus-within ", MenuList, ".sublist-expanded__active{left:", oidc.NAVBAR.sublistIndentationWhenExpanded, ";}" + ("" ));
+} )("position:absolute;top:0;bottom:0;right:100%;width:calc(100% - ", designSystem.designTokens.spacing30, ");clip-path:polygon(var(--safe-start), 100% 100%, 100% 0);" + ("" ));
 
-var _templateObject;
-const visible = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+const visible = react.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
 const FixedMenu = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1meml8k10"
 } )("position:relative;width:", oidc.NAVBAR.widthLeftNavigation, ";", MenuListItem, " ", ItemIconText, "{justify-content:center;display:flex;width:100%;}" + ("" ));
@@ -308,8 +318,8 @@ const MenuGroup = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   return jsxRuntime.jsx(MenuList, {
     ref: ref && props.level === 2 ? ref : null,
     level: props.level,
-    id: "group-".concat(props.id),
-    "data-testid": "group-".concat(props.id),
+    id: `group-${props.id}`,
+    "data-testid": `group-${props.id}`,
     role: "menu",
     "aria-expanded": isSublistActiveWhileIsMenuExpanded || isSublistActiveWhileIsMenuCollapsed,
     onKeyDown: props.handleKeyDown,
@@ -348,6 +358,7 @@ const MenuItem$1 = props => {
     isActive: props.isActive,
     isRouteActive: Boolean(props.isMainMenuRouteActive),
     isCollapsed: !props.isMenuOpen,
+    onMouseMove: props.onMouseMove,
     children: jsxRuntime.jsx(ItemContent, {
       children: props.children
     })
@@ -411,7 +422,7 @@ const restrictedMenuItemDefaultProps = {
   permissions: []
 };
 function isLongLivedFlag(flag) {
-  return typeof (flag === null || flag === void 0 ? void 0 : flag.value) === 'boolean';
+  return typeof flag?.value === 'boolean';
 }
 const RestrictedMenuItem = props => {
   // NOTE: Custom application are activated/deactivated while their
@@ -599,7 +610,11 @@ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _
 var FetchProjectExtensionsNavbar = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchProjectExtensionsNavbar" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "projectExtension" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "installedApplications" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "application" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "entryPointUriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "mainMenuLink" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }, { kind: "Field", name: { kind: "Name", value: "submenuLinks" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }] } }] } }], loc: { start: 0, end: 537, source: { body: "query FetchProjectExtensionsNavbar {\n  projectExtension {\n    id\n    installedApplications {\n      application {\n        id\n        entryPointUriPath\n        icon\n        mainMenuLink {\n          id\n          permissions\n          defaultLabel\n          labelAllLocales {\n            locale\n            value\n          }\n        }\n        submenuLinks {\n          id\n          uriPath\n          permissions\n          defaultLabel\n          labelAllLocales {\n            locale\n            value\n          }\n        }\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const getInitialState = isForcedMenuOpen => ({
   isExpanderVisible: true,
-  isMenuOpen: isNil__default["default"](isForcedMenuOpen) ? false : isForcedMenuOpen
+  isMenuOpen: isNil__default["default"](isForcedMenuOpen) ? false : isForcedMenuOpen,
+  mousePosition: {
+    clientX: 0,
+    clientY: 0
+  }
 });
 const isForcedMenuOpenDefaultValue = false;
 const reducer = (state, action) => {
@@ -625,24 +640,30 @@ const reducer = (state, action) => {
         isExpanderVisible: true,
         isMenuOpen: action.payload
       });
+    case 'getMousePosition':
+      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        mousePosition: action.payload
+      });
     case 'reset':
       return {
         isExpanderVisible: false,
-        isMenuOpen: false
+        isMenuOpen: false,
+        mousePosition: {
+          clientX: 0,
+          clientY: 0
+        }
       };
     default:
       return state;
   }
 };
-const isFocusOutEventCalledBySubmenuItem = event => {
-  var _event$relatedTarget, _event$target;
-  return (
-    // a case when a submenu item loses focus
-    event.type === 'focusout' && ( // element receiving focus
-    (_event$relatedTarget = event.relatedTarget) === null || _event$relatedTarget === void 0 ? void 0 : _event$relatedTarget.matches('a[data-link-level="text-link"]')) && ( // element losing focus
-    (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.matches('a[data-link-level="text-link-sublist"]'))
-  );
-};
+const isFocusOutEventCalledBySubmenuItem = event =>
+// a case when a submenu item loses focus
+event.type === 'focusout' &&
+// element receiving focus
+event.relatedTarget?.matches('a[data-link-level="text-link"]') &&
+// element losing focus
+event.target?.matches('a[data-link-level="text-link-sublist"]');
 const useNavbarStateManager = props => {
   var _context, _context2, _context4, _context5;
   const navBarNode = react$1.useRef(null);
@@ -742,8 +763,7 @@ const useNavbarStateManager = props => {
     }
   }, 100), [isForcedMenuOpen, state.isExpanderVisible, state.isMenuOpen]);
   const shouldCloseMenuFly = react$1.useCallback(event => {
-    var _navBarNode$current;
-    if (!(navBarNode !== null && navBarNode !== void 0 && (_navBarNode$current = navBarNode.current) !== null && _navBarNode$current !== void 0 && _navBarNode$current.contains(event.target)) && !state.isMenuOpen) {
+    if (!navBarNode?.current?.contains(event.target) && !state.isMenuOpen) {
       dispatch({
         type: 'unsetActiveItemIndex'
       });
@@ -782,6 +802,17 @@ const useNavbarStateManager = props => {
       payload: nextActiveItemIndex
     });
   }, [state.activeItemIndex]);
+  const getMousePosition = react$1.useCallback((e, itemIndex) => {
+    if (state.activeItemIndex === itemIndex) {
+      dispatch({
+        type: 'getMousePosition',
+        payload: {
+          clientX: e.clientX,
+          clientY: e.clientY
+        }
+      });
+    }
+  }, [state.activeItemIndex]);
   const handleToggleMenu = react$1.useCallback(() => {
     if (state.isMenuOpen && state.activeItemIndex) {
       dispatch({
@@ -797,33 +828,31 @@ const useNavbarStateManager = props => {
   const allApplicationsNavbarMenuGroups = _sortInstanceProperty__default["default"](_context4 = _mapInstanceProperty__default["default"](_context5 = applicationsNavBarMenuGroups || []).call(_context5, navbarMenuGroup => navbarMenuGroup.key === '2' && allCustomApplicationsNavbarMenu.length > 0 ? {
     key: navbarMenuGroup.key,
     items: [...navbarMenuGroup.items, ...allCustomApplicationsNavbarMenu]
-  } : navbarMenuGroup)).call(_context4, (navBarMenuGroupA, navBarMenuGroupB) => Number(navBarMenuGroupA === null || navBarMenuGroupA === void 0 ? void 0 : navBarMenuGroupA.key) - Number(navBarMenuGroupB === null || navBarMenuGroupB === void 0 ? void 0 : navBarMenuGroupB.key));
+  } : navbarMenuGroup)).call(_context4, (navBarMenuGroupA, navBarMenuGroupB) => Number(navBarMenuGroupA?.key) - Number(navBarMenuGroupB?.key));
   return _objectSpread$1(_objectSpread$1({}, state), {}, {
     navBarNode,
     handleToggleItem,
     handleToggleMenu,
     shouldCloseMenuFly,
+    getMousePosition,
     allApplicationsNavbarMenuGroups
   });
 };
 
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t), !0)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t))).call(_context11, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getMenuVisibilitiesOfSubmenus = menu => {
   var _context, _context2;
   return _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = menu.submenu).call(_context2, submenu => submenu.menuVisibility)).call(_context, nonNullable);
 };
 const getMenuVisibilityOfMainmenu = menu => menu.menuVisibility ? [menu.menuVisibility] : [];
-const getIsSubmenuRouteActive = (uriPath, props) => {
-  var _context3;
-  return Boolean(reactRouterDom.matchPath(props.location.pathname, {
-    path: _concatInstanceProperty__default["default"](_context3 = "/".concat(props.projectKey, "/")).call(_context3, uriPath),
-    exact: true,
-    strict: false
-  }));
-};
+const getIsSubmenuRouteActive = (uriPath, props) => Boolean(reactRouterDom.matchPath(props.location.pathname, {
+  path: `/${props.projectKey}/${uriPath}`,
+  exact: true,
+  strict: false
+}));
 const ApplicationMenu = props => {
-  var _context4, _props$menu$featureTo, _props$menu$actionRig, _props$menu$dataFence, _context5, _context6;
+  var _context3;
   const _useState = react$1.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     submenuVerticalPosition = _useState2[0],
@@ -836,15 +865,54 @@ const ApplicationMenu = props => {
     _useState6 = _slicedToArray(_useState5, 2),
     isSubmenuFocused = _useState6[0],
     setIsSubmenuFocused = _useState6[1];
+  const _useState7 = react$1.useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    percentageX = _useState8[0],
+    setPercentageX = _useState8[1];
+  const _useState9 = react$1.useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    percentageY = _useState10[0],
+    setPercentageY = _useState10[1];
   const observerRef = react$1.useRef(null);
   const submenuRef = react$1.useRef(null);
+  const submenuSafeAreaRef = react$1.useRef(null);
+
+  /* Getting the width and height of the menu*/
+  const subRefBoundingClientRect = submenuRef.current?.getBoundingClientRect();
+  const _ref = subRefBoundingClientRect ?? {},
+    menuItemWidth = _ref.width,
+    menuItemHeight = _ref.height;
+
+  // /* We want to track the left, top, width, and height of the safe area */
+  const submenuSafeAreaRefBoundingClientRect = submenuSafeAreaRef.current?.getBoundingClientRect();
+  const safeAreaLeftPos = submenuSafeAreaRefBoundingClientRect?.left || 0;
+  const safeAreaTopPos = submenuSafeAreaRefBoundingClientRect?.top || 0;
+  const safeAreaWidth = submenuSafeAreaRefBoundingClientRect?.width || 0;
+  const safeAreaHeight = submenuSafeAreaRefBoundingClientRect?.height || 0;
+  const calculateSafeAreaStartPositon = react$1.useCallback(e => {
+    const localX = e.clientX - safeAreaLeftPos;
+    const localY = e.clientY - safeAreaTopPos;
+    setPercentageX(localX / safeAreaWidth * 100);
+    setPercentageY(localY / safeAreaHeight * 100);
+  }, [safeAreaHeight, safeAreaLeftPos, safeAreaTopPos, safeAreaWidth]);
+  react$1.useEffect(() => {
+    calculateSafeAreaStartPositon(e => e);
+    window.addEventListener('mousemove', calculateSafeAreaStartPositon);
+    return () => {
+      window.removeEventListener('mousemove', calculateSafeAreaStartPositon);
+    };
+  }, [calculateSafeAreaStartPositon, menuItemHeight, menuItemWidth, safeAreaHeight, safeAreaLeftPos, safeAreaTopPos, safeAreaWidth]);
+  react$1.useLayoutEffect(() => {
+    submenuRef.current?.style.setProperty('--safe-start',
+    // Adding the +1 to slightly keep the cursor inside the safe area while moving
+    `${percentageX}% ${percentageY + 1}%`);
+  }, [calculateSafeAreaStartPositon, percentageX, percentageY]);
   const hasSubmenu = _Array$isArray__default["default"](props.menu.submenu) && props.menu.submenu.length > 0;
   const menuItemIdentifier = snakeCase__default["default"](props.menu.key);
   const callbackFn = react$1.useCallback(entries => {
-    var _document$querySelect;
-    const menuItemBoundingClientRect = (_document$querySelect = document.querySelector("[data-menuitem=\"".concat(menuItemIdentifier, "\"]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
-    const menuItemTop = (menuItemBoundingClientRect === null || menuItemBoundingClientRect === void 0 ? void 0 : menuItemBoundingClientRect.top) || 0;
-    const menuItemBottom = (menuItemBoundingClientRect === null || menuItemBoundingClientRect === void 0 ? void 0 : menuItemBoundingClientRect.bottom) || 0;
+    const menuItemBoundingClientRect = document.querySelector(`[data-menuitem="${menuItemIdentifier}"]`)?.getBoundingClientRect();
+    const menuItemTop = menuItemBoundingClientRect?.top || 0;
+    const menuItemBottom = menuItemBoundingClientRect?.bottom || 0;
     const _entries = _slicedToArray(entries, 1),
       entry = _entries[0];
     const doesSubmenuFitWithinViewportBelowMenuItem = entry.boundingClientRect.height + (props.isMenuOpen ? menuItemTop : menuItemBottom) > window.innerHeight;
@@ -862,10 +930,7 @@ const ApplicationMenu = props => {
     observerRef.current = new IntersectionObserver(callbackFn, {
       rootMargin: '-100% 0px 0px 0px' // we want to observe if the submenu crosses the bottom line of the viewport - therefore we set the root element top margin to -100% of the viewport height
     });
-    return () => {
-      var _observerRef$current;
-      return (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.disconnect();
-    };
+    return () => observerRef.current?.disconnect();
   }, [callbackFn, props.isMenuOpen]);
   react$1.useLayoutEffect(() => {
     const currentSubmenuRef = submenuRef.current;
@@ -875,10 +940,10 @@ const ApplicationMenu = props => {
       observer.observe(currentSubmenuRef);
     }
     setIsSubmenuFocused(false);
-    return () => observer === null || observer === void 0 ? void 0 : observer.disconnect();
+    return () => observer?.disconnect();
   }, [menuItemIdentifier, props.isMenuOpen, props.handleToggleItem, callbackFn]);
   const isMainMenuRouteActive = Boolean(reactRouterDom.matchPath(props.location.pathname, {
-    path: _concatInstanceProperty__default["default"](_context4 = "/".concat(props.projectKey, "/")).call(_context4, props.menu.uriPath),
+    path: `/${props.projectKey}/${props.menu.uriPath}`,
     exact: false,
     strict: false
   }));
@@ -893,22 +958,20 @@ const ApplicationMenu = props => {
 
   const namesOfMenuVisibilitiesOfAllSubmenus = hasSubmenu ? getMenuVisibilitiesOfSubmenus(props.menu) : getMenuVisibilityOfMainmenu(props.menu);
   const handleKeyDown = e => {
-    var _submenuRef$current;
-    const currentlyFocusedItem = (_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelector(':focus');
+    const currentlyFocusedItem = submenuRef.current?.querySelector(':focus');
     if (e.key === 'Enter') {
       setIsSubmenuFocused(true);
       if (!currentlyFocusedItem) {
-        var _submenuRef$current2;
-        (_submenuRef$current2 = submenuRef.current) === null || _submenuRef$current2 === void 0 || (_submenuRef$current2 = _submenuRef$current2.querySelector('a')) === null || _submenuRef$current2 === void 0 || _submenuRef$current2.focus();
+        submenuRef.current?.querySelector('a')?.focus();
       }
     }
   };
   return jsxRuntime.jsx(RestrictedMenuItem, {
     keyOfMenuItem: props.menu.key,
-    featureToggle: (_props$menu$featureTo = props.menu.featureToggle) !== null && _props$menu$featureTo !== void 0 ? _props$menu$featureTo : undefined,
+    featureToggle: props.menu.featureToggle ?? undefined,
     permissions: props.menu.permissions,
-    actionRights: (_props$menu$actionRig = props.menu.actionRights) !== null && _props$menu$actionRig !== void 0 ? _props$menu$actionRig : undefined,
-    dataFences: (_props$menu$dataFence = props.menu.dataFences) !== null && _props$menu$dataFence !== void 0 ? _props$menu$dataFence : undefined,
+    actionRights: props.menu.actionRights ?? undefined,
+    dataFences: props.menu.dataFences ?? undefined,
     projectPermissions: props.projectPermissions,
     menuVisibilities: props.menuVisibilities,
     namesOfMenuVisibilities: namesOfMenuVisibilitiesOfAllSubmenus,
@@ -921,9 +984,10 @@ const ApplicationMenu = props => {
       onKeyDown: handleKeyDown,
       onMouseEnter: props.handleToggleItem,
       onMouseLeave: props.shouldCloseMenuFly,
+      onMouseMove: props.onMouseMove,
       identifier: menuItemIdentifier,
       children: [jsxRuntime.jsx(MenuItemLink, {
-        linkTo: _concatInstanceProperty__default["default"](_context5 = "/".concat(props.projectKey, "/")).call(_context5, props.menu.uriPath),
+        linkTo: `/${props.projectKey}/${props.menu.uriPath}`,
         useFullRedirectsForLinks: props.useFullRedirectsForLinks,
         onClick: props.onMenuItemClick,
         children: jsxRuntime.jsx(ItemContainer, {
@@ -934,7 +998,7 @@ const ApplicationMenu = props => {
           isMenuOpen: props.isMenuOpen
         })
       }), jsxRuntime.jsxs(MenuGroup, {
-        id: "group-".concat(props.menu.key),
+        id: `group-${props.menu.key}`,
         level: 2,
         isActive: props.isActive,
         isExpanded: props.isMenuOpen,
@@ -945,7 +1009,7 @@ const ApplicationMenu = props => {
         children: [!props.isMenuOpen && jsxRuntime.jsx(TooltipContainer, {
           alignsAgainstBottom: isSubmenuAboveMenuItem,
           children: jsxRuntime.jsx(Tooltip, {
-            "aria-owns": "group-".concat(props.menu.key),
+            "aria-owns": `group-${props.menu.key}`,
             role: "tooltip",
             children: jsxRuntime.jsx(MenuLabel, {
               labelAllLocales: props.menu.labelAllLocales,
@@ -953,40 +1017,39 @@ const ApplicationMenu = props => {
               applicationLocale: props.applicationLocale
             })
           })
-        }), hasSubmenu ? _mapInstanceProperty__default["default"](_context6 = props.menu.submenu).call(_context6, submenu => {
-          var _context7, _submenu$featureToggl, _submenu$actionRights, _submenu$dataFences, _context8;
-          return jsxRuntime.jsx(RestrictedMenuItem, {
-            keyOfMenuItem: submenu.key,
-            featureToggle: (_submenu$featureToggl = submenu.featureToggle) !== null && _submenu$featureToggl !== void 0 ? _submenu$featureToggl : undefined,
-            permissions: submenu.permissions,
-            actionRights: (_submenu$actionRights = submenu.actionRights) !== null && _submenu$actionRights !== void 0 ? _submenu$actionRights : undefined,
-            dataFences: (_submenu$dataFences = submenu.dataFences) !== null && _submenu$dataFences !== void 0 ? _submenu$dataFences : undefined,
-            projectPermissions: props.projectPermissions,
-            menuVisibilities: props.menuVisibilities,
-            namesOfMenuVisibilities: submenu.menuVisibility ? [submenu.menuVisibility] : undefined,
-            children: jsxRuntime.jsx(SublistItem, {
-              isActive: getIsSubmenuRouteActive(submenu.uriPath, props),
-              children: jsxRuntime.jsx(Text, {
-                children: jsxRuntime.jsx(MenuItemLink, {
-                  linkTo: _concatInstanceProperty__default["default"](_context8 = "/".concat(props.projectKey, "/")).call(_context8, submenu.uriPath)
-                  // We want to use an exact matching strategy to avoid multiple
-                  // links matching sub-routes.
-                  ,
-                  exactMatch: true,
-                  useFullRedirectsForLinks: props.useFullRedirectsForLinks,
-                  onClick: props.onMenuItemClick,
-                  isSubmenuLink: true,
-                  isSubmenuFocused: isSubmenuFocused,
-                  children: jsxRuntime.jsx(MenuLabel, {
-                    labelAllLocales: submenu.labelAllLocales,
-                    defaultLabel: submenu.defaultLabel,
-                    applicationLocale: props.applicationLocale
-                  })
+        }), hasSubmenu ? _mapInstanceProperty__default["default"](_context3 = props.menu.submenu).call(_context3, submenu => jsxRuntime.jsx(RestrictedMenuItem, {
+          keyOfMenuItem: submenu.key,
+          featureToggle: submenu.featureToggle ?? undefined,
+          permissions: submenu.permissions,
+          actionRights: submenu.actionRights ?? undefined,
+          dataFences: submenu.dataFences ?? undefined,
+          projectPermissions: props.projectPermissions,
+          menuVisibilities: props.menuVisibilities,
+          namesOfMenuVisibilities: submenu.menuVisibility ? [submenu.menuVisibility] : undefined,
+          children: jsxRuntime.jsx(SublistItem, {
+            isActive: getIsSubmenuRouteActive(submenu.uriPath, props),
+            children: jsxRuntime.jsx(Text, {
+              children: jsxRuntime.jsx(MenuItemLink, {
+                linkTo: `/${props.projectKey}/${submenu.uriPath}`
+                // We want to use an exact matching strategy to avoid multiple
+                // links matching sub-routes.
+                ,
+                exactMatch: true,
+                useFullRedirectsForLinks: props.useFullRedirectsForLinks,
+                onClick: props.onMenuItemClick,
+                isSubmenuLink: true,
+                isSubmenuFocused: isSubmenuFocused,
+                children: jsxRuntime.jsx(MenuLabel, {
+                  labelAllLocales: submenu.labelAllLocales,
+                  defaultLabel: submenu.defaultLabel,
+                  applicationLocale: props.applicationLocale
                 })
               })
             })
-          }, _concatInstanceProperty__default["default"](_context7 = "".concat(props.menu.key, "-submenu-")).call(_context7, submenu.key));
-        }) : null]
+          })
+        }, `${props.menu.key}-submenu-${submenu.key}`)) : null, jsxRuntime.jsx(SafeArea, {
+          ref: submenuSafeAreaRef
+        })]
       })]
     })
   }, props.menu.key);
@@ -1002,24 +1065,20 @@ const NavBar = props => {
     isMenuOpen = _useNavbarStateManage.isMenuOpen,
     isExpanderVisible = _useNavbarStateManage.isExpanderVisible,
     activeItemIndex = _useNavbarStateManage.activeItemIndex,
+    mousePosition = _useNavbarStateManage.mousePosition,
     handleToggleItem = _useNavbarStateManage.handleToggleItem,
     handleToggleMenu = _useNavbarStateManage.handleToggleMenu,
     shouldCloseMenuFly = _useNavbarStateManage.shouldCloseMenuFly,
-    allApplicationsNavbarMenuGroups = _useNavbarStateManage.allApplicationsNavbarMenuGroups;
+    allApplicationsNavbarMenuGroups = _useNavbarStateManage.allApplicationsNavbarMenuGroups,
+    getMousePosition = _useNavbarStateManage.getMousePosition;
   const useFullRedirectsForLinks = Boolean(props.environment.useFullRedirectsForLinks);
   const location = reactRouterDom.useLocation();
-  const projectPermissions = react$1.useMemo(() => {
-    var _props$project, _props$project2, _props$project3;
-    return {
-      permissions: applicationShellConnectors.normalizeAllAppliedPermissions((_props$project = props.project) === null || _props$project === void 0 ? void 0 : _props$project.allPermissionsForAllApplications.allAppliedPermissions),
-      actionRights: applicationShellConnectors.normalizeAllAppliedActionRights((_props$project2 = props.project) === null || _props$project2 === void 0 ? void 0 : _props$project2.allPermissionsForAllApplications.allAppliedActionRights),
-      dataFences: applicationShellConnectors.normalizeAllAppliedDataFences((_props$project3 = props.project) === null || _props$project3 === void 0 ? void 0 : _props$project3.allPermissionsForAllApplications.allAppliedDataFences)
-    };
-  }, [props.project]);
-  const menuVisibilities = react$1.useMemo(() => {
-    var _props$project4;
-    return applicationShellConnectors.normalizeAllAppliedMenuVisibilities((_props$project4 = props.project) === null || _props$project4 === void 0 ? void 0 : _props$project4.allPermissionsForAllApplications.allAppliedMenuVisibilities);
-  }, [props.project]);
+  const projectPermissions = react$1.useMemo(() => ({
+    permissions: applicationShellConnectors.normalizeAllAppliedPermissions(props.project?.allPermissionsForAllApplications.allAppliedPermissions),
+    actionRights: applicationShellConnectors.normalizeAllAppliedActionRights(props.project?.allPermissionsForAllApplications.allAppliedActionRights),
+    dataFences: applicationShellConnectors.normalizeAllAppliedDataFences(props.project?.allPermissionsForAllApplications.allAppliedDataFences)
+  }), [props.project]);
+  const menuVisibilities = react$1.useMemo(() => applicationShellConnectors.normalizeAllAppliedMenuVisibilities(props.project?.allPermissionsForAllApplications.allAppliedMenuVisibilities), [props.project]);
   const applicationLocale = props.applicationLocale;
 
   // Render the loading navbar as long as all the data
@@ -1050,11 +1109,11 @@ const NavBar = props => {
         children: jsxRuntime.jsx(Spacings__default["default"].Stack, {
           scale: "l",
           children: _mapInstanceProperty__default["default"](allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
-            var _context9;
+            var _context4;
             return jsxRuntime.jsx("div", {
-              children: _mapInstanceProperty__default["default"](_context9 = navbarMenuGroup.items).call(_context9, menu => {
+              children: _mapInstanceProperty__default["default"](_context4 = navbarMenuGroup.items).call(_context4, menu => {
                 const menuType = 'scrollable';
-                const itemIndex = "".concat(menuType, "-").concat(menu.key);
+                const itemIndex = `${menuType}-${menu.key}`;
                 return jsxRuntime.jsx(ApplicationMenu, {
                   location: location,
                   menu: menu,
@@ -1067,7 +1126,9 @@ const NavBar = props => {
                   applicationLocale: applicationLocale,
                   projectKey: props.projectKey,
                   useFullRedirectsForLinks: useFullRedirectsForLinks,
-                  onMenuItemClick: props.onMenuItemClick
+                  onMenuItemClick: props.onMenuItemClick,
+                  onMouseMove: e => getMousePosition(e, itemIndex),
+                  mousePosition: mousePosition
                 }, menu.key);
               })
             }, navbarMenuGroup.key);