carbon-react 117.5.0 → 117.6.0

package/lib/components/button-toggle/button-toggle.component.js

@@ -21,12 +21,16 @@ var _buttonToggleInput = _interopRequireDefault(require("./button-toggle-input.c
 
 var _inputBehaviour = require("../../__internal__/input-behaviour");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+let deprecateUncontrolledWarnTriggered = false;
+
 const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -70,6 +74,12 @@ const ButtonToggle = ({
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggle, {
     "data-component": dataComponent || "button-toggle",
     "data-element": dataElement,

package/lib/components/checkbox/checkbox.component.js

@@ -34,6 +34,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || 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); }
 
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -86,6 +87,12 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `inputRef` prop in `Checkbox` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const inputProps = {
     ariaLabelledBy,
     onClick,

package/lib/components/decimal/decimal.component.js

@@ -28,6 +28,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || 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); }
 
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const Decimal = /*#__PURE__*/_react.default.forwardRef(({
   align = "right",
@@ -214,6 +215,13 @@ const Decimal = /*#__PURE__*/_react.default.forwardRef(({
       }
     }
   }, [emptyValue, formatValue, getSafeValueProp, isControlled, prevValue, stateValue, toStandardDecimal, value]);
+
+  if (!deprecateUncontrolledWarnTriggered && !isControlled) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     onKeyPress: onKeyPress,
     align: align,

package/lib/components/grouped-character/grouped-character.component.js

@@ -41,6 +41,7 @@ const buildCustomTarget = ({
 };
 
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const GroupedCharacter = /*#__PURE__*/_react.default.forwardRef(({
   defaultValue,
@@ -64,6 +65,12 @@ const GroupedCharacter = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `inputRef` prop in `GroupedCharacter` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !isControlled) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Grouped Character` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const formatValue = val => (0, _groupedCharacter.generateGroups)(groups, val).join(separator);
 
   const sanitizeValue = val => val.split(separator).join("").substring(0, maxRawLength);

package/lib/components/menu/__internal__/locators.d.ts

@@ -1,6 +1,6 @@
-export const MENU_ITEM: "menu-item";
-export const SCROLLABLE_BLOCK: "submenu-scrollable-block";
-export const SCROLLABLE_BLOCK_PARENT: "scrollable-block-parent";
-export const ALL_CHILDREN_SELECTOR: string;
-export const BLOCK_INDEX_SELECTOR: string;
-export const MENU_ITEM_CHILDREN_LOCATOR: string;
+export declare const MENU_ITEM = "menu-item";
+export declare const SCROLLABLE_BLOCK = "submenu-scrollable-block";
+export declare const SCROLLABLE_BLOCK_PARENT = "scrollable-block-parent";
+export declare const ALL_CHILDREN_SELECTOR: string;
+export declare const BLOCK_INDEX_SELECTOR: string;
+export declare const MENU_ITEM_CHILDREN_LOCATOR: string;

package/lib/components/menu/__internal__/spec-helper/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactWrapper } from "enzyme";
+declare const openSubmenu: (wrapper: ReactWrapper, index?: number) => void;
+export default openSubmenu;

package/lib/components/menu/__internal__/submenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./submenu.component";
+export type { SubmenuProps } from "./submenu.component";

package/lib/components/menu/__internal__/submenu/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _submenu.default;
+  }
+});
+
+var _submenu = _interopRequireDefault(require("./submenu.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/menu/__internal__/submenu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../esm/components/menu/__internal__/submenu/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/menu/__internal__/submenu/submenu.component.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { MaxWidthProps } from "styled-system";
+import { VariantType } from "../../menu-item";
+export interface SubmenuProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /**
+     * * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
+     *
+     * Adds an icon to the menu item.
+     * */
+    icon?: string;
+    /** Defines which direction the submenu will hang eg. left/right */
+    submenuDirection?: string;
+    /** A title for the menu item that has a submenu. */
+    title?: string;
+    /** onKeyDown handler */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** set the colour variant for a menuType */
+    variant?: VariantType;
+    /** Flag to display the dropdown arrow when an item has a submenu */
+    showDropdownArrow?: boolean;
+    /** When set the submenu opens by click instead of hover */
+    clickToOpen?: boolean;
+    /** The href to use for the menu item. */
+    href?: string;
+    /** Maximum width. Any valid CSS string */
+    maxWidth?: MaxWidthProps["maxWidth"];
+    /** Used to set a submenu parent to passive styling in MenuFullscreen */
+    asPassiveItem?: boolean;
+    /** Callback triggered when submenu opens. Only valid with submenu prop */
+    onSubmenuOpen?: () => void;
+    /** Callback triggered when submenu closes. Only valid with submenu prop */
+    onSubmenuClose?: () => void;
+    /** Callback triggered when the top-level menu item is clicked */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    ariaLabel?: string;
+}
+declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement & HTMLDivElement>>;
+export default Submenu;

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -13,8 +13,6 @@ var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"
 
 var _submenu = require("./submenu.style");
 
-var _link = _interopRequireDefault(require("../../../link"));
-
 var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
 
 var _menu = _interopRequireDefault(require("../../menu.context"));
@@ -61,7 +59,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const {
     inFullscreenView,
     openSubmenuId,
-    setOpenSubmenuId
+    setOpenSubmenuId,
+    menuType
   } = menuContext;
   const [submenuOpen, setSubmenuOpen] = (0, _react.useState)(false);
   const [submenuFocusId, setSubmenuFocusId] = (0, _react.useState)(null);
@@ -69,37 +68,35 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const [characterString, setCharacterString] = (0, _react.useState)("");
   const shiftTabPressed = (0, _react.useRef)(false);
   const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
-  const registerItem = (0, _react.useCallback)(id => {
-    setSubmenuItemIds(prevState => {
-      return [...prevState, id];
-    });
-  }, []);
-  const unregisterItem = (0, _react.useCallback)(id => {
-    setSubmenuItemIds(prevState => {
-      return prevState.filter(itemId => itemId !== id);
-    });
-  }, []);
   const numberOfChildren = submenuItemIds.length;
   const blockIndex = (0, _react.useMemo)(() => {
-    if (submenuOpen && numberOfChildren) {
-      var _submenuRef$current, _submenuRef$current2;
+    var _submenuRef$current;
+
+    const items = (_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR);
+
+    if (items && submenuOpen && numberOfChildren) {
+      var _submenuRef$current2;
 
-      const childrenArray = Array.from((_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR));
+      const childrenArray = Array.from(items);
       const scrollableBlock = (_submenuRef$current2 = submenuRef.current) === null || _submenuRef$current2 === void 0 ? void 0 : _submenuRef$current2.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK}']`);
-      const index = childrenArray.indexOf(scrollableBlock);
+      const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
       return scrollableBlock !== null && scrollableBlock !== void 0 && scrollableBlock.querySelector(`[data-component='${_locators.SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
 
     return -1;
   }, [submenuOpen, numberOfChildren]);
-  const characterTimer = (0, _react.useRef)();
+  const characterTimer = (0, _react.useRef)(null);
   const startCharacterTimeout = (0, _react.useCallback)(() => {
     characterTimer.current = setTimeout(() => {
       setCharacterString("");
     }, 1500);
   }, []);
   const restartCharacterTimeout = (0, _react.useCallback)(() => {
-    clearTimeout(characterTimer.current);
+    /* istanbul ignore else */
+    if (characterTimer.current) {
+      clearTimeout(characterTimer.current);
+    }
+
     startCharacterTimeout();
   }, [startCharacterTimeout]);
   const openSubmenu = (0, _react.useCallback)(() => {
@@ -190,7 +187,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       if (_events.default.isEscKey(event)) {
-        onKeyDown(event);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         closeSubmenu();
         return;
       }
@@ -238,6 +235,19 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
     }
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  (0, _react.useEffect)(() => {
+    /* istanbul ignore else */
+    if (submenuRef.current && children) {
+      var _submenuRef$current3;
+
+      const items = (_submenuRef$current3 = submenuRef.current) === null || _submenuRef$current3 === void 0 ? void 0 : _submenuRef$current3.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
+      /* istanbul ignore else */
+
+      if (items) {
+        setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
+      }
+    }
+  }, [children, submenuOpen]);
   (0, _react.useEffect)(() => {
     if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
       focusFirstMenuItemOnOpen.current = false;
@@ -250,6 +260,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     closeSubmenu();
   };
 
+  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway);
+
   const handleClick = event => {
     openSubmenu();
 
@@ -259,10 +271,12 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   (0, _react.useEffect)(() => {
-    if (characterString !== "") {
-      var _submenuRef$current3;
+    var _submenuRef$current4;
+
+    const items = (_submenuRef$current4 = submenuRef.current) === null || _submenuRef$current4 === void 0 ? void 0 : _submenuRef$current4.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR);
 
-      const submenuChildren = Array.from((_submenuRef$current3 = submenuRef.current) === null || _submenuRef$current3 === void 0 ? void 0 : _submenuRef$current3.querySelectorAll(_locators.ALL_CHILDREN_SELECTOR));
+    if (items && characterString !== "") {
+      const submenuChildren = Array.from(items);
       const nextItem = (0, _keyboardNavigation.characterNavigation)(characterString, submenuChildren);
 
       if (nextItem) {
@@ -270,37 +284,33 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
     }
   }, [characterString, submenuItemIds]);
-  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
       inFullscreenView: inFullscreenView,
-      menuType: menuContext.menuType,
       asPassiveItem: asPassiveItem,
+      menuType: menuContext.menuType,
       onClick: handleClickInside
     }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
-      onClick: onClick,
+      onClick: asPassiveItem ? undefined : onClick,
       className: className,
-      menuType: menuContext.menuType,
+      menuType: menuType,
       ref: ref,
-      as: asPassiveItem ? "div" : _link.default,
       href: href,
-      icon: icon,
       variant: variant,
-      inFullscreenView: inFullscreenView
+      inFullscreenView: inFullscreenView,
+      asDiv: asPassiveItem
     }), title), /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenu, {
       "data-component": "submenu",
       variant: variant,
-      menuType: menuContext.menuType,
+      menuType: menuType,
       inFullscreenView: inFullscreenView,
       ref: submenuRef
     }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
       value: {
         handleKeyDown,
         blockIndex,
-        registerItem,
-        unregisterItem,
         updateFocusId: setSubmenuFocusId
       }
     }, children)));
@@ -315,13 +325,12 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     ref: submenuRef
   }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
     className: className,
-    menuType: menuContext.menuType,
+    menuType: menuType,
     ref: ref,
     icon: icon,
     tabIndex: -1,
     variant: variant,
     isOpen: submenuOpen,
-    as: _link.default,
     hasSubmenu: true,
     showDropdownArrow: showDropdownArrow,
     onKeyDown: handleKeyDown,
@@ -334,15 +343,13 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": "submenu",
     submenuDirection: submenuDirection,
     variant: variant,
-    menuType: menuContext.menuType,
+    menuType: menuType,
     role: blockIndex === 0 ? "presentation" : "list"
   }, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
     value: {
       submenuFocusId,
       handleKeyDown,
       blockIndex,
-      registerItem,
-      unregisterItem,
       updateFocusId: setSubmenuFocusId,
       shiftTabPressed: shiftTabPressed.current
     }
@@ -350,54 +357,123 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 Submenu.propTypes = {
-  /** Children elements */
-  children: _propTypes.default.node.isRequired,
-
-  /** Custom className */
-  className: _propTypes.default.string,
-
-  /**
-   * * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * Adds an icon to the menu item.
-   * */
-  icon: _propTypes.default.string,
-
-  /** Defines which direction the submenu will hang eg. left/right */
-  submenuDirection: _propTypes.default.string,
-
-  /** A title for the menu item that has a submenu. */
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-
-  /** onKeyDown handler */
-  onKeyDown: _propTypes.default.func,
-
-  /** set the colour variant for a menuType */
-  variant: _propTypes.default.oneOf(["default", "alternate"]),
-
-  /** Flag to display the dropdown arrow when an item has a submenu */
-  showDropdownArrow: _propTypes.default.bool,
-
-  /** When set the submenu opens by click instead of hover */
-  clickToOpen: _propTypes.default.bool,
-
-  /** The href to use for the menu item. */
-  href: _propTypes.default.string,
-
-  /** Maximum width. Any valid CSS string */
-  maxWidth: _propTypes.default.string,
-
-  /** Used to set a submenu parent to passive styling in MenuFullscreen */
-  asPassiveItem: _propTypes.default.bool,
-
-  /** Callback triggered when submenu opens. Only valid with submenu prop */
-  onSubmenuOpen: _propTypes.default.func,
-
-  /** Callback triggered when submenu closes. Only valid with submenu prop */
-  onSubmenuClose: _propTypes.default.func,
-
-  /** Callback triggered when the top-level menu item is clicked */
-  onClick: _propTypes.default.func
+  "ariaLabel": _propTypes.default.string,
+  "asPassiveItem": _propTypes.default.bool,
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "clickToOpen": _propTypes.default.bool,
+  "href": _propTypes.default.string,
+  "icon": _propTypes.default.string,
+  "maxWidth": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@iterator": _propTypes.default.func.isRequired,
+    "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
+    "big": _propTypes.default.func.isRequired,
+    "blink": _propTypes.default.func.isRequired,
+    "bold": _propTypes.default.func.isRequired,
+    "charAt": _propTypes.default.func.isRequired,
+    "charCodeAt": _propTypes.default.func.isRequired,
+    "codePointAt": _propTypes.default.func.isRequired,
+    "concat": _propTypes.default.func.isRequired,
+    "endsWith": _propTypes.default.func.isRequired,
+    "fixed": _propTypes.default.func.isRequired,
+    "fontcolor": _propTypes.default.func.isRequired,
+    "fontsize": _propTypes.default.func.isRequired,
+    "includes": _propTypes.default.func.isRequired,
+    "indexOf": _propTypes.default.func.isRequired,
+    "italics": _propTypes.default.func.isRequired,
+    "lastIndexOf": _propTypes.default.func.isRequired,
+    "length": _propTypes.default.number.isRequired,
+    "link": _propTypes.default.func.isRequired,
+    "localeCompare": _propTypes.default.func.isRequired,
+    "match": _propTypes.default.func.isRequired,
+    "matchAll": _propTypes.default.func.isRequired,
+    "normalize": _propTypes.default.func.isRequired,
+    "padEnd": _propTypes.default.func.isRequired,
+    "padStart": _propTypes.default.func.isRequired,
+    "repeat": _propTypes.default.func.isRequired,
+    "replace": _propTypes.default.func.isRequired,
+    "search": _propTypes.default.func.isRequired,
+    "slice": _propTypes.default.func.isRequired,
+    "small": _propTypes.default.func.isRequired,
+    "split": _propTypes.default.func.isRequired,
+    "startsWith": _propTypes.default.func.isRequired,
+    "strike": _propTypes.default.func.isRequired,
+    "sub": _propTypes.default.func.isRequired,
+    "substr": _propTypes.default.func.isRequired,
+    "substring": _propTypes.default.func.isRequired,
+    "sup": _propTypes.default.func.isRequired,
+    "toLocaleLowerCase": _propTypes.default.func.isRequired,
+    "toLocaleUpperCase": _propTypes.default.func.isRequired,
+    "toLowerCase": _propTypes.default.func.isRequired,
+    "toString": _propTypes.default.func.isRequired,
+    "toUpperCase": _propTypes.default.func.isRequired,
+    "trim": _propTypes.default.func.isRequired,
+    "trimEnd": _propTypes.default.func.isRequired,
+    "trimLeft": _propTypes.default.func.isRequired,
+    "trimRight": _propTypes.default.func.isRequired,
+    "trimStart": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@iterator": _propTypes.default.func.isRequired,
+    "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
+    "big": _propTypes.default.func.isRequired,
+    "blink": _propTypes.default.func.isRequired,
+    "bold": _propTypes.default.func.isRequired,
+    "charAt": _propTypes.default.func.isRequired,
+    "charCodeAt": _propTypes.default.func.isRequired,
+    "codePointAt": _propTypes.default.func.isRequired,
+    "concat": _propTypes.default.func.isRequired,
+    "endsWith": _propTypes.default.func.isRequired,
+    "fixed": _propTypes.default.func.isRequired,
+    "fontcolor": _propTypes.default.func.isRequired,
+    "fontsize": _propTypes.default.func.isRequired,
+    "includes": _propTypes.default.func.isRequired,
+    "indexOf": _propTypes.default.func.isRequired,
+    "italics": _propTypes.default.func.isRequired,
+    "lastIndexOf": _propTypes.default.func.isRequired,
+    "length": _propTypes.default.number.isRequired,
+    "link": _propTypes.default.func.isRequired,
+    "localeCompare": _propTypes.default.func.isRequired,
+    "match": _propTypes.default.func.isRequired,
+    "matchAll": _propTypes.default.func.isRequired,
+    "normalize": _propTypes.default.func.isRequired,
+    "padEnd": _propTypes.default.func.isRequired,
+    "padStart": _propTypes.default.func.isRequired,
+    "repeat": _propTypes.default.func.isRequired,
+    "replace": _propTypes.default.func.isRequired,
+    "search": _propTypes.default.func.isRequired,
+    "slice": _propTypes.default.func.isRequired,
+    "small": _propTypes.default.func.isRequired,
+    "split": _propTypes.default.func.isRequired,
+    "startsWith": _propTypes.default.func.isRequired,
+    "strike": _propTypes.default.func.isRequired,
+    "sub": _propTypes.default.func.isRequired,
+    "substr": _propTypes.default.func.isRequired,
+    "substring": _propTypes.default.func.isRequired,
+    "sup": _propTypes.default.func.isRequired,
+    "toLocaleLowerCase": _propTypes.default.func.isRequired,
+    "toLocaleUpperCase": _propTypes.default.func.isRequired,
+    "toLowerCase": _propTypes.default.func.isRequired,
+    "toString": _propTypes.default.func.isRequired,
+    "toUpperCase": _propTypes.default.func.isRequired,
+    "trim": _propTypes.default.func.isRequired,
+    "trimEnd": _propTypes.default.func.isRequired,
+    "trimLeft": _propTypes.default.func.isRequired,
+    "trimRight": _propTypes.default.func.isRequired,
+    "trimStart": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "onClick": _propTypes.default.func,
+  "onKeyDown": _propTypes.default.func,
+  "onSubmenuClose": _propTypes.default.func,
+  "onSubmenuOpen": _propTypes.default.func,
+  "showDropdownArrow": _propTypes.default.bool,
+  "submenuDirection": _propTypes.default.string,
+  "title": _propTypes.default.string,
+  "variant": _propTypes.default.oneOf(["alternate", "default"])
 };
+Submenu.displayName = "submenu";
 var _default = Submenu;
 exports.default = _default;

package/lib/components/menu/__internal__/submenu/submenu.context.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface SubmenuContextProps {
+    submenuFocusId?: string | null;
+    updateFocusId?: (id: string) => void;
+    handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    shiftTabPressed?: boolean;
+    blockIndex?: number;
+}
+declare const SubmenuContext: React.Context<SubmenuContextProps>;
+export default SubmenuContext;

package/lib/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -0,0 +1,16 @@
+import { SubmenuProps } from "./submenu.component";
+import { MenuType } from "../../menu.context";
+interface SharedStyleProps {
+    inFullscreenView?: boolean;
+    menuType?: MenuType;
+}
+interface StyledSubmenuWrapperProps extends SharedStyleProps {
+    isSubmenuOpen?: boolean;
+    asPassiveItem?: boolean;
+}
+interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
+    submenuDirection?: string;
+}
+declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
+declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;
+export { StyledSubmenu, StyledSubmenuWrapper };

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -46,7 +46,7 @@ const StyledSubmenuWrapper = _styledComponents.default.div`
 }) => inFullscreenView && (0, _styledComponents.css)`
       width: 100%;
 
-      ${asPassiveItem && (0, _styledComponents.css)`
+      ${asPassiveItem && menuType && (0, _styledComponents.css)`
         ${_menuItem.default} {
           outline: none;
           color: ${_menu2.default[menuType].title};
@@ -62,7 +62,7 @@ const StyledSubmenu = _styledComponents.default.ul`
   variant,
   inFullscreenView
 }) => (0, _styledComponents.css)`
-    ${!inFullscreenView && (0, _styledComponents.css)`
+    ${!inFullscreenView && menuType && (0, _styledComponents.css)`
       box-shadow: var(--boxShadow100);
       position: absolute;
       background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
@@ -98,7 +98,7 @@ const StyledSubmenu = _styledComponents.default.ul`
       white-space: nowrap;
       cursor: pointer;
 
-      ${!inFullscreenView && (0, _styledComponents.css)`
+      ${!inFullscreenView && menuType && (0, _styledComponents.css)`
         background-color: ${_menu2.default[menuType].submenuItemBackground};
 
         a:focus,
@@ -108,7 +108,7 @@ const StyledSubmenu = _styledComponents.default.ul`
 
         a:hover,
         button:hover {
-          background-color: ${_menu2.default[menuType].submenuItemBackgroundHover};
+          background-color: transparent;
           color: var(--colorsComponentsMenuYang100);
 
           [data-component="icon"] {

package/lib/components/menu/index.d.ts

@@ -1,6 +1,12 @@
-export { default as Menu } from "./menu";
-export { default as MenuItem } from "./menu-item/menu-item";
-export { default as ScrollableBlock } from "./scrollable-block/scrollable-block";
-export { default as MenuDivider } from "./menu-divider/menu-divider";
-export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title";
-export { default as MenuFullscreen } from "./menu-full-screen/menu-full-screen";
+export { default as Menu } from "./menu.component";
+export type { MenuProps } from "./menu.component";
+export { default as MenuItem } from "./menu-item";
+export type { MenuWithIcon, MenuWithChildren } from "./menu-item";
+export { default as MenuDivider } from "./menu-divider";
+export type { MenuDividerProps } from "./menu-divider";
+export { default as MenuSegmentTitle } from "./menu-segment-title";
+export type { MenuTitleProps } from "./menu-segment-title";
+export { default as MenuFullscreen } from "./menu-full-screen";
+export type { MenuFullscreenProps } from "./menu-full-screen";
+export { default as ScrollableBlock } from "./scrollable-block";
+export type { ScrollableBlockProps } from "./scrollable-block";