feat(TextArea): add maxRows prop

Author: tenphi

.changeset/brave-chefs-dance.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add maxRows prop to TextArea in control maximum visible rows in auto-size mode.

.changeset/silver-pans-shake.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Improved calculation of height in auto-sized TextArea.

src/components/fields/TextArea/TextArea.stories.tsx

@@ -40,4 +40,12 @@ export const Password = Template.bind({});
 Password.args = { icon: true, type: 'password', defaultValue: 'hidden value' };
 
 export const AutoSize = Template.bind({});
-AutoSize.args = { autoSize: true, defaultValue: '1\n2\n3\n4', rows: 1 };
+AutoSize.args = { autoSize: true, defaultValue: '1\n2\n3\n4', rows: 2 };
+
+export const AutoSizeMaxRows = Template.bind({});
+AutoSizeMaxRows.args = {
+  autoSize: true,
+  maxRows: 3,
+  defaultValue: '1\n2\n3\n4',
+  rows: 2,
+};

src/components/fields/TextArea/TextArea.tsx

@@ -1,24 +1,24 @@
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useLayoutEffect, useRef } from 'react';
 import { useControlledState } from '@react-stately/utils';
 import { useTextField } from 'react-aria';
 
+import { useEvent } from '../../../_internal/index';
 import { CubeTextInputBaseProps, TextInputBase } from '../TextInput';
 import { useProviderProps } from '../../../provider';
 import {
   castNullableStringValue,
   WithNullableValue,
 } from '../../../utils/react/nullableValue';
-import { chain, useLayoutEffect } from '../../../utils/react';
+import { chain } from '../../../utils/react';
 import { useFieldProps } from '../../form';
-import { useEvent } from '../../../_internal';
 
 export interface CubeTextAreaProps extends CubeTextInputBaseProps {
-  /** Whether the textarea should change its size depends on content */
+  /** Whether the textarea should change its size depends on the content */
   autoSize?: boolean;
-  /** Max number of visible rows when autoSize is `true`  */
-  maxVisibleRows?: number;
-  /** The rows attribute in HTML is used to specify the number of visible text lines for the
-   * control i.e. the number of rows to display. */
+  /** Max number of visible rows when autoSize is `true`. Defaults to 10  */
+  maxRows?: number;
+  /** The `rows` attribute in HTML is used to specify the number of visible text lines for the
+   * control i.e. the number of rows to display. Defaults to 3 */
   rows?: number;
 }
 
@@ -38,62 +38,85 @@ function TextArea(props: WithNullableValue<CubeTextAreaProps>, ref) {
     isReadOnly = false,
     isRequired = false,
     onChange,
-    maxVisibleRows,
+    maxRows = 10,
     rows = 3,
     ...otherProps
   } = props;
 
-  let [inputValue, setInputValue] = useControlledState(
+  rows = Math.max(rows, 1);
+  maxRows = Math.max(maxRows, rows);
+
+  let [inputValue, setInputValue] = useControlledState<string>(
     props.value,
     props.defaultValue,
     () => {},
   );
   let inputRef = useRef<HTMLTextAreaElement>(null);
 
-  let onHeightChange = useEvent(() => {
-    if (autoSize && inputRef.current) {
-      let input = inputRef.current;
-      const prevAlignment = input.style.alignSelf;
-      const computedStyle = getComputedStyle(input);
+  let { labelProps, inputProps } = useTextField(
+    {
+      ...props,
+      onChange: chain(onChange, setInputValue),
+      inputElementType: 'textarea',
+    },
+    inputRef,
+  );
+
+  const adjustHeight = useEvent(() => {
+    const textarea = inputRef.current;
+
+    if (!textarea || !autoSize) return;
+
+    // Reset height to get the correct scrollHeight
+    textarea.style.height = 'auto';
+
+    // Get computed styles to account for padding
+    const computedStyle = getComputedStyle(textarea);
+    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+    const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
+    const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
 
-      const lineHeight = parseFloat(computedStyle.lineHeight);
-      const paddingTop = parseFloat(computedStyle.paddingTop);
-      const paddingBottom = parseFloat(computedStyle.paddingBottom);
-      const borderTop = parseFloat(computedStyle.borderTopWidth);
-      const borderBottom = parseFloat(computedStyle.borderBottomWidth);
+    // Calculate line height (approximately)
+    const lineHeight = parseInt(computedStyle.lineHeight) || 20;
 
-      input.style.alignSelf = 'start';
-      input.style.height = 'auto';
+    // Calculate content height (excluding padding and border)
+    const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
 
-      const scrollHeight = input.scrollHeight;
-      input.style.height = `calc(${scrollHeight}px + (2 * var(--border-width)))`;
+    // Calculate rows based on content height
+    const computedRows = Math.ceil(contentHeight / lineHeight);
 
-      input.style.alignSelf = prevAlignment;
+    // Apply min/max constraints
+    const targetRows = Math.max(Math.min(computedRows, maxRows), rows);
 
-      const contentHeight =
-        scrollHeight - paddingTop - paddingBottom - borderTop - borderBottom;
-      const rowCount = Math.round(contentHeight / lineHeight);
+    // Set the height including padding and border
+    const totalHeight =
+      targetRows * lineHeight +
+      paddingTop +
+      paddingBottom +
+      borderTop +
+      borderBottom;
 
-      if (autoSize && maxVisibleRows != null && rowCount > maxVisibleRows) {
-        input.style.height = `${maxVisibleRows * lineHeight + paddingTop + paddingBottom}px`;
-      }
-    }
+    textarea.style.height = `${totalHeight}px`;
   });
 
+  // Call adjustHeight on content change
   useLayoutEffect(() => {
-    if (inputRef.current) {
-      onHeightChange();
-    }
-  }, [inputValue, inputRef.current]);
+    adjustHeight();
+  }, [inputValue]);
 
-  let { labelProps, inputProps } = useTextField(
-    {
-      ...props,
-      onChange: chain(onChange, setInputValue),
-      inputElementType: 'textarea',
-    },
-    inputRef,
-  );
+  // Also call it on window resize as that can affect wrapping
+  useLayoutEffect(() => {
+    if (!autoSize) return;
+
+    const handleResize = () => {
+      adjustHeight();
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, [adjustHeight, autoSize]);
 
   return (
     <TextInputBase