From b1330cb99a75022ccfd95f797f5dff0f5ca67353 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 16 Aug 2024 12:12:00 +0200
Subject: [PATCH] Animate dropdown menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../dropdown-menu/dropdown-menu.tsx           | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 3268cb106..50f5c1de8 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -50,6 +50,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
   const history = useHistory();
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isDisplayed, setIsDisplayed] = useState<boolean>(false);
 
   const arrowRef = useRef<HTMLDivElement>(null);
 
@@ -254,12 +255,18 @@ const DropdownMenu = (props: IDropdownMenu) => {
     }
   }, [isOpen, refs.floating.current]);
 
+  useEffect(() => {
+    setTimeout(() => setIsDisplayed(isOpen), isOpen ? 0 : 150);
+  }, [isOpen]);
+
   if (items.length === 0) {
     return null;
   }
 
   const autoFocus = !items.some((item) => item?.active);
 
+  console.log(placement);
+
   return (
     <>
       {children ? (
@@ -284,14 +291,23 @@ const DropdownMenu = (props: IDropdownMenu) => {
         />
       )}
 
-      {isOpen ? (
+      {isOpen || isDisplayed ? (
         <Portal>
           <div
             data-testid='dropdown-menu'
             ref={refs.setFloating}
             className={
-              clsx('z-[1001] w-56 rounded-md bg-white py-1 shadow-lg transition-opacity duration-100 focus:outline-none black:bg-black dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', {
-                'opacity-0 pointer-events-none': !isOpen,
+              clsx('z-[1001] w-56 rounded-md bg-white py-1 shadow-lg duration-100 ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-transform dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', {
+                'scale-0': !(isDisplayed && isOpen),
+                'scale-100': (isDisplayed && isOpen),
+                'origin-bottom': placement === 'top',
+                'origin-left': placement === 'right',
+                'origin-top': placement === 'bottom',
+                'origin-right': placement === 'left',
+                'origin-bottom-left': placement === 'top-start',
+                'origin-bottom-right': placement === 'top-end',
+                'origin-top-left': placement === 'bottom-start',
+                'origin-top-right': placement === 'bottom-end',
               })
             }
             style={{