@trackunit/react-components 0.4.34 → 0.5.1

package/index.cjs.js

@@ -13,9 +13,8 @@ var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
 var isEqual = require('lodash/isEqual');
-var reactRouter = require('@tanstack/react-router');
 var usehooksTs = require('usehooks-ts');
-var reactSwipeable = require('react-swipeable');
+var reactRouter = require('@tanstack/react-router');
 var react = require('@floating-ui/react');
 var omit = require('lodash/omit');
 var tailwindMerge = require('tailwind-merge');
@@ -1310,6 +1309,62 @@ const getWindowSize = () => {
     }
 };
 
+const SCROLL_DEBOUNCE_TIME = 50;
+/**
+ * Hook for getting detecting scroll values.
+ *
+ * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
+ * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
+ */
+const useScrollDetection = (elementRef) => {
+    const [isScrollable, setIsScrollable] = React.useState(false);
+    const [isAtTop, setIsAtTop] = React.useState(true);
+    const [isAtBottom, setIsAtBottom] = React.useState(false);
+    const [scrollPosition, setScrollPosition] = React.useState({ top: 0, bottom: 0 });
+    const observerRef = React.useRef();
+    const checkScrollable = React.useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const hasOverflow = element.scrollHeight > element.clientHeight;
+        setIsScrollable(hasOverflow);
+    }, [elementRef]);
+    const checkScrollPosition = React.useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = element;
+        setIsAtTop(scrollTop === 0);
+        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) < 1);
+        setScrollPosition(prev => ({ ...prev, top: scrollTop, bottom: clientHeight - scrollTop }));
+    }, [elementRef]);
+    const debouncedCheckScrollPosition = usehooksTs.useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        // Initial checks
+        checkScrollable();
+        checkScrollPosition();
+        observerRef.current = new ResizeObserver(() => {
+            checkScrollable();
+            checkScrollPosition();
+        });
+        observerRef.current.observe(element);
+        element.addEventListener("scroll", debouncedCheckScrollPosition);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+            element.removeEventListener("scroll", debouncedCheckScrollPosition);
+        };
+    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition]);
+    return { isScrollable, isAtTop, isAtBottom, scrollPosition };
+};
+
 /**
  * A useRef that updates its given value whenever it changes.
  *
@@ -1881,331 +1936,6 @@ 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 cvaDialog = cssClassVarianceUtilities.cvaMerge([
-    "z-toast",
-    "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: {
-            "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 h-full w-full rounded-t-lg",
-        },
-        open: {
-            true: "",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            isLargeScreen: false,
-            open: false,
-            className: "translate-y-full",
-        },
-        {
-            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(["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", "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",
-    "items-center",
-    "justify-center",
-    "border-gray-300",
-    "bg-neutral-50",
-    "bg-center",
-    "bg-no-repeat",
-    "shadow-md",
-], {
-    variants: {
-        position: {
-            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([
-    "absolute",
-    "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",
-        },
-    },
-});
-
-/**
- * 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 Overlay = ({ open, onClose }) => {
-    React.useEffect(() => {
-        if (!onClose) {
-            return;
-        }
-        const handleEscape = (event) => {
-            if (event.key === "Escape") {
-                onClose(event);
-            }
-        };
-        if (open) {
-            window.addEventListener("keyup", handleEscape);
-        }
-        return () => {
-            window.removeEventListener("keyup", handleEscape);
-        };
-    }, [open, onClose]);
-    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, className, dialogClassName, }) => {
-    const { width } = useResize();
-    const isLargeScreen = width >= 1024;
-    const initialSidebarMode = () => {
-        if (!open) {
-            return "closed";
-        }
-        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("2/3");
-        }
-        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 "semi-closed":
-                    return "1/3";
-                case "1/3":
-                    return "2/3";
-                case "2/3":
-                    return "semi-full";
-                default:
-                    return prev;
-            }
-        });
-    };
-    const handleSwipedDown = () => {
-        setSidebarMode(prev => {
-            switch (prev) {
-                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) {
-            setIsVisible(false);
-        }
-    };
-    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.jsxs("div", { ...handlers, className: cvaDialog({
-                    sidebarMode: isLargeScreen ? null : sidebarMode,
-                    isLargeScreen,
-                    open: isAnimationStart,
-                    position: isLargeScreen ? position : undefined,
-                    className: dialogClassName,
-                }), "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([
     "rounded-md",
     "h-3",
@@ -5164,7 +4894,6 @@ exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
 exports.CompletionStatusIndicator = CompletionStatusIndicator;
 exports.CopyableText = CopyableText;
-exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.EmptyValue = EmptyValue;
 exports.ExternalLink = ExternalLink;
@@ -5250,6 +4979,7 @@ exports.usePopoverContext = usePopoverContext;
 exports.usePrevious = usePrevious;
 exports.usePrompt = usePrompt;
 exports.useResize = useResize;
+exports.useScrollDetection = useScrollDetection;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;
 exports.useViewportSize = useViewportSize;

package/index.esm.js

@@ -12,9 +12,8 @@ import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import isEqual from 'lodash/isEqual';
+import { useDebounceCallback, useCopyToClipboard } from 'usehooks-ts';
 import { Link, useBlocker } from '@tanstack/react-router';
-import { useCopyToClipboard } from 'usehooks-ts';
-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 { twMerge } from 'tailwind-merge';
@@ -1290,6 +1289,62 @@ const getWindowSize = () => {
     }
 };
 
+const SCROLL_DEBOUNCE_TIME = 50;
+/**
+ * Hook for getting detecting scroll values.
+ *
+ * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
+ * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
+ */
+const useScrollDetection = (elementRef) => {
+    const [isScrollable, setIsScrollable] = useState(false);
+    const [isAtTop, setIsAtTop] = useState(true);
+    const [isAtBottom, setIsAtBottom] = useState(false);
+    const [scrollPosition, setScrollPosition] = useState({ top: 0, bottom: 0 });
+    const observerRef = useRef();
+    const checkScrollable = useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const hasOverflow = element.scrollHeight > element.clientHeight;
+        setIsScrollable(hasOverflow);
+    }, [elementRef]);
+    const checkScrollPosition = useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = element;
+        setIsAtTop(scrollTop === 0);
+        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) < 1);
+        setScrollPosition(prev => ({ ...prev, top: scrollTop, bottom: clientHeight - scrollTop }));
+    }, [elementRef]);
+    const debouncedCheckScrollPosition = useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        // Initial checks
+        checkScrollable();
+        checkScrollPosition();
+        observerRef.current = new ResizeObserver(() => {
+            checkScrollable();
+            checkScrollPosition();
+        });
+        observerRef.current.observe(element);
+        element.addEventListener("scroll", debouncedCheckScrollPosition);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+            element.removeEventListener("scroll", debouncedCheckScrollPosition);
+        };
+    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition]);
+    return { isScrollable, isAtTop, isAtBottom, scrollPosition };
+};
+
 /**
  * A useRef that updates its given value whenever it changes.
  *
@@ -1861,331 +1916,6 @@ 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 cvaDialog = cvaMerge([
-    "z-toast",
-    "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: {
-            "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 h-full w-full rounded-t-lg",
-        },
-        open: {
-            true: "",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            isLargeScreen: false,
-            open: false,
-            className: "translate-y-full",
-        },
-        {
-            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(["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", "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",
-    "items-center",
-    "justify-center",
-    "border-gray-300",
-    "bg-neutral-50",
-    "bg-center",
-    "bg-no-repeat",
-    "shadow-md",
-], {
-    variants: {
-        position: {
-            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([
-    "absolute",
-    "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",
-        },
-    },
-});
-
-/**
- * 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 Overlay = ({ open, onClose }) => {
-    useEffect(() => {
-        if (!onClose) {
-            return;
-        }
-        const handleEscape = (event) => {
-            if (event.key === "Escape") {
-                onClose(event);
-            }
-        };
-        if (open) {
-            window.addEventListener("keyup", handleEscape);
-        }
-        return () => {
-            window.removeEventListener("keyup", handleEscape);
-        };
-    }, [open, onClose]);
-    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, className, dialogClassName, }) => {
-    const { width } = useResize();
-    const isLargeScreen = width >= 1024;
-    const initialSidebarMode = () => {
-        if (!open) {
-            return "closed";
-        }
-        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("2/3");
-        }
-        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 "semi-closed":
-                    return "1/3";
-                case "1/3":
-                    return "2/3";
-                case "2/3":
-                    return "semi-full";
-                default:
-                    return prev;
-            }
-        });
-    };
-    const handleSwipedDown = () => {
-        setSidebarMode(prev => {
-            switch (prev) {
-                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) {
-            setIsVisible(false);
-        }
-    };
-    if (!isVisible && !onToggle) {
-        return null;
-    }
-    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: isLargeScreen ? position : undefined,
-                    className: dialogClassName,
-                }), "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([
     "rounded-md",
     "h-3",
@@ -5132,4 +4862,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.4.34",
+  "version": "0.5.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -23,7 +23,6 @@
     "@testing-library/react": "15.0.6",
     "@floating-ui/react": "^0.26.25",
     "@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/index.d.ts

@@ -6,7 +6,6 @@ export * from "./Card";
 export * from "./Collapse";
 export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./CopyableText";
-export * from "./Drawer";
 export * from "./EmptyState/EmptyState";
 export * from "./EmptyValue/EmptyValue";
 export * from "./ExternalLink/ExternalLink";
@@ -41,4 +40,3 @@ export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./VirtualizedList/VirtualizedList";
 export * from "./Widget";
-export * from "./buttons";

package/src/hooks/index.d.ts

@@ -13,6 +13,7 @@ export * from "./useIsTextCutOff";
 export * from "./useOptionallyElevatedState";
 export * from "./usePrevious";
 export * from "./useResize";
+export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";
 export * from "./useViewportSize";

package/src/hooks/useScrollDetection.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from "react";
+/**
+ * Hook for getting detecting scroll values.
+ *
+ * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
+ * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
+ */
+export declare const useScrollDetection: (elementRef: RefObject<HTMLElement>) => {
+    isScrollable: boolean;
+    isAtTop: boolean;
+    isAtBottom: boolean;
+    scrollPosition: {
+        top: number;
+        bottom: number;
+    };
+};

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

@@ -1,37 +0,0 @@
-import { CommonProps } from "../../common";
-export type Position = "left" | "right" | "top" | "bottom";
-export interface DrawerProps extends CommonProps {
-    /**
-     * Specifies whether the sidebar drawer is open or not.
-     */
-    open?: boolean;
-    /**
-     * The onClose handler for the drawer.
-     */
-    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.
-     */
-    position?: Position;
-    /**
-     * The child node that will be rendered inside the drawer.
-     */
-    children?: React.ReactNode;
-    dialogClassName?: string;
-}
-/**
- * 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, onToggle, onClose, disableOverlay, position, children, dataTestId, className, dialogClassName, }: DrawerProps) => JSX.Element | null;

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

@@ -1,20 +0,0 @@
-export declare const cvaDialog: (props?: ({
-    position?: "left" | "right" | "top" | "bottom" | 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?: ({
-    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?: ({
-    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

@@ -1,14 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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