Compare commits

...

2 Commits

Author SHA1 Message Date
Masen Furer
98f50811f9
Override react-is@19.0.0 for recharts compatibility (#4857)
See https://github.com/recharts/recharts/issues/4558 for details.
2025-02-21 16:11:40 -08:00
Khaleel Al-Adhami
ee03415894
fix autoscroll on stateful children (#4858) 2025-02-21 15:09:25 -08:00
4 changed files with 17 additions and 3 deletions

View File

@ -15,7 +15,13 @@
"devDependencies": { "devDependencies": {
{% for package, version in dev_dependencies.items() %} {% for package, version in dev_dependencies.items() %}
"{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %} "{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
{% endfor %}
},
"overrides": {
{% for package, version in overrides.items() %}
"{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
{% endfor %} {% endfor %}
} }
} }

View File

@ -11,7 +11,9 @@ from reflex.vars.base import Var, get_unique_variable_name
class AutoScroll(Div): class AutoScroll(Div):
"""A div that automatically scrolls to the bottom when new content is added.""" """A div that automatically scrolls to the bottom when new content is added."""
_memoization_mode = MemoizationMode(disposition=MemoizationDisposition.ALWAYS) _memoization_mode = MemoizationMode(
disposition=MemoizationDisposition.ALWAYS, recursive=False
)
@classmethod @classmethod
def create(cls, *children, **props): def create(cls, *children, **props):
@ -44,7 +46,6 @@ class AutoScroll(Div):
""" """
ref_name = self.get_ref() ref_name = self.get_ref()
return [ return [
"const containerRef = useRef(null);",
"const wasNearBottom = useRef(false);", "const wasNearBottom = useRef(false);",
"const hadScrollbar = useRef(false);", "const hadScrollbar = useRef(false);",
f""" f"""
@ -85,6 +86,8 @@ useEffect(() => {{
const container = {ref_name}.current; const container = {ref_name}.current;
if (!container) return; if (!container) return;
scrollToBottomIfNeeded();
// Create ResizeObserver to detect height changes // Create ResizeObserver to detect height changes
const resizeObserver = new ResizeObserver(() => {{ const resizeObserver = new ResizeObserver(() => {{
scrollToBottomIfNeeded(); scrollToBottomIfNeeded();

View File

@ -195,3 +195,7 @@ class PackageJson(SimpleNamespace):
"postcss": "8.5.1", "postcss": "8.5.1",
"postcss-import": "16.1.0", "postcss-import": "16.1.0",
} }
OVERRIDES = {
# This should always match the `react` version in DEPENDENCIES for recharts compatibility.
"react-is": "19.0.0"
}

View File

@ -846,6 +846,7 @@ def _compile_package_json():
}, },
dependencies=constants.PackageJson.DEPENDENCIES, dependencies=constants.PackageJson.DEPENDENCIES,
dev_dependencies=constants.PackageJson.DEV_DEPENDENCIES, dev_dependencies=constants.PackageJson.DEV_DEPENDENCIES,
overrides=constants.PackageJson.OVERRIDES,
) )