@idealyst/components 1.2.49 → 1.2.51

package/package.json

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

package/src/Dialog/Dialog.native.tsx

@@ -1,6 +1,7 @@
-import { useEffect, forwardRef, useMemo } from 'react';
-import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent, KeyboardAvoidingView, Platform } from 'react-native';
+import { useEffect, forwardRef, useMemo, useState } from 'react';
+import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, Platform, Keyboard, useWindowDimensions } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
@@ -16,6 +17,8 @@ const Dialog = forwardRef<View, DialogProps>(({
   closeOnBackdropClick = true,
   animationType: _animationType = 'fade',
   avoidKeyboard = false,
+  padding: paddingProp = 20,
+  maxContentHeight,
   style,
   testID,
   id,
@@ -42,6 +45,33 @@ const Dialog = forwardRef<View, DialogProps>(({
   const containerScale = useSharedValue(0.9);
   const containerOpacity = useSharedValue(0);
 
+  // Get safe area insets
+  const insets = useSafeAreaInsets();
+
+  // Track keyboard height for avoidKeyboard
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const { height: screenHeight } = useWindowDimensions();
+
+  useEffect(() => {
+    if (!avoidKeyboard || !open) return;
+
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showSub = Keyboard.addListener(showEvent, (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [avoidKeyboard, open]);
+
   // Animate in/out when open changes
   useEffect(() => {
     if (open) {
@@ -109,11 +139,12 @@ const Dialog = forwardRef<View, DialogProps>(({
   });
 
   const containerAnimatedStyle = useAnimatedStyle(() => {
+    'worklet';
     return {
       opacity: containerOpacity.value,
       transform: [
         { scale: containerScale.value },
-      ],
+      ] as { scale: number }[],
     };
   });
 
@@ -124,19 +155,6 @@ const Dialog = forwardRef<View, DialogProps>(({
   const titleStyle = (dialogStyles.title as any)({});
   const closeButtonStyle = (dialogStyles.closeButton as any)({});
   const closeButtonTextStyle = (dialogStyles.closeButtonText as any)({});
-  const contentStyle = (dialogStyles.content as any)({});
-
-  // Style for custom backdrop wrapper (no default backdrop styling)
-  const customBackdropWrapperStyle = {
-    position: 'absolute' as const,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: 'flex' as const,
-    alignItems: 'center' as const,
-    justifyContent: 'center' as const,
-  };
 
   // Style for custom backdrop component container (fills entire backdrop area)
   const customBackdropContainerStyle = {
@@ -147,8 +165,32 @@ const Dialog = forwardRef<View, DialogProps>(({
     bottom: 0,
   };
 
-  const dialogContent = (
-    <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
+  // Position offsets for the container view
+  // Top: always safe area + padding
+  // Bottom: safe area + padding (no keyboard) or keyboard + padding (with keyboard)
+  const topOffset = insets.top + paddingProp;
+  const bottomOffset = keyboardHeight > 0
+    ? keyboardHeight + paddingProp
+    : insets.bottom + paddingProp;
+
+  // Max height is the available space (used as a ceiling, children can be smaller)
+  const maxAvailableHeight = screenHeight - topOffset - bottomOffset;
+
+  // Use the smaller of user's preferred max height and available space
+  const effectiveMaxHeight = maxContentHeight
+    ? Math.min(maxContentHeight, maxAvailableHeight)
+    : maxAvailableHeight;
+
+  // Dialog uses the effective max height, with flex: 1 so children can fill it
+  const dialogContainerStyle = {
+    ...containerStyle,
+    maxHeight: effectiveMaxHeight,
+    height: maxContentHeight ? effectiveMaxHeight : undefined,
+    flex: undefined,
+  };
+
+  const dialogContainer = (
+    <Animated.View ref={ref as any} style={[dialogContainerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
       {(title || showCloseButton) && (
         <View style={headerStyle}>
           {title && (
@@ -168,26 +210,10 @@ const Dialog = forwardRef<View, DialogProps>(({
           )}
         </View>
       )}
-      <View style={contentStyle}>
-        {children}
-      </View>
+      {children}
     </Animated.View>
   );
 
-  const dialogContainer = (
-    <TouchableWithoutFeedback onPress={(e: GestureResponderEvent) => e.stopPropagation()}>
-      {avoidKeyboard ? (
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        >
-          {dialogContent}
-        </KeyboardAvoidingView>
-      ) : (
-        dialogContent
-      )}
-    </TouchableWithoutFeedback>
-  );
-
   return (
     <Modal
       visible={open}
@@ -197,20 +223,35 @@ const Dialog = forwardRef<View, DialogProps>(({
       statusBarTranslucent
       testID={testID}
     >
-      <TouchableWithoutFeedback onPress={handleBackdropPress}>
-        {BackdropComponent ? (
-          <View style={customBackdropWrapperStyle}>
-            <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]}>
+      {/* Backdrop layer - positioned absolute, full screen */}
+      {BackdropComponent ? (
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]} pointerEvents="auto">
+            <View style={{ flex: 1 }} pointerEvents="none">
               <BackdropComponent isVisible={open} />
-            </Animated.View>
-            {dialogContainer}
-          </View>
-        ) : (
-          <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
-            {dialogContainer}
+            </View>
           </Animated.View>
-        )}
-      </TouchableWithoutFeedback>
+        </TouchableWithoutFeedback>
+      ) : (
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <Animated.View style={[backdropStyle, backdropAnimatedStyle]} />
+        </TouchableWithoutFeedback>
+      )}
+      {/* Dialog content - positioned absolute, accounts for keyboard and safe areas */}
+      <View
+        style={{
+          position: 'absolute',
+          top: topOffset,
+          left: 0,
+          right: 0,
+          bottom: bottomOffset,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        pointerEvents="box-none"
+      >
+        {dialogContainer}
+      </View>
     </Modal>
   );
 });

package/src/Dialog/Dialog.styles.tsx

@@ -64,6 +64,7 @@ export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
             shadowRadius: 20,
             elevation: 10,
             maxHeight: '90%',
+            flexDirection: 'column' as const,
             ...sizeStyles,
             ...typeStyles,
             _web: {
@@ -127,6 +128,7 @@ export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
     }),
 
     content: (_props: DialogDynamicProps) => ({
+        flex: 1,
         _web: {
             overflow: 'visible',
             maxHeight: 'none',

package/src/Dialog/Dialog.web.tsx

@@ -21,6 +21,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   showCloseButton = true,
   closeOnBackdropClick = true,
   closeOnEscapeKey = true,
+  height,
   style,
   testID,
   id,
@@ -144,14 +145,18 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   const containerProps = getWebProps([
     (dialogStyles.container as any)({}),
     style as any,
+    height !== undefined ? { height, display: 'flex', flexDirection: 'column' } : null,
     isVisible
       ? { opacity: 1, transform: 'scale(1) translateY(0px)' }
       : { opacity: 0, transform: 'scale(0.96) translateY(-4px)' }
-  ]);
+  ].filter(Boolean));
   const headerProps = getWebProps([(dialogStyles.header as any)({})]);
   const titleProps = getWebProps([(dialogStyles.title as any)({})]);
   const closeButtonProps = getWebProps([(dialogStyles.closeButton as any)({})]);
-  const contentProps = getWebProps([(dialogStyles.content as any)({})]);
+  const contentProps = getWebProps([
+    (dialogStyles.content as any)({}),
+    height !== undefined ? { flex: 1, overflow: 'auto' } : null,
+  ].filter(Boolean));
 
   const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);
 

package/src/Dialog/types.ts

@@ -73,6 +73,11 @@ export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
    */
   animationType?: DialogAnimationType;
 
+  /**
+   * Maximum height for the dialog content area (native only)
+   */
+  maxContentHeight?: number;
+
   /**
    * Additional styles (platform-specific)
    */
@@ -96,4 +101,11 @@ export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
    * @default false
    */
   avoidKeyboard?: boolean;
+
+  /**
+   * Fixed height for the dialog container.
+   * Can be a number (pixels) or a string (e.g., '50%', '400px').
+   * When set, children can use flex: 1 to fill the available space.
+   */
+  height?: number | string;
 }

package/src/index.native.ts

@@ -16,6 +16,9 @@ export * from './Pressable/types';
 export { default as Input } from './Input';
 export * from './Input/types';
 
+export { default as TextInput } from './TextInput';
+export * from './TextInput/types';
+
 // New primitive components
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox/types';
@@ -115,6 +118,7 @@ export type { IconButtonProps } from './IconButton/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
 export type { InputProps } from './Input/types';
+export type { TextInputProps } from './TextInput/types';
 export type { CheckboxProps } from './Checkbox/types';
 export type { CardProps } from './Card/types';
 export type { DividerProps } from './Divider/types';