carbon-react 117.5.0 → 117.6.0

package/esm/__internal__/input/input.component.d.ts

@@ -19,7 +19,7 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on change */
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** pecify a callback triggered on click */
+    /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */
     onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
@@ -37,9 +37,9 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
 export interface InputProps extends CommonInputProps {
     /** The visible width of the text control, in average character widths */
     cols?: number;
-    /** Integer to determine a timeout for the defered callback */
+    /** Integer to determine a timeout for the deferred callback */
     deferTimeout?: number;
-    /** Defered callback to be called after the onChange event */
+    /** Deferred callback to be called after the onChange event */
     onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** The number of visible text lines for the control */
     rows?: number;

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -9,6 +9,8 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { Dt, Dd } from "../definition-list";
+import Logger from "../../__internal__/utils/logger";
+let deprecateUncontrolledWarnTriggered = false;
 
 const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
@@ -123,6 +125,12 @@ const AdvancedColorPicker = ({
       onBlur(e);
     }
   }, [onBlur]);
+
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   return /*#__PURE__*/React.createElement(StyledAdvancedColorPickerWrapper, _extends({
     m: "15px auto auto 15px"
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {

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

@@ -6,6 +6,8 @@ import guid from "../../__internal__/utils/helpers/guid";
 import ButtonToggleIcon from "./button-toggle-icon.component";
 import ButtonToggleInput from "./button-toggle-input.component";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
+import Logger from "../../__internal__/utils/logger";
+let deprecateUncontrolledWarnTriggered = false;
 
 const ButtonToggle = ({
   "aria-label": ariaLabel,
@@ -50,6 +52,11 @@ const ButtonToggle = ({
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.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.createElement(StyledButtonToggle, {
     "data-component": dataComponent || "button-toggle",
     "data-element": dataElement,

package/esm/components/checkbox/checkbox.component.js

@@ -11,6 +11,7 @@ import { CheckboxGroupContext } from "./checkbox-group.component";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const Checkbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
   id,
@@ -61,6 +62,11 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `inputRef` prop in `Checkbox` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.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/esm/components/decimal/decimal.component.js

@@ -8,6 +8,7 @@ import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import Logger from "../../__internal__/utils/logger";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const Decimal = /*#__PURE__*/React.forwardRef(({
   align = "right",
   defaultValue,
@@ -192,6 +193,12 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
       }
     }
   }, [emptyValue, formatValue, getSafeValueProp, isControlled, prevValue, stateValue, toStandardDecimal, value]);
+
+  if (!deprecateUncontrolledWarnTriggered && !isControlled) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textbox, _extends({
     onKeyPress: onKeyPress,
     align: align,

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

@@ -24,6 +24,7 @@ const buildCustomTarget = ({
 };
 
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
   defaultValue,
   groups,
@@ -45,6 +46,11 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `inputRef` prop in `GroupedCharacter` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !isControlled) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.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 => generateGroups(groups, val).join(separator);
 
   const sanitizeValue = val => val.split(separator).join("").substring(0, maxRawLength);

package/esm/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/esm/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/esm/components/menu/__internal__/submenu/index.d.ts

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

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

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

package/esm/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/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useContext, useMemo, useRef, useState }
 import PropTypes from "prop-types";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
 import { StyledSubmenu, StyledSubmenuWrapper } from "./submenu.style";
-import Link from "../../../link";
 import Events from "../../../../__internal__/utils/helpers/events";
 import MenuContext from "../../menu.context";
 import { characterNavigation } from "../keyboard-navigation";
@@ -36,7 +35,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const {
     inFullscreenView,
     openSubmenuId,
-    setOpenSubmenuId
+    setOpenSubmenuId,
+    menuType
   } = menuContext;
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const [submenuFocusId, setSubmenuFocusId] = useState(null);
@@ -44,37 +44,35 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [characterString, setCharacterString] = useState("");
   const shiftTabPressed = useRef(false);
   const focusFirstMenuItemOnOpen = useRef(false);
-  const registerItem = useCallback(id => {
-    setSubmenuItemIds(prevState => {
-      return [...prevState, id];
-    });
-  }, []);
-  const unregisterItem = useCallback(id => {
-    setSubmenuItemIds(prevState => {
-      return prevState.filter(itemId => itemId !== id);
-    });
-  }, []);
   const numberOfChildren = submenuItemIds.length;
   const blockIndex = 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(BLOCK_INDEX_SELECTOR);
 
-      const childrenArray = Array.from((_submenuRef$current = submenuRef.current) === null || _submenuRef$current === void 0 ? void 0 : _submenuRef$current.querySelectorAll(BLOCK_INDEX_SELECTOR));
+    if (items && submenuOpen && numberOfChildren) {
+      var _submenuRef$current2;
+
+      const childrenArray = Array.from(items);
       const scrollableBlock = (_submenuRef$current2 = submenuRef.current) === null || _submenuRef$current2 === void 0 ? void 0 : _submenuRef$current2.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
-      const index = childrenArray.indexOf(scrollableBlock);
+      const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
       return scrollableBlock !== null && scrollableBlock !== void 0 && scrollableBlock.querySelector(`[data-component='${SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
 
     return -1;
   }, [submenuOpen, numberOfChildren]);
-  const characterTimer = useRef();
+  const characterTimer = useRef(null);
   const startCharacterTimeout = useCallback(() => {
     characterTimer.current = setTimeout(() => {
       setCharacterString("");
     }, 1500);
   }, []);
   const restartCharacterTimeout = useCallback(() => {
-    clearTimeout(characterTimer.current);
+    /* istanbul ignore else */
+    if (characterTimer.current) {
+      clearTimeout(characterTimer.current);
+    }
+
     startCharacterTimeout();
   }, [startCharacterTimeout]);
   const openSubmenu = useCallback(() => {
@@ -165,7 +163,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
 
       if (Events.isEscKey(event)) {
-        onKeyDown(event);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         closeSubmenu();
         return;
       }
@@ -213,6 +211,19 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
     }
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  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(ALL_CHILDREN_SELECTOR);
+      /* istanbul ignore else */
+
+      if (items) {
+        setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
+      }
+    }
+  }, [children, submenuOpen]);
   useEffect(() => {
     if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
       focusFirstMenuItemOnOpen.current = false;
@@ -225,6 +236,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     closeSubmenu();
   };
 
+  const handleClickInside = useClickAwayListener(handleClickAway);
+
   const handleClick = event => {
     openSubmenu();
 
@@ -234,10 +247,12 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   };
 
   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(ALL_CHILDREN_SELECTOR);
 
-      const submenuChildren = Array.from((_submenuRef$current3 = submenuRef.current) === null || _submenuRef$current3 === void 0 ? void 0 : _submenuRef$current3.querySelectorAll(ALL_CHILDREN_SELECTOR));
+    if (items && characterString !== "") {
+      const submenuChildren = Array.from(items);
       const nextItem = characterNavigation(characterString, submenuChildren);
 
       if (nextItem) {
@@ -245,37 +260,33 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
     }
   }, [characterString, submenuItemIds]);
-  const handleClickInside = useClickAwayListener(handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
       inFullscreenView: inFullscreenView,
-      menuType: menuContext.menuType,
       asPassiveItem: asPassiveItem,
+      menuType: menuContext.menuType,
       onClick: handleClickInside
     }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
-      onClick: onClick,
+      onClick: asPassiveItem ? undefined : onClick,
       className: className,
-      menuType: menuContext.menuType,
+      menuType: menuType,
       ref: ref,
-      as: asPassiveItem ? "div" : Link,
       href: href,
-      icon: icon,
       variant: variant,
-      inFullscreenView: inFullscreenView
+      inFullscreenView: inFullscreenView,
+      asDiv: asPassiveItem
     }), title), /*#__PURE__*/React.createElement(StyledSubmenu, {
       "data-component": "submenu",
       variant: variant,
-      menuType: menuContext.menuType,
+      menuType: menuType,
       inFullscreenView: inFullscreenView,
       ref: submenuRef
     }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
       value: {
         handleKeyDown,
         blockIndex,
-        registerItem,
-        unregisterItem,
         updateFocusId: setSubmenuFocusId
       }
     }, children)));
@@ -290,13 +301,12 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     ref: submenuRef
   }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
     className: className,
-    menuType: menuContext.menuType,
+    menuType: menuType,
     ref: ref,
     icon: icon,
     tabIndex: -1,
     variant: variant,
     isOpen: submenuOpen,
-    as: Link,
     hasSubmenu: true,
     showDropdownArrow: showDropdownArrow,
     onKeyDown: handleKeyDown,
@@ -309,68 +319,135 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     "data-component": "submenu",
     submenuDirection: submenuDirection,
     variant: variant,
-    menuType: menuContext.menuType,
+    menuType: menuType,
     role: blockIndex === 0 ? "presentation" : "list"
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       submenuFocusId,
       handleKeyDown,
       blockIndex,
-      registerItem,
-      unregisterItem,
       updateFocusId: setSubmenuFocusId,
       shiftTabPressed: shiftTabPressed.current
     }
   }, children)));
 });
 Submenu.propTypes = {
-  /** Children elements */
-  children: PropTypes.node.isRequired,
-
-  /** Custom className */
-  className: PropTypes.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.string,
-
-  /** Defines which direction the submenu will hang eg. left/right */
-  submenuDirection: PropTypes.string,
-
-  /** A title for the menu item that has a submenu. */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
-  /** onKeyDown handler */
-  onKeyDown: PropTypes.func,
-
-  /** set the colour variant for a menuType */
-  variant: PropTypes.oneOf(["default", "alternate"]),
-
-  /** Flag to display the dropdown arrow when an item has a submenu */
-  showDropdownArrow: PropTypes.bool,
-
-  /** When set the submenu opens by click instead of hover */
-  clickToOpen: PropTypes.bool,
-
-  /** The href to use for the menu item. */
-  href: PropTypes.string,
-
-  /** Maximum width. Any valid CSS string */
-  maxWidth: PropTypes.string,
-
-  /** Used to set a submenu parent to passive styling in MenuFullscreen */
-  asPassiveItem: PropTypes.bool,
-
-  /** Callback triggered when submenu opens. Only valid with submenu prop */
-  onSubmenuOpen: PropTypes.func,
-
-  /** Callback triggered when submenu closes. Only valid with submenu prop */
-  onSubmenuClose: PropTypes.func,
-
-  /** Callback triggered when the top-level menu item is clicked */
-  onClick: PropTypes.func
+  "ariaLabel": PropTypes.string,
+  "asPassiveItem": PropTypes.bool,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "clickToOpen": PropTypes.bool,
+  "href": PropTypes.string,
+  "icon": PropTypes.string,
+  "maxWidth": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
+    "big": PropTypes.func.isRequired,
+    "blink": PropTypes.func.isRequired,
+    "bold": PropTypes.func.isRequired,
+    "charAt": PropTypes.func.isRequired,
+    "charCodeAt": PropTypes.func.isRequired,
+    "codePointAt": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "endsWith": PropTypes.func.isRequired,
+    "fixed": PropTypes.func.isRequired,
+    "fontcolor": PropTypes.func.isRequired,
+    "fontsize": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "italics": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "link": PropTypes.func.isRequired,
+    "localeCompare": PropTypes.func.isRequired,
+    "match": PropTypes.func.isRequired,
+    "matchAll": PropTypes.func.isRequired,
+    "normalize": PropTypes.func.isRequired,
+    "padEnd": PropTypes.func.isRequired,
+    "padStart": PropTypes.func.isRequired,
+    "repeat": PropTypes.func.isRequired,
+    "replace": PropTypes.func.isRequired,
+    "search": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "small": PropTypes.func.isRequired,
+    "split": PropTypes.func.isRequired,
+    "startsWith": PropTypes.func.isRequired,
+    "strike": PropTypes.func.isRequired,
+    "sub": PropTypes.func.isRequired,
+    "substr": PropTypes.func.isRequired,
+    "substring": PropTypes.func.isRequired,
+    "sup": PropTypes.func.isRequired,
+    "toLocaleLowerCase": PropTypes.func.isRequired,
+    "toLocaleUpperCase": PropTypes.func.isRequired,
+    "toLowerCase": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "toUpperCase": PropTypes.func.isRequired,
+    "trim": PropTypes.func.isRequired,
+    "trimEnd": PropTypes.func.isRequired,
+    "trimLeft": PropTypes.func.isRequired,
+    "trimRight": PropTypes.func.isRequired,
+    "trimStart": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
+    "big": PropTypes.func.isRequired,
+    "blink": PropTypes.func.isRequired,
+    "bold": PropTypes.func.isRequired,
+    "charAt": PropTypes.func.isRequired,
+    "charCodeAt": PropTypes.func.isRequired,
+    "codePointAt": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "endsWith": PropTypes.func.isRequired,
+    "fixed": PropTypes.func.isRequired,
+    "fontcolor": PropTypes.func.isRequired,
+    "fontsize": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "italics": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "link": PropTypes.func.isRequired,
+    "localeCompare": PropTypes.func.isRequired,
+    "match": PropTypes.func.isRequired,
+    "matchAll": PropTypes.func.isRequired,
+    "normalize": PropTypes.func.isRequired,
+    "padEnd": PropTypes.func.isRequired,
+    "padStart": PropTypes.func.isRequired,
+    "repeat": PropTypes.func.isRequired,
+    "replace": PropTypes.func.isRequired,
+    "search": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "small": PropTypes.func.isRequired,
+    "split": PropTypes.func.isRequired,
+    "startsWith": PropTypes.func.isRequired,
+    "strike": PropTypes.func.isRequired,
+    "sub": PropTypes.func.isRequired,
+    "substr": PropTypes.func.isRequired,
+    "substring": PropTypes.func.isRequired,
+    "sup": PropTypes.func.isRequired,
+    "toLocaleLowerCase": PropTypes.func.isRequired,
+    "toLocaleUpperCase": PropTypes.func.isRequired,
+    "toLowerCase": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "toUpperCase": PropTypes.func.isRequired,
+    "trim": PropTypes.func.isRequired,
+    "trimEnd": PropTypes.func.isRequired,
+    "trimLeft": PropTypes.func.isRequired,
+    "trimRight": PropTypes.func.isRequired,
+    "trimStart": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onClick": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "onSubmenuClose": PropTypes.func,
+  "onSubmenuOpen": PropTypes.func,
+  "showDropdownArrow": PropTypes.bool,
+  "submenuDirection": PropTypes.string,
+  "title": PropTypes.string,
+  "variant": PropTypes.oneOf(["alternate", "default"])
 };
+Submenu.displayName = "submenu";
 export default Submenu;

package/esm/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/esm/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/esm/components/menu/__internal__/submenu/submenu.style.js

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

package/esm/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";