carbon-react 153.7.1 → 153.8.0

package/esm/components/definition-list/dl.component.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { DlContextProps } from "./__internal__/dl.context";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface DlProps extends SpaceProps, DlContextProps, TagProps {
+type ElementAlignment = "left" | "center" | "right";
+export interface DlProps extends SpaceProps, TagProps {
     /** HTML id attribute of the input */
     id?: string;
     /** prop to render children. */
@@ -11,6 +11,12 @@ export interface DlProps extends SpaceProps, DlContextProps, TagProps {
       by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
     */
     w?: number;
+    /** Render the DefinitionList as a single column */
+    asSingleColumn?: boolean;
+    /** This string will specify the text align styling of the `<dt></dt>`. */
+    dtTextAlign?: ElementAlignment;
+    /** This string will specify the text align styling of the `<dd></dd>`. */
+    ddTextAlign?: ElementAlignment;
 }
 declare const Dl: {
     ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: DlProps): React.JSX.Element;

package/esm/components/definition-list/dl.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 from "react";
 import { StyledDl } from "./definition-list.style";
-import DlContext from "./__internal__/dl.context";
+import { DlProvider } from "./__internal__/dl.context";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 const Dl = ({
   children,
@@ -14,7 +14,7 @@ const Dl = ({
   return /*#__PURE__*/React.createElement(StyledDl, _extends({
     w: w,
     asSingleColumn: asSingleColumn
-  }, rest, tagComponent("dl", rest)), /*#__PURE__*/React.createElement(DlContext.Provider, {
+  }, rest, tagComponent("dl", rest)), /*#__PURE__*/React.createElement(DlProvider, {
     value: {
       asSingleColumn,
       dtTextAlign,

package/esm/components/definition-list/dt/dt.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 } from "react";
+import React from "react";
 import { StyledDt } from "../definition-list.style";
-import DlContext from "../__internal__/dl.context";
+import { useDlContext } from "../__internal__/dl.context";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 const Dt = ({
   children,
@@ -10,7 +10,7 @@ const Dt = ({
   const {
     asSingleColumn,
     dtTextAlign
-  } = useContext(DlContext);
+  } = useDlContext();
   const {
     mb,
     pr

package/esm/components/flat-table/__internal__/flat-table.context.d.ts

@@ -1,9 +1,7 @@
-import React, { Dispatch, SetStateAction } from "react";
-import { FlatTableProps } from "../flat-table.component";
-export interface FlatTableContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
-    getTabStopElementId: () => string;
-    isInFlatTable?: boolean;
-    setHasOpenDatePicker?: Dispatch<SetStateAction<boolean>>;
+/// <reference types="react" />
+interface FlatTableContextType {
+    isInFlatTable: boolean;
+    setHasOpenDatePicker?: (value: boolean) => void;
 }
-declare const _default: React.Context<FlatTableContextProps>;
-export default _default;
+declare const FlatTableContext: import("react").Context<FlatTableContextType>;
+export default FlatTableContext;

package/esm/components/flat-table/__internal__/flat-table.context.js

@@ -1,5 +1,6 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({
-  getTabStopElementId: () => "",
-  isInFlatTable: false
-});
+import { createContext } from "react";
+const FlatTableContext = /*#__PURE__*/createContext({
+  isInFlatTable: false,
+  setHasOpenDatePicker: undefined
+});
+export default FlatTableContext;

package/esm/components/flat-table/__internal__/strict-flat-table.context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FlatTableProps } from "../flat-table.component";
+export interface StrictFlatTableContextType extends Pick<FlatTableProps, "colorTheme" | "size"> {
+    getTabStopElementId: () => string;
+}
+declare const StrictFlatTableProvider: import("react").Provider<StrictFlatTableContextType | null>, useStrictFlatTableContext: () => StrictFlatTableContextType;
+export { StrictFlatTableProvider, useStrictFlatTableContext };

package/esm/components/flat-table/__internal__/strict-flat-table.context.js

@@ -0,0 +1,9 @@
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [StrictFlatTableProvider, useStrictFlatTableContext] = createStrictContext({
+  name: "FlatTableContext",
+  errorMessage: "Carbon FlatTable: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    getTabStopElementId: () => ""
+  }
+});
+export { StrictFlatTableProvider, useStrictFlatTableContext };

package/esm/components/flat-table/__internal__/use-table-cell.js

@@ -1,10 +1,10 @@
 import { useContext, useEffect, useState } from "react";
 import FlatTableRowContext from "../flat-table-row/__internal__/flat-table-row.context";
-import FlatTableContext from "./flat-table.context";
+import { useStrictFlatTableContext } from "./strict-flat-table.context";
 export default id => {
   const {
     getTabStopElementId
-  } = useContext(FlatTableContext);
+  } = useStrictFlatTableContext();
   const [tabIndex, setTabIndex] = useState(-1);
   const {
     expandable,

package/esm/components/flat-table/flat-table-header/flat-table-header.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, { useRef, useContext } from "react";
+import React, { useRef } from "react";
 import StyledFlatTableHeader from "./flat-table-header.style";
-import FlatTableContext from "../__internal__/flat-table.context";
+import { useStrictFlatTableContext } from "../__internal__/strict-flat-table.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useTableCell from "../__internal__/use-table-cell";
 export const FlatTableHeader = ({
@@ -21,7 +21,7 @@ export const FlatTableHeader = ({
   const internalId = useRef(id || guid());
   const {
     colorTheme
-  } = useContext(FlatTableContext);
+  } = useStrictFlatTableContext();
   const {
     leftPosition,
     rightPosition,

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -6,7 +6,7 @@ import StyledFlatTableRow from "./flat-table-row.style";
 import DrawerSidebarContext from "../../drawer/__internal__/drawer-sidebar.context";
 import FlatTableRowHeader from "../flat-table-row-header";
 import FlatTableRowDraggable from "./__internal__/flat-table-row-draggable.component";
-import FlatTableContext from "../__internal__/flat-table.context";
+import { useStrictFlatTableContext } from "../__internal__/strict-flat-table.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import FlatTableRowContext from "./__internal__/flat-table-row.context";
 import SubRowProvider, { SubRowContext } from "./__internal__/sub-row-provider";
@@ -95,7 +95,7 @@ export const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     colorTheme,
     size,
     getTabStopElementId
-  } = useContext(FlatTableContext);
+  } = useStrictFlatTableContext();
   const {
     isInSidebar
   } = useContext(DrawerSidebarContext);

package/esm/components/flat-table/flat-table.component.js

@@ -3,6 +3,7 @@ import React, { useLayoutEffect, useRef, useState, useContext } from "react";
 import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer } from "./flat-table.style";
 import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
 import Events from "../../__internal__/utils/helpers/events/events";
+import { StrictFlatTableProvider } from "./__internal__/strict-flat-table.context";
 import FlatTableContext from "./__internal__/flat-table.context";
 const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
 export const FlatTable = ({
@@ -186,15 +187,18 @@ export const FlatTable = ({
   }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
     ref: tableRef,
     "data-component": "flat-table"
-  }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableContext.Provider, {
+  }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(StrictFlatTableProvider, {
     value: {
       colorTheme,
       size,
-      getTabStopElementId,
+      getTabStopElementId
+    }
+  }, /*#__PURE__*/React.createElement(FlatTableContext.Provider, {
+    value: {
       isInFlatTable: true,
       setHasOpenDatePicker
     }
-  }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
+  }, children)))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter,
     "data-role": "flat-table-footer"
   }, footer));

package/esm/components/flat-table/sort/sort.component.js

@@ -1,10 +1,10 @@
-import React, { useRef, useContext } from "react";
+import React, { useRef } from "react";
 import Event from "../../../__internal__/utils/helpers/events";
 import Typography from "../../typography";
 import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useLocale from "../../../hooks/__internal__/useLocale";
-import FlatTableContext from "../__internal__/flat-table.context";
+import { useStrictFlatTableContext } from "../__internal__/strict-flat-table.context";
 export const Sort = ({
   children,
   onClick,
@@ -24,7 +24,7 @@ export const Sort = ({
   };
   const {
     colorTheme
-  } = useContext(FlatTableContext);
+  } = useStrictFlatTableContext();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
     screenReaderOnly: true,
     id: id.current

package/esm/components/step-flow/__internal__/step-flow.context.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export type StepFlowContextType = {
     validatedCurrentStep?: number;
     totalSteps?: number;
@@ -6,5 +6,5 @@ export type StepFlowContextType = {
     category?: string;
     titleRef?: React.RefObject<HTMLDivElement>;
 };
-declare const StepFlowContext: React.Context<StepFlowContextType>;
-export default StepFlowContext;
+declare const StepFlowProvider: import("react").Provider<StepFlowContextType | null>, useStepFlowContext: () => StepFlowContextType;
+export { StepFlowProvider, useStepFlowContext };

package/esm/components/step-flow/__internal__/step-flow.context.js

@@ -1,3 +1,7 @@
-import React from "react";
-const StepFlowContext = /*#__PURE__*/React.createContext({});
-export default StepFlowContext;
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [StepFlowProvider, useStepFlowContext] = createStrictContext({
+  name: "StepFlowContext",
+  errorMessage: "Carbon StepFlow: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {}
+});
+export { StepFlowProvider, useStepFlowContext };

package/esm/components/step-flow/step-flow-title/step-flow-title.component.js

@@ -1,7 +1,7 @@
-import React, { useContext } from "react";
+import React from "react";
 import Typography from "../../typography";
 import useLocale from "../../../hooks/__internal__/useLocale";
-import StepFlowContext from "../__internal__/step-flow.context";
+import { useStepFlowContext } from "../__internal__/step-flow.context";
 import { StyledTitleFocusWrapper } from "../step-flow.style";
 export const StepFlowTitle = ({
   titleString,
@@ -15,7 +15,7 @@ export const StepFlowTitle = ({
     totalSteps,
     category,
     titleVariant: titleVariantContext
-  } = useContext(StepFlowContext);
+  } = useStepFlowContext();
   return /*#__PURE__*/React.createElement(StyledTitleFocusWrapper, {
     "data-role": "title-text-wrapper",
     "data-element": "title-text-wrapper",

package/esm/components/step-flow/step-flow.component.js

@@ -6,7 +6,7 @@ import { StyledStepFlow, StyledStepContent, StyledStepContentText, StyledStepLab
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Typography from "../typography";
 import useLocale from "../../hooks/__internal__/useLocale";
-import StepFlowContext from "./__internal__/step-flow.context";
+import { StepFlowProvider } from "./__internal__/step-flow.context";
 import StepFlowTitle from "./step-flow-title/step-flow-title.component";
 export const StepFlow = /*#__PURE__*/forwardRef(({
   category,
@@ -72,7 +72,7 @@ export const StepFlow = /*#__PURE__*/forwardRef(({
       titleRef.current?.focus();
     }
   }), []);
-  const stepFlowTitle = /*#__PURE__*/React.createElement(StepFlowContext.Provider, {
+  const stepFlowTitle = /*#__PURE__*/React.createElement(StepFlowProvider, {
     value: {
       validatedCurrentStep,
       totalSteps,

package/esm/components/step-sequence/__internal__/step-sequence.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface StepSequenceContextType {
+    orientation: "horizontal" | "vertical";
+}
+declare const StepSequenceProvider: import("react").Provider<StepSequenceContextType | null>, useStepSequenceContext: () => StepSequenceContextType;
+export { StepSequenceProvider, useStepSequenceContext };

package/esm/components/step-sequence/__internal__/step-sequence.context.js

@@ -0,0 +1,9 @@
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [StepSequenceProvider, useStepSequenceContext] = createStrictContext({
+  name: "StepSequenceContext",
+  errorMessage: "Carbon StepSequence: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    orientation: "horizontal"
+  }
+});
+export { StepSequenceProvider, useStepSequenceContext };

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -1,8 +1,8 @@
 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 { StyledStepSequenceItem, StyledStepSequenceItemContent, StyledStepSequenceItemIndicator, StyledStepSequenceItemHiddenLabel } from "./step-sequence-item.style";
 import Icon from "../../icon";
-import { StepSequenceContext } from "../step-sequence.component";
+import { useStepSequenceContext } from "../__internal__/step-sequence.context";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 export const StepSequenceItem = ({
   hideIndicator = false,
@@ -16,7 +16,7 @@ export const StepSequenceItem = ({
 }) => {
   const {
     orientation
-  } = useContext(StepSequenceContext);
+  } = useStepSequenceContext();
   const indicatorText = () => {
     return !hideIndicator ? /*#__PURE__*/React.createElement(StyledStepSequenceItemIndicator, null, indicator) : null;
   };

package/esm/components/step-sequence/step-sequence.component.d.ts

@@ -1,9 +1,6 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export declare const StepSequenceContext: React.Context<{
-    orientation: "horizontal" | "vertical";
-}>;
 export interface StepSequenceProps extends SpaceProps, TagProps {
     /** Step sequence items to be rendered */
     children: React.ReactNode;

package/esm/components/step-sequence/step-sequence.component.js

@@ -2,9 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from "react";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import StyledStepSequence from "./step-sequence.style";
-export const StepSequenceContext = /*#__PURE__*/React.createContext({
-  orientation: "horizontal"
-});
+import { StepSequenceProvider } from "./__internal__/step-sequence.context";
 export const StepSequence = ({
   children,
   orientation = "horizontal",
@@ -13,7 +11,7 @@ export const StepSequence = ({
   return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
     orientation: orientation,
     p: 0
-  }, props, tagComponent("step-sequence", props)), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
+  }, props, tagComponent("step-sequence", props)), /*#__PURE__*/React.createElement(StepSequenceProvider, {
     value: {
       orientation
     }

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { PaddingProps } from "styled-system";
-interface TileContextProps {
-    isHorizontal?: boolean;
+interface TileContextType {
+    isHorizontal: boolean;
     paddingPropsFromTile: PaddingProps;
 }
-declare const _default: import("react").Context<TileContextProps>;
-export default _default;
+declare const TileProvider: import("react").Provider<TileContextType | null>, useTileContext: () => TileContextType;
+export { TileProvider, useTileContext };

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

@@ -1,4 +1,10 @@
-import { createContext } from "react";
-export default /*#__PURE__*/createContext({
-  paddingPropsFromTile: {}
-});
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [TileProvider, useTileContext] = createStrictContext({
+  name: "TileContext",
+  errorMessage: "Carbon Tile: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    paddingPropsFromTile: {},
+    isHorizontal: false
+  }
+});
+export { TileProvider, useTileContext };

package/esm/components/tile/tile-content/tile-content.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 } from "react";
+import React from "react";
 import StyledTileContent from "./tile-content.style";
-import TileContext from "../__internal__/tile.context";
+import { useTileContext } from "../__internal__/tile.context";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import filterStyledSystemPaddingProps from "../../../style/utils/filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "../../../style/utils/filter-styled-system-margin-props";
@@ -14,7 +14,7 @@ const TileContent = ({
   const {
     isHorizontal,
     paddingPropsFromTile
-  } = useContext(TileContext);
+  } = useTileContext();
   if (!children) {
     return null;
   }

package/esm/components/tile/tile.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 from "react";
 import StyledTile from "./tile.style";
-import TileContext from "./__internal__/tile.context";
+import { TileProvider } from "./__internal__/tile.context";
 import filterStyledSystemPaddingProps from "../../style/utils/filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "../../style/utils/filter-styled-system-margin-props";
 import computeContentPadding from "./__internal__/compute-content-padding";
@@ -36,7 +36,7 @@ export const Tile = ({
     highlightVariant: highlightVariant,
     borderWidth: borderWidth,
     borderVariant: borderVariant
-  }, paddingProps, marginProps, tagComponent("tile", rest)), /*#__PURE__*/React.createElement(TileContext.Provider, {
+  }, paddingProps, marginProps, tagComponent("tile", rest)), /*#__PURE__*/React.createElement(TileProvider, {
     value: {
       isHorizontal,
       paddingPropsFromTile: contentPaddingProps

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface VerticalMenuContextType {
+    isFullScreen: boolean;
+}
+declare const VerticalMenuProvider: import("react").Provider<VerticalMenuContextType | null>, useVerticalMenuContext: () => VerticalMenuContextType;
+export { VerticalMenuProvider, useVerticalMenuContext };

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

@@ -0,0 +1,9 @@
+import createStrictContext from "../../../__internal__/utils/createStrictContext";
+const [VerticalMenuProvider, useVerticalMenuContext] = createStrictContext({
+  name: "VerticalMenuContext",
+  errorMessage: "Carbon VerticalMenu: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    isFullScreen: false
+  }
+});
+export { VerticalMenuProvider, useVerticalMenuContext };

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

@@ -8,7 +8,7 @@ import IconButton from "../../icon-button";
 import Icon from "../../icon";
 import Box from "../../box";
 import { StyledList, StyledVerticalMenuFullScreen } from "../vertical-menu.style";
-import VerticalMenuFullScreenContext from "./__internal__/vertical-menu-full-screen.context";
+import { VerticalMenuProvider } from "../__internal__/vertical-menu.context";
 import { getDocument } from "../../../__internal__/dom/globals";
 import Events from "../../../__internal__/utils/helpers/events/events";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
@@ -64,7 +64,7 @@ export const VerticalMenuFullScreen = ({
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close",
     color: "var(--colorsComponentsLeftnavWinterStandardContent)"
-  }))), /*#__PURE__*/React.createElement(VerticalMenuFullScreenContext.Provider, {
+  }))), /*#__PURE__*/React.createElement(VerticalMenuProvider, {
     value: {
       isFullScreen: true
     }

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

@@ -2,9 +2,9 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useState, useContext } from "react";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import VerticalMenuFullScreenContext from "../vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context";
 import { StyledVerticalMenuItem, StyledTitle, StyledAdornment, StyledList, StyledChevronIcon, StyledTitleIcon } from "../vertical-menu.style";
 import MenuItemContext from "./__internal__/menu-item.context";
+import { useVerticalMenuContext } from "../__internal__/vertical-menu.context";
 export const VerticalMenuItem = ({
   defaultOpen = false,
   title,
@@ -26,7 +26,7 @@ export const VerticalMenuItem = ({
   } = useContext(MenuItemContext);
   const {
     isFullScreen
-  } = useContext(VerticalMenuFullScreenContext);
+  } = useVerticalMenuContext();
   const renderAdornment = () => typeof adornment === "function" ? adornment(isOpen) : adornment;
   const shouldDisplayActiveState = typeof active === "function" ? active(isOpen) : active;
   let itemProps = {};

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

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from "react";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledVerticalMenu, StyledList } from "./vertical-menu.style";
+import { VerticalMenuProvider } from "./__internal__/vertical-menu.context";
 export const VerticalMenu = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -21,6 +22,10 @@ export const VerticalMenu = ({
     overflow: "auto",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, tagComponent("vertical-menu", rest)), /*#__PURE__*/React.createElement(StyledList, null, children));
+  }, tagComponent("vertical-menu", rest)), /*#__PURE__*/React.createElement(StyledList, null, /*#__PURE__*/React.createElement(VerticalMenuProvider, {
+    value: {
+      isFullScreen: false
+    }
+  }, children)));
 };
 export default VerticalMenu;

package/lib/__internal__/utils/{createStrictContext.js → createStrictContext/createStrictContext.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _logger = _interopRequireDefault(require("./logger"));
+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.

package/lib/__internal__/utils/createStrictContext/index.d.ts

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

package/lib/__internal__/utils/createStrictContext/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createStrictContext.default;
+  }
+});
+var _createStrictContext = _interopRequireDefault(require("./createStrictContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/utils/createStrictContext/package.json

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

package/lib/components/action-popover/__internal__/action-popover.context.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export type Alignment = "left" | "right";
 type ActionPopoverContextType = {
     setOpenPopover: (isOpen: boolean) => void;
@@ -6,5 +6,6 @@ type ActionPopoverContextType = {
     submenuPosition: Alignment;
     isOpenPopover: boolean;
 };
-declare const ActionPopoverContext: React.Context<ActionPopoverContextType | null>;
-export default ActionPopoverContext;
+export declare const ActionPopoverProvider: import("react").Provider<ActionPopoverContextType | null>;
+export declare const useActionPopoverContext: () => ActionPopoverContextType;
+export {};

package/lib/components/action-popover/__internal__/action-popover.context.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useActionPopoverContext = exports.ActionPopoverProvider = void 0;
+var _react = require("react");
+var _invariant = _interopRequireDefault(require("invariant"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ActionPopoverContext = /*#__PURE__*/_react.default.createContext(null);
-var _default = exports.default = ActionPopoverContext;
+const ActionPopoverContext = /*#__PURE__*/(0, _react.createContext)(null);
+const ActionPopoverProvider = exports.ActionPopoverProvider = ActionPopoverContext.Provider;
+const useActionPopoverContext = () => {
+  const context = (0, _react.useContext)(ActionPopoverContext);
+  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Carbon ActionPopover: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.") : (0, _invariant.default)(false) : void 0;
+  return context;
+};
+exports.useActionPopoverContext = useActionPopoverContext;

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -9,7 +9,7 @@ var _invariant = _interopRequireDefault(require("invariant"));
 var _actionPopover = require("../action-popover.style");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _actionPopover2 = _interopRequireDefault(require("../__internal__/action-popover.context"));
+var _actionPopover2 = require("../__internal__/action-popover.context");
 var _actionPopoverMenu = _interopRequireDefault(require("../action-popover-menu/action-popover-menu.component"));
 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); }
@@ -56,15 +56,13 @@ const ActionPopoverItem = ({
   isASubmenu = false,
   ...rest
 }) => {
-  const context = (0, _react.useContext)(_actionPopover2.default);
-  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   !(/*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : (0, _invariant.default)(false) : void 0;
   const {
     setOpenPopover,
     isOpenPopover,
     focusButton,
     submenuPosition
-  } = context;
+  } = (0, _actionPopover2.useActionPopoverContext)();
   const isHref = !!href;
   const [containerPosition, setContainerPosition] = (0, _react.useState)(undefined);
   const [guid] = (0, _react.useState)((0, _guid.default)());