@trackunit/react-drawer 1.15.11 → 1.15.15

package/index.cjs.js

@@ -185,6 +185,18 @@ const cvaDrawerContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col",
 const TRANSITION_DURATION = 100;
 const DEFAULT_POSITION = "left";
 const NOOP$1 = () => void 0;
+const drawerReducer = (state, action) => {
+    switch (action.type) {
+        case "open":
+            return { shouldRender: true, mode: "open" };
+        case "close":
+            return { ...state, mode: "closed" };
+        case "transitionEnd":
+            return state.mode === "closed" ? { ...state, shouldRender: false } : state;
+        default:
+            return state;
+    }
+};
 /**
  * Drawers components can be switched between open and closed states.
  * They start closed but can be temporarily opened, appearing on top of other content until the user chooses a section.
@@ -246,34 +258,35 @@ const Drawer = ({ open = false, // Default to closed
 onClose = NOOP$1, onOpen = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, "data-testid": dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
     const { isSm } = reactComponents.useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
-    const [shouldRender, setShouldRender] = react.useState(open);
-    const [mode, setMode] = react.useState(open ? "open" : "closed");
+    const [drawerState, dispatch] = react.useReducer(drawerReducer, {
+        shouldRender: open,
+        mode: open ? "open" : "closed",
+    });
     const onOpenRef = react.useRef(onOpen);
     react.useEffect(() => {
         onOpenRef.current = onOpen;
     }, [onOpen]);
     react.useEffect(() => {
         if (open) {
-            setShouldRender(true);
+            dispatch({ type: "open" });
             setTimeout(() => {
-                setMode("open");
                 onOpenRef.current();
             }, TRANSITION_DURATION);
         }
         else {
-            setMode("closed");
+            dispatch({ type: "close" });
         }
     }, [open]);
     const handleAnimationEnd = react.useCallback((transitionEvent) => {
-        if (mode === "closed" && transitionEvent.propertyName === "transform") {
-            setShouldRender(false);
+        if (transitionEvent.propertyName === "transform") {
+            dispatch({ type: "transitionEnd" });
         }
-    }, [mode, setShouldRender]);
-    if (!shouldRender && !keepMountedWhenClosed) {
+    }, []);
+    if (!drawerState.shouldRender && !keepMountedWhenClosed) {
         return null;
     }
-    const content = (jsxRuntime.jsxs("div", { className: containerClassName, children: [hasOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: mode === "open" }) : null, jsxRuntime.jsx("div", { className: cvaDrawer({
-                    mode,
+    const content = (jsxRuntime.jsxs("div", { className: containerClassName, children: [hasOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: drawerState.mode === "open" }) : null, jsxRuntime.jsx("div", { className: cvaDrawer({
+                    mode: drawerState.mode,
                     position: position,
                     className,
                 }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: ref, ...others, children: jsxRuntime.jsx("div", { className: cvaDrawerContent({ position }), children: children }) })] }));

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, useMeasure, useMergeRefs, useScrollBlock } from '@trackunit/react-components';
-import { useEffect, useState, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
+import { useEffect, useReducer, useRef, useCallback, useState, useMemo, useImperativeHandle } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useSwipeable } from 'react-swipeable';
 
@@ -183,6 +183,18 @@ const cvaDrawerContent = cvaMerge(["flex", "flex-col", "h-full", "shadow-lg"], {
 const TRANSITION_DURATION = 100;
 const DEFAULT_POSITION = "left";
 const NOOP$1 = () => void 0;
+const drawerReducer = (state, action) => {
+    switch (action.type) {
+        case "open":
+            return { shouldRender: true, mode: "open" };
+        case "close":
+            return { ...state, mode: "closed" };
+        case "transitionEnd":
+            return state.mode === "closed" ? { ...state, shouldRender: false } : state;
+        default:
+            return state;
+    }
+};
 /**
  * Drawers components can be switched between open and closed states.
  * They start closed but can be temporarily opened, appearing on top of other content until the user chooses a section.
@@ -244,34 +256,35 @@ const Drawer = ({ open = false, // Default to closed
 onClose = NOOP$1, onOpen = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, "data-testid": dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
     const { isSm } = useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
-    const [shouldRender, setShouldRender] = useState(open);
-    const [mode, setMode] = useState(open ? "open" : "closed");
+    const [drawerState, dispatch] = useReducer(drawerReducer, {
+        shouldRender: open,
+        mode: open ? "open" : "closed",
+    });
     const onOpenRef = useRef(onOpen);
     useEffect(() => {
         onOpenRef.current = onOpen;
     }, [onOpen]);
     useEffect(() => {
         if (open) {
-            setShouldRender(true);
+            dispatch({ type: "open" });
             setTimeout(() => {
-                setMode("open");
                 onOpenRef.current();
             }, TRANSITION_DURATION);
         }
         else {
-            setMode("closed");
+            dispatch({ type: "close" });
         }
     }, [open]);
     const handleAnimationEnd = useCallback((transitionEvent) => {
-        if (mode === "closed" && transitionEvent.propertyName === "transform") {
-            setShouldRender(false);
+        if (transitionEvent.propertyName === "transform") {
+            dispatch({ type: "transitionEnd" });
         }
-    }, [mode, setShouldRender]);
-    if (!shouldRender && !keepMountedWhenClosed) {
+    }, []);
+    if (!drawerState.shouldRender && !keepMountedWhenClosed) {
         return null;
     }
-    const content = (jsxs("div", { className: containerClassName, children: [hasOverlay ? jsx(Overlay, { onClose: onClose, open: mode === "open" }) : null, jsx("div", { className: cvaDrawer({
-                    mode,
+    const content = (jsxs("div", { className: containerClassName, children: [hasOverlay ? jsx(Overlay, { onClose: onClose, open: drawerState.mode === "open" }) : null, jsx("div", { className: cvaDrawer({
+                    mode: drawerState.mode,
                     position: position,
                     className,
                 }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: ref, ...others, children: jsx("div", { className: cvaDrawerContent({ position }), children: children }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "1.15.11",
+  "version": "1.15.15",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "react": "19.0.0",
     "react-swipeable": "^7.0.1",
-    "@trackunit/react-components": "1.18.20",
-    "@trackunit/css-class-variance-utilities": "1.11.74",
-    "@trackunit/ui-icons": "1.11.71",
-    "@trackunit/i18n-library-translation": "1.13.10"
+    "@trackunit/react-components": "1.18.22",
+    "@trackunit/css-class-variance-utilities": "1.11.75",
+    "@trackunit/ui-icons": "1.11.72",
+    "@trackunit/i18n-library-translation": "1.13.13"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",