Complete implementing and fix the segmented button components

ref: https://developer.android.com/develop/ui/compose/components/segmented-button

Author: ShreckYe

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt

@@ -376,29 +376,25 @@ fun Material3(/*modifier: Modifier = Modifier*/
         // Segmented Buttons - Single select with Selection enum
         var selectedSegment by remember { mutableStateOf(Selection.A) }
         SingleChoiceSegmentedButtonRow {
-            Selection.entries.forEach { selection ->
+            Selection.entries.forEachIndexed { index, selection ->
                 SegmentedButton(
-                    selected = selectedSegment == selection,
-                    onClick = { selectedSegment = selection },
-                    label = { Text(selection.name) }
+                    selectedSegment == selection,
+                    { selectedSegment = selection },
+                    SegmentedButtonDefaultShapeArgs(index, Selection.entries.size),
+                    label = selection.name
                 )
             }
         }
 
         // Segmented Buttons - Multi-select
-        var selectedOptions by remember { mutableStateOf(setOf<Selection>()) }
+        val isIndexSelected = remember { mutableStateListOf(false, false, false) }
         MultiChoiceSegmentedButtonRow {
-            Selection.entries.forEach { selection ->
+            Selection.entries.forEachIndexed { index, selection ->
                 SegmentedButton(
-                    selected = selection in selectedOptions,
-                    onClick = {
-                        selectedOptions = if (selection in selectedOptions) {
-                            selectedOptions - selection
-                        } else {
-                            selectedOptions + selection
-                        }
-                    },
-                    label = { Text(selection.name) }
+                    isIndexSelected[index],
+                    { isIndexSelected[index] = it },
+                    SegmentedButtonDefaultShapeArgs(index, Selection.entries.size),
+                    label = selection.name
                 )
             }
         }

material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/SegmentedButton.kt

@@ -44,10 +44,16 @@ expect fun MultiChoiceSegmentedButtonRow(
     content: @Composable MultiChoiceSegmentedButtonRowScope.() -> Unit
 )
 
+/**
+ * For `SegmentedButtonDefaults.itemShape` on Compose UI.
+ */
+class SegmentedButtonDefaultShapeArgs(val index: Int, val count: Int)
+
 /**
  * Scope for the content of a single-choice segmented button row.
  */
 expect class SingleChoiceSegmentedButtonRowScope {
+
     /**
      * Material Design segmented button.
      *
@@ -64,10 +70,11 @@ expect class SingleChoiceSegmentedButtonRowScope {
     fun SegmentedButton(
         selected: Boolean,
         onClick: () -> Unit,
+        defaultShapeArgs: SegmentedButtonDefaultShapeArgs,
         modifier: Modifier = Modifier,
         enabled: Boolean = true,
         icon: @Composable (() -> Unit)? = null,
-        label: @Composable () -> Unit
+        label: String //@Composable () -> Unit
     )
 }
 
@@ -77,11 +84,12 @@ expect class SingleChoiceSegmentedButtonRowScope {
 expect class MultiChoiceSegmentedButtonRowScope {
     @Composable
     fun SegmentedButton(
-        selected: Boolean,
-        onClick: () -> Unit,
+        checked: Boolean,
+        onCheckedChange: (Boolean) -> Unit,
+        defaultShapeArgs: SegmentedButtonDefaultShapeArgs,
         modifier: Modifier = Modifier,
         enabled: Boolean = true,
         icon: @Composable (() -> Unit)? = null,
-        label: @Composable () -> Unit
+        label: String //@Composable () -> Unit
     )
 }

material3/src/composeUiMain/kotlin/com/huanshankeji/compose/material3/SegmentedButton.composeUi.kt

@@ -2,9 +2,9 @@ package com.huanshankeji.compose.material3
 
 import androidx.compose.material3.SegmentedButton
 import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.Dp
-import com.huanshankeji.compose.foundation.layout.Row
 import com.huanshankeji.compose.ui.Modifier
 
 @Composable
@@ -24,43 +24,61 @@ actual fun MultiChoiceSegmentedButtonRow(
     space: Dp?,
     content: @Composable MultiChoiceSegmentedButtonRowScope.() -> Unit
 ) =
-    Row(modifier = modifier) {
-        MultiChoiceSegmentedButtonRowScope().content()
+    androidx.compose.material3.MultiChoiceSegmentedButtonRow(
+        modifier.platformModifier,
+        space ?: SegmentedButtonDefaults.BorderWidth
+    ) {
+        MultiChoiceSegmentedButtonRowScope(this).content()
     }
 
 actual class SingleChoiceSegmentedButtonRowScope(val platformScope: androidx.compose.material3.SingleChoiceSegmentedButtonRowScope) {
     @Composable
     actual fun SegmentedButton(
         selected: Boolean,
         onClick: () -> Unit,
+        defaultShapeArgs: SegmentedButtonDefaultShapeArgs,
         modifier: Modifier,
         enabled: Boolean,
         icon: @Composable (() -> Unit)?,
-        label: @Composable () -> Unit
+        label: String //@Composable () -> Unit
     ) =
         platformScope.SegmentedButton(
             selected,
             onClick,
             SegmentedButtonDefaults.itemShape(
-                index = TODO(),
-                count = TODO()
+                defaultShapeArgs.index,
+                defaultShapeArgs.count
             ),
             modifier.platformModifier,
             enabled,
-            icon = TODO(),
-            label = label
-        )
+            icon = icon ?: { SegmentedButtonDefaults.Icon(selected) },
+        ) {
+            Text(label)
+        }
 }
 
-actual class MultiChoiceSegmentedButtonRowScope {
+actual class MultiChoiceSegmentedButtonRowScope(val platformScope: androidx.compose.material3.MultiChoiceSegmentedButtonRowScope) {
     @Composable
     actual fun SegmentedButton(
-        selected: Boolean,
-        onClick: () -> Unit,
+        checked: Boolean,
+        onCheckedChange: (Boolean) -> Unit,
+        defaultShapeArgs: SegmentedButtonDefaultShapeArgs,
         modifier: Modifier,
         enabled: Boolean,
         icon: @Composable (() -> Unit)?,
-        label: @Composable () -> Unit
+        label: String //@Composable () -> Unit
     ) =
-        TODO() as Unit
+        platformScope.SegmentedButton(
+            checked,
+            onCheckedChange,
+            SegmentedButtonDefaults.itemShape(
+                defaultShapeArgs.index,
+                defaultShapeArgs.count
+            ),
+            modifier.platformModifier,
+            enabled,
+            icon = icon ?: { SegmentedButtonDefaults.Icon(checked) },
+        ) {
+            Text(label)
+        }
 }

material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/SegmentedButton.js.kt

@@ -5,7 +5,6 @@ import androidx.compose.ui.unit.Dp
 import com.huanshankeji.compose.html.material3.MaterialWebLabsApi
 import com.huanshankeji.compose.html.material3.MdOutlinedSegmentedButton
 import com.huanshankeji.compose.html.material3.MdOutlinedSegmentedButtonSet
-import com.huanshankeji.compose.html.material3.MdSegmentedButtonScope
 import com.huanshankeji.compose.html.material3.MdSegmentedButtonScope.Slot
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.toAttrs
@@ -37,67 +36,70 @@ actual fun MultiChoiceSegmentedButtonRow(
         MultiChoiceSegmentedButtonRowScope(this).content()
     }
 
-// TODO check their implementations and consider unifying their duplicate implementations
+@MaterialWebLabsApi
+@Composable
+private fun CommonSegmentedButton(
+    selected: Boolean,
+    onClick: () -> Unit,
+    defaultShapeArgs: SegmentedButtonDefaultShapeArgs, // not used here
+    modifier: Modifier,
+    enabled: Boolean,
+    icon: @Composable (() -> Unit)?,
+    label: String //@Composable () -> Unit
+) {
+    val hasIcon = (icon != null).isTrueOrNull()
+    MdOutlinedSegmentedButton(
+        enabled.isFalseOrNull(),
+        selected.isTrueOrNull(),
+        label,
+        hasIcon,
+        hasIcon,
+        modifier.toAttrs {
+            onClick { onClick() }
+        }
+    ) {
+        icon?.let { iconContent ->
+            Div({ slot(Slot.Icon) }) {
+                iconContent()
+            }
+        }
+        /*
+        // For `label: @Composable () -> Unit` by Copilot. Might not work.
+        // Render label in the default slot
+        label()
+        */
+    }
+}
 
 actual class SingleChoiceSegmentedButtonRowScope(val elementScope: ElementScope<HTMLElement>) {
     @MaterialWebLabsApi
     @Composable
     actual fun SegmentedButton(
         selected: Boolean,
         onClick: () -> Unit,
+        defaultShapeArgs: SegmentedButtonDefaultShapeArgs, // not used here
         modifier: Modifier,
         enabled: Boolean,
         icon: @Composable (() -> Unit)?,
-        label: @Composable () -> Unit
-    ) {
-        MdOutlinedSegmentedButton(
-            disabled = enabled.isFalseOrNull(),
-            selected = selected.isTrueOrNull(),
-            hasIcon = (icon != null).isTrueOrNull(),
-            attrs = modifier.toAttrs {
-                this.onClick { onClick() }
-            }
-        ) {
-            icon?.let { iconContent ->
-                Div({
-                    slot(Slot.Icon)
-                }) {
-                    iconContent()
-                }
-            }
-            // Render label in the default slot
-            label()
-        }
-    }
+        label: String //@Composable () -> Unit
+    ) =
+        CommonSegmentedButton(selected, onClick, defaultShapeArgs, modifier, enabled, icon, label)
 }
 
 actual class MultiChoiceSegmentedButtonRowScope(val elementScope: ElementScope<HTMLElement>) {
     @MaterialWebLabsApi
     @Composable
     actual fun SegmentedButton(
-        selected: Boolean,
-        onClick: () -> Unit,
+        checked: Boolean,
+        onCheckedChange: (Boolean) -> Unit,
+        defaultShapeArgs: SegmentedButtonDefaultShapeArgs, // not used here
         modifier: Modifier,
         enabled: Boolean,
         icon: @Composable (() -> Unit)?,
-        label: @Composable () -> Unit
-    ) {
-        MdOutlinedSegmentedButton(
-            disabled = enabled.isFalseOrNull(),
-            selected = selected.isTrueOrNull(),
-            hasIcon = (icon != null).isTrueOrNull(),
-            attrs = modifier.toAttrs {
-                this.onClick { onClick() }
-            }
-        ) {
-            icon?.let { iconContent ->
-                Div({
-                    slot(Slot.Icon)
-                }) {
-                    iconContent()
-                }
-            }
-            label()
-        }
-    }
+        label: String //@Composable () -> Unit
+    ) =
+        CommonSegmentedButton(
+            checked, { onCheckedChange(!checked) },
+            defaultShapeArgs, modifier, enabled, icon, label
+        )
 }