From 2d66edc5b9970007fff23729299a43ba6ddce2d5 Mon Sep 17 00:00:00 2001
From: Grant Steffen <40581813+ghsteff@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:46:00 -0500
Subject: [PATCH] Add Drawer custom animation props

---
 src/layers/Drawer/Drawer.story.tsx | 25 ++++++++++++++++++++++++-
 src/layers/Drawer/Drawer.tsx       | 10 +++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/layers/Drawer/Drawer.story.tsx b/src/layers/Drawer/Drawer.story.tsx
index 70a51dd7..fd58b83d 100644
--- a/src/layers/Drawer/Drawer.story.tsx
+++ b/src/layers/Drawer/Drawer.story.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useDrawer } from './useDrawer';
 import { Drawer } from './Drawer';
 import { Button } from '../../elements';
@@ -78,3 +78,26 @@ export const CustomHeader = () => {
     </Fragment>
   );
 };
+
+export const CustomAnimation = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <Drawer
+        className="max-w-[400px] mr-10 max-h-[90vh] my-auto rounded-xl"
+        initial={{ x: '120%', opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        exit={{ x: '120%', opacity: 0 }}
+        transition={{ duration: 0.5, ease: [0.12, 0.78, 0.32, 0.98] }}
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
+        <p>Hello There!</p>
+      </Drawer>
+      <Button type="button" onClick={() => setIsOpen(!isOpen)}>
+        Open
+      </Button>
+    </Fragment>
+  );
+};
diff --git a/src/layers/Drawer/Drawer.tsx b/src/layers/Drawer/Drawer.tsx
index 00ab5b2c..eec5d7e3 100644
--- a/src/layers/Drawer/Drawer.tsx
+++ b/src/layers/Drawer/Drawer.tsx
@@ -2,14 +2,16 @@ import React, { FC, ReactElement } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useId, CloneElement } from '@/utils';
 import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay';
-import { motion } from 'framer-motion';
+import { motion, MotionProps } from 'framer-motion';
 import { variants } from './variants';
 import { DrawerHeader, DrawerHeaderProps } from './DrawerHeader';
 import { twMerge } from 'tailwind-merge';
 import { DrawerTheme } from './DrawerTheme';
 import { useComponentTheme } from '@/utils';
 
-export interface DrawerProps extends Omit<GlobalOverlayProps, 'children'> {
+export interface DrawerProps
+  extends Omit<GlobalOverlayProps, 'children'>,
+    MotionProps {
   /**
    * Position of the drawer.
    */
@@ -82,7 +84,8 @@ export const Drawer: FC<Partial<DrawerProps>> = ({
   disablePadding = false,
   showCloseButton = true,
   onClose,
-  theme: customTheme
+  theme: customTheme,
+  ...rest
 }) => {
   const id = useId();
   const variant = variants[position];
@@ -129,6 +132,7 @@ export const Drawer: FC<Partial<DrawerProps>> = ({
                 disablePadding && theme.disablePadding,
                 className
               )}
+              {...rest}
             >
               {(header || headerElement) && (
                 <CloneElement<DrawerHeaderProps>