carbon-react 152.4.0 → 152.5.0

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

@@ -12,5 +12,5 @@ export interface VerticalMenuFullScreenProps extends TagProps {
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
     onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
-export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element | null;
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element;
 export default VerticalMenuFullScreen;

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

@@ -12,6 +12,7 @@ import VerticalMenuFullScreenContext from "./__internal__/vertical-menu-full-scr
 import { getDocument } from "../../../__internal__/dom/globals";
 import Events from "../../../__internal__/utils/helpers/events/events";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
+import useMediaQuery from "../../../hooks/useMediaQuery";
 export const VerticalMenuFullScreen = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -22,6 +23,7 @@ export const VerticalMenuFullScreen = ({
 }) => {
   const l = useLocale();
   const menuWrapperRef = useRef(null);
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const handleKeyDown = useCallback(ev => {
     // istanbul ignore else
     if (Events.isEscKey(ev)) {
@@ -36,14 +38,13 @@ export const VerticalMenuFullScreen = ({
     topModalOverride: true,
     focusCallToActionElement: safeDocument?.activeElement
   });
-
-  // TODO remove this as part of FE-5650
-  if (!isOpen) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
     isOpen: isOpen,
     wrapperRef: menuWrapperRef
   }, /*#__PURE__*/React.createElement(StyledVerticalMenuFullScreen, _extends({
     ref: menuWrapperRef,
+    isOpen: isOpen,
+    prefersReducedMotion: reduceMotion,
     scrollVariant: "light",
     as: "nav",
     "aria-label": ariaLabel,
@@ -62,9 +63,7 @@ export const VerticalMenuFullScreen = ({
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close",
-    color: "var(--colorsComponentsLeftnavWinterStandardContent)",
-    bgSize: "small",
-    fontSize: "medium"
+    color: "var(--colorsComponentsLeftnavWinterStandardContent)"
   }))), /*#__PURE__*/React.createElement(VerticalMenuFullScreenContext.Provider, {
     value: {
       isFullScreen: true

package/esm/components/vertical-menu/vertical-menu.style.d.ts

@@ -18,6 +18,10 @@ export declare const StyledVerticalMenu: import("styled-components").StyledCompo
         width?: string | undefined;
     } | undefined;
 }, never>;
+interface FullScreenProps {
+    isOpen: boolean;
+    prefersReducedMotion?: boolean;
+}
 export declare const StyledVerticalMenuFullScreen: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & {
     cssProps?: {
         color?: string | undefined;
@@ -25,5 +29,5 @@ export declare const StyledVerticalMenuFullScreen: import("styled-components").S
         height?: string | undefined;
         width?: string | undefined;
     } | undefined;
-}, never>;
+} & FullScreenProps, never>;
 export {};

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -114,11 +114,30 @@ export const StyledVerticalMenuFullScreen = styled(StyledBox)`
   overflow: auto;
   background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
   box-sizing: border-box;
-  transition: all 0.3s ease;
   z-index: ${({
   theme
 }) => theme.zIndex.fullScreenModal};
 
+  ${({
+  prefersReducedMotion
+}) => !prefersReducedMotion && css`
+      transition: all 0.3s ease;
+    `}
+
+  ${({
+  isOpen
+}) => isOpen && css`
+      visibility: visible;
+      transform: translateX(0);
+    `}
+
+  ${({
+  isOpen
+}) => !isOpen && css`
+      transform: translateX(-100%);
+      visibility: hidden;
+    `}
+
   // TODO remove hardcoded values when DS have had chance to review which token to use
   &::-webkit-scrollbar-track {
     background-color: #cccccc;

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

@@ -12,5 +12,5 @@ export interface VerticalMenuFullScreenProps extends TagProps {
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
     onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
-export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element | null;
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element;
 export default VerticalMenuFullScreen;

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

@@ -17,6 +17,7 @@ var _verticalMenuFullScreen = _interopRequireDefault(require("./__internal__/ver
 var _globals = require("../../../__internal__/dom/globals");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/events"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
+var _useMediaQuery = _interopRequireDefault(require("../../../hooks/useMediaQuery"));
 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; }
@@ -31,6 +32,7 @@ const VerticalMenuFullScreen = ({
 }) => {
   const l = (0, _useLocale.default)();
   const menuWrapperRef = (0, _react.useRef)(null);
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const handleKeyDown = (0, _react.useCallback)(ev => {
     // istanbul ignore else
     if (_events.default.isEscKey(ev)) {
@@ -45,14 +47,13 @@ const VerticalMenuFullScreen = ({
     topModalOverride: true,
     focusCallToActionElement: safeDocument?.activeElement
   });
-
-  // TODO remove this as part of FE-5650
-  if (!isOpen) return null;
   return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     isOpen: isOpen,
     wrapperRef: menuWrapperRef
   }, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledVerticalMenuFullScreen, _extends({
     ref: menuWrapperRef,
+    isOpen: isOpen,
+    prefersReducedMotion: reduceMotion,
     scrollVariant: "light",
     as: "nav",
     "aria-label": ariaLabel,
@@ -71,9 +72,7 @@ const VerticalMenuFullScreen = ({
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",
-    color: "var(--colorsComponentsLeftnavWinterStandardContent)",
-    bgSize: "small",
-    fontSize: "medium"
+    color: "var(--colorsComponentsLeftnavWinterStandardContent)"
   }))), /*#__PURE__*/_react.default.createElement(_verticalMenuFullScreen.default.Provider, {
     value: {
       isFullScreen: true

package/lib/components/vertical-menu/vertical-menu.style.d.ts

@@ -18,6 +18,10 @@ export declare const StyledVerticalMenu: import("styled-components").StyledCompo
         width?: string | undefined;
     } | undefined;
 }, never>;
+interface FullScreenProps {
+    isOpen: boolean;
+    prefersReducedMotion?: boolean;
+}
 export declare const StyledVerticalMenuFullScreen: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & {
     cssProps?: {
         color?: string | undefined;
@@ -25,5 +29,5 @@ export declare const StyledVerticalMenuFullScreen: import("styled-components").S
         height?: string | undefined;
         width?: string | undefined;
     } | undefined;
-}, never>;
+} & FullScreenProps, never>;
 export {};

package/lib/components/vertical-menu/vertical-menu.style.js

@@ -123,11 +123,30 @@ const StyledVerticalMenuFullScreen = exports.StyledVerticalMenuFullScreen = (0,
   overflow: auto;
   background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
   box-sizing: border-box;
-  transition: all 0.3s ease;
   z-index: ${({
   theme
 }) => theme.zIndex.fullScreenModal};
 
+  ${({
+  prefersReducedMotion
+}) => !prefersReducedMotion && (0, _styledComponents.css)`
+      transition: all 0.3s ease;
+    `}
+
+  ${({
+  isOpen
+}) => isOpen && (0, _styledComponents.css)`
+      visibility: visible;
+      transform: translateX(0);
+    `}
+
+  ${({
+  isOpen
+}) => !isOpen && (0, _styledComponents.css)`
+      transform: translateX(-100%);
+      visibility: hidden;
+    `}
+
   // TODO remove hardcoded values when DS have had chance to review which token to use
   &::-webkit-scrollbar-track {
     background-color: #cccccc;

package/package.json

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