@trackunit/react-drawer 1.3.23 → 1.3.29

package/index.cjs.js

@@ -55,7 +55,7 @@ const setupLibraryTranslations = () => {
  * @param {object} props - The Overlay component properties
  * @param {boolean} props.open - Open status of the Overlay
  * @param {Function} props.onClose - Callback function when Overlay is closed
- * @returns {JSX.Element|null} The Overlay component
+ * @returns {ReactElement|null} The Overlay component
  */
 const Overlay = ({ open, onClose }) => {
     react.useEffect(() => {
@@ -182,10 +182,9 @@ const NOOP$1 = () => void 0;
  * To close the drawer, users can either click outside of it or press the Esc key.
  *
  * @param {DrawerProps} props - The props for the Drawer component
- * @returns {JSX.Element | null} Drawer component
  */
-const Drawer = react.forwardRef(({ open = false, // Default to closed
-onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ...others }, ref) => {
+const Drawer = ({ open = false, // Default to closed
+onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
     const { isSm } = reactComponents.useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const [shouldRender, setShouldRender] = react.useState(open);
@@ -213,7 +212,7 @@ onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, data
                     className,
                 }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: ref, ...others, children: jsxRuntime.jsx("div", { className: cvaDrawerContent({ position }), children: children }) })] }));
     return shouldUsePortal ? jsxRuntime.jsx(reactComponents.Portal, { children: content }) : content;
-});
+};
 Drawer.displayName = "Drawer";
 
 const NOOP = () => void 0;
@@ -406,11 +405,10 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
  * @param {CommonProps} props - The props for the DrawerPuller component.
  * @param {string} [props.className] - Additional class names to apply to the puller element.
  * @param {Ref<HTMLDivElement>} ref - The ref to be forwarded to the root div element.
- * @returns {JSX.Element} The rendered DrawerPuller component.
  */
-const DrawerPuller = react.forwardRef(({ className, ...props }, ref) => {
+const DrawerPuller = ({ className, ref, ...props }) => {
     return (jsxRuntime.jsx("div", { className: cvaPuller({ className }), "data-testid": "drawer-puller", ...props, ref: ref, children: jsxRuntime.jsx("div", { className: cvaPullerIcon() }) }));
-});
+};
 DrawerPuller.displayName = "DrawerPuller";
 const cvaPuller = cssClassVarianceUtilities.cvaMerge(["pt-1", "pb-4", "flex", "items-center", "justify-center"]);
 const cvaPullerIcon = cssClassVarianceUtilities.cvaMerge(["block", "h-1", "w-8", "rounded-full", "bg-gray-400"]);
@@ -425,7 +423,7 @@ const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
  * 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 = react.forwardRef(({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ...others }, ref) => {
+const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
     const drawerRef = react.useRef(null);
     const containerRef = react.useRef(container ?? null);
     const containerGeometry = reactComponents.useGeometry(containerRef);
@@ -561,7 +559,7 @@ const SwipeableDrawer = react.forwardRef(({ open, onClose, onOpenGesture, onSnap
         }
     }, [drawerStyle, drawerRef, open]);
     return (jsxRuntime.jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRef, ...others, children: [jsxRuntime.jsx(DrawerPuller, { ...handlers }), children] }));
-});
+};
 SwipeableDrawer.displayName = "SwipeableDrawer";
 const cvaSwipeableDrawer = cssClassVarianceUtilities.cvaMerge([]);
 

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { useViewportBreakpoints, Portal, Icon, useGeometry } from '@trackunit/react-components';
-import { useEffect, forwardRef, useState, useCallback, useRef, useImperativeHandle, useMemo } from 'react';
+import { useEffect, useState, useCallback, useRef, useImperativeHandle, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useSwipeable } from 'react-swipeable';
 
@@ -53,7 +53,7 @@ const setupLibraryTranslations = () => {
  * @param {object} props - The Overlay component properties
  * @param {boolean} props.open - Open status of the Overlay
  * @param {Function} props.onClose - Callback function when Overlay is closed
- * @returns {JSX.Element|null} The Overlay component
+ * @returns {ReactElement|null} The Overlay component
  */
 const Overlay = ({ open, onClose }) => {
     useEffect(() => {
@@ -180,10 +180,9 @@ const NOOP$1 = () => void 0;
  * To close the drawer, users can either click outside of it or press the Esc key.
  *
  * @param {DrawerProps} props - The props for the Drawer component
- * @returns {JSX.Element | null} Drawer component
  */
-const Drawer = forwardRef(({ open = false, // Default to closed
-onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ...others }, ref) => {
+const Drawer = ({ open = false, // Default to closed
+onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
     const { isSm } = useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const [shouldRender, setShouldRender] = useState(open);
@@ -211,7 +210,7 @@ onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, data
                     className,
                 }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: ref, ...others, children: jsx("div", { className: cvaDrawerContent({ position }), children: children }) })] }));
     return shouldUsePortal ? jsx(Portal, { children: content }) : content;
-});
+};
 Drawer.displayName = "Drawer";
 
 const NOOP = () => void 0;
@@ -404,11 +403,10 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
  * @param {CommonProps} props - The props for the DrawerPuller component.
  * @param {string} [props.className] - Additional class names to apply to the puller element.
  * @param {Ref<HTMLDivElement>} ref - The ref to be forwarded to the root div element.
- * @returns {JSX.Element} The rendered DrawerPuller component.
  */
-const DrawerPuller = forwardRef(({ className, ...props }, ref) => {
+const DrawerPuller = ({ className, ref, ...props }) => {
     return (jsx("div", { className: cvaPuller({ className }), "data-testid": "drawer-puller", ...props, ref: ref, children: jsx("div", { className: cvaPullerIcon() }) }));
-});
+};
 DrawerPuller.displayName = "DrawerPuller";
 const cvaPuller = cvaMerge(["pt-1", "pb-4", "flex", "items-center", "justify-center"]);
 const cvaPullerIcon = cvaMerge(["block", "h-1", "w-8", "rounded-full", "bg-gray-400"]);
@@ -423,7 +421,7 @@ const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
  * 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 = forwardRef(({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ...others }, ref) => {
+const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
     const drawerRef = useRef(null);
     const containerRef = useRef(container ?? null);
     const containerGeometry = useGeometry(containerRef);
@@ -559,7 +557,7 @@ const SwipeableDrawer = forwardRef(({ open, onClose, onOpenGesture, onSnapPointC
         }
     }, [drawerStyle, drawerRef, open]);
     return (jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRef, ...others, children: [jsx(DrawerPuller, { ...handlers }), children] }));
-});
+};
 SwipeableDrawer.displayName = "SwipeableDrawer";
 const cvaSwipeableDrawer = cvaMerge([]);
 

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "1.3.23",
+  "version": "1.3.29",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=20.x"
   },
   "dependencies": {
-    "react": "18.3.1",
+    "react": "19.0.0",
     "react-swipeable": "^7.0.1",
-    "@trackunit/react-components": "1.4.21",
-    "@trackunit/css-class-variance-utilities": "1.3.21",
-    "@trackunit/ui-icons": "1.3.21",
-    "@trackunit/i18n-library-translation": "1.3.22"
+    "@trackunit/react-components": "1.4.27",
+    "@trackunit/css-class-variance-utilities": "1.3.27",
+    "@trackunit/ui-icons": "1.3.27",
+    "@trackunit/i18n-library-translation": "1.3.28"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Drawer/Drawer.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
+import { Ref } from "react";
 import type { DrawerPosition } from "../../types";
 export declare const TRANSITION_DURATION = 100;
 export interface DrawerRefsHandle {
@@ -45,6 +46,10 @@ export interface DrawerProps extends CommonProps {
      * The class name for the drawer container.
      */
     containerClassName?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  * Drawers components can be switched between open and closed states.
@@ -52,6 +57,8 @@ export interface DrawerProps extends CommonProps {
  * To close the drawer, users can either click outside of it or press the Esc key.
  *
  * @param {DrawerProps} props - The props for the Drawer component
- * @returns {JSX.Element | null} Drawer component
  */
-export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Drawer: {
+    ({ open, onClose, hasOverlay, position, children, dataTestId, className, renderInPortal, keepMountedWhenClosed, containerClassName, ref, ...others }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/src/components/Overlay/Overlay.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 interface OverlayProps {
     open: boolean;
     onClose?: () => void;
@@ -8,7 +9,7 @@ interface OverlayProps {
  * @param {object} props - The Overlay component properties
  * @param {boolean} props.open - Open status of the Overlay
  * @param {Function} props.onClose - Callback function when Overlay is closed
- * @returns {JSX.Element|null} The Overlay component
+ * @returns {ReactElement|null} The Overlay component
  */
-export declare const Overlay: ({ open, onClose }: OverlayProps) => JSX.Element | null;
+export declare const Overlay: ({ open, onClose }: OverlayProps) => ReactElement | null;
 export {};

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

@@ -1,10 +1,15 @@
 import { CommonProps } from "@trackunit/react-components";
+import { type Ref } from "react";
 /**
  * DrawerPuller is a React component that renders a puller element for a swipeable drawer.
  *
  * @param {CommonProps} props - The props for the DrawerPuller component.
  * @param {string} [props.className] - Additional class names to apply to the puller element.
  * @param {Ref<HTMLDivElement>} ref - The ref to be forwarded to the root div element.
- * @returns {JSX.Element} The rendered DrawerPuller component.
  */
-export declare const DrawerPuller: import("react").ForwardRefExoticComponent<CommonProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerPuller: {
+    ({ className, ref, ...props }: CommonProps & {
+        ref?: Ref<HTMLDivElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 import { type DrawerProps } from "../Drawer/Drawer";
 export interface SwipeableDrawerProps extends DrawerProps {
     onOpenGesture?: () => void;
@@ -5,6 +6,10 @@ export interface SwipeableDrawerProps extends DrawerProps {
     snapPoints?: (number | string)[];
     activeSnapPoint?: number | string | null;
     container?: HTMLElement | null;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  *
@@ -13,5 +18,8 @@ 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: import("react").ForwardRefExoticComponent<SwipeableDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SwipeableDrawer: {
+    ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position, snapPoints, activeSnapPoint: activeSnapPointProp, container, ref, ...others }: SwipeableDrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const cvaSwipeableDrawer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/hooks/useSwipeHandlers.d.ts

@@ -1,6 +1,6 @@
 import { type RefObject } from "react";
 interface UseSwipeHandlersProps {
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     closingThreshold: number;
     onCloseGesture?: () => void;
     onOpenGesture?: () => void;