carbon-react 114.7.1 → 114.8.0

package/esm/__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/esm/__internal__/checkable-input/checkable-input.component.js

@@ -6,8 +6,7 @@ import FormField from "../form-field";
 import HiddenCheckableInput from "./hidden-checkable-input.component";
 import guid from "../utils/helpers/guid";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
-
-const CheckableInput = ({
+const CheckableInput = /*#__PURE__*/React.forwardRef(({
   ariaLabelledBy: externalAriaLabelledBy,
   autoFocus,
   checked,
@@ -18,7 +17,6 @@ const CheckableInput = ({
   fieldHelpInline,
   info,
   id: inputId,
-  inputRef,
   type,
   value,
   inputWidth,
@@ -37,7 +35,7 @@ const CheckableInput = ({
   validationOnLabel,
   warning,
   ...props
-}) => {
+}, ref) => {
   const {
     current: id
   } = useRef(inputId || guid());
@@ -88,7 +86,6 @@ const CheckableInput = ({
     checked,
     disabled,
     id,
-    inputRef,
     type,
     value,
     name,
@@ -96,6 +93,7 @@ const CheckableInput = ({
     onChange,
     onFocus,
     required,
+    ref,
     ...props
   };
   return /*#__PURE__*/React.createElement(StyledCheckableInputWrapper, {
@@ -106,8 +104,7 @@ const CheckableInput = ({
     labelInline: labelInline,
     reverse: reverse
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, formFieldProps, /*#__PURE__*/React.createElement(StyledCheckableInput, null, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
-};
-
+});
 CheckableInput.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -203,9 +200,6 @@ CheckableInput.propTypes = {
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inlist": PropTypes.any,
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-  "inputRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
-  })]),
   "inputWidth": PropTypes.number,
   "is": PropTypes.string,
   "itemID": PropTypes.string,
@@ -469,4 +463,5 @@ CheckableInput.propTypes = {
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
+CheckableInput.displayName = "CheckableInput";
 export default CheckableInput;

package/esm/__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/esm/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -4,18 +4,16 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
-
-const HiddenCheckableInput = ({
+const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
   name,
   checked,
   type,
   value,
-  inputRef,
   onChange,
   autoFocus,
   role,
   ...props
-}) => {
+}, ref) => {
   const {
     onBlur,
     onFocus,
@@ -70,10 +68,9 @@ const HiddenCheckableInput = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onChange: onChange,
-    ref: inputRef
+    ref: ref
   }));
-};
-
+});
 HiddenCheckableInput.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -164,9 +161,6 @@ HiddenCheckableInput.propTypes = {
   "id": PropTypes.string,
   "inlist": PropTypes.any,
   "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-  "inputRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
-  })]),
   "is": PropTypes.string,
   "itemID": PropTypes.string,
   "itemProp": PropTypes.string,
@@ -369,4 +363,5 @@ HiddenCheckableInput.propTypes = {
   "vocab": PropTypes.string,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
+HiddenCheckableInput.displayName = "HiddenCheckableInput";
 export default /*#__PURE__*/React.memo(HiddenCheckableInput);

package/esm/__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/esm/__internal__/input/input.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, { useEffect, useContext, useRef } from "react";
+import React, { useEffect, useContext, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import StyledInput from "./input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
@@ -33,6 +33,7 @@ const Input = /*#__PURE__*/React.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,
@@ -50,15 +51,21 @@ const Input = /*#__PURE__*/React.forwardRef(({
   const deferredTimeout = useRef(null);
   let input = useRef(null);
 
-  if (ref) {
+  if (ref && "current" in ref) {
     input = ref;
   }
 
-  useEffect(() => {
-    if (autoFocus && input.current) {
-      input.current.focus();
+  const callbackRef = useCallback(element => {
+    input.current = element;
+
+    if (typeof ref === "function") {
+      ref(element);
+    }
+
+    if (autoFocus && element) {
+      element.focus();
     }
-  }, [autoFocus, input]);
+  }, [autoFocus, ref]);
   useEffect(() => {
     if (inputRef) {
       inputRef(input);
@@ -146,7 +153,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
     name: name,
     type: type,
     id: id || name,
-    ref: input,
+    ref: callbackRef,
     "data-element": "input",
     onFocus: handleFocus,
     onBlur: handleBlur,

package/esm/__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/esm/components/advanced-color-picker/advanced-color-picker.component.js

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

package/esm/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;

package/esm/components/checkbox/checkbox.component.js

@@ -9,8 +9,9 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { CheckboxGroupContext } from "./checkbox-group.component";
-
-const Checkbox = ({
+import Logger from "../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
+const Checkbox = /*#__PURE__*/React.forwardRef(({
   id,
   label,
   onChange,
@@ -42,8 +43,9 @@ const Checkbox = ({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...props
-}) => {
+}, ref) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
   const {
@@ -51,6 +53,12 @@ const Checkbox = ({
     warning: contextWarning,
     info: contextInfo
   } = useContext(CheckboxGroupContext);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `Checkbox` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const inputProps = {
     onClick,
     onChange,
@@ -77,6 +85,7 @@ const Checkbox = ({
     inputWidth,
     labelWidth,
     tooltipPosition,
+    ref: ref || inputRef,
     ...props
   };
   return /*#__PURE__*/React.createElement(TooltipProvider, {
@@ -97,8 +106,7 @@ const Checkbox = ({
     reverse: reverse,
     size: size
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null))));
-};
-
+});
 Checkbox.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,

package/esm/components/date/date.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, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { additionalYears, findMatchedFormatAndValue, formattedValue, formatToISO, isDateValid, parseDate, parseISODate, checkISOFormatAndLength, getSeparator } from "./__internal__/utils";
@@ -13,9 +13,10 @@ import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
+import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
-const DateInput = ({
+let deprecateInputRefWarnTriggered = false;
+const DateInput = /*#__PURE__*/React.forwardRef(({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
   autoFocus,
@@ -38,11 +39,12 @@ const DateInput = ({
   size = "medium",
   tooltipPosition,
   value,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const wrapperRef = useRef();
   const parentRef = useRef();
-  const inputRef = useRef();
+  const internalInputRef = useRef();
   const alreadyFocused = useRef(false);
   const isBlurBlocked = useRef(false);
   const focusedViaPicker = useRef(false);
@@ -63,6 +65,11 @@ const DateInput = ({
   const [selectedDays, setSelectedDays] = useState(checkISOFormatAndLength(value) ? parseISODate(value) : parseDate(format, value));
   const isInitialValue = useRef(true);
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `DateInput` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
 
   const buildCustomEvent = ev => {
@@ -90,9 +97,9 @@ const DateInput = ({
   const handleClickAway = () => {
     if (open) {
       alreadyFocused.current = true;
-      inputRef.current.focus();
+      internalInputRef.current.focus();
       isBlurBlocked.current = false;
-      inputRef.current.blur();
+      internalInputRef.current.blur();
       setOpen(false);
       alreadyFocused.current = false;
     }
@@ -106,10 +113,10 @@ const DateInput = ({
   };
 
   const focusInput = () => {
-    var _inputRef$current;
+    var _internalInputRef$cur;
 
     focusedViaPicker.current = true;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    (_internalInputRef$cur = internalInputRef.current) === null || _internalInputRef$cur === void 0 ? void 0 : _internalInputRef$cur.focus();
   };
 
   const handleDayClick = (day, ev) => {
@@ -234,11 +241,19 @@ const DateInput = ({
     handleClickInside(ev);
   };
 
-  const assignInput = input => {
+  const assignInput = useCallback(inputElement => {
     var _inputRefMap$inputNam;
 
-    inputRef.current = input.current;
-    parentRef.current = input.current.parentElement;
+    internalInputRef.current = inputElement;
+    parentRef.current = inputElement === null || inputElement === void 0 ? void 0 : inputElement.parentElement;
+
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(inputElement);
+      } else {
+        ref.current = inputElement;
+      }
+    }
 
     if (inputRefMap && ((_inputRefMap$inputNam = inputRefMap[inputName]) === null || _inputRefMap$inputNam === void 0 ? void 0 : _inputRefMap$inputNam.setOpen) !== setOpen) {
       setInputRefMap({
@@ -248,8 +263,7 @@ const DateInput = ({
         }
       });
     }
-  };
-
+  }, [inputName, inputRefMap, setInputRefMap, ref]);
   useEffect(() => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(value, formats);
 
@@ -292,6 +306,7 @@ const DateInput = ({
   }, filterStyledSystemMarginProps(rest), {
     applyDateRangeStyling: !!inputRefMap
   }), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
+    inputRef: inputRef,
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,
@@ -303,7 +318,7 @@ const DateInput = ({
     iconOnMouseDown: handleIconMouseDown,
     inputIcon: "calendar",
     labelInline: labelInline,
-    inputRef: assignInput,
+    ref: assignInput,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel,
@@ -323,8 +338,7 @@ const DateInput = ({
     pickerMouseDown: handlePickerMouseDown,
     open: open
   }));
-};
-
+});
 DateInput.propTypes = { ...Textbox.propTypes,
   ...marginPropTypes,
 
@@ -351,4 +365,5 @@ DateInput.propTypes = { ...Textbox.propTypes,
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue: PropTypes.bool
 };
+DateInput.displayName = "DateInput";
 export default DateInput;

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

@@ -26,6 +26,8 @@ const DateRange = ({
   tooltipPosition,
   validationOnLabel,
   value,
+  startRef,
+  endRef,
   ...rest
 }) => {
   const l = useLocale();
@@ -220,13 +222,15 @@ const DateRange = ({
     "data-element": "start-date",
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
     ,
-    tooltipPosition: tooltipPosition
+    tooltipPosition: tooltipPosition,
+    ref: startRef
   })), /*#__PURE__*/React.createElement(DateInput, _extends({}, dateProps("end"), {
     onFocus: () => handleFocus("start"),
     "data-element": "end-date",
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
     ,
-    tooltipPosition: tooltipPosition
+    tooltipPosition: tooltipPosition,
+    ref: endRef
   }))));
 };
 
@@ -268,6 +272,13 @@ DateRange.propTypes = {
   Pass true boolean to only display blue border */
   startInfo: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
+  /**
+   * A React ref to pass to the first of the two Date Input fields
+   */
+  startRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLInputElement)
+  })]),
+
   /** Indicate that error has occurred on end date
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
@@ -283,6 +294,13 @@ DateRange.propTypes = {
   Pass true boolean to only display blue border */
   endInfo: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
+  /**
+   * A React ref to pass to the second of the two Date Input fields
+   */
+  endRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLInputElement)
+  })]),
+
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */
   validationOnLabel: PropTypes.bool,
 

package/esm/components/date-range/date-range.d.ts

@@ -40,6 +40,10 @@ export interface DateRangeProps extends MarginProps {
    * Pass true boolean to only display orange border
    */
   endWarning?: boolean | string;
+  /**
+   * A React ref to pass to the second of the two Date Input fields
+   */
+  endRef?: React.ForwardedRef<HTMLInputElement>;
   /** An optional string prop to provide an id to the component */
   id?: string;
   /** Display labels inline */
@@ -71,6 +75,10 @@ export interface DateRangeProps extends MarginProps {
    * Pass true boolean to only display blue border
    */
   startInfo?: boolean | string;
+  /**
+   * A React ref to pass to the first of the two Date Input fields
+   */
+  startRef?: React.ForwardedRef<HTMLInputElement>;
   /** An array containing the value of startDate and endDate */
   value: string[];
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */

package/esm/components/decimal/decimal.component.d.ts

@@ -40,5 +40,5 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     /** The locale string - default en */
     locale?: string;
 }
-export declare const Decimal: ({ align, defaultValue, precision, inputWidth, readOnly, onChange, onBlur, onKeyPress, id, name, allowEmptyValue, required, locale, value, ...rest }: DecimalProps) => JSX.Element;
+export declare const Decimal: React.ForwardRefExoticComponent<DecimalProps & React.RefAttributes<HTMLInputElement>>;
 export default Decimal;

package/esm/components/decimal/decimal.component.js

@@ -6,8 +6,9 @@ import invariant from "invariant";
 import Textbox from "../textbox";
 import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
-
-const Decimal = ({
+import Logger from "../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
+const Decimal = /*#__PURE__*/React.forwardRef(({
   align = "right",
   defaultValue,
   precision = 2,
@@ -22,9 +23,16 @@ const Decimal = ({
   required,
   locale,
   value,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const l = useContext(LocaleContext);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `Decimal` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const emptyValue = allowEmptyValue ? "" : "0.00";
   const getSafeValueProp = useCallback(initialValue => {
     // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
@@ -54,7 +62,7 @@ const Decimal = ({
       return valueToFormat;
     }
     /* Guards against any white-space only strings like "   " being 
-     mishandled and returned as `NaN` for the value displayed in the textbox */
+    mishandled and returned as `NaN` for the value displayed in the textbox */
 
 
     if (valueToFormat === "" || valueToFormat.match(/\s+/g)) {
@@ -194,15 +202,16 @@ const Decimal = ({
     onBlur: handleOnBlur,
     value: stateValue,
     "data-component": "decimal",
-    id: id
+    id: id,
+    ref: ref,
+    inputRef: inputRef
   }, rest)), /*#__PURE__*/React.createElement("input", {
     name: name,
     value: toStandardDecimal(stateValue),
     type: "hidden",
     "data-component": "hidden-input"
   }));
-};
-
+});
 Decimal.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -734,4 +743,5 @@ Decimal.propTypes = {
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Decimal };
+Decimal.displayName = "Decimal";
 export default Decimal;

package/esm/components/grouped-character/grouped-character.component.d.ts

@@ -26,5 +26,5 @@ export interface GroupedCharacterProps extends Omit<TextboxProps, "onChange" | "
     /** Input value if component is meant to be used as a controlled component */
     value?: string;
 }
-export declare const GroupedCharacter: ({ defaultValue, groups, onBlur, onChange, separator: rawSeparator, value: externalValue, ...rest }: GroupedCharacterProps) => JSX.Element;
+export declare const GroupedCharacter: React.ForwardRefExoticComponent<GroupedCharacterProps & React.RefAttributes<HTMLInputElement>>;
 export default GroupedCharacter;

package/esm/components/grouped-character/grouped-character.component.js

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import { generateGroups, toSum } from "./grouped-character.utils";
+import Logger from "../../__internal__/utils/logger";
 
 const buildCustomTarget = ({
   target
@@ -22,21 +23,28 @@ const buildCustomTarget = ({
   };
 };
 
-const GroupedCharacter = ({
+let deprecateInputRefWarnTriggered = false;
+const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
   defaultValue,
   groups,
   onBlur,
   onChange,
   separator: rawSeparator,
   value: externalValue,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue || "");
   const isControlled = externalValue !== undefined;
   const separator = rawSeparator.substring(0, 1); // Ensure max length is 1
 
   const maxRawLength = groups.reduce(toSum);
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `GroupedCharacter` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const formatValue = val => generateGroups(groups, val).join(separator);
 
   const sanitizeValue = val => val.split(separator).join("").substring(0, maxRawLength);
@@ -115,10 +123,11 @@ const GroupedCharacter = ({
     formattedValue: formatValue(value),
     onChange: handleChange,
     onBlur: handleBlur,
-    onKeyPress: handleKeyPress
+    onKeyPress: handleKeyPress,
+    inputRef: inputRef,
+    ref: ref
   }));
-};
-
+});
 GroupedCharacter.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -655,4 +664,5 @@ GroupedCharacter.propTypes = {
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { GroupedCharacter };
+GroupedCharacter.displayName = "GroupedCharacter";
 export default GroupedCharacter;

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

@@ -103,7 +103,7 @@ const MenuItem = ({
     ref
   };
   const clonedChildren = isChildSearch.current ? childrenItems.map(child => /*#__PURE__*/React.cloneElement(child, {
-    inputRef: childRef
+    ref: childRef
   })) : children;
 
   const getTitle = title => maxWidth && typeof title === "string" ? title : "";