@trackunit/react-drawer 0.1.22 → 0.1.24

package/index.cjs.js

@@ -91,7 +91,7 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
     "bg-black/30",
     "bg-opacity-50",
     "transition-opacity",
-    "duration-200",
+    "duration-500",
     "ease-[cubic-bezier(0.32,0.72,0,1)]",
     "opacity-0",
 ], {
@@ -103,16 +103,7 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
     },
 });
 
-const cvaDrawer = cssClassVarianceUtilities.cvaMerge([
-    "z-toast",
-    "pointer-events-auto",
-    "absolute",
-    "transform",
-    "flex-col",
-    "transition-transform",
-    "duration-300",
-    "ease-[cubic-bezier(0.32,0.72,0,1)]",
-], {
+const cvaDrawer = cssClassVarianceUtilities.cvaMerge(["z-toast", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
     variants: {
         position: {
             left: ["left-0", "top-0", "h-full", "w-fit"],
@@ -121,20 +112,20 @@ const cvaDrawer = cssClassVarianceUtilities.cvaMerge([
             bottom: ["bottom-0", "left-0", "right-0", "max-h-screen", "w-full", "pt-3"],
         },
         mode: {
-            open: "", // No additional classes needed; position determines translation
-            closed: "", // Translation handled in compoundVariants
+            open: ["opacity-100"], // No additional classes needed; position determines translation
+            closed: ["opacity-0"], // Translation handled in compoundVariants
         },
     },
     compoundVariants: [
         {
             mode: "open",
             position: "left",
-            className: "translate-x-0",
+            className: ["translate-x-0"],
         },
         {
             mode: "closed",
             position: "left",
-            className: "-translate-x-full",
+            className: ["-translate-x-full"],
         },
         {
             mode: "open",
@@ -172,13 +163,13 @@ const cvaDrawer = cssClassVarianceUtilities.cvaMerge([
         mode: "closed",
     },
 });
-const cvaDrawerContent = cssClassVarianceUtilities.cvaMerge(["flex", "h-full", "shadow-lg", "bg-white"], {
+const cvaDrawerContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "h-full", "shadow-lg", "bg-white"], {
     variants: {
         position: {
             left: "rounded-r-lg",
             right: "rounded-l-lg",
-            top: ["flex-col", "rounded-b-lg"],
-            bottom: ["max-h-[calc(100dvh-10px)]", "flex-col", "rounded-t-lg", "sm:max-h-none"],
+            top: "rounded-b-lg",
+            bottom: ["max-h-[calc(100dvh-10px)]", "rounded-t-lg", "sm:max-h-none"],
         },
     },
 });
@@ -210,8 +201,8 @@ onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, data
             setMode("closed");
         }
     }, [open]);
-    const handleAnimationEnd = react.useCallback(() => {
-        if (mode === "closed") {
+    const handleAnimationEnd = react.useCallback((transitionEvent) => {
+        if (mode === "closed" && transitionEvent.propertyName === "transform") {
             setShouldRender(false);
         }
     }, [mode, setShouldRender]);
@@ -416,8 +407,9 @@ const CLOSING_THRESHOLD = 0.15;
  * The component manages its docked state based on the open prop and keepMountedWhenClosed prop.
  * It also applies styles dynamically based on whether the drawer is being dragged.
  */
-const SwipeableDrawer = ({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position = "bottom", ...others }) => {
+const SwipeableDrawer = react.forwardRef(({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position = "bottom", ...others }, ref) => {
     const drawerRefs = react.useRef(null);
+    react.useImperativeHandle(ref, () => drawerRefs.current);
     const [isDocked, setIsDocked] = react.useState(keepMountedWhenClosed && !open);
     const { handlers, isDragging, dragDistance } = useSwipeHandlers({
         ref: drawerRefs,
@@ -451,7 +443,8 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, children, keepMountedWh
         }
     }, [drawerStyle, drawerRefs]);
     return (jsxRuntime.jsxs(Drawer, { className: cvaSwipeableDrawer({ docked: isDocked, className }), "data-docked": isDocked, keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRefs, ...others, children: [jsxRuntime.jsx(DrawerPuller, { ...handlers }), children] }));
-};
+});
+SwipeableDrawer.displayName = "SwipeableDrawer";
 const cvaSwipeableDrawer = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         docked: {

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { useEffect, forwardRef, useState, useCallback, useRef, useMemo } from 'react';
+import { useEffect, forwardRef, useState, useCallback, useRef, useImperativeHandle, useMemo } from 'react';
 import usePortal from 'react-useportal';
 import { useViewportSize, Icon, useGeometry } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -89,7 +89,7 @@ const cvaOverlayContainer = cvaMerge([
     "bg-black/30",
     "bg-opacity-50",
     "transition-opacity",
-    "duration-200",
+    "duration-500",
     "ease-[cubic-bezier(0.32,0.72,0,1)]",
     "opacity-0",
 ], {
@@ -101,16 +101,7 @@ const cvaOverlayContainer = cvaMerge([
     },
 });
 
-const cvaDrawer = cvaMerge([
-    "z-toast",
-    "pointer-events-auto",
-    "absolute",
-    "transform",
-    "flex-col",
-    "transition-transform",
-    "duration-300",
-    "ease-[cubic-bezier(0.32,0.72,0,1)]",
-], {
+const cvaDrawer = cvaMerge(["z-toast", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
     variants: {
         position: {
             left: ["left-0", "top-0", "h-full", "w-fit"],
@@ -119,20 +110,20 @@ const cvaDrawer = cvaMerge([
             bottom: ["bottom-0", "left-0", "right-0", "max-h-screen", "w-full", "pt-3"],
         },
         mode: {
-            open: "", // No additional classes needed; position determines translation
-            closed: "", // Translation handled in compoundVariants
+            open: ["opacity-100"], // No additional classes needed; position determines translation
+            closed: ["opacity-0"], // Translation handled in compoundVariants
         },
     },
     compoundVariants: [
         {
             mode: "open",
             position: "left",
-            className: "translate-x-0",
+            className: ["translate-x-0"],
         },
         {
             mode: "closed",
             position: "left",
-            className: "-translate-x-full",
+            className: ["-translate-x-full"],
         },
         {
             mode: "open",
@@ -170,13 +161,13 @@ const cvaDrawer = cvaMerge([
         mode: "closed",
     },
 });
-const cvaDrawerContent = cvaMerge(["flex", "h-full", "shadow-lg", "bg-white"], {
+const cvaDrawerContent = cvaMerge(["flex", "flex-col", "h-full", "shadow-lg", "bg-white"], {
     variants: {
         position: {
             left: "rounded-r-lg",
             right: "rounded-l-lg",
-            top: ["flex-col", "rounded-b-lg"],
-            bottom: ["max-h-[calc(100dvh-10px)]", "flex-col", "rounded-t-lg", "sm:max-h-none"],
+            top: "rounded-b-lg",
+            bottom: ["max-h-[calc(100dvh-10px)]", "rounded-t-lg", "sm:max-h-none"],
         },
     },
 });
@@ -208,8 +199,8 @@ onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, data
             setMode("closed");
         }
     }, [open]);
-    const handleAnimationEnd = useCallback(() => {
-        if (mode === "closed") {
+    const handleAnimationEnd = useCallback((transitionEvent) => {
+        if (mode === "closed" && transitionEvent.propertyName === "transform") {
             setShouldRender(false);
         }
     }, [mode, setShouldRender]);
@@ -414,8 +405,9 @@ const CLOSING_THRESHOLD = 0.15;
  * The component manages its docked state based on the open prop and keepMountedWhenClosed prop.
  * It also applies styles dynamically based on whether the drawer is being dragged.
  */
-const SwipeableDrawer = ({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position = "bottom", ...others }) => {
+const SwipeableDrawer = forwardRef(({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position = "bottom", ...others }, ref) => {
     const drawerRefs = useRef(null);
+    useImperativeHandle(ref, () => drawerRefs.current);
     const [isDocked, setIsDocked] = useState(keepMountedWhenClosed && !open);
     const { handlers, isDragging, dragDistance } = useSwipeHandlers({
         ref: drawerRefs,
@@ -449,7 +441,8 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, children, keepMountedWh
         }
     }, [drawerStyle, drawerRefs]);
     return (jsxs(Drawer, { className: cvaSwipeableDrawer({ docked: isDocked, className }), "data-docked": isDocked, keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRefs, ...others, children: [jsx(DrawerPuller, { ...handlers }), children] }));
-};
+});
+SwipeableDrawer.displayName = "SwipeableDrawer";
 const cvaSwipeableDrawer = cvaMerge([], {
     variants: {
         docked: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -9,7 +9,7 @@ export interface SwipeableDrawerProps extends DrawerProps {
  * The component manages its docked state based on the open prop and keepMountedWhenClosed prop.
  * It also applies styles dynamically based on whether the drawer is being dragged.
  */
-export declare const SwipeableDrawer: ({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position, ...others }: SwipeableDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SwipeableDrawer: import("react").ForwardRefExoticComponent<SwipeableDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const cvaSwipeableDrawer: (props?: ({
     docked?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;