Merge remote-tracking branch 'origin/main' into reflex-0.4.0

reflex/__init__.py

@@ -9,13 +9,13 @@ from __future__ import annotations
 import importlib
 from typing import Type
 
-from reflex.constants.colors import Color as color
 from reflex.page import page as page
 from reflex.utils import console
 from reflex.utils.format import to_snake_case
 
 _ALL_COMPONENTS = [
     # Core
+    "color",
     "cond",
     "foreach",
     "html",
@@ -119,6 +119,7 @@ _MAPPING = {
     "reflex.components.component": ["Component", "NoSSRComponent", "memo"],
     "reflex.components.chakra": ["chakra"],
     "reflex.components.el": ["el"],
+    "reflex.components.next": ["next"],
     "reflex.components.radix": ["radix"],
     "reflex.components.recharts": ["recharts"],
     "reflex.components.moment.moment": ["MomentDelta"],

reflex/__init__.pyi

@@ -7,6 +7,7 @@ from reflex import base as base
 from reflex.base import Base as Base
 from reflex import compiler as compiler
 from reflex.compiler.utils import get_asset_path as get_asset_path
+from reflex.components import color as color
 from reflex.components import cond as cond
 from reflex.components import foreach as foreach
 from reflex.components import html as html
@@ -93,6 +94,7 @@ from reflex.components.component import NoSSRComponent as NoSSRComponent
 from reflex.components.component import memo as memo
 from reflex.components import chakra as chakra
 from reflex.components import el as el
+from reflex.components import next as next
 from reflex.components import radix as radix
 from reflex.components import recharts as recharts
 from reflex.components.moment.moment import MomentDelta as MomentDelta

reflex/components/core/__init__.py

@@ -2,6 +2,7 @@
 
 from . import layout as layout
 from .banner import ConnectionBanner, ConnectionModal
+from .colors import color
 from .cond import Cond, cond
 from .debounce import DebounceInput
 from .foreach import Foreach

reflex/components/core/colors.py

@@ -0,0 +1,21 @@
+"""The colors used in Reflex are a wrapper around https://www.radix-ui.com/colors."""
+
+from reflex.constants.colors import Color, ColorType, ShadeType
+
+
+def color(
+    color: ColorType,
+    shade: ShadeType = 7,
+    alpha: bool = False,
+) -> Color:
+    """Create a color object.
+
+    Args:
+        color: The color to use.
+        shade: The shade of the color to use.
+        alpha: Whether to use the alpha variant of the color.
+
+    Returns:
+        The color object.
+    """
+    return Color(color, shade, alpha)

reflex/components/radix/themes/components/dropdownmenu.py

@@ -1,6 +1,6 @@
 """Interactive components provided by @radix-ui/themes."""
 from types import SimpleNamespace
-from typing import Any, Dict, Literal
+from typing import Any, Dict, Literal, Union
 
 from reflex.constants import EventTriggers
 from reflex.vars import Var
@@ -10,18 +10,40 @@ from ..base import (
     RadixThemesComponent,
 )
 
+LiteralDirType = Literal["ltr", "rtl"]
+
+LiteralSizeType = Literal["1", "2"]
+
+LiteralVariantType = Literal["solid", "soft"]
+
+LiteralSideType = Literal["top", "right", "bottom", "left"]
+
+LiteralAlignType = Literal["start", "center", "end"]
+
+
+LiteralStickyType = Literal[
+    "partial",
+    "always",
+]
+
 
 class DropdownMenuRoot(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The Dropdown Menu Root Component."""
 
     tag = "DropdownMenu.Root"
 
+    # The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
+
     # The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
     open: Var[bool]
 
-    # The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+    # The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. Defaults to True.
     modal: Var[bool]
 
+    # The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
+    dir: Var[LiteralDirType]
+
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
 
@@ -35,16 +57,67 @@ class DropdownMenuRoot(RadixThemesComponent):
 
 
 class DropdownMenuTrigger(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The button that toggles the dropdown menu."""
 
     tag = "DropdownMenu.Trigger"
 
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
 
 class DropdownMenuContent(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The Dropdown Menu Content component that pops out when the dropdown menu is open."""
 
     tag = "DropdownMenu.Content"
 
+    # Dropdown Menu Content size "1" - "2"
+    size: Var[LiteralSizeType]
+
+    # Variant of Dropdown Menu Content: "solid" | "soft"
+    variant: Var[LiteralVariantType]
+
+    # Override theme color for Dropdown Menu Content
+    color_scheme: Var[LiteralAccentColor]
+
+    # Renders the Dropdown Menu Content in higher contrast
+    high_contrast: Var[bool]
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+    loop: Var[bool]
+
+    # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+    force_mount: Var[bool]
+
+    # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
+    side: Var[LiteralSideType]
+
+    # The distance in pixels from the trigger. Defaults to 0.
+    side_offset: Var[Union[float, int]]
+
+    # The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
+    align: Var[LiteralAlignType]
+
+    # An offset in pixels from the "start" or "end" alignment options.
+    align_offset: Var[Union[float, int]]
+
+    # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+    avoid_collisions: Var[bool]
+
+    # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+
+    # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
+    arrow_padding: Var[Union[float, int]]
+
+    # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+    sticky: Var[LiteralStickyType]
+
+    # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+    hide_when_detached: Var[bool]
+
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
 
@@ -56,6 +129,7 @@ class DropdownMenuContent(RadixThemesComponent):
             EventTriggers.ON_CLOSE_AUTO_FOCUS: lambda e0: [e0],
             EventTriggers.ON_ESCAPE_KEY_DOWN: lambda e0: [e0],
             EventTriggers.ON_POINTER_DOWN_OUTSIDE: lambda e0: [e0],
+            EventTriggers.ON_FOCUS_OUTSIDE: lambda e0: [e0],
             EventTriggers.ON_INTERACT_OUTSIDE: lambda e0: [e0],
         }
 
@@ -65,45 +139,135 @@ class DropdownMenuSubTrigger(RadixThemesComponent):
 
     tag = "DropdownMenu.SubTrigger"
 
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # When true, prevents the user from interacting with the item.
+    disabled: Var[bool]
+
+    # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
+    text_value: Var[str]
+
 
 class DropdownMenuSub(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Contains all the parts of a submenu."""
 
     tag = "DropdownMenu.Sub"
 
+    # The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
+    open: Var[bool]
+
+    # The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the events triggers signatures for the component.
+
+        Returns:
+            The signatures of the event triggers.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_OPEN_CHANGE: lambda e0: [e0.target.value],
+        }
+
 
 class DropdownMenuSubContent(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The component that pops out when a submenu is open. Must be rendered inside DropdownMenuSub."""
 
     tag = "DropdownMenu.SubContent"
 
-    # Button size "1" - "4"
-    size: Var[Literal["1", "2"]]
+    # Dropdown Menu Sub Content size "1" - "2"
+    size: Var[LiteralSizeType]
 
-    # Variant of button: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[Literal["solid", "soft"]]
+    # Variant of Dropdown Menu Sub Content: "solid" | "soft"
+    variant: Var[LiteralVariantType]
 
-    # Override theme color for button
+    # Override theme color for Dropdown Menu Sub Content
     color_scheme: Var[LiteralAccentColor]
 
-    # Whether to render the button with higher contrast color against background
+    # Whether to render the component with higher contrast color against background
     high_contrast: Var[bool]
 
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+    loop: Var[bool]
+
+    # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+    force_mount: Var[bool]
+
+    # The distance in pixels from the trigger. Defaults to 0.
+    side_offset: Var[Union[float, int]]
+
+    # An offset in pixels from the "start" or "end" alignment options.
+    align_offset: Var[Union[float, int]]
+
+    # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+    avoid_collisions: Var[bool]
+
+    # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+
+    # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
+    arrow_padding: Var[Union[float, int]]
+
+    # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+    sticky: Var[LiteralStickyType]
+
+    # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+    hide_when_detached: Var[bool]
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the events triggers signatures for the component.
+
+        Returns:
+            The signatures of the event triggers.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_ESCAPE_KEY_DOWN: lambda e0: [e0],
+            EventTriggers.ON_POINTER_DOWN_OUTSIDE: lambda e0: [e0],
+            EventTriggers.ON_FOCUS_OUTSIDE: lambda e0: [e0],
+            EventTriggers.ON_INTERACT_OUTSIDE: lambda e0: [e0],
+        }
+
 
 class DropdownMenuItem(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """The Dropdown Menu Item Component."""
 
     tag = "DropdownMenu.Item"
 
-    # Override theme color for button
+    # Override theme color for Dropdown Menu Item
     color_scheme: Var[LiteralAccentColor]
 
     # Shortcut to render a menu item as a link
     shortcut: Var[str]
 
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # When true, prevents the user from interacting with the item.
+    disabled: Var[bool]
+
+    # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
+    text_value: Var[str]
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the events triggers signatures for the component.
+
+        Returns:
+            The signatures of the event triggers.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_SELECT: lambda e0: [e0.target.value],
+        }
+
 
 class DropdownMenuSeparator(RadixThemesComponent):
-    """Trigger an action or event, such as submitting a form or displaying a dialog."""
+    """Dropdown Menu Separator Component. Used to visually separate items in the dropdown menu."""
 
     tag = "DropdownMenu.Separator"
 

reflex/components/radix/themes/components/dropdownmenu.pyi

@@ -8,11 +8,18 @@ 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 Any, Dict, Literal
+from typing import Any, Dict, Literal, Union
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 
+LiteralDirType = Literal["ltr", "rtl"]
+LiteralSizeType = Literal["1", "2"]
+LiteralVariantType = Literal["solid", "soft"]
+LiteralSideType = Literal["top", "right", "bottom", "left"]
+LiteralAlignType = Literal["start", "center", "end"]
+LiteralStickyType = Literal["partial", "always"]
+
 class DropdownMenuRoot(RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
@@ -83,8 +90,10 @@ class DropdownMenuRoot(RadixThemesComponent):
                 ],
             ]
         ] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         open: Optional[Union[Var[bool], bool]] = None,
         modal: Optional[Union[Var[bool], bool]] = None,
+        dir: Optional[Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -151,8 +160,10 @@ class DropdownMenuRoot(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
+            default_open: The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
             open: The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
-            modal: The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+            modal: The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. Defaults to True.
+            dir: The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -236,6 +247,7 @@ class DropdownMenuTrigger(RadixThemesComponent):
                 ],
             ]
         ] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -299,6 +311,7 @@ class DropdownMenuTrigger(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -383,6 +396,42 @@ class DropdownMenuContent(RadixThemesComponent):
                 ],
             ]
         ] = None,
+        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
+        variant: Optional[
+            Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        loop: Optional[Union[Var[bool], bool]] = None,
+        force_mount: Optional[Union[Var[bool], bool]] = None,
+        side: Optional[
+            Union[
+                Var[Literal["top", "right", "bottom", "left"]],
+                Literal["top", "right", "bottom", "left"],
+            ]
+        ] = None,
+        side_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end"]],
+                Literal["start", "center", "end"],
+            ]
+        ] = None,
+        align_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Var[Union[float, int, Dict[str, Union[float, int]]]],
+                Union[float, int, Dict[str, Union[float, int]]],
+            ]
+        ] = None,
+        arrow_padding: Optional[
+            Union[Var[Union[float, int]], Union[float, int]]
+        ] = None,
+        sticky: Optional[
+            Union[Var[Literal["partial", "always"]], Literal["partial", "always"]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -411,6 +460,9 @@ class DropdownMenuContent(RadixThemesComponent):
         on_focus: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_focus_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_interact_outside: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -458,6 +510,21 @@ class DropdownMenuContent(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
+            size: Dropdown Menu Content size "1" - "2"
+            variant: Variant of Dropdown Menu Content: "solid" | "soft"
+            high_contrast: Renders the Dropdown Menu Content in higher contrast
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            loop: When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+            force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+            side: The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
+            side_offset: The distance in pixels from the trigger. Defaults to 0.
+            align: The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
+            align_offset: An offset in pixels from the "start" or "end" alignment options.
+            avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+            arrow_padding: The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -541,6 +608,9 @@ class DropdownMenuSubTrigger(RadixThemesComponent):
                 ],
             ]
         ] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        text_value: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -604,6 +674,9 @@ class DropdownMenuSubTrigger(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            disabled: When true, prevents the user from interacting with the item.
+            text_value: Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -619,6 +692,7 @@ class DropdownMenuSubTrigger(RadixThemesComponent):
         ...
 
 class DropdownMenuSub(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -687,6 +761,8 @@ class DropdownMenuSub(RadixThemesComponent):
                 ],
             ]
         ] = None,
+        open: Optional[Union[Var[bool], bool]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -733,6 +809,9 @@ class DropdownMenuSub(RadixThemesComponent):
         on_mouse_up: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_open_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_scroll: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -750,6 +829,8 @@ class DropdownMenuSub(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
+            open: The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
+            default_open: The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -765,6 +846,7 @@ class DropdownMenuSub(RadixThemesComponent):
         ...
 
 class DropdownMenuSubContent(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -838,6 +920,25 @@ class DropdownMenuSubContent(RadixThemesComponent):
             Union[Var[Literal["solid", "soft"]], Literal["solid", "soft"]]
         ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        loop: Optional[Union[Var[bool], bool]] = None,
+        force_mount: Optional[Union[Var[bool], bool]] = None,
+        side_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        align_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
+        avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Var[Union[float, int, Dict[str, Union[float, int]]]],
+                Union[float, int, Dict[str, Union[float, int]]],
+            ]
+        ] = None,
+        arrow_padding: Optional[
+            Union[Var[Union[float, int]], Union[float, int]]
+        ] = None,
+        sticky: Optional[
+            Union[Var[Literal["partial", "always"]], Literal["partial", "always"]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -857,9 +958,18 @@ class DropdownMenuSubContent(RadixThemesComponent):
         on_double_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_escape_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_focus: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_focus_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_interact_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_mount: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -884,6 +994,9 @@ class DropdownMenuSubContent(RadixThemesComponent):
         on_mouse_up: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_pointer_down_outside: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_scroll: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -901,9 +1014,19 @@ class DropdownMenuSubContent(RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
-            size: Button size "1" - "4"
-            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
-            high_contrast: Whether to render the button with higher contrast color against background
+            size: Dropdown Menu Sub Content size "1" - "2"
+            variant: Variant of Dropdown Menu Sub Content: "solid" | "soft"
+            high_contrast: Whether to render the component with higher contrast color against background
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            loop: When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+            force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+            side_offset: The distance in pixels from the trigger. Defaults to 0.
+            align_offset: An offset in pixels from the "start" or "end" alignment options.
+            avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+            arrow_padding: The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -919,6 +1042,7 @@ class DropdownMenuSubContent(RadixThemesComponent):
         ...
 
 class DropdownMenuItem(RadixThemesComponent):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -988,6 +1112,9 @@ class DropdownMenuItem(RadixThemesComponent):
             ]
         ] = None,
         shortcut: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        text_value: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1037,6 +1164,9 @@ class DropdownMenuItem(RadixThemesComponent):
         on_scroll: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_select: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_unmount: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -1052,6 +1182,9 @@ class DropdownMenuItem(RadixThemesComponent):
             color: map to CSS default color property.
             color_scheme: map to radix color property.
             shortcut: Shortcut to render a menu item as a link
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            disabled: When true, prevents the user from interacting with the item.
+            text_value: Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/constants/colors.py

@@ -1,4 +1,5 @@
 """The colors used in Reflex are a wrapper around https://www.radix-ui.com/colors."""
+
 from dataclasses import dataclass
 from typing import Literal
 
@@ -40,6 +41,20 @@ ColorType = Literal[
 ShadeType = Literal[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
 
 
+def format_color(color: ColorType, shade: ShadeType, alpha: bool) -> str:
+    """Format a color as a CSS color string.
+
+    Args:
+        color: The color to use.
+        shade: The shade of the color to use.
+        alpha: Whether to use the alpha variant of the color.
+
+    Returns:
+        The formatted color.
+    """
+    return f"var(--{color}-{'a' if alpha else ''}{shade})"
+
+
 @dataclass
 class Color:
     """A color in the Reflex color palette."""
@@ -52,3 +67,14 @@ class Color:
 
     # Whether to use the alpha variant of the color
     alpha: bool = False
+
+    def __format__(self, format_spec: str) -> str:
+        """Format the color as a CSS color string.
+
+        Args:
+            format_spec: The format specifier to use.
+
+        Returns:
+            The formatted color.
+        """
+        return format_color(self.color, self.shade, self.alpha)

reflex/constants/event.py

@@ -92,3 +92,4 @@ class EventTriggers(SimpleNamespace):
     ON_UNMOUNT = "on_unmount"
     ON_CLEAR_SERVER_ERRORS = "on_clear_server_errors"
     ON_VALUE_COMMIT = "on_value_commit"
+    ON_SELECT = "on_select"

reflex/utils/serializers.py

@@ -8,7 +8,7 @@ from datetime import date, datetime, time, timedelta
 from typing import Any, Callable, Dict, List, Set, Tuple, Type, Union, get_type_hints
 
 from reflex.base import Base
-from reflex.constants.colors import Color
+from reflex.constants.colors import Color, format_color
 from reflex.utils import exceptions, format, types
 
 # Mapping from type to a serializer.
@@ -232,7 +232,7 @@ def serialize_datetime(dt: Union[date, datetime, time, timedelta]) -> str:
 
 
 @serializer
-def serialize_color(color: Color) -> SerializedType:
+def serialize_color(color: Color) -> str:
     """Serialize a color.
 
     Args:
@@ -241,10 +241,7 @@ def serialize_color(color: Color) -> SerializedType:
     Returns:
         The serialized color.
     """
-    if color.alpha:
-        return f"var(--{color.color}-a{color.shade})"
-    else:
-        return f"var(--{color.color}-{color.shade})"
+    return format_color(color.color, color.shade, color.alpha)
 
 
 try:

tests/utils/test_serializers.py

@@ -5,7 +5,7 @@ from typing import Any, Dict, List, Type
 import pytest
 
 from reflex.base import Base
-from reflex.constants.colors import Color as color
+from reflex.components.core.colors import color
 from reflex.utils import serializers
 from reflex.vars import Var