carbon-react 117.5.0 → 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/lib/__internal__/input/input.component.d.ts

@@ -19,7 +19,7 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on change */
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** pecify a callback triggered on click */
+    /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */
     onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
@@ -37,9 +37,9 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
 export interface InputProps extends CommonInputProps {
     /** The visible width of the text control, in average character widths */
     cols?: number;
-    /** Integer to determine a timeout for the defered callback */
+    /** Integer to determine a timeout for the deferred callback */
     deferTimeout?: number;
-    /** Defered callback to be called after the onChange event */
+    /** Deferred callback to be called after the onChange event */
     onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** The number of visible text lines for the control */
     rows?: number;

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -23,6 +23,8 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 
 var _definitionList = require("../definition-list");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -31,6 +33,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+let deprecateUncontrolledWarnTriggered = false;
+
 const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -144,6 +148,13 @@ const AdvancedColorPicker = ({
       onBlur(e);
     }
   }, [onBlur]);
+
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   return /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerWrapper, _extends({
     m: "15px auto auto 15px"
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerCell, {