carbon-react 153.6.0 → 153.7.1

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

@@ -27,7 +27,10 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     labelWidth?: number;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** If true the label switches position with the input */
     reverse?: boolean;

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

@@ -26,7 +26,10 @@ export interface FieldsetProps extends MarginProps {
     legendMargin?: Pick<MarginProps, "mb">;
     /** Any valid CSS string to set the component's width */
     width?: string;
-    /** Flag to configure component as optional in Form */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Apply disabled styling to the legend content */
     isDisabled?: boolean;

package/esm/__internal__/fieldset/fieldset.style.d.ts

@@ -4,6 +4,10 @@ type StyledFieldsetProps = {
 declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
 type StyledLegendContentProps = {
     isRequired?: boolean;
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     isDisabled?: boolean;
     optionalLabel?: string;

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -53,7 +53,10 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     fieldHelpInline?: boolean;
     /** Id of the element a label should be bound to */
     id: string;
-    /** Flag to configure component as optional in Form */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;

package/esm/__internal__/utils/createStrictContext.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+type CreateStrictContextArgs<ContextType> = {
+    /** The display name of the context. */
+    name?: string;
+    /** Error message to log if context is accessed outside its provider. */
+    errorMessage: string;
+    /** Default value to return if context is accessed outside its provider. */
+    defaultValue: ContextType;
+};
+type CreateStrictContextReturn<ContextType> = readonly [
+    React.Provider<ContextType | null>,
+    () => ContextType
+];
+/**
+ * Creates a React context with a provider and a hook for accessing the context.
+ * Logs an error and returns a default value if the hook is used outside of the provider.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [ListProvider, useList] = createStrictContext<{ size: number }>({
+ *    name: "ListContext",
+ *    errorMessage: "ListContext is undefined. Make sure to wrap your component with <ListProvider />",
+ *    defaultValue: {
+ *      size: 0,
+ *    },
+ * });
+ * ```
+ */
+declare function createStrictContext<ContextType>({ name, errorMessage, defaultValue, }: CreateStrictContextArgs<ContextType>): CreateStrictContextReturn<ContextType>;
+export default createStrictContext;

package/esm/__internal__/utils/createStrictContext.js

@@ -0,0 +1,36 @@
+import React from "react";
+import Logger from "./logger";
+/**
+ * Creates a React context with a provider and a hook for accessing the context.
+ * Logs an error and returns a default value if the hook is used outside of the provider.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [ListProvider, useList] = createStrictContext<{ size: number }>({
+ *    name: "ListContext",
+ *    errorMessage: "ListContext is undefined. Make sure to wrap your component with <ListProvider />",
+ *    defaultValue: {
+ *      size: 0,
+ *    },
+ * });
+ * ```
+ */
+function createStrictContext({
+  name,
+  errorMessage,
+  defaultValue
+}) {
+  const Context = /*#__PURE__*/React.createContext(null);
+  Context.displayName = name;
+  function useContext() {
+    const context = React.useContext(Context);
+    if (!context) {
+      Logger.error(`${errorMessage}\nThis logged warning will become a thrown error in a future major release.`);
+      return defaultValue;
+    }
+    return context;
+  }
+  return [Context.Provider, useContext];
+}
+export default createStrictContext;

package/esm/__internal__/utils/logger/index.d.ts

@@ -1,5 +1,12 @@
+/**
+ * Utility for dispatching messages to the browser console.
+ * By default, logging is disabled in production mode.
+ */
 declare const Logger: {
     setEnabledState: (newState: boolean) => void;
+    /** Logs warning-level message to browser console with [Deprecation] prefix */
     deprecate: (message: string) => void;
+    /** Logs error-level message to browser console. Includes stack trace. */
+    error: (message: string) => void;
 };
 export default Logger;

package/esm/__internal__/utils/logger/index.js

@@ -1,25 +1,27 @@
 /* eslint-disable no-console */
+
 // Globally enable the logger
 let enabled = process.env.NODE_ENV !== "production";
 
-/*
- * Logger
- *
- * Logger function will only output when enabled. By default this
- * enabled state is set when your NODE_ENV !== 'production'
- *
- * Methods
- * deprecate - console.warn which prepends the message with [Deprecation]
- *
+/**
+ * Utility for dispatching messages to the browser console.
+ * By default, logging is disabled in production mode.
  */
 const Logger = {
   setEnabledState: newState => {
     enabled = newState;
   },
+  /** Logs warning-level message to browser console with [Deprecation] prefix */
   deprecate: message => {
     if (enabled) {
       console.warn(`[Deprecation] ${message}`);
     }
+  },
+  /** Logs error-level message to browser console. Includes stack trace. */
+  error: message => {
+    if (enabled) {
+      console.error(message);
+    }
   }
 };
 export default Logger;

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

@@ -112,6 +112,14 @@ const Button = /*#__PURE__*/React.forwardRef(({
       internalRef?.click();
     }
   };
+  const handleClick = event => {
+    internalRef?.focus();
+    if (inSplitButton) {
+      onChildButtonClick?.(onClick)?.(event);
+    } else if (onClick) {
+      onClick(event);
+    }
+  };
   switch (size) {
     case "small":
       paddingX = 2;
@@ -135,7 +143,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     "aria-describedby": ariaDescribedBy,
     as: !isDisabled && href ? "a" : "button",
     onKeyDown: href ? handleLinkKeyDown : undefined,
-    onClick: inSplitButton ? onChildButtonClick?.(onClick) : onClick,
+    onClick: handleClick,
     draggable: false,
     buttonType: buttonType,
     disabled: isDisabled,

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -29,7 +29,10 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps, TagPro
     labelSpacing?: 1 | 2;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";

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

@@ -13,6 +13,8 @@ import CheckboxGroupContext from "./__internal__/checkbox-group.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
 import HintText from "../../../__internal__/hint-text";
+import Logger from "../../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const CheckboxGroup = ({
   children,
   legend,
@@ -31,6 +33,10 @@ export const CheckboxGroup = ({
   id,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in CheckboxGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

package/esm/components/date-range/date-range.component.d.ts

@@ -83,7 +83,10 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Flag to configure component as mandatory. */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Date format string to be applied to the date inputs */
     dateFormatOverride?: string;

package/esm/components/date-range/date-range.component.js

@@ -11,6 +11,8 @@ import usePrevious from "../../hooks/__internal__/usePrevious";
 import getFormatData from "../date/__internal__/date-formats";
 import DateRangeContext from "./__internal__/date-range.context";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const DateRange = ({
   endDateProps = {},
   id,
@@ -32,6 +34,10 @@ export const DateRange = ({
   datePickerEndAriaLabelledBy,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in DateRange and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

package/esm/components/fieldset/fieldset.component.d.ts

@@ -8,7 +8,10 @@ export interface FieldsetProps extends MarginProps, TagProps {
     legend?: string;
     /** Flag to configure fields as mandatory. */
     required?: boolean;
-    /** Flag to configure fields as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 export declare const Fieldset: {

package/esm/components/fieldset/fieldset.component.js

@@ -5,6 +5,8 @@ import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const Fieldset = ({
   children,
   legend,
@@ -12,6 +14,10 @@ export const Fieldset = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in Fieldset and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const [ref, setRef] = useState(null);
   const marginProps = filterStyledSystemMarginProps(rest);
   const {

package/esm/components/fieldset/fieldset.style.d.ts

@@ -5,7 +5,10 @@ declare const FieldsetStyle: import("styled-components").StyledComponent<"fields
 export interface StyledLegendProps {
     /** Flag to configure fields as mandatory. */
     isRequired?: boolean;
-    /** Flag to configure fields as optional. */
+    /**
+     * [Legacy] Flag to configure fields as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Text used for the optional label */
     optionalLabel?: string;

package/esm/components/file-input/file-input.component.d.ts

@@ -33,7 +33,10 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     uploadStatus?: FileUploadStatusProps | FileUploadStatusProps[];
     /** Flag to configure component as mandatory. */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;

package/esm/components/file-input/file-input.component.js

@@ -14,6 +14,8 @@ import FileUploadStatus from "./__internal__/file-upload-status";
 import Box from "../box";
 import useLocale from "../../hooks/__internal__/useLocale";
 import HintText from "../../__internal__/hint-text";
+import Logger from "../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const FileInput = /*#__PURE__*/React.forwardRef(({
   accept,
   buttonText,
@@ -36,6 +38,10 @@ export const FileInput = /*#__PURE__*/React.forwardRef(({
   uploadStatus = [],
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in FileInput and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const locale = useLocale();
   const textOnButton = buttonText || locale.fileInput.selectFile();
   const mainText = dragAndDropText || locale.fileInput.dragAndDrop();

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -26,7 +26,10 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelId?: string;
     /** Flag to configure component as mandatory. */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 declare const InlineInputs: {

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -5,6 +5,7 @@ import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from ".
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
 const columnWrapper = (children, gutter) => {
   return React.Children.map(children, input => {
     return /*#__PURE__*/React.createElement(StyledInlineInput, {
@@ -13,6 +14,7 @@ const columnWrapper = (children, gutter) => {
     }, input);
   });
 };
+let deprecateOptionalWarnTriggered = false;
 const InlineInputs = ({
   adaptiveLabelBreakpoint,
   label,
@@ -28,6 +30,10 @@ const InlineInputs = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in InlineInputs and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   const ref = useRef(null);
   let inlineLabel = labelInline;

package/esm/components/menu/__internal__/menu.context.d.ts

@@ -1,15 +1,6 @@
-import React from "react";
-export type MenuType = "light" | "dark" | "white" | "black";
-export interface MenuContextProps {
-    menuType: MenuType;
-    openSubmenuId: string | null;
+/// <reference types="react" />
+interface MenuContextType {
     inMenu?: boolean;
-    inFullscreenView?: boolean;
-    setOpenSubmenuId: (id: string | null) => void;
-    registerItem?: (id: string) => void;
-    unregisterItem?: (id: string) => void;
-    focusId?: string;
-    updateFocusId?: (id: string) => void;
 }
-declare const _default: React.Context<MenuContextProps>;
+declare const _default: import("react").Context<MenuContextType>;
 export default _default;

package/esm/components/menu/__internal__/menu.context.js

@@ -1,6 +1,4 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({
-  menuType: "light",
-  openSubmenuId: null,
-  setOpenSubmenuId: /* istanbul ignore next */() => {}
+import { createContext } from "react";
+export default /*#__PURE__*/createContext({
+  inMenu: false
 });

package/esm/components/menu/__internal__/strict-menu.context.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { MenuType } from "../menu.types";
+export interface StrictMenuContextType {
+    menuType: MenuType;
+    openSubmenuId: string | null;
+    inFullscreenView?: boolean;
+    setOpenSubmenuId: (id: string | null) => void;
+    registerItem?: (id: string) => void;
+    unregisterItem?: (id: string) => void;
+    focusId?: string;
+    updateFocusId?: (id: string) => void;
+}
+declare const StrictMenuProvider: import("react").Provider<StrictMenuContextType | null>, useStrictMenuContext: () => StrictMenuContextType;
+export { StrictMenuProvider, useStrictMenuContext };

package/esm/components/menu/__internal__/strict-menu.context.js

@@ -0,0 +1,11 @@
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [StrictMenuProvider, useStrictMenuContext] = createStrictContext({
+  name: "MenuContext",
+  errorMessage: "Carbon Menu: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    menuType: "light",
+    openSubmenuId: null,
+    setOpenSubmenuId: /* istanbul ignore next */() => {}
+  }
+});
+export { StrictMenuProvider, useStrictMenuContext };

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

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useContext, useMemo, useRef, useState }
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
 import { StyledSubmenu, StyledSubmenuWrapper } from "./submenu.style";
 import Events from "../../../../__internal__/utils/helpers/events";
-import MenuContext from "../menu.context";
+import { useStrictMenuContext } from "../strict-menu.context";
 import { characterNavigation } from "../keyboard-navigation";
 import SubmenuContext from "./submenu.context";
 import guid from "../../../../__internal__/utils/helpers/guid";
@@ -33,13 +33,12 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const [submenuRef, setSubmenuRef] = useState(null);
   const submenuId = useRef(guid());
-  const menuContext = useContext(MenuContext);
   const {
     inFullscreenView,
     openSubmenuId,
     setOpenSubmenuId,
     menuType
-  } = menuContext;
+  } = useStrictMenuContext();
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const [submenuFocusId, setSubmenuFocusId] = useState(null);
   const [submenuItemIds, setSubmenuItemIds] = useState([]);
@@ -265,7 +264,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       "data-component": "submenu-wrapper",
       inFullscreenView: inFullscreenView,
       asPassiveItem: asPassiveItem,
-      menuType: menuContext.menuType
+      menuType: menuType
     }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
       onClick: asPassiveItem ? undefined : onClick,
       className: className,

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

@@ -1,5 +1,5 @@
 import { SubmenuProps } from "./submenu.component";
-import { MenuType } from "../menu.context";
+import type { MenuType } from "../../menu.types";
 interface SharedStyleProps {
     inFullscreenView?: boolean;
     menuType?: MenuType;

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

@@ -1,5 +1,5 @@
 export { default as Menu } from "./menu.component";
-export type { MenuProps } from "./menu.component";
+export type { MenuProps } from "./menu.types";
 export { default as MenuItem } from "./menu-item";
 export type { MenuWithIcon, MenuWithChildren } from "./menu-item";
 export { default as MenuDivider } from "./menu-divider";

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

@@ -1,20 +1,22 @@
 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 from "react";
 import StyledDivider from "./menu-divider.style";
-import MenuContext from "../__internal__/menu.context";
+import { useStrictMenuContext } from "../__internal__/strict-menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 const MenuDivider = /*#__PURE__*/React.forwardRef(({
   size = "default",
   ...rest
 }, ref) => {
-  const menuContext = useContext(MenuContext);
+  const {
+    menuType
+  } = useStrictMenuContext();
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/React.createElement(StyledDivider, _extends({
     size: size
   }, tagComponent("menu-divider", rest), {
-    menuType: menuContext.menuType,
+    menuType: menuType,
     ref: ref
   })));
 });

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

@@ -1,5 +1,5 @@
 import { MenuDividerProps } from "./menu-divider.component";
-import { MenuType } from "../__internal__/menu.context";
+import type { MenuType } from "../menu.types";
 declare const StyledDivider: import("styled-components").StyledComponent<"div", any, MenuDividerProps & {
     menuType: MenuType;
 }, never>;

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

@@ -1,8 +1,8 @@
-import React, { useCallback, useContext, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import { CSSTransition } from "react-transition-group";
 import { StyledMenuFullscreen, StyledMenuModal, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
 import { StyledMenuWrapper } from "../menu.style";
-import MenuContext from "../__internal__/menu.context";
+import { useStrictMenuContext, StrictMenuProvider } from "../__internal__/strict-menu.context";
 import Events from "../../../__internal__/utils/helpers/events";
 import Box from "../../box";
 import IconButton from "../../icon-button";
@@ -30,7 +30,7 @@ export const MenuFullscreen = ({
   const isTopModal = useModalAria(modalRef);
   const {
     menuType
-  } = useContext(MenuContext);
+  } = useStrictMenuContext();
   const isDarkVariant = ["dark", "black"].includes(menuType);
   const transitionDuration = 200;
   const locale = useLocale();
@@ -101,11 +101,10 @@ export const MenuFullscreen = ({
     flexDirection: "column",
     role: "list",
     inFullscreenView: true
-  }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
+  }, /*#__PURE__*/React.createElement(StrictMenuProvider, {
     value: {
       inFullscreenView: true,
       menuType,
-      inMenu: true,
       openSubmenuId: null,
       setOpenSubmenuId: /* istanbul ignore next */() => {}
     }

package/esm/components/menu/menu-full-screen/menu-full-screen.style.d.ts

@@ -1,4 +1,4 @@
-import { MenuType } from "../__internal__/menu.context";
+import type { MenuType } from "../menu.types";
 declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, {
     transitionDuration: number;
     startPosition: "left" | "right";

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

@@ -5,7 +5,7 @@ import { defaultFocusableSelectors as focusableSelectors } from "../../../__inte
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledMenuItemWrapper from "./menu-item.style";
 import Events from "../../../__internal__/utils/helpers/events";
-import MenuContext from "../__internal__/menu.context";
+import { useStrictMenuContext } from "../__internal__/strict-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";
@@ -52,7 +52,7 @@ export const MenuItem = ({
     focusId,
     updateFocusId,
     menuType
-  } = useContext(MenuContext);
+  } = useStrictMenuContext();
   const submenuContext = useContext(SubmenuContext);
   const isInSubmenu = Object.keys(submenuContext).length > 0;
   const {
@@ -70,7 +70,7 @@ export const MenuItem = ({
     if (firstFocusable !== firstFocusableChild) {
       setFirstFocusableChild(firstFocusable);
     }
-  }, [ref]);
+  }, [firstFocusableChild, ref]);
   useEffect(() => {
     const id = menuItemId.current;
 
@@ -93,7 +93,7 @@ export const MenuItem = ({
       }
       ref?.focus();
     }
-  }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
+  }, [firstFocusableChild, focusFromMenu, focusFromSubmenu, ref]);
   const handleFocus = event => {
     if (isInSubmenu) {
       event.stopPropagation();

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { PaddingProps } from "styled-system";
-import { MenuType } from "../__internal__/menu.context";
 import { MenuWithChildren } from "./menu-item.component";
+import type { MenuType } from "../menu.types";
 interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
     menuType: MenuType;
     selected?: boolean;