@trackunit/react-components 0.1.392 → 0.1.394

package/index.cjs.js

@@ -1037,6 +1037,9 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
         setIsRunning(false); // Update the status when stopped
     };
     const startTimeouts = () => {
+        if (isRunning) {
+            return; // Prevent multiple timeouts from running
+        }
         startTimeout();
         setIsRunning(true); // Update the status when started
     };
@@ -1312,55 +1315,29 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
-/**
- * Returns a callback that will be called when the visibility state of the document changes.
- */
-const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
-    React.useEffect(() => {
-        const handleVisibilityChange = () => {
-            if (document.visibilityState === targetState) {
-                onChange();
-            }
-        };
-        window.addEventListener("visibilitychange", handleVisibilityChange);
-        return () => {
-            window.removeEventListener("visibilitychange", handleVisibilityChange);
-        };
-    }, [onChange, targetState]);
-};
-
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
  */
-const useWindowActivity = ({ onFocus, onBlur } = {}) => {
+const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: undefined }) => {
     const [focused, setFocused] = React.useState(hasFocus());
+    const onFocusInternal = React.useCallback(() => {
+        setFocused(hasFocus());
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const onBlurInternal = React.useCallback(() => {
+        setFocused(hasFocus());
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
     React.useEffect(() => {
-        const onFocusInternal = () => {
-            setFocused(true);
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-        };
-        const onBlurInternal = () => {
-            setFocused(false);
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-        };
-        const handleVisibilityChange = () => {
-            if (!document.hasFocus()) {
-                onBlurInternal();
-            }
-            else {
-                onFocusInternal();
-            }
-        };
-        window.addEventListener("visibilitychange", handleVisibilityChange);
-        window.addEventListener("focus", handleVisibilityChange);
-        window.addEventListener("blur", handleVisibilityChange);
+        setFocused(hasFocus()); // Focus for additional renders
+        window.addEventListener("focus", onFocusInternal);
+        window.addEventListener("blur", onBlurInternal);
         return () => {
-            window.removeEventListener("visibilitychange", handleVisibilityChange);
-            window.removeEventListener("focus", handleVisibilityChange);
-            window.removeEventListener("blur", handleVisibilityChange);
+            window.removeEventListener("focus", onFocusInternal);
+            window.removeEventListener("blur", onBlurInternal);
         };
-    }, [onBlur, onFocus]);
+    }, [onBlurInternal, onFocusInternal]);
     return { focused };
 };
 
@@ -1819,7 +1796,6 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
 };
 
 const cvaDialog = cssClassVarianceUtilities.cvaMerge([
-    "fixed",
     "z-toast",
     "pointer-events-auto",
     "absolute",
@@ -1906,10 +1882,10 @@ const cvaDialog = cssClassVarianceUtilities.cvaMerge([
         },
     ],
 });
-const cvaDialogContainer = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-full", "flex-col", "p-4"]);
+const cvaDialogContainer = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-full", "flex-col"]);
 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"], {
+const cvaToogleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "relative"], {
     variants: {
         position: {
             left: "right-[-24px] top-[calc(50%-24px)]",
@@ -2036,7 +2012,7 @@ const ToogleButton = ({ open, position, onToggle }) => {
  * @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 Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, className, dialogClassName, }) => {
     const { width } = useResize();
     const isLargeScreen = width >= 1024;
     const initialSidebarMode = () => {
@@ -2106,11 +2082,12 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     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({
+    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({
                     sidebarMode: isLargeScreen ? null : sidebarMode,
                     isLargeScreen,
                     open: isAnimationStart,
                     position,
+                    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] }) })] }));
 };
 
@@ -4945,5 +4922,4 @@ exports.usePrompt = usePrompt;
 exports.useResize = useResize;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;
-exports.useVisibilityChange = useVisibilityChange;
 exports.useWindowActivity = useWindowActivity;

package/index.esm.js

@@ -1017,6 +1017,9 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
         setIsRunning(false); // Update the status when stopped
     };
     const startTimeouts = () => {
+        if (isRunning) {
+            return; // Prevent multiple timeouts from running
+        }
         startTimeout();
         setIsRunning(true); // Update the status when started
     };
@@ -1292,55 +1295,29 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
-/**
- * Returns a callback that will be called when the visibility state of the document changes.
- */
-const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
-    useEffect(() => {
-        const handleVisibilityChange = () => {
-            if (document.visibilityState === targetState) {
-                onChange();
-            }
-        };
-        window.addEventListener("visibilitychange", handleVisibilityChange);
-        return () => {
-            window.removeEventListener("visibilitychange", handleVisibilityChange);
-        };
-    }, [onChange, targetState]);
-};
-
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
  */
-const useWindowActivity = ({ onFocus, onBlur } = {}) => {
+const useWindowActivity = ({ onFocus, onBlur } = { onBlur: undefined, onFocus: undefined }) => {
     const [focused, setFocused] = useState(hasFocus());
+    const onFocusInternal = useCallback(() => {
+        setFocused(hasFocus());
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const onBlurInternal = useCallback(() => {
+        setFocused(hasFocus());
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
     useEffect(() => {
-        const onFocusInternal = () => {
-            setFocused(true);
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-        };
-        const onBlurInternal = () => {
-            setFocused(false);
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-        };
-        const handleVisibilityChange = () => {
-            if (!document.hasFocus()) {
-                onBlurInternal();
-            }
-            else {
-                onFocusInternal();
-            }
-        };
-        window.addEventListener("visibilitychange", handleVisibilityChange);
-        window.addEventListener("focus", handleVisibilityChange);
-        window.addEventListener("blur", handleVisibilityChange);
+        setFocused(hasFocus()); // Focus for additional renders
+        window.addEventListener("focus", onFocusInternal);
+        window.addEventListener("blur", onBlurInternal);
         return () => {
-            window.removeEventListener("visibilitychange", handleVisibilityChange);
-            window.removeEventListener("focus", handleVisibilityChange);
-            window.removeEventListener("blur", handleVisibilityChange);
+            window.removeEventListener("focus", onFocusInternal);
+            window.removeEventListener("blur", onBlurInternal);
         };
-    }, [onBlur, onFocus]);
+    }, [onBlurInternal, onFocusInternal]);
     return { focused };
 };
 
@@ -1799,7 +1776,6 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
 };
 
 const cvaDialog = cvaMerge([
-    "fixed",
     "z-toast",
     "pointer-events-auto",
     "absolute",
@@ -1886,10 +1862,10 @@ const cvaDialog = cvaMerge([
         },
     ],
 });
-const cvaDialogContainer = cvaMerge(["relative", "flex", "h-full", "flex-col", "p-4"]);
+const cvaDialogContainer = cvaMerge(["relative", "flex", "h-full", "flex-col"]);
 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"], {
+const cvaToogleContainer = cvaMerge(["z-8", "relative"], {
     variants: {
         position: {
             left: "right-[-24px] top-[calc(50%-24px)]",
@@ -2016,7 +1992,7 @@ const ToogleButton = ({ open, position, onToggle }) => {
  * @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 Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, className, dialogClassName, }) => {
     const { width } = useResize();
     const isLargeScreen = width >= 1024;
     const initialSidebarMode = () => {
@@ -2086,11 +2062,12 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     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({
+    return (jsxs("div", { className: className, "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,
+                    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] }) })] }));
 };
 
@@ -4829,4 +4806,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };

package/package.json

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

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

@@ -25,6 +25,7 @@ export interface DrawerProps extends CommonProps {
      * The child node that will be rendered inside the drawer.
      */
     children?: React.ReactNode;
+    dialogClassName?: string;
 }
 /**
  * MapSidebar is a sidebar component used with Maps.
@@ -33,4 +34,4 @@ export interface DrawerProps extends CommonProps {
  * @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, }: DrawerProps) => JSX.Element | null;
+export declare const Drawer: ({ open, onToggle, onClose, disableOverlay, position, children, dataTestId, className, dialogClassName, }: DrawerProps) => JSX.Element | null;

package/src/hooks/index.d.ts

@@ -14,5 +14,4 @@ export * from "./useOptionallyElevatedState";
 export * from "./useResize";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";
-export * from "./useVisibilityChange";
 export * from "./useWindowActivity";

package/src/hooks/useVisibilityChange.d.ts

@@ -1,10 +0,0 @@
-type VisibilityState = "hidden" | "visible";
-interface VisibilityChangeOptions {
-    onChange: () => void;
-    targetState: VisibilityState;
-}
-/**
- * Returns a callback that will be called when the visibility state of the document changes.
- */
-export declare const useVisibilityChange: ({ onChange, targetState }: VisibilityChangeOptions) => void;
-export default useVisibilityChange;