add slot APIs to GroupHeader

reference https://github.com/JetBrains/jewel/pull/720

Signed-off-by: Ivan Morgillo <imorgillo@gmail.com>

closes https://github.com/JetBrains/intellij-community/pull/2907

(cherry picked from commit c9471fa2cb6161c9336efd87d23d5bf950c7510f)


(cherry picked from commit 4c402d03fe4f3d85f7bb3502f503e04c11ea53eb)

IJ-MR-155570

GitOrigin-RevId: ef04ea775b1c90be808eb6fabaae9a15068c1885

platform/jewel/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt

@@ -1,11 +1,15 @@
 package org.jetbrains.jewel.samples.standalone.view.component
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.hoverable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -17,22 +21,56 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.input.pointer.PointerIcon
+import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.unit.dp
 import org.jetbrains.jewel.foundation.Stroke
 import org.jetbrains.jewel.foundation.modifier.border
 import org.jetbrains.jewel.foundation.theme.JewelTheme
 import org.jetbrains.jewel.ui.component.GroupHeader
+import org.jetbrains.jewel.ui.component.Icon
 import org.jetbrains.jewel.ui.component.OutlinedButton
 import org.jetbrains.jewel.ui.component.RadioButtonRow
 import org.jetbrains.jewel.ui.component.Text
+import org.jetbrains.jewel.ui.icons.AllIconsKeys
 import org.jetbrains.jewel.ui.theme.colorPalette
+import org.jetbrains.skiko.Cursor
 
 @Composable
 internal fun Borders() {
     GroupHeader("Group header")
     Text("This is a group header example")
 
-    Spacer(Modifier.height(16.dp))
+    Spacer(Modifier.height(8.dp))
+
+    var open by remember { mutableStateOf(false) }
+    val interactionSource = remember { MutableInteractionSource() }
+    GroupHeader(
+        text = "Group header with startComponent",
+        modifier =
+            Modifier.clickable(indication = null, interactionSource = interactionSource) { open = !open }
+                .hoverable(interactionSource)
+                .pointerHoverIcon(PointerIcon(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))),
+        startComponent = {
+            if (open) {
+                Icon(AllIconsKeys.General.ChevronDown, "Chevron")
+            } else {
+                Icon(AllIconsKeys.General.ChevronRight, "Chevron")
+            }
+        },
+    )
+    if (open) {
+        Text("Surprise!", Modifier.padding(start = 24.dp))
+    }
+
+    Spacer(Modifier.height(8.dp))
+
+    GroupHeader(
+        "Group header with both components",
+        startComponent = { Icon(AllIconsKeys.General.ChevronRight, "Chevron") },
+        endComponent = { Text("End component") },
+    )
+    Spacer(Modifier.height(8.dp))
 
     GroupHeader("Border alignment/expand")
     var borderAlignment by remember { mutableStateOf(Stroke.Alignment.Center) }

platform/jewel/ui/api-dump-unreviewed.txt

@@ -286,7 +286,7 @@ f:org.jetbrains.jewel.ui.component.FixedCursorPoint
 - b:<init>(J,androidx.compose.ui.Alignment,F,I,kotlin.jvm.internal.DefaultConstructorMarker):V
 - positionProvider-9KIMszo(J,androidx.compose.runtime.Composer,I):androidx.compose.ui.window.PopupPositionProvider
 f:org.jetbrains.jewel.ui.component.GroupHeaderKt
-- sf:GroupHeader-cf5BqRc(java.lang.String,androidx.compose.ui.Modifier,J,org.jetbrains.jewel.ui.component.styling.GroupHeaderStyle,androidx.compose.runtime.Composer,I,I):V
+- sf:GroupHeader(java.lang.String,androidx.compose.ui.Modifier,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,org.jetbrains.jewel.ui.component.styling.GroupHeaderStyle,androidx.compose.ui.text.TextStyle,androidx.compose.runtime.Composer,I,I):V
 f:org.jetbrains.jewel.ui.component.IconActionButtonKt
 - sf:IconActionButton(androidx.compose.ui.graphics.painter.Painter,java.lang.String,kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,Z,org.jetbrains.jewel.ui.component.styling.IconButtonStyle,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.runtime.Composer,I,I):V
 - sf:IconActionButton(androidx.compose.ui.graphics.painter.Painter,java.lang.String,kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,Z,org.jetbrains.jewel.ui.component.styling.IconButtonStyle,org.jetbrains.jewel.ui.component.styling.TooltipStyle,androidx.compose.ui.Modifier,androidx.compose.foundation.TooltipPlacement,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I,I):V

platform/jewel/ui/api/ui.api

@@ -386,7 +386,7 @@ public final class org/jetbrains/jewel/ui/component/FixedCursorPoint : androidx/
 }
 
 public final class org/jetbrains/jewel/ui/component/GroupHeaderKt {
-	public static final fun GroupHeader-cf5BqRc (Ljava/lang/String;Landroidx/compose/ui/Modifier;JLorg/jetbrains/jewel/ui/component/styling/GroupHeaderStyle;Landroidx/compose/runtime/Composer;II)V
+	public static final fun GroupHeader (Ljava/lang/String;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lorg/jetbrains/jewel/ui/component/styling/GroupHeaderStyle;Landroidx/compose/ui/text/TextStyle;Landroidx/compose/runtime/Composer;II)V
 }
 
 public final class org/jetbrains/jewel/ui/component/IconActionButtonKt {

platform/jewel/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/GroupHeader.kt

@@ -1,31 +1,66 @@
 package org.jetbrains.jewel.ui.component
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
 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.text.TextStyle
+import androidx.compose.ui.unit.dp
+import org.jetbrains.jewel.foundation.theme.JewelTheme
 import org.jetbrains.jewel.ui.Orientation
 import org.jetbrains.jewel.ui.component.styling.GroupHeaderStyle
 import org.jetbrains.jewel.ui.component.styling.LocalGroupHeaderStyle
 
+/**
+ * A component that displays a header for a group of items, with a title and optional slots on both sides.
+ *
+ * **Guidelines:** [on IJP SDK webhelp](https://plugins.jetbrains.com/docs/intellij/group-header.html)
+ *
+ * **Usage example:**
+ * [`Borders.kt`](https://github.com/JetBrains/intellij-community/blob/master/platform/jewel/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt)
+ *
+ * **Swing equivalent:**
+ * [`TitledSeparator`](https://github.com/JetBrains/intellij-community/blob/master/platform/platform-api/src/com/intellij/ui/TitledSeparator.java)
+ *
+ * @param text The text to display in the header.
+ * @param modifier The modifier to apply to the header.
+ * @param startComponent The component to display on the left side of the header.
+ * @param endComponent The component to display on the right side of the header.
+ * @param style The style to apply to the header.
+ * @see com.intellij.ui.TitledSeparator
+ */
 @Composable
 public fun GroupHeader(
     text: String,
     modifier: Modifier = Modifier,
-    textColor: Color = Color.Unspecified,
+    startComponent: (@Composable () -> Unit)? = null,
+    endComponent: (@Composable () -> Unit)? = null,
     style: GroupHeaderStyle = LocalGroupHeaderStyle.current,
+    textStyle: TextStyle = JewelTheme.defaultTextStyle,
 ) {
-    Row(modifier, verticalAlignment = Alignment.CenterVertically) {
-        Text(text, color = textColor)
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        if (startComponent != null) {
+            Box(Modifier.size(16.dp)) { startComponent() }
+        }
+        Text(text, style = textStyle)
 
         Divider(
             orientation = Orientation.Horizontal,
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier.weight(1f),
             color = style.colors.divider,
             thickness = style.metrics.dividerThickness,
             startIndent = style.metrics.indent,
         )
+        if (endComponent != null) {
+            Row(Modifier.height(16.dp)) { endComponent() }
+        }
     }
 }