carbon-react 144.16.0 → 144.17.1

package/esm/components/menu/menu-item/menu-item.component.d.ts

@@ -63,8 +63,5 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     icon: IconType;
     children?: React.ReactNode;
 }
-export declare const MenuItem: {
-    ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
-    displayName: string;
-};
+export declare const MenuItem: ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon) => React.JSX.Element;
 export default MenuItem;

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

@@ -8,6 +8,7 @@ import Events from "../../../__internal__/utils/helpers/events";
 import MenuContext from "../__internal__/menu.context";
 import Submenu from "../__internal__/submenu/submenu.component";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
+import MenuSegmentContext from "../menu-segment-title/menu-segment-title.context";
 import { StyledMenuItem } from "../menu.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 import Logger from "../../../__internal__/utils/logger";
@@ -44,6 +45,10 @@ export const MenuItem = ({
   !(icon || children) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `icon` must be defined or this node must have `children`.") : invariant(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : invariant(false) : void 0;
   !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not pass `children` when `submenu` is an empty string") : invariant(false) : void 0;
+  const {
+    isChildOfSegment,
+    overriddenVariant
+  } = useContext(MenuSegmentContext);
   const {
     inFullscreenView,
     registerItem,
@@ -130,6 +135,9 @@ export const MenuItem = ({
     overrideColor,
     ref
   };
+  if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
+    elementProps.overrideColor = true;
+  }
   const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
   const asPassiveItem = !(onClick || href);
@@ -193,5 +201,4 @@ export const MenuItem = ({
     inSubmenu: !!handleSubmenuKeyDown
   }), children));
 };
-MenuItem.displayName = "MenuItem";
 export default MenuItem;

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -1,11 +1,12 @@
 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, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import PropTypes from "prop-types";
 import { StyledTitle, StyledSegmentChildren } from "./menu-segment-title.style";
 import MenuContext from "../__internal__/menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
+import MenuSegmentContext from "./menu-segment-title.context";
 const AS_VALUES = ["h2", "h3", "h4", "h5", "h6"];
 const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   children,
@@ -18,6 +19,10 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   const {
     submenuHasMaxWidth
   } = useContext(SubmenuContext);
+  const isChildOfFullscreenMenu = menuContext?.inFullscreenView || false;
+  const overriddenVariant = useMemo(() => {
+    return isChildOfFullscreenMenu && variant === "alternate" && ["white", "black"].includes(menuContext.menuType) ? "default" : variant;
+  }, [isChildOfFullscreenMenu, menuContext.menuType, variant]);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/React.createElement(StyledTitle, _extends({
@@ -25,11 +30,18 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   }, tagComponent("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
-    variant: variant,
+    variant: overriddenVariant,
     shouldWrap: submenuHasMaxWidth
   }), text), children && /*#__PURE__*/React.createElement(StyledSegmentChildren, {
-    "data-role": "menu-segment-children"
-  }, children));
+    "data-role": "menu-segment-children",
+    menuType: menuContext.menuType,
+    variant: overriddenVariant
+  }, /*#__PURE__*/React.createElement(MenuSegmentContext.Provider, {
+    value: {
+      isChildOfSegment: true,
+      overriddenVariant
+    }
+  }, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   MenuSegmentTitle.propTypes = {

package/esm/components/menu/menu-segment-title/menu-segment-title.context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface MenuSegmentContextProps {
+    isChildOfSegment: boolean;
+    overriddenVariant: string;
+}
+export declare const MenuSegmentContext: React.Context<MenuSegmentContextProps>;
+export default MenuSegmentContext;

package/esm/components/menu/menu-segment-title/menu-segment-title.context.js

@@ -0,0 +1,6 @@
+import React from "react";
+export const MenuSegmentContext = /*#__PURE__*/React.createContext({
+  isChildOfSegment: false,
+  overriddenVariant: "default"
+});
+export default MenuSegmentContext;

package/esm/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -6,5 +6,8 @@ interface StyledTitleProps {
     shouldWrap?: boolean;
 }
 declare const StyledTitle: import("styled-components").StyledComponent<"h2", any, StyledTitleProps, never>;
-declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {}, never>;
+declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {
+    variant?: VariantType | undefined;
+    menuType: MenuType;
+}, never>;
 export { StyledTitle, StyledSegmentChildren };

package/esm/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -19,17 +19,25 @@ const StyledTitle = styled.h2`
   `}
 `;
 const StyledSegmentChildren = styled.ul`
-  padding: 0;
+  ${({
+  menuType,
+  variant
+}) => css`
+    padding: 0;
 
-  li {
-    list-style: none;
+    li {
+      list-style: none;
+      ${variant === "alternate" && css`
+        background-color: ${menuConfigVariants[menuType].alternate};
+      `}
 
-    &:not(&:last-child) a,
-    &:not(&:last-child) button,
-    &:not(&:last-child) > span,
-    &:not(&:last-child) > div {
-      border-radius: var(--borderRadius000);
+      &:not(&:last-child) a,
+      &:not(&:last-child) button,
+      &:not(&:last-child) > span,
+      &:not(&:last-child) > div {
+        border-radius: var(--borderRadius000);
+      }
     }
-  }
+  `}
 `;
 export { StyledTitle, StyledSegmentChildren };

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

@@ -11,6 +11,7 @@ import Box from "../../box";
 import { StyledList, StyledVerticalMenuFullScreen } from "../vertical-menu.style";
 import VerticalMenuFullScreenContext from "./__internal__/vertical-menu-full-screen.context";
 import Events from "../../../__internal__/utils/helpers/events/events";
+import useModalManager from "../../../hooks/__internal__/useModalManager";
 export const VerticalMenuFullScreen = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -27,6 +28,12 @@ export const VerticalMenuFullScreen = ({
       onClose(ev);
     }
   }, [onClose]);
+  useModalManager({
+    open: isOpen,
+    closeModal: handleKeyDown,
+    modalRef: menuWrapperRef,
+    topModalOverride: true
+  });
 
   // TODO remove this as part of FE-5650
   if (!isOpen) return null;

package/lib/components/menu/menu-item/menu-item.component.d.ts

@@ -63,8 +63,5 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     icon: IconType;
     children?: React.ReactNode;
 }
-export declare const MenuItem: {
-    ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
-    displayName: string;
-};
+export declare const MenuItem: ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon) => React.JSX.Element;
 export default MenuItem;

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

@@ -13,6 +13,7 @@ var _events = _interopRequireDefault(require("../../../__internal__/utils/helper
 var _menu = _interopRequireDefault(require("../__internal__/menu.context"));
 var _submenu = _interopRequireDefault(require("../__internal__/submenu/submenu.component"));
 var _submenu2 = _interopRequireDefault(require("../__internal__/submenu/submenu.context"));
+var _menuSegmentTitle = _interopRequireDefault(require("../menu-segment-title/menu-segment-title.context"));
 var _menu2 = require("../menu.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
@@ -53,6 +54,10 @@ const MenuItem = ({
   !(icon || children) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `icon` must be defined or this node must have `children`.") : (0, _invariant.default)(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : (0, _invariant.default)(false) : void 0;
   !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "You should not pass `children` when `submenu` is an empty string") : (0, _invariant.default)(false) : void 0;
+  const {
+    isChildOfSegment,
+    overriddenVariant
+  } = (0, _react.useContext)(_menuSegmentTitle.default);
   const {
     inFullscreenView,
     registerItem,
@@ -139,6 +144,9 @@ const MenuItem = ({
     overrideColor,
     ref
   };
+  if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
+    elementProps.overrideColor = true;
+  }
   const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
   const asPassiveItem = !(onClick || href);
@@ -203,5 +211,4 @@ const MenuItem = ({
   }), children));
 };
 exports.MenuItem = MenuItem;
-MenuItem.displayName = "MenuItem";
 var _default = exports.default = MenuItem;

package/lib/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -11,6 +11,7 @@ var _menu = _interopRequireDefault(require("../__internal__/menu.context"));
 var _menu2 = require("../menu.style");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _submenu = _interopRequireDefault(require("../__internal__/submenu/submenu.context"));
+var _menuSegmentTitle2 = _interopRequireDefault(require("./menu-segment-title.context"));
 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; }
@@ -27,6 +28,10 @@ const MenuSegmentTitle = /*#__PURE__*/_react.default.forwardRef(({
   const {
     submenuHasMaxWidth
   } = (0, _react.useContext)(_submenu.default);
+  const isChildOfFullscreenMenu = menuContext?.inFullscreenView || false;
+  const overriddenVariant = (0, _react.useMemo)(() => {
+    return isChildOfFullscreenMenu && variant === "alternate" && ["white", "black"].includes(menuContext.menuType) ? "default" : variant;
+  }, [isChildOfFullscreenMenu, menuContext.menuType, variant]);
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledTitle, _extends({
@@ -34,11 +39,18 @@ const MenuSegmentTitle = /*#__PURE__*/_react.default.forwardRef(({
   }, (0, _tags.default)("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
-    variant: variant,
+    variant: overriddenVariant,
     shouldWrap: submenuHasMaxWidth
   }), text), children && /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledSegmentChildren, {
-    "data-role": "menu-segment-children"
-  }, children));
+    "data-role": "menu-segment-children",
+    menuType: menuContext.menuType,
+    variant: overriddenVariant
+  }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle2.default.Provider, {
+    value: {
+      isChildOfSegment: true,
+      overriddenVariant
+    }
+  }, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   MenuSegmentTitle.propTypes = {

package/lib/components/menu/menu-segment-title/menu-segment-title.context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface MenuSegmentContextProps {
+    isChildOfSegment: boolean;
+    overriddenVariant: string;
+}
+export declare const MenuSegmentContext: React.Context<MenuSegmentContextProps>;
+export default MenuSegmentContext;

package/lib/components/menu/menu-segment-title/menu-segment-title.context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuSegmentContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MenuSegmentContext = exports.MenuSegmentContext = /*#__PURE__*/_react.default.createContext({
+  isChildOfSegment: false,
+  overriddenVariant: "default"
+});
+var _default = exports.default = MenuSegmentContext;

package/lib/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -6,5 +6,8 @@ interface StyledTitleProps {
     shouldWrap?: boolean;
 }
 declare const StyledTitle: import("styled-components").StyledComponent<"h2", any, StyledTitleProps, never>;
-declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {}, never>;
+declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {
+    variant?: VariantType | undefined;
+    menuType: MenuType;
+}, never>;
 export { StyledTitle, StyledSegmentChildren };

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -28,16 +28,24 @@ const StyledTitle = exports.StyledTitle = _styledComponents.default.h2`
   `}
 `;
 const StyledSegmentChildren = exports.StyledSegmentChildren = _styledComponents.default.ul`
-  padding: 0;
+  ${({
+  menuType,
+  variant
+}) => (0, _styledComponents.css)`
+    padding: 0;
 
-  li {
-    list-style: none;
+    li {
+      list-style: none;
+      ${variant === "alternate" && (0, _styledComponents.css)`
+        background-color: ${_menu.default[menuType].alternate};
+      `}
 
-    &:not(&:last-child) a,
-    &:not(&:last-child) button,
-    &:not(&:last-child) > span,
-    &:not(&:last-child) > div {
-      border-radius: var(--borderRadius000);
+      &:not(&:last-child) a,
+      &:not(&:last-child) button,
+      &:not(&:last-child) > span,
+      &:not(&:last-child) > div {
+        border-radius: var(--borderRadius000);
+      }
     }
-  }
+  `}
 `;

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

@@ -16,6 +16,7 @@ var _box = _interopRequireDefault(require("../../box"));
 var _verticalMenu = require("../vertical-menu.style");
 var _verticalMenuFullScreen = _interopRequireDefault(require("./__internal__/vertical-menu-full-screen.context"));
 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 }; }
 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; }
@@ -36,6 +37,12 @@ const VerticalMenuFullScreen = ({
       onClose(ev);
     }
   }, [onClose]);
+  (0, _useModalManager.default)({
+    open: isOpen,
+    closeModal: handleKeyDown,
+    modalRef: menuWrapperRef,
+    topModalOverride: true
+  });
 
   // TODO remove this as part of FE-5650
   if (!isOpen) return null;

package/package.json

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