@trackunit/react-drawer 0.1.23 → 0.1.24

package/index.cjs.js

@@ -163,13 +163,13 @@ const cvaDrawer = cssClassVarianceUtilities.cvaMerge(["z-toast", "pointer-events
         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"],
         },
     },
 });
@@ -407,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,
@@ -442,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';
@@ -161,13 +161,13 @@ const cvaDrawer = cvaMerge(["z-toast", "pointer-events-auto", "absolute", "flex-
         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"],
         },
     },
 });
@@ -405,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,
@@ -440,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.23",
+  "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;