Add anchorY prop to AnimatePresence

[mattgperry]

Add anchorY prop to AnimatePresence to control vertical anchor point during exit animations in popLayout mode. Similar to the existing anchorX prop for horizontal positioning, anchorY allows choosing between "top" (default) and "bottom" positioning.

When an element is originally positioned using bottom: 0, setting anchorY="bottom" ensures it maintains its position relative to the bottom of its container during exit animations, fixing the reported bug where elements would shift downward.

Changes:

• Add anchorY prop to AnimatePresenceProps type
• Add bottom measurement in PopChild's getSnapshotBeforeUpdate
• Use anchorY to determine whether to use top or bottom CSS positioning
• Pass anchorY through PresenceChild to PopChild
• Add test for bottom positioning preservation

Fixes #3324

[claude]

Code Review: Add anchorY prop to AnimatePresence

Summary

This PR adds the anchorY prop to AnimatePresence to control vertical anchor point during exit animations in popLayout mode, mirroring the existing anchorX functionality. This fixes issue #3324 where elements positioned with bottom: 0 would shift downward during exit animations.

Strengths

1. Consistent Design Pattern: The implementation perfectly mirrors the existing anchorX pattern, making it intuitive and maintainable.

2. Minimal, Focused Changes: The PR makes only the necessary changes across 5 files with clear purpose - no scope creep or unnecessary refactoring.

3. Type Safety: Proper TypeScript types added with union types matching the anchorX pattern.

4. Good Documentation: JSDoc comments clearly explain the purpose and use case for the new prop.

5. Proper Defaults: anchorY default to top maintains backward compatibility with existing behavior.

6. Test Coverage: Added a test case that validates the fix for the reported issue.

Observations & Suggestions

1. CSS Syntax Issue in PopChild.tsx:121-122 (Severity: High - Bug)

Lines 121-122 have a CSS syntax issue. The template literals x and y already include the CSS property name (e.g., left: 20 or bottom: 30), so adding px creates invalid CSS.

This is actually already a bug in the existing code for anchorX at line 121. Both lines should remove the extra px suffix.

2. Test Assertions Could Be Stronger (Severity: Medium)

The test at lines 714-718 checks computedStyle.position and initialBottom, but doesn't verify that the injected CSS rule actually uses bottom instead of top. Consider verifying the injected style element directly.

3. Missing Test for Default Behavior (Severity: Low)

There's a test for anchorY=bottom but no test verifying that the default (anchorY=top) still works correctly. Consider adding a test to ensure backward compatibility.

4. No Test for anchorX

There are no existing tests for anchorX behavior. While out of scope for this PR, it would be valuable to add test coverage for anchorX in a follow-up.

Security & Performance

• No security concerns. Values are numbers, proper nonce support for CSP compliance.
• No performance impact. Minimal computational overhead using efficient useInsertionEffect pattern.

Recommendations

Must Fix (before merge):

1. Fix the CSS syntax bug on lines 121-122 in PopChild.tsx (remove the extra px)

Should Fix:
2. Strengthen test assertions to verify the actual CSS rule uses bottom
3. Add a test case for default anchorY=top behavior

Nice to Have:
4. Consider adding tests for anchorX in a follow-up PR

Overall Assessment

Verdict: Approve with required fixes

This is a well-designed, focused PR that solves a real user issue. The implementation is clean and follows existing patterns. However, there's a critical CSS syntax bug that must be fixed before merging (and this bug also exists in the current anchorX code). Once that's addressed, this PR is ready to merge.

The code quality is high, follows repository conventions, and the test coverage demonstrates the fix works. Great job maintaining consistency with the existing anchorX implementation!

Reviewed with Claude Code