@idealyst/components 1.2.65 → 1.2.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.65",
+  "version": "1.2.67",
   "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.65",
+    "@idealyst/theme": "^1.2.67",
     "@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.65",
+    "@idealyst/theme": "^1.2.67",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/TextArea/TextArea.native.tsx

@@ -172,8 +172,11 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
               textAlignVertical: autoGrow ? 'center' : 'top',
               backgroundColor: 'transparent',
             },
-            maxHeight && { maxHeight },
-            { height: autoGrow ? contentHeight : rows * 24 },
+            // For autoGrow: don't set height, let it grow naturally with minHeight constraint
+            // For fixed height: use rows-based height
+            autoGrow
+              ? { minHeight: minHeight ?? 44, maxHeight: maxHeight }
+              : { height: rows * 24 },
             textareaStyle,
           ]}
           value={value}
@@ -184,7 +187,9 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
           placeholder={placeholder}
           editable={!disabled}
           multiline
-          numberOfLines={0}
+          // Disable internal scrolling when autoGrow - let the TextInput expand instead
+          scrollEnabled={!autoGrow || (maxHeight !== undefined && contentHeight !== undefined && contentHeight >= maxHeight)}
+          numberOfLines={autoGrow ? undefined : rows}
           maxLength={maxLength}
           placeholderTextColor="#999"
         />

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();