@idealyst/components 1.2.119 → 1.2.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.119",
+  "version": "1.2.122",
   "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,12 +56,13 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.119",
+    "@idealyst/theme": "^1.2.122",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
     "@react-native-vector-icons/material-design-icons": ">=12.0.0",
     "@react-native/normalize-colors": "*",
+    "@react-navigation/bottom-tabs": ">=7.0.0",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-edge-to-edge": "*",
@@ -80,6 +81,9 @@
     "@mdi/react": {
       "optional": true
     },
+    "@react-navigation/bottom-tabs": {
+      "optional": true
+    },
     "@react-native/normalize-colors": {
       "optional": true
     },
@@ -107,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.119",
-    "@idealyst/tooling": "^1.2.119",
+    "@idealyst/theme": "^1.2.122",
+    "@idealyst/tooling": "^1.2.122",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Dialog/Dialog.native.tsx

@@ -18,6 +18,7 @@ const Dialog = forwardRef<View, DialogProps>(({
   animationType: _animationType = 'fade',
   avoidKeyboard = false,
   padding: paddingProp = 20,
+  height,
   maxContentHeight,
   contentPadding = 24,
   contentStyle,
@@ -183,14 +184,30 @@ const Dialog = forwardRef<View, DialogProps>(({
     ? Math.min(maxContentHeight, maxAvailableHeight)
     : maxAvailableHeight;
 
-  // Dialog uses the effective max height, with flex: 1 so children can fill it
+  // Resolve explicit height (number or percentage string)
+  const resolvedHeight = typeof height === 'string'
+    ? height.endsWith('%')
+      ? (parseFloat(height) / 100) * maxAvailableHeight
+      : parseFloat(height)
+    : height;
+
+  // Dialog uses the effective max height, with a definite height when requested
+  // so children can resolve flex: 1 against it
   const dialogContainerStyle = {
     ...containerStyle,
     maxHeight: effectiveMaxHeight,
-    height: maxContentHeight ? effectiveMaxHeight : undefined,
+    height: resolvedHeight
+      ? Math.min(resolvedHeight, effectiveMaxHeight)
+      : maxContentHeight
+        ? effectiveMaxHeight
+        : undefined,
     flex: undefined,
   };
 
+  // Only apply flex: 1 to content when the dialog has a definite height to flex against.
+  // Without a definite height, flex: 1 collapses content instead of wrapping naturally.
+  const hasDefiniteHeight = Boolean(resolvedHeight || maxContentHeight);
+
   const dialogContainer = (
     <Animated.View ref={ref as any} style={[dialogContainerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
       {(title || showCloseButton) && (
@@ -212,7 +229,7 @@ const Dialog = forwardRef<View, DialogProps>(({
           )}
         </View>
       )}
-      <View style={[contentPadding > 0 ? { padding: contentPadding } : undefined, contentStyle]}>
+      <View style={[hasDefiniteHeight && { flex: 1, minHeight: 0 }, contentPadding > 0 ? { padding: contentPadding } : undefined, contentStyle]}>
         {children}
       </View>
     </Animated.View>

package/src/Menu/Menu.native.tsx

@@ -5,6 +5,7 @@ import {
   Pressable,
   ScrollView,
 } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { menuStyles } from './Menu.styles';
 import type { MenuProps, MenuItem as MenuItemType } from './types';
 import MenuItem from './MenuItem.native';
@@ -60,10 +61,33 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
 
   const mergedTriggerRef = useMergeRefs(ref, triggerRef);
 
+  // Animation shared values
+  const menuOpacity = useSharedValue(0);
+
+  const animatedMenuStyle = useAnimatedStyle(() => ({
+    opacity: menuOpacity.value,
+  }));
+
+  // Animate in when measured and positioned
+  const isMeasured = menuSize.height > 0;
+  const shouldShow = isMeasured && isPositioned;
+
+  useEffect(() => {
+    if (shouldShow) {
+      menuOpacity.value = withTiming(1, {
+        duration: 150,
+        easing: Easing.out(Easing.ease),
+      });
+    } else {
+      menuOpacity.value = 0;
+    }
+  }, [shouldShow]);
+
   // Reset position when menu closes
   useEffect(() => {
     if (!open) {
       resetPosition();
+      menuOpacity.value = 0;
     }
   }, [open]);
 
@@ -93,10 +117,6 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
   const renderMenu = () => {
     if (!open) return null;
 
-    // Show menu only after it has been measured AND positioned
-    const isMeasured = menuSize.height > 0;
-    const shouldShow = isMeasured && isPositioned;
-
     return (
       <Modal
         visible={true}
@@ -115,26 +135,27 @@ const Menu = forwardRef<IdealystElement, MenuProps>(({
             style={[
               (menuStyles.menu as any)({}),
               style,
-              { opacity: shouldShow ? 1 : 0 }
             ]}
             onLayout={handleMenuLayout}
           >
-            <ScrollView
-              showsVerticalScrollIndicator={false}
-            >
-              {items.map((item, index) => {
-
-                return (
-                  <MenuItem
-                    key={item.id || index}
-                    item={item}
-                    onPress={handleItemPress}
-                    size={size}
-                    testID={testID ? `${testID}-item-${item.id || index}` : undefined}
-                  />
-                );
-              })}
-            </ScrollView>
+            <Animated.View style={animatedMenuStyle}>
+              <ScrollView
+                showsVerticalScrollIndicator={false}
+              >
+                {items.map((item, index) => {
+
+                  return (
+                    <MenuItem
+                      key={item.id || index}
+                      item={item}
+                      onPress={handleItemPress}
+                      size={size}
+                      testID={testID ? `${testID}-item-${item.id || index}` : undefined}
+                    />
+                  );
+                })}
+              </ScrollView>
+            </Animated.View>
           </BoundedModalContent>
         </Pressable>
       </Modal>

package/src/Menu/MenuItem.native.tsx

@@ -24,19 +24,28 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
   const iconStyle = (menuItemStyles.icon as any)({});
   const labelStyle = (menuItemStyles.label as any)({});
 
+  // Extract icon size from theme variant (fontSize is set by $menu.iconSize)
+  const iconSize = iconStyle.fontSize || iconStyle.width || 20;
+
   const renderIcon = () => {
     if (!item.icon) return null;
 
     if (typeof item.icon === 'string') {
       return (
-        <MaterialDesignIcons
-          name={item.icon as any}
-          color={iconStyle.color}
-          style={iconStyle}
-        />
+        <View style={{ width: iconSize, height: iconSize, alignItems: 'center', justifyContent: 'center', marginRight: iconStyle.marginRight || 12, flexShrink: 0 }}>
+          <MaterialDesignIcons
+            name={item.icon as any}
+            size={iconSize}
+            color={iconStyle.color}
+          />
+        </View>
       );
     } else if (isValidElement(item.icon)) {
-      return item.icon;
+      return (
+        <View style={{ marginRight: iconStyle.marginRight || 12, flexShrink: 0 }}>
+          {item.icon}
+        </View>
+      );
     }
     return null;
   };
@@ -54,12 +63,8 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
       android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
       testID={testID}
     >
-      {item.icon && (
-        <View>
-          {renderIcon()}
-        </View>
-      )}
-      <Text style={labelStyle}>
+      {renderIcon()}
+      <Text style={labelStyle} numberOfLines={1}>
         {item.label}
       </Text>
     </Pressable>

package/src/Screen/Screen.native.tsx

@@ -1,7 +1,8 @@
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import { View as RNView, ScrollView as RNScrollView, Keyboard, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { useSafeAreaInsets } from '@idealyst/theme';
+import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 import type { IdealystElement } from '../utils/refTypes';
@@ -16,6 +17,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   safeAreaRight,
   scrollable = true,
   avoidKeyboard = true,
+  keyboardAvoidingOffset = 0,
   contentInset,
   onLayout,
   // Spacing variants from ContainerStyleProps
@@ -38,6 +40,9 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   const applySafeAreaLeft = safeAreaLeft ?? safeArea;
   const applySafeAreaRight = safeAreaRight ?? safeArea;
 
+  // Detect tab bar height when inside a bottom tab navigator
+  const tabBarHeight = useContext(BottomTabBarHeightContext) ?? 0;
+
   // Animated keyboard offset
   const keyboardOffset = useSharedValue(0);
 
@@ -49,7 +54,10 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
 
     const showSubscription = Keyboard.addListener(showEvent, (e) => {
-      keyboardOffset.value = withTiming(e.endCoordinates.height, {
+      // Subtract the tab bar height and any manual offset since those areas
+      // are already occupied and don't need additional padding
+      const adjustedHeight = Math.max(0, e.endCoordinates.height - tabBarHeight - keyboardAvoidingOffset);
+      keyboardOffset.value = withTiming(adjustedHeight, {
         duration: Platform.OS === 'ios' ? e.duration : 250,
         easing: Easing.out(Easing.cubic),
       });
@@ -66,7 +74,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
       showSubscription.remove();
       hideSubscription.remove();
     };
-  }, [avoidKeyboard]);
+  }, [avoidKeyboard, tabBarHeight, keyboardAvoidingOffset]);
 
   const animatedKeyboardStyle = useAnimatedStyle(() => ({
     paddingBottom: keyboardOffset.value,

package/src/Screen/types.ts

@@ -84,6 +84,15 @@ export interface ScreenProps extends ContainerStyleProps {
    */
   avoidKeyboard?: boolean;
 
+  /**
+   * Additional offset to subtract from the keyboard height when avoiding the keyboard.
+   * The Screen automatically accounts for the tab bar height when inside a tab navigator,
+   * but this prop can be used for other fixed UI elements that occupy space at the bottom.
+   * @default 0
+   * @platform native
+   */
+  keyboardAvoidingOffset?: number;
+
   /**
    * Called when the layout of the screen changes.
    * Provides the new width, height, x, and y coordinates.

package/src/TextArea/TextArea.native.tsx

@@ -17,6 +17,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   minHeight,
   maxHeight,
   autoGrow = false,
+  fill = false,
   maxLength,
   rows = 4,
   label,
@@ -167,12 +168,12 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   });
 
   return (
-    <View nativeID={id} style={[containerStyleComputed, style]} testID={testID}>
+    <View nativeID={id} style={[containerStyleComputed, fill && { flex: 1 }, style]} testID={testID}>
       {label && (
         <Text style={labelStyleComputed}>{label}</Text>
       )}
 
-      <View style={textareaContainerStyleComputed}>
+      <View style={[textareaContainerStyleComputed, fill && { flex: 1 }]}>
         <TextInput
           ref={useMergeRefs(textInputRef, ref as any)}
           {...nativeA11yProps}
@@ -183,16 +184,19 @@ 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 fixed height: use rows-based height
-            autoGrow
-              ? {
-                  minHeight: minHeight ?? 44,
-                  maxHeight: maxHeight,
-                  // Force height to minHeight when empty to ensure shrinking
-                  ...(value === '' ? { height: minHeight ?? 44 } : {}),
-                }
-              : { height: rows * 24 },
+            // fill: expand to fill available space via flex
+            // autoGrow: don't set height, let it grow naturally with minHeight constraint
+            // default: use rows-based height
+            fill
+              ? { flex: 1 }
+              : autoGrow
+                ? {
+                    minHeight: minHeight ?? 44,
+                    maxHeight: maxHeight,
+                    // Force height to minHeight when empty to ensure shrinking
+                    ...(value === '' ? { height: minHeight ?? 44 } : {}),
+                  }
+                : { height: rows * 24 },
             textareaStyle,
           ]}
           value={value}

package/src/TextArea/TextArea.web.tsx

@@ -21,6 +21,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   minHeight,
   maxHeight,
   autoGrow = false,
+  fill = false,
   maxLength,
   label,
   error,
@@ -158,7 +159,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   const characterCountProps = getWebProps([characterCountStyleComputed]);
 
   const adjustHeight = useCallback(() => {
-    if (!autoGrow || !textareaRef.current) return;
+    if (!autoGrow || fill || !textareaRef.current) return;
 
     const textarea = textareaRef.current;
 
@@ -176,7 +177,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
     }
 
     textarea.style.height = `${newHeight}px`;
-  }, [autoGrow, minHeight, maxHeight]);
+  }, [autoGrow, fill, minHeight, maxHeight]);
 
   useEffect(() => {
     adjustHeight();
@@ -243,17 +244,18 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
   const mergedTextareaRef = useMergeRefs(textareaRef, computedTextareaProps.ref);
 
   return (
-    <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
+    <div {...containerProps} ref={mergedRef} id={id} data-testid={testID} style={{ ...containerProps.style as any, ...(fill ? { flex: 1, display: 'flex', flexDirection: 'column' } : {}) }}>
       {label && (
         <label {...labelProps} id={labelId} htmlFor={textareaId}>{label}</label>
       )}
 
-      <div {...textareaContainerProps}>
+      <div {...textareaContainerProps} style={{ ...textareaContainerProps.style as any, ...(fill ? { flex: 1, display: 'flex', flexDirection: 'column' } : {}) }}>
         <textarea
           {...computedTextareaProps}
           {...ariaProps}
           id={textareaId}
           ref={mergedTextareaRef}
+          style={{ ...computedTextareaProps.style as any, ...(fill ? { flex: 1 } : {}) }}
           value={value}
           onChange={handleChange}
           onFocus={handleFocus}
@@ -261,7 +263,7 @@ const TextArea = forwardRef<IdealystElement, TextAreaProps>(({
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
           disabled={disabled}
-          rows={autoGrow ? undefined : rows}
+          rows={fill ? undefined : autoGrow ? undefined : rows}
           maxLength={maxLength}
         />
       </div>

package/src/TextArea/types.ts

@@ -44,6 +44,11 @@ export interface TextAreaProps extends FormInputStyleProps, FormAccessibilityPro
   minHeight?: number;
   maxHeight?: number;
   autoGrow?: boolean;
+  /**
+   * When true, the textarea expands to fill available vertical space using flex.
+   * Overrides `rows` and `autoGrow` height logic. All container layers get `flex: 1`.
+   */
+  fill?: boolean;
   maxLength?: number;
   label?: string;
   error?: string;

package/src/extensions/index.ts

@@ -93,4 +93,5 @@ export type {
     ImageStyleableElements,
     PressableStyleableElements,
     ScreenStyleableElements,
+    DatePickerCalendarStyleableElements,
 } from './types';

package/src/extensions/types.ts

@@ -426,6 +426,37 @@ export type ScreenStyleableElements = {
     content: Styles;
 };
 
+/**
+ * DatePickerCalendar styleable elements.
+ * @see datePickerCalendarStyles in @idealyst/datepicker
+ */
+export type DatePickerCalendarStyleableElements = {
+    calendar: ElementStyle;
+    calendarHeader: ElementStyle;
+    calendarTitle: ElementStyle;
+    weekdayRow: ElementStyle;
+    weekdayCell: ElementStyle;
+    weekdayText: ElementStyle;
+    calendarGrid: ElementStyle;
+    dayCell: ElementStyle;
+    dayButton: ElementStyle;
+    dayText: ElementStyle;
+    selectedDay: ElementStyle;
+    selectedDayText: ElementStyle;
+    todayDay: ElementStyle;
+    navButton: ElementStyle;
+    titleButton: ElementStyle;
+    titleText: ElementStyle;
+    monthGrid: ElementStyle;
+    yearGrid: ElementStyle;
+    selectorItem: ElementStyle;
+    selectorItemSelected: ElementStyle;
+    selectorItemText: ElementStyle;
+    selectorItemTextSelected: ElementStyle;
+    indicatorRow: ElementStyle;
+    indicator: ElementStyle;
+};
+
 // ============================================================================
 // Master Component Style Elements Map
 // ============================================================================
@@ -502,6 +533,7 @@ interface BuiltInComponentStyleElements {
     Image: ImageStyleableElements;
     Pressable: PressableStyleableElements;
     Screen: ScreenStyleableElements;
+    DatePickerCalendar: DatePickerCalendarStyleableElements;
 }
 
 /**

package/src/internal/BoundedModalContent.native.tsx

@@ -14,7 +14,7 @@ interface BoundedModalContentProps {
 
 /**
  * A wrapper component for modal content that automatically constrains its height
- * to fit within screen boundaries, accounting for safe areas.
+ * and width to fit within screen boundaries, accounting for safe areas.
  */
 export const BoundedModalContent: React.FC<BoundedModalContentProps> = ({
   children,
@@ -26,7 +26,7 @@ export const BoundedModalContent: React.FC<BoundedModalContentProps> = ({
   onLayout,
 }) => {
   const insets = useSafeAreaInsets();
-  const { height: windowHeight } = Dimensions.get('window');
+  const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
   const padding = 12;
 
   // Calculate dynamic maxHeight to ensure content stays within bounds
@@ -38,6 +38,9 @@ export const BoundedModalContent: React.FC<BoundedModalContentProps> = ({
   // Calculate available height: from current top position to bottom boundary
   const availableHeight = Math.max(100, bottomBound - top);
 
+  // Calculate max width so content doesn't overflow the right edge
+  const maxAvailableWidth = windowWidth - left - insets.right - padding;
+
   return (
     <View
       style={[
@@ -45,7 +48,7 @@ export const BoundedModalContent: React.FC<BoundedModalContentProps> = ({
           position: 'absolute',
           top,
           left,
-          ...(width && { width }),
+          ...(width ? { width } : { maxWidth: maxAvailableWidth }),
           maxHeight: availableHeight,
         },
         style,