carbon-react 153.6.0 → 153.7.0

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/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;

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

@@ -1,7 +1,7 @@
 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, useMemo } from "react";
 import { StyledTitle, StyledSegmentChildren } from "./menu-segment-title.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";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
@@ -14,26 +14,29 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   as = "h2",
   ...rest
 }, ref) => {
-  const menuContext = useContext(MenuContext);
+  const {
+    menuType,
+    inFullscreenView
+  } = useStrictMenuContext();
   const {
     submenuHasMaxWidth
   } = useContext(SubmenuContext);
-  const isChildOfFullscreenMenu = menuContext?.inFullscreenView || false;
+  const isChildOfFullscreenMenu = !!inFullscreenView;
   const overriddenVariant = useMemo(() => {
-    return isChildOfFullscreenMenu && variant === "alternate" && ["white", "black"].includes(menuContext.menuType) ? "default" : variant;
-  }, [isChildOfFullscreenMenu, menuContext.menuType, variant]);
+    return isChildOfFullscreenMenu && variant === "alternate" && ["white", "black"].includes(menuType) ? "default" : variant;
+  }, [isChildOfFullscreenMenu, menuType, variant]);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/React.createElement(StyledTitle, _extends({
     as: AS_VALUES.includes(as) ? as : /* istanbul ignore next */"h2"
   }, tagComponent("menu-segment-title", rest), {
-    menuType: menuContext.menuType,
+    menuType: menuType,
     ref: ref,
     variant: overriddenVariant,
     shouldWrap: submenuHasMaxWidth
   }), text), children && /*#__PURE__*/React.createElement(StyledSegmentChildren, {
     "data-role": "menu-segment-children",
-    menuType: menuContext.menuType,
+    menuType: menuType,
     variant: overriddenVariant
   }, /*#__PURE__*/React.createElement(MenuSegmentContext.Provider, {
     value: {

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

@@ -1,5 +1,5 @@
 import { VariantType } from "../menu-item";
-import { MenuType } from "../__internal__/menu.context";
+import type { MenuType } from "../menu.types";
 interface StyledTitleProps {
     variant?: VariantType;
     menuType: MenuType;

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

@@ -1,12 +1,4 @@
 import React from "react";
-import { LayoutProps, FlexboxProps } from "styled-system";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-import { MenuType } from "./__internal__/menu.context";
-export interface MenuProps extends TagProps, Pick<LayoutProps, "width" | "minWidth" | "maxWidth" | "overflow" | "overflowX" | "verticalAlign">, FlexboxProps {
-    /** Children elements */
-    children: React.ReactNode;
-    /** Defines the color scheme of the component */
-    menuType?: MenuType;
-}
+import type { MenuProps } from "./menu.types";
 export declare const Menu: ({ menuType, children, ...rest }: MenuProps) => React.JSX.Element;
 export default Menu;

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

@@ -1,8 +1,9 @@
 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, { useCallback, useState, useRef } from "react";
-import { StyledMenuWrapper } from "./menu.style";
 import tagComponent from "../../__internal__/utils/helpers/tags";
-import MenuContext from "./__internal__/menu.context";
+import { StyledMenuWrapper } from "./menu.style";
+import { StrictMenuProvider } from "./__internal__/strict-menu.context";
+import MenuContext from "../menu/__internal__/menu.context";
 import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation";
 import { MENU_ITEM_CHILDREN_LOCATOR } from "./__internal__/locators";
 export const Menu = ({
@@ -46,10 +47,9 @@ export const Menu = ({
     ref: ref,
     role: "list",
     onKeyDown: handleKeyDown
-  }), /*#__PURE__*/React.createElement(MenuContext.Provider, {
+  }), /*#__PURE__*/React.createElement(StrictMenuProvider, {
     value: {
       menuType,
-      inMenu: true,
       openSubmenuId,
       setOpenSubmenuId,
       focusId,
@@ -57,6 +57,10 @@ export const Menu = ({
       registerItem,
       unregisterItem
     }
-  }, children));
+  }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: {
+      inMenu: true
+    }
+  }, children)));
 };
 export default Menu;

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

@@ -1,5 +1,5 @@
 import { FlexboxProps, LayoutProps, PaddingProps } from "styled-system";
-import { MenuProps } from "./menu.component";
+import type { MenuProps } from "./menu.types";
 interface StyledMenuProps extends Pick<MenuProps, "menuType">, FlexboxProps, LayoutProps {
     inFullscreenView?: boolean;
 }

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FlexboxProps, LayoutProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export type MenuType = "light" | "dark" | "white" | "black";
+export interface MenuProps extends TagProps, Pick<LayoutProps, "width" | "minWidth" | "maxWidth" | "overflow" | "overflowX" | "verticalAlign">, FlexboxProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /** Defines the color scheme of the component */
+    menuType?: MenuType;
+}

package/esm/components/menu/menu.types.js

@@ -0,0 +1 @@
+export {};

package/esm/components/menu/scrollable-block/scrollable-block.component.js

@@ -1,6 +1,6 @@
 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 MenuContext from "../__internal__/menu.context";
+import React from "react";
+import { useStrictMenuContext } from "../__internal__/strict-menu.context";
 import MenuItem from "../menu-item";
 import StyledScrollableBlock from "./scrollable-block.style";
 import Box from "../../box";
@@ -15,7 +15,7 @@ export const ScrollableBlock = ({
 }) => {
   const {
     menuType
-  } = useContext(MenuContext);
+  } = useStrictMenuContext();
   const scrollVariants = {
     light: "light",
     dark: "dark",

package/esm/components/menu/scrollable-block/scrollable-block.style.d.ts

@@ -1,5 +1,5 @@
-import { MenuType } from "../__internal__/menu.context";
 import { VariantType } from "../menu-item";
+import type { MenuType } from "../menu.types";
 interface StyledScrollableBlockProps {
     menuType: MenuType;
     variant: VariantType;

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

@@ -21,7 +21,7 @@ export const VerticalDivider = ({
     displayInline: displayInline
   }, props, {
     as: inMenu ? "li" : "div",
-    "aria-hidden": inMenu ?? ariaHidden
+    "aria-hidden": inMenu || ariaHidden
   }, tagComponent("vertical-divider", props)), /*#__PURE__*/React.createElement(StyledDivider, {
     "data-role": "divider",
     tint: tint

package/lib/__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/lib/__internal__/utils/createStrictContext.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _logger = _interopRequireDefault(require("./logger"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.default.createContext(null);
+  Context.displayName = name;
+  function useContext() {
+    const context = _react.default.useContext(Context);
+    if (!context) {
+      _logger.default.error(`${errorMessage}\nThis logged warning will become a thrown error in a future major release.`);
+      return defaultValue;
+    }
+    return context;
+  }
+  return [Context.Provider, useContext];
+}
+var _default = exports.default = createStrictContext;

package/lib/__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/lib/__internal__/utils/logger/index.js

@@ -5,27 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /* 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);
+    }
   }
 };
 var _default = exports.default = Logger;

package/lib/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/lib/components/menu/__internal__/menu.context.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = /*#__PURE__*/_react.default.createContext({
-  menuType: "light",
-  openSubmenuId: null,
-  setOpenSubmenuId: /* istanbul ignore next */() => {}
+var _react = require("react");
+var _default = exports.default = /*#__PURE__*/(0, _react.createContext)({
+  inMenu: false
 });

package/lib/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/lib/components/menu/__internal__/strict-menu.context.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStrictMenuContext = exports.StrictMenuProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [StrictMenuProvider, useStrictMenuContext] = (0, _createStrictContext.default)({
+  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 */() => {}
+  }
+});
+exports.useStrictMenuContext = useStrictMenuContext;
+exports.StrictMenuProvider = StrictMenuProvider;

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

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"));
 var _submenu = require("./submenu.style");
 var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
-var _menu = _interopRequireDefault(require("../menu.context"));
+var _strictMenu = require("../strict-menu.context");
 var _keyboardNavigation = require("../keyboard-navigation");
 var _submenu2 = _interopRequireDefault(require("./submenu.context"));
 var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
@@ -42,13 +42,12 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const [submenuRef, setSubmenuRef] = (0, _react.useState)(null);
   const submenuId = (0, _react.useRef)((0, _guid.default)());
-  const menuContext = (0, _react.useContext)(_menu.default);
   const {
     inFullscreenView,
     openSubmenuId,
     setOpenSubmenuId,
     menuType
-  } = menuContext;
+  } = (0, _strictMenu.useStrictMenuContext)();
   const [submenuOpen, setSubmenuOpen] = (0, _react.useState)(false);
   const [submenuFocusId, setSubmenuFocusId] = (0, _react.useState)(null);
   const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
@@ -274,7 +273,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       "data-component": "submenu-wrapper",
       inFullscreenView: inFullscreenView,
       asPassiveItem: asPassiveItem,
-      menuType: menuContext.menuType
+      menuType: menuType
     }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
       onClick: asPassiveItem ? undefined : onClick,
       className: className,

package/lib/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/lib/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/lib/components/menu/menu-divider/menu-divider.component.js

@@ -4,26 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _menuDivider = _interopRequireDefault(require("./menu-divider.style"));
-var _menu = _interopRequireDefault(require("../__internal__/menu.context"));
-var _menu2 = require("../menu.style");
+var _strictMenu = require("../__internal__/strict-menu.context");
+var _menu = require("../menu.style");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 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; }
 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); }
 const MenuDivider = /*#__PURE__*/_react.default.forwardRef(({
   size = "default",
   ...rest
 }, ref) => {
-  const menuContext = (0, _react.useContext)(_menu.default);
-  return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, {
+  const {
+    menuType
+  } = (0, _strictMenu.useStrictMenuContext)();
+  return /*#__PURE__*/_react.default.createElement(_menu.StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/_react.default.createElement(_menuDivider.default, _extends({
     size: size
   }, (0, _tags.default)("menu-divider", rest), {
-    menuType: menuContext.menuType,
+    menuType: menuType,
     ref: ref
   })));
 });

package/lib/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/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactTransitionGroup = require("react-transition-group");
 var _menuFullScreen = require("./menu-full-screen.style");
 var _menu = require("../menu.style");
-var _menu2 = _interopRequireDefault(require("../__internal__/menu.context"));
+var _strictMenu = require("../__internal__/strict-menu.context");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _box = _interopRequireDefault(require("../../box"));
 var _iconButton = _interopRequireDefault(require("../../icon-button"));
@@ -39,7 +39,7 @@ const MenuFullscreen = ({
   const isTopModal = (0, _useModalAria.default)(modalRef);
   const {
     menuType
-  } = (0, _react.useContext)(_menu2.default);
+  } = (0, _strictMenu.useStrictMenuContext)();
   const isDarkVariant = ["dark", "black"].includes(menuType);
   const transitionDuration = 200;
   const locale = (0, _useLocale.default)();
@@ -110,11 +110,10 @@ const MenuFullscreen = ({
     flexDirection: "column",
     role: "list",
     inFullscreenView: true
-  }, /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_strictMenu.StrictMenuProvider, {
     value: {
       inFullscreenView: true,
       menuType,
-      inMenu: true,
       openSubmenuId: null,
       setOpenSubmenuId: /* istanbul ignore next */() => {}
     }

package/lib/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/lib/components/menu/menu-item/menu-item.component.js

@@ -10,11 +10,11 @@ var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils
 var _utils = require("../../../style/utils");
 var _menuItem = _interopRequireDefault(require("./menu-item.style"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
-var _menu = _interopRequireDefault(require("../__internal__/menu.context"));
+var _strictMenu = require("../__internal__/strict-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 _menu = require("../menu.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 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); }
@@ -61,7 +61,7 @@ const MenuItem = ({
     focusId,
     updateFocusId,
     menuType
-  } = (0, _react.useContext)(_menu.default);
+  } = (0, _strictMenu.useStrictMenuContext)();
   const submenuContext = (0, _react.useContext)(_submenu2.default);
   const isInSubmenu = Object.keys(submenuContext).length > 0;
   const {
@@ -79,7 +79,7 @@ const MenuItem = ({
     if (firstFocusable !== firstFocusableChild) {
       setFirstFocusableChild(firstFocusable);
     }
-  }, [ref]);
+  }, [firstFocusableChild, ref]);
   (0, _react.useEffect)(() => {
     const id = menuItemId.current;
 
@@ -102,7 +102,7 @@ const MenuItem = ({
       }
       ref?.focus();
     }
-  }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
+  }, [firstFocusableChild, focusFromMenu, focusFromSubmenu, ref]);
   const handleFocus = event => {
     if (isInSubmenu) {
       event.stopPropagation();
@@ -138,7 +138,7 @@ const MenuItem = ({
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
   const asPassiveItem = !(onClick || href || firstFocusableChild);
   if (submenu) {
-    return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
+    return /*#__PURE__*/_react.default.createElement(_menu.StyledMenuItem, _extends({
       "data-component": "menu-item",
       "data-element": dataElement,
       "data-role": dataRole,
@@ -169,7 +169,7 @@ const MenuItem = ({
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
   const hasInput = !!ref?.querySelector("[data-element='input']");
-  return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
+  return /*#__PURE__*/_react.default.createElement(_menu.StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,
     "data-role": dataRole,

package/lib/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;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _menuSegmentTitle = require("./menu-segment-title.style");
-var _menu = _interopRequireDefault(require("../__internal__/menu.context"));
-var _menu2 = require("../menu.style");
+var _strictMenu = require("../__internal__/strict-menu.context");
+var _menu = 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"));
@@ -23,26 +23,29 @@ const MenuSegmentTitle = /*#__PURE__*/_react.default.forwardRef(({
   as = "h2",
   ...rest
 }, ref) => {
-  const menuContext = (0, _react.useContext)(_menu.default);
+  const {
+    menuType,
+    inFullscreenView
+  } = (0, _strictMenu.useStrictMenuContext)();
   const {
     submenuHasMaxWidth
   } = (0, _react.useContext)(_submenu.default);
-  const isChildOfFullscreenMenu = menuContext?.inFullscreenView || false;
+  const isChildOfFullscreenMenu = !!inFullscreenView;
   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, {
+    return isChildOfFullscreenMenu && variant === "alternate" && ["white", "black"].includes(menuType) ? "default" : variant;
+  }, [isChildOfFullscreenMenu, menuType, variant]);
+  return /*#__PURE__*/_react.default.createElement(_menu.StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledTitle, _extends({
     as: AS_VALUES.includes(as) ? as : /* istanbul ignore next */"h2"
   }, (0, _tags.default)("menu-segment-title", rest), {
-    menuType: menuContext.menuType,
+    menuType: menuType,
     ref: ref,
     variant: overriddenVariant,
     shouldWrap: submenuHasMaxWidth
   }), text), children && /*#__PURE__*/_react.default.createElement(_menuSegmentTitle.StyledSegmentChildren, {
     "data-role": "menu-segment-children",
-    menuType: menuContext.menuType,
+    menuType: menuType,
     variant: overriddenVariant
   }, /*#__PURE__*/_react.default.createElement(_menuSegmentTitle2.default.Provider, {
     value: {

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

@@ -1,5 +1,5 @@
 import { VariantType } from "../menu-item";
-import { MenuType } from "../__internal__/menu.context";
+import type { MenuType } from "../menu.types";
 interface StyledTitleProps {
     variant?: VariantType;
     menuType: MenuType;

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

@@ -1,12 +1,4 @@
 import React from "react";
-import { LayoutProps, FlexboxProps } from "styled-system";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-import { MenuType } from "./__internal__/menu.context";
-export interface MenuProps extends TagProps, Pick<LayoutProps, "width" | "minWidth" | "maxWidth" | "overflow" | "overflowX" | "verticalAlign">, FlexboxProps {
-    /** Children elements */
-    children: React.ReactNode;
-    /** Defines the color scheme of the component */
-    menuType?: MenuType;
-}
+import type { MenuProps } from "./menu.types";
 export declare const Menu: ({ menuType, children, ...rest }: MenuProps) => React.JSX.Element;
 export default Menu;

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

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Menu = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _menu = require("./menu.style");
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-var _menu2 = _interopRequireDefault(require("./__internal__/menu.context"));
+var _menu = require("./menu.style");
+var _strictMenu = require("./__internal__/strict-menu.context");
+var _menu2 = _interopRequireDefault(require("../menu/__internal__/menu.context"));
 var _keyboardNavigation = require("./__internal__/keyboard-navigation");
 var _locators = require("./__internal__/locators");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -55,10 +56,9 @@ const Menu = ({
     ref: ref,
     role: "list",
     onKeyDown: handleKeyDown
-  }), /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
+  }), /*#__PURE__*/_react.default.createElement(_strictMenu.StrictMenuProvider, {
     value: {
       menuType,
-      inMenu: true,
       openSubmenuId,
       setOpenSubmenuId,
       focusId,
@@ -66,7 +66,11 @@ const Menu = ({
       registerItem,
       unregisterItem
     }
-  }, children));
+  }, /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
+    value: {
+      inMenu: true
+    }
+  }, children)));
 };
 exports.Menu = Menu;
 var _default = exports.default = Menu;

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

@@ -1,5 +1,5 @@
 import { FlexboxProps, LayoutProps, PaddingProps } from "styled-system";
-import { MenuProps } from "./menu.component";
+import type { MenuProps } from "./menu.types";
 interface StyledMenuProps extends Pick<MenuProps, "menuType">, FlexboxProps, LayoutProps {
     inFullscreenView?: boolean;
 }

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FlexboxProps, LayoutProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export type MenuType = "light" | "dark" | "white" | "black";
+export interface MenuProps extends TagProps, Pick<LayoutProps, "width" | "minWidth" | "maxWidth" | "overflow" | "overflowX" | "verticalAlign">, FlexboxProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /** Defines the color scheme of the component */
+    menuType?: MenuType;
+}

package/lib/components/menu/menu.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/menu/scrollable-block/scrollable-block.component.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ScrollableBlock = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _menu = _interopRequireDefault(require("../__internal__/menu.context"));
+var _react = _interopRequireDefault(require("react"));
+var _strictMenu = require("../__internal__/strict-menu.context");
 var _menuItem = _interopRequireDefault(require("../menu-item"));
 var _scrollableBlock = _interopRequireDefault(require("./scrollable-block.style"));
 var _box = _interopRequireDefault(require("../../box"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 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; }
 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); }
 const ScrollableBlock = ({
   children,
@@ -24,7 +22,7 @@ const ScrollableBlock = ({
 }) => {
   const {
     menuType
-  } = (0, _react.useContext)(_menu.default);
+  } = (0, _strictMenu.useStrictMenuContext)();
   const scrollVariants = {
     light: "light",
     dark: "dark",

package/lib/components/menu/scrollable-block/scrollable-block.style.d.ts

@@ -1,5 +1,5 @@
-import { MenuType } from "../__internal__/menu.context";
 import { VariantType } from "../menu-item";
+import type { MenuType } from "../menu.types";
 interface StyledScrollableBlockProps {
     menuType: MenuType;
     variant: VariantType;

package/lib/components/vertical-divider/vertical-divider.component.js

@@ -30,7 +30,7 @@ const VerticalDivider = ({
     displayInline: displayInline
   }, props, {
     as: inMenu ? "li" : "div",
-    "aria-hidden": inMenu ?? ariaHidden
+    "aria-hidden": inMenu || ariaHidden
   }, (0, _tags.default)("vertical-divider", props)), /*#__PURE__*/_react.default.createElement(_verticalDivider.StyledDivider, {
     "data-role": "divider",
     tint: tint

package/package.json

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