Make it possible to make a Material list match its parent size on JS DOM, adding a matchPositionRelativeParentJsOnly modifier and improving TopAppBarScaffold on JS again

Author: ShreckYe

compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.androidxCommon.kt

@@ -0,0 +1,6 @@
+package com.huanshankeji.compose.foundation.ext
+
+import com.huanshankeji.compose.ui.Modifier
+
+actual fun Modifier.matchPositionRelativeParentJsOnly(): Modifier =
+    this

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt

@@ -0,0 +1,5 @@
+package com.huanshankeji.compose.foundation.ext
+
+import com.huanshankeji.compose.ui.Modifier
+
+expect fun Modifier.matchPositionRelativeParentJsOnly(): Modifier

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsDom.js.kt

@@ -0,0 +1,19 @@
+package com.huanshankeji.compose.foundation.ext
+
+import com.huanshankeji.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.attrsModifier
+import org.jetbrains.compose.web.css.*
+
+actual fun Modifier.matchPositionRelativeParentJsOnly(): Modifier =
+    platformModify {
+        attrsModifier {
+            style {
+                position(Position.Absolute)
+                left(0.px)
+                top(0.px)
+                right(0.px)
+                bottom(0.px)
+                // Also considering using `inset` (https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
+            }
+        }
+    }

compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt

@@ -113,21 +113,22 @@ actual fun TopAppBarScaffold(
         }
 
     Column(Modifier.fillMaxSize()) {
-        Div(Modifier.weight(1f).fillMaxWidth().toAttrs {
-            style { position(Position.Relative) }
-        }) {
-            PrimitiveTopAppBarScaffold(
-                title,
-                topAppBarModifier,
-                navigationIcon,
-                actions,
-                Modifier
-            ) {
+        PrimitiveTopAppBarScaffold(
+            title,
+            topAppBarModifier,
+            navigationIcon,
+            actions,
+            Modifier.weight(1f).fillMaxWidth()
+        ) {
+            Div(Modifier.fillMaxSize().toAttrs {
+                style { position(Position.Relative) }
+            }) {
                 // see `ScaffoldLayoutWithMeasureFix`
                 val innerPadding = PaddingValues()
                 content(innerPadding)
+
+                floatingActionButton?.let { fabWithPosition(it) }
             }
-            floatingActionButton?.let { fabWithPosition(it) }
         }
 
         bottomBar?.invoke()

compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.kt

@@ -1,6 +1,7 @@
 package com.huanshankeji.compose.material3.lazy.ext
 
 import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.foundation.ext.matchPositionRelativeParentJsOnly
 import com.huanshankeji.compose.material.icons.Icon
 import com.huanshankeji.compose.material3.ext.toNullableContentWithModifier
 import com.huanshankeji.compose.material3.ext.toNullableTextWithModifier
@@ -67,6 +68,11 @@ class ListItemComponents(
     )
 }
 
+/**
+ * On JS DOM, if there isn't a parent with a fixed height
+ * and you want the list height to be constraint to the available space of the parent instead of expanding the parent,
+ * set "position:relative;" on the parent element and use [Modifier.matchPositionRelativeParentJsOnly].
+ */
 @Composable
 expect fun List(modifier: Modifier = Modifier, content: ListScope.() -> Unit)