carbon-react 128.2.0 → 128.3.0

package/esm/components/menu/menu-full-screen/menu-full-screen.component.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
-import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface MenuFullscreenProps extends TagProps {
+import type { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuFullscreenProps extends Omit<TagProps, "data-component"> {
+    /** Accessible name that conveys the purpose of the menu   */
+    "aria-label"?: string;
     /** The child elements to render */
     children?: React.ReactNode;
     /** Sets whether the component is open or closed */
@@ -8,7 +10,9 @@ export interface MenuFullscreenProps extends TagProps {
     /** The start position for the component to open from */
     startPosition?: "left" | "right";
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
-    onClose: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
+    /** Manually override the internal modal stacking order to set this as top */
+    topModalOverride?: boolean;
 }
-export declare const MenuFullscreen: ({ children, isOpen, startPosition, onClose, ...rest }: MenuFullscreenProps) => React.JSX.Element;
+export declare const MenuFullscreen: ({ "aria-label": ariaLabel, "data-element": dataElement, "data-role": dataRole, children, isOpen, onClose, startPosition, topModalOverride, }: MenuFullscreenProps) => React.JSX.Element;
 export default MenuFullscreen;

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

@@ -1,48 +1,53 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useContext, useRef } from "react";
+import React, { useCallback, useContext, useRef } from "react";
 import PropTypes from "prop-types";
-import { StyledMenuFullscreen, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
+import { CSSTransition } from "react-transition-group";
+import { StyledMenuFullscreen, StyledMenuModal, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
 import { StyledMenuWrapper } from "../menu.style";
 import MenuContext from "../menu.context";
-import FocusTrap from "../../../__internal__/focus-trap";
 import Events from "../../../__internal__/utils/helpers/events";
 import Box from "../../box";
 import IconButton from "../../icon-button";
 import Icon from "../../icon";
 import Portal from "../../portal";
+import FocusTrap from "../../../__internal__/focus-trap";
 import MenuDivider from "../menu-divider/menu-divider.component";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
+import useLocale from "../../../hooks/__internal__/useLocale";
+import useModalAria from "../../../hooks/__internal__/useModalAria";
+import useModalManager from "../../../hooks/__internal__/useModalManager";
 export const MenuFullscreen = ({
+  "aria-label": ariaLabel = "Fullscreen menu",
+  "data-element": dataElement,
+  "data-role": dataRole,
   children,
-  isOpen,
-  startPosition = "left",
+  isOpen = false,
   onClose,
-  ...rest
+  startPosition = "left",
+  topModalOverride
 }) => {
-  const menuWrapperRef = useRef(null);
-  const menuContentRef = useRef(null);
+  const menuRef = useRef(null);
+  const modalRef = useRef(null);
+  const contentRef = useRef(null);
+  const isTopModal = useModalAria(modalRef);
   const {
     menuType
   } = useContext(MenuContext);
   const isDarkVariant = ["dark", "black"].includes(menuType);
-  const handleKeyDown = ev => {
-    /* istanbul ignore else */
-    if (Events.isEscKey(ev)) {
-      onClose(ev);
-    }
-    if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
-      const search = menuWrapperRef.current?.querySelector('[data-component="search"');
-      const searchInput = search?.querySelector("input");
-      const searchButton = search?.querySelector("button");
+  const transitionDuration = 200;
+  const locale = useLocale();
 
-      // if there is no value in the search input the button disappears when the input blurs
-      // this means we need to programatically set focus to the next menu item
-      if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
-        ev.preventDefault();
-        const elements = Array.from(menuWrapperRef.current?.querySelectorAll("a, input, button"));
-        const index = elements.indexOf(searchInput);
-        elements[index + 2]?.focus();
-      }
+  // TODO: Remove this temporary event handler as part of FE-6078
+  const handleFocusedSearchButton = ev => {
+    const search = modalRef.current?.querySelector('[data-component="search"]');
+    const searchInput = search?.querySelector("input");
+    const searchButton = search?.querySelector("button");
+
+    // if there is no value in the search input the button disappears when the input blurs
+    // this means we need to programmatically set focus to the next menu item
+    if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
+      ev.preventDefault();
+      const elements = Array.from(modalRef.current?.querySelectorAll("a, input, button"));
+      const index = elements.indexOf(searchInput);
+      elements[index + 2]?.focus();
     }
   };
   const flattenedChildren = React.Children.toArray(children);
@@ -52,23 +57,45 @@ export const MenuFullscreen = ({
     }
     return child;
   }));
-  return /*#__PURE__*/React.createElement("li", {
-    "aria-label": "menu-fullscreen"
-  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
-    wrapperRef: menuWrapperRef,
-    isOpen: isOpen
-  }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, _extends({
-    ref: menuWrapperRef,
-    isOpen: isOpen,
-    menuType: menuType,
+  const closeModal = useCallback(ev => {
+    if (onClose && Events.isEscKey(ev)) {
+      ev.stopImmediatePropagation();
+      onClose(ev);
+    }
+  }, [onClose]);
+  useModalManager({
+    open: isOpen,
+    closeModal,
+    modalRef: menuRef,
+    topModalOverride
+  });
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
+    nodeRef: menuRef,
+    in: isOpen,
+    timeout: transitionDuration,
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, {
+    ref: menuRef,
     startPosition: startPosition,
-    onKeyDown: handleKeyDown
-  }, rest, tagComponent("menu-fullscreen", rest)), /*#__PURE__*/React.createElement(StyledMenuFullscreenHeader, {
-    isOpen: isOpen,
+    transitionDuration: transitionDuration
+  }, /*#__PURE__*/React.createElement(FocusTrap, {
+    wrapperRef: modalRef,
+    isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(StyledMenuModal, {
+    "aria-label": ariaLabel,
+    "aria-modal": isTopModal ? true : undefined,
+    "data-component": "menu-fullscreen",
+    "data-element": dataElement,
+    "data-role": dataRole,
     menuType: menuType,
-    startPosition: startPosition
+    onKeyDown: ev => Events.isTabKey(ev) && !Events.isShiftKey(ev) && handleFocusedSearchButton(ev),
+    ref: modalRef,
+    role: "dialog",
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(StyledMenuFullscreenHeader, {
+    menuType: menuType
   }, /*#__PURE__*/React.createElement(IconButton, {
-    "aria-label": "menu fullscreen close button",
+    "aria-label": locale.menuFullscreen.ariaLabels.closeButton(),
     onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -82,7 +109,7 @@ export const MenuFullscreen = ({
   }, /*#__PURE__*/React.createElement(StyledMenuWrapper, {
     "data-component": "menu",
     menuType: menuType,
-    ref: menuContentRef,
+    ref: contentRef,
     display: "flex",
     flexDirection: "column",
     role: "list",
@@ -95,6 +122,6 @@ export const MenuFullscreen = ({
       openSubmenuId: null,
       setOpenSubmenuId: /* istanbul ignore next */() => {}
     }
-  }, childArray)))))));
+  }, childArray)))))))));
 };
 export default MenuFullscreen;

package/esm/components/menu/menu-full-screen/menu-full-screen.style.d.ts

@@ -1,8 +1,12 @@
-import { MenuFullscreenProps } from "./menu-full-screen.component";
 import { MenuType } from "../menu.context";
-interface StyledMenuFullScreenProps extends Pick<MenuFullscreenProps, "isOpen" | "startPosition"> {
+declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, {
+    transitionDuration: number;
+    startPosition: "left" | "right";
+}, never>;
+declare const StyledMenuModal: import("styled-components").StyledComponent<"div", any, {
     menuType: MenuType;
-}
-declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
-declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
-export { StyledMenuFullscreen, StyledMenuFullscreenHeader };
+}, never>;
+declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, {
+    menuType: MenuType;
+}, never>;
+export { StyledMenuModal, StyledMenuFullscreen, StyledMenuFullscreenHeader };

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

@@ -8,15 +8,50 @@ import StyledButton from "../../button/button.style";
 import menuConfigVariants from "../menu.config";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-  box-shadow: none;
+outline: solid 3px var(--colorsSemanticFocus500);
+box-shadow: none;
 `;
 const StyledMenuFullscreen = styled.div`
   position: fixed;
   top: 0;
   bottom: 0;
+
+  ${({
+  theme
+}) => css`
+    z-index: ${theme.zIndex.fullScreenModal};
+  `}
+
+  ${({
+  startPosition,
+  transitionDuration
+}) => css`
+    &.enter {
+      visibility: hidden;
+      ${startPosition}: -100%;
+    }
+
+    &.enter-active {
+      visibility: visible;
+      ${startPosition}: 0;
+      transition: all ${transitionDuration}ms ease;
+    }
+
+    &.exit {
+      visibility: visible;
+      ${startPosition}: 0;
+    }
+
+    &.exit-active {
+      visibility: hidden;
+      ${startPosition}: -100%;
+      transition: all ${transitionDuration}ms ease;
+    }
+  `}
+`;
+const StyledMenuModal = styled.div`
   height: 100vh;
-  width: 100%;
+  width: 100vw;
   outline: none;
 
   a,
@@ -26,13 +61,10 @@ const StyledMenuFullscreen = styled.div`
   }
 
   ${({
-  isOpen,
   menuType,
-  startPosition,
   theme
 }) => css`
     background-color: ${menuConfigVariants[menuType].background};
-    z-index: ${theme.zIndex.fullScreenModal};
 
     && {
       ${menuType === "dark" && css`
@@ -55,7 +87,7 @@ const StyledMenuFullscreen = styled.div`
         }
       `}
 
-      ${StyledSearch} {
+    ${StyledSearch} {
         ${StyledIcon} {
           display: inline-flex;
           margin-right: 0;
@@ -76,18 +108,6 @@ const StyledMenuFullscreen = styled.div`
         }
       }
     }
-
-    ${isOpen && css`
-      visibility: visible;
-      ${startPosition}: 0;
-      transition: all 0.3s ease;
-    `}
-
-    ${!isOpen && css`
-      visibility: hidden;
-      ${startPosition}: -100%;
-      transition: all 0.3s ease;
-    `}
   `}
 
   ${StyledBox} {
@@ -115,4 +135,7 @@ const StyledMenuFullscreenHeader = styled.div`
 StyledMenuFullscreen.defaultProps = {
   theme: baseTheme
 };
-export { StyledMenuFullscreen, StyledMenuFullscreenHeader };
+StyledMenuModal.defaultProps = {
+  theme: baseTheme
+};
+export { StyledMenuModal, StyledMenuFullscreen, StyledMenuFullscreenHeader };

package/esm/locales/__internal__/es-es.js

@@ -89,6 +89,11 @@ const esES = {
   loader: {
     loading: () => "Cargando"
   },
+  menuFullscreen: {
+    ariaLabels: {
+      closeButton: () => "Cerrar"
+    }
+  },
   message: {
     closeButtonAriaLabel: () => "Cerrar"
   },

package/esm/locales/en-gb.js

@@ -91,6 +91,11 @@ const enGB = {
   loader: {
     loading: () => "Loading"
   },
+  menuFullscreen: {
+    ariaLabels: {
+      closeButton: () => "Close"
+    }
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },

package/esm/locales/locale.d.ts

@@ -74,6 +74,11 @@ interface Locale {
     loader: {
         loading: () => string;
     };
+    menuFullscreen: {
+        ariaLabels: {
+            closeButton: () => string;
+        };
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };

package/lib/components/menu/menu-full-screen/menu-full-screen.component.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
-import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface MenuFullscreenProps extends TagProps {
+import type { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuFullscreenProps extends Omit<TagProps, "data-component"> {
+    /** Accessible name that conveys the purpose of the menu   */
+    "aria-label"?: string;
     /** The child elements to render */
     children?: React.ReactNode;
     /** Sets whether the component is open or closed */
@@ -8,7 +10,9 @@ export interface MenuFullscreenProps extends TagProps {
     /** The start position for the component to open from */
     startPosition?: "left" | "right";
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
-    onClose: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
+    /** Manually override the internal modal stacking order to set this as top */
+    topModalOverride?: boolean;
 }
-export declare const MenuFullscreen: ({ children, isOpen, startPosition, onClose, ...rest }: MenuFullscreenProps) => React.JSX.Element;
+export declare const MenuFullscreen: ({ "aria-label": ariaLabel, "data-element": dataElement, "data-role": dataRole, children, isOpen, onClose, startPosition, topModalOverride, }: MenuFullscreenProps) => React.JSX.Element;
 export default MenuFullscreen;

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

@@ -6,52 +6,57 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.MenuFullscreen = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTransitionGroup = require("react-transition-group");
 var _menuFullScreen = require("./menu-full-screen.style");
 var _menu = require("../menu.style");
 var _menu2 = _interopRequireDefault(require("../menu.context"));
-var _focusTrap = _interopRequireDefault(require("../../../__internal__/focus-trap"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _box = _interopRequireDefault(require("../../box"));
 var _iconButton = _interopRequireDefault(require("../../icon-button"));
 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 _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+var _useModalAria = _interopRequireDefault(require("../../../hooks/__internal__/useModalAria"));
+var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const MenuFullscreen = ({
+  "aria-label": ariaLabel = "Fullscreen menu",
+  "data-element": dataElement,
+  "data-role": dataRole,
   children,
-  isOpen,
-  startPosition = "left",
+  isOpen = false,
   onClose,
-  ...rest
+  startPosition = "left",
+  topModalOverride
 }) => {
-  const menuWrapperRef = (0, _react.useRef)(null);
-  const menuContentRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
+  const modalRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const isTopModal = (0, _useModalAria.default)(modalRef);
   const {
     menuType
   } = (0, _react.useContext)(_menu2.default);
   const isDarkVariant = ["dark", "black"].includes(menuType);
-  const handleKeyDown = ev => {
-    /* istanbul ignore else */
-    if (_events.default.isEscKey(ev)) {
-      onClose(ev);
-    }
-    if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
-      const search = menuWrapperRef.current?.querySelector('[data-component="search"');
-      const searchInput = search?.querySelector("input");
-      const searchButton = search?.querySelector("button");
+  const transitionDuration = 200;
+  const locale = (0, _useLocale.default)();
 
-      // if there is no value in the search input the button disappears when the input blurs
-      // this means we need to programatically set focus to the next menu item
-      if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
-        ev.preventDefault();
-        const elements = Array.from(menuWrapperRef.current?.querySelectorAll("a, input, button"));
-        const index = elements.indexOf(searchInput);
-        elements[index + 2]?.focus();
-      }
+  // TODO: Remove this temporary event handler as part of FE-6078
+  const handleFocusedSearchButton = ev => {
+    const search = modalRef.current?.querySelector('[data-component="search"]');
+    const searchInput = search?.querySelector("input");
+    const searchButton = search?.querySelector("button");
+
+    // if there is no value in the search input the button disappears when the input blurs
+    // this means we need to programmatically set focus to the next menu item
+    if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
+      ev.preventDefault();
+      const elements = Array.from(modalRef.current?.querySelectorAll("a, input, button"));
+      const index = elements.indexOf(searchInput);
+      elements[index + 2]?.focus();
     }
   };
   const flattenedChildren = _react.default.Children.toArray(children);
@@ -61,23 +66,45 @@ const MenuFullscreen = ({
     }
     return child;
   }));
-  return /*#__PURE__*/_react.default.createElement("li", {
-    "aria-label": "menu-fullscreen"
-  }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
-    wrapperRef: menuWrapperRef,
-    isOpen: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreen, _extends({
-    ref: menuWrapperRef,
-    isOpen: isOpen,
-    menuType: menuType,
+  const closeModal = (0, _react.useCallback)(ev => {
+    if (onClose && _events.default.isEscKey(ev)) {
+      ev.stopImmediatePropagation();
+      onClose(ev);
+    }
+  }, [onClose]);
+  (0, _useModalManager.default)({
+    open: isOpen,
+    closeModal,
+    modalRef: menuRef,
+    topModalOverride
+  });
+  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: menuRef,
+    in: isOpen,
+    timeout: transitionDuration,
+    unmountOnExit: true
+  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreen, {
+    ref: menuRef,
     startPosition: startPosition,
-    onKeyDown: handleKeyDown
-  }, rest, (0, _tags.default)("menu-fullscreen", rest)), /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreenHeader, {
-    isOpen: isOpen,
+    transitionDuration: transitionDuration
+  }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+    wrapperRef: modalRef,
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuModal, {
+    "aria-label": ariaLabel,
+    "aria-modal": isTopModal ? true : undefined,
+    "data-component": "menu-fullscreen",
+    "data-element": dataElement,
+    "data-role": dataRole,
     menuType: menuType,
-    startPosition: startPosition
+    onKeyDown: ev => _events.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && handleFocusedSearchButton(ev),
+    ref: modalRef,
+    role: "dialog",
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreenHeader, {
+    menuType: menuType
   }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-    "aria-label": "menu fullscreen close button",
+    "aria-label": locale.menuFullscreen.ariaLabels.closeButton(),
     onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -91,7 +118,7 @@ const MenuFullscreen = ({
   }, /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, {
     "data-component": "menu",
     menuType: menuType,
-    ref: menuContentRef,
+    ref: contentRef,
     display: "flex",
     flexDirection: "column",
     role: "list",
@@ -104,7 +131,7 @@ const MenuFullscreen = ({
       openSubmenuId: null,
       setOpenSubmenuId: /* istanbul ignore next */() => {}
     }
-  }, childArray)))))));
+  }, childArray)))))))));
 };
 exports.MenuFullscreen = MenuFullscreen;
 var _default = exports.default = MenuFullscreen;

package/lib/components/menu/menu-full-screen/menu-full-screen.style.d.ts

@@ -1,8 +1,12 @@
-import { MenuFullscreenProps } from "./menu-full-screen.component";
 import { MenuType } from "../menu.context";
-interface StyledMenuFullScreenProps extends Pick<MenuFullscreenProps, "isOpen" | "startPosition"> {
+declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, {
+    transitionDuration: number;
+    startPosition: "left" | "right";
+}, never>;
+declare const StyledMenuModal: import("styled-components").StyledComponent<"div", any, {
     menuType: MenuType;
-}
-declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
-declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
-export { StyledMenuFullscreen, StyledMenuFullscreenHeader };
+}, never>;
+declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, {
+    menuType: MenuType;
+}, never>;
+export { StyledMenuModal, StyledMenuFullscreen, StyledMenuFullscreenHeader };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMenuFullscreenHeader = exports.StyledMenuFullscreen = void 0;
+exports.StyledMenuModal = exports.StyledMenuFullscreenHeader = exports.StyledMenuFullscreen = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _themes = require("../../../style/themes");
 var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
@@ -17,15 +17,50 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 && Object.prototype.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 oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-  box-shadow: none;
+outline: solid 3px var(--colorsSemanticFocus500);
+box-shadow: none;
 `;
 const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.default.div`
   position: fixed;
   top: 0;
   bottom: 0;
+
+  ${({
+  theme
+}) => (0, _styledComponents.css)`
+    z-index: ${theme.zIndex.fullScreenModal};
+  `}
+
+  ${({
+  startPosition,
+  transitionDuration
+}) => (0, _styledComponents.css)`
+    &.enter {
+      visibility: hidden;
+      ${startPosition}: -100%;
+    }
+
+    &.enter-active {
+      visibility: visible;
+      ${startPosition}: 0;
+      transition: all ${transitionDuration}ms ease;
+    }
+
+    &.exit {
+      visibility: visible;
+      ${startPosition}: 0;
+    }
+
+    &.exit-active {
+      visibility: hidden;
+      ${startPosition}: -100%;
+      transition: all ${transitionDuration}ms ease;
+    }
+  `}
+`;
+const StyledMenuModal = exports.StyledMenuModal = _styledComponents.default.div`
   height: 100vh;
-  width: 100%;
+  width: 100vw;
   outline: none;
 
   a,
@@ -35,13 +70,10 @@ const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.de
   }
 
   ${({
-  isOpen,
   menuType,
-  startPosition,
   theme
 }) => (0, _styledComponents.css)`
     background-color: ${_menu.default[menuType].background};
-    z-index: ${theme.zIndex.fullScreenModal};
 
     && {
       ${menuType === "dark" && (0, _styledComponents.css)`
@@ -64,7 +96,7 @@ const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.de
         }
       `}
 
-      ${_search.default} {
+    ${_search.default} {
         ${_icon.default} {
           display: inline-flex;
           margin-right: 0;
@@ -85,18 +117,6 @@ const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.de
         }
       }
     }
-
-    ${isOpen && (0, _styledComponents.css)`
-      visibility: visible;
-      ${startPosition}: 0;
-      transition: all 0.3s ease;
-    `}
-
-    ${!isOpen && (0, _styledComponents.css)`
-      visibility: hidden;
-      ${startPosition}: -100%;
-      transition: all 0.3s ease;
-    `}
   `}
 
   ${_box.default} {
@@ -123,4 +143,7 @@ const StyledMenuFullscreenHeader = exports.StyledMenuFullscreenHeader = _styledC
 `;
 StyledMenuFullscreen.defaultProps = {
   theme: _themes.baseTheme
+};
+StyledMenuModal.defaultProps = {
+  theme: _themes.baseTheme
 };

package/lib/locales/__internal__/es-es.js

@@ -95,6 +95,11 @@ const esES = {
   loader: {
     loading: () => "Cargando"
   },
+  menuFullscreen: {
+    ariaLabels: {
+      closeButton: () => "Cerrar"
+    }
+  },
   message: {
     closeButtonAriaLabel: () => "Cerrar"
   },

package/lib/locales/en-gb.js

@@ -97,6 +97,11 @@ const enGB = {
   loader: {
     loading: () => "Loading"
   },
+  menuFullscreen: {
+    ariaLabels: {
+      closeButton: () => "Close"
+    }
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },

package/lib/locales/locale.d.ts

@@ -74,6 +74,11 @@ interface Locale {
     loader: {
         loading: () => string;
     };
+    menuFullscreen: {
+        ariaLabels: {
+            closeButton: () => string;
+        };
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "128.2.0",
+  "version": "128.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",