small changes to texfield and separator (#2448)

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

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

reflex/components/radix/themes/components/separator.pyi

@@ -196,7 +196,7 @@ class Separator(CommonMarginProps, RadixThemesComponent):
             *children: Child components.
             color: map to CSS default color property.
             color_scheme: map to radix color property.
-            size: The size of the select: "1" | "2" | "3"
+            size: The size of the select: "1" | "2" | "3" | "4"
             orientation: The orientation of the separator.
             decorative: When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.
             m: Margin: "0" - "9"

reflex/components/radix/themes/components/textfield.py

@@ -94,7 +94,7 @@ class TextFieldSlot(RadixThemesComponent):
     gap: Var[LiteralSize]
 
 
-class Input(TextFieldInput):
+class Input(RadixThemesComponent):
     """High level wrapper for the Input component."""
 
     # The icon to render before the input.
@@ -115,6 +115,9 @@ class Input(TextFieldInput):
     # Whether the input should have autocomplete enabled
     auto_complete: Var[bool]
 
+    # The value of the input when initially rendered.
+    default_value: Var[str]
+
     # Disables the input
     disabled: Var[bool]
 
@@ -150,6 +153,7 @@ class Input(TextFieldInput):
             prop: props.pop(prop)
             for prop in [
                 "auto_complete",
+                "default_value",
                 "disabled",
                 "max_length",
                 "min_length",
@@ -157,6 +161,11 @@ class Input(TextFieldInput):
                 "placeholder",
                 "required",
                 "value",
+                "on_change",
+                "on_focus",
+                "on_blur",
+                "on_key_down",
+                "on_key_up",
             ]
             if prop in props
         }
@@ -168,3 +177,18 @@ class Input(TextFieldInput):
             TextFieldInput.create(**input_props),
             **props,
         )
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_CHANGE: lambda e0: [e0.target.value],
+            EventTriggers.ON_FOCUS: lambda e0: [e0.target.value],
+            EventTriggers.ON_BLUR: lambda e0: [e0.target.value],
+            EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
+            EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
+        }

reflex/components/radix/themes/components/textfield.pyi

@@ -832,7 +832,7 @@ class TextFieldSlot(RadixThemesComponent):
         """
         ...
 
-class Input(TextFieldInput):
+class Input(RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -917,6 +917,7 @@ class Input(TextFieldInput):
             ]
         ] = None,
         auto_complete: Optional[Union[Var[bool], bool]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
         max_length: Optional[Union[Var[str], str]] = None,
         min_length: Optional[Union[Var[str], str]] = None,
@@ -924,147 +925,6 @@ class Input(TextFieldInput):
         placeholder: Optional[Union[Var[str], str]] = None,
         required: Optional[Union[Var[bool], bool]] = None,
         value: Optional[Union[Var[str], str]] = None,
-        accept: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        alt: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        auto_focus: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        capture: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        checked: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        dirname: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        form_action: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_enc_type: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_method: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_no_validate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_target: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        height: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        list: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        max: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        min: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        multiple: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        pattern: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        read_only: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        step: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        use_map: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        width: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        access_key: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        auto_capitalize: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        content_editable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        context_menu: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        draggable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        enter_key_hint: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        hidden: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        input_mode: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        item_prop: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        spell_check: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        tab_index: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        title: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        translate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        m: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mx: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        my: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mt: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mr: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mb: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        ml: Optional[
-            Union[
-                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1136,6 +996,7 @@ class Input(TextFieldInput):
             color: Override theme color for text field
             radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
             auto_complete: Whether the input should have autocomplete enabled
+            default_value: The value of the input when initially rendered.
             disabled: Disables the input
             max_length: Specifies the maximum number of characters allowed in the input
             min_length: Specifies the minimum number of characters required in the input
@@ -1143,54 +1004,6 @@ class Input(TextFieldInput):
             placeholder: Placeholder text in the input
             required: Indicates that the input is required
             value: Value of the input
-            accept: Accepted types of files when the input is file type
-            alt: Alternate text for input type="image"
-            auto_focus: Automatically focuses the input when the page loads
-            capture: Captures media from the user (camera or microphone)
-            checked: Indicates whether the input is checked (for checkboxes and radio buttons)
-            dirname: Name part of the input to submit in 'dir' and 'name' pair when form is submitted
-            form: Associates the input with a form (by id)
-            form_action: URL to send the form data to (for type="submit" buttons)
-            form_enc_type: How the form data should be encoded when submitting to the server (for type="submit" buttons)
-            form_method: HTTP method to use for sending form data (for type="submit" buttons)
-            form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
-            form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
-            height: The height of the input (only for type="image")
-            list: References a datalist for suggested options
-            max: Specifies the maximum value for the input
-            min: Specifies the minimum value for the input
-            multiple: Indicates whether multiple values can be entered in an input of the type email or file
-            pattern: Regex pattern the input's value must match to be valid
-            read_only: Indicates whether the input is read-only
-            src: URL for image inputs
-            step: Specifies the legal number intervals for an input
-            type: Specifies the type of input
-            use_map: Name of the image map used with the input
-            width: The width of the input (only for type="image")
-            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.
-            translate: Specifies whether the content of an element should be translated or not.
-            m: Margin: "0" - "9"
-            mx: Margin horizontal: "0" - "9"
-            my: Margin vertical: "0" - "9"
-            mt: Margin top: "0" - "9"
-            mr: Margin right: "0" - "9"
-            mb: Margin bottom: "0" - "9"
-            ml: Margin left: "0" - "9"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1203,3 +1016,4 @@ class Input(TextFieldInput):
             The component.
         """
         ...
+    def get_event_triggers(self) -> Dict[str, Any]: ...