carbon-react 114.7.1 → 114.9.0

package/esm/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -13,6 +13,7 @@ export const TabTitleContext = /*#__PURE__*/React.createContext({});
 const TabTitle = /*#__PURE__*/React.forwardRef(({
   isTabSelected,
   dataTabId,
+  "data-role": dataRole,
   title,
   position = "top",
   error,
@@ -127,6 +128,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     "aria-selected": isTabSelected,
     "data-element": "select-tab",
     "data-tabid": dataTabId,
+    "data-role": dataRole,
     role: "tab",
     position: position,
     isTabSelected: isTabSelected,
@@ -201,6 +203,9 @@ TabTitle.propTypes = {
   isTabSelected: PropTypes.bool,
   position: PropTypes.oneOf(["top", "left"]),
   className: PropTypes.string,
+
+  /** Identifier used for testing purposes */
+  "data-role": PropTypes.string,
   dataTabId: PropTypes.string,
   id: PropTypes.string,
   onClick: PropTypes.func,

package/esm/components/tabs/__internal__/tab-title/tab-title.d.ts

@@ -5,6 +5,8 @@ export interface TabTitleContextProps {
 }
 
 export interface TabTitleProps {
+  /** Identifier used for testing purposes */
+  "data-role"?: string;
   title: string;
   id?: string;
   dataTabId?: string;

package/esm/components/tabs/tab/tab.component.js

@@ -22,6 +22,7 @@ const Tab = ({
   updateInfos,
   href,
   title,
+  titleProps,
   ...rest
 }) => {
   const [tabErrors, setTabErrors] = useState({});
@@ -124,7 +125,13 @@ Tab.propTypes = { ...paddingPropTypes,
   titlePosition: PropTypes.oneOf(["before", "after"]),
 
   /** Allows Tab to be a link */
-  href: PropTypes.string
+  href: PropTypes.string,
+
+  /** Additional props to be passed to the Tab's corresponding title */
+  titleProps: PropTypes.shape({
+    /** Identifier used for testing purposes */
+    "data-role": PropTypes.string
+  })
 };
 export { TabContext };
 export default Tab;

package/esm/components/tabs/tab/tab.d.ts

@@ -32,6 +32,11 @@ export interface TabProps extends PaddingProps {
   href?: string;
   /** Overrides default layout with a one defined in this prop */
   customLayout?: React.ReactNode;
+  /** Additional props to be passed to the Tab's corresponding title. */
+  titleProps?: {
+    /** Identifier used for testing purposes */
+    "data-role"?: string;
+  };
 }
 
 export interface TabAllProps {

package/esm/components/tabs/tabs.component.js

@@ -170,7 +170,8 @@ const Tabs = ({
         warningMessage,
         infoMessage,
         href,
-        customLayout
+        customLayout,
+        titleProps
       } = child.props;
       const refId = `${tabId}-tab`;
       const errors = tabsErrors[tabId];
@@ -201,7 +202,7 @@ const Tabs = ({
         return summaryOfMessages.map(value => `• ${value}`).join("\n");
       };
 
-      const tabTitle = /*#__PURE__*/React.createElement(TabTitle, {
+      return /*#__PURE__*/React.createElement(TabTitle, _extends({}, titleProps, {
         position: isInSidebar ? "left" : position,
         className: child.props.className || "",
         dataTabId: tabId,
@@ -230,8 +231,7 @@ const Tabs = ({
         customLayout: customLayout,
         isInSidebar: isInSidebar,
         align: align
-      });
-      return tabTitle;
+      }));
     });
     return /*#__PURE__*/React.createElement(TabsHeader, {
       align: align,
@@ -243,22 +243,6 @@ const Tabs = ({
       isInSidebar: isInSidebar
     }, tabTitles);
   };
-  /** Builds the single currently selected tab */
-
-
-  const visibleTab = () => {
-    const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
-    return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
-      role: "tabpanel",
-      position,
-      isTabSelected: isTabSelected(tab.props.tabId),
-      key: `${tab.props.tabId}-tab`,
-      ariaLabelledby: `${tab.props.tabId}-tab`,
-      updateErrors,
-      updateWarnings,
-      updateInfos
-    });
-  };
   /** Builds all tabs where non selected tabs have class of hidden */
 
 
@@ -266,10 +250,20 @@ const Tabs = ({
     if (isInSidebar) return null;
 
     if (!renderHiddenTabs) {
-      return visibleTab();
+      const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
+      return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
+        role: "tabpanel",
+        position,
+        isTabSelected: isTabSelected(tab.props.tabId),
+        key: `${tab.props.tabId}-tab`,
+        ariaLabelledby: `${tab.props.tabId}-tab`,
+        updateErrors,
+        updateWarnings,
+        updateInfos
+      });
     }
 
-    const tabs = filteredChildren.map(child => {
+    return filteredChildren.map(child => {
       return /*#__PURE__*/cloneElement(child, { ...child.props,
         role: "tabpanel",
         position,
@@ -281,7 +275,6 @@ const Tabs = ({
         updateInfos
       });
     });
-    return tabs;
   };
 
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({

package/esm/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/esm/components/textarea/textarea.component.js

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect, useContext, useCallback } from "react";
 import PropTypes from "prop-types";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
@@ -16,9 +16,11 @@ import useInputAccessibility from "../../hooks/__internal__/useInputAccessibilit
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
-import Box from "../box"; // TODO: Change characterLimit type to number - batch with other breaking changes
+import Box from "../box";
+import Logger from "../../__internal__/utils/logger"; // TODO: Change characterLimit type to number - batch with other breaking changes
 
-const Textarea = ({
+let deprecateInputRefWarnTriggered = false;
+const Textarea = /*#__PURE__*/React.forwardRef(({
   autoFocus,
   fieldHelp,
   label,
@@ -55,8 +57,9 @@ const Textarea = ({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...props
-}) => {
+}, ref) => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -66,11 +69,30 @@ const Textarea = ({
   const {
     current: id
   } = useRef(idProp || guid());
-  const inputRef = useRef(null);
+  const internalRef = useRef(null);
+  const callbackRef = 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.deprecate("The `inputRef` prop in `Textarea` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const minHeight = useRef(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
@@ -97,9 +119,9 @@ const Textarea = ({
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   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]);
   useEffect(() => {
@@ -109,10 +131,10 @@ const Textarea = ({
   });
   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 () => {
@@ -138,7 +160,7 @@ const Textarea = ({
     autoFocus: autoFocus,
     name: name,
     value: value,
-    ref: inputRef,
+    ref: callbackRef,
     maxLength: maxLength,
     onChange: onChange,
     disabled: disabled,
@@ -147,7 +169,8 @@ const Textarea = ({
     rows: rows,
     cols: cols,
     id: id,
-    as: "textarea"
+    as: "textarea",
+    inputRef: inputRef
   }, props)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
     disabled: disabled,
     readOnly: readOnly,
@@ -195,8 +218,7 @@ const Textarea = ({
   }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!error && warning)
   }), input) : input), characterCount)));
-};
-
+});
 Textarea.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -724,5 +746,6 @@ Textarea.propTypes = {
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Textarea };
+Textarea.displayName = "Textarea";
 export { Textarea as OriginalTextarea };
 export default Textarea;

package/esm/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/esm/components/textbox/textbox.component.js

@@ -17,8 +17,9 @@ import ValidationMessage from "../../__internal__/validation-message";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "../numeral-date/numeral-date-context";
 import Box from "../box";
-
-const Textbox = ({
+import Logger from "../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
+const Textbox = /*#__PURE__*/React.forwardRef(({
   align = "left",
   autoFocus,
   children,
@@ -72,7 +73,7 @@ const Textbox = ({
   warnOverLimit = false,
   helpAriaLabel,
   ...props
-}) => {
+}, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [maxLength, characterCount] = useCharacterCount(characterCountValue, // TODO: Can be removed after the characterLimit type is changed to number
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
@@ -86,6 +87,12 @@ const Textbox = ({
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
 
   const [uniqueId, uniqueName] = useUniqueId(id, name);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const {
     labelId: internalLabelId,
     validationIconId,
@@ -128,6 +135,7 @@ const Textbox = ({
     disabled: disabled,
     id: uniqueId,
     inputRef: inputRef,
+    ref: ref,
     name: uniqueName,
     onBlur: onBlur,
     onChange: onChange,
@@ -190,8 +198,7 @@ const Textbox = ({
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!error && warning)
   }), input) : input), characterCount));
-};
-
+});
 Textbox.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -726,4 +733,5 @@ Textbox.propTypes = {
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Textbox };
+Textbox.displayName = "Textbox";
 export default Textbox;

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

@@ -9,6 +9,7 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import Button from "../button";
 import Box from "../box";
 import Accordion from "./__internal__/accordion";
+import Logger from "../../__internal__/utils/logger";
 import { StyledTileSelectContainer, StyledTileSelect, StyledTileSelectInput, StyledTitleContainer, StyledTitle, StyledSubtitle, StyledAdornment, StyledDescription, StyledDeselectWrapper, StyledFooterWrapper, StyledFocusWrapper, StyledAccordionFooterWrapper } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
@@ -17,7 +18,8 @@ const checkPropTypeIsNode = prop => typeof prop !== "string" && {
   as: "div"
 };
 
-const TileSelect = ({
+let deprecateInputRefWarnTriggered = false;
+const TileSelect = /*#__PURE__*/React.forwardRef(({
   onChange,
   onBlur,
   onFocus,
@@ -40,8 +42,9 @@ const TileSelect = ({
   accordionContent,
   accordionControl,
   accordionExpanded,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const l = useLocale();
   const [hasFocus, setHasFocus] = useState(false);
 
@@ -57,6 +60,11 @@ const TileSelect = ({
     }
   });
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `TileSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const renderActionButton = () => /*#__PURE__*/React.createElement(StyledDeselectWrapper, {
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/React.createElement(Button, {
@@ -101,7 +109,9 @@ const TileSelect = ({
     value: value,
     disabled: disabled,
     "aria-checked": checked,
-    id: id
+    id: id,
+    inputRef: inputRef,
+    ref: ref
   }, rest)), /*#__PURE__*/React.createElement(StyledTileSelect, {
     disabled: disabled,
     checked: checked
@@ -124,8 +134,7 @@ const TileSelect = ({
     controlId: controlId,
     expanded: accordionExpanded
   }, accordionContent)));
-};
-
+});
 TileSelect.defaultProps = {
   checked: false,
   type: "checkbox"

package/lib/__internal__/checkable-input/checkable-input.component.d.ts

@@ -46,5 +46,5 @@ export interface CheckableInputProps extends CommonCheckableInputProps {
     /** When true label is inline */
     labelInline?: boolean;
 }
-declare const CheckableInput: ({ ariaLabelledBy: externalAriaLabelledBy, autoFocus, checked, children, disabled, error, fieldHelp, fieldHelpInline, info, id: inputId, inputRef, type, value, inputWidth, label, labelAlign, labelHelp, labelInline, labelSpacing, labelWidth, name, onBlur, onChange, onFocus, required, reverse, validationOnLabel, warning, ...props }: CheckableInputProps) => JSX.Element;
+declare const CheckableInput: React.ForwardRefExoticComponent<CheckableInputProps & React.RefAttributes<HTMLInputElement>>;
 export default CheckableInput;

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -27,7 +27,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; }
 
-const CheckableInput = ({
+const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   ariaLabelledBy: externalAriaLabelledBy,
   autoFocus,
   checked,
@@ -38,7 +38,6 @@ const CheckableInput = ({
   fieldHelpInline,
   info,
   id: inputId,
-  inputRef,
   type,
   value,
   inputWidth,
@@ -57,7 +56,7 @@ const CheckableInput = ({
   validationOnLabel,
   warning,
   ...props
-}) => {
+}, ref) => {
   const {
     current: id
   } = (0, _react.useRef)(inputId || (0, _guid.default)());
@@ -108,7 +107,6 @@ const CheckableInput = ({
     checked,
     disabled,
     id,
-    inputRef,
     type,
     value,
     name,
@@ -116,6 +114,7 @@ const CheckableInput = ({
     onChange,
     onFocus,
     required,
+    ref,
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInputWrapper, {
@@ -126,7 +125,7 @@ const CheckableInput = ({
     labelInline: labelInline,
     reverse: reverse
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, formFieldProps, /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInput, null, /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, inputProps), children))));
-};
+});
 
 CheckableInput.propTypes = {
   "about": _propTypes.default.string,
@@ -223,9 +222,6 @@ CheckableInput.propTypes = {
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inlist": _propTypes.default.any,
   "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-  "inputRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.object]).isRequired
-  })]),
   "inputWidth": _propTypes.default.number,
   "is": _propTypes.default.string,
   "itemID": _propTypes.default.string,
@@ -489,5 +485,6 @@ CheckableInput.propTypes = {
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+CheckableInput.displayName = "CheckableInput";
 var _default = CheckableInput;
 exports.default = _default;

package/lib/__internal__/checkable-input/hidden-checkable-input.component.d.ts

@@ -18,8 +18,6 @@ export interface CommonHiddenCheckableInputProps extends Omit<React.InputHTMLAtt
     onMouseEnter?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Value of the input */
     value?: string;
-    /** A callback to retrieve the input reference */
-    inputRef?: React.Ref<HTMLInputElement>;
 }
 export interface HiddenCheckableInputProps extends CommonHiddenCheckableInputProps {
     /** HTML type attribute of the input */
@@ -27,5 +25,5 @@ export interface HiddenCheckableInputProps extends CommonHiddenCheckableInputPro
     /** Role attribute of the input */
     role?: string;
 }
-declare const _default: React.MemoExoticComponent<({ name, checked, type, value, inputRef, onChange, autoFocus, role, ...props }: HiddenCheckableInputProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<HiddenCheckableInputProps & React.RefAttributes<HTMLInputElement>>>;
 export default _default;

package/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -21,17 +21,16 @@ 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 HiddenCheckableInput = ({
+const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   name,
   checked,
   type,
   value,
-  inputRef,
   onChange,
   autoFocus,
   role,
   ...props
-}) => {
+}, ref) => {
   const {
     onBlur,
     onFocus,
@@ -86,9 +85,9 @@ const HiddenCheckableInput = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onChange: onChange,
-    ref: inputRef
+    ref: ref
   }));
-};
+});
 
 HiddenCheckableInput.propTypes = {
   "about": _propTypes.default.string,
@@ -180,9 +179,6 @@ HiddenCheckableInput.propTypes = {
   "id": _propTypes.default.string,
   "inlist": _propTypes.default.any,
   "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-  "inputRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.object]).isRequired
-  })]),
   "is": _propTypes.default.string,
   "itemID": _propTypes.default.string,
   "itemProp": _propTypes.default.string,
@@ -385,6 +381,7 @@ HiddenCheckableInput.propTypes = {
   "vocab": _propTypes.default.string,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+HiddenCheckableInput.displayName = "HiddenCheckableInput";
 
 var _default = /*#__PURE__*/_react.default.memo(HiddenCheckableInput);
 

package/lib/__internal__/input/input.component.d.ts

@@ -10,7 +10,7 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     /** HTML id attribute of the input */
     id?: string;
     /** A callback to retrieve the input reference */
-    inputRef?: (input: React.RefObject<HTMLInputElement>) => void;
+    inputRef?: (input: React.RefObject<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Name of the input */
     name?: string;
     /** Specify a callback triggered on blur */
@@ -42,5 +42,5 @@ export interface InputProps extends CommonInputProps {
     /** HTML type attribute of the input */
     type?: string;
 }
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export default Input;

package/lib/__internal__/input/input.component.js

@@ -49,6 +49,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   disabled,
   readOnly,
   autoFocus,
+  // TODO: remove inputRef prop from this component (and props interface) when it has been removed from all exposed input components
   inputRef,
   onClick,
   onChangeDeferred,
@@ -66,15 +67,21 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   const deferredTimeout = (0, _react.useRef)(null);
   let input = (0, _react.useRef)(null);
 
-  if (ref) {
+  if (ref && "current" in ref) {
     input = ref;
   }
 
-  (0, _react.useEffect)(() => {
-    if (autoFocus && input.current) {
-      input.current.focus();
+  const callbackRef = (0, _react.useCallback)(element => {
+    input.current = element;
+
+    if (typeof ref === "function") {
+      ref(element);
+    }
+
+    if (autoFocus && element) {
+      element.focus();
     }
-  }, [autoFocus, input]);
+  }, [autoFocus, ref]);
   (0, _react.useEffect)(() => {
     if (inputRef) {
       inputRef(input);
@@ -162,7 +169,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
     name: name,
     type: type,
     id: id || name,
-    ref: input,
+    ref: callbackRef,
     "data-element": "input",
     onFocus: handleFocus,
     onBlur: handleBlur,

package/lib/__internal__/input-behaviour/useInputBehaviour.d.ts

@@ -7,7 +7,7 @@ export interface InputContextProps {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     inputRef?: (input: {
-        current: HTMLInputElement | null;
+        current: HTMLInputElement | HTMLTextAreaElement | null;
     }) => void;
     ariaLabelledBy?: string;
 }

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

@@ -159,9 +159,7 @@ const AdvancedColorPicker = ({
     "aria-label": label,
     id: value,
     defaultChecked: value === currentColor,
-    inputRef: input => {
-      ref.current = input.current;
-    }
+    ref: ref
   })))));
 };
 

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

@@ -22,9 +22,8 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;
+    /** A callback to retrieve the input reference (deprecated) */
+    inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare const Checkbox: {
-    ({ id, label, onChange, name, onClick, onBlur, onFocus, value, fieldHelp, autoFocus, labelHelp, labelSpacing, labelWidth, adaptiveSpacingBreakpoint, required, error, warning, info, fieldHelpInline, reverse, checked, disabled, inputWidth, size, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: CheckboxProps): JSX.Element;
-    displayName: string;
-};
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;