Add autoGrow to TextArea so the size fits the content

Author: ChengYanJin

src/lib/components/textarea/TextArea.component.tsx

@@ -3,6 +3,10 @@ import {
   forwardRef,
   TextareaHTMLAttributes,
   ForwardedRef,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  useCallback,
 } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
@@ -12,13 +16,19 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   variant?: TextAreaVariant;
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
+  /**
+   * Automatically adjust height to fit content
+   * When enabled, the textarea will grow/shrink to show all content
+   */
+  autoGrow?: boolean;
 };
 type RefType = HTMLTextAreaElement | null;
 
 const TextAreaContainer = styled.textarea<{
   variant: TextAreaVariant;
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
+  autoGrow?: boolean;
 }>`
   padding: ${spacing.r12} ${spacing.r8};
   border-radius: 4px;
@@ -46,6 +56,13 @@ const TextAreaContainer = styled.textarea<{
       height: ${props.height};
     `}
 
+  ${(props) =>
+    props.autoGrow &&
+    css`
+      resize: none;
+      overflow: hidden;
+    `}
+
   &:placeholder-shown {
     font-style: italic;
   }
@@ -77,18 +94,67 @@ const TextAreaContainer = styled.textarea<{
 `;
 
 function TextAreaElement(
-  { rows = 3, cols = 20, width, height, variant = 'code', ...rest }: Props,
+  {
+    rows = 3,
+    cols = 20,
+    width,
+    height,
+    variant = 'code',
+    autoGrow = false,
+    value,
+    defaultValue,
+    onChange,
+    ...rest
+  }: Props,
   ref: ForwardedRef<RefType>,
 ) {
+  const internalRef = useRef<HTMLTextAreaElement>(null);
+
+  // Expose the textarea element to parent components via forwarded ref
+  useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
+
+  const adjustHeight = useCallback(() => {
+    const textarea = internalRef.current;
+    if (!textarea || !autoGrow) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    textarea.style.height = 'auto';
+
+    // Set the height to match the content
+    const newHeight = textarea.scrollHeight;
+    textarea.style.height = `${newHeight}px`;
+  }, [autoGrow]);
+
+  // Adjust height when content changes
+  useEffect(() => {
+    adjustHeight();
+  }, [value, defaultValue, autoGrow, adjustHeight]);
+
+  // Adjust height on mount
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (autoGrow) {
+      adjustHeight();
+    }
+    onChange?.(e);
+  };
+
   if (width || height) {
     return (
       <TextAreaContainer
         className="sc-textarea"
         width={width}
         height={height}
         variant={variant}
+        autoGrow={autoGrow}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleChange}
         {...rest}
-        ref={ref}
+        ref={internalRef}
       />
     );
   }
@@ -99,8 +165,12 @@ function TextAreaElement(
       rows={rows}
       cols={cols}
       variant={variant}
+      autoGrow={autoGrow}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={handleChange}
       {...rest}
-      ref={ref}
+      ref={internalRef}
     />
   );
 }

stories/textarea.stories.tsx

@@ -67,3 +67,57 @@ export const RowsAndColsSet = {
     placeholder: 'With rows = 20 and cols = 40',
   },
 };
+
+/**
+ * Auto-growing textarea adjusts its height based on content
+ * Perfect for displaying commands or long text where you want the entire content visible
+ * Simply set autoGrow={true} and the textarea will grow to show all content
+ */
+export const AutoGrowTextArea = {
+  args: {
+    autoGrow: true,
+    placeholder:
+      'Type or paste content here...\nThe textarea will automatically grow to fit all the content.',
+    value: `docker run -d \\
+  --name my-container \\
+  -p 8080:80 \\
+  -v /host/path:/container/path \\
+  -e ENV_VAR=value \\
+  my-image:latest`,
+    width: '500px',
+  },
+};
+
+/**
+ * Auto-growing textarea with long command example
+ * The entire command is visible without scrolling
+ */
+export const AutoGrowWithLongCommand = {
+  args: {
+    autoGrow: true,
+    variant: 'code',
+    value: `kubectl apply -f - <<EOF
+apiVersion: v1
+kind: Pod
+metadata:
+  name: my-pod
+  labels:
+    app: myapp
+spec:
+  containers:
+  - name: nginx
+    image: nginx:1.14.2
+    ports:
+    - containerPort: 80
+    env:
+    - name: DATABASE_URL
+      value: "postgresql://user:password@localhost:5432/db"
+    - name: API_KEY
+      valueFrom:
+        secretKeyRef:
+          name: api-secret
+          key: api-key
+EOF`,
+    width: '600px',
+  },
+};