). Defaults to False.
native_button: Var[bool]
+ # Whether the menu should also open when the trigger is hovered. Defaults to True.
+ open_on_hover: Var[bool]
+
+ # How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 100.
+ delay: Var[int]
+
+ # How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 0.
+ close_delay: Var[int]
+
# The render prop
render_: Var[Component]
@@ -546,7 +546,7 @@ class HighLevelMenu(MenuRoot):
# Props for different component parts
_item_props = {"close_on_click"}
- _trigger_props = {"placeholder", "size", "close_on_click"}
+ _trigger_props = {"open_on_hover", "delay", "close_delay"}
_positioner_props = {
"align",
"align_offset",
@@ -555,7 +555,7 @@ class HighLevelMenu(MenuRoot):
"collision_padding",
"sticky",
"position_method",
- "track_anchor",
+ "disable_anchor_tracking",
"side_offset",
"collision_avoidance",
}
@@ -582,8 +582,8 @@ def create(cls, *children, **props) -> BaseUIComponent:
trigger = props.pop("trigger", None)
items = props.pop("items", [])
- size = trigger_props.get("size", "md")
- trigger_label = trigger_props.get("placeholder", "Open Menu")
+ size = props.pop("size", "md")
+ trigger_label = props.pop("placeholder", "Open Menu")
def create_menu_item(item: str | tuple[str, EventHandler]) -> BaseUIComponent:
if isinstance(item, tuple):
@@ -634,6 +634,7 @@ def create_menu_item(item: str | tuple[str, EventHandler]) -> BaseUIComponent:
type="button",
)
),
+ **trigger_props,
),
MenuPortal.create(
MenuPositioner.create(
diff --git a/reflex_ui/components/base/menu.pyi b/reflex_ui/components/base/menu.pyi
index 226b997..4d9e55b 100644
--- a/reflex_ui/components/base/menu.pyi
+++ b/reflex_ui/components/base/menu.pyi
@@ -114,10 +114,7 @@ class MenuRoot(MenuBaseComponent):
close_parent_on_esc: Var[bool] | bool | None = None,
modal: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
- open_on_hover: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
- loop: Var[bool] | bool | None = None,
+ loop_focus: Var[bool] | bool | None = None,
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
@@ -164,6 +161,9 @@ class MenuTrigger(MenuBaseComponent):
*children,
native_button: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
+ open_on_hover: Var[bool] | bool | None = None,
+ delay: Var[int] | int | None = None,
+ close_delay: Var[int] | int | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -255,7 +255,7 @@ class MenuPositioner(MenuBaseComponent):
collision_padding: Var[int] | int | None = None,
collision_boundary: Var[str] | str | None = None,
sticky: Var[bool] | bool | None = None,
- track_anchor: Var[bool] | bool | None = None,
+ disable_anchor_tracking: Var[bool] | bool | None = None,
position_method: Literal["absolute", "fixed"]
| Var[Literal["absolute", "fixed"]]
| None = None,
@@ -416,10 +416,7 @@ class MenuSubMenuRoot(MenuBaseComponent):
open: Var[bool] | bool | None = None,
close_parent_on_esc: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
- open_on_hover: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
- loop: Var[bool] | bool | None = None,
+ loop_focus: Var[bool] | bool | None = None,
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
@@ -467,6 +464,9 @@ class MenuSubMenuTrigger(MenuBaseComponent):
*children,
label: Var[str] | str | None = None,
native_button: Var[bool] | bool | None = None,
+ open_on_hover: Var[bool] | bool | None = None,
+ delay: Var[int] | int | None = None,
+ close_delay: Var[int] | int | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -841,10 +841,7 @@ class HighLevelMenu(MenuRoot):
close_parent_on_esc: Var[bool] | bool | None = None,
modal: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
- open_on_hover: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
- loop: Var[bool] | bool | None = None,
+ loop_focus: Var[bool] | bool | None = None,
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
@@ -898,10 +895,7 @@ class HighLevelMenu(MenuRoot):
close_parent_on_esc: When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. Defaults to True.
modal: Determines if the menu enters a modal state when open. Defaults to True. - True: user interaction is limited to the menu: document page scroll is locked and and pointer interactions on outside elements are disabled. - False: user interaction with the rest of the document is allowed.
disabled: Whether the component should ignore user interaction. Defaults to False.
- open_on_hover: Whether the menu should also open when the trigger is hovered.
- delay: How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 100.
- close_delay: How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 0.
- loop: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
+ loop_focus: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
orientation: The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. Defaults to 'vertical'.
unstyled: Whether the component should be unstyled
style: The style of the component.
@@ -953,10 +947,7 @@ class Menu(ComponentNamespace):
close_parent_on_esc: Var[bool] | bool | None = None,
modal: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
- open_on_hover: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
- loop: Var[bool] | bool | None = None,
+ loop_focus: Var[bool] | bool | None = None,
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
@@ -1010,10 +1001,7 @@ class Menu(ComponentNamespace):
close_parent_on_esc: When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. Defaults to True.
modal: Determines if the menu enters a modal state when open. Defaults to True. - True: user interaction is limited to the menu: document page scroll is locked and and pointer interactions on outside elements are disabled. - False: user interaction with the rest of the document is allowed.
disabled: Whether the component should ignore user interaction. Defaults to False.
- open_on_hover: Whether the menu should also open when the trigger is hovered.
- delay: How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 100.
- close_delay: How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 0.
- loop: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
+ loop_focus: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
orientation: The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys. Defaults to 'vertical'.
unstyled: Whether the component should be unstyled
style: The style of the component.
diff --git a/reflex_ui/components/base/navigation_menu.py b/reflex_ui/components/base/navigation_menu.py
index 0f180c0..e92e9d5 100644
--- a/reflex_ui/components/base/navigation_menu.py
+++ b/reflex_ui/components/base/navigation_menu.py
@@ -232,9 +232,11 @@ class NavigationMenuPositioner(NavigationMenuBaseComponent):
# An element or a rectangle that delimits the area that the content is confined to. Defaults to the "clipping-ancestors".
collision_boundary: Var[str]
+ # Whether to maintain the content in the viewport after the anchor element was scrolled out of view. Defaults to False.
sticky: Var[bool]
- track_anchor: Var[bool]
+ # Whether to disable the content tracking any layout shift of its positioning anchor. Defaults to False.
+ disable_anchor_tracking: Var[bool]
# Determines which CSS position property to use. Defaults to "absolute".
position_method: Var[LiteralPositionMethod]
diff --git a/reflex_ui/components/base/navigation_menu.pyi b/reflex_ui/components/base/navigation_menu.pyi
index ed12d9b..2c09dc1 100644
--- a/reflex_ui/components/base/navigation_menu.pyi
+++ b/reflex_ui/components/base/navigation_menu.pyi
@@ -420,7 +420,7 @@ class NavigationMenuPositioner(NavigationMenuBaseComponent):
collision_padding: Var[int] | int | None = None,
collision_boundary: Var[str] | str | None = None,
sticky: Var[bool] | bool | None = None,
- track_anchor: Var[bool] | bool | None = None,
+ disable_anchor_tracking: Var[bool] | bool | None = None,
position_method: Literal["absolute", "fixed"]
| Var[Literal["absolute", "fixed"]]
| None = None,
diff --git a/reflex_ui/components/base/popover.py b/reflex_ui/components/base/popover.py
index 3570bc3..520083d 100644
--- a/reflex_ui/components/base/popover.py
+++ b/reflex_ui/components/base/popover.py
@@ -64,15 +64,6 @@ class PopoverRoot(PopoverBaseComponent):
# - 'trap-focus': focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
modal: Var[bool | Literal["trap-focus"]]
- # Whether the popover should also open when the trigger is hovered. Defaults to False.
- open_on_hover: Var[bool]
-
- # How long to wait before the popover may be opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 300.
- delay: Var[int]
-
- # How long to wait before closing the popover that was opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 0.
- close_delay: Var[int]
-
@classmethod
def create(cls, *children, **props) -> BaseUIComponent:
"""Create the popover root component."""
@@ -88,6 +79,15 @@ class PopoverTrigger(PopoverBaseComponent):
# Whether the component renders a native
element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. ).. Defaults to True.
native_button: Var[bool]
+ # Whether the popover should also open when the trigger is hovered. Defaults to False.
+ open_on_hover: Var[bool]
+
+ # How long to wait before the popover may be opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 300.
+ delay: Var[int]
+
+ # How long to wait before closing the popover that was opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 0.
+ close_delay: Var[int]
+
# The render prop
render_: Var[Component]
@@ -162,8 +162,8 @@ class PopoverPositioner(PopoverBaseComponent):
# Determines which CSS position property to use. Defaults to "absolute".
position_method: Var[LiteralPosition]
- # Whether the popup tracks any layout shift of its positioning anchor. Defaults to True.
- track_anchor: Var[bool]
+ # Whether to disable the popup tracking any layout shift of its positioning anchor. Defaults to False.
+ disable_anchor_tracking: Var[bool]
# Determines how to handle collisions when positioning the popup.
collision_avoidance: Var[str]
@@ -276,6 +276,7 @@ class HighLevelPopover(PopoverRoot):
description: Var[str | Component | None]
# Props for different component parts
+ _trigger_props = {"open_on_hover", "delay", "close_delay"}
_positioner_props = {
"align",
"align_offset",
@@ -286,7 +287,7 @@ class HighLevelPopover(PopoverRoot):
"collision_boundary",
"sticky",
"position_method",
- "track_anchor",
+ "disable_anchor_tracking",
"anchor",
"collision_avoidance",
}
@@ -304,6 +305,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
The popover component.
"""
# Extract props for different parts
+ trigger_props = {k: props.pop(k) for k in cls._trigger_props & props.keys()}
positioner_props = {
k: props.pop(k) for k in cls._positioner_props & props.keys()
}
@@ -316,7 +318,9 @@ def create(cls, *children, **props) -> BaseUIComponent:
class_name = props.pop("class_name", "")
return PopoverRoot.create(
- PopoverTrigger.create(render_=trigger) if trigger is not None else None,
+ PopoverTrigger.create(render_=trigger, **trigger_props)
+ if trigger is not None
+ else None,
PopoverPortal.create(
PopoverPositioner.create(
PopoverPopup.create(
diff --git a/reflex_ui/components/base/popover.pyi b/reflex_ui/components/base/popover.pyi
index f0ff824..e9bc624 100644
--- a/reflex_ui/components/base/popover.pyi
+++ b/reflex_ui/components/base/popover.pyi
@@ -93,9 +93,6 @@ class PopoverRoot(PopoverBaseComponent):
| Var[Literal["trap-focus"] | bool]
| bool
| None = None,
- open_on_hover: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
| Mapping[str, Any]
@@ -138,6 +135,9 @@ class PopoverTrigger(PopoverBaseComponent):
cls,
*children,
native_button: Var[bool] | bool | None = None,
+ open_on_hover: Var[bool] | bool | None = None,
+ delay: Var[int] | int | None = None,
+ close_delay: Var[int] | int | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -283,7 +283,7 @@ class PopoverPositioner(PopoverBaseComponent):
position_method: Literal["absolute", "fixed"]
| Var[Literal["absolute", "fixed"]]
| None = None,
- track_anchor: Var[bool] | bool | None = None,
+ disable_anchor_tracking: Var[bool] | bool | None = None,
collision_avoidance: Var[str] | str | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
@@ -519,9 +519,6 @@ class HighLevelPopover(PopoverRoot):
| Var[Literal["trap-focus"] | bool]
| bool
| None = None,
- open_on_hover: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
| Mapping[str, Any]
@@ -566,9 +563,6 @@ class HighLevelPopover(PopoverRoot):
on_open_change: Event handler called when the popover is opened or closed
on_open_change_complete: Event handler called after any animations complete when the popover is opened or closed.
modal: Determines if the popover enters a modal state when open. - True: user interaction is limited to just the popover: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - False: user interaction with the rest of the document is allowed. - 'trap-focus': focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
- open_on_hover: Whether the popover should also open when the trigger is hovered. Defaults to False.
- delay: How long to wait before the popover may be opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 300.
- close_delay: How long to wait before closing the popover that was opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 0.
unstyled: Whether the component should be unstyled
style: The style of the component.
key: A unique key for the component.
@@ -608,9 +602,6 @@ class Popover(ComponentNamespace):
| Var[Literal["trap-focus"] | bool]
| bool
| None = None,
- open_on_hover: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
| Mapping[str, Any]
@@ -655,9 +646,6 @@ class Popover(ComponentNamespace):
on_open_change: Event handler called when the popover is opened or closed
on_open_change_complete: Event handler called after any animations complete when the popover is opened or closed.
modal: Determines if the popover enters a modal state when open. - True: user interaction is limited to just the popover: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - False: user interaction with the rest of the document is allowed. - 'trap-focus': focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
- open_on_hover: Whether the popover should also open when the trigger is hovered. Defaults to False.
- delay: How long to wait before the popover may be opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 300.
- close_delay: How long to wait before closing the popover that was opened on hover. Specified in milliseconds. Requires the open_on_hover prop. Defaults to 0.
unstyled: Whether the component should be unstyled
style: The style of the component.
key: A unique key for the component.
diff --git a/reflex_ui/components/base/preview_card.py b/reflex_ui/components/base/preview_card.py
index c88ddee..63cb90d 100644
--- a/reflex_ui/components/base/preview_card.py
+++ b/reflex_ui/components/base/preview_card.py
@@ -149,8 +149,8 @@ class PreviewCardPositioner(PreviewCardBaseComponent):
# Determines which CSS position property to use. Defaults to absolute.
position_method: Var[LiteralPosition]
- # Whether the popup tracks any layout shift of its positioning anchor. Defaults to true.
- track_anchor: Var[bool]
+ # Whether to disable the popup tracking any layout shift of its positioning anchor. Defaults to False.
+ disable_anchor_tracking: Var[bool]
# The render prop
render_: Var[Component]
@@ -213,7 +213,7 @@ class HighLevelPreviewCard(PreviewCardRoot):
"collision_boundary",
"sticky",
"position_method",
- "track_anchor",
+ "disable_anchor_tracking",
"anchor",
"collision_avoidance",
}
diff --git a/reflex_ui/components/base/preview_card.pyi b/reflex_ui/components/base/preview_card.pyi
index 5e73b3b..2a2e67f 100644
--- a/reflex_ui/components/base/preview_card.pyi
+++ b/reflex_ui/components/base/preview_card.pyi
@@ -275,7 +275,7 @@ class PreviewCardPositioner(PreviewCardBaseComponent):
position_method: Literal["absolute", "fixed"]
| Var[Literal["absolute", "fixed"]]
| None = None,
- track_anchor: Var[bool] | bool | None = None,
+ disable_anchor_tracking: Var[bool] | bool | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
diff --git a/reflex_ui/components/base/select.py b/reflex_ui/components/base/select.py
index eeae2f2..5d8a8a9 100644
--- a/reflex_ui/components/base/select.py
+++ b/reflex_ui/components/base/select.py
@@ -217,8 +217,8 @@ class SelectPositioner(SelectBaseComponent):
# Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space. Defaults to False.
align_item_with_trigger: Var[bool] = Var.create(False)
- # Whether the popup tracks any layout shift of its positioning anchor. Defaults to True.
- track_anchor: Var[bool]
+ # Whether to disable the popup tracking any layout shift of its positioning anchor. Defaults to False.
+ disable_anchor_tracking: Var[bool]
# Distance between the anchor and the popup in pixels. Defaults to 0.
side_offset: Var[int]
@@ -474,7 +474,7 @@ class HighLevelSelect(SelectRoot):
"sticky",
"position_method",
"align_item_with_trigger",
- "track_anchor",
+ "disable_anchor_tracking",
"side_offset",
"collision_avoidance",
}
diff --git a/reflex_ui/components/base/select.pyi b/reflex_ui/components/base/select.pyi
index 158235f..4b7c94f 100644
--- a/reflex_ui/components/base/select.pyi
+++ b/reflex_ui/components/base/select.pyi
@@ -343,7 +343,7 @@ class SelectPositioner(SelectBaseComponent):
| Var[Literal["absolute", "fixed"]]
| None = None,
align_item_with_trigger: Var[bool] | bool | None = None,
- track_anchor: Var[bool] | bool | None = None,
+ disable_anchor_tracking: Var[bool] | bool | None = None,
side_offset: Var[int] | int | None = None,
collision_avoidance: Var[str] | str | None = None,
render_: Component | Var[Component] | None = None,
diff --git a/reflex_ui/components/base/slider.py b/reflex_ui/components/base/slider.py
index 339a574..3172420 100644
--- a/reflex_ui/components/base/slider.py
+++ b/reflex_ui/components/base/slider.py
@@ -10,6 +10,8 @@
from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
LiteralOrientation = Literal["horizontal", "vertical"]
+LiteralThumbAlignment = Literal["center", "edge", "edge-client-only"]
+LiteralThumbCollisionBehavior = Literal["push", "swap", "none"]
on_value_event_spec = (
passthrough_event_spec(int),
@@ -89,8 +91,11 @@ class SliderRoot(SliderBaseComponent):
# The component orientation. Defaults to "horizontal".
orientation: Var[LiteralOrientation]
- # A ref to access the hidden input element.
- input_ref: Var[str]
+ # Determines how the thumb(s) align relative to the slider's control when at min or max. Defaults to "center".
+ thumb_alignment: Var[LiteralThumbAlignment]
+
+ # Controls thumb behavior during pointer interactions. In range sliders, moving a thumb with a pointer will push other thumbs it collides with by default. Defaults to "push".
+ thumb_collision_behavior: Var[LiteralThumbCollisionBehavior]
# The render prop
render_: Var[Component]
@@ -181,6 +186,12 @@ class SliderThumb(SliderBaseComponent):
# Whether the thumb should ignore user interaction.
disabled: Var[bool]
+ # The zero-based index of the thumb in a range slider. Not required for single-value sliders.
+ index: Var[int]
+
+ # A ref to access the hidden input element.
+ input_ref: Var[str]
+
# The render prop
render_: Var[Component]
diff --git a/reflex_ui/components/base/slider.pyi b/reflex_ui/components/base/slider.pyi
index f734b01..c09739a 100644
--- a/reflex_ui/components/base/slider.pyi
+++ b/reflex_ui/components/base/slider.pyi
@@ -14,6 +14,8 @@ from reflex.vars.base import Var
from reflex_ui.components.base_ui import BaseUIComponent
LiteralOrientation = Literal["horizontal", "vertical"]
+LiteralThumbAlignment = Literal["center", "edge", "edge-client-only"]
+LiteralThumbCollisionBehavior = Literal["push", "swap", "none"]
on_value_event_spec = (
passthrough_event_spec(int),
passthrough_event_spec(float),
@@ -110,7 +112,12 @@ class SliderRoot(SliderBaseComponent):
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
- input_ref: Var[str] | str | None = None,
+ thumb_alignment: Literal["center", "edge", "edge-client-only"]
+ | Var[Literal["center", "edge", "edge-client-only"]]
+ | None = None,
+ thumb_collision_behavior: Literal["none", "push", "swap"]
+ | Var[Literal["none", "push", "swap"]]
+ | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -313,6 +320,8 @@ class SliderThumb(SliderBaseComponent):
get_aria_label: Var[str] | str | None = None,
get_aria_value_text: Var[str] | str | None = None,
disabled: Var[bool] | bool | None = None,
+ index: Var[int] | int | None = None,
+ input_ref: Var[str] | str | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -372,7 +381,12 @@ class HighLevelSlider(SliderRoot):
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
- input_ref: Var[str] | str | None = None,
+ thumb_alignment: Literal["center", "edge", "edge-client-only"]
+ | Var[Literal["center", "edge", "edge-client-only"]]
+ | None = None,
+ thumb_collision_behavior: Literal["none", "push", "swap"]
+ | Var[Literal["none", "push", "swap"]]
+ | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -434,7 +448,8 @@ class HighLevelSlider(SliderRoot):
format: Options to format the input value.
disabled: Whether the slider is disabled.
orientation: The component orientation. Defaults to "horizontal".
- input_ref: A ref to access the hidden input element.
+ thumb_alignment: Determines how the thumb(s) align relative to the slider's control when at min or max. Defaults to "center".
+ thumb_collision_behavior: Controls thumb behavior during pointer interactions. In range sliders, moving a thumb with a pointer will push other thumbs it collides with by default. Defaults to "push".
render_: The render prop
unstyled: Whether the component should be unstyled
style: The style of the component.
@@ -483,7 +498,12 @@ class Slider(ComponentNamespace):
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
- input_ref: Var[str] | str | None = None,
+ thumb_alignment: Literal["center", "edge", "edge-client-only"]
+ | Var[Literal["center", "edge", "edge-client-only"]]
+ | None = None,
+ thumb_collision_behavior: Literal["none", "push", "swap"]
+ | Var[Literal["none", "push", "swap"]]
+ | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -545,7 +565,8 @@ class Slider(ComponentNamespace):
format: Options to format the input value.
disabled: Whether the slider is disabled.
orientation: The component orientation. Defaults to "horizontal".
- input_ref: A ref to access the hidden input element.
+ thumb_alignment: Determines how the thumb(s) align relative to the slider's control when at min or max. Defaults to "center".
+ thumb_collision_behavior: Controls thumb behavior during pointer interactions. In range sliders, moving a thumb with a pointer will push other thumbs it collides with by default. Defaults to "push".
render_: The render prop
unstyled: Whether the component should be unstyled
style: The style of the component.
diff --git a/reflex_ui/components/base/switch.py b/reflex_ui/components/base/switch.py
index 5a9597d..94af05a 100644
--- a/reflex_ui/components/base/switch.py
+++ b/reflex_ui/components/base/switch.py
@@ -27,7 +27,7 @@ def import_var(self):
class SwitchRoot(SwitchBaseComponent):
- """Represents the switch itself. Renders a button element and a hidden input beside."""
+ """Represents the switch itself. Renders a element and a hidden input beside it."""
tag = "Switch.Root"
@@ -58,6 +58,9 @@ class SwitchRoot(SwitchBaseComponent):
# A ref to access the hidden element.
input_ref: Var[str]
+ # The value of the switch when it is unchecked. Used for form submission when unchecked. Defaults to not submitting any value.
+ unchecked_value: Var[str]
+
# The render prop
render_: Var[Component]
diff --git a/reflex_ui/components/base/switch.pyi b/reflex_ui/components/base/switch.pyi
index bf41a38..da606c2 100644
--- a/reflex_ui/components/base/switch.pyi
+++ b/reflex_ui/components/base/switch.pyi
@@ -83,6 +83,7 @@ class SwitchRoot(SwitchBaseComponent):
read_only: Var[bool] | bool | None = None,
required: Var[bool] | bool | None = None,
input_ref: Var[str] | str | None = None,
+ unchecked_value: Var[str] | str | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -166,6 +167,7 @@ class HighLevelSwitch(SwitchRoot):
read_only: Var[bool] | bool | None = None,
required: Var[bool] | bool | None = None,
input_ref: Var[str] | str | None = None,
+ unchecked_value: Var[str] | str | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -210,6 +212,7 @@ class HighLevelSwitch(SwitchRoot):
read_only: Whether the user should be unable to activate or deactivate the switch. Defaults to False.
required: Whether the user must activate the switch before submitting a form. Defaults to False.
input_ref: A ref to access the hidden element.
+ unchecked_value: The value of the switch when it is unchecked. Used for form submission when unchecked. Defaults to not submitting any value.
render_: The render prop
unstyled: Whether the component should be unstyled
style: The style of the component.
@@ -240,6 +243,7 @@ class Switch(ComponentNamespace):
read_only: Var[bool] | bool | None = None,
required: Var[bool] | bool | None = None,
input_ref: Var[str] | str | None = None,
+ unchecked_value: Var[str] | str | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -284,6 +288,7 @@ class Switch(ComponentNamespace):
read_only: Whether the user should be unable to activate or deactivate the switch. Defaults to False.
required: Whether the user must activate the switch before submitting a form. Defaults to False.
input_ref: A ref to access the hidden element.
+ unchecked_value: The value of the switch when it is unchecked. Used for form submission when unchecked. Defaults to not submitting any value.
render_: The render prop
unstyled: Whether the component should be unstyled
style: The style of the component.
diff --git a/reflex_ui/components/base/tabs.py b/reflex_ui/components/base/tabs.py
index a946c11..bece165 100644
--- a/reflex_ui/components/base/tabs.py
+++ b/reflex_ui/components/base/tabs.py
@@ -66,11 +66,11 @@ class TabsList(TabsBaseComponent):
tag = "Tabs.List"
- # Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using Enter or Spacebar key press. Defaults to True.
+ # Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using Enter or Spacebar key press. Defaults to False.
activate_on_focus: Var[bool]
# Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
- loop: Var[bool]
+ loop_focus: Var[bool]
@classmethod
def create(cls, *children, **props) -> BaseUIComponent:
diff --git a/reflex_ui/components/base/tabs.pyi b/reflex_ui/components/base/tabs.pyi
index 06fe51a..7651c95 100644
--- a/reflex_ui/components/base/tabs.pyi
+++ b/reflex_ui/components/base/tabs.pyi
@@ -124,7 +124,7 @@ class TabsList(TabsBaseComponent):
cls,
*children,
activate_on_focus: Var[bool] | bool | None = None,
- loop: Var[bool] | bool | None = None,
+ loop_focus: Var[bool] | bool | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
| Mapping[str, Any]
diff --git a/reflex_ui/components/base/toggle_group.py b/reflex_ui/components/base/toggle_group.py
index 97ec0dd..b765bcc 100644
--- a/reflex_ui/components/base/toggle_group.py
+++ b/reflex_ui/components/base/toggle_group.py
@@ -44,13 +44,13 @@ class ToggleGroupRoot(ToggleGroupBaseComponent):
on_value_change: EventHandler[passthrough_event_spec(list[str | int], dict)]
# When false only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When true multiple items can be pressed. Defaults to False.
- toggle_multiple: Var[bool]
+ multiple: Var[bool]
# Whether the toggle group should ignore user interaction. Defaults to False.
disabled: Var[bool]
# Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
- loop: Var[bool]
+ loop_focus: Var[bool]
# The component orientation (layout flow direction). Defaults to "horizontal".
orientation: Var[LiteralOrientation]
diff --git a/reflex_ui/components/base/toggle_group.pyi b/reflex_ui/components/base/toggle_group.pyi
index 347b23a..9a01995 100644
--- a/reflex_ui/components/base/toggle_group.pyi
+++ b/reflex_ui/components/base/toggle_group.pyi
@@ -78,9 +78,9 @@ class ToggleGroupRoot(ToggleGroupBaseComponent):
*children,
default_value: Var[list[int | str]] | list[int | str] | None = None,
value: Var[list[int | str]] | list[int | str] | None = None,
- toggle_multiple: Var[bool] | bool | None = None,
+ multiple: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
- loop: Var[bool] | bool | None = None,
+ loop_focus: Var[bool] | bool | None = None,
orientation: Literal["horizontal", "vertical"]
| Var[Literal["horizontal", "vertical"]]
| None = None,
diff --git a/reflex_ui/components/base/tooltip.py b/reflex_ui/components/base/tooltip.py
index 73f8586..9ba3170 100644
--- a/reflex_ui/components/base/tooltip.py
+++ b/reflex_ui/components/base/tooltip.py
@@ -59,20 +59,14 @@ class TooltipRoot(TooltipBaseComponent):
# Whether the tooltip is disabled. Defaults to False.
disabled: Var[bool]
- # How long to wait before opening the tooltip. Specified in milliseconds. Defaults to 600.
- delay: Var[int]
-
- # How long to wait before closing the tooltip. Specified in milliseconds. Defaults to 0.
- close_delay: Var[int]
-
- # Whether the tooltip contents can be hovered without closing the tooltip. Defaults to False.
- hoverable: Var[bool]
+ # Whether to disable the hoverable popup behavior. When true, the popup will close when the pointer leaves the trigger, even if it moves to the popup. Defaults to False.
+ disable_hoverable_popup: Var[bool]
@classmethod
def create(cls, *children, **props) -> BaseUIComponent:
"""Create the tooltip root component."""
props["data-slot"] = "tooltip"
- props.setdefault("hoverable", False)
+ props.setdefault("disable_hoverable_popup", True)
return super().create(*children, **props)
@@ -102,6 +96,12 @@ class TooltipTrigger(TooltipBaseComponent):
tag = "Tooltip.Trigger"
+ # How long to wait before the tooltip may be opened on hover. Specified in milliseconds. Defaults to 300.
+ delay: Var[int]
+
+ # How long to wait before closing the tooltip that was opened on hover. Specified in milliseconds. Defaults to 0.
+ close_delay: Var[int]
+
# The render prop
render_: Var[Component]
@@ -166,8 +166,8 @@ class TooltipPositioner(TooltipBaseComponent):
# Determines which CSS position property to use. Defaults to "absolute".
position_method: Var[LiteralPositionMethod]
- # Indicates whether the tooltip should track the anchor's position
- track_anchor: Var[bool]
+ # Whether to disable the popup tracking any layout shift of its positioning anchor. Defaults to False.
+ disable_anchor_tracking: Var[bool]
# Determines how to handle collisions when positioning the popup.
collision_avoidance: Var[str | dict[str, str]]
@@ -225,9 +225,11 @@ class HighLevelTooltip(TooltipRoot):
"on_open_change_complete",
"track_cursor_axis",
"disabled",
+ "disable_hoverable_popup",
+ }
+ _trigger_props = {
"delay",
"close_delay",
- "hoverable",
}
_portal_props = {
"container",
@@ -244,7 +246,7 @@ class HighLevelTooltip(TooltipRoot):
"collision_padding",
"sticky",
"position_method",
- "track_anchor",
+ "disable_anchor_tracking",
"collision_avoidance",
"class_name",
}
@@ -272,6 +274,7 @@ def create(
# Extract props for different parts
root_props = {k: props.pop(k) for k in cls._root_props & props.keys()}
+ trigger_props = {k: props.pop(k) for k in cls._trigger_props & props.keys()}
portal_props = {k: props.pop(k) for k in cls._portal_props & props.keys()}
positioner_props = {
k: props.pop(k) for k in cls._positioner_props & props.keys()
@@ -279,12 +282,13 @@ def create(
# Set default values
positioner_props.setdefault("side_offset", 8)
- root_props.setdefault("delay", 0)
- root_props.setdefault("close_delay", 0)
+ trigger_props.setdefault("delay", 0)
+ trigger_props.setdefault("close_delay", 0)
return TooltipRoot.create(
TooltipTrigger.create(
render_=trigger,
+ **trigger_props,
),
TooltipPortal.create(
TooltipPositioner.create(
diff --git a/reflex_ui/components/base/tooltip.pyi b/reflex_ui/components/base/tooltip.pyi
index e2fce36..0933ebe 100644
--- a/reflex_ui/components/base/tooltip.pyi
+++ b/reflex_ui/components/base/tooltip.pyi
@@ -87,9 +87,7 @@ class TooltipRoot(TooltipBaseComponent):
| Var[Literal["bottom", "none", "x", "y"]]
| None = None,
disabled: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
- hoverable: Var[bool] | bool | None = None,
+ disable_hoverable_popup: Var[bool] | bool | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
| Mapping[str, Any]
@@ -170,6 +168,8 @@ class TooltipTrigger(TooltipBaseComponent):
def create(
cls,
*children,
+ delay: Var[int] | int | None = None,
+ close_delay: Var[int] | int | None = None,
render_: Component | Var[Component] | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
@@ -261,7 +261,7 @@ class TooltipPositioner(TooltipBaseComponent):
position_method: Literal["absolute", "fixed"]
| Var[Literal["absolute", "fixed"]]
| None = None,
- track_anchor: Var[bool] | bool | None = None,
+ disable_anchor_tracking: Var[bool] | bool | None = None,
collision_avoidance: Var[dict[str, str] | str]
| dict[str, str]
| str
@@ -383,9 +383,7 @@ class HighLevelTooltip(TooltipRoot):
| Var[Literal["bottom", "none", "x", "y"]]
| None = None,
disabled: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
- hoverable: Var[bool] | bool | None = None,
+ disable_hoverable_popup: Var[bool] | bool | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
| Mapping[str, Any]
@@ -432,9 +430,7 @@ class HighLevelTooltip(TooltipRoot):
on_open_change_complete: Event handler called after any animations complete when the tooltip is opened or closed.
track_cursor_axis: Determines which axis the tooltip should track the cursor on. Defaults to "None".
disabled: Whether the tooltip is disabled. Defaults to False.
- delay: How long to wait before opening the tooltip. Specified in milliseconds. Defaults to 600.
- close_delay: How long to wait before closing the tooltip. Specified in milliseconds. Defaults to 0.
- hoverable: Whether the tooltip contents can be hovered without closing the tooltip. Defaults to False.
+ disable_hoverable_popup: Whether to disable the hoverable popup behavior. When true, the popup will close when the pointer leaves the trigger, even if it moves to the popup. Defaults to False.
unstyled: Whether the component should be unstyled
style: The style of the component.
key: A unique key for the component.
@@ -468,9 +464,7 @@ class Tooltip(ComponentNamespace):
| Var[Literal["bottom", "none", "x", "y"]]
| None = None,
disabled: Var[bool] | bool | None = None,
- delay: Var[int] | int | None = None,
- close_delay: Var[int] | int | None = None,
- hoverable: Var[bool] | bool | None = None,
+ disable_hoverable_popup: Var[bool] | bool | None = None,
unstyled: Var[bool] | bool | None = None,
style: Sequence[Mapping[str, Any]]
| Mapping[str, Any]
@@ -517,9 +511,7 @@ class Tooltip(ComponentNamespace):
on_open_change_complete: Event handler called after any animations complete when the tooltip is opened or closed.
track_cursor_axis: Determines which axis the tooltip should track the cursor on. Defaults to "None".
disabled: Whether the tooltip is disabled. Defaults to False.
- delay: How long to wait before opening the tooltip. Specified in milliseconds. Defaults to 600.
- close_delay: How long to wait before closing the tooltip. Specified in milliseconds. Defaults to 0.
- hoverable: Whether the tooltip contents can be hovered without closing the tooltip. Defaults to False.
+ disable_hoverable_popup: Whether to disable the hoverable popup behavior. When true, the popup will close when the pointer leaves the trigger, even if it moves to the popup. Defaults to False.
unstyled: Whether the component should be unstyled
style: The style of the component.
key: A unique key for the component.
diff --git a/reflex_ui/components/base_ui.py b/reflex_ui/components/base_ui.py
index cac9bee..3e96536 100644
--- a/reflex_ui/components/base_ui.py
+++ b/reflex_ui/components/base_ui.py
@@ -4,8 +4,8 @@
from reflex_ui.components.component import CoreComponent
-PACKAGE_NAME = "@base-ui-components/react"
-PACKAGE_VERSION = "1.0.0-beta.4"
+PACKAGE_NAME = "@base-ui/react"
+PACKAGE_VERSION = "1.0.0"
class BaseUIComponent(CoreComponent):
diff --git a/reflex_ui/components/base_ui.pyi b/reflex_ui/components/base_ui.pyi
index 96810bf..b83a5d8 100644
--- a/reflex_ui/components/base_ui.pyi
+++ b/reflex_ui/components/base_ui.pyi
@@ -12,8 +12,8 @@ from reflex.vars.base import Var
from reflex_ui.components.component import CoreComponent
-PACKAGE_NAME = "@base-ui-components/react"
-PACKAGE_VERSION = "1.0.0-beta.4"
+PACKAGE_NAME = "@base-ui/react"
+PACKAGE_VERSION = "1.0.0"
class BaseUIComponent(CoreComponent):
@classmethod