carbon-react 151.2.2 → 151.3.0

package/esm/__internal__/dom/globals.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Returns the global `window` object in a way that is friendly to SSR.
+ * This check can be avoided if you are sure that the code will only run in the browser.
+ * Some examples where you can ignore this:
+ * - `useEffect` hooks
+ * - `useLayoutEffect` hooks
+ * - Callbacks for event listeners
+ * - Files with the `"use-client"` directive
+ *
+ * Primarily, this is necessary when attempting to access the `window` object during rendering of components.
+ * However, even still, where possible, it is recommended to avoid accessing the `window` object during rendering
+ * because it can lead to hydration mismatches. This happens when the server-rendered HTML differs from what the
+ * client renders due to missing environment-specific data (e.g., `window.innerWidth` being undefined on the server).
+ *
+ * @returns The global `window` object, if it exists.
+ */
+export declare function getWindow(): (Window & typeof globalThis) | undefined;
+/**
+ * Returns the global `document` object in a way that is friendly to SSR.
+ * This check can be avoided if you are sure that the code will only run in the browser.
+ * Some examples where you can ignore this:
+ * - `useEffect` hooks
+ * - `useLayoutEffect` hooks
+ * - Callbacks for event listeners
+ * - Files with the `"use-client"` directive
+ *
+ * Primarily, this is necessary when attempting to access the `document` object during rendering of components.
+ * However, even still, where possible, it is recommended to avoid accessing the `document` object during rendering
+ * because it can lead to hydration mismatches. This happens when the server-rendered HTML differs from what the
+ * client renders due to missing environment-specific data (e.g., `document.children` being undefined on the server).
+ *
+ * @returns The global `document` object, if it exists.
+ */
+export declare function getDocument(): Document | undefined;
+/**
+ * Returns the global `navigator` object in a way that is friendly to SSR.
+ * This check can be avoided if you are sure that the code will only run in the browser.
+ * Some examples where you can ignore this:
+ * - `useEffect` hooks
+ * - `useLayoutEffect` hooks
+ * - Callbacks for event listeners
+ * - Files with the `"use-client"` directive
+ *
+ * Primarily, this is necessary when attempting to access the `navigator` object during rendering of components.
+ * However, even still, where possible, it is recommended to avoid accessing the `navigator` object during rendering
+ * because it can lead to hydration mismatches. This happens when the server-rendered HTML differs from what the
+ * client renders due to missing environment-specific data (e.g., `navigator.userAgent` being undefined on the server).
+ *
+ * @returns The global `navigator` object, if it exists.
+ */
+export declare function getNavigator(): Navigator | undefined;

package/esm/__internal__/dom/globals.js

@@ -0,0 +1,59 @@
+/**
+ * Returns the global `window` object in a way that is friendly to SSR.
+ * This check can be avoided if you are sure that the code will only run in the browser.
+ * Some examples where you can ignore this:
+ * - `useEffect` hooks
+ * - `useLayoutEffect` hooks
+ * - Callbacks for event listeners
+ * - Files with the `"use-client"` directive
+ *
+ * Primarily, this is necessary when attempting to access the `window` object during rendering of components.
+ * However, even still, where possible, it is recommended to avoid accessing the `window` object during rendering
+ * because it can lead to hydration mismatches. This happens when the server-rendered HTML differs from what the
+ * client renders due to missing environment-specific data (e.g., `window.innerWidth` being undefined on the server).
+ *
+ * @returns The global `window` object, if it exists.
+ */
+export function getWindow() {
+  return typeof window !== "undefined" ? window : undefined;
+}
+
+/**
+ * Returns the global `document` object in a way that is friendly to SSR.
+ * This check can be avoided if you are sure that the code will only run in the browser.
+ * Some examples where you can ignore this:
+ * - `useEffect` hooks
+ * - `useLayoutEffect` hooks
+ * - Callbacks for event listeners
+ * - Files with the `"use-client"` directive
+ *
+ * Primarily, this is necessary when attempting to access the `document` object during rendering of components.
+ * However, even still, where possible, it is recommended to avoid accessing the `document` object during rendering
+ * because it can lead to hydration mismatches. This happens when the server-rendered HTML differs from what the
+ * client renders due to missing environment-specific data (e.g., `document.children` being undefined on the server).
+ *
+ * @returns The global `document` object, if it exists.
+ */
+export function getDocument() {
+  return typeof document !== "undefined" ? document : undefined;
+}
+
+/**
+ * Returns the global `navigator` object in a way that is friendly to SSR.
+ * This check can be avoided if you are sure that the code will only run in the browser.
+ * Some examples where you can ignore this:
+ * - `useEffect` hooks
+ * - `useLayoutEffect` hooks
+ * - Callbacks for event listeners
+ * - Files with the `"use-client"` directive
+ *
+ * Primarily, this is necessary when attempting to access the `navigator` object during rendering of components.
+ * However, even still, where possible, it is recommended to avoid accessing the `navigator` object during rendering
+ * because it can lead to hydration mismatches. This happens when the server-rendered HTML differs from what the
+ * client renders due to missing environment-specific data (e.g., `navigator.userAgent` being undefined on the server).
+ *
+ * @returns The global `navigator` object, if it exists.
+ */
+export function getNavigator() {
+  return typeof navigator !== "undefined" ? navigator : undefined;
+}

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/__spec_helper__/mock-element-scrollto.js

@@ -1,6 +1,9 @@
 const setupScrollToMock = () => {
   // need to mock the `scrollTo` method, which is undefined in JSDOM. As we're not actually testing this behaviour, just make it
   // do nothing.
+  if (typeof window === "undefined") {
+    return;
+  }
   HTMLElement.prototype.scrollTo = () => {};
 };
 export default setupScrollToMock;

package/esm/__spec_helper__/mock-match-media.js

@@ -2,7 +2,7 @@ let mocked = false;
 let _matches = false;
 const removeEventListener = jest.fn();
 export const setupMatchMediaMock = () => {
-  if (!global.window) {
+  if (typeof window === "undefined") {
     return;
   }
   const noop = () => {};

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

@@ -1,5 +1,5 @@
 const setupResizeObserverMock = () => {
-  if (!window) {
+  if (typeof window === "undefined") {
     return;
   }
   window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(callback => {

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-row/flat-table-row.style.js

@@ -7,6 +7,7 @@ import StyledFlatTableHeader from "../flat-table-header/flat-table-header.style"
 import StyledIcon from "../../icon/icon.style";
 import { toColor } from "../../../style/utils/color";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
+import { getNavigator } from "../../../__internal__/dom/globals";
 import { isSafari } from "../../../__internal__/utils/helpers/browser-type-check";
 const horizontalBorderSizes = {
   medium: "2px",
@@ -101,6 +102,7 @@ const StyledFlatTableRow = styled.tr`
   draggable,
   rowHeight
 }) => {
+  const nav = getNavigator();
   const backgroundColor = bgColor ? toColor(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? toColor(theme, horizontalBorderColor) : undefined;
   const colorOfSelected = isInSidebar ? "var(--colorsUtilityMajor150)" : "var(--colorsUtilityMajor075)";
@@ -209,7 +211,8 @@ const StyledFlatTableRow = styled.tr`
           }
 
           /* Styling for safari. Position relative does not work on tr elements on Safari  */
-          ${isSafari(navigator) && css`
+          // FIXME: this can cause hydration mismatches during SSR.
+          ${nav && isSafari(nav) && css`
             position: -webkit-sticky;
             :after {
               border: none;

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/icon/icon.style.js

@@ -5,6 +5,7 @@ import baseTheme from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 import styledColor from "../../style/utils/color";
 import getColorValue from "../../style/utils/get-color-value";
+import { getNavigator, getWindow } from "../../__internal__/dom/globals";
 import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
 import iconConfig from "./icon-config";
 import iconUnicodes from "./icon-unicodes";
@@ -48,6 +49,8 @@ const StyledIcon = styled.span`
   let finalHoverColor;
   let bgColor;
   let bgHoverColor;
+  const win = getWindow();
+  const nav = getNavigator();
   const adjustedBgSize = adjustIconBgSize(fontSize, bgSize);
   try {
     if (disabled) {
@@ -116,12 +119,11 @@ const StyledIcon = styled.span`
           font-size: ${iconConfig.iconSize[fontSize]};
           line-height: ${iconConfig.iconSize[fontSize]};
         `}
-
-        ${type === "services" && browserTypeCheck(window) && css`
+        // FIXME: this can cause hydration mismatches during SSR.
+        ${win && type === "services" && browserTypeCheck(win) && css`
           margin-top: ${fontSize === "small" ? "-7px" : "-8px"};
         `}
-
-        ${type === "services" && isSafari(navigator) && !browserTypeCheck(window) && css`
+        ${nav && win && type === "services" && isSafari(nav) && !browserTypeCheck(win) && css`
           margin-top: -6px;
         `}
 

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -10,6 +10,7 @@ import Icon from "../../icon";
 import Portal from "../../portal";
 import FocusTrap from "../../../__internal__/focus-trap";
 import MenuDivider from "../menu-divider/menu-divider.component";
+import { getDocument } from "../../../__internal__/dom/globals";
 import useLocale from "../../../hooks/__internal__/useLocale";
 import useModalAria from "../../../hooks/__internal__/useModalAria";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
@@ -54,7 +55,7 @@ export const MenuFullscreen = ({
     closeModal,
     modalRef: menuRef,
     topModalOverride,
-    focusCallToActionElement: document.activeElement
+    focusCallToActionElement: getDocument()?.activeElement
   });
   return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
     nodeRef: menuRef,

package/esm/components/modal/__internal__/modal-manager.js

@@ -4,6 +4,7 @@ function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r),
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { getWindow } from "../../../__internal__/dom/globals";
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);
@@ -27,12 +28,17 @@ let ModalManagerInstance = /*#__PURE__*/function () {
       });
       this.callTopModalSetters();
     });
+    const safeWindow = getWindow();
+    if (!safeWindow) {
+      this.modalList = [];
+      return;
+    }
     // Due to possibility of multiple carbon versions using it
     // it is necessary to maintain same structure in this global variable
-    if (!window.__CARBON_INTERNALS_MODAL_LIST) {
-      window.__CARBON_INTERNALS_MODAL_LIST = [];
+    if (!safeWindow.__CARBON_INTERNALS_MODAL_LIST) {
+      safeWindow.__CARBON_INTERNALS_MODAL_LIST = [];
     }
-    this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
+    this.modalList = safeWindow.__CARBON_INTERNALS_MODAL_LIST;
   }
   return _createClass(ModalManagerInstance, [{
     key: "getTopModal",
@@ -78,16 +84,21 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   }, {
     key: "clearList",
     value: function clearList() {
-      window.__CARBON_INTERNALS_MODAL_LIST = [];
-      this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
+      const safeWindow = getWindow();
+      const cleared = [];
+      if (safeWindow) {
+        safeWindow.__CARBON_INTERNALS_MODAL_LIST = cleared;
+      }
+      this.modalList = cleared;
       this.callTopModalSetters();
     }
   }, {
     key: "callTopModalSetters",
     value: function callTopModalSetters() {
-      if (window.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
+      const safeWindow = getWindow();
+      if (safeWindow?.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
         const topModal = this.getTopModal()?.modal || null;
-        for (const setTopModal of window.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
+        for (const setTopModal of safeWindow.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
           setTopModal(topModal);
         }
       }

package/esm/components/modal/modal.component.js

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useCallback, useState } from "react";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import useScrollBlock from "../../hooks/__internal__/useScrollBlock";
 import Portal from "../portal";
+import { getDocument } from "../../__internal__/dom/globals";
 import Events from "../../__internal__/utils/helpers/events";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import { StyledModal, StyledModalBackground } from "./modal.style";
@@ -53,13 +54,14 @@ const Modal = ({
       onCancel(ev);
     }
   }, [disableClose, disableEscKey, onCancel]);
+  const safeDocument = getDocument();
   useModalManager({
     open,
     closeModal,
     modalRef: ref,
     setTriggerRefocusFlag,
     topModalOverride,
-    focusCallToActionElement: restoreFocusOnClose ? document.activeElement : undefined
+    focusCallToActionElement: restoreFocusOnClose && safeDocument ? safeDocument.activeElement : undefined
   });
   let background;
   let content;

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/esm/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -9,6 +9,7 @@ import Icon from "../../icon";
 import Box from "../../box";
 import { StyledList, StyledVerticalMenuFullScreen } from "../vertical-menu.style";
 import VerticalMenuFullScreenContext from "./__internal__/vertical-menu-full-screen.context";
+import { getDocument } from "../../../__internal__/dom/globals";
 import Events from "../../../__internal__/utils/helpers/events/events";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
 export const VerticalMenuFullScreen = ({
@@ -27,12 +28,13 @@ export const VerticalMenuFullScreen = ({
       onClose(ev);
     }
   }, [onClose]);
+  const safeDocument = getDocument();
   useModalManager({
     open: isOpen,
     closeModal: handleKeyDown,
     modalRef: menuWrapperRef,
     topModalOverride: true,
-    focusCallToActionElement: document.activeElement
+    focusCallToActionElement: safeDocument?.activeElement
   });
 
   // TODO remove this as part of FE-5650

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -6,24 +6,31 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // TODO: This component can be refactored to remove redundant code
 // once we can confirm that all Sage products use version 105.0.0^
+import { getWindow } from "../../../__internal__/dom/globals";
 let ScrollBlockManager = /*#__PURE__*/function () {
   function ScrollBlockManager() {
     _classCallCheck(this, ScrollBlockManager);
     _defineProperty(this, "components", void 0);
     _defineProperty(this, "originalValues", void 0);
+    const safeWindow = getWindow();
+    if (!safeWindow) {
+      this.components = {};
+      this.originalValues = [];
+      return;
+    }
     // Due to possibility of multiple carbon versions using it
     // it is necessary to maintain same structure in this global variable
-    if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
-      window.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
+    if (!safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
+      safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
         components: {},
         // originalValues can be removed
         originalValues: [],
         restoreValues: null
       };
     }
-    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
+    this.components = safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
     // TODO: originalValues can be removed
-    this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
+    this.originalValues = safeWindow.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
   }
   return _createClass(ScrollBlockManager, [{
     key: "registerComponent",