@expo/ui 55.0.2 → 55.0.4

package/android/src/main/java/expo/modules/ui/ExpoUIModule.kt

@@ -6,20 +6,29 @@ import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.remember
+import expo.modules.kotlin.functions.Coroutine
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
 import expo.modules.kotlin.viewevent.getValue
 import expo.modules.ui.button.ButtonContent
 import expo.modules.ui.button.ButtonPressedEvent
 import expo.modules.ui.button.ButtonProps
+import expo.modules.ui.button.ElevatedButtonContent
+import expo.modules.ui.button.FilledTonalButtonContent
+import expo.modules.ui.button.OutlinedButtonContent
+import expo.modules.ui.button.TextButtonContent
+import expo.modules.ui.button.FloatingActionButtonContent
+import expo.modules.ui.button.FloatingActionButtonProps
 import expo.modules.ui.button.IconButtonContent
-import expo.modules.ui.button.IconButtonProps
+import expo.modules.ui.button.FilledIconButtonContent
+import expo.modules.ui.button.FilledTonalIconButtonContent
+import expo.modules.ui.button.OutlinedIconButtonContent
 import expo.modules.ui.icon.IconView
-import expo.modules.ui.menu.ContextMenuButtonPressedEvent
-import expo.modules.ui.menu.ContextMenuContent
-import expo.modules.ui.menu.ContextMenuProps
-import expo.modules.ui.menu.ContextMenuSwitchValueChangeEvent
-import expo.modules.ui.menu.ExpandedChangedEvent
+import expo.modules.ui.menu.DropdownMenuContent
+import expo.modules.ui.menu.DropdownMenuProps
+import expo.modules.ui.menu.DropdownMenuItemContent
+import expo.modules.ui.menu.DropdownMenuItemProps
+import expo.modules.ui.menu.ItemPressedEvent
 import okhttp3.OkHttpClient
 
 class ExpoUIModule : Module() {
@@ -84,26 +93,48 @@ class ExpoUIModule : Module() {
 
     //region Expo UI views
 
-    ExpoUIView("ModalBottomSheetView", events = {
+    View(ModalBottomSheetView::class) {
       Events("onDismissRequest")
-    }) { props: ModalBottomSheetProps ->
-      val onDismissRequest by remember { EventDispatcher<Unit>() }
-      ModalBottomSheetContent(props) { onDismissRequest(Unit) }
+      AsyncFunction("hide") Coroutine { view: ModalBottomSheetView ->
+        view.hide()
+      }
+    }
+
+    ExpoUIView("SingleChoiceSegmentedButtonRowView") { props: SingleChoiceSegmentedButtonRowProps ->
+      SingleChoiceSegmentedButtonRowContent(props)
     }
 
-    // Defines a single view for now – a single choice segmented control
-    ExpoUIView("PickerView", events = {
-      Events("onOptionSelected")
-    }) { props: PickerProps ->
-      val onOptionSelected by remember { EventDispatcher<PickerOptionSelectedEvent>() }
-      PickerContent(props) { onOptionSelected(it) }
+    ExpoUIView("MultiChoiceSegmentedButtonRowView") { props: MultiChoiceSegmentedButtonRowProps ->
+      MultiChoiceSegmentedButtonRowContent(props)
+    }
+
+    ExpoUIView("SegmentedButtonView", events = {
+      Events("onButtonPressed", "onCheckedChange")
+    }) { props: SegmentedButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<Unit>() }
+      val onCheckedChange by remember { EventDispatcher<GenericEventPayload1<Boolean>>() }
+      SegmentedButtonContent(props, { onButtonPressed(Unit) }, { onCheckedChange(it) })
     }
 
     ExpoUIView("SwitchView", events = {
-      Events("onValueChange")
+      Events("onCheckedChange")
     }) { props: SwitchProps ->
-      val onValueChange by remember { EventDispatcher<ValueChangeEvent>() }
-      SwitchContent(props) { onValueChange(it) }
+      val onCheckedChange by remember { EventDispatcher<CheckedChangeEvent>() }
+      SwitchContent(props) { value -> onCheckedChange(CheckedChangeEvent(value)) }
+    }
+
+    ExpoUIView("CheckboxView", events = {
+      Events("onCheckedChange")
+    }) { props: CheckboxProps ->
+      val onCheckedChange by remember { EventDispatcher<CheckedChangeEvent>() }
+      CheckboxContent(props) { value -> onCheckedChange(CheckedChangeEvent(value)) }
+    }
+
+    ExpoUIView("TriStateCheckboxView", events = {
+      Events("onNativeClick")
+    }) { props: TriStateCheckboxProps ->
+      val onNativeClick by remember { EventDispatcher<Unit>() }
+      TriStateCheckboxContent(props) { onNativeClick(Unit) }
     }
 
     ExpoUIView("Button", events = {
@@ -113,15 +144,64 @@ class ExpoUIModule : Module() {
       ButtonContent(props) { onButtonPressed(it) }
     }
 
+    ExpoUIView("FilledTonalButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      FilledTonalButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("OutlinedButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      OutlinedButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("ElevatedButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      ElevatedButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("TextButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      TextButtonContent(props) { onButtonPressed(it) }
+    }
+
     ExpoUIView("IconButton", events = {
       Events("onButtonPressed")
-    }) { props: IconButtonProps ->
+    }) { props: ButtonProps ->
       val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
       IconButtonContent(props) { onButtonPressed(it) }
     }
 
+    ExpoUIView("FilledIconButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      FilledIconButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("FilledTonalIconButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      FilledTonalIconButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("OutlinedIconButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      OutlinedIconButtonContent(props) { onButtonPressed(it) }
+    }
+
     ExpoUIView("SliderView", events = {
-      Events("onValueChanged")
+      Events("onValueChange", "onValueChangeFinished")
     }) { props: SliderProps ->
       SliderContent(props)
     }
@@ -141,26 +221,50 @@ class ExpoUIModule : Module() {
       DateTimePickerContent(props) { onDateSelected(it) }
     }
 
-    ExpoUIView("ContextMenuView", events = {
-      Events(
-        "onContextMenuButtonPressed",
-        "onContextMenuSwitchValueChanged",
-        "onExpandedChanged"
-      )
-    }) { props: ContextMenuProps ->
-      val onContextMenuButtonPressed by remember { EventDispatcher<ContextMenuButtonPressedEvent>() }
-      val onContextMenuSwitchValueChanged by remember { EventDispatcher<ContextMenuSwitchValueChangeEvent>() }
-      val onExpandedChanged by remember { EventDispatcher<ExpandedChangedEvent>() }
-      ContextMenuContent(
-        props,
-        { onContextMenuButtonPressed(it) },
-        { onContextMenuSwitchValueChanged(it) },
-        { onExpandedChanged(it) }
-      )
+    ExpoUIView("DatePickerDialogView", events = {
+      Events("onDateSelected", "onDismissRequest")
+    }) { props: DatePickerDialogProps ->
+      val onDateSelected by remember { EventDispatcher<DatePickerResult>() }
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      ExpoDatePickerDialogContent(props, { onDateSelected(it) }, { onDismissRequest(Unit) })
+    }
+
+    ExpoUIView("TimePickerDialogView", events = {
+      Events("onDateSelected", "onDismissRequest")
+    }) { props: TimePickerDialogProps ->
+      val onDateSelected by remember { EventDispatcher<DatePickerResult>() }
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      ExpoTimePickerDialogContent(props, { onDateSelected(it) }, { onDismissRequest(Unit) })
+    }
+
+    ExpoUIView("DropdownMenuView", events = {
+      Events("onDismissRequest")
+    }) { props: DropdownMenuProps ->
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      DropdownMenuContent(props) { onDismissRequest(Unit) }
+    }
+
+    ExpoUIView("DropdownMenuItemView", events = {
+      Events("onItemPressed")
+    }) { props: DropdownMenuItemProps ->
+      val onItemPressed by remember { EventDispatcher<ItemPressedEvent>() }
+      DropdownMenuItemContent(props) { onItemPressed(it) }
+    }
+
+    ExpoUIView("LinearProgressIndicatorView") { props: LinearProgressIndicatorProps ->
+      LinearProgressIndicatorContent(props)
+    }
+
+    ExpoUIView("CircularProgressIndicatorView") { props: CircularProgressIndicatorProps ->
+      CircularProgressIndicatorContent(props)
+    }
+
+    ExpoUIView("LinearWavyProgressIndicatorView") { props: LinearWavyProgressIndicatorProps ->
+      LinearWavyProgressIndicatorContent(props)
     }
 
-    ExpoUIView("ProgressView") { props: ProgressProps ->
-      ProgressContent(props)
+    ExpoUIView("CircularWavyProgressIndicatorView") { props: CircularWavyProgressIndicatorProps ->
+      CircularWavyProgressIndicatorContent(props)
     }
 
     ExpoUIView("BoxView") { props: LayoutProps ->
@@ -227,42 +331,74 @@ class ExpoUIModule : Module() {
       )
     }
 
-    ExpoUIView("ChipView", events = {
-      Events(
-        "onPress",
-        "onDismiss"
-      )
-    }) { props: ChipProps ->
-      val onPress by remember { EventDispatcher<ChipPressedEvent>() }
-      val onDismiss by remember { EventDispatcher<ChipPressedEvent>() }
-      ChipContent(props, { onPress(it) }, { onDismiss(it) })
+    ExpoUIView("AssistChipView", events = {
+      Events("onNativeClick")
+    }) { props: AssistChipProps ->
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      AssistChipContent(props) { onNativeClick(it) }
+    }
+
+    ExpoUIView("InputChipView", events = {
+      Events("onNativeClick")
+    }) { props: InputChipProps ->
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      InputChipContent(props) { onNativeClick(it) }
+    }
+
+    ExpoUIView("SuggestionChipView", events = {
+      Events("onNativeClick")
+    }) { props: SuggestionChipProps ->
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      SuggestionChipContent(props) { onNativeClick(it) }
     }
 
     ExpoUIView("FilterChipView", events = {
-      Events("onPress")
+      Events("onNativeClick")
     }) { props: FilterChipProps ->
-      val onPress by remember { EventDispatcher<FilterChipPressedEvent>() }
-      FilterChipContent(props) { onPress(it) }
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      FilterChipContent(props) { onNativeClick(it) }
     }
 
-    ExpoUIView("TextButtonView", events = {
-      Events("onButtonPressed")
-    }) { props: TextButtonProps ->
-      val onButtonPressed by remember { EventDispatcher<expo.modules.ui.button.ButtonPressedEvent>() }
-      TextButtonContent(props) { onButtonPressed(it) }
+    ExpoUIView("ToggleButton", events = {
+      Events("onCheckedChange")
+    }) { props: ToggleButtonProps ->
+      val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
+      ToggleButtonContent(props) { onCheckedChange(it) }
     }
 
-    ExpoUIView("ToggleButtonView", events = {
+    ExpoUIView("IconToggleButton", events = {
       Events("onCheckedChange")
     }) { props: ToggleButtonProps ->
       val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
-      ToggleButtonContent(props) { onCheckedChange(it) }
+      IconToggleButtonContent(props) { onCheckedChange(it) }
+    }
+
+    ExpoUIView("FilledIconToggleButton", events = {
+      Events("onCheckedChange")
+    }) { props: ToggleButtonProps ->
+      val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
+      FilledIconToggleButtonContent(props) { onCheckedChange(it) }
+    }
+
+    ExpoUIView("OutlinedIconToggleButton", events = {
+      Events("onCheckedChange")
+    }) { props: ToggleButtonProps ->
+      val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
+      OutlinedIconToggleButtonContent(props) { onCheckedChange(it) }
     }
 
     ExpoUIView("CardView") { props: CardProps ->
       CardContent(props)
     }
 
+    ExpoUIView("ElevatedCardView") { props: ElevatedCardProps ->
+      ElevatedCardContent(props)
+    }
+
+    ExpoUIView("OutlinedCardView") { props: OutlinedCardProps ->
+      OutlinedCardContent(props)
+    }
+
     ExpoUIView("ListItemView") { props: ListItemProps ->
       ListItemContent(props)
     }
@@ -282,11 +418,23 @@ class ExpoUIModule : Module() {
       SurfaceContent(props)
     }
 
+    ExpoUIView("AnimatedVisibilityView") { props: AnimatedVisibilityProps ->
+      AnimatedVisibilityContent(props)
+    }
+
     ExpoUIView("RadioButtonView", events = {
-      Events("onNativeClick")
+      Events("onButtonPressed")
     }) { props: RadioButtonProps ->
-      val onNativeClick by remember { EventDispatcher<Unit>() }
-      RadioButtonContent(props) { onNativeClick(Unit) }
+      val onButtonPressed by remember { EventDispatcher<Unit>() }
+      val clickHandler = if (props.clickable) { { onButtonPressed(Unit) } } else null
+      RadioButtonContent(props, clickHandler)
+    }
+
+    ExpoUIView("FloatingActionButtonView", events = {
+      Events("onButtonPressed")
+    }) { props: FloatingActionButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<Unit>() }
+      FloatingActionButtonContent(props) { onButtonPressed(Unit) }
     }
 
     //endregion Expo UI views

package/android/src/main/java/expo/modules/ui/ModifierRegistry.kt

@@ -21,6 +21,9 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.ui.semantics.Role
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.CutCornerShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -177,13 +180,26 @@ internal data class ClipParams(
 ) : Record
 
 internal data class SelectableParams(
-  @Field val selected: Boolean = false
+  @Field val selected: Boolean = false,
+  @Field val role: String? = null
 ) : Record
 
 internal data class ClickableParams(
   @Field val indication: Boolean = true
 ) : Record
 
+internal enum class SemanticRoleType(val value: String) : Enumerable {
+  CHECKBOX("checkbox"),
+  RADIO_BUTTON("radioButton"),
+  SWITCH("switch"),
+  TAB("tab")
+}
+
+internal data class ToggleableParams(
+  @Field val value: Boolean = false,
+  @Field val role: SemanticRoleType? = null
+) : Record
+
 // endregion
 
 /**
@@ -508,8 +524,35 @@ object ModifierRegistry {
       val params = recordFromMap<SelectableParams>(map)
       Modifier.selectable(
         selected = params.selected,
+        role = when (params.role) {
+          "radioButton" -> androidx.compose.ui.semantics.Role.RadioButton
+          "checkbox" -> androidx.compose.ui.semantics.Role.Checkbox
+          "switch" -> androidx.compose.ui.semantics.Role.Switch
+          "tab" -> androidx.compose.ui.semantics.Role.Tab
+          else -> null
+        },
         onClick = { eventDispatcher("selectable", emptyMap()) }
       )
     }
+
+    register("selectableGroup") { _, _, _, _ ->
+      Modifier.selectableGroup()
+    }
+
+    register("toggleable") { map, _, _, eventDispatcher ->
+      val params = recordFromMap<ToggleableParams>(map)
+      val role = when (params.role) {
+        SemanticRoleType.CHECKBOX -> Role.Checkbox
+        SemanticRoleType.RADIO_BUTTON -> Role.RadioButton
+        SemanticRoleType.SWITCH -> Role.Switch
+        SemanticRoleType.TAB -> Role.Tab
+        null -> null
+      }
+      Modifier.toggleable(
+        value = params.value,
+        role = role,
+        onValueChange = { eventDispatcher("toggleable", emptyMap()) }
+      )
+    }
   }
 }