carbon-react 104.58.5 → 104.58.6

package/esm/components/textarea/textarea.component.js

@@ -11,7 +11,7 @@ import { InputBehaviour } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import guid from "../../__internal__/utils/helpers/guid";
-import StyledTextarea from "./textarea.style";
+import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
 import LocaleContext from "../../__internal__/i18n-context";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
@@ -72,13 +72,12 @@ const Textarea = ({
     current: id
   } = useRef(idProp || guid());
   const inputRef = useRef();
-  const minHeight = useRef(0);
+  const minHeight = useRef(MIN_HEIGHT);
 
   const expandTextarea = () => {
     const textarea = inputRef.current;
 
     if (textarea.scrollHeight > minHeight.current) {
-      // Reset height to zero - IE specific
       textarea.style.height = "0px"; // Set the height so all content is shown
 
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
@@ -99,6 +98,11 @@ const Textarea = ({
     label,
     fieldHelp
   });
+  useEffect(() => {
+    if (rows) {
+      minHeight.current = inputRef.current.scrollHeight;
+    }
+  }, [rows]);
   useEffect(() => {
     if (expandable) {
       expandTextarea();

package/esm/components/textarea/textarea.style.d.ts

@@ -1,2 +1,3 @@
+export const MIN_HEIGHT: 40;
 export default StyledTextarea;
 declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textarea/textarea.style.js

@@ -4,12 +4,13 @@ import StyledInput from "../../__internal__/input/input.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import BaseTheme from "../../style/themes/base";
+export const MIN_HEIGHT = 40;
 const StyledTextarea = styled.div`
   ${margin};
 
   ${StyledInput} {
     resize: none;
-    min-height: 40px;
+    min-height: ${MIN_HEIGHT}px;
     margin-top: 5px;
     margin-bottom: 5px;
   }

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

@@ -27,7 +27,7 @@ var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
-var _textarea = _interopRequireDefault(require("./textarea.style"));
+var _textarea = _interopRequireWildcard(require("./textarea.style"));
 
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 
@@ -102,13 +102,12 @@ const Textarea = ({
     current: id
   } = (0, _react.useRef)(idProp || (0, _guid.default)());
   const inputRef = (0, _react.useRef)();
-  const minHeight = (0, _react.useRef)(0);
+  const minHeight = (0, _react.useRef)(_textarea.MIN_HEIGHT);
 
   const expandTextarea = () => {
     const textarea = inputRef.current;
 
     if (textarea.scrollHeight > minHeight.current) {
-      // Reset height to zero - IE specific
       textarea.style.height = "0px"; // Set the height so all content is shown
 
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
@@ -129,6 +128,11 @@ const Textarea = ({
     label,
     fieldHelp
   });
+  (0, _react.useEffect)(() => {
+    if (rows) {
+      minHeight.current = inputRef.current.scrollHeight;
+    }
+  }, [rows]);
   (0, _react.useEffect)(() => {
     if (expandable) {
       expandTextarea();

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

@@ -1,2 +1,3 @@
+export const MIN_HEIGHT: 40;
 export default StyledTextarea;
 declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/textarea/textarea.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MIN_HEIGHT = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -23,12 +23,14 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const MIN_HEIGHT = 40;
+exports.MIN_HEIGHT = MIN_HEIGHT;
 const StyledTextarea = _styledComponents.default.div`
   ${_styledSystem.margin};
 
   ${_input.default} {
     resize: none;
-    min-height: 40px;
+    min-height: ${MIN_HEIGHT}px;
     margin-top: 5px;
     margin-bottom: 5px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.58.5",
+  "version": "104.58.6",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {