carbon-react 114.7.0 → 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/button/button.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, { useCallback, useState } from "react";
+import React, { useCallback, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Icon from "../icon";
@@ -8,6 +8,7 @@ import StyledButton, { StyledButtonSubtext } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
+import { ButtonBarContext } from "../button-bar/button-bar.component";
 
 function renderChildren({
   /* eslint-disable react/prop-types */
@@ -75,8 +76,9 @@ renderChildren.propTypes = {
   }
 };
 let deprecatedForwardRefWarnTriggered = false;
+let deprecatedDashedButtonWarnTriggered = false;
 const Button = /*#__PURE__*/React.forwardRef(({
-  size = "medium",
+  size: sizeProp = "medium",
   subtext = "",
   children,
   forwardRef,
@@ -85,7 +87,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   destructive = false,
   buttonType: buttonTypeProp = "secondary",
   iconType,
-  iconPosition = "before",
+  iconPosition: iconPositionProp = "before",
   href,
   m = 0,
   px,
@@ -94,9 +96,19 @@ const Button = /*#__PURE__*/React.forwardRef(({
   rel,
   iconTooltipMessage,
   iconTooltipPosition,
-  fullWidth = false,
+  fullWidth: fullWidthProp = false,
   ...rest
 }, ref) => {
+  const {
+    buttonType: buttonTypeContext,
+    size: sizeContext,
+    iconPosition: iconPositionContext,
+    fullWidth: fullWidthContext
+  } = useContext(ButtonBarContext);
+  const buttonType = buttonTypeContext || buttonTypeProp;
+  const size = sizeContext || sizeProp;
+  const iconPosition = iconPositionContext || iconPositionProp;
+  const fullWidth = fullWidthContext || fullWidthProp;
   !!!(children || iconType) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `iconType` must be defined or this node must have children.") : invariant(false) : void 0;
 
   if (subtext) {
@@ -108,8 +120,12 @@ const Button = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
+  if (!deprecatedDashedButtonWarnTriggered && buttonType === "dashed") {
+    deprecatedDashedButtonWarnTriggered = true;
+    Logger.deprecate("The `dashed` variant of the `buttonType` prop for `Button` component is deprecated and will soon be removed.");
+  }
+
   const [internalRef, setInternalRef] = useState();
-  const buttonType = buttonTypeProp;
   let paddingX;
 
   const handleLinkKeyDown = event => {

package/esm/components/button-bar/button-bar.component.d.ts

@@ -1,15 +1,20 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-export interface ButtonBarProps extends SpaceProps {
-    /** Button or IconButton Elements, to be rendered inside the component */
-    children: React.ReactNode;
+export interface ButtonBarContextProps {
     /** Apply fullWidth style to the button bar */
     fullWidth?: boolean;
     /** Defines an Icon position for buttons: "before" | "after" */
     iconPosition?: "before" | "after";
     /** Assigns a size to the buttons: "small" | "medium" | "large" */
     size?: "small" | "medium" | "large";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
+    buttonType?: "primary" | "secondary" | "primary";
+}
+export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps {
+    /** Button or IconButton Elements, to be rendered inside the component */
+    children: React.ReactNode;
 }
+export declare const ButtonBarContext: React.Context<ButtonBarContextProps>;
 export declare const ButtonBar: {
     ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps): JSX.Element;
     displayName: string;

package/esm/components/button-bar/button-bar.component.js

@@ -1,11 +1,9 @@
 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, { useMemo } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import invariant from "invariant";
 import StyledButtonBar from "./button-bar.style";
-import Button from "../button";
-import IconButton from "../icon-button";
+export const ButtonBarContext = /*#__PURE__*/React.createContext({});
 
 const ButtonBar = ({
   children,
@@ -13,39 +11,20 @@ const ButtonBar = ({
   iconPosition = "before",
   fullWidth = false,
   ...rest
-}) => {
-  const hasProperChildren = useMemo(() => {
-    const incorrectChild = React.Children.toArray(children).find(child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return true;
-      }
-
-      return child.type !== Button && child.type !== IconButton;
-    });
-    return !incorrectChild;
-  }, [children]);
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, "ButtonBar accepts only `Button` or `IconButton` elements.") : invariant(false) : void 0;
-
-  const getBtnProps = child => {
-    var _child$props, _child$props2, _child$props2$childre, _child$props2$childre2;
-
-    const btnProps = { ...child.props,
-      buttonType: "secondary",
-      size,
-      iconPosition,
-      fullWidth,
-      "aria-label": child.type === IconButton ? ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.ariaLabel) || ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : (_child$props2$childre = _child$props2.children) === null || _child$props2$childre === void 0 ? void 0 : (_child$props2$childre2 = _child$props2$childre.props) === null || _child$props2$childre2 === void 0 ? void 0 : _child$props2$childre2.type) : ""
-    };
-    return btnProps;
-  };
-
-  return /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
-    fullWidth: fullWidth,
-    size: size
-  }), React.Children.map(children, child => /*#__PURE__*/React.createElement(child.type, getBtnProps(child))));
-};
+}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
+  fullWidth: fullWidth,
+  size: size
+}), /*#__PURE__*/React.createElement(ButtonBarContext.Provider, {
+  value: {
+    buttonType: "secondary",
+    size,
+    iconPosition,
+    fullWidth
+  }
+}, children));
 
 ButtonBar.propTypes = {
+  "buttonType": PropTypes.oneOf(["primary", "secondary"]),
   "children": PropTypes.node,
   "fullWidth": PropTypes.bool,
   "iconPosition": PropTypes.oneOf(["after", "before"]),

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,