Merge pull request #324 from kloudlite/popup/test

removed framer-motion from option-list
kloudlite · Oct 15, 2024 · 73c9e66 · 73c9e66
2 parents 815ac81 + 1b6993d
commit 73c9e66
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 31 deletions.
diff --git a/src/design-system/components/atoms/option-list.tsx b/src/design-system/components/atoms/option-list.tsx
@@ -131,37 +131,28 @@ const OptionMenuContent = forwardRef<
     },
     ref,
   ) => (
-    <AnimatePresence>
-      {open && (
-        <OptionMenuPrimitive.Portal forceMount>
-          <OptionMenuPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            align={align}
-            side={side}
-            alignOffset={alignOffset}
-            loop
-            forceMount
-            asChild
-            {...props}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.9 }}
-              transition={{ duration: 0.2, ease: 'anticipate' }}
-              className={cn(
-                'z-50 border border-border-default shadow-popover bg-surface-basic-default rounded min-w-[160px] overflow-hidden origin-top py-lg',
-                className,
-              )}
-            >
-              {children}
-            </motion.div>
-          </OptionMenuPrimitive.Content>
-        </OptionMenuPrimitive.Portal>
-      )}
-    </AnimatePresence>
+    <OptionMenuPrimitive.Portal>
+      <OptionMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        align={align}
+        side={side}
+        alignOffset={alignOffset}
+        loop
+        asChild
+        {...props}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className={cn(
+            'z-50 border border-border-default shadow-popover bg-surface-basic-default rounded min-w-[160px] overflow-hidden origin-top py-lg will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </OptionMenuPrimitive.Content>
+    </OptionMenuPrimitive.Portal>
   ),
 );
 OptionMenuContent.displayName = OptionMenuPrimitive.Content.displayName;

diff --git a/src/design-system/tailwind-base.js b/src/design-system/tailwind-base.js
@@ -113,6 +113,22 @@ const config = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: '0px' },
         },
+        slideDownAndFade: {
+          from: { opacity: '0', transform: 'translateY(-2px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideLeftAndFade: {
+          from: { opacity: '0', transform: 'translateX(2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
+        slideUpAndFade: {
+          from: { opacity: '0', transform: 'translateY(-2px) scale(0.95)' },
+          to: { opacity: '1', transform: 'translateY(0) scale(1)' },
+        },
+        slideRightAndFade: {
+          from: { opacity: '0', transform: 'translateX(-2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
       },
       animation: {
         scaleIn: 'scaleIn 200ms ease',
@@ -125,6 +141,13 @@ const config = {
         exitToRight: 'exitToRight 250ms ease',
         slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
         slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        slideDownAndFade:
+          'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade:
+          'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade:
+          'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
       },
       boxShadow: {
         button: '0px 1px 4px rgba(0, 0, 0, 0.05)',