carbon-react 114.7.1 → 114.9.0

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

@@ -94,6 +94,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     Pass true boolean to only display orange border */
     warning?: boolean | string;
 }
-export declare const Textarea: ({ autoFocus, fieldHelp, label, size, children, characterLimit, enforceCharacterLimit, warnOverLimit, onChange, disabled, labelInline, labelAlign, labelHelp, labelSpacing, inputIcon, id: idProp, error, warning, info, name, readOnly, placeholder, expandable, rows, cols, validationOnLabel, adaptiveLabelBreakpoint, inputWidth, maxWidth, labelWidth, tooltipPosition, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea as OriginalTextarea };
 export default Textarea;

package/lib/components/textarea/textarea.component.js

@@ -39,6 +39,8 @@ var _validationMessage = _interopRequireDefault(require("../../__internal__/vali
 
 var _box = _interopRequireDefault(require("../box"));
 
+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; }
@@ -47,7 +49,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 Textarea = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   autoFocus,
   fieldHelp,
   label,
@@ -84,8 +88,9 @@ const Textarea = ({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  inputRef,
   ...props
-}) => {
+}, ref) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -95,11 +100,31 @@ const Textarea = ({
   const {
     current: id
   } = (0, _react.useRef)(idProp || (0, _guid.default)());
-  const inputRef = (0, _react.useRef)(null);
+  const internalRef = (0, _react.useRef)(null);
+  const callbackRef = (0, _react.useCallback)(inputElement => {
+    internalRef.current = inputElement;
+
+    if (!ref) {
+      return;
+    }
+
+    if ("current" in ref) {
+      ref.current = inputElement;
+    } else {
+      ref(inputElement);
+    }
+  }, [ref]);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Textarea` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const minHeight = (0, _react.useRef)(_textarea.MIN_HEIGHT);
 
   const expandTextarea = () => {
-    const textarea = inputRef.current;
+    const textarea = internalRef.current;
 
     if (textarea !== null && textarea !== void 0 && textarea.scrollHeight && (textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight) > minHeight.current) {
       textarea.style.height = "0px"; // Set the height so all content is shown
@@ -126,9 +151,9 @@ const Textarea = ({
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   (0, _react.useEffect)(() => {
     if (rows) {
-      var _inputRef$current;
+      var _internalRef$current;
 
-      minHeight.current = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.scrollHeight) || 0;
+      minHeight.current = (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.scrollHeight) || 0;
     }
   }, [rows]);
   (0, _react.useEffect)(() => {
@@ -138,10 +163,10 @@ const Textarea = ({
   });
   (0, _react.useEffect)(() => {
     if (expandable) {
-      var _inputRef$current2;
+      var _internalRef$current2;
 
       window.addEventListener("resize", expandTextarea);
-      minHeight.current = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.clientHeight) || 0;
+      minHeight.current = (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.clientHeight) || 0;
     }
 
     return () => {
@@ -168,7 +193,7 @@ const Textarea = ({
     autoFocus: autoFocus,
     name: name,
     value: value,
-    ref: inputRef,
+    ref: callbackRef,
     maxLength: maxLength,
     onChange: onChange,
     disabled: disabled,
@@ -177,7 +202,8 @@ const Textarea = ({
     rows: rows,
     cols: cols,
     id: id,
-    as: "textarea"
+    as: "textarea",
+    inputRef: inputRef
   }, props)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
     disabled: disabled,
     readOnly: readOnly,
@@ -226,7 +252,7 @@ const Textarea = ({
   }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     warning: !!(!error && warning)
   }), input) : input), characterCount)));
-};
+});
 
 exports.OriginalTextarea = exports.Textarea = Textarea;
 Textarea.propTypes = {
@@ -755,5 +781,6 @@ Textarea.propTypes = {
   "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+Textarea.displayName = "Textarea";
 var _default = Textarea;
 exports.default = _default;

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

@@ -93,5 +93,5 @@ export interface TextboxProps extends CommonTextboxProps {
     /** Whether to display the character count message in red */
     warnOverLimit?: boolean;
 }
-export declare const Textbox: ({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, maxWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: TextboxProps) => JSX.Element;
+export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Textbox;

package/lib/components/textbox/textbox.component.js

@@ -39,6 +39,8 @@ var _numeralDateContext = _interopRequireDefault(require("../numeral-date/numera
 
 var _box = _interopRequireDefault(require("../box"));
 
+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; }
@@ -47,7 +49,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 Textbox = ({
+let deprecateInputRefWarnTriggered = false;
+
+const Textbox = /*#__PURE__*/_react.default.forwardRef(({
   align = "left",
   autoFocus,
   children,
@@ -101,7 +105,7 @@ const Textbox = ({
   warnOverLimit = false,
   helpAriaLabel,
   ...props
-}) => {
+}, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [maxLength, characterCount] = (0, _useCharacterCount.default)(characterCountValue, // TODO: Can be removed after the characterLimit type is changed to number
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
@@ -115,6 +119,13 @@ const Textbox = ({
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
 
   const [uniqueId, uniqueName] = (0, _useUniqueId.default)(id, name);
+
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const {
     labelId: internalLabelId,
     validationIconId,
@@ -158,6 +169,7 @@ const Textbox = ({
     disabled: disabled,
     id: uniqueId,
     inputRef: inputRef,
+    ref: ref,
     name: uniqueName,
     onBlur: onBlur,
     onChange: onChange,
@@ -221,7 +233,7 @@ const Textbox = ({
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     warning: !!(!error && warning)
   }), input) : input), characterCount));
-};
+});
 
 exports.Textbox = Textbox;
 Textbox.propTypes = {
@@ -757,5 +769,6 @@ Textbox.propTypes = {
   "warnOverLimit": _propTypes.default.bool,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
+Textbox.displayName = "Textbox";
 var _default = Textbox;
 exports.default = _default;

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

@@ -23,6 +23,8 @@ var _box = _interopRequireDefault(require("../box"));
 
 var _accordion = _interopRequireDefault(require("./__internal__/accordion"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 var _tileSelect = require("./tile-select.style");
 
 var _utils = require("../../style/utils");
@@ -41,7 +43,9 @@ const checkPropTypeIsNode = prop => typeof prop !== "string" && {
   as: "div"
 };
 
-const TileSelect = ({
+let deprecateInputRefWarnTriggered = false;
+
+const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
   onChange,
   onBlur,
   onFocus,
@@ -64,8 +68,9 @@ const TileSelect = ({
   accordionContent,
   accordionControl,
   accordionExpanded,
+  inputRef,
   ...rest
-}) => {
+}, ref) => {
   const l = (0, _useLocale.default)();
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
 
@@ -81,6 +86,12 @@ const TileSelect = ({
     }
   });
 
+  if (!deprecateInputRefWarnTriggered && inputRef) {
+    deprecateInputRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `inputRef` prop in `TileSelect` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const renderActionButton = () => /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDeselectWrapper, {
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/_react.default.createElement(_button.default, {
@@ -125,7 +136,9 @@ const TileSelect = ({
     value: value,
     disabled: disabled,
     "aria-checked": checked,
-    id: id
+    id: id,
+    inputRef: inputRef,
+    ref: ref
   }, rest)), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTileSelect, {
     disabled: disabled,
     checked: checked
@@ -148,7 +161,7 @@ const TileSelect = ({
     controlId: controlId,
     expanded: accordionExpanded
   }, accordionContent)));
-};
+});
 
 TileSelect.defaultProps = {
   checked: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.7.1",
+  "version": "114.9.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",