modal sheet: fix transition with a default bg

Author: hrach

demo/src/main/kotlin/dev/hrach/navigation/demo/NavHost.kt

@@ -1,5 +1,6 @@
 package dev.hrach.navigation.demo
 
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
@@ -34,6 +35,6 @@ internal fun NavHost(
 		modalSheet<Destinations.Modal2> { Modal2() }
 		bottomSheet<Destinations.BottomSheet> { BottomSheet(navController) }
 	}
-	ModalSheetHost(modalSheetNavigator)
+	ModalSheetHost(modalSheetNavigator, containerColor = MaterialTheme.colorScheme.background)
 	BottomSheetHost(bottomSheetNavigator)
 }

demo/src/main/kotlin/dev/hrach/navigation/demo/screens/Modal1.kt

@@ -1,14 +1,14 @@
 package dev.hrach.navigation.demo.screens
 
 import android.annotation.SuppressLint
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -42,19 +42,22 @@ private fun Modal1(
 	navigate: (Any) -> Unit,
 	bottomSheetResult: Int,
 ) {
-	Column(
-		Modifier
-			.fillMaxSize()
-			.background(MaterialTheme.colorScheme.surface)
-			.windowInsetsPadding(WindowInsets.systemBars),
+	Surface(
+		color = MaterialTheme.colorScheme.inverseSurface,
 	) {
-		Text("Modal 1")
-		OutlinedButton(onClick = { navigate(Destinations.Modal2) }) {
-			Text("Modal 2")
+		Column(
+			modifier = Modifier
+				.fillMaxSize()
+				.windowInsetsPadding(WindowInsets.systemBars),
+		) {
+			Text("Modal 1")
+			OutlinedButton(onClick = { navigate(Destinations.Modal2) }) {
+				Text("Modal 2")
+			}
+			OutlinedButton(onClick = { navigate(Destinations.BottomSheet) }) {
+				Text("BottomSheet")
+			}
+			Text("BottomSheetResult: $bottomSheetResult")
 		}
-		OutlinedButton(onClick = { navigate(Destinations.BottomSheet) }) {
-			Text("BottomSheet")
-		}
-		Text("BottomSheetResult: $bottomSheetResult")
 	}
 }

modalsheet/src/main/kotlin/dev/hrach/navigation/modalsheet/ModalSheetHost.kt

@@ -10,6 +10,7 @@ import androidx.compose.animation.core.tween
 import androidx.compose.animation.core.updateTransition
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
@@ -26,6 +27,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshots.SnapshotStateList
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.window.SecureFlagPolicy
 import androidx.lifecycle.Lifecycle
@@ -39,6 +41,7 @@ import kotlinx.coroutines.CancellationException
 @Composable
 public fun ModalSheetHost(
 	modalSheetNavigator: ModalSheetNavigator,
+	containerColor: Color,
 	modifier: Modifier = Modifier,
 	enterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> @JvmSuppressWildcards EnterTransition) =
 		{ fadeIn(animationSpec = tween(700)) },
@@ -134,7 +137,8 @@ public fun ModalSheetHost(
 			securePolicy = securePolicy,
 		) {
 			transition.AnimatedContent(
-				modifier = modifier,
+				modifier = modifier
+					.background(if (transition.targetState == null) Color.Unspecified else containerColor),
 				contentAlignment = Alignment.TopStart,
 				transitionSpec = block@{
 					val initialState = initialState ?: return@block ContentTransform(

readme.md

@@ -37,7 +37,7 @@ NavHost(
 	modalSheet<Destinations.Modal> { Modal(navController) }
 	bottomSheet<Destinations.BottomSheet> { BottomSheet(navController) }
 }
-ModalSheetHost(modalSheetNavigator)
+ModalSheetHost(modalSheetNavigator, containerColor = MaterialTheme.colorScheme.background)
 BottomSheetHost(bottomSheetNavigator)
 ```