carbon-react 152.4.0 → 152.5.1

package/esm/components/link/link.component.js

@@ -36,6 +36,13 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     batchSelectionDisabled
   } = useContext(BatchSelectionContext);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = React.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
@@ -59,7 +66,7 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,

package/esm/components/menu/menu-item/menu-item.component.js

@@ -1,5 +1,5 @@
 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, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect, useContext, useState, useLayoutEffect } from "react";
 import invariant from "invariant";
 import { defaultFocusableSelectors as focusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
@@ -63,8 +63,14 @@ export const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = useRef(null);
-  const firstFocusableChild = ref.current?.querySelector(focusableSelectors) ?? null;
+  const [ref, setRef] = useState(null);
+  const [firstFocusableChild, setFirstFocusableChild] = useState(null);
+  useLayoutEffect(() => {
+    const firstFocusable = ref?.querySelector(focusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   useEffect(() => {
     const id = menuItemId.current;
 
@@ -85,7 +91,7 @@ export const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -99,7 +105,7 @@ export const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (Events.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -114,7 +120,7 @@ export const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -153,7 +159,7 @@ export const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = filterStyledSystemPaddingProps(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

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/link/link.component.js

@@ -45,6 +45,13 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     batchSelectionDisabled
   } = (0, _react.useContext)(_batchSelection.default);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = _react.default.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -68,7 +75,7 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,

package/lib/components/menu/menu-item/menu-item.component.js

@@ -72,8 +72,14 @@ const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = (0, _react.useRef)(null);
-  const firstFocusableChild = ref.current?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+  const [ref, setRef] = (0, _react.useState)(null);
+  const [firstFocusableChild, setFirstFocusableChild] = (0, _react.useState)(null);
+  (0, _react.useLayoutEffect)(() => {
+    const firstFocusable = ref?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   (0, _react.useEffect)(() => {
     const id = menuItemId.current;
 
@@ -94,7 +100,7 @@ const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -108,7 +114,7 @@ const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (_events.default.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -123,7 +129,7 @@ const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -162,7 +168,7 @@ const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

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.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",