reflex 0.8.2__py3-none-any.whl → 0.8.3__py3-none-any.whl

reflex/components/core/window_events.py

@@ -0,0 +1,104 @@
+"""Window event listener component for Reflex."""
+
+import reflex as rx
+from reflex.components.base.fragment import Fragment
+from reflex.constants.compiler import Hooks
+from reflex.event import key_event, no_args_event_spec
+from reflex.vars.base import Var, VarData
+from reflex.vars.object import ObjectVar
+
+
+def _on_resize_spec() -> tuple[Var[int], Var[int]]:
+    """Args spec for the on_resize event trigger.
+
+    Returns:
+        A tuple containing window width and height variables.
+    """
+    return (Var("window.innerWidth"), Var("window.innerHeight"))
+
+
+def _on_scroll_spec() -> tuple[Var[float], Var[float]]:
+    """Args spec for the on_scroll event trigger.
+
+    Returns:
+        A tuple containing window scroll X and Y position variables.
+    """
+    return (Var("window.scrollX"), Var("window.scrollY"))
+
+
+def _on_visibility_change_spec() -> tuple[Var[bool]]:
+    """Args spec for the on_visibility_change event trigger.
+
+    Returns:
+        A tuple containing the document hidden state variable.
+    """
+    return (Var("document.hidden"),)
+
+
+def _on_storage_spec(e: ObjectVar) -> tuple[Var[str], Var[str], Var[str], Var[str]]:
+    """Args spec for the on_storage event trigger.
+
+    Args:
+        e: The storage event.
+
+    Returns:
+        A tuple containing key, old value, new value, and URL variables.
+    """
+    return (e.key.to(str), e.oldValue.to(str), e.newValue.to(str), e.url.to(str))
+
+
+class WindowEventListener(Fragment):
+    """A component that listens for window events."""
+
+    # Event handlers
+    on_resize: rx.EventHandler[_on_resize_spec]
+    on_scroll: rx.EventHandler[_on_scroll_spec]
+    on_focus: rx.EventHandler[no_args_event_spec]
+    on_blur: rx.EventHandler[no_args_event_spec]
+    on_visibility_change: rx.EventHandler[_on_visibility_change_spec]
+    on_before_unload: rx.EventHandler[no_args_event_spec]
+    on_key_down: rx.EventHandler[key_event]
+    on_popstate: rx.EventHandler[no_args_event_spec]
+    on_storage: rx.EventHandler[_on_storage_spec]
+
+    def _exclude_props(self) -> list[str]:
+        """Exclude event handler props from being passed to Fragment.
+
+        Returns:
+            List of prop names to exclude from the Fragment.
+        """
+        return [*super()._exclude_props(), *self.event_triggers.keys()]
+
+    def add_hooks(self) -> list[str | Var[str]]:
+        """Add hooks to register window event listeners.
+
+        Returns:
+            The hooks to add to the component.
+        """
+        hooks = []
+
+        for prop_name, event_trigger in self.event_triggers.items():
+            # Get JS event name: remove on_ prefix and underscores
+            event_name = prop_name.removeprefix("on_").replace("_", "")
+
+            hook_expr = f"""
+                    useEffect(() => {{
+                        if (typeof window === 'undefined') return;
+
+                        window.addEventListener('{event_name}', {event_trigger});
+                        return () => window.removeEventListener('{event_name}', {event_trigger});
+                    }}, []);
+                """
+
+            hooks.append(
+                Var(
+                    hook_expr,
+                    _var_type="str",
+                    _var_data=VarData(position=Hooks.HookPosition.POST_TRIGGER),
+                )
+            )
+
+        return hooks
+
+
+window_event_listener = WindowEventListener.create

reflex/components/core/window_events.pyi

@@ -0,0 +1,84 @@
+"""Stub file for reflex/components/core/window_events.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from collections.abc import Mapping, Sequence
+from typing import Any
+
+from reflex.components.base.fragment import Fragment
+from reflex.components.core.breakpoints import Breakpoints
+from reflex.event import EventType, KeyInputInfo, PointerEventInfo
+from reflex.vars.base import Var
+
+class WindowEventListener(Fragment):
+    def add_hooks(self) -> list[str | Var[str]]: ...
+    @classmethod
+    def create(
+        cls,
+        *children,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_before_unload: EventType[()] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_key_down: EventType[()]
+        | EventType[str]
+        | EventType[str, KeyInputInfo]
+        | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_popstate: EventType[()] | None = None,
+        on_resize: EventType[()] | EventType[int] | EventType[int, int] | None = None,
+        on_scroll: EventType[()]
+        | EventType[float]
+        | EventType[float, float]
+        | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_storage: EventType[()]
+        | EventType[str]
+        | EventType[str, str]
+        | EventType[str, str, str]
+        | EventType[str, str, str, str]
+        | None = None,
+        on_unmount: EventType[()] | None = None,
+        on_visibility_change: EventType[()] | EventType[bool] | None = None,
+        **props,
+    ) -> WindowEventListener:
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            on_resize: Event handlers
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            ref: The Var to pass as the ref to 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.
+        """
+
+window_event_listener = WindowEventListener.create

reflex/components/el/__init__.pyi

@@ -239,6 +239,7 @@ from .elements.typography import (
     Dl,
     Dt,
     Figcaption,
+    Figure,
     Hr,
     Ins,
     Li,
@@ -253,6 +254,7 @@ from .elements.typography import (
     dl,
     dt,
     figcaption,
+    figure,
     hr,
     ins,
     li,
@@ -307,6 +309,7 @@ __all__ = [
     "Embed",
     "Fieldset",
     "Figcaption",
+    "Figure",
     "Footer",
     "Form",
     "G",
@@ -424,6 +427,7 @@ __all__ = [
     "embed",
     "fieldset",
     "figcaption",
+    "figure",
     "footer",
     "form",
     "g",

reflex/components/el/elements/__init__.py

@@ -125,6 +125,7 @@ _MAPPING = {
         "dl",
         "dt",
         "figcaption",
+        "figure",
         "hr",
         "ol",
         "li",

reflex/components/el/elements/__init__.pyi

@@ -237,6 +237,7 @@ from .typography import (
     Dl,
     Dt,
     Figcaption,
+    Figure,
     Hr,
     Ins,
     Li,
@@ -251,6 +252,7 @@ from .typography import (
     dl,
     dt,
     figcaption,
+    figure,
     hr,
     ins,
     li,
@@ -374,6 +376,7 @@ _MAPPING = {
         "dl",
         "dt",
         "figcaption",
+        "figure",
         "hr",
         "ol",
         "li",
@@ -443,6 +446,7 @@ __all__ = [
     "Embed",
     "Fieldset",
     "Figcaption",
+    "Figure",
     "Footer",
     "Form",
     "G",
@@ -559,6 +563,7 @@ __all__ = [
     "embed",
     "fieldset",
     "figcaption",
+    "figure",
     "footer",
     "form",
     "g",

reflex/components/el/elements/forms.py

@@ -466,11 +466,13 @@ class Input(BaseInput):
         if cls is Input:
             input_type = props.get("type")
 
-            if input_type == "checkbox":
+            if isinstance(input_type, str) and input_type == "checkbox":
                 # Checkbox inputs should use the CheckboxInput class
                 return CheckboxInput.create(*children, **props)
 
-            if input_type == "number" or input_type == "range":
+            if isinstance(input_type, str) and (
+                input_type == "number" or input_type == "range"
+            ):
                 # Number inputs should use the ValueNumberInput class
                 return ValueNumberInput.create(*children, **props)
 

reflex/components/el/elements/metadata.pyi

@@ -803,6 +803,7 @@ class Meta(BaseHTML):
         content: Var[str] | str | None = None,
         http_equiv: Var[str] | str | None = None,
         name: Var[str] | str | None = None,
+        property: Var[str] | str | None = None,
         access_key: Var[str] | str | None = None,
         auto_capitalize: Literal[
             "characters", "none", "off", "on", "sentences", "words"
@@ -1018,6 +1019,7 @@ class Meta(BaseHTML):
             content: Defines the content of the metadata
             http_equiv: Provides an HTTP header for the information/value of the content attribute
             name: Specifies a name for the metadata
+            property: The type of metadata value.
             access_key: Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

reflex/components/el/elements/typography.py

@@ -46,6 +46,12 @@ class Figcaption(BaseHTML):
     tag = "figcaption"
 
 
+class Figure(BaseHTML):
+    """Display the figure element."""
+
+    tag = "figure"
+
+
 class Hr(BaseHTML):
     """Display the hr element."""
 
@@ -132,6 +138,7 @@ div = Div.create
 dl = Dl.create
 dt = Dt.create
 figcaption = Figcaption.create
+figure = Figure.create
 hr = Hr.create
 li = Li.create
 ol = Ol.create

reflex/components/el/elements/typography.pyi

@@ -1484,6 +1484,251 @@ class Figcaption(BaseHTML):
             The component.
         """
 
+class Figure(BaseHTML):
+    @classmethod
+    def create(
+        cls,
+        *children,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+            ]
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
+            ]
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_blur: EventType[()] | None = None,
+        on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None,
+        on_focus: EventType[()] | None = None,
+        on_mount: EventType[()] | None = None,
+        on_mouse_down: EventType[()] | None = None,
+        on_mouse_enter: EventType[()] | None = None,
+        on_mouse_leave: EventType[()] | None = None,
+        on_mouse_move: EventType[()] | None = None,
+        on_mouse_out: EventType[()] | None = None,
+        on_mouse_over: EventType[()] | None = None,
+        on_mouse_up: EventType[()] | None = None,
+        on_scroll: EventType[()] | None = None,
+        on_scroll_end: EventType[()] | None = None,
+        on_unmount: EventType[()] | None = None,
+        **props,
+    ) -> Figure:
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            access_key: Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            ref: The Var to pass as the ref to 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 Hr(BaseHTML):
     @classmethod
     def create(
@@ -3713,6 +3958,7 @@ div = Div.create
 dl = Dl.create
 dt = Dt.create
 figcaption = Figcaption.create
+figure = Figure.create
 hr = Hr.create
 li = Li.create
 ol = Ol.create