Update dependency androidx.compose:compose-bom to v2024.09.00 (#3399)

* Update dependency androidx.compose:compose-bom to v2024.09.00 * Adapt code for changes. * Workaround crash when closing the RTE * Fix broken bottom sheet colors and shape * Fix tons of warnings and deprecations * Fix lint issues * Fix more M3 update changes * Update screenshots --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jorge Martín <jorgem@element.io> Co-authored-by: ElementBot <benoitm+elementbot@element.io> Co-authored-by: ganfra <francoisg@matrix.org> Co-authored-by: ElementBot <android@element.io>
2024-09-26 09:30:20 +02:00
parent 65fd0f59da
commit 0dac449fec
536 changed files with 1187 additions and 1148 deletions
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/ElementLogoAtom.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/ElementLogoAtom.kt
@@ -86,13 +86,13 @@ fun ElementLogoAtom(
                .size(size.logoSize)
                // Do the same double shadow than on Figma...
                .shadow(
-                    elevation = 25.dp,
+                    elevation = 35.dp,
                    clip = false,
                    shape = CircleShape,
                    ambientColor = logoShadowColor,
                )
                .shadow(
-                    elevation = 25.dp,
+                    elevation = 35.dp,
                    clip = false,
                    shape = CircleShape,
                    ambientColor = Color(0x80000000),
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt
@@ -23,7 +23,7 @@ import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.AnnotatedString
-import androidx.compose.ui.text.ExperimentalTextApi
+import androidx.compose.ui.text.LinkAnnotation
 import androidx.compose.ui.text.ParagraphStyle
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextLayoutResult
@@ -37,6 +37,7 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Text
 import kotlinx.collections.immutable.ImmutableMap
 import kotlinx.collections.immutable.persistentMapOf
+import timber.log.Timber

 const val LINK_TAG = "URL"

@@ -65,7 +66,6 @@ fun ClickableLinkText(
    )
 }

-@OptIn(ExperimentalTextApi::class)
@Composable
 fun ClickableLinkText(
    annotatedString: AnnotatedString,
@@ -106,14 +106,18 @@ fun ClickableLinkText(
        ) { offset ->
            layoutResult.value?.let { layoutResult ->
                val position = layoutResult.getOffsetForPosition(offset)
-                val linkUrlAnnotations = annotatedString.getUrlAnnotations(position, position)
-                    .map { AnnotatedString.Range(it.item.url, it.start, it.end, linkAnnotationTag) }
+                val linkUrlAnnotations = annotatedString.getLinkAnnotations(position, position)
+                    .map { AnnotatedString.Range(it.item, it.start, it.end, linkAnnotationTag) }
                val linkStringAnnotations = linkUrlAnnotations +
                    annotatedString.getStringAnnotations(linkAnnotationTag, position, position)
                if (linkStringAnnotations.isEmpty()) {
                    onClick()
                } else {
-                    uriHandler.openUri(linkStringAnnotations.first().item)
+                    when (val annotation = linkStringAnnotations.first().item) {
+                        is LinkAnnotation.Url -> uriHandler.openUri(annotation.url)
+                        is String -> uriHandler.openUri(annotation)
+                        else -> Timber.e("Unknown link annotation: $annotation")
+                    }
                }
            }
        }
@@ -129,7 +133,6 @@ fun ClickableLinkText(
    )
 }

-@OptIn(ExperimentalTextApi::class)
 fun AnnotatedString.linkify(linkStyle: SpanStyle): AnnotatedString {
    val original = this
    val spannable = SpannableString(this.text)
@@ -141,7 +144,7 @@ fun AnnotatedString.linkify(linkStyle: SpanStyle): AnnotatedString {
        for (span in spans) {
            val start = spannable.getSpanStart(span)
            val end = spannable.getSpanEnd(span)
-            if (original.getUrlAnnotations(start, end).isEmpty() && original.getStringAnnotations("URL", start, end).isEmpty()) {
+            if (original.getLinkAnnotations(start, end).isEmpty() && original.getStringAnnotations("URL", start, end).isEmpty()) {
                // Prevent linkifying domains in user or room handles (@user:domain.com, #room:domain.com)
                if (start > 0 && !spannable[start - 1].isWhitespace()) continue
                addStyle(
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/GradientFloatingActionButton.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/GradientFloatingActionButton.kt
@@ -14,9 +14,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.minimumInteractiveComponentSize
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
@@ -92,7 +92,7 @@ fun GradientFloatingActionButton(
                enabled = true,
                onClick = onClick,
                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(color = Color.White)
+                indication = ripple(color = Color.White)
            ),
        contentAlignment = Alignment.Center
    ) {
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/MainActionButton.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/MainActionButton.kt
@@ -16,9 +16,9 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -45,7 +45,7 @@ fun MainActionButton(
    enabled: Boolean = true,
    contentDescription: String = title,
 ) {
-    val ripple = rememberRipple(bounded = false)
+    val ripple = ripple(bounded = false)
    val interactionSource = remember { MutableInteractionSource() }
    Column(
        modifier
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt
@@ -16,11 +16,11 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Text
 import androidx.compose.material3.minimumInteractiveComponentSize
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
@@ -111,7 +111,7 @@ fun SuperButton(
                enabled = enabled,
                onClick = onClick,
                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple()
+                indication = ripple()
            )
            .padding(contentPadding),
        contentAlignment = Alignment.Center
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/keyboard/Keyboard.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/keyboard/Keyboard.kt
@@ -13,8 +13,8 @@ import androidx.compose.foundation.layout.isImeVisible
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.compose.LocalLifecycleOwner

 /**
 * Inspired from https://stackoverflow.com/questions/68847559/how-can-i-detect-keyboard-opening-and-closing-in-jetpack-compose
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/tooltip/PlainTooltip.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/tooltip/PlainTooltip.kt
@@ -7,9 +7,9 @@

 package io.element.android.libraries.designsystem.components.tooltip

-import androidx.compose.material3.CaretScope
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.TooltipDefaults
+import androidx.compose.material3.TooltipScope
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -19,7 +19,7 @@ import androidx.compose.material3.PlainTooltip as M3PlainTooltip

@OptIn(ExperimentalMaterial3Api::class)
@Composable
-fun CaretScope.PlainTooltip(
+fun TooltipScope.PlainTooltip(
    modifier: Modifier = Modifier,
    contentColor: Color = ElementTheme.colors.textOnSolidPrimary,
    containerColor: Color = ElementTheme.colors.bgActionPrimaryRest,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/tooltip/TooltipBox.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/tooltip/TooltipBox.kt
@@ -7,8 +7,8 @@

 package io.element.android.libraries.designsystem.components.tooltip

-import androidx.compose.material3.CaretScope
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TooltipScope
 import androidx.compose.material3.TooltipState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -19,7 +19,7 @@ import androidx.compose.material3.TooltipBox as M3TooltipBox
@Composable
 fun TooltipBox(
    positionProvider: PopupPositionProvider,
-    tooltip: @Composable CaretScope.() -> Unit,
+    tooltip: @Composable TooltipScope.() -> Unit,
    state: TooltipState,
    modifier: Modifier = Modifier,
    focusable: Boolean = true,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/modifiers/ApplyIf.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/modifiers/ApplyIf.kt
@@ -8,8 +8,6 @@
 package io.element.android.libraries.designsystem.modifiers

 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.debugInspectorInfo
-import androidx.compose.ui.platform.inspectable

 /**
 * Applies the [ifTrue] modifier when the [condition] is true, [ifFalse] otherwise.
@@ -18,15 +16,8 @@ fun Modifier.applyIf(
    condition: Boolean,
    ifTrue: Modifier.() -> Modifier,
    ifFalse: (Modifier.() -> Modifier)? = null
-): Modifier = this then inspectable(
-    inspectorInfo = debugInspectorInfo {
-        name = "applyIf"
-        value = condition
-    }
-) {
-    this then when {
-        condition -> ifTrue(Modifier)
-        ifFalse != null -> ifFalse(Modifier)
-        else -> Modifier
-    }
+): Modifier = this then when {
+    condition -> ifTrue(Modifier)
+    ifFalse != null -> ifFalse(Modifier)
+    else -> Modifier
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/modifiers/Blur.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/modifiers/Blur.kt
@@ -48,8 +48,7 @@ fun Modifier.blurredShapeShadow(
    offsetX: Dp = 0.dp,
    offsetY: Dp = 0.dp,
    blurRadius: Dp = 0.dp,
-) = then(
-    drawBehind {
+) = drawBehind {
        drawIntoCanvas { canvas ->
            val path = Path().apply {
                addRoundRect(RoundRect(Rect(Offset.Zero, size), CornerRadius(cornerRadius.toPx())))
@@ -78,8 +77,7 @@ fun Modifier.blurredShapeShadow(
                )
            }
        }
-    }
-)
+}

 fun Modifier.blurCompat(
    radius: Dp,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/modifiers/ClearFocusOnTap.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/modifiers/ClearFocusOnTap.kt
@@ -12,10 +12,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusManager
 import androidx.compose.ui.input.pointer.pointerInput

-fun Modifier.clearFocusOnTap(focusManager: FocusManager): Modifier = then(
-    pointerInput(Unit) {
-        detectTapGestures(onTap = {
-            focusManager.clearFocus()
-        })
-    }
-)
+fun Modifier.clearFocusOnTap(focusManager: FocusManager): Modifier = pointerInput(Unit) {
+    detectTapGestures(onTap = {
+        focusManager.clearFocus()
+    })
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/BottomSheetDragHandle.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/BottomSheetDragHandle.kt
@@ -45,8 +45,8 @@ fun BottomSheetDragHandle(
                .fillMaxWidth()
                .requiredHeight(72.dp)
                .offset(y = 18.dp)
-                .clip(MaterialTheme.shapes.extraLarge)
-                .background(MaterialTheme.colorScheme.background)
+                .clip(MaterialTheme.shapes.large)
+                .background(MaterialTheme.colorScheme.surface)
                .border(0.5.dp, ElementTheme.colors.borderDisabled, MaterialTheme.shapes.extraLarge)
        )

--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/BottomSheetScaffold.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/BottomSheetScaffold.kt
@@ -32,7 +32,7 @@ fun BottomSheetScaffold(
    scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
    sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight,
    sheetShape: Shape = BottomSheetDefaults.ExpandedShape,
-    sheetContainerColor: Color = BottomSheetDefaults.ContainerColor,
+    sheetContainerColor: Color = MaterialTheme.colorScheme.surface,
    sheetContentColor: Color = contentColorFor(sheetContainerColor),
    sheetTonalElevation: Dp = BottomSheetDefaults.Elevation,
    sheetShadowElevation: Dp = BottomSheetDefaults.Elevation,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/CircularProgressIndicator.kt
@@ -9,8 +9,10 @@ package io.element.android.libraries.designsystem.theme.components

 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ProgressIndicatorDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalInspectionMode
@@ -25,12 +27,14 @@ fun CircularProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
+    trackColor: Color = ProgressIndicatorDefaults.circularDeterminateTrackColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth
 ) {
    androidx.compose.material3.CircularProgressIndicator(
        modifier = modifier,
        progress = progress,
        color = color,
+        trackColor = trackColor,
        strokeWidth = strokeWidth,
    )
 }
@@ -39,6 +43,7 @@ fun CircularProgressIndicator(
 fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
+    trackColor: Color = ProgressIndicatorDefaults.circularIndeterminateTrackColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
 ) {
    if (LocalInspectionMode.current) {
@@ -47,12 +52,14 @@ fun CircularProgressIndicator(
            modifier = modifier,
            progress = { 0.75F },
            color = color,
+            trackColor = trackColor,
            strokeWidth = strokeWidth,
        )
    } else {
        androidx.compose.material3.CircularProgressIndicator(
            modifier = modifier,
            color = color,
+            trackColor = trackColor,
            strokeWidth = strokeWidth,
        )
    }
@@ -61,12 +68,18 @@ fun CircularProgressIndicator(
@Preview(group = PreviewGroup.Progress)
@Composable
 internal fun CircularProgressIndicatorPreview() = ElementThemedPreview(vertical = false) {
-    Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+    Column(
+        modifier = Modifier.padding(6.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
        // Indeterminate progress
+        Text("Indeterminate")
        CircularProgressIndicator()
        // Fixed progress
+        Text("Fixed progress")
        CircularProgressIndicator(
-            progress = { 0.90F }
+            progress = { 0.50F }
        )
    }
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheet.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheet.kt
@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SheetState
 import androidx.compose.material3.contentColorFor
 import androidx.compose.material3.rememberModalBottomSheetState
@@ -42,12 +43,12 @@ fun ModalBottomSheet(
    modifier: Modifier = Modifier,
    sheetState: SheetState = rememberModalBottomSheetState(),
    shape: Shape = BottomSheetDefaults.ExpandedShape,
-    containerColor: Color = BottomSheetDefaults.ContainerColor,
+    containerColor: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = if (ElementTheme.isLightTheme) 0.dp else BottomSheetDefaults.Elevation,
    scrimColor: Color = BottomSheetDefaults.ScrimColor,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
-    windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,
+    contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets },
    content: @Composable ColumnScope.() -> Unit,
 ) {
    val safeSheetState = if (LocalInspectionMode.current) sheetStateForPreview() else sheetState
@@ -61,7 +62,7 @@ fun ModalBottomSheet(
        tonalElevation = tonalElevation,
        scrimColor = scrimColor,
        dragHandle = dragHandle,
-        windowInsets = windowInsets,
+        contentWindowInsets = contentWindowInsets,
        content = content,
    )
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/SearchBar.kt
@@ -16,9 +16,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SearchBar
 import androidx.compose.material3.SearchBarColors
 import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.TextFieldColors
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
@@ -56,8 +57,10 @@ fun <T> SearchBar(
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    inactiveColors: SearchBarColors = ElementSearchBarDefaults.inactiveColors(),
-    activeColors: SearchBarColors = ElementSearchBarDefaults.activeColors(),
+    inactiveBarColors: SearchBarColors = ElementSearchBarDefaults.inactiveColors(),
+    activeBarColors: SearchBarColors = ElementSearchBarDefaults.activeColors(),
+    inactiveTextInputColors: TextFieldColors = ElementSearchBarDefaults.inactiveInputFieldColors(),
+    activeTextInputColors: TextFieldColors = ElementSearchBarDefaults.activeInputFieldColors(),
    contentPrefix: @Composable ColumnScope.() -> Unit = {},
    contentSuffix: @Composable ColumnScope.() -> Unit = {},
    resultHandler: @Composable ColumnScope.(T) -> Unit = {},
@@ -69,51 +72,58 @@ fun <T> SearchBar(
        focusManager.clearFocus()
    }

-    androidx.compose.material3.SearchBar(
-        query = query,
-        onQueryChange = onQueryChange,
-        onSearch = { focusManager.clearFocus() },
-        active = active,
-        onActiveChange = onActiveChange,
-        modifier = modifier.padding(horizontal = if (!active) 16.dp else 0.dp),
-        enabled = enabled,
-        placeholder = {
-            Text(text = placeHolderTitle)
-        },
-        leadingIcon = if (showBackButton && active) {
-            { BackButton(onClick = { onActiveChange(false) }) }
-        } else {
-            null
-        },
-        trailingIcon = when {
-            active && query.isNotEmpty() -> {
-                {
-                    IconButton(onClick = { onQueryChange("") }) {
-                        Icon(
-                            imageVector = CompoundIcons.Close(),
-                            contentDescription = stringResource(CommonStrings.action_clear),
-                        )
+    SearchBar(
+        inputField = {
+            SearchBarDefaults.InputField(
+                query = query,
+                onQueryChange = onQueryChange,
+                onSearch = { focusManager.clearFocus() },
+                expanded = active,
+                onExpandedChange = onActiveChange,
+                enabled = enabled,
+                placeholder = {
+                    Text(text = placeHolderTitle)
+                },
+                leadingIcon = if (showBackButton && active) {
+                    { BackButton(onClick = { onActiveChange(false) }) }
+                } else {
+                    null
+                },
+                trailingIcon = when {
+                    active && query.isNotEmpty() -> {
+                        {
+                            IconButton(onClick = { onQueryChange("") }) {
+                                Icon(
+                                    imageVector = CompoundIcons.Close(),
+                                    contentDescription = stringResource(CommonStrings.action_clear),
+                                )
+                            }
+                        }
                    }
-                }
-            }

-            !active -> {
-                {
-                    Icon(
-                        imageVector = CompoundIcons.Search(),
-                        contentDescription = stringResource(CommonStrings.action_search),
-                        tint = MaterialTheme.colorScheme.tertiary,
-                    )
-                }
-            }
+                    !active -> {
+                        {
+                            Icon(
+                                imageVector = CompoundIcons.Search(),
+                                contentDescription = stringResource(CommonStrings.action_search),
+                                tint = ElementTheme.materialColors.tertiary,
+                            )
+                        }
+                    }

-            else -> null
+                    else -> null
+                },
+                interactionSource = interactionSource,
+                colors = if (active) activeTextInputColors else inactiveTextInputColors,
+            )
        },
+        expanded = active,
+        onExpandedChange = onActiveChange,
+        modifier = modifier.padding(horizontal = if (!active) 16.dp else 0.dp),
        shape = shape,
-        colors = if (active) activeColors else inactiveColors,
+        colors = if (active) activeBarColors else inactiveBarColors,
        tonalElevation = tonalElevation,
        windowInsets = windowInsets,
-        interactionSource = interactionSource,
        content = {
            contentPrefix()
            when (resultState) {
@@ -128,7 +138,7 @@ fun <T> SearchBar(
                    Text(
                        text = stringResource(CommonStrings.common_no_results),
                        textAlign = TextAlign.Center,
-                        color = MaterialTheme.colorScheme.tertiary,
+                        color = ElementTheme.materialColors.tertiary,
                        modifier = Modifier.fillMaxWidth()
                    )
                }
@@ -147,28 +157,34 @@ object ElementSearchBarDefaults {
    @Composable
    fun inactiveColors() = SearchBarDefaults.colors(
        containerColor = ElementTheme.materialColors.surfaceVariant,
-        inputFieldColors = TextFieldDefaults.colors(
-            unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
-            focusedPlaceholderColor = ElementTheme.colors.textDisabled,
-            unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
-            focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
-            unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
-            focusedTrailingIconColor = MaterialTheme.colorScheme.primary,
-        )
+        dividerColor = ElementTheme.materialColors.outline,
+    )
+
+    @Composable
+    fun inactiveInputFieldColors() = TextFieldDefaults.colors(
+        unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
+        focusedPlaceholderColor = ElementTheme.colors.textDisabled,
+        unfocusedLeadingIconColor = ElementTheme.materialColors.primary,
+        focusedLeadingIconColor = ElementTheme.materialColors.primary,
+        unfocusedTrailingIconColor = ElementTheme.materialColors.primary,
+        focusedTrailingIconColor = ElementTheme.materialColors.primary,
    )

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun activeColors() = SearchBarDefaults.colors(
        containerColor = Color.Transparent,
-        inputFieldColors = TextFieldDefaults.colors(
-            unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
-            focusedPlaceholderColor = ElementTheme.colors.textDisabled,
-            unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
-            focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
-            unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
-            focusedTrailingIconColor = MaterialTheme.colorScheme.primary,
-        )
+        dividerColor = ElementTheme.materialColors.outline,
+    )
+
+    @Composable
+    fun activeInputFieldColors() = TextFieldDefaults.colors(
+        unfocusedPlaceholderColor = ElementTheme.colors.textDisabled,
+        focusedPlaceholderColor = ElementTheme.colors.textDisabled,
+        unfocusedLeadingIconColor = ElementTheme.materialColors.primary,
+        focusedLeadingIconColor = ElementTheme.materialColors.primary,
+        unfocusedTrailingIconColor = ElementTheme.materialColors.primary,
+        focusedTrailingIconColor = ElementTheme.materialColors.primary,
    )
 }

--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt
@@ -36,6 +36,7 @@ import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.architecture.coverage.ExcludeFromCoverage
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
@@ -64,7 +65,12 @@ fun TextField(
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.shape,
-    colors: TextFieldColors = TextFieldDefaults.colors()
+    colors: TextFieldColors = TextFieldDefaults.colors(
+        unfocusedContainerColor = ElementTheme.colors.bgSubtleSecondary,
+        focusedContainerColor = ElementTheme.colors.bgSubtleSecondary,
+        disabledContainerColor = ElementTheme.colors.bgSubtleSecondary,
+        errorContainerColor = ElementTheme.colors.bgSubtleSecondary,
+    )
 ) {
    androidx.compose.material3.TextField(
        value = value,
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/bottomsheet/CustomBottomSheetScaffold.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/bottomsheet/CustomBottomSheetScaffold.kt
@@ -70,7 +70,7 @@ fun CustomBottomSheetScaffold(
    sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight,
    sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth,
    sheetShape: Shape = BottomSheetDefaults.ExpandedShape,
-    sheetContainerColor: Color = BottomSheetDefaults.ContainerColor,
+    sheetContainerColor: Color = Color.White,
    sheetContentColor: Color = contentColorFor(sheetContainerColor),
    sheetTonalElevation: Dp = BottomSheetDefaults.Elevation,
    sheetShadowElevation: Dp = BottomSheetDefaults.Elevation,
@@ -367,6 +367,12 @@ private class MapDraggableAnchors<T>(private val anchors: Map<T, Float>) : Dragg
        return anchors == other.anchors
    }

+    override fun forEach(block: (anchor: T, position: Float) -> Unit) {
+        for (anchor in anchors) {
+            block(anchor.key, anchor.value)
+        }
+    }
+
    override fun hashCode() = 31 * anchors.hashCode()

    override fun toString() = "MapDraggableAnchors($anchors)"
@@ -381,7 +387,7 @@ internal fun ConsumeSwipeWithinBottomSheetBoundsNestedScrollConnection(
 ): NestedScrollConnection = object : NestedScrollConnection {
    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        val delta = available.toFloat()
-        return if (delta < 0 && source == NestedScrollSource.Drag) {
+        return if (delta < 0 && source == NestedScrollSource.UserInput) {
            sheetState.anchoredDraggableState.dispatchRawDelta(delta).toOffset()
        } else {
            Offset.Zero
@@ -393,7 +399,7 @@ internal fun ConsumeSwipeWithinBottomSheetBoundsNestedScrollConnection(
        available: Offset,
        source: NestedScrollSource
    ): Offset {
-        return if (source == NestedScrollSource.Drag) {
+        return if (source == NestedScrollSource.UserInput) {
            sheetState.anchoredDraggableState.dispatchRawDelta(available.toFloat()).toOffset()
        } else {
            Offset.Zero
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/bottomsheet/CustomSheetState.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/bottomsheet/CustomSheetState.kt
@@ -7,7 +7,9 @@

 package io.element.android.libraries.designsystem.theme.components.bottomsheet

+import androidx.compose.animation.core.DecayAnimationSpec
 import androidx.compose.animation.core.SpringSpec
+import androidx.compose.animation.core.exponentialDecay
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.gestures.animateTo
 import androidx.compose.foundation.gestures.snapTo
@@ -201,14 +203,12 @@ constructor(
     * gesture interaction or another programmatic interaction like a [animateTo] or [snapTo] call.
     *
     * @param targetValue The target value of the animation
-     * @param velocity The velocity of the animation
     */
    @OptIn(ExperimentalFoundationApi::class)
    internal suspend fun animateTo(
        targetValue: SheetValue,
-        velocity: Float = anchoredDraggableState.lastVelocity
    ) {
-        anchoredDraggableState.animateTo(targetValue, velocity)
+        anchoredDraggableState.animateTo(targetValue)
    }

    /**
@@ -235,7 +235,8 @@ constructor(
    @OptIn(ExperimentalFoundationApi::class)
    internal var anchoredDraggableState = androidx.compose.foundation.gestures.AnchoredDraggableState(
        initialValue = initialValue,
-        animationSpec = AnchoredDraggableDefaults.AnimationSpec,
+        snapAnimationSpec = AnchoredDraggableDefaults.SnapAnimationSpec,
+        decayAnimationSpec = AnchoredDraggableDefaults.DecayAnimationSpec,
        confirmValueChange = confirmValueChange,
        positionalThreshold = { with(requireDensity()) { 56.dp.toPx() } },
        velocityThreshold = { with(requireDensity()) { 125.dp.toPx() } }
@@ -298,5 +299,10 @@ internal object AnchoredDraggableDefaults {
    @get:ExperimentalMaterial3Api
    @Suppress("OPT_IN_MARKER_ON_WRONG_TARGET")
    @ExperimentalMaterial3Api
-    val AnimationSpec = SpringSpec<Float>()
+    val SnapAnimationSpec = SpringSpec<Float>()
+
+    @get:ExperimentalMaterial3Api
+    @Suppress("OPT_IN_MARKER_ON_WRONG_TARGET")
+    @ExperimentalMaterial3Api
+    val DecayAnimationSpec = exponentialDecay<Float>()
 }
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/OnLifecycleEvent.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/utils/OnLifecycleEvent.kt
@@ -10,10 +10,10 @@ package io.element.android.libraries.designsystem.utils
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.compose.LocalLifecycleOwner

@Composable
 fun OnLifecycleEvent(onEvent: (owner: LifecycleOwner, event: Lifecycle.Event) -> Unit) {
--- a/libraries/maplibre-compose/src/main/kotlin/io/element/android/libraries/maplibre/compose/MapLibreMap.kt
+++ b/libraries/maplibre-compose/src/main/kotlin/io/element/android/libraries/maplibre/compose/MapLibreMap.kt
@@ -32,10 +32,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
+import androidx.lifecycle.compose.LocalLifecycleOwner
 import kotlinx.collections.immutable.ImmutableMap
 import kotlinx.collections.immutable.persistentMapOf
 import kotlinx.coroutines.awaitCancellation
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableAvatarView.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableAvatarView.kt
@@ -17,8 +17,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -56,7 +56,7 @@ fun EditableAvatarView(
                .clickable(
                    interactionSource = remember { MutableInteractionSource() },
                    onClick = onAvatarClick,
-                    indication = rememberRipple(bounded = false),
+                    indication = ripple(bounded = false),
                )
                .testTag(TestTags.editAvatar)
        ) {
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedRoom.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedRoom.kt
@@ -15,8 +15,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -73,7 +73,7 @@ fun SelectedRoom(
                .size(20.dp)
                .align(Alignment.TopEnd)
                .clickable(
-                    indication = rememberRipple(),
+                    indication = ripple(),
                    interactionSource = remember { MutableInteractionSource() },
                    onClick = { onRemoveRoom(roomSummary) }
                ),
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
@@ -15,7 +15,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -72,7 +72,7 @@ fun SelectedUser(
                    .size(20.dp)
                    .align(Alignment.TopEnd)
                    .clickable(
-                        indication = rememberRipple(),
+                        indication = ripple(),
                        interactionSource = remember { MutableInteractionSource() },
                        onClick = { onUserRemove(matrixUser) }
                    ),
--- a/libraries/qrcode/src/main/kotlin/io/element/android/libraries/qrcode/QrCodeCameraView.kt
+++ b/libraries/qrcode/src/main/kotlin/io/element/android/libraries/qrcode/QrCodeCameraView.kt
@@ -30,9 +30,9 @@ import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.content.ContextCompat
+import androidx.lifecycle.compose.LocalLifecycleOwner
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Text
 import kotlinx.coroutines.delay
--- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt
+++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt
@@ -16,8 +16,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -94,7 +94,7 @@ private fun EditingModeView(
                    enabled = true,
                    onClick = onResetComposerMode,
                    interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(bounded = false)
+                    indication = ripple(bounded = false)
                ),
        )
    }
@@ -124,7 +124,7 @@ private fun ReplyToModeView(
                    enabled = true,
                    onClick = onResetComposerMode,
                    interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(bounded = false)
+                    indication = ripple(bounded = false)
                ),
        )
    }
--- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt
+++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt
@@ -14,7 +14,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -53,7 +53,7 @@ internal fun FormattingOption(
            .clickable(
                onClick = onClick,
                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(
+                indication = ripple(
                    bounded = false,
                    radius = 20.dp,
                ),
--- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/markdown/MarkdownEditText.kt
+++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/markdown/MarkdownEditText.kt
@@ -8,6 +8,7 @@
 package io.element.android.libraries.textcomposer.components.markdown

 import android.content.Context
+import android.view.View
 import androidx.appcompat.widget.AppCompatEditText

 internal class MarkdownEditText(
@@ -36,4 +37,8 @@ internal class MarkdownEditText(
            onSelectionChangeListener?.invoke(selStart, selEnd)
        }
    }
+
+    override fun focusSearch(direction: Int): View? {
+        return null
+    }
 }