carbon-react 151.2.2 → 151.2.3

package/esm/__internal__/utils/helpers/events/events.d.ts

@@ -71,6 +71,14 @@ declare const Events: {
      * Determines if the key pressed is the end key
      * */
     isEndKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the page up key
+     * */
+    isPageUpKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the page down key
+     * */
+    isPageDownKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Gets the event's path which is an array of the objects on which listeners will be invoked.
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

package/esm/__internal__/utils/helpers/events/events.js

@@ -103,6 +103,18 @@ const Events = {
   isEndKey: ev => {
     return ev.key === "End";
   },
+  /**
+   * Determines if the key pressed is the page up key
+   * */
+  isPageUpKey: ev => {
+    return ev.key === "PageUp";
+  },
+  /**
+   * Determines if the key pressed is the page down key
+   * */
+  isPageDownKey: ev => {
+    return ev.key === "PageDown";
+  },
   /**
    * Gets the event's path which is an array of the objects on which listeners will be invoked.
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

package/esm/components/action-popover/action-popover.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import React, { useState, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef, useContext } from "react";
 import invariant from "invariant";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
@@ -13,6 +13,7 @@ import ActionPopoverDivider from "./action-popover-divider/action-popover-divide
 import ActionPopoverContext from "./__internal__/action-popover.context";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import { findFirstFocusableItem, findLastFocusableItem, getItems, checkChildrenForString } from "./__internal__/action-popover-utils";
+import FlatTableContext from "../flat-table/__internal__/flat-table.context";
 const onOpenDefault = () => {};
 const onCloseDefault = () => {};
 export const ActionPopover = /*#__PURE__*/forwardRef(({
@@ -36,6 +37,9 @@ export const ActionPopover = /*#__PURE__*/forwardRef(({
   const [guid] = useState(createGuid());
   const buttonRef = useRef(null);
   const menu = useRef(null);
+  const {
+    isInFlatTable
+  } = useContext(FlatTableContext);
   const hasProperChildren = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -213,7 +217,8 @@ export const ActionPopover = /*#__PURE__*/forwardRef(({
     }
   }, isOpen && /*#__PURE__*/React.createElement(Popover, {
     placement: mappedPlacement,
-    reference: buttonRef
+    reference: buttonRef,
+    disableBackgroundUI: isInFlatTable
   }, /*#__PURE__*/React.createElement(ActionPopoverMenu, _extends({
     "data-component": "action-popover",
     ref: menu

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { flip, offset } from "@floating-ui/dom";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, useContext } from "react";
 import { DayPicker, defaultLocale } from "react-day-picker";
 import useLocale from "../../../../hooks/__internal__/useLocale";
 import Popover from "../../../../__internal__/popover";
@@ -9,6 +9,7 @@ import Weekday from "../weekday";
 import { getDisabledDays } from "../utils";
 import { defaultFocusableSelectors } from "../../../../__internal__/focus-trap/focus-trap-utils";
 import Events from "../../../../__internal__/utils/helpers/events";
+import FlatTableContext from "../../../flat-table/__internal__/flat-table.context";
 import StyledDayPicker from "./day-picker.style";
 const popoverMiddleware = [offset(3), flip({
   fallbackStrategy: "initialPlacement"
@@ -100,6 +101,13 @@ export const DatePicker = ({
       }
     }, 0);
   };
+  const {
+    isInFlatTable,
+    setHasOpenDatePicker
+  } = useContext(FlatTableContext);
+  useEffect(() => {
+    setHasOpenDatePicker?.(!!open);
+  }, [open, setHasOpenDatePicker]);
   useEffect(() => {
     if (selectedDays) {
       setFocusedMonth(selectedDays);
@@ -122,7 +130,8 @@ export const DatePicker = ({
     placement: "bottom-start",
     reference: inputElement,
     middleware: popoverMiddleware,
-    disablePortal: disablePortal
+    disablePortal: disablePortal,
+    disableBackgroundUI: isInFlatTable
   }, /*#__PURE__*/React.createElement(StyledDayPicker, {
     id: "styled-day-picker",
     "data-role": "date-picker",

package/esm/components/flat-table/__internal__/flat-table.context.d.ts

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { FlatTableProps } from "../flat-table.component";
 export interface FlatTableContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
     getTabStopElementId: () => string;
+    isInFlatTable?: boolean;
+    setHasOpenDatePicker?: Dispatch<SetStateAction<boolean>>;
 }
 declare const _default: React.Context<FlatTableContextProps>;
 export default _default;

package/esm/components/flat-table/__internal__/flat-table.context.js

@@ -1,4 +1,5 @@
 import React from "react";
 export default /*#__PURE__*/React.createContext({
-  getTabStopElementId: () => ""
+  getTabStopElementId: () => "",
+  isInFlatTable: false
 });

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

@@ -43,6 +43,7 @@ export const FlatTable = ({
   const {
     isInSidebar
   } = useContext(DrawerSidebarContext);
+  const [hasOpenDatePicker, setHasOpenDatePicker] = useState(false);
   useLayoutEffect(() => {
     const findRow = (rows, isFirstCol) => rows.find((row, index) => {
       const cells = Array.from(row.querySelectorAll("td, th"));
@@ -101,6 +102,12 @@ export const FlatTable = ({
       return;
     }
     const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
+    if (hasOpenDatePicker && (hasStickyHead || hasStickyFooter)) {
+      if (Events.isPageUpKey(ev) || Events.isPageDownKey(ev) || Events.isHomeKey(ev) || Events.isEndKey(ev)) {
+        ev.preventDefault();
+      }
+      return;
+    }
     if (Events.isDownKey(ev)) {
       ev.preventDefault();
       if (currentFocusIndex !== -1 && currentFocusIndex < focusableElementsArray.length) {
@@ -183,7 +190,9 @@ export const FlatTable = ({
     value: {
       colorTheme,
       size,
-      getTabStopElementId
+      getTabStopElementId,
+      isInFlatTable: true,
+      setHasOpenDatePicker
     }
   }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter,

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, forwardRef, useImperativeHandle, useContext } from "react";
 import { flip, offset } from "@floating-ui/dom";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
@@ -8,6 +8,7 @@ import Button from "../button";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import useChildButtons from "../../hooks/__internal__/useChildButtons";
+import FlatTableContext from "../flat-table/__internal__/flat-table.context";
 export const MultiActionButton = /*#__PURE__*/forwardRef(({
   align = "left",
   position = "left",
@@ -24,6 +25,9 @@ export const MultiActionButton = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   const buttonRef = useRef(null);
+  const {
+    isInFlatTable
+  } = useContext(FlatTableContext);
   useImperativeHandle(ref, () => ({
     focusMainButton() {
       buttonRef.current?.focus();
@@ -58,6 +62,7 @@ export const MultiActionButton = /*#__PURE__*/forwardRef(({
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
+    disableBackgroundUI: isInFlatTable,
     disablePortal: true,
     placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
     reference: buttonNode,

package/esm/components/popover-container/popover-container.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef } from "react";
+import React, { useCallback, useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef, useContext } from "react";
 import { CSSTransition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
 import useMediaQuery from "../../hooks/useMediaQuery";
@@ -15,6 +15,7 @@ import ModalContext from "../modal/__internal__/modal.context";
 import useFocusPortalContent from "../../hooks/__internal__/useFocusPortalContent";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
+import FlatTableContext from "../flat-table/__internal__/flat-table.context";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -95,6 +96,9 @@ export const PopoverContainer = /*#__PURE__*/forwardRef(({
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
+  const {
+    isInFlatTable
+  } = useContext(FlatTableContext);
   const closePopover = useCallback(ev => {
     /* istanbul ignore else */
     if (!isControlled) setIsOpenInternal(false);
@@ -238,7 +242,8 @@ export const PopoverContainer = /*#__PURE__*/forwardRef(({
     placement: position === "right" ? "bottom-start" : "bottom-end",
     popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
     middleware: popoverMiddleware,
-    childRefOverride: popoverContentNodeRef
+    childRefOverride: popoverContentNodeRef,
+    disableBackgroundUI: isInFlatTable
   }, childrenToRender())));
 });
 export default PopoverContainer;

package/esm/components/split-button/split-button.component.js

@@ -15,6 +15,7 @@ import { baseTheme } from "../../style/themes";
 import useChildButtons from "../../hooks/__internal__/useChildButtons";
 import SplitButtonContext from "./__internal__/split-button.context";
 import useLocale from "../../hooks/__internal__/useLocale";
+import FlatTableContext from "../flat-table/__internal__/flat-table.context";
 const CONTENT_WIDTH_RATIO = 0.75;
 export const SplitButton = /*#__PURE__*/forwardRef(({
   align = "left",
@@ -38,6 +39,9 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
   const buttonLabelId = useRef(guid());
   const mainButtonRef = useRef(null);
   const toggleButtonRef = useRef(null);
+  const {
+    isInFlatTable
+  } = useContext(FlatTableContext);
   useImperativeHandle(ref, () => ({
     focusMainButton() {
       mainButtonRef.current?.focus();
@@ -124,6 +128,7 @@ export const SplitButton = /*#__PURE__*/forwardRef(({
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/React.createElement(Popover, {
+      disableBackgroundUI: isInFlatTable,
       disablePortal: true,
       placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
       popoverStrategy: "fixed",

package/lib/__internal__/utils/helpers/events/events.d.ts

@@ -71,6 +71,14 @@ declare const Events: {
      * Determines if the key pressed is the end key
      * */
     isEndKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the page up key
+     * */
+    isPageUpKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
+    /**
+     * Determines if the key pressed is the page down key
+     * */
+    isPageDownKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Gets the event's path which is an array of the objects on which listeners will be invoked.
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

package/lib/__internal__/utils/helpers/events/events.js

@@ -109,6 +109,18 @@ const Events = {
   isEndKey: ev => {
     return ev.key === "End";
   },
+  /**
+   * Determines if the key pressed is the page up key
+   * */
+  isPageUpKey: ev => {
+    return ev.key === "PageUp";
+  },
+  /**
+   * Determines if the key pressed is the page down key
+   * */
+  isPageDownKey: ev => {
+    return ev.key === "PageDown";
+  },
   /**
    * Gets the event's path which is an array of the objects on which listeners will be invoked.
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

package/lib/components/action-popover/action-popover.component.js

@@ -18,6 +18,7 @@ var _actionPopoverDivider = _interopRequireDefault(require("./action-popover-div
 var _actionPopover2 = _interopRequireDefault(require("./__internal__/action-popover.context"));
 var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
 var _actionPopoverUtils = require("./__internal__/action-popover-utils");
+var _flatTable = _interopRequireDefault(require("../flat-table/__internal__/flat-table.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -45,6 +46,9 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
   const [guid] = (0, _react.useState)((0, _guid.default)());
   const buttonRef = (0, _react.useRef)(null);
   const menu = (0, _react.useRef)(null);
+  const {
+    isInFlatTable
+  } = (0, _react.useContext)(_flatTable.default);
   const hasProperChildren = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(children).find(child => {
       if (! /*#__PURE__*/_react.default.isValidElement(child)) {
@@ -222,7 +226,8 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
     }
   }, isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: mappedPlacement,
-    reference: buttonRef
+    reference: buttonRef,
+    disableBackgroundUI: isInFlatTable
   }, /*#__PURE__*/_react.default.createElement(_actionPopoverMenu.default, _extends({
     "data-component": "action-popover",
     ref: menu

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -14,6 +14,7 @@ var _weekday = _interopRequireDefault(require("../weekday"));
 var _utils = require("../utils");
 var _focusTrapUtils = require("../../../../__internal__/focus-trap/focus-trap-utils");
 var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
+var _flatTable = _interopRequireDefault(require("../../../flat-table/__internal__/flat-table.context"));
 var _dayPicker = _interopRequireDefault(require("./day-picker.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -109,6 +110,13 @@ const DatePicker = ({
       }
     }, 0);
   };
+  const {
+    isInFlatTable,
+    setHasOpenDatePicker
+  } = (0, _react.useContext)(_flatTable.default);
+  (0, _react.useEffect)(() => {
+    setHasOpenDatePicker?.(!!open);
+  }, [open, setHasOpenDatePicker]);
   (0, _react.useEffect)(() => {
     if (selectedDays) {
       setFocusedMonth(selectedDays);
@@ -131,7 +139,8 @@ const DatePicker = ({
     placement: "bottom-start",
     reference: inputElement,
     middleware: popoverMiddleware,
-    disablePortal: disablePortal
+    disablePortal: disablePortal,
+    disableBackgroundUI: isInFlatTable
   }, /*#__PURE__*/_react.default.createElement(_dayPicker.default, {
     id: "styled-day-picker",
     "data-role": "date-picker",

package/lib/components/flat-table/__internal__/flat-table.context.d.ts

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { FlatTableProps } from "../flat-table.component";
 export interface FlatTableContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
     getTabStopElementId: () => string;
+    isInFlatTable?: boolean;
+    setHasOpenDatePicker?: Dispatch<SetStateAction<boolean>>;
 }
 declare const _default: React.Context<FlatTableContextProps>;
 export default _default;

package/lib/components/flat-table/__internal__/flat-table.context.js

@@ -7,5 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = /*#__PURE__*/_react.default.createContext({
-  getTabStopElementId: () => ""
+  getTabStopElementId: () => "",
+  isInFlatTable: false
 });

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

@@ -52,6 +52,7 @@ const FlatTable = ({
   const {
     isInSidebar
   } = (0, _react.useContext)(_drawerSidebar.default);
+  const [hasOpenDatePicker, setHasOpenDatePicker] = (0, _react.useState)(false);
   (0, _react.useLayoutEffect)(() => {
     const findRow = (rows, isFirstCol) => rows.find((row, index) => {
       const cells = Array.from(row.querySelectorAll("td, th"));
@@ -110,6 +111,12 @@ const FlatTable = ({
       return;
     }
     const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
+    if (hasOpenDatePicker && (hasStickyHead || hasStickyFooter)) {
+      if (_events.default.isPageUpKey(ev) || _events.default.isPageDownKey(ev) || _events.default.isHomeKey(ev) || _events.default.isEndKey(ev)) {
+        ev.preventDefault();
+      }
+      return;
+    }
     if (_events.default.isDownKey(ev)) {
       ev.preventDefault();
       if (currentFocusIndex !== -1 && currentFocusIndex < focusableElementsArray.length) {
@@ -192,7 +199,9 @@ const FlatTable = ({
     value: {
       colorTheme,
       size,
-      getTabStopElementId
+      getTabStopElementId,
+      isInFlatTable: true,
+      setHasOpenDatePicker
     }
   }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter,

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -13,6 +13,7 @@ var _button = _interopRequireDefault(require("../button"));
 var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 var _utils = require("../../style/utils");
 var _useChildButtons = _interopRequireDefault(require("../../hooks/__internal__/useChildButtons"));
+var _flatTable = _interopRequireDefault(require("../flat-table/__internal__/flat-table.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,6 +34,9 @@ const MultiActionButton = exports.MultiActionButton = /*#__PURE__*/(0, _react.fo
   ...rest
 }, ref) => {
   const buttonRef = (0, _react.useRef)(null);
+  const {
+    isInFlatTable
+  } = (0, _react.useContext)(_flatTable.default);
   (0, _react.useImperativeHandle)(ref, () => ({
     focusMainButton() {
       buttonRef.current?.focus();
@@ -67,6 +71,7 @@ const MultiActionButton = exports.MultiActionButton = /*#__PURE__*/(0, _react.fo
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/_react.default.createElement(_popover.default, {
+    disableBackgroundUI: isInFlatTable,
     disablePortal: true,
     placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
     reference: buttonNode,

package/lib/components/popover-container/popover-container.component.js

@@ -20,6 +20,7 @@ var _modal = _interopRequireDefault(require("../modal/__internal__/modal.context
 var _useFocusPortalContent = _interopRequireDefault(require("../../hooks/__internal__/useFocusPortalContent"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+var _flatTable = _interopRequireDefault(require("../flat-table/__internal__/flat-table.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -106,6 +107,9 @@ const PopoverContainer = exports.PopoverContainer = /*#__PURE__*/(0, _react.forw
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
+  const {
+    isInFlatTable
+  } = (0, _react.useContext)(_flatTable.default);
   const closePopover = (0, _react.useCallback)(ev => {
     /* istanbul ignore else */
     if (!isControlled) setIsOpenInternal(false);
@@ -249,7 +253,8 @@ const PopoverContainer = exports.PopoverContainer = /*#__PURE__*/(0, _react.forw
     placement: position === "right" ? "bottom-start" : "bottom-end",
     popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
     middleware: popoverMiddleware,
-    childRefOverride: popoverContentNodeRef
+    childRefOverride: popoverContentNodeRef,
+    disableBackgroundUI: isInFlatTable
   }, childrenToRender())));
 });
 var _default = exports.default = PopoverContainer;

package/lib/components/split-button/split-button.component.js

@@ -20,6 +20,7 @@ var _themes = require("../../style/themes");
 var _useChildButtons = _interopRequireDefault(require("../../hooks/__internal__/useChildButtons"));
 var _splitButton2 = _interopRequireDefault(require("./__internal__/split-button.context"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _flatTable = _interopRequireDefault(require("../flat-table/__internal__/flat-table.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -47,6 +48,9 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
   const mainButtonRef = (0, _react.useRef)(null);
   const toggleButtonRef = (0, _react.useRef)(null);
+  const {
+    isInFlatTable
+  } = (0, _react.useContext)(_flatTable.default);
   (0, _react.useImperativeHandle)(ref, () => ({
     focusMainButton() {
       mainButtonRef.current?.focus();
@@ -133,6 +137,7 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/_react.default.createElement(_popover.default, {
+      disableBackgroundUI: isInFlatTable,
       disablePortal: true,
       placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
       popoverStrategy: "fixed",

package/package.json

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