carbon-react 151.2.3 → 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/__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/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/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/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",

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/__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/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/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/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.3",
+  "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",