@momo-kits/native-kits 0.300.3 → 0.300.4

package/ios/Input/InputPhoneNumber.swift

@@ -76,16 +76,15 @@ public struct InputPhoneNumber: View {
             }
         )
         
-        VStack(alignment: .leading, spacing: 4) {
+        VStack(alignment: .leading, spacing: 0) {
             HStack(spacing: 0) {
                 // 🇻🇳 Flag
                 ImageView("https://static.momocdn.net/app/img/icon/ic-qrcode-package/ic_vn_flag.png")
                     .frame(width: 24, height: 24)
                     .padding(.trailing, Spacing.XS)
-                
-                MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold)
-                    .foregroundColor(theme.colors.text.default)
-                
+
+                MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold, color: theme.colors.text.default)
+
                 Rectangle()
                     .fill(theme.colors.border.default)
                     .frame(width: 1, height: size == .small ? 24 : 32)
@@ -105,7 +104,7 @@ public struct InputPhoneNumber: View {
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
-                    .font(size == .small ? .header_s_semibold : .header_m_bold)
+                    .kitFont(size == .small ? .headerSSemibold : .headerMBold)
                     .ignoreBoldTextSetting()
                     .foregroundColor(theme.colors.text.default)
                     .applyCursorColor(theme.colors.primary)
@@ -125,13 +124,14 @@ public struct InputPhoneNumber: View {
                         onChangeText?("")
                     }) {
                         Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
-                            .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
+                            .padding(.horizontal, Spacing.S)
                     }
+                    .accessibilityIdentifier("ic_clear")
                 }
-                
+
                 // Loading indicator
                 if loading {
-                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                    ActivityIndicator(isAnimating: .constant(true), style: .medium, color: rightIconColor ?? theme.colors.text.default)
                         .frame(width: 16, height: 16)
                 }
                 
@@ -166,6 +166,7 @@ public struct InputPhoneNumber: View {
     // MARK: - Helpers
     
     private func handleFocusChange(_ focused: Bool) {
+        guard focused != isFocused else { return }
         isFocused = focused
         if focused {
             onFocus?()

package/ios/Input/InputSearch.swift

@@ -18,16 +18,17 @@ struct RenderRightIconSearch: View {
     var body: some View {
         HStack(spacing: 0) {
             if loading {
-                ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                ActivityIndicator(isAnimating: .constant(true), style: .medium, color: color)
                     .frame(width: 16, height: 16)
                     .padding(.horizontal, Spacing.S)
             }
             if !icon.isEmpty {
-                Divider()
-                    .frame(width: 1)
-                    .background(theme.colors.primary)
+                // Compose: a 1pt rule inset S from the top and bottom of the 36pt bar.
+                Rectangle()
+                    .fill(theme.colors.primary)
+                    .frame(width: 1, height: 36 - Spacing.S * 2)
                     .padding(.leading, Spacing.S)
-                
+
                 Icon(source: icon, size: 24, color: color)
                     .padding(.leading, Spacing.S)
                     .onTapGesture(perform: onClick)
@@ -44,6 +45,8 @@ public struct InputSearchProps {
     var placeholder: String = ""
     var onChangeText: (String) -> Void = { _ in }
     var onPressButtonText: () -> Void = {}
+    /// Without one, a header search's button text pops the screen (Compose `SearchAnimated`).
+    var hasButtonTextAction = false
     var error: String = ""
     var disabled: Bool = false
     var icon: String = ""
@@ -58,6 +61,10 @@ public struct InputSearchProps {
     var searchIcon: (() -> AnyView)? = nil
     // Mirrors Compose's InputSearchProps.placeholderCustomRender — a custom placeholder view.
     var placeholderCustomRender: (() -> AnyView)? = nil
+    var backgroundColor: Color? = nil
+    var clearCondition: (() -> Bool)? = nil
+    var onClearPress: () -> Void = {}
+    var onSubmit: () -> Void = {}
 
     public init(text: Binding<String>,
                 buttonText: String = "",
@@ -65,7 +72,7 @@ public struct InputSearchProps {
                 showBorder: Bool = true,
                 placeholder: String = "",
                 onChangeText: @escaping (String) -> Void = { _ in },
-                onPressButtonText: @escaping () -> Void = {},
+                onPressButtonText: (() -> Void)? = nil,
                 error: String = "",
                 disabled: Bool = false,
                 icon: String = "",
@@ -77,14 +84,19 @@ public struct InputSearchProps {
                 fontWeight: Font.Weight = .regular,
                 keyboardType: UIKeyboardType = .default,
                 searchIcon: (() -> AnyView)? = nil,
-                placeholderCustomRender: (() -> AnyView)? = nil) {
+                placeholderCustomRender: (() -> AnyView)? = nil,
+                backgroundColor: Color? = nil,
+                clearCondition: (() -> Bool)? = nil,
+                onClearPress: @escaping () -> Void = {},
+                onSubmit: @escaping () -> Void = {}) {
         self._text = text
         self.buttonText = buttonText
         self.showButtonText = showButtonText
         self.showBorder = showBorder
         self.placeholder = placeholder
         self.onChangeText = onChangeText
-        self.onPressButtonText = onPressButtonText
+        self.onPressButtonText = onPressButtonText ?? {}
+        self.hasButtonTextAction = onPressButtonText != nil
         self.error = error
         self.disabled = disabled
         self.icon = icon
@@ -97,6 +109,10 @@ public struct InputSearchProps {
         self.keyboardType = keyboardType
         self.searchIcon = searchIcon
         self.placeholderCustomRender = placeholderCustomRender
+        self.backgroundColor = backgroundColor
+        self.clearCondition = clearCondition
+        self.onClearPress = onClearPress
+        self.onSubmit = onSubmit
         }
 }
 
@@ -104,7 +120,6 @@ public struct InputSearchProps {
 
 public struct InputSearch: View {
     @Environment(\.appTheme) private var theme
-    @Environment(\.momoFontScale) private var fontScale
     @Binding var text: String
     var buttonText: String = ""
     var showButtonText: Bool = false
@@ -124,6 +139,10 @@ public struct InputSearch: View {
     var keyboardType: UIKeyboardType = .default
     var searchIcon: (() -> AnyView)? = nil
     var placeholderCustomRender: (() -> AnyView)? = nil
+    var backgroundColor: Color? = nil
+    var clearCondition: (() -> Bool)? = nil
+    var onClearPress: () -> Void = {}
+    var onSubmit: () -> Void = {}
 
     @State private var isFocused = false
     @State private var isBlurred = false
@@ -146,7 +165,11 @@ public struct InputSearch: View {
                 fontWeight: Font.Weight = .regular,
                 keyboardType: UIKeyboardType = .default,
                 searchIcon: (() -> AnyView)? = nil,
-                placeholderCustomRender: (() -> AnyView)? = nil) {
+                placeholderCustomRender: (() -> AnyView)? = nil,
+                backgroundColor: Color? = nil,
+                clearCondition: (() -> Bool)? = nil,
+                onClearPress: @escaping () -> Void = {},
+                onSubmit: @escaping () -> Void = {}) {
         self._text = text
         self.buttonText = buttonText
         self.showButtonText = showButtonText
@@ -166,6 +189,10 @@ public struct InputSearch: View {
         self.keyboardType = keyboardType
         self.searchIcon = searchIcon
         self.placeholderCustomRender = placeholderCustomRender
+        self.backgroundColor = backgroundColor
+        self.clearCondition = clearCondition
+        self.onClearPress = onClearPress
+        self.onSubmit = onSubmit
         }
 
     /// Convenience initializer mirroring Compose's `InputSearch(inputSearchProps)`.
@@ -189,88 +216,90 @@ public struct InputSearch: View {
             fontWeight: props.fontWeight,
             keyboardType: props.keyboardType,
             searchIcon: props.searchIcon,
-            placeholderCustomRender: props.placeholderCustomRender
+            placeholderCustomRender: props.placeholderCustomRender,
+            backgroundColor: props.backgroundColor,
+            clearCondition: props.clearCondition,
+            onClearPress: props.onClearPress,
+            onSubmit: props.onSubmit
         )
     }
 
 
     public var body: some View {
         let iconColor: Color = disabled ? theme.colors.text.disable : (self.iconColor ?? theme.colors.text.default)
-        VStack(alignment: .leading, spacing: 0) {
+        HStack(spacing: 0) {
             HStack(spacing: 0) {
-                HStack {
-                    if let searchIcon = searchIcon {
-                        searchIcon()
-                    } else {
-                        Image(systemName: "magnifyingglass")
-                            .foregroundColor(theme.colors.text.hint)
-                            .frame(width: 24, height: 24)
-                            .padding(.trailing, Spacing.XS)
-                    }
+                if let searchIcon = searchIcon {
+                    searchIcon()
+                } else {
+                    Icon(source: "navigation_search", size: 24, color: theme.colors.text.hint)
+                        .padding(.trailing, Spacing.XS)
+                }
 
-                    ZStack(alignment: .leading) {
-                        if text.isEmpty {
-                            if let placeholderCustomRender = placeholderCustomRender {
-                                placeholderCustomRender()
-                            } else {
-                                Text(placeholder)
-                                    .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
-                                    .font(.system(size: fontScale(14), weight: fontWeight))
-                                    .ignoreBoldTextSetting()
-                            }
+                ZStack(alignment: .leading) {
+                    if text.isEmpty {
+                        if let placeholderCustomRender = placeholderCustomRender {
+                            placeholderCustomRender()
+                        } else {
+                            MomoText(
+                                placeholder,
+                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                                color: disabled ? theme.colors.text.disable : theme.colors.text.hint,
+                                maxLines: 1
+                            )
                         }
-                        TextField("", text: $text, onEditingChanged: { editing in
-                            isFocused = editing
-                            if editing {
-                                onFocus()
-                            } else if isBlurred {
-                                onBlur()
-                            }
-                            if editing && !isBlurred {
-                                isBlurred = true
-                            }
-                        }, onCommit: {})
-                        .disabled(disabled)
-                        .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.default)
-                        .font(.system(size: fontScale(14), weight: fontWeight))
-                        .ignoreBoldTextSetting()
-                        .keyboardType(keyboardType)
-                        .applyCursorColor(theme.colors.primary)
                     }
-                    
-                    if isFocused && !text.isEmpty {
-                        SwiftButton(action: {
-                            text = ""
-                            // Kotlin's clear icon fires a callback distinct from
-                            // onChangeText (`onClearPress`, not ported here); route
-                            // through onChangeText so clearing isn't a silent no-op.
-                            onChangeText("")
-                        }) {
-                            Image(systemName: "xmark.circle.fill")
-                                .foregroundColor(theme.colors.text.hint)
-                                .frame(width: 16, height: 16)
+                    TextField("", text: $text, onEditingChanged: { editing in
+                        isFocused = editing
+                        if editing {
+                            onFocus()
+                        } else if isBlurred {
+                            onBlur()
                         }
-                        .padding(.leading, Spacing.S)
-                    }
-                    
-                    RenderRightIconSearch(loading: loading, icon: icon, color: iconColor, onClick: onRightIconPressed)
+                        if editing && !isBlurred {
+                            isBlurred = true
+                        }
+                    }, onCommit: onSubmit)
+                    .disabled(disabled)
+                    .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.default)
+                    .kitFont(size: 14, weight: fontWeight)
+                    .ignoreBoldTextSetting()
+                    .keyboardType(keyboardType)
+                    .applyCursorColor(theme.colors.primary)
                 }
-                .padding(.horizontal, Spacing.M)
-                .padding(.vertical, Spacing.S)
-                .background(theme.colors.background.surface)
-                .cornerRadius(Radius.XL)
-                .overlay(
-                    RoundedRectangle(cornerRadius: Radius.XL)
-                        .stroke(getBorderColor(isFocused: isFocused, error: error, disabled: disabled), lineWidth: showBorder ? 1 : 0)
-                )
-                .frame(maxWidth: showButtonText ? .infinity : nil, alignment: .leading)
-                
-                if showButtonText {
-                    SwiftButton(action: onPressButtonText) {
-                        MomoText(buttonText, typography: .actionDefaultBold, color: theme.colors.text.default)
+
+                if clearCondition?() == true || (isFocused && !text.isEmpty) {
+                    SwiftButton(action: {
+                        text = ""
+                        // Compose only fires onClearPress; onChangeText("") is kept so existing
+                        // SwiftUI callers that filter on it still see the clear.
+                        onChangeText("")
+                        onClearPress()
+                    }) {
+                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
                     }
-                    .padding(.leading, Spacing.L)
+                    .padding(.leading, Spacing.XS)
+                }
+
+                RenderRightIconSearch(loading: loading, icon: icon, color: iconColor, onClick: onRightIconPressed)
+            }
+            .padding(.horizontal, Spacing.M)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .frame(height: 36)
+            .background(
+                RoundedRectangle(cornerRadius: Radius.XL)
+                    .fill(backgroundColor ?? theme.colors.background.surface)
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.XL)
+                    .stroke(showBorder ? getBorderColor(isFocused: isFocused, error: error, disabled: disabled) : .clear, lineWidth: 1)
+            )
+
+            if showButtonText {
+                SwiftButton(action: onPressButtonText) {
+                    MomoText(buttonText, typography: .actionDefaultBold, color: theme.colors.text.default)
                 }
+                .padding(.leading, Spacing.L)
             }
         }
     }