@trackunit/react-components 0.1.405 → 0.1.407

package/index.cjs.js

@@ -1813,23 +1813,28 @@ const cvaDialog = cssClassVarianceUtilities.cvaMerge([
             bottom: "bottom-0 left-0 right-0 h-fit w-full rounded-t-lg",
         },
         sidebarMode: {
-            closed: "translate-y-[calc(100%-2.2rem)] rounded-t-lg",
-            half: "translate-y-[30%] rounded-t-lg",
-            full: "h-full translate-y-0 rounded-none",
+            "semi-closed": "translate-y-[calc(100%-2.2rem)]",
+            "1/3": "translate-y-2/3",
+            "2/3": "translate-y-1/3",
+            full: "translate-y-0",
+            "semi-full": "translate-y-5",
+            closed: "translate-y-full",
         },
         isLargeScreen: {
             true: "",
-            false: "bottom-0 left-0 right-0 w-full w-full sm:rounded-none",
+            false: "bottom-0 left-0 right-0 h-full w-full rounded-t-lg",
         },
         open: {
             true: "",
             false: "",
         },
     },
-    defaultVariants: {
-        position: "left",
-    },
     compoundVariants: [
+        {
+            isLargeScreen: false,
+            open: false,
+            className: "translate-y-full",
+        },
         {
             isLargeScreen: true,
             open: true,
@@ -1880,10 +1885,21 @@ const cvaDialog = cssClassVarianceUtilities.cvaMerge([
         },
     ],
 });
-const cvaDialogContainer = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-full", "flex-col"]);
-const cvaSwipeContainer = cssClassVarianceUtilities.cvaMerge(["mb-4", "flex", "items-center", "justify-center", "lg:hidden"]);
+const cvaDialogContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "overflow-hidden", "rounded-[inherit]"], {
+    variants: {
+        sidebarMode: {
+            "semi-closed": "h-auto",
+            "1/3": "h-[34%]",
+            "2/3": "h-[67%]",
+            "semi-full": "h-[calc(100%-1.25rem)]",
+            full: "h-full",
+            closed: "h-auto",
+        },
+    },
+});
+const cvaSwipeContainer = cssClassVarianceUtilities.cvaMerge(["my-4", "flex", "items-center", "justify-center", "lg:hidden"]);
 const cvaSwipeIcon = cssClassVarianceUtilities.cvaMerge(["block", "h-1", "w-10", "rounded-full", "bg-gray-400"]);
-const cvaToogleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "relative"], {
+const cvaToogleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "absolute"], {
     variants: {
         position: {
             left: "right-[-24px] top-[calc(50%-24px)]",
@@ -1920,7 +1936,7 @@ const cvaToogleButton = cssClassVarianceUtilities.cvaMerge([
     },
 });
 const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
-    "fixed",
+    "absolute",
     "flex",
     "items-center",
     "justify-center",
@@ -2017,15 +2033,14 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
         if (!open) {
             return "closed";
         }
-        return isLargeScreen ? "full" : "half";
+        return isLargeScreen ? "full" : "2/3";
     };
     const [sidebarMode, setSidebarMode] = React.useState(initialSidebarMode);
     const [isVisible, setIsVisible] = React.useState(open);
     const [isAnimationStart, setStartAnimation] = React.useState(open);
     React.useEffect(() => {
         if (!isLargeScreen && open) {
-            setSidebarMode("half");
-            return;
+            setSidebarMode("2/3");
         }
         if (onToggle) {
             setStartAnimation(open);
@@ -2051,10 +2066,12 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     const handleSwipedUp = () => {
         setSidebarMode(prev => {
             switch (prev) {
-                case "closed":
-                    return "half";
-                case "half":
-                    return "full";
+                case "semi-closed":
+                    return "1/3";
+                case "1/3":
+                    return "2/3";
+                case "2/3":
+                    return "semi-full";
                 default:
                     return prev;
             }
@@ -2063,14 +2080,24 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     const handleSwipedDown = () => {
         setSidebarMode(prev => {
             switch (prev) {
-                case "full":
-                    return "half";
-                case "half":
-                    return "closed";
+                case "semi-full":
+                    return "2/3";
+                case "2/3":
+                    return "1/3";
+                case "1/3":
+                    return onClose ? "closed" : "semi-closed";
                 default:
                     return prev;
             }
         });
+        /*
+         * Within a mobile device context, when swiping down,
+         * if the Drawer is open a third and no onToggle function is provided,
+         * the Drawer will automatically be closed using the onClose function.
+         */
+        if (sidebarMode === "1/3" && !onToggle && onClose) {
+            onClose();
+        }
     };
     const handleAnimationEnd = () => {
         if (!open && !onToggle) {
@@ -2080,13 +2107,15 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     if (!isVisible && !onToggle) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [!disableOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsxRuntime.jsx("div", { ...handlers, className: cvaDialog({
+    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [!disableOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsxRuntime.jsxs("div", { ...handlers, className: cvaDialog({
                     sidebarMode: isLargeScreen ? null : sidebarMode,
                     isLargeScreen,
                     open: isAnimationStart,
-                    position,
+                    position: isLargeScreen ? position : undefined,
                     className: dialogClassName,
-                }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, onTransitionEnd: handleAnimationEnd, children: jsxRuntime.jsxs("div", { className: cvaDialogContainer(), children: [jsxRuntime.jsx("div", { className: cvaSwipeContainer(), children: jsxRuntime.jsx("div", { className: cvaSwipeIcon() }) }), isLargeScreen && onToggle ? jsxRuntime.jsx(ToogleButton, { onToggle: onToggle, open: open, position: position }) : null, children] }) })] }));
+                }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, onTransitionEnd: handleAnimationEnd, children: [isLargeScreen && onToggle ? jsxRuntime.jsx(ToogleButton, { onToggle: onToggle, open: open, position: position }) : null, jsxRuntime.jsxs("div", { className: cvaDialogContainer({
+                            sidebarMode: isLargeScreen ? "full" : sidebarMode,
+                        }), children: [jsxRuntime.jsx("div", { className: cvaSwipeContainer(), children: jsxRuntime.jsx("div", { className: cvaSwipeIcon() }) }), children] })] })] }));
 };
 
 const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -1793,23 +1793,28 @@ const cvaDialog = cvaMerge([
             bottom: "bottom-0 left-0 right-0 h-fit w-full rounded-t-lg",
         },
         sidebarMode: {
-            closed: "translate-y-[calc(100%-2.2rem)] rounded-t-lg",
-            half: "translate-y-[30%] rounded-t-lg",
-            full: "h-full translate-y-0 rounded-none",
+            "semi-closed": "translate-y-[calc(100%-2.2rem)]",
+            "1/3": "translate-y-2/3",
+            "2/3": "translate-y-1/3",
+            full: "translate-y-0",
+            "semi-full": "translate-y-5",
+            closed: "translate-y-full",
         },
         isLargeScreen: {
             true: "",
-            false: "bottom-0 left-0 right-0 w-full w-full sm:rounded-none",
+            false: "bottom-0 left-0 right-0 h-full w-full rounded-t-lg",
         },
         open: {
             true: "",
             false: "",
         },
     },
-    defaultVariants: {
-        position: "left",
-    },
     compoundVariants: [
+        {
+            isLargeScreen: false,
+            open: false,
+            className: "translate-y-full",
+        },
         {
             isLargeScreen: true,
             open: true,
@@ -1860,10 +1865,21 @@ const cvaDialog = cvaMerge([
         },
     ],
 });
-const cvaDialogContainer = cvaMerge(["relative", "flex", "h-full", "flex-col"]);
-const cvaSwipeContainer = cvaMerge(["mb-4", "flex", "items-center", "justify-center", "lg:hidden"]);
+const cvaDialogContainer = cvaMerge(["flex", "flex-col", "overflow-hidden", "rounded-[inherit]"], {
+    variants: {
+        sidebarMode: {
+            "semi-closed": "h-auto",
+            "1/3": "h-[34%]",
+            "2/3": "h-[67%]",
+            "semi-full": "h-[calc(100%-1.25rem)]",
+            full: "h-full",
+            closed: "h-auto",
+        },
+    },
+});
+const cvaSwipeContainer = cvaMerge(["my-4", "flex", "items-center", "justify-center", "lg:hidden"]);
 const cvaSwipeIcon = cvaMerge(["block", "h-1", "w-10", "rounded-full", "bg-gray-400"]);
-const cvaToogleContainer = cvaMerge(["z-8", "relative"], {
+const cvaToogleContainer = cvaMerge(["z-8", "absolute"], {
     variants: {
         position: {
             left: "right-[-24px] top-[calc(50%-24px)]",
@@ -1900,7 +1916,7 @@ const cvaToogleButton = cvaMerge([
     },
 });
 const cvaOverlayContainer = cvaMerge([
-    "fixed",
+    "absolute",
     "flex",
     "items-center",
     "justify-center",
@@ -1997,15 +2013,14 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
         if (!open) {
             return "closed";
         }
-        return isLargeScreen ? "full" : "half";
+        return isLargeScreen ? "full" : "2/3";
     };
     const [sidebarMode, setSidebarMode] = useState(initialSidebarMode);
     const [isVisible, setIsVisible] = useState(open);
     const [isAnimationStart, setStartAnimation] = useState(open);
     useEffect(() => {
         if (!isLargeScreen && open) {
-            setSidebarMode("half");
-            return;
+            setSidebarMode("2/3");
         }
         if (onToggle) {
             setStartAnimation(open);
@@ -2031,10 +2046,12 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     const handleSwipedUp = () => {
         setSidebarMode(prev => {
             switch (prev) {
-                case "closed":
-                    return "half";
-                case "half":
-                    return "full";
+                case "semi-closed":
+                    return "1/3";
+                case "1/3":
+                    return "2/3";
+                case "2/3":
+                    return "semi-full";
                 default:
                     return prev;
             }
@@ -2043,14 +2060,24 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     const handleSwipedDown = () => {
         setSidebarMode(prev => {
             switch (prev) {
-                case "full":
-                    return "half";
-                case "half":
-                    return "closed";
+                case "semi-full":
+                    return "2/3";
+                case "2/3":
+                    return "1/3";
+                case "1/3":
+                    return onClose ? "closed" : "semi-closed";
                 default:
                     return prev;
             }
         });
+        /*
+         * Within a mobile device context, when swiping down,
+         * if the Drawer is open a third and no onToggle function is provided,
+         * the Drawer will automatically be closed using the onClose function.
+         */
+        if (sidebarMode === "1/3" && !onToggle && onClose) {
+            onClose();
+        }
     };
     const handleAnimationEnd = () => {
         if (!open && !onToggle) {
@@ -2060,13 +2087,15 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     if (!isVisible && !onToggle) {
         return null;
     }
-    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [!disableOverlay ? jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsx("div", { ...handlers, className: cvaDialog({
+    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [!disableOverlay ? jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsxs("div", { ...handlers, className: cvaDialog({
                     sidebarMode: isLargeScreen ? null : sidebarMode,
                     isLargeScreen,
                     open: isAnimationStart,
-                    position,
+                    position: isLargeScreen ? position : undefined,
                     className: dialogClassName,
-                }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, onTransitionEnd: handleAnimationEnd, children: jsxs("div", { className: cvaDialogContainer(), children: [jsx("div", { className: cvaSwipeContainer(), children: jsx("div", { className: cvaSwipeIcon() }) }), isLargeScreen && onToggle ? jsx(ToogleButton, { onToggle: onToggle, open: open, position: position }) : null, children] }) })] }));
+                }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, onTransitionEnd: handleAnimationEnd, children: [isLargeScreen && onToggle ? jsx(ToogleButton, { onToggle: onToggle, open: open, position: position }) : null, jsxs("div", { className: cvaDialogContainer({
+                            sidebarMode: isLargeScreen ? "full" : sidebarMode,
+                        }), children: [jsx("div", { className: cvaSwipeContainer(), children: jsx("div", { className: cvaSwipeIcon() }) }), children] })] })] }));
 };
 
 const cvaSkeletonLine = cvaMerge([

package/package.json

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

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

@@ -8,7 +8,7 @@ export interface DrawerProps extends CommonProps {
     /**
      * The onClose handler for the drawer.
      */
-    onClose?: (event: React.MouseEvent | KeyboardEvent) => void;
+    onClose?: (event?: React.MouseEvent | KeyboardEvent) => void;
     /**
      * The handler for toggling the drawer state.
      */

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

@@ -1,10 +1,12 @@
 export declare const cvaDialog: (props?: ({
     position?: "left" | "right" | "top" | "bottom" | null | undefined;
-    sidebarMode?: "closed" | "half" | "full" | null | undefined;
+    sidebarMode?: "semi-closed" | "1/3" | "2/3" | "full" | "semi-full" | "closed" | null | undefined;
     isLargeScreen?: boolean | null | undefined;
     open?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaDialogContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaDialogContainer: (props?: ({
+    sidebarMode?: "semi-closed" | "1/3" | "2/3" | "full" | "semi-full" | "closed" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaSwipeContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaSwipeIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaToogleContainer: (props?: ({