Wrapping extra components inside of the Context Menu Component (#4831)

* Wrapping extra components inside of the Context Menu Component  (partial fix for #4262) label, group, radio, radio_group

* removed unwanted changes

* removed codespell ignores and pyright type checking ignores

* remove misc changes

---------

Co-authored-by: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>

reflex/components/radix/themes/components/context_menu.py

@@ -10,6 +10,7 @@ from reflex.vars.base import Var
 
 from ..base import LiteralAccentColor, RadixThemesComponent
 from .checkbox import Checkbox
+from .radio_group import HighLevelRadioGroup
 
 LiteralDirType = Literal["ltr", "rtl"]
 
@@ -226,7 +227,11 @@ class ContextMenuItem(RadixThemesComponent):
     # Optional text used for typeahead purposes. By default the typeahead behavior will use the content of the item. Use this when the content is complex, or you have non-textual content inside.
     text_value: Var[str]
 
-    _valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSubContent"]
+    _valid_parents: List[str] = [
+        "ContextMenuContent",
+        "ContextMenuSubContent",
+        "ContextMenuGroup",
+    ]
 
     # Fired when the item is selected.
     on_select: EventHandler[no_args_event_spec]
@@ -247,6 +252,75 @@ class ContextMenuCheckbox(Checkbox):
     shortcut: Var[str]
 
 
+class ContextMenuLabel(RadixThemesComponent):
+    """The component that contains the label."""
+
+    tag = "ContextMenu.Label"
+
+    # 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 ContextMenuGroup(RadixThemesComponent):
+    """The component that contains the group."""
+
+    tag = "ContextMenu.Group"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    _valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSubContent"]
+
+
+class ContextMenuRadioGroup(RadixThemesComponent):
+    """The component that contains context menu radio items."""
+
+    tag = "ContextMenu.RadioGroup"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # The value of the selected item in the group.
+    value: Var[str]
+
+    # Props to rename
+    _rename_props = {"onChange": "onValueChange"}
+
+    # Fired when the value of the radio group changes.
+    on_change: EventHandler[passthrough_event_spec(str)]
+
+    _valid_parents: List[str] = [
+        "ContextMenuRadioItem",
+        "ContextMenuSubContent",
+        "ContextMenuContent",
+        "ContextMenuSub",
+    ]
+
+
+class ContextMenuRadioItem(HighLevelRadioGroup):
+    """The component that contains context menu radio items."""
+
+    tag = "ContextMenu.RadioItem"
+
+    # Override theme color for Dropdown Menu Content
+    color_scheme: Var[LiteralAccentColor]
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # The unique value of the item.
+    value: Var[str]
+
+    # When true, prevents the user from interacting with the item.
+    disabled: Var[bool]
+
+    # Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the context menu from closing when selecting that item.
+    on_select: EventHandler[no_args_event_spec]
+
+    # 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 ContextMenu(ComponentNamespace):
     """Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press."""
 
@@ -259,6 +333,10 @@ class ContextMenu(ComponentNamespace):
     item = staticmethod(ContextMenuItem.create)
     separator = staticmethod(ContextMenuSeparator.create)
     checkbox = staticmethod(ContextMenuCheckbox.create)
+    label = staticmethod(ContextMenuLabel.create)
+    group = staticmethod(ContextMenuGroup.create)
+    radio_group = staticmethod(ContextMenuRadioGroup.create)
+    radio = staticmethod(ContextMenuRadioItem.create)
 
 
 context_menu = ContextMenu()

reflex/components/radix/themes/components/context_menu.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Dict, List, Literal, Optional, Union, overload
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Breakpoints
@@ -13,6 +13,7 @@ from reflex.vars.base import Var
 
 from ..base import RadixThemesComponent
 from .checkbox import Checkbox
+from .radio_group import HighLevelRadioGroup
 
 LiteralDirType = Literal["ltr", "rtl"]
 LiteralSizeType = Literal["1", "2"]
@@ -820,6 +821,320 @@ class ContextMenuCheckbox(Checkbox):
         """
         ...
 
+class ContextMenuLabel(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        on_blur: Optional[EventType[()]] = None,
+        on_click: Optional[EventType[()]] = None,
+        on_context_menu: Optional[EventType[()]] = None,
+        on_double_click: Optional[EventType[()]] = None,
+        on_focus: Optional[EventType[()]] = None,
+        on_mount: Optional[EventType[()]] = None,
+        on_mouse_down: Optional[EventType[()]] = None,
+        on_mouse_enter: Optional[EventType[()]] = None,
+        on_mouse_leave: Optional[EventType[()]] = None,
+        on_mouse_move: Optional[EventType[()]] = None,
+        on_mouse_out: Optional[EventType[()]] = None,
+        on_mouse_over: Optional[EventType[()]] = None,
+        on_mouse_up: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[()]] = None,
+        on_unmount: Optional[EventType[()]] = None,
+        **props,
+    ) -> "ContextMenuLabel":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            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.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuGroup(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        on_blur: Optional[EventType[()]] = None,
+        on_click: Optional[EventType[()]] = None,
+        on_context_menu: Optional[EventType[()]] = None,
+        on_double_click: Optional[EventType[()]] = None,
+        on_focus: Optional[EventType[()]] = None,
+        on_mount: Optional[EventType[()]] = None,
+        on_mouse_down: Optional[EventType[()]] = None,
+        on_mouse_enter: Optional[EventType[()]] = None,
+        on_mouse_leave: Optional[EventType[()]] = None,
+        on_mouse_move: Optional[EventType[()]] = None,
+        on_mouse_out: Optional[EventType[()]] = None,
+        on_mouse_over: Optional[EventType[()]] = None,
+        on_mouse_up: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[()]] = None,
+        on_unmount: Optional[EventType[()]] = None,
+        **props,
+    ) -> "ContextMenuGroup":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            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.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuRadioGroup(RadixThemesComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        on_blur: Optional[EventType[()]] = None,
+        on_change: Optional[Union[EventType[()], EventType[str]]] = None,
+        on_click: Optional[EventType[()]] = None,
+        on_context_menu: Optional[EventType[()]] = None,
+        on_double_click: Optional[EventType[()]] = None,
+        on_focus: Optional[EventType[()]] = None,
+        on_mount: Optional[EventType[()]] = None,
+        on_mouse_down: Optional[EventType[()]] = None,
+        on_mouse_enter: Optional[EventType[()]] = None,
+        on_mouse_leave: Optional[EventType[()]] = None,
+        on_mouse_move: Optional[EventType[()]] = None,
+        on_mouse_out: Optional[EventType[()]] = None,
+        on_mouse_over: Optional[EventType[()]] = None,
+        on_mouse_up: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[()]] = None,
+        on_unmount: Optional[EventType[()]] = None,
+        **props,
+    ) -> "ContextMenuRadioGroup":
+        """Create a new component instance.
+
+        Will prepend "RadixThemes" to the component tag to avoid conflicts with
+        other UI libraries for common names, like Text and Button.
+
+        Args:
+            *children: Child components.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            value: The value of the selected item in the group.
+            on_change: Fired when the value of the radio group changes.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Component properties.
+
+        Returns:
+            A new component instance.
+        """
+        ...
+
+class ContextMenuRadioItem(HighLevelRadioGroup):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        color_scheme: Optional[
+            Union[
+                Literal[
+                    "amber",
+                    "blue",
+                    "bronze",
+                    "brown",
+                    "crimson",
+                    "cyan",
+                    "gold",
+                    "grass",
+                    "gray",
+                    "green",
+                    "indigo",
+                    "iris",
+                    "jade",
+                    "lime",
+                    "mint",
+                    "orange",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "red",
+                    "ruby",
+                    "sky",
+                    "teal",
+                    "tomato",
+                    "violet",
+                    "yellow",
+                ],
+                Var[
+                    Literal[
+                        "amber",
+                        "blue",
+                        "bronze",
+                        "brown",
+                        "crimson",
+                        "cyan",
+                        "gold",
+                        "grass",
+                        "gray",
+                        "green",
+                        "indigo",
+                        "iris",
+                        "jade",
+                        "lime",
+                        "mint",
+                        "orange",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "red",
+                        "ruby",
+                        "sky",
+                        "teal",
+                        "tomato",
+                        "violet",
+                        "yellow",
+                    ]
+                ],
+            ]
+        ] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        text_value: Optional[Union[Var[str], str]] = None,
+        items: Optional[Union[List[str], Var[List[str]]]] = None,
+        direction: Optional[
+            Union[
+                Literal["column", "column-reverse", "row", "row-reverse"],
+                Var[Literal["column", "column-reverse", "row", "row-reverse"]],
+            ]
+        ] = None,
+        spacing: Optional[
+            Union[
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+            ]
+        ] = None,
+        size: Optional[
+            Union[Literal["1", "2", "3"], Var[Literal["1", "2", "3"]]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Literal["classic", "soft", "surface"],
+                Var[Literal["classic", "soft", "surface"]],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        on_blur: Optional[EventType[()]] = None,
+        on_click: Optional[EventType[()]] = None,
+        on_context_menu: Optional[EventType[()]] = None,
+        on_double_click: Optional[EventType[()]] = None,
+        on_focus: Optional[EventType[()]] = None,
+        on_mount: Optional[EventType[()]] = None,
+        on_mouse_down: Optional[EventType[()]] = None,
+        on_mouse_enter: Optional[EventType[()]] = None,
+        on_mouse_leave: Optional[EventType[()]] = None,
+        on_mouse_move: Optional[EventType[()]] = None,
+        on_mouse_out: Optional[EventType[()]] = None,
+        on_mouse_over: Optional[EventType[()]] = None,
+        on_mouse_up: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[()]] = None,
+        on_select: Optional[EventType[()]] = None,
+        on_unmount: Optional[EventType[()]] = None,
+        **props,
+    ) -> "ContextMenuRadioItem":
+        """Create a radio group component.
+
+        Args:
+            items: The items of the radio group.
+            color_scheme: The color of the radio group
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            value: The controlled value of the radio item to check. Should be used in conjunction with on_change.
+            disabled: Whether the radio group is disabled
+            on_select: Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the context menu from closing when selecting that 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.
+            items: The items of the radio group.
+            direction: The direction of the radio group.
+            spacing: The gap between the items of the radio group.
+            size: The size of the radio group.
+            variant: The variant of the radio group
+            high_contrast: Whether to render the radio group with higher contrast color against background
+            default_value: The initial value of checked radio item. Should be used in conjunction with on_change.
+            name: The name of the group. Submitted with its owning form as part of a name/value pair.
+            required: Whether the radio group is required
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The created radio group component.
+
+        Raises:
+            TypeError: If the type of items is invalid.
+        """
+        ...
+
 class ContextMenu(ComponentNamespace):
     root = staticmethod(ContextMenuRoot.create)
     trigger = staticmethod(ContextMenuTrigger.create)
@@ -830,5 +1145,9 @@ class ContextMenu(ComponentNamespace):
     item = staticmethod(ContextMenuItem.create)
     separator = staticmethod(ContextMenuSeparator.create)
     checkbox = staticmethod(ContextMenuCheckbox.create)
+    label = staticmethod(ContextMenuLabel.create)
+    group = staticmethod(ContextMenuGroup.create)
+    radio_group = staticmethod(ContextMenuRadioGroup.create)
+    radio = staticmethod(ContextMenuRadioItem.create)
 
 context_menu = ContextMenu()