carbon-react 119.4.0 → 119.4.2

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

@@ -12,10 +12,10 @@ const StyledFlatTableRowHeader = styled.th`
   let {
     align,
     theme,
-    colWidth,
+    width,
     leftPosition,
     rightPosition,
-    isTruncated,
+    truncate,
     expandable,
     verticalBorder,
     verticalBorderColor,
@@ -35,22 +35,22 @@ const StyledFlatTableRowHeader = styled.th`
     padding: 0;
     z-index: ${baseTheme.zIndex.overlay};
 
-    ${colWidth && css`
-      width: ${colWidth}px;
+    ${width && css`
+      width: ${width}px;
     `}
 
     &&&& {
       > div {
         box-sizing: border-box;
 
-        ${isTruncated && css`
+        ${truncate && css`
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
         `}
 
-        ${colWidth && css`
-          width: ${colWidth}px;
+        ${width && css`
+          width: ${width}px;
         `}
  
         ${padding}

package/esm/components/flat-table/flat-table-row-header/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./flat-table-row-header";
-export * from "./flat-table-row-header";
+export { default } from "./flat-table-row-header.component";
+export type { FlatTableRowHeaderProps } from "./flat-table-row-header.component";

package/esm/components/flat-table/flat-table.component.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface FlatTableProps extends MarginProps {
+    /** The HTML id of the element that contains a description of this table. */
+    ariaDescribedby?: string;
+    /** A string to render as the table's caption */
+    caption?: string;
+    /** FlatTableHead and FlatTableBody */
+    children: React.ReactNode;
+    /** `FlatTable` color theme */
+    colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
+    /** Content to be rendered at the foot of the table */
+    footer?: React.ReactNode;
+    /** If true, the header does not scroll with the content */
+    hasStickyFooter?: boolean;
+    /** If true, the header does not scroll with the content */
+    hasStickyHead?: boolean;
+    /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
+    height?: string | number;
+    /** Set the min-height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
+    minHeight?: string | number;
+    /** Toggles the zebra striping for the table rows */
+    isZebra?: boolean;
+    /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
+    size?: "compact" | "small" | "medium" | "large" | "extraLarge";
+    /** Applies max-height of 100% to FlatTable if true */
+    hasMaxHeight?: boolean;
+    /** Set the overflow X of the table wrapper. Any valid CSS string */
+    overflowX?: string;
+    /** Width of the table. Any valid CSS string */
+    width?: string;
+}
+export interface FlatTableThemeContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
+    selectedId?: string;
+    setSelectedId: (id: string) => void;
+}
+export declare const FlatTableThemeContext: React.Context<FlatTableThemeContextProps>;
+export declare const FlatTable: {
+    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
+    displayName: string;
+};
+export default FlatTable;

package/esm/components/flat-table/flat-table.component.js

@@ -1,27 +1,24 @@
 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, { useLayoutEffect, useRef, useState } from "react";
+import React, { useLayoutEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer } from "./flat-table.style";
 import { DrawerSidebarContext } from "../drawer";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import Events from "../../__internal__/utils/helpers/events/events";
 export const FlatTableThemeContext = /*#__PURE__*/React.createContext({
   setSelectedId: () => {}
 });
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr, tbody tr td, tbody tr th";
-const FlatTable = _ref => {
+export const FlatTable = _ref => {
   let {
     caption,
     children,
     hasStickyHead,
-    colorTheme,
+    colorTheme = "dark",
     footer,
     hasStickyFooter = false,
     height,
     isZebra,
-    size,
+    size = "medium",
     hasMaxHeight = false,
     ariaDescribedby,
     minHeight,
@@ -40,17 +37,18 @@ const FlatTable = _ref => {
   const tableStylingProps = {
     caption,
     isZebra,
-    size
+    size,
+    "aria-describedby": ariaDescribedby
   };
-  if (ariaDescribedby) {
-    tableStylingProps["aria-describedby"] = ariaDescribedby;
-  }
+  const {
+    isInSidebar
+  } = useContext(DrawerSidebarContext);
   useLayoutEffect(() => {
     const findRow = (rows, isFirstCol) => rows.find((row, index) => {
       const cells = Array.from(row.querySelectorAll("td, th"));
       const cell = isFirstCol ? cells.shift() : cells.pop();
       const rowSpan = cell?.getAttribute("rowspan");
-      return rowSpan >= index + 1;
+      return rowSpan && Number(rowSpan) >= index + 1;
     });
 
     /* istanbul ignore else */
@@ -136,85 +134,46 @@ const FlatTable = _ref => {
       setSelectedId(focusableArray[0]?.getAttribute("id") || "");
     }
   }, [selectedId]);
-  return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, _ref2 => {
-    let {
-      isInSidebar
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
-      ref: wrapperRef,
-      "data-component": "flat-table-wrapper",
-      isInSidebar: isInSidebar,
-      hasStickyHead: hasStickyHead,
-      colorTheme: colorTheme,
-      minHeight: minHeight,
-      overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
-      height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
-      maxHeight: hasMaxHeight ? "100%" : undefined,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: hasStickyFooter || height ? "space-between" : undefined,
-      tabIndex: "0",
-      role: "region",
-      overflowX: width ? "hidden" : undefined,
-      width: width,
-      hasStickyFooter: hasStickyFooter,
-      hasVerticalScrollbar: hasVerticalScrollbar,
-      hasHorizontalScrollbar: hasHorizontalScrollbar,
-      hasFooter: !!footer,
-      firstColRowSpanIndex: firstColRowSpanIndex,
-      lastColRowSpanIndex: lastColRowSpanIndex,
-      onKeyDown: handleKeyDown
-    }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
-      overflowX: overflowX,
-      width: width
-    }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
-      ref: tableRef,
-      "data-component": "flat-table"
-    }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
-      value: {
-        colorTheme,
-        size,
-        setSelectedId,
-        selectedId
-      }
-    }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
-      hasStickyFooter: hasStickyFooter
-    }, footer));
-  });
-};
-FlatTable.propTypes = {
-  ...marginPropTypes,
-  /** The HTML id of the element that contains a description of this table. */
-  ariaDescribedby: PropTypes.string,
-  /** A string to render as the table's caption */
-  caption: PropTypes.string,
-  /** FlatTableHead and FlatTableBody */
-  children: PropTypes.node.isRequired,
-  /** If true, the header does not scroll with the content */
-  hasStickyHead: PropTypes.bool,
-  /** `FlatTable` color theme */
-  colorTheme: PropTypes.oneOf(["light", "transparent-base", "transparent-white", "dark"]),
-  /** Content to be rendered at the foot of the table */
-  footer: PropTypes.node,
-  /** If true, the header does not scroll with the content */
-  hasStickyFooter: PropTypes.bool,
-  /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Set the min-height of the table. A string can be any valid CSS string, numbers will be converted to pixels. */
-  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Toggles the zebra striping for the table rows */
-  isZebra: PropTypes.bool,
-  /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
-  size: PropTypes.oneOf(["compact", "small", "medium", "large", "extraLarge"]),
-  /** Applies max-height of 100% to FlatTable if true */
-  hasMaxHeight: PropTypes.bool,
-  /** Set the overflow X of the table wrapper. Any valid CSS string */
-  overflowX: PropTypes.string,
-  /** Width of the table. Any valid CSS string */
-  width: PropTypes.string
-};
-FlatTable.defaultProps = {
-  colorTheme: "dark",
-  size: "medium"
+  return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
+    ref: wrapperRef,
+    "data-component": "flat-table-wrapper",
+    isInSidebar: isInSidebar,
+    hasStickyHead: hasStickyHead,
+    colorTheme: colorTheme,
+    minHeight: minHeight,
+    overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
+    height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
+    maxHeight: hasMaxHeight ? "100%" : undefined,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: hasStickyFooter || height ? "space-between" : undefined,
+    tabIndex: 0,
+    role: "region",
+    overflowX: width ? "hidden" : undefined,
+    width: width,
+    hasStickyFooter: hasStickyFooter,
+    hasVerticalScrollbar: hasVerticalScrollbar,
+    hasHorizontalScrollbar: hasHorizontalScrollbar,
+    footer: !!footer,
+    firstColRowSpanIndex: firstColRowSpanIndex,
+    lastColRowSpanIndex: lastColRowSpanIndex,
+    onKeyDown: handleKeyDown
+  }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
+    overflowX: overflowX,
+    width: width
+  }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
+    ref: tableRef,
+    "data-component": "flat-table"
+  }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
+    value: {
+      colorTheme,
+      size,
+      setSelectedId,
+      selectedId
+    }
+  }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
+    hasStickyFooter: hasStickyFooter
+  }, footer));
 };
+FlatTable.displayName = "FlatTable";
 export default FlatTable;

package/esm/components/flat-table/flat-table.config.d.ts

@@ -0,0 +1,2 @@
+export declare const FLAT_TABLE_THEMES: readonly ["light", "dark", "transparent-base", "transparent-white"];
+export declare const FLAT_TABLE_SIZES: readonly ["compact", "small", "medium", "large"];

package/esm/components/flat-table/flat-table.style.d.ts

@@ -0,0 +1,15 @@
+import { FlatTableProps } from "./flat-table.component";
+import { DrawerSidebarContextProps } from "../drawer";
+declare const StyledTableContainer: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "width" | "overflowX">, never>;
+declare const StyledFlatTable: import("styled-components").StyledComponent<"table", any, Pick<FlatTableProps, "caption" | "isZebra"> & {
+    size: NonNullable<FlatTableProps["size"]>;
+}, never>;
+interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFooter" | "colorTheme" | "hasStickyHead" | "footer">, Partial<DrawerSidebarContextProps> {
+    hasHorizontalScrollbar: boolean;
+    hasVerticalScrollbar: boolean;
+    lastColRowSpanIndex: number;
+    firstColRowSpanIndex: number;
+}
+declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
+declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;
+export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer, };

package/esm/components/flat-table/flat-table.style.js

@@ -99,9 +99,6 @@ const StyledFlatTable = styled.table`
     `;
 }}
 `;
-StyledFlatTable.defaultProps = {
-  size: "medium"
-};
 const StyledFlatTableWrapper = styled(Box)`
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
@@ -301,9 +298,9 @@ const StyledFlatTableWrapper = styled(Box)`
 
   ${_ref14 => {
   let {
-    hasFooter
+    footer
   } = _ref14;
-  return hasFooter && css`
+  return footer && css`
     tr:last-child:focus {
       :after {
         border-bottom-left-radius: var(--borderRadius000);
@@ -314,65 +311,45 @@ const StyledFlatTableWrapper = styled(Box)`
 
   ${_ref15 => {
   let {
-    hasFooter
+    footer,
+    firstColRowSpanIndex,
+    lastColRowSpanIndex,
+    hasHorizontalScrollbar,
+    hasVerticalScrollbar
   } = _ref15;
-  return !hasFooter && css`
+  return !footer && css`
       tbody {
-        ${_ref16 => {
-    let {
-      firstColRowSpanIndex
-    } = _ref16;
-    return firstColRowSpanIndex >= 0 && css`
-            ${StyledFlatTableRow}:nth-of-type(${firstColRowSpanIndex + 1}) {
-              th:first-child,
-              td:first-child {
-                border-bottom-left-radius: var(--borderRadius100);
-              }
+        ${firstColRowSpanIndex >= 0 && css`
+          ${StyledFlatTableRow}:nth-of-type(${firstColRowSpanIndex + 1}) {
+            th:first-child,
+            td:first-child {
+              border-bottom-left-radius: var(--borderRadius100);
             }
-          `;
-  }}
+          }
+        `}
 
-        ${_ref17 => {
-    let {
-      lastColRowSpanIndex,
-      hasHorizontalScrollbar
-    } = _ref17;
-    return lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && css`
-            ${StyledFlatTableRow}:nth-of-type(${lastColRowSpanIndex + 1}) {
-              th:last-child,
-              td:last-child {
-                border-bottom-right-radius: var(--borderRadius100);
-              }
+        ${lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && css`
+          ${StyledFlatTableRow}:nth-of-type(${lastColRowSpanIndex + 1}) {
+            th:last-child,
+            td:last-child {
+              border-bottom-right-radius: var(--borderRadius100);
             }
-          `;
-  }}
+          }
+        `}
 
         ${StyledFlatTableRow}:last-of-type {
-          ${_ref18 => {
-    let {
-      hasHorizontalScrollbar,
-      firstColRowSpanIndex
-    } = _ref18;
-    return !hasHorizontalScrollbar && firstColRowSpanIndex === -1 && css`
-              th:first-child,
-              td:first-child {
-                border-bottom-left-radius: var(--borderRadius100);
-              }
-            `;
-  }}
-          ${_ref19 => {
-    let {
-      hasVerticalScrollbar,
-      hasHorizontalScrollbar,
-      lastColRowSpanIndex
-    } = _ref19;
-    return !hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && css`
-              th:last-child,
-              td:last-child {
-                border-bottom-right-radius: var(--borderRadius100);
-              }
-            `;
-  }}
+          ${!hasHorizontalScrollbar && firstColRowSpanIndex === -1 && css`
+            th:first-child,
+            td:first-child {
+              border-bottom-left-radius: var(--borderRadius100);
+            }
+          `}
+          ${!hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && css`
+            th:last-child,
+            td:last-child {
+              border-bottom-right-radius: var(--borderRadius100);
+            }
+          `}
         }
       }
     `;
@@ -382,11 +359,11 @@ StyledFlatTableWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledFlatTableFooter = styled.div`
-  ${_ref20 => {
+  ${_ref16 => {
   let {
     hasStickyFooter,
     theme
-  } = _ref20;
+  } = _ref16;
   return hasStickyFooter && css`
       position: sticky;
       bottom: 0px;

package/esm/components/flat-table/index.d.ts

@@ -1,13 +1,22 @@
-export type TableBorderSize = "small" | "medium" | "large";
-
-export { default as FlatTable } from "./flat-table";
-export { default as FlatTableHead } from "./flat-table-head";
-export { default as FlatTableHeader } from "./flat-table-header";
-export { default as FlatTableBody } from "./flat-table-body";
-export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable";
-export { default as FlatTableRow } from "./flat-table-row";
-export { default as FlatTableRowHeader } from "./flat-table-row-header";
-export { default as FlatTableCell } from "./flat-table-cell";
-export { default as FlatTableCheckbox } from "./flat-table-checkbox";
-export { default as Sort } from "./sort";
-export * from "./flat-table";
+export { default as FlatTable } from "./flat-table.component";
+export { default as FlatTableHead } from "./flat-table-head/flat-table-head.component";
+export { default as FlatTableHeader } from "./flat-table-header/flat-table-header.component";
+export { default as FlatTableBody } from "./flat-table-body/flat-table-body.component";
+export { default as FlatTableRow } from "./flat-table-row/flat-table-row.component";
+export { default as FlatTableRowHeader } from "./flat-table-row-header/flat-table-row-header.component";
+export { default as FlatTableCell } from "./flat-table-cell/flat-table-cell.component";
+export { default as FlatTableCheckbox } from "./flat-table-checkbox/flat-table-checkbox.component";
+export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable/flat-table-body-draggable.component";
+export { default as Sort } from "./sort/sort.component";
+export declare type TableBorderSize = "small" | "medium" | "large";
+export declare type TableCellAlign = "left" | "center" | "right";
+export type { FlatTableProps } from "./flat-table.component";
+export type { FlatTableHeadProps } from "./flat-table-head";
+export type { FlatTableHeaderProps } from "./flat-table-header";
+export type { FlatTableBodyProps } from "./flat-table-body";
+export type { FlatTableBodyDraggableProps } from "./flat-table-body-draggable";
+export type { FlatTableRowProps } from "./flat-table-row";
+export type { FlatTableRowHeaderProps } from "./flat-table-row-header";
+export type { FlatTableCellProps } from "./flat-table-cell";
+export type { FlatTableCheckboxProps } from "./flat-table-checkbox";
+export type { SortProps } from "./sort";

package/esm/components/flat-table/sort/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./sort";
-export * from "./sort";
+export { default } from "./sort.component";
+export type { SortProps } from "./sort.component";

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface SortProps {
+    /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
+    sortType?: "ascending" | "descending" | false;
+    /** Callback fired when the `FlatTableSortHeader` is clicked */
+    onClick?: () => void;
+    /** Sets the content of `FlatTableSortHeader` */
+    children?: React.ReactNode;
+}
+declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export default Sort;

package/esm/components/flat-table/sort/sort.component.js

@@ -14,7 +14,7 @@ const Sort = _ref => {
   const onKeyDown = e => {
     if (Event.isEnterOrSpaceKey(e)) {
       e.preventDefault();
-      return onClick();
+      return onClick?.();
     }
     return null;
   };
@@ -22,7 +22,6 @@ const Sort = _ref => {
     hidden: true,
     id: id.current
   }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/React.createElement(StyledSort, {
-    type: "button",
     role: "button",
     onKeyDown: onKeyDown,
     tabIndex: 0,
@@ -34,12 +33,4 @@ const Sort = _ref => {
     color: "--colorsUtilityMajor200"
   })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
 };
-Sort.propTypes = {
-  /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
-  sortType: PropTypes.oneOf(["ascending", "descending", false]),
-  /** Callback fired when the `FlatTableSortHeader` is clicked */
-  onClick: PropTypes.func,
-  /** The content of `FlatTableSortHeader` */
-  children: PropTypes.node
-};
 export default Sort;

package/esm/components/flat-table/sort/sort.style.d.ts

@@ -0,0 +1,4 @@
+import { SortProps } from "./sort.component";
+declare const StyledSort: import("styled-components").StyledComponent<"div", any, Pick<SortProps, "sortType">, never>;
+declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledSort, StyledSpaceHolder };

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;