carbon-react 151.2.2 → 151.3.0

package/lib/__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/lib/__internal__/dom/globals.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDocument = getDocument;
+exports.getNavigator = getNavigator;
+exports.getWindow = getWindow;
+/**
+ * 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.
+ */
+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.
+ */
+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.
+ */
+function getNavigator() {
+  return typeof navigator !== "undefined" ? navigator : undefined;
+}

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

@@ -7,6 +7,9 @@ exports.default = void 0;
 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 = () => {};
 };
 var _default = exports.default = setupScrollToMock;

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

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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 const setupResizeObserverMock = () => {
-  if (!window) {
+  if (typeof window === "undefined") {
     return;
   }
   window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(callback => {

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

@@ -13,6 +13,7 @@ var _flatTableHeader = _interopRequireDefault(require("../flat-table-header/flat
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _color = require("../../../style/utils/color");
 var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
+var _globals = require("../../../__internal__/dom/globals");
 var _browserTypeCheck = require("../../../__internal__/utils/helpers/browser-type-check");
 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); }
@@ -110,6 +111,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
   draggable,
   rowHeight
 }) => {
+  const nav = (0, _globals.getNavigator)();
   const backgroundColor = bgColor ? (0, _color.toColor)(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? (0, _color.toColor)(theme, horizontalBorderColor) : undefined;
   const colorOfSelected = isInSidebar ? "var(--colorsUtilityMajor150)" : "var(--colorsUtilityMajor075)";
@@ -218,7 +220,8 @@ const StyledFlatTableRow = _styledComponents.default.tr`
           }
 
           /* Styling for safari. Position relative does not work on tr elements on Safari  */
-          ${(0, _browserTypeCheck.isSafari)(navigator) && (0, _styledComponents.css)`
+          // FIXME: this can cause hydration mismatches during SSR.
+          ${nav && (0, _browserTypeCheck.isSafari)(nav) && (0, _styledComponents.css)`
             position: -webkit-sticky;
             :after {
               border: none;

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

@@ -11,6 +11,7 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 var _getColorValue = _interopRequireDefault(require("../../style/utils/get-color-value"));
+var _globals = require("../../__internal__/dom/globals");
 var _browserTypeCheck = _interopRequireWildcard(require("../../__internal__/utils/helpers/browser-type-check"));
 var _iconConfig = _interopRequireDefault(require("./icon-config"));
 var _iconUnicodes = _interopRequireDefault(require("./icon-unicodes"));
@@ -57,6 +58,8 @@ const StyledIcon = _styledComponents.default.span`
   let finalHoverColor;
   let bgColor;
   let bgHoverColor;
+  const win = (0, _globals.getWindow)();
+  const nav = (0, _globals.getNavigator)();
   const adjustedBgSize = adjustIconBgSize(fontSize, bgSize);
   try {
     if (disabled) {
@@ -125,12 +128,11 @@ const StyledIcon = _styledComponents.default.span`
           font-size: ${_iconConfig.default.iconSize[fontSize]};
           line-height: ${_iconConfig.default.iconSize[fontSize]};
         `}
-
-        ${type === "services" && (0, _browserTypeCheck.default)(window) && (0, _styledComponents.css)`
+        // FIXME: this can cause hydration mismatches during SSR.
+        ${win && type === "services" && (0, _browserTypeCheck.default)(win) && (0, _styledComponents.css)`
           margin-top: ${fontSize === "small" ? "-7px" : "-8px"};
         `}
-
-        ${type === "services" && (0, _browserTypeCheck.isSafari)(navigator) && !(0, _browserTypeCheck.default)(window) && (0, _styledComponents.css)`
+        ${nav && win && type === "services" && (0, _browserTypeCheck.isSafari)(nav) && !(0, _browserTypeCheck.default)(win) && (0, _styledComponents.css)`
           margin-top: -6px;
         `}
 

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

@@ -16,6 +16,7 @@ var _icon = _interopRequireDefault(require("../../icon"));
 var _portal = _interopRequireDefault(require("../../portal"));
 var _focusTrap = _interopRequireDefault(require("../../../__internal__/focus-trap"));
 var _menuDivider = _interopRequireDefault(require("../menu-divider/menu-divider.component"));
+var _globals = require("../../../__internal__/dom/globals");
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 var _useModalAria = _interopRequireDefault(require("../../../hooks/__internal__/useModalAria"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
@@ -63,7 +64,7 @@ const MenuFullscreen = ({
     closeModal,
     modalRef: menuRef,
     topModalOverride,
-    focusCallToActionElement: document.activeElement
+    focusCallToActionElement: (0, _globals.getDocument)()?.activeElement
   });
   return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
     nodeRef: menuRef,

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ModalManagerInstance = void 0;
+var _globals = require("../../../__internal__/dom/globals");
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -33,12 +34,17 @@ let ModalManagerInstance = exports.ModalManagerInstance = /*#__PURE__*/function
       });
       this.callTopModalSetters();
     });
+    const safeWindow = (0, _globals.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",
@@ -84,16 +90,21 @@ let ModalManagerInstance = exports.ModalManagerInstance = /*#__PURE__*/function
   }, {
     key: "clearList",
     value: function clearList() {
-      window.__CARBON_INTERNALS_MODAL_LIST = [];
-      this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
+      const safeWindow = (0, _globals.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 = (0, _globals.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/lib/components/modal/modal.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactTransitionGroup = require("react-transition-group");
 var _useScrollBlock = _interopRequireDefault(require("../../hooks/__internal__/useScrollBlock"));
 var _portal = _interopRequireDefault(require("../portal"));
+var _globals = require("../../__internal__/dom/globals");
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
 var _modal = require("./modal.style");
@@ -62,13 +63,14 @@ const Modal = ({
       onCancel(ev);
     }
   }, [disableClose, disableEscKey, onCancel]);
+  const safeDocument = (0, _globals.getDocument)();
   (0, _useModalManager.default)({
     open,
     closeModal,
     modalRef: ref,
     setTriggerRefocusFlag,
     topModalOverride,
-    focusCallToActionElement: restoreFocusOnClose ? document.activeElement : undefined
+    focusCallToActionElement: restoreFocusOnClose && safeDocument ? safeDocument.activeElement : undefined
   });
   let background;
   let content;

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

@@ -14,6 +14,7 @@ var _icon = _interopRequireDefault(require("../../icon"));
 var _box = _interopRequireDefault(require("../../box"));
 var _verticalMenu = require("../vertical-menu.style");
 var _verticalMenuFullScreen = _interopRequireDefault(require("./__internal__/vertical-menu-full-screen.context"));
+var _globals = require("../../../__internal__/dom/globals");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/events"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -36,12 +37,13 @@ const VerticalMenuFullScreen = ({
       onClose(ev);
     }
   }, [onClose]);
+  const safeDocument = (0, _globals.getDocument)();
   (0, _useModalManager.default)({
     open: isOpen,
     closeModal: handleKeyDown,
     modalRef: menuWrapperRef,
     topModalOverride: true,
-    focusCallToActionElement: document.activeElement
+    focusCallToActionElement: safeDocument?.activeElement
   });
 
   // TODO remove this as part of FE-5650

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

@@ -4,32 +4,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _globals = require("../../../__internal__/dom/globals");
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 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); }
-// TODO: This component can be refactored to remove redundant code
+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^
 let ScrollBlockManager = /*#__PURE__*/function () {
   function ScrollBlockManager() {
     _classCallCheck(this, ScrollBlockManager);
     _defineProperty(this, "components", void 0);
     _defineProperty(this, "originalValues", void 0);
+    const safeWindow = (0, _globals.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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "151.2.2",
+  "version": "151.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -131,6 +131,7 @@
     "eslint-plugin-playwright": "^1.6.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-ssr-friendly": "^1.3.0",
     "eslint-plugin-testing-library": "^6.2.2",
     "events": "~1.1.1",
     "fast-glob": "^3.3.2",