carbon-react 119.4.0 → 119.4.1

package/esm/__spec_helper__/mock-resize-observer.js

@@ -2,10 +2,25 @@ const setupResizeObserverMock = () => {
   if (!window) {
     return;
   }
-  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn()
-  }));
+  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(callback => {
+    let hasCalledCallback = false;
+    const observer = {
+      disconnect: jest.fn(),
+      // observe mock needs to actually call the callback straight away, as this is what a real ResizeObserver does
+      // and this behaviour is needed for the FixedNavigationBarContextProvider to work properly.
+      // Note that we must only call the callback once per ResizeObserver instance, to avoid stack overflows in
+      // react-virtual.
+      observe: jest.fn(target => {
+        if (!hasCalledCallback) {
+          hasCalledCallback = true;
+          callback([{
+            target
+          }], observer);
+        }
+      }),
+      unobserve: jest.fn()
+    };
+    return observer;
+  });
 };
 export default setupResizeObserverMock;

package/esm/components/global-header/global-header.component.js

@@ -1,27 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
-import { baseTheme } from "../../style/themes";
-import StyledNavigationBar from "../navigation-bar/navigation-bar.style";
+import styled from "styled-components";
 import Box from "../box";
-const StyledGlobalHeader = styled(StyledNavigationBar).attrs(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    theme: theme || /* istanbul ignore next */baseTheme
-  };
-})`
-  ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return css`
-    z-index: ${theme.zIndex.globalNav};
-  `;
-}}
-`;
+import NavigationBar from "../navigation-bar";
 const StyledLogo = styled(Box)`
   display: flex;
   align-items: center;
@@ -42,19 +24,14 @@ const StyledLogo = styled(Box)`
     margin-left: var(--spacing500);
   }
 `;
-const GlobalHeader = _ref3 => {
+const GlobalHeader = _ref => {
   let {
     children,
     logo,
     ...rest
-  } = _ref3;
-  return /*#__PURE__*/React.createElement(StyledGlobalHeader, _extends({
-    "aria-label": "Global Header",
-    "data-component": "global-header",
-    navigationType: "black",
-    orientation: "top",
-    offset: "0px",
-    position: "fixed"
+  } = _ref;
+  return /*#__PURE__*/React.createElement(NavigationBar, _extends({
+    isGlobal: true
   }, rest), logo && /*#__PURE__*/React.createElement(StyledLogo, {
     "data-element": "global-header-logo-wrapper"
   }, logo), children);

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -11,6 +11,7 @@ import useClickAwayListener from "../../../../hooks/__internal__/useClickAwayLis
 import guid from "../../../../__internal__/utils/helpers/guid";
 import { SCROLLABLE_BLOCK, SCROLLABLE_BLOCK_PARENT, BLOCK_INDEX_SELECTOR, ALL_CHILDREN_SELECTOR } from "../locators";
 import useStableCallback from "../../../../hooks/__internal__/useStableCallback/useStableCallback";
+import FixedNavigationBarContext from "../../../navigation-bar/fixed-navigation-bar.context";
 const Submenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -46,6 +47,9 @@ const Submenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const shiftTabPressed = useRef(false);
   const focusFirstMenuItemOnOpen = useRef(false);
   const numberOfChildren = submenuItemIds.length;
+  const {
+    submenuMaxHeight
+  } = useContext(FixedNavigationBarContext);
   const onSubmenuOpen = useStableCallback(onSubmenuOpenProp);
   const blockIndex = useMemo(() => {
     const items = submenuRef.current?.querySelectorAll(BLOCK_INDEX_SELECTOR);
@@ -282,7 +286,8 @@ const Submenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     submenuDirection: submenuDirection,
     variant: variant,
     menuType: menuType,
-    role: blockIndex === 0 ? "presentation" : "list"
+    role: blockIndex === 0 ? "presentation" : "list",
+    maxHeight: submenuMaxHeight
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       submenuFocusId,

package/esm/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -10,6 +10,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
 }
 interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
     submenuDirection?: string;
+    maxHeight?: string;
 }
 declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
 declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -45,7 +45,8 @@ const StyledSubmenu = styled.ul`
     menuType,
     submenuDirection,
     variant,
-    inFullscreenView
+    inFullscreenView,
+    maxHeight
   } = _ref3;
   return css`
     ${!inFullscreenView && menuType && css`
@@ -69,6 +70,8 @@ const StyledSubmenu = styled.ul`
     ${!inFullscreenView && css`
       border-bottom-right-radius: var(--borderRadius100);
       border-bottom-left-radius: var(--borderRadius100);
+      overflow-y: auto;
+      ${maxHeight && `max-height: ${maxHeight};`}
 
       ${StyledMenuItem}:last-child a,
       ${StyledMenuItem}:last-child button,

package/esm/components/navigation-bar/fixed-navigation-bar.context.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { NavigationBarProps } from ".";
+declare type FixedNavigationBarContextProps = {
+    submenuMaxHeight?: string;
+};
+declare const FixedNavigationBarContext: React.Context<FixedNavigationBarContextProps>;
+export interface FixedNavigationBarContextProviderProps extends Pick<NavigationBarProps, "position" | "orientation" | "offset" | "children"> {
+    navbarElement: HTMLElement | null;
+}
+export declare const FixedNavigationBarContextProvider: ({ position, orientation, offset, children, navbarElement, }: FixedNavigationBarContextProviderProps) => React.JSX.Element;
+export default FixedNavigationBarContext;

package/esm/components/navigation-bar/fixed-navigation-bar.context.js

@@ -0,0 +1,31 @@
+import React, { createContext, useState, useCallback } from "react";
+import useResizeObserver from "../../hooks/__internal__/useResizeObserver/useResizeObserver";
+const FixedNavigationBarContext = /*#__PURE__*/createContext({});
+export const FixedNavigationBarContextProvider = _ref => {
+  let {
+    position,
+    orientation,
+    offset,
+    children,
+    navbarElement
+  } = _ref;
+  const [navbarHeight, setNavbarHeight] = useState(navbarElement?.offsetHeight);
+  const updateHeight = useCallback(() => setNavbarHeight(navbarElement?.offsetHeight), [navbarElement]);
+  useResizeObserver({
+    current: navbarElement
+  }, updateHeight);
+  let submenuMaxHeight;
+  if (position === "fixed") {
+    if (orientation === "top" && navbarHeight !== undefined) {
+      submenuMaxHeight = `calc(100vh - ${navbarHeight}px - ${offset})`;
+    } else if (orientation === "bottom") {
+      submenuMaxHeight = offset;
+    }
+  }
+  return /*#__PURE__*/React.createElement(FixedNavigationBarContext.Provider, {
+    value: {
+      submenuMaxHeight
+    }
+  }, children);
+};
+export default FixedNavigationBarContext;

package/esm/components/navigation-bar/navigation-bar.component.d.ts

@@ -18,6 +18,8 @@ export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     offset?: string;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation;
+    /** @private @ignore set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean;
 }
-export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, ...props }: NavigationBarProps) => JSX.Element;
+export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, isGlobal, ...props }: NavigationBarProps) => JSX.Element;
 export default NavigationBar;

package/esm/components/navigation-bar/navigation-bar.component.js

@@ -1,7 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import StyledNavigationBar from "./navigation-bar.style";
+import { FixedNavigationBarContextProvider } from "./fixed-navigation-bar.context";
 const NavigationBar = _ref => {
   let {
     navigationType = "light",
@@ -11,17 +12,27 @@ const NavigationBar = _ref => {
     position,
     offset = "0",
     orientation,
+    isGlobal,
     ...props
   } = _ref;
+  const [navbarElement, setNavbarElement] = useState(null);
   return /*#__PURE__*/React.createElement(StyledNavigationBar, _extends({
     role: "navigation",
-    "aria-label": ariaLabel,
-    navigationType: navigationType,
-    "data-component": "navigation-bar",
-    position: position,
-    offset: offset,
-    orientation: orientation
-  }, props), !isLoading && children);
+    "data-component": isGlobal ? "global-header" : "navigation-bar",
+    "aria-label": isGlobal ? "Global Header" : ariaLabel,
+    navigationType: isGlobal ? "black" : navigationType,
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position
+  }, props, {
+    isGlobal: isGlobal,
+    ref: setNavbarElement
+  }), /*#__PURE__*/React.createElement(FixedNavigationBarContextProvider, {
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position,
+    navbarElement: navbarElement
+  }, !isLoading && children));
 };
 NavigationBar.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
@@ -563,6 +574,7 @@ NavigationBar.propTypes = {
     "valueOf": PropTypes.func.isRequired
   })]),
   "flexWrap": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), PropTypes.arrayOf(PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), PropTypes.object]),
+  "isGlobal": PropTypes.bool,
   "isLoading": PropTypes.bool,
   "justifyContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/navigation-bar/navigation-bar.style.d.ts

@@ -9,6 +9,8 @@ export declare type StyledNavigationBarProps = PaddingProps & FlexboxProps & {
     offset?: string;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation;
+    /** set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean;
 };
 declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     /** Color scheme of navigation component */
@@ -19,5 +21,7 @@ declare const StyledNavigationBar: import("styled-components").StyledComponent<"
     offset?: string | undefined;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation | undefined;
+    /** set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean | undefined;
 }, never>;
 export default StyledNavigationBar;

package/esm/components/navigation-bar/navigation-bar.style.js

@@ -55,11 +55,12 @@ const StyledNavigationBar = styled.nav`
   ${_ref2 => {
   let {
     navigationType,
-    theme
+    theme,
+    isGlobal
   } = _ref2;
   return css`
     min-height: 40px;
-    z-index: ${theme.zIndex.nav};
+    z-index: ${isGlobal ? theme.zIndex.globalNav : theme.zIndex.nav};
 
     ${navigationType === "light" && css`
       background-color: var(--colorsComponentsMenuSpringStandard500);

package/lib/__spec_helper__/mock-resize-observer.js

@@ -8,11 +8,26 @@ const setupResizeObserverMock = () => {
   if (!window) {
     return;
   }
-  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn()
-  }));
+  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(callback => {
+    let hasCalledCallback = false;
+    const observer = {
+      disconnect: jest.fn(),
+      // observe mock needs to actually call the callback straight away, as this is what a real ResizeObserver does
+      // and this behaviour is needed for the FixedNavigationBarContextProvider to work properly.
+      // Note that we must only call the callback once per ResizeObserver instance, to avoid stack overflows in
+      // react-virtual.
+      observe: jest.fn(target => {
+        if (!hasCalledCallback) {
+          hasCalledCallback = true;
+          callback([{
+            target
+          }], observer);
+        }
+      }),
+      unobserve: jest.fn()
+    };
+    return observer;
+  });
 };
 var _default = setupResizeObserverMock;
 exports.default = _default;

package/lib/components/global-header/global-header.component.js

@@ -6,31 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _themes = require("../../style/themes");
-var _navigationBar = _interopRequireDefault(require("../navigation-bar/navigation-bar.style"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _box = _interopRequireDefault(require("../box"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _navigationBar = _interopRequireDefault(require("../navigation-bar"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const StyledGlobalHeader = (0, _styledComponents.default)(_navigationBar.default).attrs(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    theme: theme || /* istanbul ignore next */_themes.baseTheme
-  };
-})`
-  ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return (0, _styledComponents.css)`
-    z-index: ${theme.zIndex.globalNav};
-  `;
-}}
-`;
 const StyledLogo = (0, _styledComponents.default)(_box.default)`
   display: flex;
   align-items: center;
@@ -51,19 +31,14 @@ const StyledLogo = (0, _styledComponents.default)(_box.default)`
     margin-left: var(--spacing500);
   }
 `;
-const GlobalHeader = _ref3 => {
+const GlobalHeader = _ref => {
   let {
     children,
     logo,
     ...rest
-  } = _ref3;
-  return /*#__PURE__*/_react.default.createElement(StyledGlobalHeader, _extends({
-    "aria-label": "Global Header",
-    "data-component": "global-header",
-    navigationType: "black",
-    orientation: "top",
-    offset: "0px",
-    position: "fixed"
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
+    isGlobal: true
   }, rest), logo && /*#__PURE__*/_react.default.createElement(StyledLogo, {
     "data-element": "global-header-logo-wrapper"
   }, logo), children);

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -16,6 +16,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../../../hooks/__
 var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
 var _locators = require("../locators");
 var _useStableCallback = _interopRequireDefault(require("../../../../hooks/__internal__/useStableCallback/useStableCallback"));
+var _fixedNavigationBar = _interopRequireDefault(require("../../../navigation-bar/fixed-navigation-bar.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
@@ -55,6 +56,9 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const shiftTabPressed = (0, _react.useRef)(false);
   const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
   const numberOfChildren = submenuItemIds.length;
+  const {
+    submenuMaxHeight
+  } = (0, _react.useContext)(_fixedNavigationBar.default);
   const onSubmenuOpen = (0, _useStableCallback.default)(onSubmenuOpenProp);
   const blockIndex = (0, _react.useMemo)(() => {
     const items = submenuRef.current?.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR);
@@ -291,7 +295,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     submenuDirection: submenuDirection,
     variant: variant,
     menuType: menuType,
-    role: blockIndex === 0 ? "presentation" : "list"
+    role: blockIndex === 0 ? "presentation" : "list",
+    maxHeight: submenuMaxHeight
   }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
       submenuFocusId,

package/lib/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -10,6 +10,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
 }
 interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
     submenuDirection?: string;
+    maxHeight?: string;
 }
 declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
 declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -55,7 +55,8 @@ const StyledSubmenu = _styledComponents.default.ul`
     menuType,
     submenuDirection,
     variant,
-    inFullscreenView
+    inFullscreenView,
+    maxHeight
   } = _ref3;
   return (0, _styledComponents.css)`
     ${!inFullscreenView && menuType && (0, _styledComponents.css)`
@@ -79,6 +80,8 @@ const StyledSubmenu = _styledComponents.default.ul`
     ${!inFullscreenView && (0, _styledComponents.css)`
       border-bottom-right-radius: var(--borderRadius100);
       border-bottom-left-radius: var(--borderRadius100);
+      overflow-y: auto;
+      ${maxHeight && `max-height: ${maxHeight};`}
 
       ${_menu.StyledMenuItem}:last-child a,
       ${_menu.StyledMenuItem}:last-child button,

package/lib/components/navigation-bar/fixed-navigation-bar.context.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { NavigationBarProps } from ".";
+declare type FixedNavigationBarContextProps = {
+    submenuMaxHeight?: string;
+};
+declare const FixedNavigationBarContext: React.Context<FixedNavigationBarContextProps>;
+export interface FixedNavigationBarContextProviderProps extends Pick<NavigationBarProps, "position" | "orientation" | "offset" | "children"> {
+    navbarElement: HTMLElement | null;
+}
+export declare const FixedNavigationBarContextProvider: ({ position, orientation, offset, children, navbarElement, }: FixedNavigationBarContextProviderProps) => React.JSX.Element;
+export default FixedNavigationBarContext;

package/lib/components/navigation-bar/fixed-navigation-bar.context.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FixedNavigationBarContextProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver/useResizeObserver"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const FixedNavigationBarContext = /*#__PURE__*/(0, _react.createContext)({});
+const FixedNavigationBarContextProvider = _ref => {
+  let {
+    position,
+    orientation,
+    offset,
+    children,
+    navbarElement
+  } = _ref;
+  const [navbarHeight, setNavbarHeight] = (0, _react.useState)(navbarElement?.offsetHeight);
+  const updateHeight = (0, _react.useCallback)(() => setNavbarHeight(navbarElement?.offsetHeight), [navbarElement]);
+  (0, _useResizeObserver.default)({
+    current: navbarElement
+  }, updateHeight);
+  let submenuMaxHeight;
+  if (position === "fixed") {
+    if (orientation === "top" && navbarHeight !== undefined) {
+      submenuMaxHeight = `calc(100vh - ${navbarHeight}px - ${offset})`;
+    } else if (orientation === "bottom") {
+      submenuMaxHeight = offset;
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement(FixedNavigationBarContext.Provider, {
+    value: {
+      submenuMaxHeight
+    }
+  }, children);
+};
+exports.FixedNavigationBarContextProvider = FixedNavigationBarContextProvider;
+var _default = FixedNavigationBarContext;
+exports.default = _default;

package/lib/components/navigation-bar/navigation-bar.component.d.ts

@@ -18,6 +18,8 @@ export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     offset?: string;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation;
+    /** @private @ignore set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean;
 }
-export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, ...props }: NavigationBarProps) => JSX.Element;
+export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, isGlobal, ...props }: NavigationBarProps) => JSX.Element;
 export default NavigationBar;

package/lib/components/navigation-bar/navigation-bar.component.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.NavigationBar = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _navigationBar = _interopRequireDefault(require("./navigation-bar.style"));
+var _fixedNavigationBar = require("./fixed-navigation-bar.context");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const NavigationBar = _ref => {
   let {
@@ -18,17 +21,27 @@ const NavigationBar = _ref => {
     position,
     offset = "0",
     orientation,
+    isGlobal,
     ...props
   } = _ref;
+  const [navbarElement, setNavbarElement] = (0, _react.useState)(null);
   return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
     role: "navigation",
-    "aria-label": ariaLabel,
-    navigationType: navigationType,
-    "data-component": "navigation-bar",
-    position: position,
-    offset: offset,
-    orientation: orientation
-  }, props), !isLoading && children);
+    "data-component": isGlobal ? "global-header" : "navigation-bar",
+    "aria-label": isGlobal ? "Global Header" : ariaLabel,
+    navigationType: isGlobal ? "black" : navigationType,
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position
+  }, props, {
+    isGlobal: isGlobal,
+    ref: setNavbarElement
+  }), /*#__PURE__*/_react.default.createElement(_fixedNavigationBar.FixedNavigationBarContextProvider, {
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position,
+    navbarElement: navbarElement
+  }, !isLoading && children));
 };
 exports.NavigationBar = NavigationBar;
 NavigationBar.propTypes = {
@@ -571,6 +584,7 @@ NavigationBar.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   })]),
   "flexWrap": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), _propTypes.default.object]),
+  "isGlobal": _propTypes.default.bool,
   "isLoading": _propTypes.default.bool,
   "justifyContent": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,

package/lib/components/navigation-bar/navigation-bar.style.d.ts

@@ -9,6 +9,8 @@ export declare type StyledNavigationBarProps = PaddingProps & FlexboxProps & {
     offset?: string;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation;
+    /** set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean;
 };
 declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     /** Color scheme of navigation component */
@@ -19,5 +21,7 @@ declare const StyledNavigationBar: import("styled-components").StyledComponent<"
     offset?: string | undefined;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation | undefined;
+    /** set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean | undefined;
 }, never>;
 export default StyledNavigationBar;

package/lib/components/navigation-bar/navigation-bar.style.js

@@ -63,11 +63,12 @@ const StyledNavigationBar = _styledComponents.default.nav`
   ${_ref2 => {
   let {
     navigationType,
-    theme
+    theme,
+    isGlobal
   } = _ref2;
   return (0, _styledComponents.css)`
     min-height: 40px;
-    z-index: ${theme.zIndex.nav};
+    z-index: ${isGlobal ? theme.zIndex.globalNav : theme.zIndex.nav};
 
     ${navigationType === "light" && (0, _styledComponents.css)`
       background-color: var(--colorsComponentsMenuSpringStandard500);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.4.0",
+  "version": "119.4.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",