carbon-react 153.5.2 → 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/icon/icon-config.js

@@ -22,5 +22,5 @@ export const ICON_TOOLTIP_POSITIONS = ["bottom", "left", "right", "top"];
 export const ICON_SHAPES = ["circle", "rounded-rect", "square"];
 export const ICON_SIZES = ["small", "medium", "large", "extra-large"];
 export const ICON_FONT_SIZES = ["small", "medium", "large", "extra-large"];
-export const ICONS = ["accessibility_web", "add", "admin", "alert", "alert_on", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow", "arrow_bottom_right_circle", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_top_left_circle", "arrow_up", "arrows_left_right", "attach", "bank", "bank_with_card", "basket", "basket_with_squares", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "blocked", "blocked_square", "block_arrow_right", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "calendar_pay_date", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "cash", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "check_all", "check_none", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect", "connect_off", "construction", "contacts", "contact_card", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "drill", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "export", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "heart_pulse", "help", "hide", "hand_cash_coins", "hand_cash_note", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "like", "like_no", "link", "link_cloud", "link_on", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus", "minus_large", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause", "pause_circle", "petrol_pump", "pdf", "pin", "people", "people_switch", "percentage_boxed", "person", "person_info", "person_tick", "phone", "piggy_bank", "plane", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "protect", "question", "question_hollow", "question_mark", "recruiting", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings", "settings_old", "share", "shield_with_tick", "shield_with_tick_outline", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "stop", "stop_circle", "submitted", "support_online", "sync", "tag", "talk", "target", "target_man", "theatre_masks", "three_boxes", "tick", "tick_circle", "tick_thick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare", "worldwide_location"];
+export const ICONS = ["accessibility_web", "add", "admin", "airplay", "alert", "alert_on", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow", "arrow_bottom_right_circle", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_top_left_circle", "arrow_up", "arrows_left_right", "attach", "bank", "bank_with_card", "basket", "basket_with_squares", "batch", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "blocked", "blocked_square", "block_arrow_right", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "calendar_pay_date", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "cash", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "check_all", "check_none", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "chromecast", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect", "connect_off", "construction", "contacts", "contact_card", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "drill", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "export", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "form_refresh", "framerate", "fullscreen", "gift", "go", "graduation_hat", "graph", "grid", "heart_pulse", "help", "hide", "hand_cash_coins", "hand_cash_note", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "like", "like_no", "link", "link_cloud", "link_on", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "microphone", "minimise", "minus", "minus_large", "mobile", "money_bag", "mute", "none", "normalscreen", "old_warning", "page", "palm_tree", "pause", "pause_circle", "petrol_pump", "pdf", "pin", "people", "people_switch", "percentage_boxed", "person", "person_info", "person_tick", "phone", "picture_in_picture", "piggy_bank", "plane", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "protect", "question", "question_hollow", "question_mark", "recruiting", "refresh", "refresh_clock", "remove", "replay", "sage_coin", "save", "scan", "search", "send", "services", "settings", "settings_old", "share", "shield_with_tick", "shield_with_tick_outline", "shop", "sort_down", "sort_up", "spanner", "speaker", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "stop", "stop_circle", "submitted", "subtitles", "support_online", "sync", "tag", "talk", "target", "target_man", "theatre_masks", "three_boxes", "tick", "tick_circle", "tick_thick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volume_high", "volume_low", "volume_medium", "volunteering", "warning", "website", "welfare", "worldwide_location"];
 export default dlsConfig;

package/esm/components/icon/icon-type.d.ts

@@ -1 +1 @@
-export type IconType = "accessibility_web" | "add" | "admin" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "none" | "old_warning" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "piggy_bank" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "split" | "split_container" | "square_dot" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "true_tick" | "u_turn_left" | "u_turn_right" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";
+export type IconType = "accessibility_web" | "add" | "admin" | "airplay" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "batch" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "chromecast" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "framerate" | "fullscreen" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "mute" | "none" | "normalscreen" | "old_warning" | "page" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "picture_in_picture" | "piggy_bank" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "replay" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "speaker" | "split" | "split_container" | "square_dot" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "subtitles" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "true_tick" | "u_turn_left" | "u_turn_right" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volume_high" | "volume_low" | "volume_medium" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";

package/esm/components/icon/icon-unicodes.d.ts

@@ -159,6 +159,21 @@ declare namespace iconUnicodes {
     export let stop: string;
     export let stop_circle: string;
     export let worldwide_location: string;
+    export let airplay: string;
+    export let batch: string;
+    export let chromecast: string;
+    export let framerate: string;
+    export let fullscreen: string;
+    export let mute: string;
+    export let normalscreen: string;
+    export let page: string;
+    export let picture_in_picture: string;
+    export let replay: string;
+    export let speaker: string;
+    export let subtitles: string;
+    export let volume_high: string;
+    export let volume_low: string;
+    export let volume_medium: string;
     export let error: string;
     export let warning: string;
     export let tick: string;

package/esm/components/icon/icon-unicodes.js

@@ -257,7 +257,22 @@ const misc = {
   shield_with_tick_outline: "\\f071",
   stop: "\\f068",
   stop_circle: "\\f069",
-  worldwide_location: "\\f072"
+  worldwide_location: "\\f072",
+  airplay: "\\f073",
+  batch: "\\f074",
+  chromecast: "\\f075",
+  framerate: "\\f076",
+  fullscreen: "\\f077",
+  mute: "\\f078",
+  normalscreen: "\\f079",
+  page: "\\f080",
+  picture_in_picture: "\\f081",
+  replay: "\\f082",
+  speaker: "\\f083",
+  subtitles: "\\f084",
+  volume_high: "\\f087",
+  volume_low: "\\f085",
+  volume_medium: "\\f086"
 };
 const legacyNames = {
   add: actions.plus,

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;