[JEWEL-1029] [JEWEL-1230] Reimplement Dropdown component

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

@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.input.rememberTextFieldState
@@ -32,15 +33,19 @@ import org.jetbrains.jewel.ui.component.DefaultButton
 import org.jetbrains.jewel.ui.component.EditableComboBox
 import org.jetbrains.jewel.ui.component.EditableListComboBox
 import org.jetbrains.jewel.ui.component.GroupHeader
+import org.jetbrains.jewel.ui.component.Icon
 import org.jetbrains.jewel.ui.component.ListComboBox
+import org.jetbrains.jewel.ui.component.MenuComboBox
 import org.jetbrains.jewel.ui.component.PopupManager
 import org.jetbrains.jewel.ui.component.SimpleListItem
 import org.jetbrains.jewel.ui.component.SpeedSearchArea
 import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.search.SpeedSearchableComboBox
+import org.jetbrains.jewel.ui.component.separator
 import org.jetbrains.jewel.ui.disabledAppearance
 import org.jetbrains.jewel.ui.icon.IconKey
 import org.jetbrains.jewel.ui.icons.AllIconsKeys
+import org.jetbrains.jewel.ui.theme.comboBoxStyle
 
 private val stringItems =
     listOf(
@@ -90,6 +95,9 @@ public fun ComboBoxes(modifier: Modifier = Modifier) {
         GroupHeader("Custom combo box content")
         CustomComboBoxes()
 
+        GroupHeader("Menu combo box (dropdown with menu items)")
+        MenuComboBoxes()
+
         GroupHeader("Dynamic content")
         DynamicListComboBox()
 
@@ -318,6 +326,135 @@ private fun CustomComboBoxes() {
     }
 }
 
+@Composable
+private fun MenuComboBoxes() {
+    val comboBoxStyle = JewelTheme.comboBoxStyle
+
+    FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+        Column(Modifier.weight(1f).widthIn(min = 125.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("Simple menu items")
+            var selectedItem by remember { mutableIntStateOf(0) }
+
+            MenuComboBox(
+                labelContent = {
+                    Text(
+                        text = stringItems[selectedItem],
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        style = JewelTheme.defaultTextStyle,
+                        modifier = Modifier.padding(comboBoxStyle.metrics.contentPadding),
+                    )
+                },
+                modifier = Modifier.widthIn(max = 200.dp).fillMaxWidth(),
+                content = {
+                    stringItems.forEachIndexed { index, item ->
+                        selectableItem(selected = false, onClick = { selectedItem = index }) { Text(item) }
+                    }
+                },
+            )
+        }
+
+        Column(Modifier.weight(1f).widthIn(min = 125.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("With icons and separators")
+            var selectedLanguage by remember { mutableIntStateOf(0) }
+
+            MenuComboBox(
+                labelContent = {
+                    Row(
+                        modifier = Modifier.padding(comboBoxStyle.metrics.contentPadding),
+                        horizontalArrangement = Arrangement.spacedBy(6.dp),
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        Icon(
+                            key = languageOptions[selectedLanguage].icon,
+                            contentDescription = languageOptions[selectedLanguage].name,
+                            modifier = Modifier.size(16.dp),
+                        )
+                        Text(
+                            text = languageOptions[selectedLanguage].name,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                        )
+                    }
+                },
+                modifier = Modifier.widthIn(max = 200.dp).fillMaxWidth(),
+                content = {
+                    languageOptions.take(3).forEachIndexed { index, lang ->
+                        selectableItem(selected = false, onClick = { selectedLanguage = index }, iconKey = lang.icon) {
+                            Text(lang.name)
+                        }
+                    }
+                    separator()
+                    languageOptions.drop(3).forEachIndexed { index, lang ->
+                        val actualIndex = index + 3
+                        selectableItem(
+                            selected = false,
+                            onClick = { selectedLanguage = actualIndex },
+                            iconKey = lang.icon,
+                        ) {
+                            Text(lang.name)
+                        }
+                    }
+                },
+            )
+        }
+
+        Column(Modifier.weight(1f).widthIn(min = 125.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("With submenu")
+            var selectedAction by remember { mutableIntStateOf(0) }
+            val actions = listOf("New File", "New Folder", "Copy", "Paste", "Delete")
+
+            MenuComboBox(
+                labelContent = {
+                    Text(
+                        text = actions[selectedAction],
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.padding(comboBoxStyle.metrics.contentPadding),
+                    )
+                },
+                modifier = Modifier.widthIn(max = 200.dp).fillMaxWidth(),
+                content = {
+                    submenu(
+                        submenu = {
+                            selectableItem(selected = false, onClick = { selectedAction = 0 }) { Text(actions[0]) }
+                            selectableItem(selected = false, onClick = { selectedAction = 1 }) { Text(actions[1]) }
+                        }
+                    ) {
+                        Text("New...")
+                    }
+                    separator()
+                    selectableItem(selected = false, onClick = { selectedAction = 2 }) { Text(actions[2]) }
+                    selectableItem(selected = false, onClick = { selectedAction = 3 }) { Text(actions[3]) }
+                    separator()
+                    selectableItem(selected = false, onClick = { selectedAction = 4 }) { Text(actions[4]) }
+                },
+            )
+        }
+
+        Column(Modifier.weight(1f).widthIn(min = 125.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text("Disabled")
+
+            MenuComboBox(
+                labelContent = {
+                    Text(
+                        text = "Disabled",
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.padding(comboBoxStyle.metrics.contentPadding),
+                    )
+                },
+                modifier = Modifier.widthIn(max = 200.dp).fillMaxWidth(),
+                enabled = false,
+                content = {
+                    selectableItem(selected = false, onClick = {}) { Text("Item 1") }
+                    selectableItem(selected = false, onClick = {}) { Text("Item 2") }
+                },
+            )
+        }
+    }
+}
+
 @Composable
 private fun CustomPopupContent(onButtonClick: () -> Unit) {
     Column(Modifier.padding(horizontal = 16.dp, vertical = 8.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {

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

@@ -1,5 +1,6 @@
 f:org.jetbrains.jewel.ui.component.ComboBoxKt
 - *bsf:ComboBox-8u0NR3k(kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,Z,org.jetbrains.jewel.ui.Outline,F,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ComboBoxStyle,kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function0,org.jetbrains.jewel.ui.component.PopupManager,androidx.compose.runtime.Composer,I,I,I):V
+- *sf:ComboBox-MCfSvGQ(kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function1,Z,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,Z,org.jetbrains.jewel.ui.Outline,F,F,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ComboBoxStyle,kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function0,org.jetbrains.jewel.ui.component.PopupManager,androidx.compose.runtime.Composer,I,I,I):V
 - *sf:ComboBox-PlcyrME(kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,Z,org.jetbrains.jewel.ui.Outline,F,F,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ComboBoxStyle,kotlin.jvm.functions.Function0,kotlin.jvm.functions.Function0,org.jetbrains.jewel.ui.component.PopupManager,androidx.compose.runtime.Composer,I,I,I):V
 f:org.jetbrains.jewel.ui.component.DropdownKt
 - *sf:Dropdown(androidx.compose.ui.Modifier,Z,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.Outline,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.DropdownStyle,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function3,androidx.compose.runtime.Composer,I,I):V
@@ -42,6 +43,8 @@ f:org.jetbrains.jewel.ui.component.LazyTreeKt
 f:org.jetbrains.jewel.ui.component.ListComboBoxKt
 - *sf:ListComboBox-pglpRAY(java.util.List,I,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function2,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,Z,org.jetbrains.jewel.ui.Outline,F,F,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ComboBoxStyle,kotlin.jvm.functions.Function1,org.jetbrains.jewel.foundation.lazy.SelectableLazyListState,kotlin.jvm.functions.Function5,androidx.compose.runtime.Composer,I,I,I):V
 - *bsf:ListComboBox-xKBSf-U(java.util.List,I,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function2,androidx.compose.ui.Modifier,Z,org.jetbrains.jewel.ui.Outline,F,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ComboBoxStyle,kotlin.jvm.functions.Function1,org.jetbrains.jewel.foundation.lazy.SelectableLazyListState,kotlin.jvm.functions.Function5,androidx.compose.runtime.Composer,I,I,I):V
+f:org.jetbrains.jewel.ui.component.MenuComboBoxKt
+- *sf:MenuComboBox-9xOw6hg(kotlin.jvm.functions.Function2,androidx.compose.ui.Modifier,androidx.compose.ui.Modifier,Z,org.jetbrains.jewel.ui.Outline,F,F,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.ComboBoxStyle,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I,I):V
 *:org.jetbrains.jewel.ui.component.NodeSearchMatchState
 - a:getMatchResult():org.jetbrains.jewel.foundation.search.SpeedSearchMatcher$MatchResult
 - a:getStyle():org.jetbrains.jewel.ui.component.styling.SearchMatchStyle

platform/jewel/ui/api-dump.txt

@@ -488,6 +488,7 @@
 - hashCode():I
 - f:isActive():Z
 - f:isSelected():Z
+f:org.jetbrains.jewel.ui.component.MenuComboBoxKt
 org.jetbrains.jewel.ui.component.MenuController
 - a:clearShortcutActions():V
 - a:close-iuPiT84(I):Z
@@ -536,9 +537,11 @@
 - sf:MenuSeparator(androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.MenuItemMetrics,org.jetbrains.jewel.ui.component.styling.MenuItemColors,androidx.compose.runtime.Composer,I,I):V
 - sf:MenuSubmenuItem(androidx.compose.ui.Modifier,Z,Z,org.jetbrains.jewel.ui.icon.IconKey,androidx.compose.foundation.interaction.MutableInteractionSource,org.jetbrains.jewel.ui.component.styling.MenuStyle,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 - bsf:PopupMenu(kotlin.jvm.functions.Function1,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.MenuStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
-- sf:PopupMenu(kotlin.jvm.functions.Function1,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.MenuStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
+- bsf:PopupMenu(kotlin.jvm.functions.Function1,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.MenuStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
 - bsf:PopupMenu(kotlin.jvm.functions.Function1,androidx.compose.ui.window.PopupPositionProvider,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.MenuStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
-- sf:PopupMenu(kotlin.jvm.functions.Function1,androidx.compose.ui.window.PopupPositionProvider,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.MenuStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
+- bsf:PopupMenu(kotlin.jvm.functions.Function1,androidx.compose.ui.window.PopupPositionProvider,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.MenuStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
+- sf:PopupMenu-_-WMjBM(kotlin.jvm.functions.Function1,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,F,org.jetbrains.jewel.ui.component.styling.MenuStyle,org.jetbrains.jewel.ui.component.styling.PopupContainerStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
+- sf:PopupMenu-_-WMjBM(kotlin.jvm.functions.Function1,androidx.compose.ui.window.PopupPositionProvider,androidx.compose.ui.Modifier,F,org.jetbrains.jewel.ui.component.styling.MenuStyle,org.jetbrains.jewel.ui.component.styling.PopupContainerStyle,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function1,androidx.compose.runtime.Composer,I,I):V
 - sf:items(org.jetbrains.jewel.ui.component.MenuScope,I,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function3):V
 - sf:items(org.jetbrains.jewel.ui.component.MenuScope,java.util.List,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function3):V
 - sf:separator(org.jetbrains.jewel.ui.component.MenuScope):V
@@ -566,7 +569,8 @@
 - sf:PopupAd(androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.PopupAdStyle,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 f:org.jetbrains.jewel.ui.component.PopupContainerKt
 - bsf:PopupContainer(kotlin.jvm.functions.Function0,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.PopupContainerStyle,androidx.compose.ui.window.PopupProperties,androidx.compose.ui.window.PopupPositionProvider,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
-- sf:PopupContainer(kotlin.jvm.functions.Function0,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.PopupContainerStyle,androidx.compose.ui.window.PopupProperties,androidx.compose.ui.window.PopupPositionProvider,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
+- bsf:PopupContainer(kotlin.jvm.functions.Function0,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,org.jetbrains.jewel.ui.component.styling.PopupContainerStyle,androidx.compose.ui.window.PopupProperties,androidx.compose.ui.window.PopupPositionProvider,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
+- sf:PopupContainer-05tvjtU(kotlin.jvm.functions.Function0,androidx.compose.ui.Alignment$Horizontal,androidx.compose.ui.Modifier,Z,F,org.jetbrains.jewel.ui.component.styling.PopupContainerStyle,androidx.compose.ui.window.PopupProperties,androidx.compose.ui.window.PopupPositionProvider,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function2,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I,I):V
 f:org.jetbrains.jewel.ui.component.PopupKt
 - sf:Popup(androidx.compose.ui.window.PopupPositionProvider,androidx.compose.foundation.shape.CornerSize,kotlin.jvm.functions.Function0,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V
 - sf:Popup(androidx.compose.ui.window.PopupPositionProvider,kotlin.jvm.functions.Function0,androidx.compose.ui.window.PopupProperties,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function1,kotlin.jvm.functions.Function2,androidx.compose.runtime.Composer,I,I):V

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

@@ -754,7 +754,7 @@ private fun SplitButtonImpl(
                             true
                         },
                         horizontalAlignment = Alignment.Start,
-                        style = menuStyle,
+                        menuStyle = menuStyle,
                         content = secondaryContentMenu,
                     )
                 }