reflex 0.5.3a2__py3-none-any.whl → 0.5.4__py3-none-any.whl

reflex/components/markdown/markdown.py

@@ -23,19 +23,23 @@ from reflex.utils.imports import ImportVar
 from reflex.vars import Var
 
 # Special vars used in the component map.
-_CHILDREN = Var.create_safe("children", _var_is_local=False)
-_PROPS = Var.create_safe("...props", _var_is_local=False)
-_MOCK_ARG = Var.create_safe("")
+_CHILDREN = Var.create_safe("children", _var_is_local=False, _var_is_string=False)
+_PROPS = Var.create_safe("...props", _var_is_local=False, _var_is_string=False)
+_MOCK_ARG = Var.create_safe("", _var_is_string=False)
 
 # Special remark plugins.
-_REMARK_MATH = Var.create_safe("remarkMath", _var_is_local=False)
-_REMARK_GFM = Var.create_safe("remarkGfm", _var_is_local=False)
-_REMARK_UNWRAP_IMAGES = Var.create_safe("remarkUnwrapImages", _var_is_local=False)
+_REMARK_MATH = Var.create_safe("remarkMath", _var_is_local=False, _var_is_string=False)
+_REMARK_GFM = Var.create_safe("remarkGfm", _var_is_local=False, _var_is_string=False)
+_REMARK_UNWRAP_IMAGES = Var.create_safe(
+    "remarkUnwrapImages", _var_is_local=False, _var_is_string=False
+)
 _REMARK_PLUGINS = Var.create_safe([_REMARK_MATH, _REMARK_GFM, _REMARK_UNWRAP_IMAGES])
 
 # Special rehype plugins.
-_REHYPE_KATEX = Var.create_safe("rehypeKatex", _var_is_local=False)
-_REHYPE_RAW = Var.create_safe("rehypeRaw", _var_is_local=False)
+_REHYPE_KATEX = Var.create_safe(
+    "rehypeKatex", _var_is_local=False, _var_is_string=False
+)
+_REHYPE_RAW = Var.create_safe("rehypeRaw", _var_is_local=False, _var_is_string=False)
 _REHYPE_PLUGINS = Var.create_safe([_REHYPE_KATEX, _REHYPE_RAW])
 
 # These tags do NOT get props passed to them
@@ -210,7 +214,9 @@ class Markdown(Component):
         # If the children are set as a prop, don't pass them as children.
         children_prop = props.pop("children", None)
         if children_prop is not None:
-            special_props.add(Var.create_safe(f"children={str(children_prop)}"))
+            special_props.add(
+                Var.create_safe(f"children={str(children_prop)}", _var_is_string=False)
+            )
             children = []
 
         # Get the component.
@@ -229,7 +235,7 @@ class Markdown(Component):
         Returns:
             The formatted component.
         """
-        return str(self.get_component(tag, **props)).replace("\n", " ")
+        return str(self.get_component(tag, **props)).replace("\n", "")
 
     def format_component_map(self) -> dict[str, str]:
         """Format the component map for rendering.
@@ -259,7 +265,7 @@ class Markdown(Component):
     return inline ? (
         {self.format_component("code")}
     ) : (
-        {self.format_component("codeblock", language=Var.create_safe("language", _var_is_local=False))}
+        {self.format_component("codeblock", language=Var.create_safe("language", _var_is_local=False, _var_is_string=False))}
     );
       }}}}""".replace("\n", " ")
 

reflex/components/markdown/markdown.pyi

@@ -26,15 +26,19 @@ from reflex.utils import imports, types
 from reflex.utils.imports import ImportVar
 from reflex.vars import Var
 
-_CHILDREN = Var.create_safe("children", _var_is_local=False)
-_PROPS = Var.create_safe("...props", _var_is_local=False)
-_MOCK_ARG = Var.create_safe("")
-_REMARK_MATH = Var.create_safe("remarkMath", _var_is_local=False)
-_REMARK_GFM = Var.create_safe("remarkGfm", _var_is_local=False)
-_REMARK_UNWRAP_IMAGES = Var.create_safe("remarkUnwrapImages", _var_is_local=False)
+_CHILDREN = Var.create_safe("children", _var_is_local=False, _var_is_string=False)
+_PROPS = Var.create_safe("...props", _var_is_local=False, _var_is_string=False)
+_MOCK_ARG = Var.create_safe("", _var_is_string=False)
+_REMARK_MATH = Var.create_safe("remarkMath", _var_is_local=False, _var_is_string=False)
+_REMARK_GFM = Var.create_safe("remarkGfm", _var_is_local=False, _var_is_string=False)
+_REMARK_UNWRAP_IMAGES = Var.create_safe(
+    "remarkUnwrapImages", _var_is_local=False, _var_is_string=False
+)
 _REMARK_PLUGINS = Var.create_safe([_REMARK_MATH, _REMARK_GFM, _REMARK_UNWRAP_IMAGES])
-_REHYPE_KATEX = Var.create_safe("rehypeKatex", _var_is_local=False)
-_REHYPE_RAW = Var.create_safe("rehypeRaw", _var_is_local=False)
+_REHYPE_KATEX = Var.create_safe(
+    "rehypeKatex", _var_is_local=False, _var_is_string=False
+)
+_REHYPE_RAW = Var.create_safe("rehypeRaw", _var_is_local=False, _var_is_string=False)
 _REHYPE_PLUGINS = Var.create_safe([_REHYPE_KATEX, _REHYPE_RAW])
 NO_PROPS_TAGS = ("ul", "ol", "li")
 

reflex/components/plotly/plotly.py

@@ -4,14 +4,20 @@ from __future__ import annotations
 from typing import Any, Dict, List
 
 from reflex.base import Base
-from reflex.components.component import NoSSRComponent
+from reflex.components.component import Component, NoSSRComponent
+from reflex.components.core.cond import color_mode_cond
 from reflex.event import EventHandler
+from reflex.utils import console
 from reflex.vars import Var
 
 try:
-    from plotly.graph_objects import Figure
+    from plotly.graph_objects import Figure, layout
+
+    Template = layout.Template
 except ImportError:
+    console.warn("Plotly is not installed. Please run `pip install plotly`.")
     Figure = Any  # type: ignore
+    Template = Any  # type: ignore
 
 
 def _event_data_signature(e0: Var) -> List[Any]:
@@ -23,7 +29,7 @@ def _event_data_signature(e0: Var) -> List[Any]:
     Returns:
         The event key extracted from the event data (if defined).
     """
-    return [Var.create_safe(f"{e0}?.event")]
+    return [Var.create_safe(f"{e0}?.event", _var_is_string=False)]
 
 
 def _event_points_data_signature(e0: Var) -> List[Any]:
@@ -36,9 +42,10 @@ def _event_points_data_signature(e0: Var) -> List[Any]:
         The event data and the extracted points.
     """
     return [
-        Var.create_safe(f"{e0}?.event"),
+        Var.create_safe(f"{e0}?.event", _var_is_string=False),
         Var.create_safe(
             f"extractPoints({e0}?.points)",
+            _var_is_string=False,
         ),
     ]
 
@@ -84,17 +91,13 @@ def _null_signature() -> List[Any]:
     return []
 
 
-class PlotlyLib(NoSSRComponent):
-    """A component that wraps a plotly lib."""
+class Plotly(NoSSRComponent):
+    """Display a plotly graph."""
 
     library = "react-plotly.js@2.6.0"
 
     lib_dependencies: List[str] = ["plotly.js@2.22.0"]
 
-
-class Plotly(PlotlyLib):
-    """Display a plotly graph."""
-
     tag = "Plot"
 
     is_default = True
@@ -105,6 +108,9 @@ class Plotly(PlotlyLib):
     # The layout of the graph.
     layout: Var[Dict]
 
+    # The template for visual appearance of the graph.
+    template: Var[Template]
+
     # The config of the graph.
     config: Var[Dict]
 
@@ -171,6 +177,17 @@ class Plotly(PlotlyLib):
     # Fired when a hovered element is no longer hovered.
     on_unhover: EventHandler[_event_points_data_signature]
 
+    def add_imports(self) -> dict[str, str]:
+        """Add imports for the plotly component.
+
+        Returns:
+            The imports for the plotly component.
+        """
+        return {
+            # For merging plotly data/layout/templates.
+            "mergician@v2.0.2": "mergician"
+        }
+
     def add_custom_code(self) -> list[str]:
         """Add custom codes for processing the plotly points data.
 
@@ -210,14 +227,65 @@ const extractPoints = (points) => {
 """,
         ]
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Plotly component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Plotly component.
+        """
+        from plotly.io import templates
+
+        responsive_template = color_mode_cond(
+            light=Var.create_safe(templates["plotly"]).to(dict),
+            dark=Var.create_safe(templates["plotly_dark"]).to(dict),
+        )
+        if isinstance(responsive_template, Var):
+            # Mark the conditional Var as a Template to avoid type mismatch
+            responsive_template = responsive_template.to(Template)
+        props.setdefault("template", responsive_template)
+        return super().create(*children, **props)
+
+    def _exclude_props(self) -> set[str]:
+        # These props are handled specially in the _render function
+        return {"data", "layout", "template"}
+
     def _render(self):
         tag = super()._render()
         figure = self.data.to(dict)
-        if self.layout is None:
-            tag.remove_props("data", "layout")
+        merge_dicts = []  # Data will be merged and spread from these dict Vars
+        if self.layout is not None:
+            # Why is this not a literal dict? Great question... it didn't work
+            # reliably because of how _var_name_unwrapped strips the outer curly
+            # brackets if any of the contained Vars depend on state.
+            layout_dict = Var.create_safe(
+                f"{{'layout': {self.layout.to(dict)._var_name_unwrapped}}}"
+            ).to(dict)
+            merge_dicts.append(layout_dict)
+        if self.template is not None:
+            template_dict = Var.create_safe(
+                {"layout": {"template": self.template.to(dict)}}
+            )
+            template_dict._var_data = None  # To avoid stripping outer curly brackets
+            merge_dicts.append(template_dict)
+        if merge_dicts:
             tag.special_props.add(
-                Var.create_safe(f"{{...{figure._var_name_unwrapped}}}")
+                # Merge all dictionaries and spread the result over props.
+                Var.create_safe(
+                    f"{{...mergician({figure._var_name_unwrapped},"
+                    f"{','.join(md._var_name_unwrapped for md in merge_dicts)})}}",
+                    _var_is_string=False,
+                ),
             )
         else:
-            tag.add_props(data=figure["data"])
+            # Spread the figure dict over props, nothing to merge.
+            tag.special_props.add(
+                Var.create_safe(
+                    f"{{...{figure._var_name_unwrapped}}}", _var_is_string=False
+                )
+            )
         return tag

reflex/components/plotly/plotly.pyi

@@ -9,97 +9,28 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List
 from reflex.base import Base
-from reflex.components.component import NoSSRComponent
+from reflex.components.component import Component, NoSSRComponent
+from reflex.components.core.cond import color_mode_cond
 from reflex.event import EventHandler
+from reflex.utils import console
 from reflex.vars import Var
 
 try:
-    from plotly.graph_objects import Figure  # type: ignore
+    from plotly.graph_objects import Figure, layout  # type: ignore
+
+    Template = layout.Template
 except ImportError:
+    console.warn("Plotly is not installed. Please run `pip install plotly`.")
     Figure = Any  # type: ignore
+    Template = Any
 
 class _ButtonClickData(Base):
     menu: Any
     button: Any
     active: Any
 
-class PlotlyLib(NoSSRComponent):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        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, str]]] = None,
-        on_blur: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_focus: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_scroll: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        **props
-    ) -> "PlotlyLib":
-        """Create the component.
-
-        Args:
-            *children: The children of the component.
-            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: The props of the component.
-
-        Returns:
-            The component.
-        """
-        ...
-
-class Plotly(PlotlyLib):
+class Plotly(NoSSRComponent):
+    def add_imports(self) -> dict[str, str]: ...
     def add_custom_code(self) -> list[str]: ...
     @overload
     @classmethod
@@ -108,6 +39,7 @@ class Plotly(PlotlyLib):
         *children,
         data: Optional[Union[Var[Figure], Figure]] = None,  # type: ignore
         layout: Optional[Union[Var[Dict], Dict]] = None,
+        template: Optional[Union[Var[Template], Template]] = None,  # type: ignore
         config: Optional[Union[Var[Dict], Dict]] = None,
         use_resize_handler: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
@@ -217,12 +149,13 @@ class Plotly(PlotlyLib):
         ] = None,
         **props
     ) -> "Plotly":
-        """Create the component.
+        """Create the Plotly component.
 
         Args:
             *children: The children of the component.
             data: The figure to display. This can be a plotly figure or a plotly data json.
             layout: The layout of the graph.
+            template: The template for visual appearance of the graph.
             config: The config of the graph.
             use_resize_handler: If true, the graph will resize when the window is resized.
             style: The style of the component.
@@ -231,9 +164,9 @@ class Plotly(PlotlyLib):
             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: The props of the component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
+            The Plotly component.
         """
         ...

reflex/components/radix/primitives/accordion.py

@@ -105,7 +105,7 @@ class AccordionRoot(AccordionComponent):
     duration: Var[int] = Var.create_safe(DEFAULT_ANIMATION_DURATION)
 
     # The easing function to use for the animation.
-    easing: Var[str] = Var.create_safe(DEFAULT_ANIMATION_EASING)
+    easing: Var[str] = Var.create_safe(DEFAULT_ANIMATION_EASING, _var_is_string=True)
 
     # Whether to show divider lines between items.
     show_dividers: Var[bool]

reflex/components/radix/themes/base.py

@@ -233,6 +233,7 @@ class Theme(RadixThemesComponent):
             css=Var.create(
                 "{{...theme.styles.global[':root'], ...theme.styles.global.body}}",
                 _var_is_local=False,
+                _var_is_string=False,
             ),
         )
         return tag
@@ -257,10 +258,16 @@ class ThemePanel(RadixThemesComponent):
         """
         return {"react": "useEffect"}
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Add a hook on the ThemePanel to clear chakra-ui-color-mode.
+
+        Returns:
+            The hooks to render.
+        """
         # The panel freezes the tab if the user color preference differs from the
         # theme "appearance", so clear it out when theme panel is used.
-        return """
+        return [
+            """
             useEffect(() => {
                 if (typeof window !== 'undefined') {
                     window.onbeforeunload = () => {
@@ -269,6 +276,7 @@ class ThemePanel(RadixThemesComponent):
                     window.onbeforeunload();
                 }
             }, [])"""
+        ]
 
 
 class RadixThemesColorModeProvider(Component):

reflex/components/radix/themes/base.pyi

@@ -584,6 +584,7 @@ class Theme(RadixThemesComponent):
 
 class ThemePanel(RadixThemesComponent):
     def add_imports(self) -> dict[str, str]: ...
+    def add_hooks(self) -> list[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/color_mode.py

@@ -73,7 +73,7 @@ position_map = {
 
 # needed to inverse contains for find
 def _find(const, var):
-    return Var.create_safe(const).contains(var)
+    return Var.create_safe(const, _var_is_string=False).contains(var)
 
 
 def _set_var_default(props, position, prop, default1, default2=""):

reflex/components/radix/themes/components/checkbox.py

@@ -130,7 +130,9 @@ class HighLevelCheckbox(RadixThemesComponent):
         }
 
     @classmethod
-    def create(cls, text: Var[str] = Var.create_safe(""), **props) -> Component:
+    def create(
+        cls, text: Var[str] = Var.create_safe("", _var_is_string=True), **props
+    ) -> Component:
         """Create a checkbox with a label.
 
         Args:

reflex/components/radix/themes/components/radio_group.py

@@ -91,10 +91,10 @@ class HighLevelRadioGroup(RadixThemesComponent):
     direction: Var[LiteralFlexDirection]
 
     # The gap between the items of the radio group.
-    spacing: Var[LiteralSpacing] = Var.create_safe("2")
+    spacing: Var[LiteralSpacing] = Var.create_safe("2", _var_is_string=True)
 
     # The size of the radio group.
-    size: Var[Literal["1", "2", "3"]] = Var.create_safe("2")
+    size: Var[Literal["1", "2", "3"]] = Var.create_safe("2", _var_is_string=True)
 
     # The variant of the radio group
     variant: Var[Literal["classic", "surface", "soft"]]
@@ -151,11 +151,13 @@ class HighLevelRadioGroup(RadixThemesComponent):
             default_value = Var.create(default_value, _var_is_string=True)  # type: ignore
         else:
             default_value = (
-                Var.create(default_value).to_string()._replace(_var_is_local=False)  # type: ignore
+                Var.create(default_value, _var_is_string=False)
+                .to_string()  # type: ignore
+                ._replace(_var_is_local=False)
             )
 
         def radio_group_item(value: str | Var) -> Component:
-            item_value = Var.create(value)  # type: ignore
+            item_value = Var.create(value, _var_is_string=False)  # type: ignore
             item_value = rx.cond(
                 item_value._type() == str,  # type: ignore
                 item_value,

reflex/components/radix/themes/components/separator.py

@@ -17,7 +17,7 @@ class Separator(RadixThemesComponent):
     tag = "Separator"
 
     # The size of the select: "1" | "2" | "3" | "4"
-    size: Var[LiteralSeperatorSize] = Var.create_safe("4")
+    size: Var[LiteralSeperatorSize] = Var.create_safe("4", _var_is_string=True)
 
     # The color of the select
     color_scheme: Var[LiteralAccentColor]

reflex/components/radix/themes/layout/container.py

@@ -21,7 +21,7 @@ class Container(elements.Div, RadixThemesComponent):
     tag = "Container"
 
     # The size of the container: "1" - "4" (default "3")
-    size: Var[LiteralContainerSize] = Var.create_safe("3")
+    size: Var[LiteralContainerSize] = Var.create_safe("3", _var_is_string=True)
 
     @classmethod
     def create(

reflex/components/radix/themes/layout/section.py

@@ -17,7 +17,7 @@ class Section(elements.Section, RadixThemesComponent):
     tag = "Section"
 
     # The size of the section: "1" - "3" (default "2")
-    size: Var[LiteralSectionSize] = Var.create_safe("2")
+    size: Var[LiteralSectionSize] = Var.create_safe("2", _var_is_string=True)
 
 
 section = Section.create