@idealyst/components 1.2.66 → 1.2.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.66",
+  "version": "1.2.68",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.66",
+    "@idealyst/theme": "^1.2.68",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.66",
+    "@idealyst/theme": "^1.2.68",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/TextArea/TextArea.native.tsx

@@ -1,4 +1,4 @@
-import { useState, forwardRef, useMemo } from 'react';
+import { useState, forwardRef, useMemo, useEffect } from 'react';
 import { View, TextInput, NativeSyntheticEvent, TextInputContentSizeChangeEventData } from 'react-native';
 import { textAreaStyles } from './TextArea.styles';
 import Text from '../Text';
@@ -141,6 +141,14 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     setContentHeight(newHeight);
   };
 
+  // Reset contentHeight when value is cleared externally (controlled component)
+  // This forces the TextInput to recalculate its size
+  useEffect(() => {
+    if (autoGrow && value === '') {
+      setContentHeight(undefined);
+    }
+  }, [value, autoGrow]);
+
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
   // Get dynamic styles - call as functions for theme reactivity
@@ -172,10 +180,15 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
               textAlignVertical: autoGrow ? 'center' : 'top',
               backgroundColor: 'transparent',
             },
-            // For autoGrow: don't set height, let it grow naturally with minHeight constraint
+            // For autoGrow: use contentHeight if available, otherwise minHeight constraint
             // For fixed height: use rows-based height
             autoGrow
-              ? { minHeight: minHeight ?? 44, maxHeight: maxHeight }
+              ? {
+                  minHeight: minHeight ?? 44,
+                  maxHeight: maxHeight,
+                  // Set explicit height when we have a calculated contentHeight
+                  ...(contentHeight !== undefined && { height: contentHeight }),
+                }
               : { height: rows * 24 },
             textareaStyle,
           ]}

package/src/TextArea/TextArea.web.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useMemo } from 'react';
+import React, { useState, useRef, useEffect, forwardRef, useMemo, useCallback } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { textAreaStyles } from './TextArea.styles';
 import type { TextAreaProps } from './types';
@@ -156,7 +156,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   const helperTextProps = getWebProps([helperTextStyleComputed]);
   const characterCountProps = getWebProps([characterCountStyleComputed]);
 
-  const adjustHeight = () => {
+  const adjustHeight = useCallback(() => {
     if (!autoGrow || !textareaRef.current) return;
 
     const textarea = textareaRef.current;
@@ -175,11 +175,11 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     }
 
     textarea.style.height = `${newHeight}px`;
-  };
+  }, [autoGrow, minHeight, maxHeight]);
 
   useEffect(() => {
     adjustHeight();
-  }, [value, autoGrow, minHeight, maxHeight]);
+  }, [value, adjustHeight]);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     e.stopPropagation();