fix segmented_control (#3516)

* fix segmented_control

* fix 3.8 imports

* fix 3.8 typing

* add valid_parent for SegmentedControlItem

reflex/components/radix/themes/components/segmented_control.py

@@ -1,8 +1,11 @@
 """SegmentedControl from Radix Themes."""
 
+from __future__ import annotations
+
 from types import SimpleNamespace
-from typing import Literal
+from typing import List, Literal, Union
 
+from reflex.event import EventHandler
 from reflex.vars import Var
 
 from ..base import LiteralAccentColor, RadixThemesComponent
@@ -11,13 +14,15 @@ from ..base import LiteralAccentColor, RadixThemesComponent
 class SegmentedControlRoot(RadixThemesComponent):
     """Root element for a SegmentedControl component."""
 
-    tag = "SegmentedControl"
+    tag = "SegmentedControl.Root"
 
     # The size of the segmented control: "1" | "2" | "3"
     size: Var[Literal["1", "2", "3"]]
 
-    # Variant of button: "classic" | "surface" | "soft"
-    variant: Var[Literal["classic", "surface", "soft"]]
+    # Variant of button: "classic" | "surface"
+    variant: Var[Literal["classic", "surface"]]
+
+    type: Var[Literal["single", "multiple"]]
 
     # Override theme color for button
     color_scheme: Var[LiteralAccentColor]
@@ -26,7 +31,13 @@ class SegmentedControlRoot(RadixThemesComponent):
     radius: Var[Literal["none", "small", "medium", "large", "full"]]
 
     # The default value of the segmented control.
-    default_value: Var[str]
+    default_value: Var[Union[str, List[str]]]
+
+    value: Var[Union[str, List[str]]]
+
+    on_change: EventHandler[lambda e0: [e0]]
+
+    _rename_props = {"onChange": "onValueChange"}
 
 
 class SegmentedControlItem(RadixThemesComponent):
@@ -37,6 +48,8 @@ class SegmentedControlItem(RadixThemesComponent):
     # The value of the item.
     value: Var[str]
 
+    _valid_parents: List[str] = ["SegmentedControlRoot"]
+
 
 class SegmentedControl(SimpleNamespace):
     """SegmentedControl components namespace."""

reflex/components/radix/themes/components/segmented_control.pyi

@@ -8,7 +8,8 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from types import SimpleNamespace
-from typing import Literal
+from typing import List, Literal, Union
+from reflex.event import EventHandler
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 
@@ -22,10 +23,10 @@ class SegmentedControlRoot(RadixThemesComponent):
             Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
         variant: Optional[
-            Union[
-                Var[Literal["classic", "surface", "soft"]],
-                Literal["classic", "surface", "soft"],
-            ]
+            Union[Var[Literal["classic", "surface"]], Literal["classic", "surface"]]
+        ] = None,
+        type: Optional[
+            Union[Var[Literal["single", "multiple"]], Literal["single", "multiple"]]
         ] = None,
         color_scheme: Optional[
             Union[
@@ -95,7 +96,12 @@ class SegmentedControlRoot(RadixThemesComponent):
                 Literal["none", "small", "medium", "large", "full"],
             ]
         ] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
+        default_value: Optional[
+            Union[Var[Union[str, List[str]]], Union[str, List[str]]]
+        ] = None,
+        value: Optional[
+            Union[Var[Union[str, List[str]]], Union[str, List[str]]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -105,6 +111,9 @@ class SegmentedControlRoot(RadixThemesComponent):
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -157,7 +166,7 @@ class SegmentedControlRoot(RadixThemesComponent):
         Args:
             *children: Child components.
             size: The size of the segmented control: "1" | "2" | "3"
-            variant: Variant of button: "classic" | "surface" | "soft"
+            variant: Variant of button: "classic" | "surface"
             color_scheme: Override theme color for button
             radius: The radius of the segmented control: "none" | "small" | "medium" | "large" | "full"
             default_value: The default value of the segmented control.