carbon-react 151.2.3 → 151.4.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/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/esm/components/adaptive-sidebar/__internal__/utils.js

@@ -0,0 +1,23 @@
+export 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)"
+      };
+  }
+};
+export const kebabToCamelCase = str => {
+  return str.replace(/-./g, match => match.charAt(1).toUpperCase());
+};

package/esm/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/esm/components/adaptive-sidebar/adaptive-sidebar.component.js

@@ -0,0 +1,56 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useEffect, useRef } from "react";
+import { getColors, kebabToCamelCase } from "./__internal__/utils";
+import Box from "../box";
+import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
+import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+import { StyledAdaptiveSidebar, StyledSidebar } from "./adaptive-sidebar.style";
+export const AdaptiveSidebar = ({
+  adaptiveBreakpoint = 768,
+  backgroundColor = "white",
+  borderColor = "none",
+  children,
+  height = "100%",
+  open,
+  renderAsModal = false,
+  width = "320px",
+  ...props
+}) => {
+  const largeScreen = useIsAboveBreakpoint(adaptiveBreakpoint);
+  const adaptiveSidebarRef = useRef(null);
+  const colours = Object.entries(getColors(backgroundColor)).reduce((acc, [key, value]) => {
+    acc[kebabToCamelCase(key)] = value;
+    return acc;
+  }, {});
+  useEffect(() => {
+    /* istanbul ignore next */
+    if (adaptiveSidebarRef.current) {
+      adaptiveSidebarRef.current.focus();
+    }
+  }, [open]);
+  if (renderAsModal || !largeScreen) {
+    return /*#__PURE__*/React.createElement(StyledSidebar, {
+      backgroundColor: backgroundColor,
+      open: open,
+      p: 0,
+      ref: adaptiveSidebarRef
+    }, /*#__PURE__*/React.createElement(Box, _extends({
+      height: "100%",
+      "data-role": "adaptive-sidebar-content-wrapper"
+    }, colours), children));
+  }
+  return open ? /*#__PURE__*/React.createElement(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
+  }, filterStyledSystemMarginProps(props), filterStyledSystemPaddingProps(props)), /*#__PURE__*/React.createElement(Box, {
+    "data-role": "adaptive-sidebar-content-wrapper"
+  }, children)) : null;
+};
+export default AdaptiveSidebar;

package/esm/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/esm/components/adaptive-sidebar/adaptive-sidebar.style.js

@@ -0,0 +1,35 @@
+import styled, { css } from "styled-components";
+import { margin, padding } from "styled-system";
+import Box from "../box";
+import Sidebar from "../sidebar";
+import { getColors } from "./__internal__/utils";
+const StyledAdaptiveSidebar = styled(Box)`
+  ${({
+  backgroundColor,
+  borderColor,
+  height,
+  width
+}) => css`
+    ${getColors(backgroundColor)}
+    ${borderColor && css`
+      border-left: 1px solid var(${borderColor});
+    `}
+    max-height: ${height};
+    max-width: ${width};
+    min-width: ${width};
+    overflow-y: auto;
+
+    ${margin}
+    ${padding}
+  `};
+`;
+const StyledSidebar = styled(Sidebar)`
+  ${({
+  backgroundColor
+}) => css`
+    div[data-element="sidebar-content"] {
+      ${getColors(backgroundColor)}
+    }
+  `}
+`;
+export { StyledAdaptiveSidebar, StyledSidebar };

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

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

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

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

package/esm/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/esm/components/box/box.component.js

@@ -5,6 +5,7 @@ import StyledBox from "./box.style";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 export const Box = /*#__PURE__*/React.forwardRef(({
   "data-component": dataComponent,
+  tabIndex,
   as,
   id,
   role,
@@ -63,7 +64,8 @@ export const Box = /*#__PURE__*/React.forwardRef(({
     borderRadius: borderRadius,
     "aria-hidden": ariaHidden
   }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest), filterStyledSystemFlexboxProps(rest), filterStyledSystemGridProps(rest), filterStyledSystemLayoutProps(rest), {
-    cssProps: cssProps
+    cssProps: cssProps,
+    tabIndex: tabIndex
   }), children);
 });
 Box.displayName = "Box";

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/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/esm/components/sidebar/sidebar.component.js

@@ -38,6 +38,7 @@ export const Sidebar = /*#__PURE__*/React.forwardRef(({
   headerPadding = {},
   topModalOverride,
   restoreFocusOnClose = true,
+  className,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -75,7 +76,8 @@ export const Sidebar = /*#__PURE__*/React.forwardRef(({
     size: size,
     onCancel: onCancel,
     role: role,
-    width: width
+    width: width,
+    className: className
   }, header && /*#__PURE__*/React.createElement(SidebarHeader, _extends({
     closeIcon: closeIcon()
   }, headerPadding, {

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;