-
Notifications
You must be signed in to change notification settings - Fork 6
feat(popover): update dropdown animation #840
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
navin-moorthy
merged 14 commits into
dev
from
feat/popover-dropdown-open-close-animations
Mar 10, 2026
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
8aab3e9
feat(ui-components): implement new Menu component and replace Popover…
rogerantony-dev 6ae23c4
refactor(dashboard): update DeleteCollectionModal and CollectionOptio…
rogerantony-dev d181d02
refactor(dashboard): replace Popover with Menu component in HeaderOpt…
rogerantony-dev 6f20a63
refactor(dashboard): streamline Menu component usage and remove unnec…
rogerantony-dev 527096f
refactor(dashboard): update dismiss logic in HeaderOptionsPopover and…
rogerantony-dev 1cb8f2e
refactor(ui-components): replace Popover imports with new Recollect P…
rogerantony-dev 9bd49a9
Merge branch 'dev' into feat/popover-dropdown-open-close-animations
rogerantony-dev 8f089ff
fix(categoryIconsDropdown): adjust padding in Popover.Popup for bette…
rogerantony-dev 7b7ce41
fix(combobox): increase z-index for Positioner to improve stacking co…
rogerantony-dev 186c13f
feat(animated-size): add AnimatedSize component for smooth resizing a…
rogerantony-dev 5ecaf9e
refactor(dashboard): rename isItemClick to isItemClickRef for clarity
rogerantony-dev ba1648f
feat(dashboard): enhance EditPopover to conditionally render
rogerantony-dev 7122a68
refactor(dashboard): simplify EditPopover state management and improv…
rogerantony-dev 0572823
fix(popover): correct z-index class format in Positioner component
rogerantony-dev File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| "use client"; | ||
|
|
||
| import { useEffect, useRef, useState } from "react"; | ||
| import { motion, useReducedMotion } from "motion/react"; | ||
|
|
||
| interface AnimatedSizeProps { | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| /** | ||
| * Wraps children in a container that smoothly animates width/height changes | ||
| * using ResizeObserver + Framer Motion spring animation. | ||
| * Respects prefers-reduced-motion. | ||
| */ | ||
| export function AnimatedSize({ children }: AnimatedSizeProps) { | ||
| const shouldReduceMotion = useReducedMotion(); | ||
| const ref = useRef<HTMLDivElement>(null); | ||
| const [size, setSize] = useState<{ | ||
| height: number; | ||
| width: number; | ||
| } | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const el = ref.current; | ||
| if (!el) { | ||
| return () => {}; | ||
| } | ||
|
|
||
| const observer = new ResizeObserver(([entry]) => { | ||
| if (!entry) { | ||
| return; | ||
| } | ||
|
|
||
| const { height, width } = entry.contentRect; | ||
| // Skip zero sizes (popup closing) — let parent CSS animation handle exit | ||
| if (height > 0 && width > 0) { | ||
| setSize({ height, width }); | ||
| } | ||
| }); | ||
| observer.observe(el); | ||
| return () => observer.disconnect(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <motion.div | ||
| animate={size ?? undefined} | ||
| transition={ | ||
| shouldReduceMotion | ||
| ? { duration: 0 } | ||
| : { type: "spring", bounce: 0.15, duration: 0.3 } | ||
| } | ||
| style={{ overflow: "clip" }} | ||
| > | ||
| <div ref={ref} className="w-fit"> | ||
| {children} | ||
| </div> | ||
| </motion.div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| "use client"; | ||
|
|
||
| import { Popover as PopoverPrimitive } from "@base-ui/react/popover"; | ||
|
|
||
| import { cn } from "@/utils/tailwind-merge"; | ||
|
|
||
| function Root({ ...props }: PopoverPrimitive.Root.Props) { | ||
| return <PopoverPrimitive.Root {...props} />; | ||
| } | ||
|
|
||
| function Trigger({ className, ...props }: PopoverPrimitive.Trigger.Props) { | ||
| return <PopoverPrimitive.Trigger className={cn(className)} {...props} />; | ||
| } | ||
|
|
||
| function Portal(props: PopoverPrimitive.Portal.Props) { | ||
| return <PopoverPrimitive.Portal {...props} />; | ||
| } | ||
|
|
||
| function Positioner({ | ||
| className, | ||
| sideOffset = 1, | ||
| ...props | ||
| }: PopoverPrimitive.Positioner.Props) { | ||
| return ( | ||
| <PopoverPrimitive.Positioner | ||
| className={cn("z-51", className)} | ||
| sideOffset={sideOffset} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function Popup({ className, ...props }: PopoverPrimitive.Popup.Props) { | ||
| return ( | ||
| <PopoverPrimitive.Popup | ||
| className={cn( | ||
| "origin-center rounded-xl bg-gray-50 p-1 shadow-custom-3 outline-hidden transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-open:origin-(--transform-origin) data-starting-style:scale-95 data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| const Backdrop = PopoverPrimitive.Backdrop; | ||
|
|
||
| export const Popover = { | ||
| Backdrop, | ||
| Popup, | ||
| Portal, | ||
| Positioner, | ||
| Root, | ||
| Trigger, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use something framer motion native solution using layout - https://motion.dev/examples/react-base-tabs?platform=react&search=layout & https://motion.dev/docs/react-layout-animations?
Explore if its possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thats what i tried initially, but animation was not this good, felt a bit janky, Thats why i choose to go this way
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
like the popover was changing correctly, but the text and icons would get stretched to achieve that
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ha, okay approving as it is.