reflex 0.7.6a1__py3-none-any.whl → 0.7.7a2__py3-none-any.whl

reflex/.templates/web/utils/state.js

@@ -948,6 +948,15 @@ export const isTrue = (val) => {
   return Boolean(val);
 };
 
+/***
+ * Check if a value is not null or undefined.
+ * @param val The value to check.
+ * @returns True if the value is not null or undefined, false otherwise.
+ */
+export const isNotNullOrUndefined = (val) => {
+  return val ?? undefined !== undefined;
+};
+
 /**
  * Get the value from a ref.
  * @param ref The ref to get the value from.

reflex/app.py

@@ -293,6 +293,7 @@ class UnevaluatedPage:
     image: str
     on_load: EventType[()] | None
     meta: list[dict[str, str]]
+    context: dict[str, Any] | None
 
 
 @dataclasses.dataclass()
@@ -681,6 +682,7 @@ class App(MiddlewareMixin, LifespanMixin):
         image: str = constants.DefaultPage.IMAGE,
         on_load: EventType[()] | None = None,
         meta: list[dict[str, str]] = constants.DefaultPage.META_LIST,
+        context: dict[str, Any] | None = None,
     ):
         """Add a page to the app.
 
@@ -695,6 +697,7 @@ class App(MiddlewareMixin, LifespanMixin):
             image: The image to display on the page.
             on_load: The event handler(s) that will be called each time the page load.
             meta: The metadata of the page.
+            context: Values passed to page for custom page-specific logic.
 
         Raises:
             PageValueError: When the component is not set for a non-404 page.
@@ -762,6 +765,7 @@ class App(MiddlewareMixin, LifespanMixin):
             image=image,
             on_load=on_load,
             meta=meta,
+            context=context,
         )
 
     def _compile_page(self, route: str, save_page: bool = True):
@@ -933,6 +937,9 @@ class App(MiddlewareMixin, LifespanMixin):
             and i != ""
             and any(tag.install for tag in tags)
         }
+        pinned = {i.rpartition("@")[0] for i in page_imports if "@" in i}
+        page_imports = {i for i in page_imports if i not in pinned}
+
         frontend_packages = get_config().frontend_packages
         _frontend_packages = []
         for package in frontend_packages:

reflex/components/component.py

@@ -30,6 +30,7 @@ from typing import (
 )
 
 import pydantic.v1
+from rich.markup import escape
 
 import reflex.state
 from reflex.base import Base
@@ -217,7 +218,7 @@ def satisfies_type_hint(obj: Any, type_hint: Any) -> bool:
         console.deprecate(
             "implicit-none-for-component-fields",
             reason="Passing Vars with possible None values to component fields not explicitly marked as Optional is deprecated. "
-            + f"Passed {obj!s} of type {type(obj) if not isinstance(obj, Var) else obj._var_type} to {type_hint}.",
+            + f"Passed {obj!s} of type {escape(str(type(obj) if not isinstance(obj, Var) else obj._var_type))} to {escape(str(type_hint))}.",
             deprecation_version="0.7.2",
             removal_version="0.8.0",
         )

reflex/components/el/elements/forms.py

@@ -13,14 +13,17 @@ from reflex.constants import Dirs, EventTriggers
 from reflex.event import (
     EventChain,
     EventHandler,
+    checked_input_event,
+    float_input_event,
     input_event,
+    int_input_event,
     key_event,
     prevent_default,
 )
 from reflex.utils.imports import ImportDict
-from reflex.utils.types import is_optional
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
+from reflex.vars.number import ternary_operation
 
 from .base import BaseHTML
 
@@ -294,8 +297,8 @@ HTMLInputTypeAttribute = Literal[
 ]
 
 
-class Input(BaseHTML):
-    """Display the input element."""
+class BaseInput(BaseHTML):
+    """A base class for input elements."""
 
     tag = "input"
 
@@ -392,6 +395,42 @@ class Input(BaseHTML):
     # Value of the input
     value: Var[str | int | float]
 
+    # Fired when a key is pressed down
+    on_key_down: EventHandler[key_event]
+
+    # Fired when a key is released
+    on_key_up: EventHandler[key_event]
+
+
+class CheckboxInput(BaseInput):
+    """Display the input element."""
+
+    # Fired when the input value changes
+    on_change: EventHandler[checked_input_event]
+
+    # Fired when the input gains focus
+    on_focus: EventHandler[checked_input_event]
+
+    # Fired when the input loses focus
+    on_blur: EventHandler[checked_input_event]
+
+
+class ValueNumberInput(BaseInput):
+    """Display the input element."""
+
+    # Fired when the input value changes
+    on_change: EventHandler[float_input_event, int_input_event, input_event]
+
+    # Fired when the input gains focus
+    on_focus: EventHandler[float_input_event, int_input_event, input_event]
+
+    # Fired when the input loses focus
+    on_blur: EventHandler[float_input_event, int_input_event, input_event]
+
+
+class Input(BaseInput):
+    """Display the input element."""
+
     # Fired when the input value changes
     on_change: EventHandler[input_event]
 
@@ -401,12 +440,6 @@ class Input(BaseHTML):
     # Fired when the input loses focus
     on_blur: EventHandler[input_event]
 
-    # Fired when a key is pressed down
-    on_key_down: EventHandler[key_event]
-
-    # Fired when a key is released
-    on_key_up: EventHandler[key_event]
-
     @classmethod
     def create(cls, *children, **props):
         """Create an Input component.
@@ -418,20 +451,26 @@ class Input(BaseHTML):
         Returns:
             The component.
         """
-        from reflex.vars.number import ternary_operation
-
         value = props.get("value")
 
         # React expects an empty string(instead of null) for controlled inputs.
-        if value is not None and is_optional(
-            (value_var := Var.create(value))._var_type
-        ):
+        if value is not None:
+            value_var = Var.create(value)
             props["value"] = ternary_operation(
-                (value_var != Var.create(None))
-                & (value_var != Var(_js_expr="undefined")),
-                value,
-                Var.create(""),
+                value_var.is_not_none(), value_var, Var.create("")
             )
+
+        if cls is Input:
+            input_type = props.get("type")
+
+            if input_type == "checkbox":
+                # Checkbox inputs should use the CheckboxInput class
+                return CheckboxInput.create(*children, **props)
+
+            if input_type == "number" or input_type == "range":
+                # Number inputs should use the ValueNumberInput class
+                return ValueNumberInput.create(*children, **props)
+
         return super().create(*children, **props)