carbon-react 151.2.3 → 151.4.0

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/adaptive-sidebar/__internal__/utils.d.ts

@@ -0,0 +1,6 @@
+import { AdaptiveSidebarProps } from "../adaptive-sidebar.component";
+export declare const getColors: (backgroundColor: AdaptiveSidebarProps["backgroundColor"]) => {
+    "background-color": string;
+    color: string;
+};
+export declare const kebabToCamelCase: (str: string) => string;

package/lib/components/adaptive-sidebar/__internal__/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.kebabToCamelCase = exports.getColors = void 0;
+const getColors = backgroundColor => {
+  switch (backgroundColor) {
+    case "app":
+      return {
+        "background-color": "var(--colorsUtilityMajor025)",
+        color: "var(--colorsUtilityYin090)"
+      };
+    case "black":
+      return {
+        "background-color": "var(--colorsUtilityYin100)",
+        color: "var(--colorsUtilityYang100)"
+      };
+    case "white":
+    default:
+      return {
+        "background-color": "var(--colorsUtilityYang100)",
+        color: "var(--colorsUtilityYin090)"
+      };
+  }
+};
+exports.getColors = getColors;
+const kebabToCamelCase = str => {
+  return str.replace(/-./g, match => match.charAt(1).toUpperCase());
+};
+exports.kebabToCamelCase = kebabToCamelCase;

package/lib/components/adaptive-sidebar/adaptive-sidebar.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { PaddingProps, MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface AdaptiveSidebarProps extends MarginProps, PaddingProps, Omit<TagProps, "data-component"> {
+    /** The breakpoint (in pixels) at which the sidebar will convert to a dialog-based sidebar */
+    adaptiveBreakpoint?: number;
+    /** The time in milliseconds for the sidebar to animate */
+    animationTimeout?: number;
+    /** The background color of the sidebar */
+    backgroundColor?: "white" | "black" | "app";
+    /** The color to use for the left-hand border of the sidebar. Should be a design token e.g. `--colorsUtilityYang100` */
+    borderColor?: string | "none";
+    /** The content of the sidebar */
+    children?: React.ReactNode;
+    /** The height of the sidebar, relative to the wrapping component */
+    height?: string;
+    /** Whether the sidebar is open or closed */
+    open: boolean;
+    /** Whether to render the sidebar as a modal component instead of as an inline sidebar */
+    renderAsModal?: boolean;
+    /** The width of the sidebar */
+    width?: string;
+}
+export declare const AdaptiveSidebar: ({ adaptiveBreakpoint, backgroundColor, borderColor, children, height, open, renderAsModal, width, ...props }: AdaptiveSidebarProps) => React.JSX.Element | null;
+export default AdaptiveSidebar;

package/lib/components/adaptive-sidebar/adaptive-sidebar.component.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AdaptiveSidebar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("./__internal__/utils");
+var _box = _interopRequireDefault(require("../box"));
+var _utils2 = require("../../style/utils");
+var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
+var _adaptiveSidebar = require("./adaptive-sidebar.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); }
+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; }
+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); }
+const AdaptiveSidebar = ({
+  adaptiveBreakpoint = 768,
+  backgroundColor = "white",
+  borderColor = "none",
+  children,
+  height = "100%",
+  open,
+  renderAsModal = false,
+  width = "320px",
+  ...props
+}) => {
+  const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveBreakpoint);
+  const adaptiveSidebarRef = (0, _react.useRef)(null);
+  const colours = Object.entries((0, _utils.getColors)(backgroundColor)).reduce((acc, [key, value]) => {
+    acc[(0, _utils.kebabToCamelCase)(key)] = value;
+    return acc;
+  }, {});
+  (0, _react.useEffect)(() => {
+    /* istanbul ignore next */
+    if (adaptiveSidebarRef.current) {
+      adaptiveSidebarRef.current.focus();
+    }
+  }, [open]);
+  if (renderAsModal || !largeScreen) {
+    return /*#__PURE__*/_react.default.createElement(_adaptiveSidebar.StyledSidebar, {
+      backgroundColor: backgroundColor,
+      open: open,
+      p: 0,
+      ref: adaptiveSidebarRef
+    }, /*#__PURE__*/_react.default.createElement(_box.default, _extends({
+      height: "100%",
+      "data-role": "adaptive-sidebar-content-wrapper"
+    }, colours), children));
+  }
+  return open ? /*#__PURE__*/_react.default.createElement(_adaptiveSidebar.StyledAdaptiveSidebar, _extends({
+    backgroundColor: backgroundColor,
+    borderColor: borderColor === "none" ? undefined : borderColor,
+    "data-element": "adaptive-sidebar",
+    "data-role": "adaptive-sidebar",
+    height: height,
+    ref: adaptiveSidebarRef,
+    role: "region",
+    tabIndex: -1,
+    width: width
+  }, (0, _utils2.filterStyledSystemMarginProps)(props), (0, _utils2.filterStyledSystemPaddingProps)(props)), /*#__PURE__*/_react.default.createElement(_box.default, {
+    "data-role": "adaptive-sidebar-content-wrapper"
+  }, children)) : null;
+};
+exports.AdaptiveSidebar = AdaptiveSidebar;
+var _default = exports.default = AdaptiveSidebar;

package/lib/components/adaptive-sidebar/adaptive-sidebar.style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { MarginProps, PaddingProps } from "styled-system";
+import { SidebarProps } from "../sidebar";
+import { AdaptiveSidebarProps } from "./adaptive-sidebar.component";
+declare const StyledAdaptiveSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, Pick<AdaptiveSidebarProps, "width" | "backgroundColor" | "height" | "borderColor"> & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    tabIndex: number;
+}, never>;
+interface StyledSidebarProps extends SidebarProps {
+    backgroundColor: "app" | "black" | "white";
+}
+declare const StyledSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledSidebarProps, never>;
+export { StyledAdaptiveSidebar, StyledSidebar };

package/lib/components/adaptive-sidebar/adaptive-sidebar.style.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSidebar = exports.StyledAdaptiveSidebar = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _box = _interopRequireDefault(require("../box"));
+var _sidebar = _interopRequireDefault(require("../sidebar"));
+var _utils = require("./__internal__/utils");
+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; }
+const StyledAdaptiveSidebar = exports.StyledAdaptiveSidebar = (0, _styledComponents.default)(_box.default)`
+  ${({
+  backgroundColor,
+  borderColor,
+  height,
+  width
+}) => (0, _styledComponents.css)`
+    ${(0, _utils.getColors)(backgroundColor)}
+    ${borderColor && (0, _styledComponents.css)`
+      border-left: 1px solid var(${borderColor});
+    `}
+    max-height: ${height};
+    max-width: ${width};
+    min-width: ${width};
+    overflow-y: auto;
+
+    ${_styledSystem.margin}
+    ${_styledSystem.padding}
+  `};
+`;
+const StyledSidebar = exports.StyledSidebar = (0, _styledComponents.default)(_sidebar.default)`
+  ${({
+  backgroundColor
+}) => (0, _styledComponents.css)`
+    div[data-element="sidebar-content"] {
+      ${(0, _utils.getColors)(backgroundColor)}
+    }
+  `}
+`;

package/lib/components/adaptive-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./adaptive-sidebar.component";
+export type { AdaptiveSidebarProps } from "./adaptive-sidebar.component";

package/lib/components/adaptive-sidebar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _adaptiveSidebar.default;
+  }
+});
+var _adaptiveSidebar = _interopRequireDefault(require("./adaptive-sidebar.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/adaptive-sidebar/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/adaptive-sidebar/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/box/box.component.d.ts

@@ -51,6 +51,8 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     "aria-hidden"?: "true" | "false";
     /** @private @internal @ignore */
     "data-component"?: string;
+    /** @private @internal @ignore */
+    tabIndex?: number;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/lib/components/box/box.component.js

@@ -12,6 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 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); }
 const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
+  tabIndex,
   as,
   id,
   role,
@@ -70,7 +71,8 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
     borderRadius: borderRadius,
     "aria-hidden": ariaHidden
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest), (0, _utils.filterStyledSystemFlexboxProps)(rest), (0, _utils.filterStyledSystemGridProps)(rest), (0, _utils.filterStyledSystemLayoutProps)(rest), {
-    cssProps: cssProps
+    cssProps: cssProps,
+    tabIndex: tabIndex
   }), children);
 });
 Box.displayName = "Box";

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/sidebar/sidebar.component.d.ts

@@ -52,6 +52,12 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<M
     focusableSelectors?: string;
     /** Padding to be set on the Sidebar header */
     headerPadding?: PaddingProps;
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

package/lib/components/sidebar/sidebar.component.js

@@ -46,6 +46,7 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   headerPadding = {},
   topModalOverride,
   restoreFocusOnClose = true,
+  className,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -83,7 +84,8 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     size: size,
     onCancel: onCancel,
     role: role,
-    width: width
+    width: width,
+    className: className
   }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
     closeIcon: closeIcon()
   }, headerPadding, {

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.4.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",
@@ -147,8 +148,10 @@
     "jsdom-testing-mocks": "^1.11.0",
     "lint-staged": "^11.2.6",
     "mockdate": "^2.0.5",
+    "monocart-coverage-reports": "^2.12.2",
     "nock": "^13.3.8",
     "node-fetch": "^3.3.2",
+    "nyc": "^17.1.0",
     "prettier": "~3.3.3",
     "raf": "^3.4.1",
     "react": "^18.3.1",
@@ -184,8 +187,6 @@
     "invariant": "^2.2.4",
     "lexical": "^0.21.0",
     "lodash": "^4.17.21",
-    "monocart-coverage-reports": "^2.11.4",
-    "nyc": "^17.1.0",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react-day-picker": "^9.3.2",