@idealyst/components 1.2.45 → 1.2.47

package/package.json

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

package/src/Dialog/Dialog.native.tsx

@@ -1,5 +1,5 @@
 import { useEffect, forwardRef, useMemo } from 'react';
-import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent } from 'react-native';
+import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent, KeyboardAvoidingView, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
@@ -15,6 +15,7 @@ const Dialog = forwardRef<View, DialogProps>(({
   showCloseButton = true,
   closeOnBackdropClick = true,
   animationType: _animationType = 'fade',
+  avoidKeyboard = false,
   style,
   testID,
   id,
@@ -175,6 +176,23 @@ const Dialog = forwardRef<View, DialogProps>(({
     </TouchableWithoutFeedback>
   );
 
+  const modalContent = (
+    <TouchableWithoutFeedback onPress={handleBackdropPress}>
+      {BackdropComponent ? (
+        <View style={customBackdropWrapperStyle}>
+          <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]}>
+            <BackdropComponent isVisible={open} />
+          </Animated.View>
+          {dialogContainer}
+        </View>
+      ) : (
+        <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
+          {dialogContainer}
+        </Animated.View>
+      )}
+    </TouchableWithoutFeedback>
+  );
+
   return (
     <Modal
       visible={open}
@@ -184,20 +202,16 @@ const Dialog = forwardRef<View, DialogProps>(({
       statusBarTranslucent
       testID={testID}
     >
-      <TouchableWithoutFeedback onPress={handleBackdropPress}>
-        {BackdropComponent ? (
-          <View style={customBackdropWrapperStyle}>
-            <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]}>
-              <BackdropComponent isVisible={open} />
-            </Animated.View>
-            {dialogContainer}
-          </View>
-        ) : (
-          <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
-            {dialogContainer}
-          </Animated.View>
-        )}
-      </TouchableWithoutFeedback>
+      {avoidKeyboard ? (
+        <KeyboardAvoidingView
+          style={{ flex: 1 }}
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        >
+          {modalContent}
+        </KeyboardAvoidingView>
+      ) : (
+        modalContent
+      )}
     </Modal>
   );
 });

package/src/Dialog/Dialog.styles.tsx

@@ -127,7 +127,6 @@ export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
     }),
 
     content: (_props: DialogDynamicProps) => ({
-        padding: 24,
         _web: {
             overflow: 'visible',
             maxHeight: 'none',

package/src/Dialog/types.ts

@@ -89,4 +89,11 @@ export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
    * It receives isVisible for animation coordination.
    */
   BackdropComponent?: ComponentType<BackdropComponentProps>;
+
+  /**
+   * Whether the dialog should avoid the keyboard on mobile (native only).
+   * When true, the dialog content will shift up when the keyboard is shown.
+   * @default false
+   */
+  avoidKeyboard?: boolean;
 }

package/src/TextArea/TextArea.styles.tsx

@@ -68,6 +68,7 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
 
     textareaContainer: (_props: TextAreaVariants) => ({
         position: 'relative' as const,
+        width: '100%',
         borderWidth: 1,
         borderColor: theme.colors.border.primary,
         borderRadius: theme.radii.md,
@@ -80,6 +81,7 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
             },
         },
         _web: {
+            boxSizing: 'border-box',
             border: `1px solid ${theme.colors.border.primary}`,
         },
     }),
@@ -112,9 +114,13 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
             },
         },
         _web: {
+            display: 'block',
+            width: '100%',
             fontFamily: 'inherit',
             outline: 'none',
             border: 'none',
+            borderWidth: 0,
+            background: 'transparent',
             transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
             boxSizing: 'border-box',
             overflowY: 'hidden',