@commercetools-frontend/application-shell 24.10.0 → 24.12.0

package/dist/{navbar-acc2cd1b.cjs.prod.js → navbar-93183a2d.cjs.prod.js}

@@ -6,6 +6,7 @@ var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 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 _Number$isFinite = require('@babel/runtime-corejs3/core-js-stable/number/is-finite');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
@@ -24,11 +25,12 @@ 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-d74e6aa2.cjs.prod.js');
+var oidc = require('./oidc-258fc018.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');
@@ -43,7 +45,7 @@ var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
 var isNil = require('lodash/isNil');
 var throttle = require('lodash/throttle');
-var useApplicationsMenu = require('./use-applications-menu-14a5a1f4.cjs.prod.js');
+var useApplicationsMenu = require('./use-applications-menu-48d924bd.cjs.prod.js');
 require('@apollo/client');
 require('@commercetools-frontend/l10n');
 
@@ -53,6 +55,7 @@ var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceP
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 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 _Number$isFinite__default = /*#__PURE__*/_interopDefault(_Number$isFinite);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
@@ -95,6 +98,7 @@ const Title = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1wv1pdj0"
 } )("flex:1;font-weight:600;font-size:", designSystem.designTokens.fontSize20, ";line-height:", designSystem.designTokens.lineHeight20, ";color:", designSystem.designTokens.colorNeutral, ";opacity:0;transition:", oidc.NAVBAR.leftNavigationTransition, ";text-align:left;text-decoration:none;z-index:1;" + ("" ));
 
+var _templateObject$1;
 const getSubmenuPositionBasedOnMenuItemPosition = (isSubmenuAboveMenuItem, submenuVerticalPosition) => /*#__PURE__*/react.css(isSubmenuAboveMenuItem ? 'bottom' : 'top', ":", submenuVerticalPosition, "px;" + ("" ), "" );
 var _ref4 = {
   name: "abcix4",
@@ -105,10 +109,7 @@ 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;}
-`;
+const fadeIn = react.keyframes(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\nfrom {opacity: 0;}\n  to { opacity: 1;}\n"])));
 var _ref3 = {
   name: "eivff4",
   styles: "display:none"
@@ -159,14 +160,8 @@ const SafeArea = /*#__PURE__*/_styled__default["default"]("span", {
   target: "e1i568cv0"
 } )("position:absolute;top:0;bottom:0;right:100%;width:calc(100% - ", designSystem.designTokens.spacing30, ");clip-path:polygon(var(--safe-start), 100% 100%, 100% 0);" + ("" ));
 
-const visible = react.keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
+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: "e1meml8k10"
 } )("position:relative;width:", oidc.NAVBAR.widthLeftNavigation, ";", MenuListItem, " ", ItemIconText, "{justify-content:center;display:flex;width:100%;}" + ("" ));
@@ -333,8 +328,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-${props.id}`,
-    "data-testid": `group-${props.id}`,
+    id: "group-".concat(props.id),
+    "data-testid": "group-".concat(props.id),
     role: "menu",
     onKeyDown: props.handleKeyDown,
     className: classnames__default["default"]({
@@ -434,7 +429,7 @@ const MenuItemLink = _ref3 => {
 MenuItemLink.displayName = 'MenuItemLink';
 const isEveryMenuVisibilitySetToHidden = (menuVisibilities, namesOfMenuVisibilities) => _Array$isArray__default["default"](namesOfMenuVisibilities) && namesOfMenuVisibilities.length > 0 && _everyInstanceProperty__default["default"](namesOfMenuVisibilities).call(namesOfMenuVisibilities, nameOfMenuVisibility => menuVisibilities && menuVisibilities[nameOfMenuVisibility] === true);
 function isLongLivedFlag(flag) {
-  return typeof flag?.value === 'boolean';
+  return typeof (flag === null || flag === void 0 ? void 0 : flag.value) === 'boolean';
 }
 const RestrictedMenuItem = _ref4 => {
   let _ref4$permissions = _ref4.permissions,
@@ -656,13 +651,15 @@ const reducer = (state, action) => {
       return state;
   }
 };
-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 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 useNavbarStateManager = props => {
   var _context, _context2, _context4, _context5;
   const navBarNode = react$1.useRef(null);
@@ -758,7 +755,8 @@ const useNavbarStateManager = props => {
     }
   }, 100), [isForcedMenuOpen, state.isExpanderVisible, state.isMenuOpen]);
   const shouldCloseMenuFly = react$1.useCallback(event => {
-    if (!navBarNode?.current?.contains(event.target) && !state.isMenuOpen) {
+    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) {
       dispatch({
         type: 'unsetActiveItemIndex'
       });
@@ -823,7 +821,7 @@ 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?.key) - Number(navBarMenuGroupB?.key));
+  } : 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));
   return _objectSpread$1(_objectSpread$1({}, state), {}, {
     navBarNode,
     handleToggleItem,
@@ -835,7 +833,7 @@ const useNavbarStateManager = props => {
 };
 
 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 _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; }
+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; }
 // Helper function to extract accessible label from menu objects
 const getMenuAccessibleLabel = (labelAllLocales, defaultLabel, applicationLocale) => {
   const localizedLabel = _findInstanceProperty__default["default"](labelAllLocales).call(labelAllLocales, loc => _startsWithInstanceProperty__default["default"](applicationLocale).call(applicationLocale, loc.locale));
@@ -848,13 +846,16 @@ const getMenuVisibilitiesOfSubmenus = menu => {
   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) => Boolean(reactRouterDom.matchPath(props.location.pathname, {
-  path: `/${props.projectKey}/${uriPath}`,
-  exact: true,
-  strict: false
-}));
-const ApplicationMenu = props => {
+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 ApplicationMenu = props => {
+  var _context5, _props$menu$featureTo, _props$menu$actionRig, _props$menu$dataFence, _context6, _context7;
   const _useState = react$1.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     submenuVerticalPosition = _useState2[0],
@@ -881,12 +882,13 @@ const ApplicationMenu = props => {
   const hasSubmenu = _Array$isArray__default["default"](props.menu.submenu) && props.menu.submenu.length > 0;
   const menuItemIdentifier = snakeCase__default["default"](props.menu.key);
   const calculateSafeAreaStartPositon = react$1.useCallback(e => {
-    const currentSafeAreaRect = submenuSafeAreaRef.current?.getBoundingClientRect();
-    const menuItemRect = document.querySelector(`[data-menuitem="${menuItemIdentifier}"]`)?.getBoundingClientRect();
-    const currentSafeAreaLeft = currentSafeAreaRect?.left || 0;
-    const currentSafeAreaTop = currentSafeAreaRect?.top || 0;
-    const currentSafeAreaWidth = currentSafeAreaRect?.width || 0;
-    const currentSafeAreaHeight = currentSafeAreaRect?.height || 0;
+    var _submenuSafeAreaRef$c, _document$querySelect;
+    const currentSafeAreaRect = (_submenuSafeAreaRef$c = submenuSafeAreaRef.current) === null || _submenuSafeAreaRef$c === void 0 ? void 0 : _submenuSafeAreaRef$c.getBoundingClientRect();
+    const menuItemRect = (_document$querySelect = document.querySelector("[data-menuitem=\"".concat(menuItemIdentifier, "\"]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
+    const currentSafeAreaLeft = (currentSafeAreaRect === null || currentSafeAreaRect === void 0 ? void 0 : currentSafeAreaRect.left) || 0;
+    const currentSafeAreaTop = (currentSafeAreaRect === null || currentSafeAreaRect === void 0 ? void 0 : currentSafeAreaRect.top) || 0;
+    const currentSafeAreaWidth = (currentSafeAreaRect === null || currentSafeAreaRect === void 0 ? void 0 : currentSafeAreaRect.width) || 0;
+    const currentSafeAreaHeight = (currentSafeAreaRect === null || currentSafeAreaRect === void 0 ? void 0 : currentSafeAreaRect.height) || 0;
     const localX = e.clientX - currentSafeAreaLeft;
     const localY = e.clientY - currentSafeAreaTop;
     let minXPercent = 0;
@@ -932,15 +934,17 @@ const ApplicationMenu = props => {
     };
   }, [calculateSafeAreaStartPositon]);
   react$1.useLayoutEffect(() => {
+    var _context4;
     if (!submenuRef.current) return;
     const safeX = _Number$isFinite__default["default"](percentageX) ? percentageX : 0;
     const safeY = _Number$isFinite__default["default"](percentageY) ? percentageY : 100;
-    submenuRef.current.style.setProperty('--safe-start', `${safeX}% ${safeY}%`);
+    submenuRef.current.style.setProperty('--safe-start', _concatInstanceProperty__default["default"](_context4 = "".concat(safeX, "% ")).call(_context4, safeY, "%"));
   }, [percentageX, percentageY]);
   const callbackFn = react$1.useCallback(entries => {
-    const menuItemBoundingClientRect = document.querySelector(`[data-menuitem="${menuItemIdentifier}"]`)?.getBoundingClientRect();
-    const menuItemTop = menuItemBoundingClientRect?.top || 0;
-    const menuItemBottom = menuItemBoundingClientRect?.bottom || 0;
+    var _document$querySelect2;
+    const menuItemBoundingClientRect = (_document$querySelect2 = document.querySelector("[data-menuitem=\"".concat(menuItemIdentifier, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.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 _entries = _slicedToArray(entries, 1),
       entry = _entries[0];
 
@@ -966,7 +970,10 @@ 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 () => observerRef.current?.disconnect();
+    return () => {
+      var _observerRef$current;
+      return (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.disconnect();
+    };
   }, [callbackFn, props.isMenuOpen]);
   react$1.useLayoutEffect(() => {
     const currentSubmenuRef = submenuRef.current;
@@ -976,10 +983,10 @@ const ApplicationMenu = props => {
       observer.observe(currentSubmenuRef);
     }
     setIsSubmenuFocused(false);
-    return () => observer?.disconnect();
+    return () => observer === null || observer === void 0 ? void 0 : observer.disconnect();
   }, [menuItemIdentifier, props.isMenuOpen, props.handleToggleItem, callbackFn]);
   const isMainMenuRouteActive = Boolean(reactRouterDom.matchPath(props.location.pathname, {
-    path: `/${props.projectKey}/${props.menu.uriPath}`,
+    path: _concatInstanceProperty__default["default"](_context5 = "/".concat(props.projectKey, "/")).call(_context5, props.menu.uriPath),
     exact: false,
     strict: false
   }));
@@ -994,20 +1001,22 @@ const ApplicationMenu = props => {
 
   const namesOfMenuVisibilitiesOfAllSubmenus = hasSubmenu ? getMenuVisibilitiesOfSubmenus(props.menu) : getMenuVisibilityOfMainmenu(props.menu);
   const handleKeyDown = e => {
-    const currentlyFocusedItem = submenuRef.current?.querySelector(':focus');
+    var _submenuRef$current;
+    const currentlyFocusedItem = (_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelector(':focus');
     if (e.key === 'Enter') {
       setIsSubmenuFocused(true);
       if (!currentlyFocusedItem) {
-        submenuRef.current?.querySelector('a')?.focus();
+        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();
       }
     }
   };
   return jsxRuntime.jsx(RestrictedMenuItem, {
     keyOfMenuItem: props.menu.key,
-    featureToggle: props.menu.featureToggle ?? undefined,
+    featureToggle: (_props$menu$featureTo = props.menu.featureToggle) !== null && _props$menu$featureTo !== void 0 ? _props$menu$featureTo : undefined,
     permissions: props.menu.permissions,
-    actionRights: props.menu.actionRights ?? undefined,
-    dataFences: props.menu.dataFences ?? undefined,
+    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,
     projectPermissions: props.projectPermissions,
     menuVisibilities: props.menuVisibilities,
     namesOfMenuVisibilities: namesOfMenuVisibilitiesOfAllSubmenus,
@@ -1024,7 +1033,7 @@ const ApplicationMenu = props => {
       identifier: menuItemIdentifier,
       ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
       children: [jsxRuntime.jsx(MenuItemLink, {
-        linkTo: `/${props.projectKey}/${props.menu.uriPath}`,
+        linkTo: _concatInstanceProperty__default["default"](_context6 = "/".concat(props.projectKey, "/")).call(_context6, props.menu.uriPath),
         useFullRedirectsForLinks: props.useFullRedirectsForLinks,
         onClick: props.onMenuItemClick,
         ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
@@ -1036,7 +1045,7 @@ const ApplicationMenu = props => {
           isMenuOpen: props.isMenuOpen
         })
       }), jsxRuntime.jsxs(MenuGroup, {
-        id: `group-${props.menu.key}`,
+        id: "group-".concat(props.menu.key),
         level: 2,
         isActive: props.isActive,
         isExpanded: props.isMenuOpen,
@@ -1047,7 +1056,7 @@ const ApplicationMenu = props => {
         children: [!props.isMenuOpen && jsxRuntime.jsx(TooltipContainer, {
           alignsAgainstBottom: isSubmenuAboveMenuItem,
           children: jsxRuntime.jsx(Tooltip, {
-            "aria-owns": `group-${props.menu.key}`,
+            "aria-owns": "group-".concat(props.menu.key),
             role: "tooltip",
             children: jsxRuntime.jsx(MenuLabel, {
               labelAllLocales: props.menu.labelAllLocales,
@@ -1055,38 +1064,41 @@ const ApplicationMenu = props => {
               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,
-                ariaLabel: getMenuAccessibleLabel(submenu.labelAllLocales, submenu.defaultLabel, props.applicationLocale),
-                children: jsxRuntime.jsx(MenuLabel, {
-                  labelAllLocales: submenu.labelAllLocales,
-                  defaultLabel: submenu.defaultLabel,
-                  applicationLocale: props.applicationLocale
+        }), hasSubmenu ? _mapInstanceProperty__default["default"](_context7 = props.menu.submenu).call(_context7, submenu => {
+          var _context8, _submenu$featureToggl, _submenu$actionRights, _submenu$dataFences, _context9;
+          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"](_context9 = "/".concat(props.projectKey, "/")).call(_context9, 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,
+                  ariaLabel: getMenuAccessibleLabel(submenu.labelAllLocales, submenu.defaultLabel, props.applicationLocale),
+                  children: jsxRuntime.jsx(MenuLabel, {
+                    labelAllLocales: submenu.labelAllLocales,
+                    defaultLabel: submenu.defaultLabel,
+                    applicationLocale: props.applicationLocale
+                  })
                 })
               })
             })
-          })
-        }, `${props.menu.key}-submenu-${submenu.key}`)) : null, jsxRuntime.jsx(SafeArea, {
+          }, _concatInstanceProperty__default["default"](_context8 = "".concat(props.menu.key, "-submenu-")).call(_context8, submenu.key));
+        }) : null, jsxRuntime.jsx(SafeArea, {
           ref: submenuSafeAreaRef
         })]
       })]
@@ -1113,12 +1125,18 @@ const NavBar = props => {
   const location = reactRouterDom.useLocation();
   const _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
-  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 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 applicationLocale = props.applicationLocale;
 
   // Render the loading navbar as long as all the data
@@ -1149,11 +1167,12 @@ const NavBar = props => {
         children: jsxRuntime.jsx(Spacings__default["default"].Stack, {
           scale: "l",
           children: _mapInstanceProperty__default["default"](allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
-            var _context4;
+            var _context0;
             return jsxRuntime.jsx("div", {
-              children: _mapInstanceProperty__default["default"](_context4 = navbarMenuGroup.items).call(_context4, menu => {
+              children: _mapInstanceProperty__default["default"](_context0 = navbarMenuGroup.items).call(_context0, menu => {
+                var _context1;
                 const menuType = 'scrollable';
-                const itemIndex = `${menuType}-${menu.key}`;
+                const itemIndex = _concatInstanceProperty__default["default"](_context1 = "".concat(menuType, "-")).call(_context1, menu.key);
                 return jsxRuntime.jsx(ApplicationMenu, {
                   location: location,
                   menu: menu,

package/dist/oidc-258fc018.cjs.prod.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+
+const DIMENSIONS = {
+  header: '56px'
+};
+const NAVBAR = {
+  expanderHeight: '50px',
+  expanderSize: '40px',
+  iconSize: '24px',
+  iconSizeHover: '28px',
+  itemSize: '48px',
+  itemHeight: '56px',
+  sublistIndentationWhenCollapsed: '72px',
+  sublistIndentationWhenExpanded: '248px',
+  sublistItemMinHeight: '50px',
+  sublistWidth: '272px',
+  leftNavigationTransition: 'all 150ms cubic-bezier(1, 0, 0.58, 1)',
+  widthLeftNavigation: '80px',
+  widthLeftNavigationWhenExpanded: '256px'
+};
+const WINDOW_SIZES = {
+  STANDARD: 1024,
+  WIDE: 1200
+};
+const CONTAINERS = {
+  LOCALE_SWITCHER: 'locale-switcher-container',
+  LEFT_OF_PROFILE: 'left-of-profile'
+};
+const SUSPENSION_REASONS = {
+  TEMPORARY_MAINTENANCE: 'TemporaryMaintenance',
+  PAYMENT: 'Payment',
+  OTHER: 'Other'
+};
+
+// OIDC params
+const OIDC_RESPONSE_TYPES = {
+  ID_TOKEN: 'id_token'
+};
+const OIDC_CLAIMS = {
+  OPEN_ID: 'openid',
+  PROJECT_KEY: 'project_key',
+  TEAM_ID: 'team_id',
+  APPLICATION_ID: 'application_id',
+  VIEW: 'view',
+  MANAGE: 'manage'
+};
+
+const buildOidcScope = options => {
+  var _context2, _options$oAuthScopes$, _options$oAuthScopes, _context4, _options$oAuthScopes$2, _options$oAuthScopes2;
+  const claims = [];
+
+  // Set the projectKey
+  if (options.projectKey) {
+    var _context;
+    claims.push(_concatInstanceProperty__default["default"](_context = "".concat(OIDC_CLAIMS.PROJECT_KEY, ":")).call(_context, options.projectKey));
+  }
+
+  // Set the OAuth Scopes
+  claims.push(..._mapInstanceProperty__default["default"](_context2 = (_options$oAuthScopes$ = (_options$oAuthScopes = options.oAuthScopes) === null || _options$oAuthScopes === void 0 ? void 0 : _options$oAuthScopes.view) !== null && _options$oAuthScopes$ !== void 0 ? _options$oAuthScopes$ : []).call(_context2, scope => {
+    var _context3;
+    return _concatInstanceProperty__default["default"](_context3 = "".concat(OIDC_CLAIMS.VIEW, ":")).call(_context3, scope);
+  }));
+  claims.push(..._mapInstanceProperty__default["default"](_context4 = (_options$oAuthScopes$2 = (_options$oAuthScopes2 = options.oAuthScopes) === null || _options$oAuthScopes2 === void 0 ? void 0 : _options$oAuthScopes2.manage) !== null && _options$oAuthScopes$2 !== void 0 ? _options$oAuthScopes$2 : []).call(_context4, scope => {
+    var _context5;
+    return _concatInstanceProperty__default["default"](_context5 = "".concat(OIDC_CLAIMS.MANAGE, ":")).call(_context5, scope);
+  }));
+  // Set additional OAuth scopes
+  if (options !== null && options !== void 0 && options.additionalOAuthScopes) {
+    var _context6;
+    _forEachInstanceProperty__default["default"](_context6 = options.additionalOAuthScopes).call(_context6, additionalOAuthScope => {
+      var _context7, _additionalOAuthScope, _context9, _additionalOAuthScope2;
+      claims.push(..._mapInstanceProperty__default["default"](_context7 = (_additionalOAuthScope = additionalOAuthScope.view) !== null && _additionalOAuthScope !== void 0 ? _additionalOAuthScope : []).call(_context7, viewOAuthScope => {
+        var _context8;
+        return _concatInstanceProperty__default["default"](_context8 = "view/".concat(additionalOAuthScope.name, ":")).call(_context8, viewOAuthScope);
+      }), ..._mapInstanceProperty__default["default"](_context9 = (_additionalOAuthScope2 = additionalOAuthScope.manage) !== null && _additionalOAuthScope2 !== void 0 ? _additionalOAuthScope2 : []).call(_context9, manageOAuthScope => {
+        var _context0;
+        return _concatInstanceProperty__default["default"](_context0 = "manage/".concat(additionalOAuthScope.name, ":")).call(_context0, manageOAuthScope);
+      }));
+    });
+  }
+
+  // Set the teamId and applicationId
+  if (options.teamId) {
+    var _context1;
+    claims.push(_concatInstanceProperty__default["default"](_context1 = "".concat(OIDC_CLAIMS.TEAM_ID, ":")).call(_context1, options.teamId));
+    if (options.applicationId) {
+      var _context10;
+      claims.push(_concatInstanceProperty__default["default"](_context10 = "".concat(OIDC_CLAIMS.APPLICATION_ID, ":")).call(_context10, options.applicationId));
+    }
+  }
+  return [
+  // This is required as per OIDC spec.
+  OIDC_CLAIMS.OPEN_ID,
+  // Custom claims
+  ...claims].join(' ');
+};
+
+exports.CONTAINERS = CONTAINERS;
+exports.DIMENSIONS = DIMENSIONS;
+exports.NAVBAR = NAVBAR;
+exports.OIDC_CLAIMS = OIDC_CLAIMS;
+exports.OIDC_RESPONSE_TYPES = OIDC_RESPONSE_TYPES;
+exports.SUSPENSION_REASONS = SUSPENSION_REASONS;
+exports.WINDOW_SIZES = WINDOW_SIZES;
+exports.buildOidcScope = buildOidcScope;

package/dist/oidc-35e8e62a.esm.js

@@ -0,0 +1,100 @@
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+
+const DIMENSIONS = {
+  header: '56px'
+};
+const NAVBAR = {
+  expanderHeight: '50px',
+  expanderSize: '40px',
+  iconSize: '24px',
+  iconSizeHover: '28px',
+  itemSize: '48px',
+  itemHeight: '56px',
+  sublistIndentationWhenCollapsed: '72px',
+  sublistIndentationWhenExpanded: '248px',
+  sublistItemMinHeight: '50px',
+  sublistWidth: '272px',
+  leftNavigationTransition: 'all 150ms cubic-bezier(1, 0, 0.58, 1)',
+  widthLeftNavigation: '80px',
+  widthLeftNavigationWhenExpanded: '256px'
+};
+const WINDOW_SIZES = {
+  STANDARD: 1024,
+  WIDE: 1200
+};
+const CONTAINERS = {
+  LOCALE_SWITCHER: 'locale-switcher-container',
+  LEFT_OF_PROFILE: 'left-of-profile'
+};
+const SUSPENSION_REASONS = {
+  TEMPORARY_MAINTENANCE: 'TemporaryMaintenance',
+  PAYMENT: 'Payment',
+  OTHER: 'Other'
+};
+
+// OIDC params
+const OIDC_RESPONSE_TYPES = {
+  ID_TOKEN: 'id_token'
+};
+const OIDC_CLAIMS = {
+  OPEN_ID: 'openid',
+  PROJECT_KEY: 'project_key',
+  TEAM_ID: 'team_id',
+  APPLICATION_ID: 'application_id',
+  VIEW: 'view',
+  MANAGE: 'manage'
+};
+
+const buildOidcScope = options => {
+  var _context2, _options$oAuthScopes$, _options$oAuthScopes, _context4, _options$oAuthScopes$2, _options$oAuthScopes2;
+  const claims = [];
+
+  // Set the projectKey
+  if (options.projectKey) {
+    var _context;
+    claims.push(_concatInstanceProperty(_context = "".concat(OIDC_CLAIMS.PROJECT_KEY, ":")).call(_context, options.projectKey));
+  }
+
+  // Set the OAuth Scopes
+  claims.push(..._mapInstanceProperty(_context2 = (_options$oAuthScopes$ = (_options$oAuthScopes = options.oAuthScopes) === null || _options$oAuthScopes === void 0 ? void 0 : _options$oAuthScopes.view) !== null && _options$oAuthScopes$ !== void 0 ? _options$oAuthScopes$ : []).call(_context2, scope => {
+    var _context3;
+    return _concatInstanceProperty(_context3 = "".concat(OIDC_CLAIMS.VIEW, ":")).call(_context3, scope);
+  }));
+  claims.push(..._mapInstanceProperty(_context4 = (_options$oAuthScopes$2 = (_options$oAuthScopes2 = options.oAuthScopes) === null || _options$oAuthScopes2 === void 0 ? void 0 : _options$oAuthScopes2.manage) !== null && _options$oAuthScopes$2 !== void 0 ? _options$oAuthScopes$2 : []).call(_context4, scope => {
+    var _context5;
+    return _concatInstanceProperty(_context5 = "".concat(OIDC_CLAIMS.MANAGE, ":")).call(_context5, scope);
+  }));
+  // Set additional OAuth scopes
+  if (options !== null && options !== void 0 && options.additionalOAuthScopes) {
+    var _context6;
+    _forEachInstanceProperty(_context6 = options.additionalOAuthScopes).call(_context6, additionalOAuthScope => {
+      var _context7, _additionalOAuthScope, _context9, _additionalOAuthScope2;
+      claims.push(..._mapInstanceProperty(_context7 = (_additionalOAuthScope = additionalOAuthScope.view) !== null && _additionalOAuthScope !== void 0 ? _additionalOAuthScope : []).call(_context7, viewOAuthScope => {
+        var _context8;
+        return _concatInstanceProperty(_context8 = "view/".concat(additionalOAuthScope.name, ":")).call(_context8, viewOAuthScope);
+      }), ..._mapInstanceProperty(_context9 = (_additionalOAuthScope2 = additionalOAuthScope.manage) !== null && _additionalOAuthScope2 !== void 0 ? _additionalOAuthScope2 : []).call(_context9, manageOAuthScope => {
+        var _context0;
+        return _concatInstanceProperty(_context0 = "manage/".concat(additionalOAuthScope.name, ":")).call(_context0, manageOAuthScope);
+      }));
+    });
+  }
+
+  // Set the teamId and applicationId
+  if (options.teamId) {
+    var _context1;
+    claims.push(_concatInstanceProperty(_context1 = "".concat(OIDC_CLAIMS.TEAM_ID, ":")).call(_context1, options.teamId));
+    if (options.applicationId) {
+      var _context10;
+      claims.push(_concatInstanceProperty(_context10 = "".concat(OIDC_CLAIMS.APPLICATION_ID, ":")).call(_context10, options.applicationId));
+    }
+  }
+  return [
+  // This is required as per OIDC spec.
+  OIDC_CLAIMS.OPEN_ID,
+  // Custom claims
+  ...claims].join(' ');
+};
+
+export { CONTAINERS as C, DIMENSIONS as D, NAVBAR as N, OIDC_CLAIMS as O, SUSPENSION_REASONS as S, WINDOW_SIZES as W, OIDC_RESPONSE_TYPES as a, buildOidcScope as b };