Networking Sign Up Pane (Native): Add back auto-focus

financial-connections/detekt-baseline.xml

@@ -15,9 +15,6 @@
     <ID>MagicNumber:ConsentLogoHeader.kt$3</ID>
     <ID>MagicNumber:ConsentLogoHeader.kt$4</ID>
     <ID>MagicNumber:ConsentLogoHeader.kt$5</ID>
-    <ID>MagicNumber:ConsumerSessionExtensions.kt$10</ID>
-    <ID>MagicNumber:ConsumerSessionExtensions.kt$5</ID>
-    <ID>MagicNumber:ConsumerSessionExtensions.kt$7</ID>
     <ID>MagicNumber:InstitutionPickerScreen.kt$0.5f</ID>
     <ID>MagicNumber:InstitutionPickerScreen.kt$0.75f</ID>
     <ID>MagicNumber:InstitutionPickerScreen.kt$10</ID>

financial-connections/src/main/java/com/stripe/android/financialconnections/features/networkinglinksignup/NetworkingLinkSignupScreen.kt

@@ -134,15 +134,24 @@ private fun NetworkingLinkSignupLoaded(
 ) {
     val scrollState = rememberScrollState()
     val phoneNumberFocusRequester = remember { FocusRequester() }
+    val emailFocusRequester = remember { FocusRequester() }
 
+    // When pane loads, focus on email field if it's empty
+    LaunchedEffect(true) {
+        if (payload.emailController.fieldValue.value.isEmpty()) {
+            emailFocusRequester.requestFocus()
+        }
+    }
+    // Everytime full form is shown, scroll to bottom and focus on phone number field (if not empty)
     LaunchedEffect(showFullForm) {
-        if (showFullForm) {
+        if (showFullForm && payload.phoneController.fieldValue.value.isEmpty()) {
             scrollState.animateScrollToBottom()
             phoneNumberFocusRequester.requestFocus()
         }
     }
 
     Layout(
+        applyImePadding = false,
         scrollState = scrollState,
         body = {
             Title(payload.content.title)
@@ -158,6 +167,7 @@ private fun NetworkingLinkSignupLoaded(
 
             EmailSection(
                 showFullForm = showFullForm,
+                focusRequester = emailFocusRequester,
                 loading = lookupAccountSync is Loading,
                 emailController = payload.emailController,
                 enabled = true,
@@ -272,7 +282,8 @@ internal fun EmailSection(
     enabled: Boolean,
     emailController: TextFieldController,
     showFullForm: Boolean,
-    loading: Boolean
+    loading: Boolean,
+    focusRequester: FocusRequester = remember { FocusRequester() }
 ) {
     var focused by remember { mutableStateOf(false) }
     StripeThemeForConnections {
@@ -284,6 +295,7 @@ internal fun EmailSection(
         ) {
             TextFieldSection(
                 modifier = Modifier.onFocusChanged { focused = it.isFocused },
+                focusRequester = focusRequester,
                 isSelected = focused,
                 textFieldController = emailController,
                 imeAction = if (showFullForm) ImeAction.Next else ImeAction.Done,

financial-connections/src/main/java/com/stripe/android/financialconnections/ui/FinancialConnectionsSheetNativeActivity.kt

@@ -5,9 +5,11 @@ import android.content.Context
 import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
+import androidx.activity.SystemBarStyle
 import androidx.activity.addCallback
 import androidx.activity.compose.BackHandler
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.material.ModalBottomSheetValue
@@ -19,6 +21,8 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.lifecycle.DefaultLifecycleObserver
@@ -93,6 +97,10 @@ internal class FinancialConnectionsSheetNativeActivity : AppCompatActivity() {
 
         viewModel.activityRetainedComponent.inject(this)
 
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.dark(Color.Transparent.toArgb()),
+            navigationBarStyle = SystemBarStyle.dark(Color.Transparent.toArgb())
+        )
         observeBackPress()
         observeBackgroundEvents()
         observeViewEffects()

financial-connections/src/main/java/com/stripe/android/financialconnections/ui/ModifierExtensions.kt

@@ -0,0 +1,16 @@
+package com.stripe.android.financialconnections.ui
+
+import androidx.compose.ui.Modifier
+
+/**
+ * Conditionally applies the given [Modifier] functions based on the [condition].
+ */
+internal inline fun Modifier.conditional(
+    condition: Boolean,
+    ifTrue: Modifier.() -> Modifier,
+    ifFalse: Modifier.() -> Modifier = { this },
+): Modifier = if (condition) {
+    then(ifTrue(Modifier))
+} else {
+    then(ifFalse(Modifier))
+}

financial-connections/src/main/java/com/stripe/android/financialconnections/ui/theme/Layout.kt

@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
@@ -36,6 +37,7 @@ import com.stripe.android.financialconnections.ui.components.DragHandle
 import com.stripe.android.financialconnections.ui.components.FinancialConnectionsButton
 import com.stripe.android.financialconnections.ui.components.FinancialConnectionsScaffold
 import com.stripe.android.financialconnections.ui.components.FinancialConnectionsTopAppBar
+import com.stripe.android.financialconnections.ui.conditional
 import com.stripe.android.financialconnections.ui.theme.FinancialConnectionsTheme.typography
 
 /**
@@ -47,6 +49,7 @@ import com.stripe.android.financialconnections.ui.theme.FinancialConnectionsThem
  * @param inModal whether the layout is being used in a modal or not. If true, the [body] won't expand to fill the
  * available content.
  * @param showFooterShadowWhenScrollable whether to show a shadow at the top of the footer when the body is scrollable.
+ * @param applyImePadding whether to apply IME padding. When false, footer will be covered by the keyboard.
  * @param scrollState the [ScrollState] to use for the scrollable body.
  */
 @Composable
@@ -56,6 +59,7 @@ internal fun Layout(
     inModal: Boolean = false,
     loading: Boolean = false,
     showPillOnSlowLoad: Boolean = false,
+    applyImePadding: Boolean = true,
     verticalArrangement: Arrangement.Vertical = Arrangement.Top,
     showFooterShadowWhenScrollable: Boolean = true,
     scrollState: ScrollState = rememberScrollState(),
@@ -66,6 +70,7 @@ internal fun Layout(
         canScrollForward = scrollState.canScrollForward,
         canScrollBackward = scrollState.canScrollBackward,
         inModal = inModal,
+        applyImePadding = applyImePadding,
         loading = loading,
         showPillOnSlowLoad = showPillOnSlowLoad,
         showFooterShadowWhenScrollable = showFooterShadowWhenScrollable,
@@ -101,6 +106,7 @@ internal fun Layout(
 internal fun LazyLayout(
     modifier: Modifier = Modifier,
     bodyPadding: PaddingValues = PaddingValues(horizontal = 24.dp),
+    applyImePadding: Boolean = true,
     inModal: Boolean = false,
     loading: Boolean = false,
     showPillOnSlowLoad: Boolean = false,
@@ -115,6 +121,7 @@ internal fun LazyLayout(
         canScrollBackward = lazyListState.canScrollBackward,
         inModal = inModal,
         loading = loading,
+        applyImePadding = applyImePadding,
         showPillOnSlowLoad = showPillOnSlowLoad,
         showFooterShadowWhenScrollable = showFooterShadowWhenScrollable,
         modifier = modifier,
@@ -137,6 +144,7 @@ private fun LayoutScaffold(
     showPillOnSlowLoad: Boolean,
     inModal: Boolean,
     showFooterShadowWhenScrollable: Boolean,
+    applyImePadding: Boolean,
     modifier: Modifier = Modifier,
     footer: (@Composable () -> Unit)?,
     body: @Composable () -> Unit,
@@ -148,8 +156,15 @@ private fun LayoutScaffold(
     }
 
     Column(
-        modifier
-            .also { if (inModal.not()) it.fillMaxSize() }
+        modifier = modifier
+            .conditional(
+                condition = inModal.not(),
+                ifTrue = { fillMaxSize() }
+            )
+            .conditional(
+                condition = applyImePadding,
+                ifTrue = { imePadding() }
+            )
     ) {
         if (inModal) {
             DragHandle(

paymentsheet/src/main/java/com/stripe/android/common/ui/ElementsBottomSheetLayout.kt

@@ -3,6 +3,7 @@ package com.stripe.android.common.ui
 import android.os.Build
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ModalBottomSheetValue.Expanded
 import androidx.compose.runtime.Composable
@@ -56,7 +57,8 @@ internal fun ElementsBottomSheetLayout(
     StripeBottomSheetLayout(
         state = state,
         layoutInfo = layoutInfo,
-        modifier = modifier,
+        modifier = modifier
+            .imePadding(),
         onDismissed = onDismissed,
         sheetContent = content,
     )

stripe-ui-core/api/stripe-ui-core.api

@@ -243,7 +243,7 @@ public final class com/stripe/android/uicore/elements/TextFieldStateConstants$Va
 public final class com/stripe/android/uicore/elements/TextFieldUIKt {
 	public static final fun AnimatedIcons (Ljava/util/List;ZLandroidx/compose/runtime/Composer;I)V
 	public static final fun TextField-qRf7idA (Lcom/stripe/android/uicore/elements/TextFieldController;ZILandroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function1;IILandroidx/compose/ui/focus/FocusRequester;Landroidx/compose/runtime/Composer;II)V
-	public static final fun TextFieldSection-vbMXUkU (Landroidx/compose/ui/Modifier;Lcom/stripe/android/uicore/elements/TextFieldController;IZZLjava/lang/Integer;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
+	public static final fun TextFieldSection-B9MLdtY (Landroidx/compose/ui/Modifier;Landroidx/compose/ui/focus/FocusRequester;Lcom/stripe/android/uicore/elements/TextFieldController;IZZLjava/lang/Integer;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
 }
 
 public final class com/stripe/android/uicore/elements/bottomsheet/ComposableSingletons$StripeBottomSheetLayoutKt {

stripe-ui-core/src/main/java/com/stripe/android/uicore/elements/TextFieldUI.kt

@@ -88,6 +88,7 @@ private fun defaultAutofillEventReporter(): (String) -> Unit {
 @Composable
 fun TextFieldSection(
     modifier: Modifier = Modifier,
+    focusRequester: FocusRequester = remember { FocusRequester() },
     textFieldController: TextFieldController,
     imeAction: ImeAction,
     enabled: Boolean,
@@ -109,6 +110,7 @@ fun TextFieldSection(
     Section(title = sectionTitle, error = sectionErrorString, isSelected = isSelected) {
         TextField(
             textFieldController = textFieldController,
+            focusRequester = focusRequester,
             enabled = enabled,
             imeAction = imeAction,
             modifier = modifier,

stripe-ui-core/src/main/java/com/stripe/android/uicore/elements/bottomsheet/StripeBottomSheetLayout.kt

@@ -2,7 +2,7 @@ package com.stripe.android.uicore.elements.bottomsheet
 
 import androidx.annotation.RestrictTo
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ModalBottomSheetLayout
@@ -47,8 +47,8 @@ fun StripeBottomSheetLayout(
 
     ModalBottomSheetLayout(
         modifier = modifier
-            .statusBarsPadding()
-            .imePadding(),
+            .navigationBarsPadding()
+            .statusBarsPadding(),
         scrimColor = layoutInfo.scrimColor,
         sheetBackgroundColor = layoutInfo.sheetBackgroundColor,
         sheetElevation = 0.dp,