carbon-react 114.7.1 → 114.8.0

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

@@ -25,6 +25,8 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 
 var _button = _interopRequireDefault(require("../button"));
 
+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; }
@@ -33,7 +35,9 @@ 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); }
 
-const Search = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Search = /*#__PURE__*/_react.default.forwardRef(({
   defaultValue,
   onChange,
   onClick,
@@ -57,9 +61,16 @@ const Search = ({
   info,
   tooltipPosition,
   ...rest
-}) => {
+}, ref) => {
   const isControlled = value !== undefined;
   const initialValue = isControlled ? value : defaultValue;
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Search` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   !(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);
@@ -155,12 +166,6 @@ const Search = ({
     }
   };
 
-  const assignInput = input => {
-    if (inputRef) {
-      inputRef.current = input === null || input === void 0 ? void 0 : input.current;
-    }
-  };
-
   const isSearchTyped = isFocused || (!isControlled ? !!searchValue.length : !!value.length);
   return /*#__PURE__*/_react.default.createElement(_search.default, _extends({
     isFocused: isFocused,
@@ -186,7 +191,7 @@ const Search = ({
     onBlur: handleBlur,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
-    inputRef: assignInput,
+    ref: ref || inputRef,
     tabIndex: tabIndex,
     error: error,
     warning: warning,
@@ -198,7 +203,7 @@ const Search = ({
   }, buttonProps), /*#__PURE__*/_react.default.createElement(_searchButton.StyledButtonIcon, null, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "search"
   })))));
-};
+});
 
 exports.Search = Search;
 Search.propTypes = {
@@ -381,5 +386,6 @@ Search.propTypes = {
   "variant": _propTypes.default.oneOf(["dark", "default"]),
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
+Search.displayName = "Search";
 var _default = Search;
 exports.default = _default;

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

@@ -27,6 +27,8 @@ var _isExpectedOption = _interopRequireDefault(require("../utils/is-expected-opt
 
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
 
+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; }
@@ -35,6 +37,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;
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
 
 const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
@@ -69,8 +72,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   tooltipPosition,
   listPlacement = "bottom",
   flipEnabled = true,
+  inputRef,
   ...textboxProps
-}, inputRef) => {
+}, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const labelId = (0, _react.useRef)(label ? (0, _guid.default)() : undefined);
@@ -86,6 +90,13 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
+
+  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.");
+  }
+
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
       target: { ...(name && {
@@ -383,13 +394,19 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     onListAction();
   }
 
-  function assignInput(input) {
-    setTextboxRef(input.current);
+  const assignInput = (0, _react.useCallback)(element => {
+    setTextboxRef(element);
 
-    if (inputRef) {
-      inputRef.current = input.current;
+    if (inputRef || !ref) {
+      return;
     }
-  }
+
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      ref.current = element;
+    }
+  }, [ref, inputRef]);
 
   function getTextboxProps() {
     return {
@@ -398,7 +415,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       label,
       disabled,
       readOnly,
-      inputRef: assignInput,
+      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -410,6 +427,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       onChange: handleTextboxChange,
       onMouseDown: handleTextboxMouseDown,
       tooltipPosition,
+      inputRef,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }

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

@@ -31,6 +31,8 @@ var _isExpectedValue = _interopRequireDefault(require("../utils/is-expected-valu
 
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
 
+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; }
@@ -39,6 +41,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;
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
 
 const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
@@ -72,8 +75,9 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   listMaxHeight,
   flipEnabled = true,
   wrapPillText = true,
+  inputRef,
   ...textboxProps
-}, inputRef) => {
+}, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());
@@ -93,6 +97,13 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [filterText, setFilterText] = (0, _react.useState)("");
   const [placeholderOverride, setPlaceholderOverride] = (0, _react.useState)();
   const actualValue = isControlled.current ? value : selectedValue;
+
+  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.");
+  }
+
   const setOpen = (0, _react.useCallback)(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
@@ -402,13 +413,19 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     });
   }
 
-  function assignInput(input) {
-    setTextboxRef(input.current);
+  const assignInput = (0, _react.useCallback)(element => {
+    setTextboxRef(element);
 
-    if (inputRef) {
-      inputRef.current = input.current;
+    if (inputRef || !ref) {
+      return;
     }
-  }
+
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      ref.current = element;
+    }
+  }, [ref, inputRef]);
 
   function getTextboxProps() {
     return {
@@ -418,7 +435,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       readOnly,
       placeholder: placeholderOverride,
       leftChildren: mapValuesToPills,
-      inputRef: assignInput,
+      ref: assignInput,
       formattedValue: textValue,
       selectedValue: actualValue,
       onClick: handleTextboxClick,
@@ -431,6 +448,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       onChange: handleTextboxChange,
       tooltipPosition,
       size,
+      inputRef,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }

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

@@ -44,7 +44,7 @@ const floatingMiddleware = [(0, _dom.offset)(({
 
 })];
 
-const SelectTextbox = ({
+const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
   accessibilityLabelId,
   labelId,
   "aria-controls": ariaControls,
@@ -65,7 +65,7 @@ const SelectTextbox = ({
   transparent,
   activeDescendantId,
   ...restProps
-}) => {
+}, ref) => {
   const reference = (0, _react.useMemo)(() => ({
     current: textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.parentElement.parentElement
   }), [textboxRef]);
@@ -117,6 +117,7 @@ const SelectTextbox = ({
       onBlur: handleTextboxBlur,
       labelId,
       type: "text",
+      ref,
       ...restProps
     };
   }
@@ -167,7 +168,7 @@ const SelectTextbox = ({
     value: selectedValue,
     placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
   }, getInputAriaAttributes(), getTextboxProps()), !hasTextCursor && renderSelectText());
-};
+});
 
 const formInputPropTypes = {
   /**
@@ -284,5 +285,6 @@ SelectTextbox.propTypes = { ...formInputPropTypes,
    * Value of the Select Input */
   selectedValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.object)])
 };
+SelectTextbox.displayName = "SelectTextbox";
 var _default = SelectTextbox;
 exports.default = _default;

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

@@ -29,6 +29,8 @@ var _isExpectedOption = _interopRequireDefault(require("../utils/is-expected-opt
 
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
 
+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 deprecateInputRefWarnTriggered = false;
+
 const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   value,
   defaultValue,
@@ -65,8 +69,9 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   "data-role": dataRole,
   listPlacement = "bottom",
   flipEnabled = true,
+  inputRef,
   ...props
-}, inputRef) => {
+}, ref) => {
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const labelId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)();
@@ -82,6 +87,13 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const [textValue, setTextValue] = (0, _react.useState)("");
   const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
+
+  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.");
+  }
+
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
@@ -312,13 +324,19 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     setOpenState(false);
   }
 
-  function assignInput(input) {
-    setTextboxRef(input.current);
+  const assignInput = (0, _react.useCallback)(element => {
+    setTextboxRef(element);
 
-    if (inputRef) {
-      inputRef.current = input.current;
+    if (inputRef || !ref) {
+      return;
     }
-  }
+
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      ref.current = element;
+    }
+  }, [ref, inputRef]);
 
   function getTextboxProps() {
     return {
@@ -326,7 +344,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       name,
       disabled,
       readOnly,
-      inputRef: assignInput,
+      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -337,6 +355,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       onBlur: handleTextboxBlur,
       tooltipPosition,
       transparent,
+      inputRef,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(props)
     };
   }

package/lib/components/simple-color-picker/simple-color/simple-color.style.d.ts

@@ -3,7 +3,7 @@ export declare const StyledSimpleColor: import("styled-components").StyledCompon
 export declare const StyledColorSampleBox: import("styled-components").StyledComponent<"div", any, {
     color: string;
 }, never>;
-export declare const StyledSimpleColorInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../__internal__/input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
+export declare const StyledSimpleColorInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../__internal__/input").InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>, any, {}, never>;
 export declare const StyledTickIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
     color: string;
 }, never>;

package/lib/components/switch/switch.component.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
 export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
@@ -26,6 +26,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
+    /** A callback to retrieve the input reference (deprecated) */
+    inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare const Switch: ({ autoFocus, id, label, onChange, onBlur, onFocus, value, checked, defaultChecked, disabled, loading, reverse, validationOnLabel, labelInline, labelSpacing, labelHelp, fieldHelpInline, size, name, adaptiveLabelBreakpoint, tooltipPosition, error, warning, info, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...rest }: SwitchProps) => JSX.Element;
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default Switch;

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

@@ -21,13 +21,17 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 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; }
 
 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; }
 
-const Switch = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Switch = /*#__PURE__*/_react.default.forwardRef(({
   autoFocus,
   id,
   label,
@@ -56,10 +60,18 @@ const Switch = ({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const isControlled = checked !== undefined;
   const [checkedInternal, setCheckedInternal] = (0, _react.useState)(defaultChecked || false);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Switch` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const onChangeInternal = (0, _react.useCallback)(e => {
     setCheckedInternal(e.target.checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -118,13 +130,14 @@ const Switch = ({
     reverse: !reverse,
     // switched to preserve backward compatibility
     validationOnLabel: shouldValidationBeOnLabel && !disabled,
+    ref: ref || inputRef,
     ...rest
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps))));
-};
+});
 
 exports.Switch = Switch;
 Switch.propTypes = {
@@ -648,5 +661,6 @@ Switch.propTypes = {
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+Switch.displayName = "Switch";
 var _default = Switch;
 exports.default = _default;

package/lib/components/textarea/textarea.component.d.ts

@@ -94,6 +94,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     Pass true boolean to only display orange border */
     warning?: boolean | string;
 }
-export declare const Textarea: ({ autoFocus, fieldHelp, label, size, children, characterLimit, enforceCharacterLimit, warnOverLimit, onChange, disabled, labelInline, labelAlign, labelHelp, labelSpacing, inputIcon, id: idProp, error, warning, info, name, readOnly, placeholder, expandable, rows, cols, validationOnLabel, adaptiveLabelBreakpoint, inputWidth, maxWidth, labelWidth, tooltipPosition, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea as OriginalTextarea };
 export default Textarea;

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

@@ -39,6 +39,8 @@ var _validationMessage = _interopRequireDefault(require("../../__internal__/vali
 
 var _box = _interopRequireDefault(require("../box"));
 
+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,7 +49,9 @@ 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); }
 
-const Textarea = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   autoFocus,
   fieldHelp,
   label,
@@ -84,8 +88,9 @@ const Textarea = ({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...props
-}) => {
+}, ref) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -95,11 +100,31 @@ const Textarea = ({
   const {
     current: id
   } = (0, _react.useRef)(idProp || (0, _guid.default)());
-  const inputRef = (0, _react.useRef)(null);
+  const internalRef = (0, _react.useRef)(null);
+  const callbackRef = (0, _react.useCallback)(inputElement => {
+    internalRef.current = inputElement;
+
+    if (!ref) {
+      return;
+    }
+
+    if ("current" in ref) {
+      ref.current = inputElement;
+    } else {
+      ref(inputElement);
+    }
+  }, [ref]);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Textarea` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const minHeight = (0, _react.useRef)(_textarea.MIN_HEIGHT);
 
   const expandTextarea = () => {
-    const textarea = inputRef.current;
+    const textarea = internalRef.current;
 
     if (textarea !== null && textarea !== void 0 && textarea.scrollHeight && (textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight) > minHeight.current) {
       textarea.style.height = "0px"; // Set the height so all content is shown
@@ -126,9 +151,9 @@ const Textarea = ({
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   (0, _react.useEffect)(() => {
     if (rows) {
-      var _inputRef$current;
+      var _internalRef$current;
 
-      minHeight.current = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.scrollHeight) || 0;
+      minHeight.current = (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.scrollHeight) || 0;
     }
   }, [rows]);
   (0, _react.useEffect)(() => {
@@ -138,10 +163,10 @@ const Textarea = ({
   });
   (0, _react.useEffect)(() => {
     if (expandable) {
-      var _inputRef$current2;
+      var _internalRef$current2;
 
       window.addEventListener("resize", expandTextarea);
-      minHeight.current = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.clientHeight) || 0;
+      minHeight.current = (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.clientHeight) || 0;
     }
 
     return () => {
@@ -168,7 +193,7 @@ const Textarea = ({
     autoFocus: autoFocus,
     name: name,
     value: value,
-    ref: inputRef,
+    ref: callbackRef,
     maxLength: maxLength,
     onChange: onChange,
     disabled: disabled,
@@ -177,7 +202,8 @@ const Textarea = ({
     rows: rows,
     cols: cols,
     id: id,
-    as: "textarea"
+    as: "textarea",
+    inputRef: inputRef
   }, props)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
     disabled: disabled,
     readOnly: readOnly,
@@ -226,7 +252,7 @@ const Textarea = ({
   }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     warning: !!(!error && warning)
   }), input) : input), characterCount)));
-};
+});
 
 exports.OriginalTextarea = exports.Textarea = Textarea;
 Textarea.propTypes = {
@@ -755,5 +781,6 @@ Textarea.propTypes = {
   "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+Textarea.displayName = "Textarea";
 var _default = Textarea;
 exports.default = _default;

package/lib/components/textbox/textbox.component.d.ts

@@ -93,5 +93,5 @@ export interface TextboxProps extends CommonTextboxProps {
     /** Whether to display the character count message in red */
     warnOverLimit?: boolean;
 }
-export declare const Textbox: ({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, maxWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: TextboxProps) => JSX.Element;
+export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Textbox;

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

@@ -39,6 +39,8 @@ var _numeralDateContext = _interopRequireDefault(require("../numeral-date/numera
 
 var _box = _interopRequireDefault(require("../box"));
 
+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,7 +49,9 @@ 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); }
 
-const Textbox = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Textbox = /*#__PURE__*/_react.default.forwardRef(({
   align = "left",
   autoFocus,
   children,
@@ -101,7 +105,7 @@ const Textbox = ({
   warnOverLimit = false,
   helpAriaLabel,
   ...props
-}) => {
+}, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [maxLength, characterCount] = (0, _useCharacterCount.default)(characterCountValue, // TODO: Can be removed after the characterLimit type is changed to number
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
@@ -115,6 +119,13 @@ const Textbox = ({
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
 
   const [uniqueId, uniqueName] = (0, _useUniqueId.default)(id, name);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const {
     labelId: internalLabelId,
     validationIconId,
@@ -158,6 +169,7 @@ const Textbox = ({
     disabled: disabled,
     id: uniqueId,
     inputRef: inputRef,
+    ref: ref,
     name: uniqueName,
     onBlur: onBlur,
     onChange: onChange,
@@ -221,7 +233,7 @@ const Textbox = ({
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     warning: !!(!error && warning)
   }), input) : input), characterCount));
-};
+});
 
 exports.Textbox = Textbox;
 Textbox.propTypes = {
@@ -757,5 +769,6 @@ Textbox.propTypes = {
   "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+Textbox.displayName = "Textbox";
 var _default = Textbox;
 exports.default = _default;