carbon-react 114.7.1 → 114.9.0

package/lib/components/checkbox/checkbox.component.js

@@ -23,6 +23,8 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _checkboxGroup = require("./checkbox-group.component");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -31,7 +33,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 Checkbox = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
   id,
   label,
   onChange,
@@ -63,8 +67,9 @@ const Checkbox = ({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...props
-}) => {
+}, ref) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
   const {
@@ -72,6 +77,13 @@ const Checkbox = ({
     warning: contextWarning,
     info: contextInfo
   } = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Checkbox` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const inputProps = {
     onClick,
     onChange,
@@ -98,6 +110,7 @@ const Checkbox = ({
     inputWidth,
     labelWidth,
     tooltipPosition,
+    ref: ref || inputRef,
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
@@ -118,7 +131,7 @@ const Checkbox = ({
     reverse: reverse,
     size: size
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null))));
-};
+});
 
 exports.Checkbox = Checkbox;
 Checkbox.propTypes = {

package/lib/components/date/date.component.js

@@ -31,6 +31,8 @@ var _dateRange = _interopRequireDefault(require("../date-range/date-range.contex
 
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 
+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; }
@@ -40,8 +42,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 marginPropTypes = (0, _utils2.filterStyledSystemMarginProps)(_propTypes2.default.space);
+let deprecateInputRefWarnTriggered = false;
 
-const DateInput = ({
+const DateInput = /*#__PURE__*/_react.default.forwardRef(({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
   autoFocus,
@@ -64,11 +67,12 @@ const DateInput = ({
   size = "medium",
   tooltipPosition,
   value,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const wrapperRef = (0, _react.useRef)();
   const parentRef = (0, _react.useRef)();
-  const inputRef = (0, _react.useRef)();
+  const internalInputRef = (0, _react.useRef)();
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
@@ -89,6 +93,12 @@ const DateInput = ({
   const [selectedDays, setSelectedDays] = (0, _react.useState)((0, _utils.checkISOFormatAndLength)(value) ? (0, _utils.parseISODate)(value) : (0, _utils.parseDate)(format, value));
   const isInitialValue = (0, _react.useRef)(true);
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.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 => {
@@ -116,9 +126,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;
     }
@@ -132,10 +142,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) => {
@@ -260,11 +270,19 @@ const DateInput = ({
     handleClickInside(ev);
   };
 
-  const assignInput = input => {
+  const assignInput = (0, _react.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({
@@ -274,8 +292,7 @@ const DateInput = ({
         }
       });
     }
-  };
-
+  }, [inputName, inputRefMap, setInputRefMap, ref]);
   (0, _react.useEffect)(() => {
     const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(value, formats);
 
@@ -318,6 +335,7 @@ const DateInput = ({
   }, (0, _utils2.filterStyledSystemMarginProps)(rest), {
     applyDateRangeStyling: !!inputRefMap
   }), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
+    inputRef: inputRef,
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,
@@ -329,7 +347,7 @@ const DateInput = ({
     iconOnMouseDown: handleIconMouseDown,
     inputIcon: "calendar",
     labelInline: labelInline,
-    inputRef: assignInput,
+    ref: assignInput,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel,
@@ -349,7 +367,7 @@ const DateInput = ({
     pickerMouseDown: handlePickerMouseDown,
     open: open
   }));
-};
+});
 
 DateInput.propTypes = { ..._textbox.default.propTypes,
   ...marginPropTypes,
@@ -377,5 +395,6 @@ DateInput.propTypes = { ..._textbox.default.propTypes,
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue: _propTypes.default.bool
 };
+DateInput.displayName = "DateInput";
 var _default = DateInput;
 exports.default = _default;

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

@@ -52,6 +52,8 @@ const DateRange = ({
   tooltipPosition,
   validationOnLabel,
   value,
+  startRef,
+  endRef,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -246,13 +248,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.default.createElement(_date.default, _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
   }))));
 };
 
@@ -294,6 +298,13 @@ DateRange.propTypes = {
   Pass true boolean to only display blue border */
   startInfo: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
 
+  /**
+   * A React ref to pass to the first of the two Date Input fields
+   */
+  startRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.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 */
@@ -309,6 +320,13 @@ DateRange.propTypes = {
   Pass true boolean to only display blue border */
   endInfo: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
 
+  /**
+   * A React ref to pass to the second of the two Date Input fields
+   */
+  endRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.instanceOf(HTMLInputElement)
+  })]),
+
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */
   validationOnLabel: _propTypes.default.bool,
 

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

@@ -17,6 +17,8 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
 
 var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
 
+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; }
@@ -25,7 +27,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 Decimal = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Decimal = /*#__PURE__*/_react.default.forwardRef(({
   align = "right",
   defaultValue,
   precision = 2,
@@ -40,9 +44,17 @@ const Decimal = ({
   required,
   locale,
   value,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const l = (0, _react.useContext)(_i18nContext.default);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.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 = (0, _react.useCallback)(initialValue => {
     // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
@@ -72,7 +84,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)) {
@@ -212,14 +224,16 @@ const Decimal = ({
     onBlur: handleOnBlur,
     value: stateValue,
     "data-component": "decimal",
-    id: id
+    id: id,
+    ref: ref,
+    inputRef: inputRef
   }, rest)), /*#__PURE__*/_react.default.createElement("input", {
     name: name,
     value: toStandardDecimal(stateValue),
     type: "hidden",
     "data-component": "hidden-input"
   }));
-};
+});
 
 exports.Decimal = Decimal;
 Decimal.propTypes = {
@@ -752,5 +766,6 @@ Decimal.propTypes = {
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+Decimal.displayName = "Decimal";
 var _default = Decimal;
 exports.default = _default;

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

@@ -13,6 +13,8 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 
 var _groupedCharacter = require("./grouped-character.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; }
@@ -38,21 +40,30 @@ const buildCustomTarget = ({
   };
 };
 
-const GroupedCharacter = ({
+let deprecateInputRefWarnTriggered = false;
+
+const GroupedCharacter = /*#__PURE__*/_react.default.forwardRef(({
   defaultValue,
   groups,
   onBlur,
   onChange,
   separator: rawSeparator,
   value: externalValue,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue || "");
   const isControlled = externalValue !== undefined;
   const separator = rawSeparator.substring(0, 1); // Ensure max length is 1
 
   const maxRawLength = groups.reduce(_groupedCharacter.toSum);
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `GroupedCharacter` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const formatValue = val => (0, _groupedCharacter.generateGroups)(groups, val).join(separator);
 
   const sanitizeValue = val => val.split(separator).join("").substring(0, maxRawLength);
@@ -131,9 +142,11 @@ const GroupedCharacter = ({
     formattedValue: formatValue(value),
     onChange: handleChange,
     onBlur: handleBlur,
-    onKeyPress: handleKeyPress
+    onKeyPress: handleKeyPress,
+    inputRef: inputRef,
+    ref: ref
   }));
-};
+});
 
 exports.GroupedCharacter = GroupedCharacter;
 GroupedCharacter.propTypes = {
@@ -671,5 +684,6 @@ GroupedCharacter.propTypes = {
   "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+GroupedCharacter.displayName = "GroupedCharacter";
 var _default = GroupedCharacter;
 exports.default = _default;

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

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

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { TextboxProps } from "../textbox";
 export interface NumberProps extends Omit<TextboxProps, "value"> {
     /** Value passed to the input */
     value?: string;
 }
-export declare const Number: ({ onChange, onKeyDown, value, ...rest }: NumberProps) => JSX.Element;
+export declare const Number: React.ForwardRefExoticComponent<NumberProps & React.RefAttributes<HTMLInputElement>>;
 export default Number;

package/lib/components/number/number.component.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _textbox = _interopRequireDefault(require("../textbox"));
 
+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; }
@@ -19,21 +21,30 @@ 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;
+
 function isValidNumber(value) {
   const regex = new RegExp("^[-]?[0-9]*$");
   const result = regex.test(value);
   return result;
 }
 
-const Number = ({
+const Number = /*#__PURE__*/_react.default.forwardRef(({
   onChange,
   onKeyDown,
   value,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const selectionStart = (0, _react.useRef)(null);
   const selectionEnd = (0, _react.useRef)(null);
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Number` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const handleOnChange = event => {
     if (isValidNumber(event.target.value) && onChange) {
       onChange(event);
@@ -55,9 +66,11 @@ const Number = ({
   return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, rest, {
     value: value,
     onChange: handleOnChange,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    inputRef: inputRef
   }));
-};
+});
 
 exports.Number = Number;
 Number.propTypes = {
@@ -593,5 +606,6 @@ Number.propTypes = {
   "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+Number.displayName = "Number";
 var _default = Number;
 exports.default = _default;

package/lib/components/numeral-date/numeral-date.component.d.ts

@@ -75,7 +75,19 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
+    /**
+     * A React ref to pass to the input corresponding to the day
+     */
+    dayRef?: React.ForwardedRef<HTMLInputElement>;
+    /**
+     * A React ref to pass to the input corresponding to the month
+     */
+    monthRef?: React.ForwardedRef<HTMLInputElement>;
+    /**
+     * A React ref to pass to the input corresponding to the year
+     */
+    yearRef?: React.ForwardedRef<HTMLInputElement>;
 }
 export declare type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, ...rest }: NumeralDateProps<DateType>) => JSX.Element;
+export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => JSX.Element;
 export default NumeralDate;

package/lib/components/numeral-date/numeral-date.component.js

@@ -92,6 +92,9 @@ const NumeralDate = ({
   enableInternalWarning,
   tooltipPosition,
   helpAriaLabel,
+  dayRef,
+  monthRef,
+  yearRef,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -103,7 +106,7 @@ const NumeralDate = ({
   } = (0, _react.useRef)(id || (0, _guid.default)());
   const isControlled = (0, _react.useRef)(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
-  const refs = (0, _react.useRef)(dateFormat.map(() => /*#__PURE__*/_react.default.createRef()));
+  const refs = (0, _react.useRef)(dateFormat.map(() => null));
   const [internalMessages, setInternalMessages] = (0, _react.useState)({ ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
   const hasCorrectDateFormat = (0, _react.useMemo)(() => {
@@ -170,7 +173,7 @@ const NumeralDate = ({
     }
 
     setTimeout(() => {
-      const hasBlurred = !refs.current.find(ref => ref.current === document.activeElement);
+      const hasBlurred = !refs.current.find(ref => ref === document.activeElement);
       /* istanbul ignore else */
 
       if (onBlur && hasBlurred) {
@@ -217,6 +220,27 @@ const NumeralDate = ({
     const validation = error || warning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && !!validation.length;
+    let inputRef;
+
+    switch (datePart.slice(0, 2)) {
+      case "dd":
+        inputRef = dayRef;
+        break;
+
+      case "mm":
+        inputRef = monthRef;
+        break;
+
+      case "yy":
+        inputRef = yearRef;
+        break;
+
+      /* istanbul ignore next */
+
+      default:
+        break;
+    }
+
     return /*#__PURE__*/_react.default.createElement(_numeralDateContext.default.Provider, {
       value: {
         disableErrorBorder: index !== 0
@@ -236,8 +260,18 @@ const NumeralDate = ({
       placeholder: datePart,
       value: dateValue[datePart],
       onChange: e => handleChange(e, datePart),
-      inputRef: ref => {
-        refs.current[index] = ref;
+      ref: element => {
+        refs.current[index] = element;
+
+        if (!inputRef) {
+          return;
+        }
+
+        if (typeof inputRef === "function") {
+          inputRef(element);
+        } else {
+          inputRef.current = element;
+        }
       },
       onBlur: () => handleBlur(datePart),
       error: !!internalError,
@@ -291,6 +325,9 @@ NumeralDate.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "values": _propTypes.default.func.isRequired
   }),
+  "dayRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.object]).isRequired
+  })]),
   "defaultValue": _propTypes.default.shape({
     "dd": _propTypes.default.string.isRequired,
     "mm": _propTypes.default.string.isRequired
@@ -419,6 +456,9 @@ NumeralDate.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "monthRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.object]).isRequired
+  })]),
   "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,
@@ -475,7 +515,10 @@ NumeralDate.propTypes = {
     "dd": _propTypes.default.string.isRequired,
     "mm": _propTypes.default.string.isRequired
   }),
-  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "yearRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.object]).isRequired
+  })])
 };
 var _default = NumeralDate;
 exports.default = _default;

package/lib/components/radio-button/radio-button.component.d.ts

@@ -22,6 +22,8 @@ export interface RadioButtonProps 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 RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>>;