feat: drawer improvements (#4057)

.changeset/cold-dolls-vanish.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/drawer": patch
+"@nextui-org/modal": patch
+---
+
+Drawer styles and transition improved

apps/docs/content/components/drawer/index.ts

@@ -5,6 +5,7 @@ import placement from "./placement";
 import form from "./form";
 import backdrop from "./backdrop";
 import customMotion from "./custom-motion";
+import customStyles from "./custom-styles";
 
 export const drawerContent = {
   usage,
@@ -14,4 +15,5 @@ export const drawerContent = {
   form,
   backdrop,
   customMotion,
+  customStyles,
 };

apps/docs/content/docs/components/drawer.mdx

@@ -115,6 +115,10 @@ Drawer offers a `motionProps` property to customize the `enter` / `exit` animati
 
 > Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).
 
+### Custom Styles
+
+<CodeDemo title="Custom Styles" files={drawerContent.customStyles} />
+
 ## Slots
 
 - **wrapper**: The wrapper slot of the drawer. It wraps the `base` and the `backdrop` slots.

packages/components/drawer/package.json

@@ -50,7 +50,10 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/checkbox": "workspace:*",
+    "@nextui-org/tooltip": "workspace:*",
+    "@nextui-org/image": "workspace:*",
     "@nextui-org/button": "workspace:*",
+    "@nextui-org/avatar": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "@nextui-org/switch": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",

packages/components/drawer/src/use-drawer.ts

@@ -4,7 +4,7 @@ import {drawer} from "@nextui-org/theme";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {useCallback, useMemo} from "react";
 import {TRANSITION_EASINGS} from "@nextui-org/framer-utils";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx, isEmpty} from "@nextui-org/shared-utils";
 import {PropGetter} from "@nextui-org/system";
 
 interface Props extends Omit<ModalProps, "placement" | "scrollBehavior" | "children"> {
@@ -39,7 +39,7 @@ export function useDrawer(originalProps: UseDrawerProps) {
   const domRef = useDOMRef(ref);
 
   const motionProps = useMemo(() => {
-    if (drawerMotionProps !== void 0) return drawerMotionProps;
+    if (!isEmpty(drawerMotionProps)) return drawerMotionProps;
 
     const key = placement === "left" || placement === "right" ? "x" : "y";
 
@@ -49,19 +49,17 @@ export function useDrawer(originalProps: UseDrawerProps) {
           [key]: 0,
           transition: {
             [key]: {
-              bounce: 0,
-              duration: 0.3,
-              ease: TRANSITION_EASINGS.ease,
+              duration: 0.2,
+              ease: TRANSITION_EASINGS.easeOut,
             },
           },
         },
         exit: {
           [key]: placement === "top" || placement === "left" ? "-100%" : "100%",
           transition: {
             [key]: {
-              bounce: 0,
-              duration: 0.6,
-              ease: TRANSITION_EASINGS.ease,
+              duration: 0.1,
+              ease: TRANSITION_EASINGS.easeIn,
             },
           },
         },

packages/components/modal/src/use-modal.ts

@@ -88,7 +88,6 @@ export function useModal(originalProps: UseModalProps) {
     as,
     className,
     classNames,
-
     isOpen,
     defaultOpen,
     onOpenChange,
@@ -162,6 +161,7 @@ export function useModal(originalProps: UseModalProps) {
     "data-open": dataAttr(state.isOpen),
     "data-dismissable": dataAttr(isDismissable),
     "aria-modal": dataAttr(true),
+    "data-placement": originalProps?.placement ?? "right",
     "aria-labelledby": headerMounted ? headerId : undefined,
     "aria-describedby": bodyMounted ? bodyId : undefined,
   });