[JEWEL-1184] Add DefaultSplitButton Without Jewel's Dropdown

Author: DanielSouzaBertoldi

platform/jewel/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/popup/JDialogRenderer.kt

@@ -298,19 +298,38 @@ private fun JPopupImpl(
         // - The current properties allow for the popup to be dismissed on click outside;
         // - The event must be a "WINDOW_LOST_FOCUS" event;
         // - The window receiving the focus should not be a child of this dialog;
+        // - The window receiving the focus must not be the parent window: when the user clicks back in the parent
+        //   window, WINDOW_LOST_FOCUS fires during MOUSE_PRESSED (before Compose processes the event). Dismissing
+        //   here would cause the popup to close and immediately reopen when a toggle button (e.g., chevron) is
+        //   clicked. Instead, we handle this case on MOUSE_RELEASED via invokeLater (see below), which ensures
+        //   Compose has already processed the click before the dismiss runs.
         fun shouldDismissPopup(event: WindowEvent, dialog: Window, currentProperties: PopupProperties): Boolean =
             event.window == dialog &&
                 currentProperties.focusable &&
                 currentProperties.dismissOnClickOutside &&
                 event.id == WindowEvent.WINDOW_LOST_FOCUS &&
-                !dialog.isAncestorOf(event.oppositeWindow)
+                !dialog.isAncestorOf(event.oppositeWindow) &&
+                event.oppositeWindow != window
 
         val listener = AWTEventListener { event ->
             when (event) {
                 is MouseEvent -> {
                     if (shouldDismissPopup(event, dialog, currentProperties)) {
                         currentOnDismissRequest?.invoke()
                     }
+                    // For focusable popups, WINDOW_LOST_FOCUS is skipped when the user clicks in the parent window
+                    // (see shouldDismissPopup(WindowEvent) above). We handle dismissal on MOUSE_RELEASED instead.
+                    // invokeLater queues after the current event finishes dispatching, so Compose has already
+                    // processed the click (e.g., a toggle button's onClick) by the time the dismiss runs.
+                    if (
+                        currentProperties.focusable &&
+                            currentProperties.dismissOnClickOutside &&
+                            event.id == MouseEvent.MOUSE_RELEASED &&
+                            !dialog.isAncestorOf(event.component) &&
+                            !dialog.bounds.contains(event.locationOnScreen)
+                    ) {
+                        SwingUtilities.invokeLater { currentOnDismissRequest?.invoke() }
+                    }
                 }
                 is WindowEvent -> {
                     if (shouldDismissPopup(event, dialog, currentProperties)) {

platform/jewel/samples/showcase/src/main/kotlin/org/jetbrains/jewel/samples/showcase/components/Buttons.kt

@@ -2,6 +2,8 @@
 
 package org.jetbrains.jewel.samples.showcase.components
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -13,6 +15,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
@@ -22,8 +25,16 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.positionInParent
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.round
+import androidx.compose.ui.window.PopupProperties
+import androidx.compose.ui.window.rememberComponentRectPositionProvider
 import org.jetbrains.jewel.foundation.theme.JewelTheme
 import org.jetbrains.jewel.foundation.util.JewelLogger
 import org.jetbrains.jewel.ui.component.ActionButton
@@ -39,6 +50,7 @@ import org.jetbrains.jewel.ui.component.MenuScope
 import org.jetbrains.jewel.ui.component.OutlinedButton
 import org.jetbrains.jewel.ui.component.OutlinedSlimButton
 import org.jetbrains.jewel.ui.component.OutlinedSplitButton
+import org.jetbrains.jewel.ui.component.Popup
 import org.jetbrains.jewel.ui.component.SelectableIconActionButton
 import org.jetbrains.jewel.ui.component.SelectableIconButton
 import org.jetbrains.jewel.ui.component.Text
@@ -54,6 +66,7 @@ import org.jetbrains.jewel.ui.painter.badge.DotBadgeShape
 import org.jetbrains.jewel.ui.painter.hints.Badge
 import org.jetbrains.jewel.ui.painter.hints.Selected
 import org.jetbrains.jewel.ui.painter.hints.Stroke
+import org.jetbrains.jewel.ui.theme.defaultSplitButtonStyle
 import org.jetbrains.jewel.ui.theme.outlinedSplitButtonStyle
 import org.jetbrains.jewel.ui.theme.transparentIconButtonStyle
 
@@ -399,6 +412,16 @@ private fun SplitButtons() {
                 },
             )
 
+            val defaultExpandedOutline =
+                with(LocalDensity.current) {
+                    JewelTheme.defaultSplitButtonStyle.button.metrics.focusOutlineExpand.roundToPx()
+                }
+            SplitButtonWithComposePopup(defaultExpandedOutline) { mod, expanded, onChange ->
+                DefaultSplitButton(modifier = mod, onClick = {}, expanded = expanded, onExpandedChange = onChange) {
+                    SingleLineText("Split button w/ Compose Popup")
+                }
+            }
+
             Tooltip(
                 tooltip = {
                     Text("This button is intentionally too narrow, to check that it works when space-constrained.")
@@ -420,6 +443,16 @@ private fun SplitButtons() {
                 menuContent = { blankNotice() },
                 modifier = Modifier.height(JewelTheme.outlinedSplitButtonStyle.button.metrics.minSize.height * 1.25f),
             )
+
+            val outlinedExpandedOutline =
+                with(LocalDensity.current) {
+                    JewelTheme.outlinedSplitButtonStyle.button.metrics.focusOutlineExpand.roundToPx()
+                }
+            SplitButtonWithComposePopup(outlinedExpandedOutline) { mod, expanded, onChange ->
+                OutlinedSplitButton(modifier = mod, onClick = {}, expanded = expanded, onExpandedChange = onChange) {
+                    SingleLineText("Outlined Split button w/ Compose Popup")
+                }
+            }
         }
     }
 }
@@ -432,3 +465,40 @@ private fun MenuScope.blankNotice() {
 private fun SingleLineText(text: String) {
     Text(text, overflow = TextOverflow.Ellipsis, maxLines = 1)
 }
+
+@Composable
+private fun SplitButtonWithComposePopup(
+    expandedOutlinePx: Int,
+    button: @Composable (modifier: Modifier, expanded: Boolean, onExpandedChange: (Boolean) -> Unit) -> Unit,
+) {
+    var showPopup by remember { mutableStateOf(false) }
+    var position by remember { mutableStateOf(IntOffset.Zero) }
+
+    Box {
+        button(
+            Modifier.onGloballyPositioned { position = it.positionInParent().round() },
+            showPopup,
+            { showPopup = it },
+        )
+        if (showPopup) {
+            Popup(
+                popupPositionProvider =
+                    rememberComponentRectPositionProvider(
+                        offset = DpOffset(position.x.dp, (position.y + expandedOutlinePx).dp)
+                    ),
+                onDismissRequest = { showPopup = false },
+                properties = PopupProperties(focusable = true),
+            ) {
+                Box(
+                    modifier =
+                        Modifier.background(JewelTheme.globalColors.panelBackground, RoundedCornerShape(8.dp))
+                            .border(3.dp, JewelTheme.globalColors.outlines.warning, RoundedCornerShape(8.dp))
+                            .padding(16.dp),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Text("Compose Popup")
+                }
+            }
+        }
+    }
+}

platform/jewel/ui/api-dump.txt

@@ -138,12 +138,14 @@ f:org.jetbrains.jewel.ui.component.ButtonKt
 - sf:DefaultSlimButton(kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ButtonStyle,androidx.compose.ui.text.TextStyle,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 - bsf:DefaultSplitButton(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
 - bsf:DefaultSplitButton(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
+- sf:DefaultSplitButton(kotlin.jvm.functions.Function0,Z,kotlin.jvm.functions.Function1,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 - sf:DefaultSplitButton-zTVvCW4(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,F,F,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I,I):V
 - sf:DefaultSplitButton-zTVvCW4(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function2,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,F,F,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I,I):V
 - sf:OutlinedButton(kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ButtonStyle,androidx.compose.ui.text.TextStyle,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 - sf:OutlinedSlimButton(kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ButtonStyle,androidx.compose.ui.text.TextStyle,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 - bsf:OutlinedSplitButton(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
 - bsf:OutlinedSplitButton(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function0,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
+- sf:OutlinedSplitButton(kotlin.jvm.functions.Function0,Z,kotlin.jvm.functions.Function1,androidx.compose.ui.Modifier,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 - sf:OutlinedSplitButton-zTVvCW4(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,F,F,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I,I):V
 - sf:OutlinedSplitButton-zTVvCW4(kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function2,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,F,F,Z,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.SplitButtonStyle,androidx.compose.ui.text.TextStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I,I):V
 f:org.jetbrains.jewel.ui.component.ButtonState