carbon-react 117.4.1 → 117.6.0

package/lib/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/lib/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/lib/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/lib/components/menu/menu.style.js

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

package/lib/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/lib/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/lib/components/menu/scrollable-block/scrollable-block.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ScrollableBlock = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -17,6 +17,8 @@ var _scrollableBlock = _interopRequireDefault(require("./scrollable-block.style"
 
 var _box = _interopRequireDefault(require("../../box"));
 
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+
 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; }
@@ -42,16 +44,15 @@ const ScrollableBlock = ({
     white: "light",
     black: "dark"
   };
-  return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({
-    "data-component": "submenu-scrollable-block",
+  return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({}, (0, _tags.default)("submenu-scrollable-block", rest), {
     menuType: menuType,
     variant: variant
   }, rest), parent && /*#__PURE__*/_react.default.createElement(_menuItem.default, {
     "data-component": "scrollable-block-parent",
     overrideColor: true,
     variant: parentVariant,
-    as: "div",
-    href: "#"
+    p: "2px 16px",
+    as: "div"
   }, parent), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuType],
@@ -62,23 +63,16 @@ const ScrollableBlock = ({
   }, children));
 };
 
+exports.ScrollableBlock = ScrollableBlock;
 ScrollableBlock.propTypes = {
-  /** Children elements */
-  children: _propTypes.default.node.isRequired,
-
-  /** Styled system height prop */
-  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /** set the colour variant for a menuType */
-  variant: _propTypes.default.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.default.node,
-
-  /** the colour variant for the parent element, if different from the variant of the block */
-  parentVariant: _propTypes.default.oneOf(["default", "alternate"])
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "height": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "parent": _propTypes.default.element,
+  "parentVariant": _propTypes.default.oneOf(["alternate", "default"]),
+  "variant": _propTypes.default.oneOf(["alternate", "default"])
 };
 var _default = ScrollableBlock;
 exports.default = _default;

package/lib/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/lib/components/number/number.component.js

@@ -22,6 +22,7 @@ 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 deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 function isValidNumber(value) {
   const regex = new RegExp("^[-]?[0-9]*$");
@@ -45,6 +46,12 @@ const Number = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `inputRef` prop in `Number` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.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/lib/components/numeral-date/numeral-date.component.js

@@ -39,6 +39,8 @@ var _numeralDateContext = _interopRequireDefault(require("./numeral-date-context
 
 var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
 
+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; }
@@ -47,6 +49,7 @@ 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 ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 exports.ALLOWED_DATE_FORMATS = ALLOWED_DATE_FORMATS;
 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']";
@@ -187,6 +190,13 @@ 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.default.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.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({

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

@@ -23,10 +23,14 @@ var _utils = require("../../style/utils");
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 RadioButtonGroup = props => {
   const {
     children,
@@ -49,6 +53,13 @@ const RadioButtonGroup = props => {
     required,
     tooltipPosition
   } = props;
+
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
   const isAboveLegendBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);

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

@@ -83,7 +83,7 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
 
     ${disabled && (0, _styledComponents.css)`
       circle {
-        fill: var(--colorsCtilityDisabled400);
+        fill: var(--colorsUtilityDisabled400);
       }
 
       ${_hiddenCheckableInput.default}:checked + ${_checkableInputSvgWrapper.default} circle {

package/lib/components/search/search.component.js

@@ -36,6 +36,7 @@ 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 deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const Search = /*#__PURE__*/_react.default.forwardRef(({
   defaultValue,
@@ -71,6 +72,12 @@ const Search = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `inputRef` prop in `Search` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !isControlled) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.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" ? (0, _invariant.default)(false, "This component has no initial value") : (0, _invariant.default)(false) : void 0;
   !(threshold === undefined || typeof threshold === "number" && threshold > 0) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Threshold must be a positive number") : (0, _invariant.default)(false) : void 0;
   const [searchValue, setSearchValue] = (0, _react.useState)(initialValue);

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

@@ -44,6 +44,7 @@ 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 deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
 
 const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
@@ -110,7 +111,15 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
 
-    _logger.default.deprecate("The `inputRef` prop in `FilterableSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+    _logger.default.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.default.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
 
   const createCustomEvent = (0, _react.useCallback)(newValue => {

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

@@ -48,6 +48,7 @@ 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 deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
 
 const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
@@ -118,7 +119,15 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
 
-    _logger.default.deprecate("The `inputRef` prop in `MultiSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+    _logger.default.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.default.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
 
   const setOpen = (0, _react.useCallback)(() => {

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

@@ -44,6 +44,7 @@ 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 deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
@@ -106,7 +107,15 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
 
-    _logger.default.deprecate("The `inputRef` prop in `Select` component is deprecated and will soon be removed. Please use `ref` instead.");
+    _logger.default.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.default.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
 
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);

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

@@ -29,6 +29,8 @@ var _inputBehaviour = require("../../__internal__/input-behaviour");
 
 var _utils = require("../../style/utils");
 
+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; }
@@ -37,6 +39,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 SimpleColorPicker = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     children,
@@ -212,6 +216,13 @@ const SimpleColorPicker = /*#__PURE__*/_react.default.forwardRef((props, ref) =>
     warning,
     info
   };
+
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.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.default.createElement(_fieldset.default, _extends({
     role: "radiogroup",
     legend: legend,

package/lib/components/switch/switch.component.js

@@ -30,6 +30,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 let deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const Switch = /*#__PURE__*/_react.default.forwardRef(({
   autoFocus,
@@ -72,6 +73,12 @@ const Switch = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `inputRef` prop in `Switch` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const onChangeInternal = (0, _react.useCallback)(e => {
     setCheckedInternal(e.target.checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);

package/lib/components/textarea/textarea.component.js

@@ -50,6 +50,7 @@ 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 deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -122,6 +123,12 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `inputRef` prop in `Textarea` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const minHeight = (0, _react.useRef)(_textarea.MIN_HEIGHT);
 
   const expandTextarea = () => {

package/lib/components/textbox/textbox.component.js

@@ -52,6 +52,7 @@ 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 deprecateInputRefWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 
 const Textbox = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -127,6 +128,12 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecateUncontrolledWarnTriggered && !onChange) {
+    deprecateUncontrolledWarnTriggered = true;
+
+    _logger.default.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
+  }
+
   const {
     labelId,
     validationId,