carbon-react 114.7.1 → 114.8.0

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

@@ -3,6 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import Textbox from "../textbox";
+import Logger from "../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
 
 function isValidNumber(value) {
   const regex = new RegExp("^[-]?[0-9]*$");
@@ -10,15 +12,21 @@ function isValidNumber(value) {
   return result;
 }
 
-const Number = ({
+const Number = /*#__PURE__*/React.forwardRef(({
   onChange,
   onKeyDown,
   value,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const selectionStart = useRef(null);
   const selectionEnd = useRef(null);
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.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);
@@ -40,10 +48,11 @@ const Number = ({
   return /*#__PURE__*/React.createElement(Textbox, _extends({}, rest, {
     value: value,
     onChange: handleOnChange,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    inputRef: inputRef
   }));
-};
-
+});
 Number.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -578,4 +587,5 @@ Number.propTypes = {
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Number };
+Number.displayName = "Number";
 export default Number;

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

@@ -62,6 +62,9 @@ const NumeralDate = ({
   enableInternalWarning,
   tooltipPosition,
   helpAriaLabel,
+  dayRef,
+  monthRef,
+  yearRef,
   ...rest
 }) => {
   const l = useLocale();
@@ -73,7 +76,7 @@ const NumeralDate = ({
   } = useRef(id || guid());
   const isControlled = useRef(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
-  const refs = useRef(dateFormat.map(() => /*#__PURE__*/React.createRef()));
+  const refs = useRef(dateFormat.map(() => null));
   const [internalMessages, setInternalMessages] = useState({ ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
   const hasCorrectDateFormat = useMemo(() => {
@@ -140,7 +143,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) {
@@ -187,6 +190,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.createElement(NumeralDateContext.Provider, {
       value: {
         disableErrorBorder: index !== 0
@@ -206,8 +230,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,
@@ -260,6 +294,9 @@ NumeralDate.propTypes = {
     "toString": PropTypes.func.isRequired,
     "values": PropTypes.func.isRequired
   }),
+  "dayRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
+  })]),
   "defaultValue": PropTypes.shape({
     "dd": PropTypes.string.isRequired,
     "mm": PropTypes.string.isRequired
@@ -388,6 +425,9 @@ NumeralDate.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "monthRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
+  })]),
   "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,
@@ -444,7 +484,10 @@ NumeralDate.propTypes = {
     "dd": PropTypes.string.isRequired,
     "mm": PropTypes.string.isRequired
   }),
-  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "yearRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
+  })])
 };
 export { NumeralDate };
 export default NumeralDate;

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

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

@@ -8,6 +8,8 @@ import CheckableInput from "../../__internal__/checkable-input/checkable-input.c
 import RadioButtonSvg from "./radio-button-svg.component";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import Logger from "../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
 const RadioButton = /*#__PURE__*/React.forwardRef(({
   autoFocus,
   checked,
@@ -38,6 +40,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...props
 }, ref) => {
   const marginProps = filterStyledSystemMarginProps(props);
@@ -50,6 +53,12 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
 
     event.target.focus();
   }, [onChange]);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `RadioButton` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const commonProps = {
     disabled,
     fieldHelpInline,
@@ -83,7 +92,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
      */
     reverse: !reverse,
     required,
-    inputRef: ref,
+    ref: ref || inputRef,
     ...props
   };
   !!props.children ? process.env.NODE_ENV !== "production" ? invariant(false, "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.") : invariant(false) : void 0;

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

@@ -56,5 +56,5 @@ export interface SearchProps extends ValidationProps, MarginProps {
     /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
-export declare const Search: ({ defaultValue, onChange, onClick, onFocus, onBlur, onKeyDown, value, id, name, threshold, searchWidth, maxWidth, searchButton, placeholder, variant, "aria-label": ariaLabel, inputRef, tabIndex, error, warning, info, tooltipPosition, ...rest }: SearchProps) => JSX.Element;
+export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export default Search;

package/esm/components/search/search.component.js

@@ -10,8 +10,9 @@ import StyledSearchButton, { StyledButtonIcon } from "./search-button.style";
 import Icon from "../icon";
 import Textbox from "../textbox";
 import Button from "../button";
-
-const Search = ({
+import Logger from "../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
+const Search = /*#__PURE__*/React.forwardRef(({
   defaultValue,
   onChange,
   onClick,
@@ -35,9 +36,15 @@ const Search = ({
   info,
   tooltipPosition,
   ...rest
-}) => {
+}, ref) => {
   const isControlled = value !== undefined;
   const initialValue = isControlled ? value : defaultValue;
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `Search` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "This component has no initial value") : invariant(false) : void 0;
   !(threshold === undefined || typeof threshold === "number" && threshold > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "Threshold must be a positive number") : invariant(false) : void 0;
   const [searchValue, setSearchValue] = useState(initialValue);
@@ -133,12 +140,6 @@ const Search = ({
     }
   };
 
-  const assignInput = input => {
-    if (inputRef) {
-      inputRef.current = input === null || input === void 0 ? void 0 : input.current;
-    }
-  };
-
   const isSearchTyped = isFocused || (!isControlled ? !!searchValue.length : !!value.length);
   return /*#__PURE__*/React.createElement(StyledSearch, _extends({
     isFocused: isFocused,
@@ -164,7 +165,7 @@ const Search = ({
     onBlur: handleBlur,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
-    inputRef: assignInput,
+    ref: ref || inputRef,
     tabIndex: tabIndex,
     error: error,
     warning: warning,
@@ -176,8 +177,7 @@ const Search = ({
   }, buttonProps), /*#__PURE__*/React.createElement(StyledButtonIcon, null, /*#__PURE__*/React.createElement(Icon, {
     type: "search"
   })))));
-};
-
+});
 Search.propTypes = {
   "aria-label": PropTypes.string,
   "defaultValue": PropTypes.string,
@@ -359,4 +359,5 @@ Search.propTypes = {
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export { Search };
+Search.displayName = "Search";
 export default Search;

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

@@ -11,6 +11,8 @@ import StyledSelect from "../select.style";
 import SelectList from "../select-list/select-list.component";
 import isExpectedOption from "../utils/is-expected-option";
 import isNavigationKey from "../utils/is-navigation-key";
+import Logger from "../../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   value,
@@ -44,8 +46,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   tooltipPosition,
   listPlacement = "bottom",
   flipEnabled = true,
+  inputRef,
   ...textboxProps
-}, inputRef) => {
+}, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
   const labelId = useRef(label ? guid() : undefined);
@@ -61,6 +64,12 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `FilterableSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const createCustomEvent = useCallback(newValue => {
     const customEvent = {
       target: { ...(name && {
@@ -358,13 +367,19 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     onListAction();
   }
 
-  function assignInput(input) {
-    setTextboxRef(input.current);
+  const assignInput = useCallback(element => {
+    setTextboxRef(element);
+
+    if (inputRef || !ref) {
+      return;
+    }
 
-    if (inputRef) {
-      inputRef.current = input.current;
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      ref.current = element;
     }
-  }
+  }, [ref, inputRef]);
 
   function getTextboxProps() {
     return {
@@ -373,7 +388,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       label,
       disabled,
       readOnly,
-      inputRef: assignInput,
+      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -385,6 +400,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       onChange: handleTextboxChange,
       onMouseDown: handleTextboxMouseDown,
       tooltipPosition,
+      inputRef,
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }

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

@@ -13,6 +13,8 @@ import Pill from "../../pill";
 import isExpectedOption from "../utils/is-expected-option";
 import isExpectedValue from "../utils/is-expected-value";
 import isNavigationKey from "../utils/is-navigation-key";
+import Logger from "../../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const MultiSelect = /*#__PURE__*/React.forwardRef(({
   value,
@@ -45,8 +47,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   listMaxHeight,
   flipEnabled = true,
   wrapPillText = true,
+  inputRef,
   ...textboxProps
-}, inputRef) => {
+}, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
   const accessibilityLabelId = useRef(guid());
@@ -66,6 +69,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const [filterText, setFilterText] = useState("");
   const [placeholderOverride, setPlaceholderOverride] = useState();
   const actualValue = isControlled.current ? value : selectedValue;
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `MultiSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const setOpen = useCallback(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
@@ -374,13 +383,19 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     });
   }
 
-  function assignInput(input) {
-    setTextboxRef(input.current);
+  const assignInput = useCallback(element => {
+    setTextboxRef(element);
+
+    if (inputRef || !ref) {
+      return;
+    }
 
-    if (inputRef) {
-      inputRef.current = input.current;
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      ref.current = element;
     }
-  }
+  }, [ref, inputRef]);
 
   function getTextboxProps() {
     return {
@@ -390,7 +405,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       readOnly,
       placeholder: placeholderOverride,
       leftChildren: mapValuesToPills,
-      inputRef: assignInput,
+      ref: assignInput,
       formattedValue: textValue,
       selectedValue: actualValue,
       onClick: handleTextboxClick,
@@ -403,6 +418,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onChange: handleTextboxChange,
       tooltipPosition,
       size,
+      inputRef,
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }

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

@@ -22,8 +22,7 @@ const floatingMiddleware = [offset(({
   }
 
 })];
-
-const SelectTextbox = ({
+const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   accessibilityLabelId,
   labelId,
   "aria-controls": ariaControls,
@@ -44,7 +43,7 @@ const SelectTextbox = ({
   transparent,
   activeDescendantId,
   ...restProps
-}) => {
+}, ref) => {
   const reference = useMemo(() => ({
     current: textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.parentElement.parentElement
   }), [textboxRef]);
@@ -96,6 +95,7 @@ const SelectTextbox = ({
       onBlur: handleTextboxBlur,
       labelId,
       type: "text",
+      ref,
       ...restProps
     };
   }
@@ -146,8 +146,7 @@ const SelectTextbox = ({
     value: selectedValue,
     placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
   }, getInputAriaAttributes(), getTextboxProps()), !hasTextCursor && renderSelectText());
-};
-
+});
 const formInputPropTypes = {
   /**
    * Id of the element containing the currently displayed value
@@ -262,5 +261,6 @@ SelectTextbox.propTypes = { ...formInputPropTypes,
    * Value of the Select Input */
   selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)])
 };
+SelectTextbox.displayName = "SelectTextbox";
 export default SelectTextbox;
 export { formInputPropTypes };

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

@@ -12,6 +12,8 @@ import guid from "../../../__internal__/utils/helpers/guid";
 import getNextChildByText from "../utils/get-next-child-by-text";
 import isExpectedOption from "../utils/is-expected-option";
 import isNavigationKey from "../utils/is-navigation-key";
+import Logger from "../../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
 const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   value,
   defaultValue,
@@ -40,8 +42,9 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   "data-role": dataRole,
   listPlacement = "bottom",
   flipEnabled = true,
+  inputRef,
   ...props
-}, inputRef) => {
+}, ref) => {
   const selectListId = useRef(guid());
   const labelId = useRef(guid());
   const containerRef = useRef();
@@ -57,6 +60,12 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   const [activeDescendantId, setActiveDescendantId] = useState();
   const [textValue, setTextValue] = useState("");
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `Select` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const childOptions = useMemo(() => React.Children.toArray(children), [children]);
   const createCustomEvent = useCallback(newValue => {
     const customEvent = {
@@ -287,13 +296,19 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     setOpenState(false);
   }
 
-  function assignInput(input) {
-    setTextboxRef(input.current);
+  const assignInput = useCallback(element => {
+    setTextboxRef(element);
+
+    if (inputRef || !ref) {
+      return;
+    }
 
-    if (inputRef) {
-      inputRef.current = input.current;
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      ref.current = element;
     }
-  }
+  }, [ref, inputRef]);
 
   function getTextboxProps() {
     return {
@@ -301,7 +316,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       name,
       disabled,
       readOnly,
-      inputRef: assignInput,
+      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -312,6 +327,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       onBlur: handleTextboxBlur,
       tooltipPosition,
       transparent,
+      inputRef,
       ...filterOutStyledSystemSpacingProps(props)
     };
   }

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

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

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

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

package/esm/components/switch/switch.component.js

@@ -6,8 +6,9 @@ import SwitchSlider from "./__internal__/switch-slider.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-
-const Switch = ({
+import Logger from "../../__internal__/utils/logger";
+let deprecateInputRefWarnTriggered = false;
+const Switch = /*#__PURE__*/React.forwardRef(({
   autoFocus,
   id,
   label,
@@ -36,10 +37,17 @@ const Switch = ({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const isControlled = checked !== undefined;
   const [checkedInternal, setCheckedInternal] = useState(defaultChecked || false);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+    Logger.deprecate("The `inputRef` prop in `Switch` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const onChangeInternal = useCallback(e => {
     setCheckedInternal(e.target.checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -98,14 +106,14 @@ const Switch = ({
     reverse: !reverse,
     // switched to preserve backward compatibility
     validationOnLabel: shouldValidationBeOnLabel && !disabled,
+    ref: ref || inputRef,
     ...rest
   };
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
-};
-
+});
 Switch.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -628,4 +636,5 @@ Switch.propTypes = {
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { Switch };
+Switch.displayName = "Switch";
 export default Switch;