@trackunit/react-components 0.1.390 → 0.1.391

package/index.cjs.js

@@ -15,6 +15,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var isEqual = require('lodash/isEqual');
 var reactUse = require('react-use');
 var reactRouter = require('@tanstack/react-router');
+var reactSwipeable = require('react-swipeable');
 var react = require('@floating-ui/react');
 var omit = require('lodash/omit');
 var reactHelmetAsync = require('react-helmet-async');
@@ -1817,54 +1818,300 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     return (jsxRuntime.jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
-const cvaDrawerOverlay = cssClassVarianceUtilities.cvaMerge([
-    "bg-black/30",
-    "block",
+const cvaDialog = cssClassVarianceUtilities.cvaMerge([
+    "fixed",
     "z-toast",
-    "inset-0",
+    "pointer-events-auto",
     "absolute",
+    "transform",
+    "flex-col",
+    "bg-neutral-50",
+    "transition-transform",
+    "duration-300",
+    "ease-in-out",
+    "shadow-lg",
+], {
+    variants: {
+        position: {
+            left: "left-0 top-0 h-full w-fit rounded-r-lg",
+            right: "right-0 top-0 h-full w-fit rounded-l-lg",
+            top: "left-0 top-0 h-fit w-full rounded-b-lg",
+            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",
+        },
+        isLargeScreen: {
+            true: "",
+            false: "bottom-0 left-0 right-0 w-full w-full sm:rounded-none",
+        },
+        open: {
+            true: "",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        position: "left",
+    },
+    compoundVariants: [
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "left",
+            className: "translate-x-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "left",
+            className: "-translate-x-full",
+        },
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "right",
+            className: "translate-x-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "right",
+            className: "translate-x-full",
+        },
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "top",
+            className: "translate-y-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "top",
+            className: "-translate-y-full",
+        },
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "bottom",
+            className: "translate-y-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "bottom",
+            className: "translate-y-full",
+        },
+    ],
+});
+const cvaDialogContainer = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-full", "flex-col", "p-4"]);
+const cvaSwipeContainer = cssClassVarianceUtilities.cvaMerge(["mb-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", "absolute"], {
+    variants: {
+        position: {
+            left: "right-[-24px] top-[calc(50%-24px)]",
+            right: "left-[-24px] top-[calc(50%-24px)]",
+            top: "bottom-[-24px] left-[calc(50%-24px)]",
+            bottom: "left-[calc(50%-24px)] top-[-24px]",
+        },
+    },
+    defaultVariants: {
+        position: "left",
+    },
+});
+const cvaToogleButton = cssClassVarianceUtilities.cvaMerge([
+    "flex",
     "cursor-pointer",
-    "animate-fade-in-fast",
-]);
-const cvaDrawerCard = cssClassVarianceUtilities.cvaMerge(["fixed", "z-toast"], {
+    "items-center",
+    "justify-center",
+    "border-gray-300",
+    "bg-neutral-50",
+    "bg-center",
+    "bg-no-repeat",
+    "shadow-md",
+], {
     variants: {
         position: {
-            left: "animate-slide-in-left top-0 left-0 h-full rounded-l-none",
-            right: "animate-slide-in-right top-0 right-0 h-full rounded-r-none",
-            bottom: "animate-slide-in-bottom right-0 left-0 bottom-0 w-full rounded-b-none",
-            top: "animate-slide-in-top top-0 left-0 w-full rounded-t-none",
+            left: "h-12 w-6 rounded-r-lg",
+            right: "h-12 w-6 rounded-l-lg",
+            top: "h-6 w-12 rounded-b-lg",
+            bottom: "h-6 w-12 rounded-t-lg",
         },
     },
     defaultVariants: {
         position: "left",
     },
 });
+const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
+    "fixed",
+    "flex",
+    "items-center",
+    "justify-center",
+    "inset-0",
+    "bg-black/30",
+    "bg-opacity-50",
+    "transition-opacity",
+    "duration-200",
+    "ease-in-out",
+    "opacity-100",
+], {
+    variants: {
+        open: {
+            true: "opacity-1 z-popover",
+            false: "z-[-1] opacity-0",
+        },
+    },
+});
 
 /**
- * The drawer provides a slideover which can be used to provide access to different locations in the application.
- 
- * @param {DrawerProps} props - The props for the Drawer component
- * @returns {JSX.Element} Drawer component
+ * Overlay Component
+ *
+ * @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
  */
-const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, position = "left", className, dataTestId, }) => {
-    const { context } = react.useFloating();
+const Overlay = ({ open, onClose }) => {
     React.useEffect(() => {
-        // Close overlay when pressing escape button.
-        const onKeyPress = (e) => {
-            if (e.key === "Escape") {
-                onClose();
+        if (!onClose) {
+            return;
+        }
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                onClose(event);
             }
         };
         if (open) {
-            window.addEventListener("keyup", onKeyPress);
+            window.addEventListener("keyup", handleEscape);
         }
         return () => {
-            window.removeEventListener("keyup", onKeyPress);
+            window.removeEventListener("keyup", handleEscape);
         };
     }, [open, onClose]);
-    return (jsxRuntime.jsx(react.FloatingFocusManager, { context: context, children: open ? (jsxRuntime.jsxs("div", { id: "drawer", children: [!disableOverlay && (jsxRuntime.jsx("div", { "aria-hidden": open, className: cvaDrawerOverlay(), id: "drawer__overlay", onClick: onClose })), jsxRuntime.jsx(Card, { "aria-hidden": open, className: cvaDrawerCard({ position, className }), "data-testid": dataTestId, id: "drawer__card", children: children })] })) : (
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        jsxRuntime.jsx(jsxRuntime.Fragment, {})) }));
+    const handleClick = (event) => {
+        if (onClose) {
+            onClose(event);
+        }
+    };
+    return (jsxRuntime.jsx("div", { "aria-hidden": open, className: cvaOverlayContainer({ open }), "data-testid": "sidebar-overlay", onClick: handleClick }));
+};
+
+const getIconName = (open, position) => {
+    switch (position) {
+        case "left":
+            return open ? "ChevronLeft" : "ChevronRight";
+        case "right":
+            return open ? "ChevronRight" : "ChevronLeft";
+        case "top":
+            return open ? "ChevronUp" : "ChevronDown";
+        case "bottom":
+            return open ? "ChevronDown" : "ChevronUp";
+        default:
+            return open ? "ChevronLeft" : "ChevronRight";
+    }
+};
+/**
+ * ToggleButton is a React functional component that returns a button with a chevron icon.
+ * The direction of the chevron changes depending on the state of the 'open' prop and
+ * the side the button is positioned ('position' prop).
+ * The button might be disabled based on the 'disableButton' prop.
+ *
+ * @param {object} props - The properties passed to the component
+ * @param {boolean} props.open - Indicates if the button is in "open" state
+ * @param {Function} [props.onToggle] - Optional callback function for when the button is clicked
+ * @param {Position} props.position - The position of the button relative to its container
+ */
+const ToogleButton = ({ open, position, onToggle }) => {
+    const name = getIconName(open, position);
+    return (jsxRuntime.jsx("div", { className: cvaToogleContainer({ position }), children: jsxRuntime.jsx("button", { className: cvaToogleButton({ position }), "data-testid": "toggle-button", onClick: onToggle, children: jsxRuntime.jsx(Icon, { name: name }) }) }));
+};
+
+/**
+ * MapSidebar is a sidebar component used with Maps.
+ * It provides a slide over sidebar drawer which can be used for displaying map related information or controls.
+ *
+ * @param {DrawerProps} props - The props for the MapSidebar component
+ * @returns {JSX.Element | null} Drawer component
+ */
+const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, }) => {
+    const { width } = useResize();
+    const isLargeScreen = width >= 1024;
+    const initialSidebarMode = () => {
+        if (!open) {
+            return "closed";
+        }
+        return isLargeScreen ? "full" : "half";
+    };
+    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;
+        }
+        if (onToggle) {
+            setStartAnimation(open);
+            return;
+        }
+        manageVisibilityAndAnimation(open);
+    }, [onToggle, isLargeScreen, open]);
+    const manageVisibilityAndAnimation = (isOpen) => {
+        if (!isOpen) {
+            setStartAnimation(false);
+            return;
+        }
+        setIsVisible(true);
+        setTimeout(() => {
+            setStartAnimation(true);
+        }, 150);
+    };
+    const handlers = reactSwipeable.useSwipeable({
+        onSwipedUp: () => !isLargeScreen && handleSwipedUp(),
+        onSwipedDown: () => !isLargeScreen && handleSwipedDown(),
+        trackMouse: true,
+    });
+    const handleSwipedUp = () => {
+        setSidebarMode(prev => {
+            switch (prev) {
+                case "closed":
+                    return "half";
+                case "half":
+                    return "full";
+                default:
+                    return prev;
+            }
+        });
+    };
+    const handleSwipedDown = () => {
+        setSidebarMode(prev => {
+            switch (prev) {
+                case "full":
+                    return "half";
+                case "half":
+                    return "closed";
+                default:
+                    return prev;
+            }
+        });
+    };
+    const handleAnimationEnd = () => {
+        if (!open && !onToggle) {
+            setIsVisible(false);
+        }
+    };
+    if (!isVisible && !onToggle) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, children: [!disableOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsxRuntime.jsx("div", { ...handlers, className: cvaDialog({
+                    sidebarMode: isLargeScreen ? null : sidebarMode,
+                    isLargeScreen,
+                    open: isAnimationStart,
+                    position,
+                }), "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] }) })] }));
 };
 
 const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([
@@ -4334,6 +4581,44 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
+const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
+const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
+    variants: {
+        selected: {
+            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
+            false: [],
+        },
+    },
+});
+const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
+    variants: {
+        disabledAndSelected: {
+            true: ["text-slate-800"],
+            false: [],
+        },
+        maxWidth: {
+            sm: ["max-w-[80px]"],
+            md: ["max-w-[120px]"],
+        },
+    },
+});
+
+/**
+ *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
+ *
+ * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
+ * @returns {JSX.Element}  ToggleGroup component
+ */
+const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+                onClick && onClick();
+                setSelected(item.id);
+            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
+};
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
+    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+};
+
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
     variants: {
         size: {
@@ -4540,44 +4825,6 @@ const WidgetBody = ({ density = "auto", children, dataTestId, className, disable
     return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
-const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
-const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
-    variants: {
-        selected: {
-            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
-            false: [],
-        },
-    },
-});
-const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
-    variants: {
-        disabledAndSelected: {
-            true: ["text-slate-800"],
-            false: [],
-        },
-        maxWidth: {
-            sm: ["max-w-[80px]"],
-            md: ["max-w-[120px]"],
-        },
-    },
-});
-
-/**
- *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
- *
- * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
- * @returns {JSX.Element}  ToggleGroup component
- */
-const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
-                onClick && onClick();
-                setSelected(item.id);
-            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
-};
-const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
-    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
-};
-
 const cvaClickable = cssClassVarianceUtilities.cvaMerge([
     "shadow-lg",
     "rounded-lg",

package/index.esm.js

@@ -14,7 +14,8 @@ import { Slottable, Slot } from '@radix-ui/react-slot';
 import isEqual from 'lodash/isEqual';
 import { usePrevious, useMeasure, useCopyToClipboard } from 'react-use';
 import { Link, useBlocker } from '@tanstack/react-router';
-import { useFloating, FloatingFocusManager, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
+import { useSwipeable } from 'react-swipeable';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { twMerge } from 'tailwind-merge';
@@ -1797,54 +1798,300 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
-const cvaDrawerOverlay = cvaMerge([
-    "bg-black/30",
-    "block",
+const cvaDialog = cvaMerge([
+    "fixed",
     "z-toast",
-    "inset-0",
+    "pointer-events-auto",
     "absolute",
+    "transform",
+    "flex-col",
+    "bg-neutral-50",
+    "transition-transform",
+    "duration-300",
+    "ease-in-out",
+    "shadow-lg",
+], {
+    variants: {
+        position: {
+            left: "left-0 top-0 h-full w-fit rounded-r-lg",
+            right: "right-0 top-0 h-full w-fit rounded-l-lg",
+            top: "left-0 top-0 h-fit w-full rounded-b-lg",
+            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",
+        },
+        isLargeScreen: {
+            true: "",
+            false: "bottom-0 left-0 right-0 w-full w-full sm:rounded-none",
+        },
+        open: {
+            true: "",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        position: "left",
+    },
+    compoundVariants: [
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "left",
+            className: "translate-x-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "left",
+            className: "-translate-x-full",
+        },
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "right",
+            className: "translate-x-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "right",
+            className: "translate-x-full",
+        },
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "top",
+            className: "translate-y-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "top",
+            className: "-translate-y-full",
+        },
+        {
+            isLargeScreen: true,
+            open: true,
+            position: "bottom",
+            className: "translate-y-0",
+        },
+        {
+            isLargeScreen: true,
+            open: false,
+            position: "bottom",
+            className: "translate-y-full",
+        },
+    ],
+});
+const cvaDialogContainer = cvaMerge(["relative", "flex", "h-full", "flex-col", "p-4"]);
+const cvaSwipeContainer = cvaMerge(["mb-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", "absolute"], {
+    variants: {
+        position: {
+            left: "right-[-24px] top-[calc(50%-24px)]",
+            right: "left-[-24px] top-[calc(50%-24px)]",
+            top: "bottom-[-24px] left-[calc(50%-24px)]",
+            bottom: "left-[calc(50%-24px)] top-[-24px]",
+        },
+    },
+    defaultVariants: {
+        position: "left",
+    },
+});
+const cvaToogleButton = cvaMerge([
+    "flex",
     "cursor-pointer",
-    "animate-fade-in-fast",
-]);
-const cvaDrawerCard = cvaMerge(["fixed", "z-toast"], {
+    "items-center",
+    "justify-center",
+    "border-gray-300",
+    "bg-neutral-50",
+    "bg-center",
+    "bg-no-repeat",
+    "shadow-md",
+], {
     variants: {
         position: {
-            left: "animate-slide-in-left top-0 left-0 h-full rounded-l-none",
-            right: "animate-slide-in-right top-0 right-0 h-full rounded-r-none",
-            bottom: "animate-slide-in-bottom right-0 left-0 bottom-0 w-full rounded-b-none",
-            top: "animate-slide-in-top top-0 left-0 w-full rounded-t-none",
+            left: "h-12 w-6 rounded-r-lg",
+            right: "h-12 w-6 rounded-l-lg",
+            top: "h-6 w-12 rounded-b-lg",
+            bottom: "h-6 w-12 rounded-t-lg",
         },
     },
     defaultVariants: {
         position: "left",
     },
 });
+const cvaOverlayContainer = cvaMerge([
+    "fixed",
+    "flex",
+    "items-center",
+    "justify-center",
+    "inset-0",
+    "bg-black/30",
+    "bg-opacity-50",
+    "transition-opacity",
+    "duration-200",
+    "ease-in-out",
+    "opacity-100",
+], {
+    variants: {
+        open: {
+            true: "opacity-1 z-popover",
+            false: "z-[-1] opacity-0",
+        },
+    },
+});
 
 /**
- * The drawer provides a slideover which can be used to provide access to different locations in the application.
- 
- * @param {DrawerProps} props - The props for the Drawer component
- * @returns {JSX.Element} Drawer component
+ * Overlay Component
+ *
+ * @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
  */
-const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, position = "left", className, dataTestId, }) => {
-    const { context } = useFloating();
+const Overlay = ({ open, onClose }) => {
     useEffect(() => {
-        // Close overlay when pressing escape button.
-        const onKeyPress = (e) => {
-            if (e.key === "Escape") {
-                onClose();
+        if (!onClose) {
+            return;
+        }
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                onClose(event);
             }
         };
         if (open) {
-            window.addEventListener("keyup", onKeyPress);
+            window.addEventListener("keyup", handleEscape);
         }
         return () => {
-            window.removeEventListener("keyup", onKeyPress);
+            window.removeEventListener("keyup", handleEscape);
         };
     }, [open, onClose]);
-    return (jsx(FloatingFocusManager, { context: context, children: open ? (jsxs("div", { id: "drawer", children: [!disableOverlay && (jsx("div", { "aria-hidden": open, className: cvaDrawerOverlay(), id: "drawer__overlay", onClick: onClose })), jsx(Card, { "aria-hidden": open, className: cvaDrawerCard({ position, className }), "data-testid": dataTestId, id: "drawer__card", children: children })] })) : (
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        jsx(Fragment, {})) }));
+    const handleClick = (event) => {
+        if (onClose) {
+            onClose(event);
+        }
+    };
+    return (jsx("div", { "aria-hidden": open, className: cvaOverlayContainer({ open }), "data-testid": "sidebar-overlay", onClick: handleClick }));
+};
+
+const getIconName = (open, position) => {
+    switch (position) {
+        case "left":
+            return open ? "ChevronLeft" : "ChevronRight";
+        case "right":
+            return open ? "ChevronRight" : "ChevronLeft";
+        case "top":
+            return open ? "ChevronUp" : "ChevronDown";
+        case "bottom":
+            return open ? "ChevronDown" : "ChevronUp";
+        default:
+            return open ? "ChevronLeft" : "ChevronRight";
+    }
+};
+/**
+ * ToggleButton is a React functional component that returns a button with a chevron icon.
+ * The direction of the chevron changes depending on the state of the 'open' prop and
+ * the side the button is positioned ('position' prop).
+ * The button might be disabled based on the 'disableButton' prop.
+ *
+ * @param {object} props - The properties passed to the component
+ * @param {boolean} props.open - Indicates if the button is in "open" state
+ * @param {Function} [props.onToggle] - Optional callback function for when the button is clicked
+ * @param {Position} props.position - The position of the button relative to its container
+ */
+const ToogleButton = ({ open, position, onToggle }) => {
+    const name = getIconName(open, position);
+    return (jsx("div", { className: cvaToogleContainer({ position }), children: jsx("button", { className: cvaToogleButton({ position }), "data-testid": "toggle-button", onClick: onToggle, children: jsx(Icon, { name: name }) }) }));
+};
+
+/**
+ * MapSidebar is a sidebar component used with Maps.
+ * It provides a slide over sidebar drawer which can be used for displaying map related information or controls.
+ *
+ * @param {DrawerProps} props - The props for the MapSidebar component
+ * @returns {JSX.Element | null} Drawer component
+ */
+const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, }) => {
+    const { width } = useResize();
+    const isLargeScreen = width >= 1024;
+    const initialSidebarMode = () => {
+        if (!open) {
+            return "closed";
+        }
+        return isLargeScreen ? "full" : "half";
+    };
+    const [sidebarMode, setSidebarMode] = useState(initialSidebarMode);
+    const [isVisible, setIsVisible] = useState(open);
+    const [isAnimationStart, setStartAnimation] = useState(open);
+    useEffect(() => {
+        if (!isLargeScreen && open) {
+            setSidebarMode("half");
+            return;
+        }
+        if (onToggle) {
+            setStartAnimation(open);
+            return;
+        }
+        manageVisibilityAndAnimation(open);
+    }, [onToggle, isLargeScreen, open]);
+    const manageVisibilityAndAnimation = (isOpen) => {
+        if (!isOpen) {
+            setStartAnimation(false);
+            return;
+        }
+        setIsVisible(true);
+        setTimeout(() => {
+            setStartAnimation(true);
+        }, 150);
+    };
+    const handlers = useSwipeable({
+        onSwipedUp: () => !isLargeScreen && handleSwipedUp(),
+        onSwipedDown: () => !isLargeScreen && handleSwipedDown(),
+        trackMouse: true,
+    });
+    const handleSwipedUp = () => {
+        setSidebarMode(prev => {
+            switch (prev) {
+                case "closed":
+                    return "half";
+                case "half":
+                    return "full";
+                default:
+                    return prev;
+            }
+        });
+    };
+    const handleSwipedDown = () => {
+        setSidebarMode(prev => {
+            switch (prev) {
+                case "full":
+                    return "half";
+                case "half":
+                    return "closed";
+                default:
+                    return prev;
+            }
+        });
+    };
+    const handleAnimationEnd = () => {
+        if (!open && !onToggle) {
+            setIsVisible(false);
+        }
+    };
+    if (!isVisible && !onToggle) {
+        return null;
+    }
+    return (jsxs("div", { "data-testid": dataTestId, children: [!disableOverlay ? jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsx("div", { ...handlers, className: cvaDialog({
+                    sidebarMode: isLargeScreen ? null : sidebarMode,
+                    isLargeScreen,
+                    open: isAnimationStart,
+                    position,
+                }), "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] }) })] }));
 };
 
 const cvaSkeletonLine = cvaMerge([
@@ -4314,6 +4561,44 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
+const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
+const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
+    variants: {
+        selected: {
+            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
+            false: [],
+        },
+    },
+});
+const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
+    variants: {
+        disabledAndSelected: {
+            true: ["text-slate-800"],
+            false: [],
+        },
+        maxWidth: {
+            sm: ["max-w-[80px]"],
+            md: ["max-w-[120px]"],
+        },
+    },
+});
+
+/**
+ *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
+ *
+ * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
+ * @returns {JSX.Element}  ToggleGroup component
+ */
+const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
+    return (jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+                onClick && onClick();
+                setSelected(item.id);
+            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
+};
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
+    return isIconOnly ? (jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+};
+
 const cvaValueBar = cvaMerge(["w-full"], {
     variants: {
         size: {
@@ -4520,44 +4805,6 @@ const WidgetBody = ({ density = "auto", children, dataTestId, className, disable
     return (jsx("div", { className: cvaWidgetBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, children: children }));
 };
 
-const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
-const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
-    variants: {
-        selected: {
-            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
-            false: [],
-        },
-    },
-});
-const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
-    variants: {
-        disabledAndSelected: {
-            true: ["text-slate-800"],
-            false: [],
-        },
-        maxWidth: {
-            sm: ["max-w-[80px]"],
-            md: ["max-w-[120px]"],
-        },
-    },
-});
-
-/**
- *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
- *
- * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
- * @returns {JSX.Element}  ToggleGroup component
- */
-const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
-    return (jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
-                onClick && onClick();
-                setSelected(item.id);
-            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
-};
-const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
-    return isIconOnly ? (jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
-};
-
 const cvaClickable = cvaMerge([
     "shadow-lg",
     "rounded-lg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.390",
+  "version": "0.1.391",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -23,6 +23,7 @@
     "@testing-library/react": "15.0.6",
     "@floating-ui/react": "^0.26.6",
     "@tanstack/react-router": "1.47.1",
+    "react-swipeable": "^7.0.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "@trackunit/react-table-pagination": "*",

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

@@ -1,15 +1,22 @@
-import * as React from "react";
 import { CommonProps } from "../../common";
 export type Position = "left" | "right" | "top" | "bottom";
 export interface DrawerProps extends CommonProps {
     /**
-     * Specifies whether the drawer is open or not.
+     * Specifies whether the sidebar drawer is open or not.
      */
-    open: boolean;
+    open?: boolean;
     /**
      * The onClose handler for the drawer.
      */
-    onClose?: () => void;
+    onClose?: (event: React.MouseEvent | KeyboardEvent) => void;
+    /**
+     * The handler for toggling the drawer state.
+     */
+    onToggle?: (event: React.MouseEvent) => void;
+    /**
+     * Whether the drawer needs an overlay or not. Without the overlay, user will have to handle mechanism for closing the drawer.
+     */
+    disableOverlay?: boolean;
     /**
      * The position of the drawer.
      */
@@ -18,15 +25,12 @@ export interface DrawerProps extends CommonProps {
      * The child node that will be rendered inside the drawer.
      */
     children?: React.ReactNode;
-    /**
-     * Whether the drawer needs an overlay or not. Without the overlay, user will have to handle mechanism for closing the drawer.
-     */
-    disableOverlay?: boolean;
 }
 /**
- * The drawer provides a slideover which can be used to provide access to different locations in the application.
- 
- * @param {DrawerProps} props - The props for the Drawer component
- * @returns {JSX.Element} Drawer component
+ * MapSidebar is a sidebar component used with Maps.
+ * It provides a slide over sidebar drawer which can be used for displaying map related information or controls.
+ *
+ * @param {DrawerProps} props - The props for the MapSidebar component
+ * @returns {JSX.Element | null} Drawer component
  */
-export declare const Drawer: ({ open, onClose, children, disableOverlay, position, className, dataTestId, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ open, onToggle, onClose, disableOverlay, position, children, dataTestId, }: DrawerProps) => JSX.Element | null;

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

@@ -1,4 +1,18 @@
-export declare const cvaDrawerOverlay: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaDrawerCard: (props?: ({
-    position?: "left" | "right" | "bottom" | "top" | null | undefined;
+export declare const cvaDialog: (props?: ({
+    position?: "left" | "right" | "top" | "bottom" | null | undefined;
+    sidebarMode?: "closed" | "half" | "full" | 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 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?: ({
+    position?: "left" | "right" | "top" | "bottom" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaToogleButton: (props?: ({
+    position?: "left" | "right" | "top" | "bottom" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaOverlayContainer: (props?: ({
+    open?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,14 @@
+interface OverlayProps {
+    open: boolean;
+    onClose?: (event: React.MouseEvent | KeyboardEvent) => void;
+}
+/**
+ * Overlay Component
+ *
+ * @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
+ */
+declare const Overlay: ({ open, onClose }: OverlayProps) => JSX.Element | null;
+export default Overlay;

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

@@ -0,0 +1,19 @@
+import { Position } from "./Drawer";
+interface ToogleButtonProps {
+    open: boolean;
+    onToggle?: (event: React.MouseEvent) => void;
+    position: Position;
+}
+/**
+ * ToggleButton is a React functional component that returns a button with a chevron icon.
+ * The direction of the chevron changes depending on the state of the 'open' prop and
+ * the side the button is positioned ('position' prop).
+ * The button might be disabled based on the 'disableButton' prop.
+ *
+ * @param {object} props - The properties passed to the component
+ * @param {boolean} props.open - Indicates if the button is in "open" state
+ * @param {Function} [props.onToggle] - Optional callback function for when the button is clicked
+ * @param {Position} props.position - The position of the button relative to its container
+ */
+declare const ToogleButton: ({ open, position, onToggle }: ToogleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ToogleButton;

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

@@ -0,0 +1 @@
+export * from "./Drawer";

package/src/components/index.d.ts

@@ -5,7 +5,7 @@ export * from "./Card";
 export * from "./Collapse";
 export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./CopyableText";
-export * from "./Drawer/Drawer";
+export * from "./Drawer";
 export * from "./EmptyState/EmptyState";
 export * from "./EmptyValue/EmptyValue";
 export * from "./ExternalLink/ExternalLink";
@@ -34,9 +34,9 @@ export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";
 export * from "./Timeline/Timeline";
+export * from "./ToggleGroup/ToggleGroup";
 export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./VirtualizedList/VirtualizedList";
 export * from "./Widget";
 export * from "./buttons";
-export * from "./ToggleGroup/ToggleGroup";