Add primitive radix dialog (#5848)

* add primitive radix dialog

* precommit

* Div

* set where we import from

Author: adhami3310

pyi_hashes.json

@@ -44,9 +44,10 @@
   "reflex/components/moment/moment.pyi": "93fa4c6009390fe9400197ab52735b84",
   "reflex/components/plotly/plotly.pyi": "4311a0aae2abcc9226abb6a273f96372",
   "reflex/components/radix/__init__.pyi": "5d8e3579912473e563676bfc71f29191",
-  "reflex/components/radix/primitives/__init__.pyi": "68fcf93acb9a40d94561d375a3a5fdb1",
+  "reflex/components/radix/primitives/__init__.pyi": "01c388fe7a1f5426a16676404344edf6",
   "reflex/components/radix/primitives/accordion.pyi": "9192299dac04a5172edd7b2f6b125f53",
-  "reflex/components/radix/primitives/base.pyi": "336f5e26669a809454bb343e698ab563",
+  "reflex/components/radix/primitives/base.pyi": "8918eb415aabd66736db1ba680de5eb9",
+  "reflex/components/radix/primitives/dialog.pyi": "86b6498d67471de91f0854aec02b39e8",
   "reflex/components/radix/primitives/drawer.pyi": "c6ad2f60217fe25952f3a1ba88fbd72a",
   "reflex/components/radix/primitives/form.pyi": "8a5ec180a50acdc35dfe53e4e65c20e0",
   "reflex/components/radix/primitives/progress.pyi": "b26c99c1d827c0f599fff344746aeec3",

reflex/components/radix/primitives/__init__.py

@@ -8,7 +8,7 @@
 _SUBMOD_ATTRS: dict[str, list[str]] = {
     "".join(k.split("components.radix.primitives.")[-1]): v
     for k, v in RADIX_PRIMITIVES_MAPPING.items()
-}
+} | {"dialog": ["dialog"]}
 
 __getattr__, __dir__, __all__ = lazy_loader.attach(
     __name__,

reflex/components/radix/primitives/base.py

@@ -1,5 +1,7 @@
 """The base component for Radix primitives."""
 
+from typing import Any
+
 from reflex.components.component import Component
 from reflex.components.tags.tag import Tag
 from reflex.utils import format
@@ -24,3 +26,32 @@ def _render(self) -> Tag:
                 class_name=f"{format.to_title_case(self.tag or '')} {self.class_name or ''}"
             )
         )
+
+
+class RadixPrimitiveTriggerComponent(RadixPrimitiveComponent):
+    """Base class for Trigger, Close, Cancel, and Accept components.
+
+    These components trigger some action in an overlay component that depends on the
+    on_click event, and thus if a child is provided and has on_click specified, it
+    will overtake the internal action, unless it is wrapped in some inert component,
+    in this case, a Flex.
+    """
+
+    @classmethod
+    def create(cls, *children: Any, **props: Any) -> Component:
+        """Create a new RadixPrimitiveTriggerComponent instance.
+
+        Args:
+            children: The children of the component.
+            props: The properties of the component.
+
+        Returns:
+            The new RadixPrimitiveTriggerComponent instance.
+        """
+        from reflex.components.el.elements.typography import Div
+
+        for child in children:
+            if "on_click" in getattr(child, "event_triggers", {}):
+                children = (Div.create(*children),)
+                break
+        return super().create(*children, **props)

reflex/components/radix/primitives/dialog.py

@@ -0,0 +1,148 @@
+"""Interactive components provided by @radix-ui/react-dialog."""
+
+from typing import Any
+
+from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
+from reflex.constants.compiler import MemoizationMode
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
+from reflex.vars.base import Var
+
+from .base import RadixPrimitiveComponent, RadixPrimitiveTriggerComponent
+
+
+class DialogElement(RadixPrimitiveComponent):
+    """Base class for all @radix-ui/react-dialog components."""
+
+    library = "@radix-ui/[email protected]"
+
+
+class DialogRoot(DialogElement):
+    """Root component for Dialog."""
+
+    tag = "Root"
+    alias = "RadixPrimitiveDialogRoot"
+
+    # The controlled open state of the dialog.
+    open: Var[bool]
+
+    # Fired when the open state changes.
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
+
+    # The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
+    modal: Var[bool]
+
+
+class DialogPortal(DialogElement):
+    """Portal component for Dialog."""
+
+    tag = "Portal"
+    alias = "RadixPrimitiveDialogPortal"
+
+    # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by Dialog.Overlay and Dialog.Content.
+    force_mount: Var[bool]
+
+    # Specify a container element to portal the content into.
+    container: Var[Any]
+
+
+class DialogOverlay(DialogElement):
+    """A layer that covers the inert portion of the view when the dialog is open."""
+
+    tag = "Overlay"
+    alias = "RadixPrimitiveDialogOverlay"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Dialog.Portal.
+    force_mount: Var[bool]
+
+
+class DialogTrigger(DialogElement, RadixPrimitiveTriggerComponent):
+    """Trigger an action or event, to open a Dialog modal."""
+
+    tag = "Trigger"
+    alias = "RadixPrimitiveDialogTrigger"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    _memoization_mode = MemoizationMode(recursive=False)
+
+
+class DialogContent(elements.Div, DialogElement):
+    """Content component to display inside a Dialog modal."""
+
+    tag = "Content"
+    alias = "RadixPrimitiveDialogContent"
+
+    # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Dialog.Portal.
+    force_mount: Var[bool]
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+    # Fired when the dialog is opened.
+    on_open_auto_focus: EventHandler[no_args_event_spec]
+
+    # Fired when the dialog is closed.
+    on_close_auto_focus: EventHandler[no_args_event_spec]
+
+    # Fired when the escape key is pressed.
+    on_escape_key_down: EventHandler[no_args_event_spec]
+
+    # Fired when the pointer is down outside the dialog.
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
+
+    # Fired when the pointer interacts outside the dialog.
+    on_interact_outside: EventHandler[no_args_event_spec]
+
+
+class DialogTitle(DialogElement):
+    """Title component to display inside a Dialog modal."""
+
+    tag = "Title"
+    alias = "RadixPrimitiveDialogTitle"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+
+class DialogDescription(DialogElement):
+    """Description component to display inside a Dialog modal."""
+
+    tag = "Description"
+    alias = "RadixPrimitiveDialogDescription"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+
+class DialogClose(DialogElement, RadixPrimitiveTriggerComponent):
+    """Close button component to close an open Dialog modal."""
+
+    tag = "Close"
+    alias = "RadixPrimitiveDialogClose"
+
+    # Change the default rendered element for the one passed as a child, merging their props and behavior.
+    as_child: Var[bool]
+
+
+class Dialog(ComponentNamespace):
+    """Dialog components namespace."""
+
+    root = __call__ = staticmethod(DialogRoot.create)
+    portal = staticmethod(DialogPortal.create)
+    trigger = staticmethod(DialogTrigger.create)
+    title = staticmethod(DialogTitle.create)
+    overlay = staticmethod(DialogOverlay.create)
+    content = staticmethod(DialogContent.create)
+    description = staticmethod(DialogDescription.create)
+    close = staticmethod(DialogClose.create)
+
+
+dialog = Dialog()