carbon-react 153.7.1 → 154.0.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/text-editor/__internal__/helpers.js

@@ -14,7 +14,7 @@ import { markdownNodes, theme } from "./constants";
 const SerializeLexical = editor => {
   let htmlString;
   let json;
-  editor.update(() => {
+  editor.read(() => {
     // Get the current editor state
     const editorState = editor.getEditorState();
     // Serialize the editor state to JSON

package/esm/components/text-editor/__internal__/plugins/EditorRef/editor-ref.plugin.d.ts

@@ -0,0 +1,5 @@
+import { LexicalEditor } from "lexical";
+declare const EditorRefPlugin: ({ setEditorRef, }: {
+    setEditorRef: (editor: LexicalEditor) => void;
+}) => null;
+export default EditorRefPlugin;

package/esm/components/text-editor/__internal__/plugins/EditorRef/editor-ref.plugin.js

@@ -0,0 +1,17 @@
+/**
+ * This plugin allows retrieval of a reference to the current editor. It's useful
+ * for testing purposes, where tests might need to directly interact with the editor to
+ * emulate e.g. blurring.
+ */
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+const EditorRefPlugin = ({
+  setEditorRef
+}) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    setEditorRef(editor);
+  }, [editor, setEditorRef]);
+  return null;
+};
+export default EditorRefPlugin;

package/esm/components/text-editor/__internal__/plugins/EditorRef/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./editor-ref.plugin";

package/esm/components/text-editor/__internal__/plugins/EditorRef/index.js

@@ -0,0 +1 @@
+export { default } from "./editor-ref.plugin";

package/esm/components/text-editor/__internal__/plugins/Toolbar/toolbar.component.js

@@ -85,7 +85,6 @@ const Toolbar = ({
     "aria-label": locale.textEditor.toolbarAriaLabel(),
     "data-role": `${namespace}-toolbar`,
     id: `${namespace}-toolbar`,
-    onFocus: e => e.stopPropagation(),
     ref: toolbarRef
   }, /*#__PURE__*/React.createElement(FormattingButtons, {
     "data-role": `${namespace}-formatting-buttons`

package/esm/components/text-editor/text-editor.component.d.ts

@@ -23,10 +23,14 @@ export interface TextEditorProps extends MarginProps, TagProps {
     labelText: string;
     /** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
     namespace?: string;
+    /** The callback to fire when the editor loses focus */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when the Cancel button within the editor is pressed */
     onCancel?: () => void;
     /** The callback to fire when a change is registered within the editor */
     onChange?: (value: string, formattedValues: EditorFormattedValues) => void;
+    /** The callback to fire when the editor gains focus */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** The callback to fire when a link is added into the editor */
     onLinkAdded?: (link: string, state: string) => void;
     /** The callback to fire when the Save button within the editor is pressed */
@@ -46,5 +50,5 @@ export interface TextEditorProps extends MarginProps, TagProps {
     /** The initial value of the editor, as a HTML string, or JSON */
     value?: string | undefined;
 }
-export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onCancel, onChange, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
+export declare const TextEditor: ({ characterLimit, error, footer, header, inputHint, isOptional, labelText, namespace, onBlur, onCancel, onChange, onFocus, onLinkAdded, onSave, placeholder, previews, readOnly, required, rows, warning, value, ...rest }: TextEditorProps) => React.JSX.Element;
 export default TextEditor;

package/esm/components/text-editor/text-editor.component.js

@@ -13,7 +13,6 @@ import { $getRoot } from "lexical";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SerializeLexical, validateUrl } from "./__internal__/helpers";
 import Label from "../../__internal__/label";
-import useDebounce from "../../hooks/__internal__/useDebounce";
 import useLocale from "../../hooks/__internal__/useLocale";
 import Logger from "../../__internal__/utils/logger";
 import { COMPONENT_PREFIX, markdownNodes, theme } from "./__internal__/constants";
@@ -34,8 +33,10 @@ export const TextEditor = ({
   isOptional = false,
   labelText,
   namespace = COMPONENT_PREFIX,
+  onBlur,
   onCancel,
   onChange,
+  onFocus,
   onLinkAdded,
   onSave,
   placeholder,
@@ -74,7 +75,6 @@ export const TextEditor = ({
     return cleanup;
   }, [contentEditorRef]);
   const [cancelTrigger, setCancelTrigger] = useState(false);
-  const debounceWaitTime = 500;
   const initialConfig = useMemo(() => {
     return {
       namespace,
@@ -88,7 +88,7 @@ export const TextEditor = ({
 
   // OnChangePlugin is tested separately
   /* istanbul ignore next */
-  const handleChange = useDebounce(newState => {
+  const handleChange = useCallback(newState => {
     const currentTextContent = newState.read(() => $getRoot().getTextContent());
     if (onChange) {
       const formattedValues = editorRef.current ? SerializeLexical(editorRef.current) : {};
@@ -101,11 +101,10 @@ export const TextEditor = ({
       // If the character limit has been exceeded, show the character limit warning
       setCharacterLimitWarning(currentDiff < 0 ? locale.textEditor.characterLimit(Math.abs(currentDiff)) : undefined);
     }
-  }, debounceWaitTime);
+  }, [characterLimit, locale.textEditor, onChange]);
   const handleCancel = useCallback(() => {
-    const editor = editorRef.current;
     /* istanbul ignore next */
-    const isEditable = editor?.isEditable() || false;
+    const isEditable = editorRef.current?.isEditable() || false;
     /* istanbul ignore if */
     if (!isEditable) return;
 
@@ -118,13 +117,12 @@ export const TextEditor = ({
 
   // Reset the value of the editor when the cancel trigger is updated (implements reset on cancel)
   useEffect(() => {
-    const editor = editorRef.current;
     const safeValue = value || createEmpty();
 
     /* istanbul ignore else */
-    if (editor) {
-      const newEditorState = editor.parseEditorState(safeValue);
-      editor.setEditorState(newEditorState);
+    if (editorRef.current) {
+      const newEditorState = editorRef.current.parseEditorState(safeValue);
+      editorRef.current.setEditorState(newEditorState);
     }
   }, [cancelTrigger, value]);
   const toolbarProps = useMemo(() => ({
@@ -133,7 +131,17 @@ export const TextEditor = ({
     onSave
   }), [handleCancel, namespace, onCancel, onSave]);
   return /*#__PURE__*/React.createElement(StyledTextEditorWrapper, _extends({
-    "data-role": `${namespace}-editor-wrapper`
+    "data-role": `${namespace}-editor-wrapper`,
+    onBlur: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onBlur?.(ev);
+      }
+    },
+    onFocus: ev => {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        onFocus?.(ev);
+      }
+    }
   }, filterStyledSystemMarginProps(rest), tagComponent("text-editor", rest)), /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
     value: {
       onLinkAdded

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
     }