@trackunit/react-components 0.1.392 → 0.1.393

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 };
 };
 
@@ -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 };
 };
 
@@ -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.393",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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;