@momo-kits/foundation 0.92.30 → 0.92.31

package/Application/Components.tsx

@@ -65,7 +65,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View style={{width: 28}}>
       <TouchableOpacity
         accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
@@ -113,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe,
+      goBackSafe
     );
 
     return () => backHandler.remove();
@@ -268,7 +268,7 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
     const valid = child?.type === NavigationButton || child?.type === Fragment;
     if (__DEV__ && !valid) {
       console.warn(
-        'HeaderRightAction contains element type of NavigationButton, Please check again.',
+        'HeaderRightAction contains element type of NavigationButton, Please check again.'
       );
     }
     return child;
@@ -327,7 +327,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      },
+      }
     );
   };
 
@@ -338,9 +338,9 @@ const HeaderToolkitAction: React.FC<any> = ({
       {runtimeTools},
       (res: {item: {action?: string; key: string}}) => {
         const {item} = res;
-        navigator?.toolkitCallback?.(item);
+        navigator?.toolkitCallback?.(item.key);
         getToolkitConfig();
-      },
+      }
     );
   };
 
@@ -357,7 +357,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined,
+                  undefined
                 );
               },
             }}
@@ -388,7 +388,7 @@ const HeaderToolkitAction: React.FC<any> = ({
               [pinTool?.key],
               () => {
                 getToolkitConfig();
-              },
+              }
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}

package/Application/Navigator.ts

@@ -12,7 +12,7 @@ class Navigator {
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
-  toolkitCallback?: (item: any) => void;
+  toolkitCallback?: (key: string) => void;
 
   constructor(navigation: any, isReady: any) {
     this.ref = navigation;
@@ -78,7 +78,7 @@ class Navigator {
         StackActions.push('Modal', {
           ...params,
           isBottomSheet: true,
-        }),
+        })
       );
     }
   };
@@ -103,7 +103,7 @@ class Navigator {
         CommonActions.navigate({
           name,
           params,
-        }),
+        })
       );
     }
   };
@@ -124,7 +124,7 @@ class Navigator {
               params,
             },
           ],
-        }),
+        })
       );
     }
   };
@@ -141,9 +141,7 @@ class Navigator {
    * set callback function for toolkit
    * @param callback
    */
-  setToolkitCallback = (
-    callback: (item: {key: string; action: string}) => void,
-  ) => {
+  setToolkitCallback = (callback: (key: string) => void) => {
     this.toolkitCallback = callback;
   };
 }

package/Input/Input.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
   useImperativeHandle,
   useRef,
@@ -16,11 +17,15 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {Text} from '../Text';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import styles from './styles';
 import {checkTyping} from './utils';
 
+/**
+ * Input default component
+ */
 const Input = forwardRef(
   (
     {
@@ -34,16 +39,19 @@ const Input = forwardRef(
       onFocus,
       errorMessage,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
       disabled = false,
       floatingIconColor,
-      iconColor,
       required = false,
       errorSpacing,
       loading = false,
       leadingIcon,
       leadingIconColor,
       fontWeight = 'Regular',
-      onPressIcon,
       secureTextEntry,
       keyboardType,
       style,
@@ -51,9 +59,10 @@ const Input = forwardRef(
       hintText,
       accessibilityLabel,
       editable = true,
+      onPressFloatingIcon,
       ...props
     }: InputProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -90,7 +99,11 @@ const Input = forwardRef(
       };
     });
 
-    const renderIcon = (color: string | undefined) => {
+    /**
+     * Render trailing icon or text
+     * @param color
+     */
+    const renderTrailing = (color?: string) => {
       if (loading) {
         return <Loader type={'spinner'} color={color} style={styles.icon} />;
       }
@@ -109,24 +122,46 @@ const Input = forwardRef(
           </TouchableOpacity>
         );
       }
-      if (icon) {
-        return (
-          <TouchableOpacity
-            onPress={onPressIcon}
-            disabled={!onPressIcon}
-            style={styles.icon}>
-            <Icon color={color} source={icon} size={24} />
-          </TouchableOpacity>
+      if (icon || trailing) {
+        const renderIconTouchable = (icon: ReactNode) => {
+          return (
+            <TouchableOpacity
+              onPress={onPressTrailing ?? onPressIcon}
+              style={styles.icon}>
+              {icon}
+            </TouchableOpacity>
+          );
+        };
+        const trailingValue = icon || trailing;
+        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
+          return renderIconTouchable(
+            <Icon
+              color={color}
+              source={(icon || trailing) as string}
+              size={24}
+            />
+          );
+        }
+        return renderIconTouchable(
+          <Text
+            typography="action_xs_bold"
+            color={color ?? theme.colors.primary}
+            numberOfLines={1}>
+            {trailingValue!.substring(0, 15)}
+          </Text>
         );
       }
     };
 
+    /**
+     * Render input view
+     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -155,6 +190,7 @@ const Input = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (
@@ -204,21 +240,19 @@ const Input = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {renderIcon(iconTintColor)}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
     };
 
     let inputState = 'active';
-
     if (value && value?.length > 0) {
       inputState = 'filled';
     }
     if (errorMessage && errorMessage?.length > 0) {
       inputState = 'error';
     }
-
     if (disabled) {
       inputState = 'disabled';
     }
@@ -242,7 +276,7 @@ const Input = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default Input;

package/Input/InputDropDown.tsx

@@ -1,66 +1,55 @@
 import React, {useContext} from 'react';
-import {TextInput, TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
-import {Styles} from '../Consts';
 import {Icon} from '../Icon';
-import {Loader} from '../Loader';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
+import {Text} from '../Text';
 import styles from './styles';
+import {Spacing} from '../Consts';
 
 const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
+  onPressFloatingIcon,
   size = 'small',
   onPress,
   placeholder,
   errorMessage,
-  icon = 'arrow_chevron_down_small',
   disabled = false,
   floatingIconColor,
-  iconColor,
   required = false,
   errorSpacing,
-  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
   params,
   accessibilityLabel,
   hintText,
-  ...props
+  multiline,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
-  const full = !!value || !!placeholder;
-
-  const renderIcon = (color: string | undefined) => {
-    if (loading) {
-      return <Loader type={'spinner'} color={color} />;
-    }
-    if (icon) {
-      return <Icon color={color} source={icon} size={24} />;
-    }
-  };
 
+  /**
+   * Render the input view
+   */
   const renderInputView = () => {
     const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = iconColor;
 
     if (disabled) {
       textColor = disabledColor;
       placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
     }
 
     return (
       <View
         style={[
-          styles.inputWrapper,
+          styles.inputDropDownWrapper,
           {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
+          getSizeStyle(size, multiline),
           getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
@@ -69,10 +58,18 @@ const InputDropDown = ({
           disabled={disabled}
           required={required}
           floatingIcon={floatingIcon}
+          onPress={onPressFloatingIcon}
         />
-        <View style={full ? styles.inputView : Styles.row}>
+        <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
-            <View style={styles.leadingIconContainer}>
+            <View
+              style={[
+                styles.leadingIconContainerDropDown,
+                {
+                  marginTop: Spacing.M,
+                  marginRight: Spacing.S,
+                },
+              ]}>
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -80,28 +77,27 @@ const InputDropDown = ({
               />
             </View>
           )}
-          {full && (
-            <TextInput
-              {...props}
-              accessibilityLabel={accessibilityLabel}
-              onPressIn={onPress}
-              editable={false}
-              style={[
-                styles.input,
-                {
-                  color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
-                },
-              ]}
-              textBreakStrategy="highQuality"
-              value={value}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-            />
-          )}
+          <View
+            accessibilityLabel={accessibilityLabel}
+            style={styles.textViewDropDown}>
+            <Text
+              numberOfLines={multiline ? undefined : 1}
+              typography={'body_default_regular'}
+              color={value ? textColor : placeholderColor}>
+              {value || placeholder}
+            </Text>
+          </View>
+        </View>
+        <View
+          style={[
+            styles.iconViewDropDown,
+            {
+              alignItems: multiline ? 'flex-start' : 'center',
+              paddingTop: multiline ? Spacing.M : 0,
+            },
+          ]}>
+          <Icon source={'arrow_chevron_down_small'} />
         </View>
-        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
       </View>
     );
   };
@@ -116,8 +112,9 @@ const InputDropDown = ({
         componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
+        activeOpacity={0.6}
         onPress={onPress}
-        style={[style, full && styles.wrapper]}>
+        style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}

package/Input/InputMoney.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -19,6 +20,8 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import styles from './styles';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+import {Text} from '../Text';
+import {Loader} from '../Loader';
 
 const InputMoney = forwardRef(
   (
@@ -27,13 +30,18 @@ const InputMoney = forwardRef(
       floatingValue,
       floatingIcon,
       size = 'small',
+      loading,
       onBlur,
       onFocus,
       errorMessage,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
       disabled = false,
       floatingIconColor,
-      iconColor,
       required = false,
       errorSpacing,
       style,
@@ -42,9 +50,10 @@ const InputMoney = forwardRef(
       accessibilityLabel,
       hintText,
       value: _value,
+      onPressFloatingIcon,
       ...props
     }: InputMoneyProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -63,7 +72,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : '',
+      defaultValue ? validateText(defaultValue) : ''
     );
 
     const onClearText = () => {
@@ -99,11 +108,51 @@ const InputMoney = forwardRef(
       onBlur?.(e);
     };
 
+    /**
+     * Render trailing icon or text
+     * @param color
+     */
+    const renderTrailing = (color?: string) => {
+      if (loading) {
+        return <Loader type={'spinner'} color={color} style={styles.icon} />;
+      }
+
+      if (icon || trailing) {
+        const renderIconTouchable = (icon: ReactNode) => {
+          return (
+            <TouchableOpacity
+              onPress={onPressTrailing ?? onPressIcon}
+              style={styles.icon}>
+              {icon}
+            </TouchableOpacity>
+          );
+        };
+        const trailingValue = icon || trailing;
+        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
+          return renderIconTouchable(
+            <Icon
+              color={color}
+              source={(icon || trailing) as string}
+              size={24}
+            />
+          );
+        }
+        return renderIconTouchable(
+          <Text
+            typography="action_xs_bold"
+            color={color ?? theme.colors.primary}
+            numberOfLines={1}>
+            {trailingValue!.substring(0, 15)}
+          </Text>
+        );
+      }
+    };
+
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -125,6 +174,7 @@ const InputMoney = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             <TextInput
@@ -160,7 +210,7 @@ const InputMoney = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {!!icon && <Icon color={iconTintColor} source={icon} />}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
@@ -198,7 +248,7 @@ const InputMoney = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -94,7 +94,10 @@ const InputOTP = forwardRef(
       onChangeText: (text: string) => {
         _onChangeText(text);
       },
-      focus: () => inputRef.current?.focus(),
+      focus: () => {
+        setFocused(true);
+        inputRef.current?.focus()
+      },
       blur: () => inputRef.current?.blur(),
       setText: (text: string) => _onChangeText(text),
     }));

package/Input/InputSearch.tsx

@@ -18,6 +18,7 @@ import {Text} from '../Text';
 import {InputSearchProps} from './index';
 import styles from './styles';
 import {checkTyping} from './utils';
+import {Styles} from '../Consts';
 
 const InputSearch = forwardRef(
   (
@@ -25,10 +26,14 @@ const InputSearch = forwardRef(
       placeholder,
       onFocus,
       onBlur,
-      iconColor,
       value,
-      onChangeText,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
+      onChangeText,
       buttonText = 'Hủy',
       showButtonText = true,
       style,
@@ -39,7 +44,7 @@ const InputSearch = forwardRef(
       accessibilityLabel,
       ...props
     }: InputSearchProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -75,6 +80,9 @@ const InputSearch = forwardRef(
       };
     });
 
+    /**
+     * Render the input view
+     */
     const renderInputView = () => {
       return (
         <TextInput
@@ -99,12 +107,12 @@ const InputSearch = forwardRef(
       );
     };
 
-    const renderIconView = () => {
+    /**
+     * Render trailing icon or text
+     */
+    const renderTrailing = () => {
       return (
-        <View
-          style={{
-            flexDirection: 'row',
-          }}>
+        <View style={Styles.row}>
           {focused && haveValue && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
               <Icon
@@ -114,8 +122,10 @@ const InputSearch = forwardRef(
               />
             </TouchableOpacity>
           )}
-          {!!icon && (
-            <View style={{flexDirection: 'row'}}>
+          {!!(icon || trailing) && (
+            <TouchableOpacity
+              style={Styles.row}
+              onPress={onPressTrailing ?? onPressIcon}>
               <View
                 style={[
                   styles.divider,
@@ -125,22 +135,20 @@ const InputSearch = forwardRef(
                 ]}
               />
               <Icon
-                color={iconColor}
-                source={icon}
+                color={iconColor || trailingColor}
+                source={(icon || trailing) as string}
                 style={styles.iconSearchInput}
               />
-            </View>
+            </TouchableOpacity>
           )}
         </View>
       );
     };
 
     let inputState = 'empty';
-
     if (focused) {
       inputState = 'focus';
     }
-
     if (value && value?.length > 0) {
       inputState = 'filled';
     }
@@ -171,7 +179,7 @@ const InputSearch = forwardRef(
               color={theme.colors.text.hint}
             />
             {renderInputView()}
-            {renderIconView()}
+            {renderTrailing()}
           </View>
           {showButtonText && (
             <TouchableOpacity onPress={onPressButtonText}>
@@ -185,7 +193,7 @@ const InputSearch = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputSearch;

package/Input/common.tsx

@@ -1,5 +1,10 @@
 import React, {FC, useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
+import {
+  GestureResponderEvent,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {ApplicationContext} from '../Application';
 import {Theme} from '../Application/types';
 import {Styles} from '../Consts';
@@ -14,6 +19,7 @@ type FloatingViewProps = {
   floatingIcon?: string;
   required?: boolean;
   style?: ViewStyle;
+  onPress?: (e: GestureResponderEvent) => void;
 };
 
 export const DEFAULT_HEIGHT = scaleSize(104);
@@ -23,7 +29,7 @@ export const getBorderColor = (
   theme: Theme,
   focused: boolean,
   errorMessage?: string,
-  disabled?: boolean,
+  disabled?: boolean
 ) => {
   let borderColor = theme.colors.border.default;
 
@@ -42,7 +48,18 @@ export const getBorderColor = (
   return {borderColor};
 };
 
-export const getSizeStyle = (size?: 'small' | 'large') => {
+export const getSizeStyle = (
+  size?: 'small' | 'large',
+  multiline: boolean = false
+) => {
+  if (multiline)
+    return [
+      styles.multilineContainer,
+      {
+        minHeight: size === 'small' ? 48 : 56,
+      },
+    ];
+
   if (size === 'small') {
     return styles.smallContainer;
   }
@@ -70,7 +87,6 @@ export const ErrorView: FC<{
         <Text
           style={Styles.flex}
           color={errorMessage ? errorColor : hintColor}
-          numberOfLines={2}
           typography={'description_default_regular'}>
           {errorMessage ?? hintTextDefault}
         </Text>
@@ -90,6 +106,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   floatingIcon,
   required,
   style,
+  onPress,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -122,12 +139,14 @@ export const FloatingView: FC<FloatingViewProps> = ({
           )}
         </Text>
         {!!floatingIcon && (
-          <Icon
-            color={floatingIconTintColor}
-            source={floatingIcon}
-            size={16}
-            style={styles.floatingIcon}
-          />
+          <TouchableOpacity activeOpacity={onPress ? 0.6 : 1} onPress={onPress}>
+            <Icon
+              color={floatingIconTintColor}
+              source={floatingIcon}
+              size={16}
+              style={styles.floatingIcon}
+            />
+          </TouchableOpacity>
         )}
       </View>
     );

package/Input/index.tsx

@@ -1,4 +1,4 @@
-import {TextInputProps, ViewStyle} from 'react-native';
+import {GestureResponderEvent, TextInputProps, ViewStyle} from 'react-native';
 import Input from './Input';
 import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
@@ -6,6 +6,8 @@ import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
 
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+
 export interface InputProps extends TextInputProps {
   /**
    *  Optional. Defines the size of the Input component.
@@ -28,15 +30,38 @@ export interface InputProps extends TextInputProps {
   errorMessage?: string;
 
   /**
+   * @deprecated Use `trailing` instead.
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
   icon?: string;
 
   /**
+   * @deprecated Use `trailingColor` instead.
    * Optional. Represents the color of the icon in the Input component.
    */
   iconColor?: string;
 
+  /**
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  trailing?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  trailingColor?: string;
+
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressTrailing?: () => void;
+
   /**
    * Optional. If `true`, the user won't be able to interact with the Input component.
    * Defaults to `false` if not provided.
@@ -82,11 +107,6 @@ export interface InputProps extends TextInputProps {
    */
   fontWeight?: 'Regular' | 'Bold';
 
-  /**
-   * Optional. callback function to be called when the icon is pressed.
-   */
-  onPressIcon?: () => void;
-
   /**
    * Optional. params for element tracking.
    */
@@ -96,10 +116,11 @@ export interface InputProps extends TextInputProps {
    * Optional. Represents text below the Input component.
    */
   hintText?: string;
+
+  onPressFloatingIcon?: (e: GestureResponderEvent) => void;
 }
 
-export interface InputTextAreaProps
-  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
+export interface InputTextAreaProps extends Omit<InputProps, 'size'> {
   /**
    * Optional. Defines the height of the InputTextArea component.
    * It can be used to set a specific height for the text area.
@@ -125,14 +146,37 @@ export interface InputSearchProps extends TextInputProps {
   onPressButtonText?: () => void;
 
   /**
+   * @deprecated Use `trailing` instead.
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   * @deprecated Use `trailingColor` instead.
    * Optional. Represents the color of the icon in the Input component.
    */
   iconColor?: string;
 
+  /**
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
   /**
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
-  icon?: string;
+  trailing?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  trailingColor?: string;
+
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressTrailing?: () => void;
 
   /**
    * Optional. If `true`, the user won't be able to interact with the Input component.
@@ -147,8 +191,6 @@ export interface InputSearchProps extends TextInputProps {
 
 export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
 
-export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
-
 export interface InputOTPProps
   extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
@@ -181,7 +223,8 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps extends InputProps {
+export interface InputDropDownProps
+  extends Omit<InputProps, 'trailing' | 'trailingColor' | 'onPressTrailing'> {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -189,57 +232,17 @@ export interface InputDropDownProps extends InputProps {
    */
   size?: 'small' | 'large';
 
-  /**
-   * Optional. The current value of the InputDropDown.
-   */
-  value?: string;
-
-  /**
-   * Optional. Text that is displayed when there is no value set in the InputDropDown.
-   */
-  placeholder?: string;
-
   /**
    * Optional. Function to be called when the InputDropDown is pressed.
    */
   onPress?: () => void;
 
-  /**
-   * Optional. Represents the value for the floating title in the InputDropDown component.
-   */
-  floatingValue?: string;
-
-  /**
-   * Optional. Represents the name or key of the floating icon to be displayed in the InputDropDown component.
-   */
-  floatingIcon?: string;
-
-  /**
-   * Optional. Represents the error message to be displayed below the InputDropDown component when there is an error.
-   */
-  errorMessage?: string;
-
-  /**
-   * Optional. Represents the name or key of the icon to be displayed in the InputDropDown component.
-   */
-  icon?: string;
-
-  /**
-   * Optional. Represents the color of the icon in the InputDropDown component.
-   */
-  iconColor?: string;
-
   /**
    * Optional. If `true`, the user won't be able to interact with the InputDropDown component.
    * Defaults to `false` if not provided.
    */
   disabled?: boolean;
 
-  /**
-   * Optional. Represents the color of the floating icon in the InputDropDown component.
-   */
-  floatingIconColor?: string;
-
   /**
    * Optional. If `true`, the InputDropDown component is marked as required,
    * indicating that the user must provide a value before submitting a form.
@@ -247,28 +250,6 @@ export interface InputDropDownProps extends InputProps {
    */
   required?: boolean;
 
-  /**
-   * Optional. If `true`,
-   * includes spacing when InputDropDown does not have an error message.
-   * Defaults to `false` if not provided.
-   */
-  errorSpacing?: boolean;
-
-  /**
-   * If `true`, the icon of the input will show an indicator for loading.
-   */
-  loading?: boolean;
-
-  /**
-   * Optional. Represents the leading icon in the InputDropDown component.
-   */
-  leadingIcon?: string;
-
-  /**
-   * Optional. Represents the color of the leading icon in the InputDropDown component.
-   */
-  leadingIconColor?: string;
-
   /**
    * Optional. params for element tracking.
    */
@@ -280,6 +261,8 @@ export interface InputDropDownProps extends InputProps {
    * Optional. Represents the style of the InputDropDown component.
    */
   style?: ViewStyle | ViewStyle[];
+
+  multiline?: boolean;
 }
 
 export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Input/styles.ts

@@ -157,4 +157,33 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  //DropDown
+  inputDropDownWrapper: {
+    flexDirection: 'row',
+    marginTop: Spacing.S,
+  },
+  inputDropDownView: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingLeft: Spacing.M,
+  },
+  iconViewDropDown: {
+    flexDirection: 'row',
+    marginRight: Spacing.M,
+  },
+  textViewDropDown: {
+    flex: 1,
+    marginVertical: Spacing.M,
+    marginRight: Spacing.S,
+    justifyContent: 'center',
+  },
+  multilineContainer: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+  },
+  leadingIconContainerDropDown: {
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
 });

package/Layout/Screen.tsx

@@ -121,25 +121,25 @@ const Screen = forwardRef(
       useGridLayout = true,
       keyboardVerticalOffset,
     }: ScreenProps,
-    ref,
+    ref
   ) => {
     const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const currentTint = useRef(Colors.black_01);
-    const isTab = navigation?.instance?.getState?.()?.type == 'tab';
+    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
     let styleAnimatedHeader: NavigationOptions;
     let handleScroll;
     let headerBackground: string | undefined = undefined;
     let Component: any = View;
     let keyboardOffset = heightHeader - 20;
-    if (headerType == 'extended' || animatedHeader) {
+    if (headerType === 'extended' || animatedHeader) {
       keyboardOffset = -20;
     }
 
-    if (headerType == 'extended') {
+    if (headerType === 'extended') {
       headerBackground = theme.assets?.headerBackground;
     }
 
@@ -157,7 +157,7 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type == 'surface') {
+        if (animatedHeader.type === 'surface') {
           styleAnimatedHeader = {
             ...styleAnimatedHeader,
             headerBackground: (props: any) => (
@@ -249,13 +249,13 @@ const Screen = forwardRef(
             useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
               scrollViewProps?.onScroll?.(e);
-              if (animatedHeader?.type == 'surface') {
+              if (animatedHeader?.type === 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;
                 if (offsetY > 50) {
                   color = theme.colors.text.default;
                 }
-                if (color != currentTint.current) {
+                if (color !== currentTint.current) {
                   currentTint.current = color;
                   navigation?.setOptions({
                     headerTintColor: color,
@@ -263,7 +263,7 @@ const Screen = forwardRef(
                 }
               }
             },
-          },
+          }
         );
       }
     }
@@ -287,7 +287,7 @@ const Screen = forwardRef(
       if (Array.isArray(results)) {
         return results.map((item, index) => {
           const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-          if (item?.type == Fragment) {
+          if (item?.type === Fragment) {
             return renderContent(item?.props?.children);
           }
           if (item) {
@@ -307,7 +307,7 @@ const Screen = forwardRef(
       } else {
         const item: any = children;
         const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-        if (item?.type == Fragment) {
+        if (item?.type === Fragment) {
           return renderContent(item?.props?.children);
         }
         return (
@@ -387,7 +387,7 @@ const Screen = forwardRef(
         </KeyboardAvoidingView>
       </View>
     );
-  },
+  }
 );
 
 export default Screen;

package/Popup/PopupNotify.tsx

@@ -5,7 +5,7 @@ import {Button} from '../Button';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Image} from '../Image';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import {PopupNotifyProps} from './types';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
@@ -27,7 +27,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
-    descriptionStyle = {height: 80};
+    descriptionStyle = {maxHeight: scaleSize(172)};
   }
   /**
    * tracking

package/Title/styles.ts

@@ -46,16 +46,16 @@ export default StyleSheet.create({
     marginRight: Spacing.S,
   },
   iconRight: {
-    width: scaleSize(22),
-    height: scaleSize(22),
+    width: 22,
+    height: 22,
     borderRadius: Radius.M,
     alignItems: 'center',
     justifyContent: 'center',
     marginLeft: Spacing.S,
   },
   iconLeft: {
-    width: scaleSize(18),
-    height: scaleSize(18),
+    width: 18,
+    height: 18,
     borderRadius: Radius.M,
     alignItems: 'center',
     justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.30",
+    "version": "0.92.31",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/publish.sh

@@ -7,16 +7,16 @@ rsync -r --exclude=/dist ./* dist
 cd dist
 
 if [ "$1" == "stable" ]; then
-  npm version $(npm view @momo-kits/foundation@stable version)
-  npm version patch
+  #npm version $(npm view @momo-kits/foundation@stable version)
+  #npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  npm version $(npm view @momo-kits/foundation@latest version)
-  npm version prerelease --preid=rc
+  #npm version $(npm view @momo-kits/foundation@latest version)
+  #npm version prerelease --preid=rc
   npm publish --tag latest --access=public
 else
-  npm version $(npm view @momo-kits/foundation@beta version)
-  npm version prerelease --preid=beta
+  #npm version $(npm view @momo-kits/foundation@beta version)
+  #npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi
 

package/verify.js

@@ -1,47 +1,41 @@
 const fs = require('fs');
 const path = require('path');
 
-try {
-  const packageInfo = JSON.parse(
-    fs.readFileSync(path.join(`${__dirname}`, 'package.json'), 'utf8')
+const packageInfo = JSON.parse(
+  fs.readFileSync(path.join(`${__dirname}`, 'package.json'), 'utf8')
+);
+const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
+
+const app = path.join(`${__dirname}/../../../`, 'app.json');
+const miniJson = path.join(`${__dirname}/../../../`, 'package.json');
+
+if (!fs.existsSync(app) || !fs.existsSync(miniJson)) {
+  return;
+}
+
+const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
+const miniInfo = JSON.parse(fs.readFileSync(miniJson, 'utf8'));
+
+const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
+const androidAppTarget = appInfo?.client?.android.deploymentTarget;
+
+if (
+  miniInfo?.dependencies?.['@momo-platform/momo-core']?.includes('optimize')
+) {
+  return;
+}
+
+if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
+  throw new Error(
+    `\x1b[41m Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`
+  );
+}
+
+if (
+  miniInfo?.dependencies?.['@momo-platform/momo-core'] &&
+  miniInfo?.dependencies?.['@momo-platform/momo-core'] !== packageInfo?.version
+) {
+  throw new Error(
+    `\x1b[41m Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`
   );
-  const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
-
-  const app = path.join(`${__dirname}/../../../`, 'app.json');
-  const miniJson = path.join(`${__dirname}/../../../`, 'package.json');
-
-  if (!fs.existsSync(app) || !fs.existsSync(miniJson)) {
-    return;
-  }
-
-  const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
-  const miniInfo = JSON.parse(fs.readFileSync(miniJson, 'utf8'));
-
-  const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
-  const androidAppTarget = appInfo?.client?.android.deploymentTarget;
-
-  if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
-    console.error(
-      `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`
-    );
-    throw new Error(
-      `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`
-    );
-  }
-
-  if (
-    miniInfo?.dependencies?.['@momo-platform/momo-core'] &&
-    miniInfo?.dependencies?.['@momo-platform/momo-core'] !==
-      packageInfo?.version
-  ) {
-    console.error(
-      `Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`
-    );
-    throw new Error(
-      `Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`
-    );
-  }
-} catch (error) {
-  console.error(`Installation failed: ${error.message}`);
-  process.exit(0);
 }