Remove Modifier.composed

fluent/src/commonMain/kotlin/com/konyaco/fluent/background/Layer.kt

@@ -4,24 +4,24 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.constrainHeight
+import androidx.compose.ui.unit.constrainWidth
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.offset
 import com.konyaco.fluent.FluentTheme
 import com.konyaco.fluent.LocalContentColor
 import com.konyaco.fluent.ProvideTextStyle
@@ -59,14 +59,20 @@ fun Layer(
 }
 
 private fun Modifier.layer(elevation: Dp, shape: Shape, border: BorderStroke?, outsideBorder: Boolean, circular: Boolean, color: Color, innerShape: Shape) = this.shadow(elevation, shape, clip = false)
-    .composed { if (border != null) border(border, shape) else this }
-    .composed {
+    .then(if (border != null) Modifier.border(border, shape) else Modifier)
+    .layout { measurable, constraints ->
         // TODO: A better way to implement outside border
-        val density = LocalDensity.current
-        if (outsideBorder) {
-            if (circular) padding(calcCircularPadding(density))
-            else padding(calcPadding(density))
-        } else this
+        val paddingValue = when {
+            outsideBorder && circular -> calcCircularPadding(this)
+            outsideBorder -> calcPadding(this)
+            else -> 0.dp
+        }.roundToPx()
+        val placeable = measurable.measure(constraints.offset(-paddingValue * 2, -paddingValue * 2))
+        val width = constraints.constrainWidth(placeable.width + paddingValue * 2)
+        val height = constraints.constrainHeight(placeable.height + paddingValue * 2)
+        layout(width, height) {
+            placeable.place(paddingValue, paddingValue)
+        }
     }
     .background(color = color, shape = innerShape)
     .clip(shape = innerShape)

fluent/src/commonMain/kotlin/com/konyaco/fluent/component/Button.kt

@@ -12,7 +12,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
@@ -132,10 +131,7 @@ private fun Button(
                     interactionSource = interaction,
                     indication = null
                 )
-                .composed {
-                    if (iconOnly) this
-                    else padding(horizontal = 12.dp)
-                },
+                .then(if (iconOnly) Modifier else Modifier.padding(horizontal = 12.dp)),
             horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
             verticalAlignment = Alignment.CenterVertically,
             content = content

fluent/src/commonMain/kotlin/com/konyaco/fluent/component/CheckBox.kt

@@ -8,14 +8,12 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsHoveredAsState
 import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.dp
@@ -40,10 +38,10 @@ fun CheckBox(
     val pressed by interactionSource.collectIsPressedAsState()
 
     Row(
-        modifier = modifier.composed {
+        modifier = modifier.then(
             if (label != null) Modifier.defaultMinSize(minWidth = 120.dp)
             else Modifier
-        }.clickable(
+        ).clickable(
             role = Role.Checkbox,
             indication = null,
             interactionSource = interactionSource

fluent/src/commonMain/kotlin/com/konyaco/fluent/component/RadioButton.kt

@@ -15,7 +15,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.unit.dp
 import com.konyaco.fluent.FluentTheme
 import com.konyaco.fluent.animation.FluentDuration
@@ -35,10 +34,10 @@ fun RadioButton(
     val hovered by interactionSource.collectIsHoveredAsState()
     val pressed by interactionSource.collectIsPressedAsState()
 
-    Row(modifier.composed {
-        if (label != null) defaultMinSize(minWidth = 120.dp)
-        else this
-    }.clickable(interactionSource, null) {
+    Row(modifier.then(
+        if (label != null) Modifier.defaultMinSize(minWidth = 120.dp)
+        else Modifier
+    ).clickable(interactionSource, null) {
         onClick?.invoke()
     }) {
         val fillColor by animateColorAsState(
@@ -90,7 +89,10 @@ fun RadioButton(
                 Layer(
                     modifier = Modifier.size(if (size == 0.dp || !selected) size else size + 2.dp), // TODO: Remove this 2dp if outside border is provided
                     color = FluentTheme.colors.text.onAccent.primary,
-                    border = if (selected) BorderStroke(1.dp, FluentTheme.colors.borders.circle) else null,
+                    border = if (selected) BorderStroke(
+                        1.dp,
+                        FluentTheme.colors.borders.circle
+                    ) else null,
                     shape = CircleShape,
                     outsideBorder = true,
                     content = {}

fluent/src/commonMain/kotlin/com/konyaco/fluent/component/SideNav.kt

@@ -20,7 +20,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.graphicsLayer
@@ -327,12 +326,13 @@ private fun Indicator(modifier: Modifier, display: Boolean) {
     Box(modifier.width(3.dp).then(animationModifier).background(FluentTheme.colors.fillAccent.default, CircleShape))
 }
 
+@Composable
 private fun Modifier.indicatorOffsetAnimation(
     size: Dp,
     indicatorState: MutableTransitionState<Boolean>,
     selectedPosition: MutableTransitionState<Float>,
     isVertical: Boolean = true
-) = composed {
+): Modifier {
     val fraction by updateTransition(indicatorState).animateFloat(
         transitionSpec = {
             tween(FluentDuration.VeryLongDuration , easing = FluentEasing.PointToPointEasing)
@@ -348,7 +348,7 @@ private fun Modifier.indicatorOffsetAnimation(
             )
         }) { it }
     }
-    layout { measurable, constraints ->
+    return layout { measurable, constraints ->
         val stickSize = size.toPx()
         val containerSize = if (isVertical) {
             constraints.maxHeight

fluent/src/commonMain/kotlin/com/konyaco/fluent/component/Slider.kt

@@ -32,7 +32,6 @@ import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalDensity
@@ -94,33 +93,35 @@ private fun Slider(
             return valueToFraction(offset.x, radius, constraints.minWidth - radius).coerceIn(0f, 1f)
         }
 
-        Box(Modifier.composed {
-            var offset by remember { mutableStateOf(Offset.Zero) }
-            draggable(
-                state = rememberDraggableState {
-                    offset = Offset(x = offset.x + it, y = offset.y)
-                    currentOnProgressChange(calcProgress(offset))
-                },
-                interactionSource = interactionSource,
-                onDragStarted = {
+        var offset by remember { mutableStateOf(Offset.Zero) }
+        Box(
+            modifier = Modifier
+                .draggable(
+                    state = rememberDraggableState {
+                        offset = Offset(x = offset.x + it, y = offset.y)
+                        currentOnProgressChange(calcProgress(offset))
+                    },
+                    interactionSource = interactionSource,
+                    onDragStarted = {
+                        dragging = true
+                        offset = it
+                    },
+                    onDragStopped = {
+                        dragging = false
+                        onValueChangeFinished?.invoke()
+                    },
+                    orientation = Orientation.Horizontal
+                )
+                .pointerInput(Unit) {
+                awaitEachGesture {
+                    val down = awaitFirstDown()
                     dragging = true
-                    offset = it
-                },
-                onDragStopped = {
+                    currentOnProgressChange(calcProgress(down.position))
+                    waitForUpOrCancellation()
                     dragging = false
-                    onValueChangeFinished?.invoke()
-                },
-                orientation = Orientation.Horizontal
-            )
-        }.pointerInput(Unit) {
-            awaitEachGesture {
-                val down = awaitFirstDown()
-                dragging = true
-                currentOnProgressChange(calcProgress(down.position))
-                waitForUpOrCancellation()
-                dragging = false
-            }
-        }, contentAlignment = Alignment.CenterStart) {
+                }
+            }, contentAlignment = Alignment.CenterStart
+        ) {
             Rail()
             Track(progress, width)
             Thumb(width, progress, dragging)
@@ -129,7 +130,8 @@ private fun Slider(
 }
 
 @Stable
-private fun fractionToValue(fraction: Float, start: Float, end: Float): Float = (end - start) * fraction + start
+private fun fractionToValue(fraction: Float, start: Float, end: Float): Float =
+    (end - start) * fraction + start
 
 @Stable
 private fun valueToFraction(

fluent/src/commonMain/kotlin/com/konyaco/fluent/component/TextField.kt

@@ -17,7 +17,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.geometry.Offset
@@ -57,26 +56,7 @@ fun TextField(
         }
         BasicTextField(
             modifier = modifier.defaultMinSize(160.dp, 32.dp)
-                .clip(RoundedCornerShape(4.dp))
-                .composed {
-                    if (enabled) {
-                        val height by rememberUpdatedState(with(LocalDensity.current) {
-                            (if (focused) 2.dp else 1.dp).toPx()
-                        })
-                        val fillColor by rememberUpdatedState(
-                            if (focused) FluentTheme.colors.fillAccent.default
-                            else FluentTheme.colors.stroke.controlStrong.default
-                        )
-                        drawWithContent {
-                            drawContent()
-                            drawRect(
-                                color = fillColor,
-                                topLeft = Offset(0f, size.height - height),
-                                size = Size(size.width, height)
-                            )
-                        }
-                    } else this
-                },
+                .clip(RoundedCornerShape(4.dp)),
             value = value,
             onValueChange = onValueChange,
             textStyle = LocalTextStyle.current.copy(
@@ -94,7 +74,8 @@ fun TextField(
             interactionSource = interactionSource,
             decorationBox = { innerTextField ->
                 Layer(
-                    modifier = Modifier.hoverable(interactionSource),
+                    modifier = Modifier.hoverable(interactionSource)
+                        .drawBottomLine(enabled) { focused },
                     shape = RoundedCornerShape(4.dp),
                     border = BorderStroke(
                         1.dp,
@@ -118,4 +99,25 @@ fun TextField(
             }
         )
     }
+}
+
+@Composable
+private fun Modifier.drawBottomLine(enabled: Boolean, focused: () -> Boolean): Modifier {
+    return if (enabled) {
+        val height by rememberUpdatedState(with(LocalDensity.current) {
+            (if (focused()) 2.dp else 1.dp).toPx()
+        })
+        val fillColor by rememberUpdatedState(
+            if (focused()) FluentTheme.colors.fillAccent.default
+            else FluentTheme.colors.stroke.controlStrong.default
+        )
+        drawWithContent {
+            drawContent()
+            drawRect(
+                color = fillColor,
+                topLeft = Offset(0f, size.height - height),
+                size = Size(size.width, height)
+            )
+        }
+    } else this
 }