💄 Animations

[totase]

🤖 Summary

This pull request includes several changes to enhance the functionality and styling of the context menu component. The most significant updates involve the addition of animations for menu exit and item click events, as well as the introduction of new props and states to manage these animations.

Enhancements to Context Menu Component:

• src/components/ContextMenu.tsx: Added animateExit prop and leaving state to handle exit animations. Updated the hide method to trigger the exit animation if animateExit is true. Included onAnimationEnd handler to reset states after animation. [1] [2] [3] [4]
• src/components/MenuItem.tsx: Introduced MenuItemExternalProps and MenuItemState interfaces to manage click animations. Added onAnimationEnd handler to hide the menu and trigger the onClick event after animation. [1] [2]

Styling Updates:

• src/styles.css: Added keyframe animations for context menu exit and menu item click events. Updated styles to apply these animations. [1] [2] [3]

Utility Function Changes:

• src/utils.ts: Modified cloneChildren function to accept and pass MenuItemExternalProps to cloned elements. [1] [2]

Other Changes:

• app/main.tsx: Updated the import path for the main CSS file.
• package.json: Changed the start script to use npm run start instead of parcel.