@commercetools-frontend/application-shell 22.19.0 → 22.21.0

package/dist/{navbar-681a53df.cjs.prod.js → navbar-a138be79.cjs.prod.js}

@@ -28,7 +28,7 @@ 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-72a01b56.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');
@@ -165,11 +165,14 @@ const MenuListItem = /*#__PURE__*/_styled__default["default"]("li", {
 var _templateObject;
 const visible = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 const FixedMenu = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1meml8k9"
+  target: "e1meml8k10"
 } )("position:relative;width:", oidc.NAVBAR.widthLeftNavigation, ";", MenuListItem, " ", ItemIconText, "{justify-content:center;display:flex;width:100%;}" + ("" ));
+const SupportMenuTooltipContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1meml8k9"
+} )("position:fixed;left:", oidc.NAVBAR.sublistIndentationWhenCollapsed, ";display:none;align-items:center;justify-content:flex-start;height:", oidc.NAVBAR.itemSize, ";z-index:20001;" + ("" ));
 const ItemContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1meml8k8"
-} )("color:", designSystem.designTokens.colorNeutral, ";width:", oidc.NAVBAR.itemSize, ";position:relative;display:block;" + ("" ));
+} )("color:", designSystem.designTokens.colorNeutral, ";width:", oidc.NAVBAR.itemSize, ";position:relative;display:block;:hover ", SupportMenuTooltipContainer, ",:focus-within ", SupportMenuTooltipContainer, "{display:flex;}" + ("" ));
 const ScrollableMenu = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1meml8k7"
 } )("flex:1 1 0;overflow-x:hidden;overflow-y:hidden;padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing30, " ", oidc.NAVBAR.itemSize, ";width:", oidc.NAVBAR.widthLeftNavigation, ";box-sizing:border-box;:hover{overflow-y:scroll;}scrollbar-width:thin;scrollbar-color:", designSystem.designTokens.colorPrimary40, " transparent;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", designSystem.designTokens.colorPrimary40, ";border-radius:", designSystem.designTokens.borderRadius8, ";}" + ("" ));
@@ -927,6 +930,7 @@ const ApplicationMenu = props => {
           alignsAgainstBottom: isSubmenuAboveMenuItem,
           children: jsxRuntime.jsx(Tooltip, {
             "aria-owns": "group-".concat(props.menu.key),
+            role: "tooltip",
             children: jsxRuntime.jsx(MenuLabel, {
               labelAllLocales: props.menu.labelAllLocales,
               defaultLabel: props.menu.defaultLabel,
@@ -1053,7 +1057,7 @@ const NavBar = props => {
         })
       }), jsxRuntime.jsxs(FixedMenu, {
         children: [jsxRuntime.jsx(Faded, {}), jsxRuntime.jsx(SupportMenu, {
-          children: jsxRuntime.jsx(MenuItem$1, {
+          children: jsxRuntime.jsxs(MenuItem$1, {
             hasSubmenu: false,
             isActive: false,
             isMenuOpen: isMenuOpen,
@@ -1062,7 +1066,12 @@ const NavBar = props => {
             },
             onMouseEnter: isMenuOpen ? undefined : () => handleToggleItem('fixed-support'),
             onMouseLeave: isMenuOpen ? undefined : shouldCloseMenuFly,
-            children: jsxRuntime.jsx(TextLink, {
+            children: [!isMenuOpen && jsxRuntime.jsx(SupportMenuTooltipContainer, {
+              children: jsxRuntime.jsx(Tooltip, {
+                role: "tooltip",
+                children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages['NavBar.MCSupport.title']))
+              })
+            }), jsxRuntime.jsx(TextLink, {
               href: constants.SUPPORT_PORTAL_URL,
               rel: "noopener noreferrer",
               target: "_blank",
@@ -1078,7 +1087,7 @@ const NavBar = props => {
                   children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages['NavBar.MCSupport.title']))
                 }) : null]
               })
-            })
+            })]
           })
         }), jsxRuntime.jsx(MenuExpander, {
           isVisible: isExpanderVisible,