carbon-react 117.4.1 → 117.6.0

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

@@ -1,95 +1,59 @@
-declare namespace _default {
-    namespace light {
-        const background: string;
-        const color: string;
-        const selected: string;
-        const submenuOpenedBackground: string;
-        const submenuBackground: string;
-        const submenuSelected: string;
-        const submenuItemBackground: string;
-        const submenuItemBackgroundHover: string;
-        const title: string;
-        const alternate: string;
-        const alternateHover: string;
-        const divider: string;
-    }
-    namespace dark {
-        const background_1: string;
-        export { background_1 as background };
-        const color_1: string;
-        export { color_1 as color };
-        const selected_1: string;
-        export { selected_1 as selected };
-        const submenuOpenedBackground_1: string;
-        export { submenuOpenedBackground_1 as submenuOpenedBackground };
-        const submenuBackground_1: string;
-        export { submenuBackground_1 as submenuBackground };
-        const submenuSelected_1: string;
-        export { submenuSelected_1 as submenuSelected };
-        const submenuItemBackground_1: string;
-        export { submenuItemBackground_1 as submenuItemBackground };
-        const submenuItemBackgroundHover_1: string;
-        export { submenuItemBackgroundHover_1 as submenuItemBackgroundHover };
-        const title_1: string;
-        export { title_1 as title };
-        const alternate_1: string;
-        export { alternate_1 as alternate };
-        const alternateHover_1: string;
-        export { alternateHover_1 as alternateHover };
-        const divider_1: string;
-        export { divider_1 as divider };
-    }
-    namespace black {
-        const background_2: string;
-        export { background_2 as background };
-        const color_2: string;
-        export { color_2 as color };
-        const selected_2: string;
-        export { selected_2 as selected };
-        const submenuOpenedBackground_2: string;
-        export { submenuOpenedBackground_2 as submenuOpenedBackground };
-        const submenuBackground_2: string;
-        export { submenuBackground_2 as submenuBackground };
-        const submenuSelected_2: string;
-        export { submenuSelected_2 as submenuSelected };
-        const submenuItemBackground_2: string;
-        export { submenuItemBackground_2 as submenuItemBackground };
-        const submenuItemBackgroundHover_2: string;
-        export { submenuItemBackgroundHover_2 as submenuItemBackgroundHover };
-        const title_2: string;
-        export { title_2 as title };
-        const alternate_2: string;
-        export { alternate_2 as alternate };
-        const alternateHover_2: string;
-        export { alternateHover_2 as alternateHover };
-        const divider_2: string;
-        export { divider_2 as divider };
-    }
-    namespace white {
-        const background_3: string;
-        export { background_3 as background };
-        const color_3: string;
-        export { color_3 as color };
-        const selected_3: string;
-        export { selected_3 as selected };
-        const submenuOpenedBackground_3: string;
-        export { submenuOpenedBackground_3 as submenuOpenedBackground };
-        const submenuBackground_3: string;
-        export { submenuBackground_3 as submenuBackground };
-        const submenuSelected_3: string;
-        export { submenuSelected_3 as submenuSelected };
-        const submenuItemBackground_3: string;
-        export { submenuItemBackground_3 as submenuItemBackground };
-        const submenuItemBackgroundHover_3: string;
-        export { submenuItemBackgroundHover_3 as submenuItemBackgroundHover };
-        const title_3: string;
-        export { title_3 as title };
-        const alternate_3: string;
-        export { alternate_3 as alternate };
-        const alternateHover_3: string;
-        export { alternateHover_3 as alternateHover };
-        const divider_3: string;
-        export { divider_3 as divider };
-    }
-}
+declare const _default: {
+    light: {
+        background: string;
+        color: string;
+        selected: string;
+        submenuOpenedBackground: string;
+        submenuBackground: string;
+        submenuSelected: string;
+        submenuItemBackground: string;
+        submenuItemBackgroundHover: string;
+        title: string;
+        alternate: string;
+        alternateHover: string;
+        divider: string;
+    };
+    dark: {
+        background: string;
+        color: string;
+        selected: string;
+        submenuOpenedBackground: string;
+        submenuBackground: string;
+        submenuSelected: string;
+        submenuItemBackground: string;
+        submenuItemBackgroundHover: string;
+        title: string;
+        alternate: string;
+        alternateHover: string;
+        divider: string;
+    };
+    black: {
+        background: string;
+        color: string;
+        selected: string;
+        submenuOpenedBackground: string;
+        submenuBackground: string;
+        submenuSelected: string;
+        submenuItemBackground: string;
+        submenuItemBackgroundHover: string;
+        title: string;
+        alternate: string;
+        alternateHover: string;
+        divider: string;
+    };
+    white: {
+        background: string;
+        color: string;
+        selected: string;
+        submenuOpenedBackground: string;
+        submenuBackground: string;
+        submenuSelected: string;
+        submenuItemBackground: string;
+        submenuItemBackgroundHover: string;
+        title: string;
+        alternate: string;
+        alternateHover: string;
+        divider: string;
+    };
+};
 export default _default;

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

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

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

@@ -1,2 +1,12 @@
-export const StyledMenuWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export const StyledMenuItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+import { FlexboxProps, LayoutProps } from "styled-system";
+import { MenuProps } from "./menu.component";
+interface StyledMenuProps extends Pick<MenuProps, "menuType">, FlexboxProps, LayoutProps {
+    inFullscreenView?: boolean;
+}
+declare const StyledMenuWrapper: import("styled-components").StyledComponent<"ul", any, StyledMenuProps, never>;
+interface StyledMenuItemProps extends Pick<MenuProps, "menuType" | "maxWidth"> {
+    inFullscreenView?: boolean;
+    inSubmenu?: boolean;
+}
+declare const StyledMenuItem: import("styled-components").StyledComponent<"li", any, StyledMenuItemProps, never>;
+export { StyledMenuWrapper, StyledMenuItem };

package/esm/components/menu/menu.style.js

@@ -16,15 +16,15 @@ const StyledMenuWrapper = styled.ul`
   ${StyledVerticalWrapper} {
     ${({
   menuType
-}) => css`
-      display: inline-block;
-      vertical-align: bottom;
-      background-color: ${menuConfigVariants[menuType].background};
+}) => menuType && css`
+        display: inline-block;
+        vertical-align: bottom;
+        background-color: ${menuConfigVariants[menuType].background};
 
-      ${menuType === "dark" && css`
-        color: ${menuConfigVariants[menuType].color};
+        ${menuType === "dark" && css`
+          color: ${menuConfigVariants[menuType].color};
+        `}
       `}
-    `}
 
     ${StyledDivider} {
       position: relative;
@@ -50,10 +50,10 @@ const StyledMenuItem = styled.li`
       padding-top: 16px;
       padding-bottom: 16px;
 
-      a,
-      ${StyledLink} a,
-      button,
-      ${StyledLink} button,
+      > a,
+      ${StyledLink} > a,
+      > button,
+      ${StyledLink} > button,
       > span,
       > div,
       [data-component="submenu-wrapper"] > ${StyledLink} {

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

@@ -1 +1,2 @@
-export { default } from "./scrollable-block";
+export { default } from "./scrollable-block.component";
+export type { ScrollableBlockProps } from "./scrollable-block.component";

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { VariantType } from "../menu-item";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface ScrollableBlockProps extends TagProps {
+    /** Children elements */
+    children: React.ReactNode;
+    /** A custom height to be applied to the component. */
+    height?: string | number;
+    /** set the colour variant for a menuType */
+    variant?: VariantType;
+    /** the element, if any, displayed at the top of the block to be its semantic "parent",
+     * but not part of the scrollable section
+     */
+    parent?: React.ReactElement;
+    /** the colour variant for the parent element, if different from the variant of the block */
+    parentVariant?: VariantType;
+}
+export declare const ScrollableBlock: ({ children, height, variant, parent, parentVariant, ...rest }: ScrollableBlockProps) => JSX.Element;
+export default ScrollableBlock;

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

@@ -6,6 +6,7 @@ import MenuContext from "../menu.context";
 import MenuItem from "../menu-item";
 import StyledScrollableBlock from "./scrollable-block.style";
 import Box from "../../box";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 
 const ScrollableBlock = ({
   children,
@@ -24,16 +25,15 @@ const ScrollableBlock = ({
     white: "light",
     black: "dark"
   };
-  return /*#__PURE__*/React.createElement(StyledScrollableBlock, _extends({
-    "data-component": "submenu-scrollable-block",
+  return /*#__PURE__*/React.createElement(StyledScrollableBlock, _extends({}, tagComponent("submenu-scrollable-block", rest), {
     menuType: menuType,
     variant: variant
   }, rest), parent && /*#__PURE__*/React.createElement(MenuItem, {
     "data-component": "scrollable-block-parent",
     overrideColor: true,
     variant: parentVariant,
-    as: "div",
-    href: "#"
+    p: "2px 16px",
+    as: "div"
   }, parent), /*#__PURE__*/React.createElement(Box, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuType],
@@ -45,21 +45,14 @@ const ScrollableBlock = ({
 };
 
 ScrollableBlock.propTypes = {
-  /** Children elements */
-  children: PropTypes.node.isRequired,
-
-  /** Styled system height prop */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /** set the colour variant for a menuType */
-  variant: PropTypes.oneOf(["default", "alternate"]),
-
-  /** the element, if any, displayed at the top of the block to be its semantic "parent",
-   * but not part of the scrollable section
-   */
-  parent: PropTypes.node,
-
-  /** the colour variant for the parent element, if different from the variant of the block */
-  parentVariant: PropTypes.oneOf(["default", "alternate"])
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "height": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "parent": PropTypes.element,
+  "parentVariant": PropTypes.oneOf(["alternate", "default"]),
+  "variant": PropTypes.oneOf(["alternate", "default"])
 };
+export { ScrollableBlock };
 export default ScrollableBlock;

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

@@ -0,0 +1,8 @@
+import { MenuType } from "../menu.context";
+import { VariantType } from "../menu-item";
+interface StyledScrollableBlockProps {
+    menuType: MenuType;
+    variant: VariantType;
+}
+declare const StyledScrollableBlock: import("styled-components").StyledComponent<"li", any, StyledScrollableBlockProps, never>;
+export default StyledScrollableBlock;

package/esm/components/number/number.component.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import Logger from "../../__internal__/utils/logger";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 function isValidNumber(value) {
   const regex = new RegExp("^[-]?[0-9]*$");
@@ -27,6 +28,11 @@ const Number = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `inputRef` prop in `Number` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Number` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const handleOnChange = event => {
     if (isValidNumber(event.target.value) && onChange) {
       onChange(event);

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

@@ -17,6 +17,8 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "./numeral-date-context";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
+import Logger from "../../__internal__/utils/logger";
+let deprecateUncontrolledWarnTriggered = false;
 export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
 
@@ -156,6 +158,12 @@ const NumeralDate = ({
   const internalMessage = Object.keys(internalMessages).reduce((combinedMessage, datePart) => internalMessages[datePart] ? `${combinedMessage + internalMessages[datePart]}\n` : combinedMessage, "");
   const internalError = enableInternalError ? internalMessage + error : error;
   const internalWarning = enableInternalWarning ? internalMessage + warning : warning;
+
+  if (!deprecateUncontrolledWarnTriggered && !isControlled.current) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({

package/esm/components/radio-button/radio-button-group.component.js

@@ -9,6 +9,8 @@ import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-butt
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import Logger from "../../__internal__/utils/logger";
+let deprecateUncontrolledWarnTriggered = false;
 
 const RadioButtonGroup = props => {
   const {
@@ -32,6 +34,12 @@ const RadioButtonGroup = props => {
     required,
     tooltipPosition
   } = props;
+
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const marginProps = filterStyledSystemMarginProps(props);
   const isAboveLegendBreakpoint = useIsAboveBreakpoint(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);

package/esm/components/radio-button/radio-button.style.js

@@ -60,7 +60,7 @@ const RadioButtonStyle = styled(CheckboxStyle)`
 
     ${disabled && css`
       circle {
-        fill: var(--colorsCtilityDisabled400);
+        fill: var(--colorsUtilityDisabled400);
       }
 
       ${HiddenCheckableInputStyle}:checked + ${StyledCheckableInputSvgWrapper} circle {

package/esm/components/search/search.component.js

@@ -12,6 +12,7 @@ import Textbox from "../textbox";
 import Button from "../button";
 import Logger from "../../__internal__/utils/logger";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const Search = /*#__PURE__*/React.forwardRef(({
   defaultValue,
   onChange,
@@ -45,6 +46,11 @@ const Search = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `inputRef` prop in `Search` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !isControlled) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Search` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "This component has no initial value") : invariant(false) : void 0;
   !(threshold === undefined || typeof threshold === "number" && threshold > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "Threshold must be a positive number") : invariant(false) : void 0;
   const [searchValue, setSearchValue] = useState(initialValue);

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -16,6 +16,7 @@ import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
@@ -80,7 +81,14 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `FilterableSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+    Logger.deprecate("The `inputRef` prop in `Filterable Select` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
+  const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
+
+  if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
 
   const createCustomEvent = useCallback(newValue => {

package/esm/components/select/multi-select/multi-select.component.js

@@ -18,6 +18,7 @@ import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const MultiSelect = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
@@ -86,7 +87,14 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `MultiSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+    Logger.deprecate("The `inputRef` prop in `Multi Select` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
+  const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
+
+  if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
 
   const setOpen = useCallback(() => {

package/esm/components/select/simple-select/simple-select.component.js

@@ -16,6 +16,7 @@ import Logger from "../../../__internal__/utils/logger";
 import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
@@ -76,7 +77,14 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `Select` component is deprecated and will soon be removed. Please use `ref` instead.");
+    Logger.deprecate("The `inputRef` prop in `Simple Select` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
+  const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
+
+  if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
 
   const childOptions = useMemo(() => React.Children.toArray(children), [children]);

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -12,6 +12,8 @@ import { StyledContent, StyledColorOptions } from "./simple-color-picker.style";
 import ValidationIcon from "../../__internal__/validations/validation-icon.component";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
+let deprecateUncontrolledWarnTriggered = false;
 const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
@@ -185,6 +187,12 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
     warning,
     info
   };
+
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   return /*#__PURE__*/React.createElement(Fieldset, _extends({
     role: "radiogroup",
     legend: legend,

package/esm/components/switch/switch.component.js

@@ -8,6 +8,7 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const Switch = /*#__PURE__*/React.forwardRef(({
   autoFocus,
   id,
@@ -48,6 +49,11 @@ const Switch = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `inputRef` prop in `Switch` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const onChangeInternal = useCallback(e => {
     setCheckedInternal(e.target.checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);

package/esm/components/textarea/textarea.component.js

@@ -19,6 +19,7 @@ import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const Textarea = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
   autoFocus,
@@ -89,6 +90,11 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `inputRef` prop in `Textarea` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const minHeight = useRef(MIN_HEIGHT);
 
   const expandTextarea = () => {

package/esm/components/textbox/textbox.component.js

@@ -20,6 +20,7 @@ import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
 import guid from "../../__internal__/utils/helpers/guid";
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const Textbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
   align = "left",
@@ -93,6 +94,11 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const {
     labelId,
     validationId,

package/esm/components/vertical-menu/vertical-menu-item.component.d.ts

@@ -5,6 +5,8 @@ import { IconType } from "../icon";
 export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
     /** Children of the menu item - another level of VerticalMenuItems */
     children?: React.ReactNode;
+    /** Default open state of the component */
+    defaultOpen?: boolean;
     /** Title of the menu item */
     title: string;
     /** Adornment of the menu item meant to be rendered on the right side */
@@ -21,5 +23,5 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
     component?: T;
 }
 declare type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
-export declare const VerticalMenuItem: <T>({ title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
+export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
 export default VerticalMenuItem;

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

@@ -11,6 +11,7 @@ const MenuItemContext = /*#__PURE__*/React.createContext({
 });
 
 const VerticalMenuItem = ({
+  defaultOpen = false,
   title,
   iconType,
   adornment,
@@ -21,7 +22,7 @@ const VerticalMenuItem = ({
   href,
   ...rest
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
 
   const handleOnClick = () => {
     setIsOpen(state => !state);
@@ -104,6 +105,7 @@ VerticalMenuItem.propTypes = {
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
+  "defaultOpen": PropTypes.bool,
   "height": PropTypes.string,
   "href": PropTypes.string,
   "iconType": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),