reflex 0.4.5a2__py3-none-any.whl → 0.4.6a1__py3-none-any.whl

reflex/components/component.py

@@ -21,6 +21,7 @@ from typing import (
     Union,
 )
 
+import reflex.state
 from reflex.base import Base
 from reflex.compiler.templates import STATEFUL_COMPONENT
 from reflex.components.tags import Tag
@@ -74,6 +75,14 @@ class BaseComponent(Base, ABC):
             The dictionary for template of the component.
         """
 
+    @abstractmethod
+    def get_ref_hooks(self) -> set[str]:
+        """Get the hooks required by refs in this component.
+
+        Returns:
+            The hooks for the refs.
+        """
+
     @abstractmethod
     def get_hooks_internal(self) -> set[str]:
         """Get the reflex internal hooks for the component and its children.
@@ -206,6 +215,9 @@ class Component(BaseComponent, ABC):
     # When to memoize this component and its children.
     _memoization_mode: MemoizationMode = MemoizationMode()
 
+    # State class associated with this component instance
+    State: Optional[Type[reflex.state.State]] = None
+
     @classmethod
     def __init_subclass__(cls, **kwargs):
         """Set default properties.
@@ -228,6 +240,8 @@ class Component(BaseComponent, ABC):
             if types._issubclass(field.type_, Var):
                 field.required = False
                 field.default = Var.create(field.default)
+            elif types._issubclass(field.type_, EventHandler):
+                field.required = False
 
         # Ensure renamed props from parent classes are applied to the subclass.
         if cls._rename_props:
@@ -264,7 +278,8 @@ class Component(BaseComponent, ABC):
 
         # Get the component fields, triggers, and props.
         fields = self.get_fields()
-        triggers = self.get_event_triggers().keys()
+        component_specific_triggers = self.get_event_triggers()
+        triggers = component_specific_triggers.keys()
         props = self.get_props()
 
         # Add any events triggers.
@@ -319,7 +334,9 @@ class Component(BaseComponent, ABC):
             # Check if the key is an event trigger.
             if key in triggers:
                 # Temporarily disable full control for event triggers.
-                kwargs["event_triggers"][key] = self._create_event_chain(key, value)
+                kwargs["event_triggers"][key] = self._create_event_chain(
+                    value=value, args_spec=component_specific_triggers[key]
+                )
 
         # Remove any keys that were added as events.
         for key in kwargs["event_triggers"]:
@@ -351,7 +368,7 @@ class Component(BaseComponent, ABC):
 
     def _create_event_chain(
         self,
-        event_trigger: str,
+        args_spec: Any,
         value: Union[
             Var, EventHandler, EventSpec, List[Union[EventHandler, EventSpec]], Callable
         ],
@@ -359,7 +376,7 @@ class Component(BaseComponent, ABC):
         """Create an event chain from a variety of input types.
 
         Args:
-            event_trigger: The event trigger to bind the chain to.
+            args_spec: The args_spec of the the event trigger being bound.
             value: The value to create the event chain from.
 
         Returns:
@@ -368,9 +385,6 @@ class Component(BaseComponent, ABC):
         Raises:
             ValueError: If the value is not a valid event chain.
         """
-        # Check if the trigger is a controlled event.
-        triggers = self.get_event_triggers()
-
         # If it's an event chain var, return it.
         if isinstance(value, Var):
             if value._var_type is not EventChain:
@@ -380,8 +394,6 @@ class Component(BaseComponent, ABC):
             # Trust that the caller knows what they're doing passing an EventChain directly
             return value
 
-        arg_spec = triggers.get(event_trigger, lambda: [])
-
         # If the input is a single event handler, wrap it in a list.
         if isinstance(value, (EventHandler, EventSpec)):
             value = [value]
@@ -393,7 +405,7 @@ class Component(BaseComponent, ABC):
                 if isinstance(v, EventHandler):
                     # Call the event handler to get the event.
                     try:
-                        event = call_event_handler(v, arg_spec)  # type: ignore
+                        event = call_event_handler(v, args_spec)
                     except ValueError as err:
                         raise ValueError(
                             f" {err} defined in the `{type(self).__name__}` component"
@@ -406,13 +418,13 @@ class Component(BaseComponent, ABC):
                     events.append(v)
                 elif isinstance(v, Callable):
                     # Call the lambda to get the event chain.
-                    events.extend(call_event_fn(v, arg_spec))  # type: ignore
+                    events.extend(call_event_fn(v, args_spec))
                 else:
                     raise ValueError(f"Invalid event: {v}")
 
         # If the input is a callable, create an event chain.
         elif isinstance(value, Callable):
-            events = call_event_fn(value, arg_spec)  # type: ignore
+            events = call_event_fn(value, args_spec)
 
         # Otherwise, raise an error.
         else:
@@ -427,7 +439,7 @@ class Component(BaseComponent, ABC):
             event_actions.update(e.event_actions)
 
         # Return the event chain.
-        if isinstance(arg_spec, Var):
+        if isinstance(args_spec, Var):
             return EventChain(
                 events=events,
                 args_spec=None,
@@ -436,7 +448,7 @@ class Component(BaseComponent, ABC):
         else:
             return EventChain(
                 events=events,
-                args_spec=arg_spec,  # type: ignore
+                args_spec=args_spec,
                 event_actions=event_actions,
             )
 
@@ -446,7 +458,7 @@ class Component(BaseComponent, ABC):
         Returns:
             The event triggers.
         """
-        return {
+        default_triggers = {
             EventTriggers.ON_FOCUS: lambda: [],
             EventTriggers.ON_BLUR: lambda: [],
             EventTriggers.ON_CLICK: lambda: [],
@@ -463,6 +475,14 @@ class Component(BaseComponent, ABC):
             EventTriggers.ON_MOUNT: lambda: [],
             EventTriggers.ON_UNMOUNT: lambda: [],
         }
+        # Look for component specific triggers,
+        # e.g. variable declared as EventHandler types.
+        for field in self.get_fields().values():
+            if types._issubclass(field.type_, EventHandler):
+                default_triggers[field.name] = getattr(
+                    field.type_, "args_spec", lambda: []
+                )
+        return default_triggers
 
     def __repr__(self) -> str:
         """Represent the component in React.
@@ -621,6 +641,7 @@ class Component(BaseComponent, ABC):
                     reason=f"for consistency. Use `{prop}` instead.",
                     deprecation_version="0.4.0",
                     removal_version="0.5.0",
+                    dedupe=False,
                 )
                 props[prop] = props.pop(under_prop)
 
@@ -635,9 +656,11 @@ class Component(BaseComponent, ABC):
                 )
 
         children = [
-            child
-            if isinstance(child, Component)
-            else Bare.create(contents=Var.create(child, _var_is_string=True))
+            (
+                child
+                if isinstance(child, Component)
+                else Bare.create(contents=Var.create(child, _var_is_string=True))
+            )
             for child in children
         ]
 
@@ -1006,6 +1029,16 @@ class Component(BaseComponent, ABC):
             )
         return _imports
 
+    def add_imports(
+        self,
+    ) -> Dict[str, Union[str, ImportVar, List[str | ImportVar]]]:
+        """User defined imports for the component. Need to be overriden in subclass.
+
+        Returns:
+            The user defined imports as a dict.
+        """
+        return {}
+
     def _get_imports(self) -> imports.ImportDict:
         """Get all the libraries and fields that are used by the component.
 
@@ -1026,24 +1059,45 @@ class Component(BaseComponent, ABC):
             var._var_data.imports for var in self._get_vars() if var._var_data
         ]
 
+        # If the subclass implements add_imports, merge the imports.
+        def _make_list(
+            value: str | ImportVar | list[str | ImportVar],
+        ) -> list[str | ImportVar]:
+            if isinstance(value, (str, ImportVar)):
+                return [value]
+            return value
+
+        added_imports = {
+            package: [
+                ImportVar(tag=tag) if not isinstance(tag, ImportVar) else tag
+                for tag in _make_list(maybe_tags)
+            ]
+            for package, maybe_tags in self.add_imports().items()
+        }
+
         return imports.merge_imports(
             *self._get_props_imports(),
             self._get_dependencies_imports(),
             self._get_hooks_imports(),
             _imports,
             event_imports,
+            added_imports,
             *var_imports,
         )
 
-    def get_imports(self) -> imports.ImportDict:
+    def get_imports(self, collapse: bool = False) -> imports.ImportDict:
         """Get all the libraries and fields that are used by the component and its children.
 
+        Args:
+            collapse: Whether to collapse the imports by removing duplicates.
+
         Returns:
             The import dict with the required imports.
         """
-        return imports.merge_imports(
+        _imports = imports.merge_imports(
             self._get_imports(), *[child.get_imports() for child in self.children]
         )
+        return imports.collapse_imports(_imports) if collapse else _imports
 
     def _get_mount_lifecycle_hook(self) -> str | None:
         """Generate the component lifecycle hook.
@@ -1129,14 +1183,10 @@ class Component(BaseComponent, ABC):
             Set of internally managed hooks.
         """
         return (
-            set(
-                hook
-                for hook in [self._get_mount_lifecycle_hook(), self._get_ref_hook()]
-                if hook
-            )
-            | self._get_vars_hooks()
+            self._get_vars_hooks()
             | self._get_events_hooks()
             | self._get_special_hooks()
+            | set(hook for hook in [self._get_mount_lifecycle_hook()] if hook)
         )
 
     def _get_hooks(self) -> str | None:
@@ -1149,6 +1199,19 @@ class Component(BaseComponent, ABC):
         """
         return
 
+    def get_ref_hooks(self) -> Set[str]:
+        """Get the ref hooks for the component and its children.
+
+        Returns:
+            The ref hooks.
+        """
+        ref_hook = self._get_ref_hook()
+        hooks = set() if ref_hook is None else {ref_hook}
+
+        for child in self.children:
+            hooks |= child.get_ref_hooks()
+        return hooks
+
     def get_hooks_internal(self) -> set[str]:
         """Get the reflex internal hooks for the component and its children.
 
@@ -1305,6 +1368,9 @@ class CustomComponent(Component):
         # Set the tag to the name of the function.
         self.tag = format.to_title_case(self.component_fn.__name__)
 
+        # Get the event triggers defined in the component declaration.
+        event_triggers_in_component_declaration = self.get_event_triggers()
+
         # Set the props.
         props = typing.get_type_hints(self.component_fn)
         for key, value in kwargs.items():
@@ -1317,7 +1383,12 @@ class CustomComponent(Component):
 
             # Handle event chains.
             if types._issubclass(type_, EventChain):
-                value = self._create_event_chain(key, value)
+                value = self._create_event_chain(
+                    value=value,
+                    args_spec=event_triggers_in_component_declaration.get(
+                        key, lambda: []
+                    ),
+                )
                 self.props[format.to_camel_case(key)] = value
                 continue
 
@@ -1423,9 +1494,9 @@ class CustomComponent(Component):
         return [
             BaseVar(
                 _var_name=name,
-                _var_type=prop._var_type
-                if types._isinstance(prop, Var)
-                else type(prop),
+                _var_type=(
+                    prop._var_type if types._isinstance(prop, Var) else type(prop)
+                ),
             )
             for name, prop in self.props.items()
         ]
@@ -1807,6 +1878,14 @@ class StatefulComponent(BaseComponent):
             )
         return trigger_memo
 
+    def get_ref_hooks(self) -> set[str]:
+        """Get the ref hooks for the component and its children.
+
+        Returns:
+            The ref hooks.
+        """
+        return set()
+
     def get_hooks_internal(self) -> set[str]:
         """Get the reflex internal hooks for the component and its children.
 

reflex/components/core/banner.py

@@ -17,7 +17,6 @@ from reflex.components.radix.themes.components.dialog import (
 from reflex.components.radix.themes.layout import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import Dirs, Hooks, Imports
-from reflex.state import State
 from reflex.utils import imports
 from reflex.vars import Var, VarData
 
@@ -199,7 +198,7 @@ class ConnectionPulser(Div):
         """
         return super().create(
             cond(
-                ~State.is_hydrated | has_connection_errors,  # type: ignore
+                has_connection_errors,
                 WifiOffPulse.create(**props),
             ),
             position="fixed",

reflex/components/core/banner.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/core/banner.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
@@ -21,7 +21,6 @@ from reflex.components.radix.themes.components.dialog import (
 from reflex.components.radix.themes.layout import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import Dirs, Hooks, Imports
-from reflex.state import State
 from reflex.utils import imports
 from reflex.vars import Var, VarData
 

reflex/components/core/client_side_routing.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/core/client_side_routing.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload

reflex/components/core/cond.py

@@ -206,7 +206,7 @@ def color_mode_cond(light: Any, dark: Any = None) -> Var | Component:
         The conditional component or prop.
     """
     return cond(
-        color_mode == LIGHT_COLOR_MODE,
+        color_mode == Var.create(LIGHT_COLOR_MODE, _var_is_string=True),
         light,
         dark,
     )

reflex/components/core/debounce.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/core/debounce.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload

reflex/components/core/html.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/core/html.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload

reflex/components/core/responsive.py

@@ -1,6 +1,6 @@
 """Responsive components."""
 
-from reflex.components.chakra.layout.box import Box
+from reflex.components.radix.themes.layout import Box
 
 
 # Add responsive styles shortcuts.

reflex/components/core/upload.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/core/upload.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload

reflex/components/datadisplay/code.py

@@ -387,9 +387,9 @@ class CodeBlock(Component):
         merged_imports = imports.merge_imports(
             merged_imports,
             {
-                f"react-syntax-highlighter/dist/cjs/styles/prism/{theme}": {
+                f"react-syntax-highlighter/dist/cjs/styles/prism/{self.convert_theme_name(theme)}": {
                     ImportVar(
-                        tag=format.to_camel_case(theme),
+                        tag=format.to_camel_case(self.convert_theme_name(theme)),
                         is_default=True,
                         install=False,
                     )
@@ -451,13 +451,7 @@ class CodeBlock(Component):
         # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
         # themes respectively to ensure code compatibility.
         if "theme" in props and not isinstance(props["theme"], Var):
-            props["theme"] = (
-                "one-light"
-                if props["theme"] == "light"
-                else "one-dark"
-                if props["theme"] == "dark"
-                else props["theme"]
-            )
+            props["theme"] = cls.convert_theme_name(props["theme"])
 
         if can_copy:
             code = children[0]
@@ -511,3 +505,17 @@ class CodeBlock(Component):
         if self.code is not None:
             out.special_props.add(Var.create_safe(f"children={str(self.code)}"))
         return out
+
+    @staticmethod
+    def convert_theme_name(theme) -> str:
+        """Convert theme names to appropriate names.
+
+        Args:
+            theme: The theme name.
+
+        Returns:
+            The right theme name.
+        """
+        if theme in ["light", "dark"]:
+            return f"one-{theme}"
+        return theme

reflex/components/datadisplay/code.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/datadisplay/code.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
@@ -1110,3 +1110,5 @@ class CodeBlock(Component):
             The text component.
         """
         ...
+    @staticmethod
+    def convert_theme_name(theme) -> str: ...

reflex/components/datadisplay/dataeditor.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/datadisplay/dataeditor.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload

reflex/components/el/element.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/el/element.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload

reflex/components/el/elements/base.pyi

@@ -1,6 +1,6 @@
 """Stub file for reflex/components/el/elements/base.py"""
 # ------------------- DO NOT EDIT ----------------------
-# This file was generated by `scripts/pyi_generator.py`!
+# This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload

reflex/components/el/elements/forms.py

@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 from hashlib import md5
-from typing import Any, Dict, Iterator, Union
+from typing import Any, Dict, Iterator, Set, Union
 
 from jinja2 import Environment
 
@@ -500,6 +500,36 @@ class Select(BaseHTML):
         }
 
 
+AUTO_HEIGHT_JS = """
+const autoHeightOnInput = (e, is_enabled) => {
+    if (is_enabled) {
+        const el = e.target;
+        el.style.overflowY = "hidden";
+        el.style.height = "auto";
+        el.style.height = (e.target.scrollHeight) + "px";
+        if (el.form && !el.form.data_resize_on_reset) {
+            el.form.addEventListener("reset", () => window.setTimeout(() => autoHeightOnInput(e, is_enabled), 0))
+            el.form.data_resize_on_reset = true;
+        }
+    }
+}
+"""
+
+
+ENTER_KEY_SUBMIT_JS = """
+const enterKeySubmitOnKeyDown = (e, is_enabled) => {
+    if (is_enabled && e.which === 13 && !e.shiftKey) {
+        e.preventDefault();
+        if (!e.repeat) {
+            if (e.target.form) {
+                e.target.form.requestSubmit();
+            }
+        }
+    }
+}
+"""
+
+
 class Textarea(BaseHTML):
     """Display the textarea element."""
 
@@ -511,6 +541,9 @@ class Textarea(BaseHTML):
     # Automatically focuses the textarea when the page loads
     auto_focus: Var[Union[str, int, bool]]
 
+    # Automatically fit the content height to the text (use min-height with this prop)
+    auto_height: Var[bool]
+
     # Visible width of the text control, in average character widths
     cols: Var[Union[str, int, bool]]
 
@@ -520,6 +553,9 @@ class Textarea(BaseHTML):
     # Disables the textarea
     disabled: Var[Union[str, int, bool]]
 
+    # Enter key submits form (shift-enter adds new line)
+    enter_key_submit: Var[bool]
+
     # Associates the textarea with a form (by id)
     form: Var[Union[str, int, bool]]
 
@@ -550,6 +586,47 @@ class Textarea(BaseHTML):
     # How the text in the textarea is to be wrapped when submitting the form
     wrap: Var[Union[str, int, bool]]
 
+    def _exclude_props(self) -> list[str]:
+        return super()._exclude_props() + [
+            "auto_height",
+            "enter_key_submit",
+        ]
+
+    def get_custom_code(self) -> Set[str]:
+        """Include the custom code for auto_height and enter_key_submit functionality.
+
+        Returns:
+            The custom code for the component.
+        """
+        custom_code = super().get_custom_code()
+        if self.auto_height is not None:
+            custom_code.add(AUTO_HEIGHT_JS)
+        if self.enter_key_submit is not None:
+            custom_code.add(ENTER_KEY_SUBMIT_JS)
+        return custom_code
+
+    def _render(self) -> Tag:
+        tag = super()._render()
+        if self.enter_key_submit is not None:
+            if "on_key_down" in self.event_triggers:
+                raise ValueError(
+                    "Cannot combine `enter_key_submit` with `on_key_down`.",
+                )
+            tag.add_props(
+                on_key_down=Var.create_safe(
+                    f"(e) => enterKeySubmitOnKeyDown(e, {self.enter_key_submit._var_name_unwrapped})",
+                    _var_is_local=False,
+                )._replace(merge_var_data=self.enter_key_submit._var_data),
+            )
+        if self.auto_height is not None:
+            tag.add_props(
+                on_input=Var.create_safe(
+                    f"(e) => autoHeightOnInput(e, {self.auto_height._var_name_unwrapped})",
+                    _var_is_local=False,
+                )._replace(merge_var_data=self.auto_height._var_data),
+            )
+        return tag
+
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.